Skip to content

Instantly share code, notes, and snippets.

@Ningensei848
Last active December 6, 2024 07:46
Show Gist options
  • Select an option

  • Save Ningensei848/dbd94d46708b15a15451b44c074f30ea to your computer and use it in GitHub Desktop.

Select an option

Save Ningensei848/dbd94d46708b15a15451b44c074f30ea to your computer and use it in GitHub Desktop.
どうやって文書を書く/残していくのがいいのかな

構造化文書と WYSIWYG

これはそうしす🛡29 Advent Calendar 2024の 5 日目の記事です

Adventar

前日(4 日目)の記事は『記憶について(Written by Eさん)』でした。 超記憶症候群(ハイパーサイメシア)という人々がいるらしいですが、私の幼少期にもこれに似た「サヴァン症候群」らしき子がいたのを思い出しました。 記憶能力に長けているといっても前者ほど広範ではなく、代わりに特定の特化領域のメモリが桁違いというものだったと思います (何百年前のカレンダーでも何曜日かわかったり、記録が残っているものであればその日に何があったか教えてくれたり)。

後半の慣れの話も興味深いと感じました:

脳は飽くまで臓器の一部であり、思考や記憶をはじめ、あらゆる行動に優劣を付ける事無く、ただ単純に効率化し続けている

リハビリの事例からもわかるように、小さなことから始めて少しずつ難化・複雑化させつつも継続することでそれを反復し習慣化する……

「何より大切なのは続けること、考えるのをやめないこと」というメッセージと受け取りました。 ご寄稿いただきありがとうございました。


さて、これを受けてではありませんが継続的に思考し、それを小さくアウトプットしていくために便利な文書の書き方である Markdown 記法(マークダウン; MD)についてご紹介します。

……その前に前提知識として構造化文書についてお伝えします。

構造化文書

MD について知るには、まず構造化文書 structured documentという概念について知る必要があります。

A structured document is an electronic document where some method of markup is used to identify the whole and parts of the document as having various meanings beyond their formatting.

構造化文書とは、文書の全体や部分を、書式を超えたさまざまな意味を持つものとして識別するために、何らかの方法でマークアップされた電子文書のことです。

"構造化文書とは - PDF、組版と文書変換のアンテナハウス株式会社" によれば、構造化文書とは「マークアップされた文書」のことです。 またマークアップとは、「宣言された文書構造の宣言にしたがって構造を明示する」作業である、としています。

……なんのことやらと思ったかもしれませんが、実はなんてことありません。 構造化文書と対置されるのが 平文(プレーンテキスト)であると認識できれば問題ないでしょう。 つまり簡単に言えば、①「書き方のルール」が存在する ②それに従って文章を装飾して文章を書けば、それは構造化文書であるといえる…ということです。

書き方のルール: マークアップ

日本語、英語、その他外国語含めてすべての言語には文法があり、それもまた「ルール」でしょう。 が、ここでいう「書き方のルール」とは、書面上でどのように文章を加工するか、組版作業者が理解できるような指示のことです (エディトリアル・マークアップ1と呼ばれています)。

エディトリアル・マークアップ

編集者が、テキストを再入力するための指示や組版作業者に対する指示を、著者の原稿に記入することをエディトリアル・マークアップという。 テキストの挿入、削除、置き換え、入れ替え、終了、分離、句読点の変更、ダッシュとハイフン、大文字化、小文字化、イタリックとボールド、段落のインデント、フラッシュ・ライト/レフト、縦方向の空きなどの指示をプリントされた原稿に記入する。 また、見出しを階層化して文章の構造を明確にし、テキストの表示方法―引用、箇条書き、テキストボックス―を区別する要素を指示する。

そして計算機の発展とともに、PC上で文書を作成するためのワードプロセッサがさまざまに作られました。 それまでは人と人が合意して解釈されていた「ルール」もとい取り決めを、計算機でも理解できるように上手く命令を出してやらねばなりません。 このような要求から生まれたのが「マークアップ言語 Markup Language」です。

マークアップ言語 Markup Language

エディトリアル・マークアップを下敷きにして生まれたマークアップ言語のもっとも重要な特徴は、機械可読 MachineReadable であることです。 ワードプロセッサが普及するまでは、組版作業者が目で見て指示を解釈し手作業で版組を行なっていましたが、マークアップ言語の登場によって時間もコストも大幅に短縮されることになりました。

他方、黎明期には種々様々なワープロが各々のMLを定義して、仕様が乱立し互換性もないという問題が生じました。 そうした状況から生まれた共通仕様が、Standard Generalized Markup Language(SGML)であり、現在の XML, HTML です。

XML

XML (Extensible Markup Language) は HTML に似たマークアップ言語ですが、使用するタグがあらかじめ定義されていません。 代わりに、ニーズに応じて自分自身でタグを定義します。 これは、格納、検索、共有が可能な形式でデータを格納するための強力な方法です。 最も重要なことは、XML の基本形式が標準化されているため、ローカルまたはインターネットを介して、システムやプラットフォーム間で XML を共有または送信する場合でも、標準化された XML 構文により、受信者はデータを解釈できるということです

<?xml version="1.0" encoding="UTF-8"?>
<message>
    <warning>
         Hello World
    </warning>
</message>

"Extensible" とは文字通り「拡張可能である」ことを意味していて、マークアップ元来の組版処理という目的を越えて、より多様な用途に利用されています。 例えば、ベクター形式の画像を描画するための SVG (Scalable Vector Graphics) や数式を記述する MathML, メタデータを表記するための RDF スキーマ (Resource Description Framework) なんかはデータ構造を表すことに特化しているし、中でも SAML(Security Assertion Markup Language) は シングルサインオン(SSO)にも使われている技術で有名2でしょう。

当然、組版処理にも使われており、.xlsx, .docx, .pptx に共通する X は これらを定義する Office Open XML のことを指しているものと推察できます。

HTML

HTML (HyperText Markup Language) は、ウェブページの構造を指定する記述言語です。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <link rel="author" href="mailto:[email protected]">
  <title lang="en">HyperText Markup Language - Wikipedia</title>
 </head>
 <body>
  <article>
   <h1 lang="en">HyperText Markup Language</h1>
   <p>HTMLは、<a href="http://ja.wikipedia.org/wiki/SGML">SGML</a>
      アプリケーションの一つで、ハイパーテキスト文書構造を定義するために使われ、
      ある程度機械が理解可能な言語で、
      写真の埋め込みや、フォームの作成、
      ハイパーテキストによるHTML間の連携が可能である。</p>
  </article>
 </body>を利用してワールド
      ワイドウェブ上で情報を発信するために作られ、
      ワールドワイドウェブの<strong>基幹的役割</strong>をなしている。
      情報を発信するための
</html>

web ページのソースを覗いたり開発者ツールを起動したりという経験があれば、おそらくHTMLがどのようなものか想像できるでしょう (SGMLから今のHTMLに至るまでの歴史的経緯や、Web の父と呼ばれるティム・バーナーズ=リーについての閑話3はまた別の機会に……)。

HTMLは「要素 Element 」によってマークアップされた文書であり、要素は始めと終わりを「タグ Tag」で囲まれています。 さらに HTML には「属性 Attribute」があり、これをブラウザが解釈して様々な追加情報を提供され影響を受けます。

Anatomy of an HTML element


XMLから派生してWeb描画に特化させたのがHTMLでそのため要素を表すタグの種類はXMLの自由度と比較すればごく限られた数でしかありません…… といいつつ、100種類以上もある上にそれぞれに要求される属性も異なり、すべてを把握して文書を作成するのには困難が伴うでしょう。

時代とともに発展し表現も豊かになった一方で、それを構成する人間のほうがマークアップに疲れてしまうという状況があります。 言い換えれば、ナントカ ML は機械可読だけどあんまり人にやさしくはないのです。

Markdown

Markdown 文書を記述するための軽量マークアップ言語 - Wikipedia

ようやく本論に入りますが、Markdown 記法を用いることでそれまでのマークアップ言語の煩雑さを緩和しつつ、機械可読性を維持できるようになります。

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

Markdown の開発者であるジョン・グルーバーによれば、読みやすく書きやすい平文を (X)HTML に変換するツール、あるいはそのマークアップ言語が Markdown です

The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

HTMLは出力のためのフォーマットであり、Markdown は書くためのフォーマットである

なるほどマークアップ言語における修飾の手間を減らして引き下げた(ダウンさせた)のだから、Markdown という命名にも頷けます。 具体的にどのぐらい簡単になったのか、次節で見てみましょう。

記法

以下に HTML およびそれと等価の Markdown を示します:

<h1>sample</h1>
<p><strong>This is sample text</strong>.</p>
<p>Markdown has some strong points:</p>
<ol>
    <li>simple</li>
    <li>light weight</li>
    <li>
        <a href="https://ja.wikipedia.org/wiki/WYSIWYG">WYSIWYG</a>
    </li>
</ol>
# sample

**This is sample text**.

Markdown has some strong points:

1. simple
2. light weight
3. [WYSIWYG](https://ja.wikipedia.org/wiki/WYSIWYG)

ずいぶんとすっきりと書けることがわかるでしょうか。

HTMLは要素をタグで表現するという制約があるせいで、文章を書いた後タグで囲むというひと手間が生じます。 Markdown においては、文中の一部に適用したい表現があるときだけは記号で囲む必要がありますが、それも多くて一つ二つ程度しかなく、いくつかのタグを使い分ける必要はありません。

表現のほとんどは行の先頭になんらかの記号あるいはいくつかのスペースを付与するだけで済みます。 タグほど種類が多くないので覚える手間も減らせます:

  1. #: シャープ
  2. *: アスタリスク
  3. _: アンダースコア
  4. ``: バッククォート
  5. >: スクエアブラケット(角かっこ)

具体的な仕様の詳細は、以下のドキュメントに詳しく掲載されています:

基本的な書き方とフォーマットの構文 - GitHub Docs

欠点

Markdown の利点はマークアップ言語の煩雑さを減らして構造化文書を書きやすくしているところですが、当然欠点もあります。 最も大きな懸念点は、方言が多く統一的な仕様がないということです。

一応業界の最大手として CommonMark という書き方がデファクトスタンダードになりつつありますが、元を辿れば "Extensible" であったことが災いして、サービスプロバイダごとに固有の記法を採用している事例が少なくありません(以下は一例です):

Markdown の記法が異なるということは、つまり移植しにくいことを表しています。 すなわち、サービスAで使えていた便利な記法がサービスBでは使えない、ということが簡単に起こりえます。 このような仕様もとい企業戦略を採用することでユーザ離れを防ぐという狙いがあるようですが、あまり良い印象はありません…… (企業運営の余裕に左右されがち、という点で見れば、ケツモチがMicrosoftである GitHub に準拠した書き方をベースとしておくのがベターかもしれませんね)。

内容と外見の分離 | WYSIWYG Editor と MD

ここまで、構造化文書の成り立ちと Markdown とは何か、またその利点と欠点をお伝えしてきました。 最後に Markdown が解決しうる別の問題についても触れてみます。


"What You See Is What You Get"

WYSIWYG (What You See Is What You Get) とは、文書作成・編集ソフトウェアなどの特性の一つで、最終的な仕上がりを画面上に表示して確認しながら編集できるという意味。 そのような編集システムを「WYSIWYGエディタ」と呼ぶことがある。

画面で見えている文字をそのまま見た目を変更し出力できるエディタは総じて WISIWYG Editor と呼ばれています。 身近なところだと Microsoft Word / PowerPoint がそれにあたります。 これらと対比されるのは、Notepad(メモ帳)だったり、プレーンな vim/emacs だったりします。

すなわち、文章の見た目に関するメタ情報が裏側に隠されているデータ形式が WYSIWYG であるといっていいでしょう。 これは「装飾要素についてゴテゴテと手動でコーディングする必要がない」というユーザ目線での大きなメリットがありつつ、コンテンツのアクセシビリティという観点でみるとよろしくないとされています。

近年、コンテンツに対するアクセシビリティが提唱されるようになってきており、 特にウェブコンテンツに対するガイドラインとして、World Wide Web Consortium (W3C) が提唱するWeb Content Accessibility Guidelines (WCAG) というガイドラインが提唱されるようになった。 つまり、「多くの人」が「多くの環境」で情報を取得できるように、コンテンツである「文章そのもの」と、文字の大きさや色などの「装飾要素」を分けるべきという考えである。

また、これらのほとんどは有料あるいはデータ形式という縛りが存在し、見た目を優先して自由度が下がるという状況が往々にしてあります (WYSIWYG機能の実装のために、専用のソフトウェアあるいは変換機(コンバータ)を使う必要があるからです)。


WYSIWYG の課題である内容と外見の分離について、Markdown は当初から達成しています。 一方で黎明期は逐一 HTML 等への変換処理を挟む必要があった時代もありました…… しかし、今は違います!(ギュッ

昨今では、Web界隈において js が発展し、コンピュータの性能も飛躍的に向上したことで、ブラウザ上でリアルタイムに MD->HTML変換を行なってもほとんど負荷がないという状況が訪れています。 エディタとビューワをいちいち切り替える必要もなく、Split view で書きあがりを確認しながらMarkdownを書けます。 また、モバイル端末においても問題なく動作するようにもなりました。

こうして Markdown という軽量マークアップ言語は、ソフトウェア/コンバータに縛られない自由で開かれたWYSIWYGエディタに採用される表現アプローチとして、現在のデファクトスタンダードの地位を確たるものとしています。

uiwjs/react-markdown-editor - A markdown editor with preview, implemented with React.js and TypeScript.

おわりに

.docx.pptx が嫌いすぎて、気づいたらお好みのエディタでマークダウンを書いてることがほとんどな毎日を過ごしています。 基本的にマウスを使うことがない(から、文章を出力することだけに集中できる)という編集体験がよすぎるのですが、こればかりは実際に試してもらわないと伝わらないでしょう。

というわけで以下がマークダウンを体験できる砂場へのリンクです:

めったくそ長くなってしまった気がしますが、これを機にぜひ皆様にも Markdown に挑戦していただけたらと思います。 (なにとぞお願いします!!!!!!)


本稿はそうしす🛡29 Advent Calendar 2024 - Adventarの 5 日目の記事です。

6 日目の記事は よさそうなカレンダーを紹介したい - アドカレのおすすめ in 2024 です、お楽しみに!

Footnotes

  1. JEPA|日本電子出版協会 マークアップとは?

  2. SAMLとは?| SAML認証の仕組み | Cloudflare

  3. HTML - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment