J. Plasma Fusion Res. Vol.96, No.7 (2020)３
７９‐３８７サロン

Markdown による原稿執筆のすゝめ
An Encouragement of Writing with Markdown
伊藤篤史
ITO Atsushi M.
核融合科学研究所 ヘリカル研究部 基礎物理シミュレーション研究系（原稿受付：２
０
２
０年４月１
８日）

１．はじめにアプリケーションが必要である（注釈：ファイルフォー

科学論文の執筆や普段の研究ノート，会議の議事録，マットの仕様は公開されているが，その複雑な仕様ゆえにレポートの作成など，原稿を書く際にどのようなファイ

互換アプリケーションの開発は現実的に大変難しいだろ

ルフォーマッ ト を用 い て お ら れ る だ ろ う か．お そらくう）．

Microsoft 社 の Office Word（以 下，MS Word）や LaTeX

数式の入力を第一の優先事項にすると，LaTeX に一日のという名前が挙がるだろう．中には，クラウドと連携した長がある．数式の表現とレイアウトに関してはほぼ満足で各種のノートアプリを研究ノートに利用している方もおらきる．入力する数式構文に関しても LaTeX 形式が科学のれるだろう．

世界では標準的なものとして普及しており，一部は MS

ここでは，最近普及してきた Markdown 形式による原稿

Word の数式入力にも取り入れられている．数式番号の付執筆を勧めたい．あわせて筆者の開発した Markdown エ

与や，その文中引用も非常に簡単である．数式の多い理論

ディタ"NowType"に関しても紹介したい．

研究の原稿を書く時には LaTeX が良く使われているだろう．

２．これまでの原稿執筆：MS Word と LaTeX

LaTeX のファイルフォーマットはシンプルなテキスト

あらためて，原稿執筆においては文章を文字列データと形式である．よって，レイアウトに関する指定は，専用のして入力することがコンピュータ時代の必須作業であり，

コマンド文字列を文章と合わせて記述することになる．豊

なんらかのテキストエディタを用いることになる．しか富なコマンドが存在するので様々なレイアウト調整が可能

し，テキストを入力するだけでは読む側にとって可読性のである．しかしながら，実際に理想のレイアウトを実現す

高い状態にはならず，実用上は見た目を整えるレイアウト

るには職人的な技術が必要と感じる．多くの人は何かしら調整が必要である．文章中の特定の部分のフォントの種のテンプレートを使用して文章を入力し，多少のカスタマ

類，サイズ，色を変えたり，太字や斜体にしたりするだろ

イズをしてお茶を濁していることだろう．また，本文となう．これらをテキスト入力と同時に行えるアプリケーショ

る原稿とレイアウト用のコマンド文字列が入り混じってしンがいわゆるリッチテキストエディタである．前述の MS

まい，執筆時の可読性が落ちてしまう．最も厄介な点は，Word はおそらく最も良くできたリッチテキストエディタ

数式や文章レイアウトの見た目の確認をするためにテキスであり，フォントの変更に加えて，図やテーブルを任意のト形式のファイルから PDF 形式等へコンパイルする作業

位置に挿入したり，余白等のマージンを整えたり，原稿のが必要となることだ．コンパイルには数秒から場合によっ

レイアウト調整としておおよそ想定される全てのことがでては数分を要し，本来の原稿執筆の集中が途切れる．複雑

きる．なによりも，印刷レイアウトそのままの状態で文章な数式等でコンパイルエラーとなった際には一苦労だ．こを入力して原稿の執筆を行える，いわゆる What You See

れは WYSIWYG な MS Word 等と比べて大きな欠点であIs What You Get（WYSIWYG）としての完成度が最大の魅る．これが理由で，個人的には数式が少 な い 場 合 に は力だろう．

LaTeX を使うことは少なくなった．

それでも科学論文の執筆においては，特に数式の入力にところで，シンプルなテキスト形式の利点は大きい．

はあまり向いていないという印象がある．以前に比べれば

LaTeX のコンパイル環境がインストールされていなくて

最近は幾分ましになったが，やはり複雑な数式になるとレも（昨今の LaTeX 環境のインストールには膨大な時間がイアウト調整が十分に行えない．また，数式番号の付与と掛かる），PC であれば必ず入っているテキストエディタがその文中引用にも課題が残る．また，ファイルフォーマッ

あれば最低限の中身の確認と編集ができる．さらに，文章

トはバイナリ圧縮されており，開くには MS Word か互換の差分が容易に取得でき，例えば Linux の diff コマンドな

National Institute for Fusion Science, Toki, GIFU 509-5292, Japanauthor’s e-mail: ito.atsushi@nifs.ac.jp

３７９!2020 The Japan Society of Plasma
Science and Nuclear Fusion Research

Journal of Plasma and Fusion Research Vol.96, No.7 July 2020

どで変更箇所が簡単に確認できる．最近であればテキスト

イルを差し替えれば，いとも簡単に見た目が変わる．例え

形式であることは，Git 等のバージョン管理ソフトを用い

ば，CSS を変えることでデザイン部分はユーザーの好みやることで変更履歴の管理が容易になるという利点にもつな時代を反映したモダンなものに定期的に更新しつつも，本がる．

文の内容は殆ど手を付けずに文章コンテンツを長生きさせることができる．

３．Markdown の利点

しかし，本文と文章構造を記述する側のHTMLにおいて

こ こ ま で 取 り 上 げ た MS Word や LaTeX に 対 し て，タグを用いた記述というのは文章の構造を把握しやすい反Markdown の特徴を見ていこう．Markdown が採用してい面，手作業での記述が容易とは言えない．またタグの種類

るファイルフォーマットは LaTeX と同じく，テキスト形も規格が更新されるごとに増え続けるので覚えきれない．

式である．よって，LaTeX の項で挙げたテキスト形式の利

原稿執筆のフォーマットとして HTML は向いているとは

点はそのままである．

言えない．

Markdown の場合，本文となるテキスト以外にレイアウ

そこで，より原稿執筆に向いたHTMLに変わる形式としトに関する記述は LaTeX ほど豊富ではない．フォントのて John Gruber［１］によって提案されたものが Markdown

種類や色，図の配置場所など， 見た目 に関して指示を行形式である．HTML に比べると文章構造の種類はより限定

う方法は一切ない．段落，見出し，箇条書き（リスト），表されていてできることも限られてくる．しかし，その覚え（テーブル）といった文章の 構造

ることの少なさが原稿執筆にはちょうど良い．

を指示するための記法だけが存在する．構造の指示のための構文は非常に簡単でまた，軽量マークアップ言語ゆえにスタイルを適用したあり，本文中に多種多様なコマンドが混ざらないので本文

印刷状態 への変換が非常に速い．LaTeX のコンパイルのを視認しやすい．このことから Markdown は軽量マーク

様に長時間待つ必要はなく，ほぼリアルタイムで変換でき

アップ言語と呼ばれる．これに対して LaTeX は重量級のる．ほとんどの場合は John Gruber の提案通り HTML に変マークアップ言語といえるだろう．

換され，その上で CSS ファイルによるスタイル指定を反映

見た目 に関する記述ができないことは，それ単体ではして画面にレンダリングされることになる．このリアルタ

印刷物を成型（変換・コンパイル）できないことを意味す

イムな変換の特徴を生かして，Markdown エディターの多る．しかし言い換えれば，本文テキストの内容と見出しや

くはウィンドウを左右に分割し，左側のテキストエディ

段落などの構造さえ変えなければ，どのようなフォントで

ターで Markdown を編集し，右側のプレビュー用ウィンド

どのような配置で表示してもよいということである．ゴ

ウに CSS が適用された印刷状態の文章を表示する．左側でシック体が好きな人もいれば明朝体が好きな人もいるだろ

編集するとリアルタイムで右側画面の印刷状態に反映されう．背景の色はライトかダークか，見出しには数字をつける．この様なことができるのは，最近の Web ブラウザ技術

るか否か，お洒落なデザインかシックなデザインか，好みの進化によるところも大きい．実際にエディタやビューア

は人そ れ ぞ れ あ る だ ろ う．Markdown の プ レ ビ ュ ー でを開発するプログラマにとっては，Markdown から HTMLは，見た目に関する情報は別途 スタイルとへの変換さえ行えれば，HTML の解釈と CSS の適用はブラして用意しておいて，ユーザーごとに好みのスタイルで表や テーマ

ウザエンジン側で行いレンダリングしてくれるので楽なも示することができる．

のだ．

LaTeX であればこれらの見た目に関する項目もテキスとはいえ，後述する NowType の開発では WYSIWYG

ト中に記述してしまうので，誰がコンパイルしても同じ見を実現するために大変苦労したことは言及しておく．

た目になる．MS Word も同様の見た目に関する情報をファ４．具体的な Markdown の記述例

イルの中に埋め込んでいるので，誰がファイルを開いても同じ表示となる．それも一つの利点だが，むしろ Mark-

それでは，Markdownの記法を簡単に紹介しよう．まず，down の様に 見た目 に関する構文がないことは，ユーファイルフォーマットはテキスト形式だ．拡張子は ．
md

ザーの好みの多様性を主眼に置くと利点となる．

である． ．
md ファイルを適当なテキストエディタや原稿を提出される側にとっても，本文と構造に関するMarkdown エディタで開き，文章をテキストで入力すればデータだけを受け取って，フォントや配置に関しては出版

それが本文となる．この時，決められたマークアップ方法

物等に合わせて適切なスタイルを適用すればよい．MSによって文章の構造を指定する．以下にその例を示すが，Word や LaTeX で指定と異なるスタイルのファイルが提出同時に対応する HTML タグ要素も挙げるので理解の助け

されて，手作業で治すのは手間がかかるだろう．

にしてほしい．

このように，文章の構造と見た目を切り離して管理する

また，筆者の開発した Markdown エディタである Now-

方法は，Web ページを記述するための Hyper Text Markup

Type［２］はフリーソフトウェアとして公開している．イン

Language（HTML）と Cascading Style Sheets（CSS）が代ストールして使用することもできるが，Web ページ［２］に表的なものだ．HTML も CSS もどちらもテキスト形式の

行けばブラウザ上で気軽に試すことができるようにもしてファイルである．本文のテキストと文章の構造は HTMLあるので是非触ってみてほしい．

ファイル内にタグを使って記述し，フォントなどの見た目

４．
１ 段落
一般的に Markdown では文章の纏まりは段落となり，連に関する指示は CSS ファイルに記述する．そして CSS ファ
３８０

Saloon

An Encouragement of Writing with Markdown

A.M. Ito! リスト C

続しない改行は無視される．連続した改行すなわち空行があると次の段落との区切りとなる．対応するHTMLタグはP である．

ちょうど HTML では UL タグと LI タグに相当する．

４．
２ 見出し

ただし，Markdown の表記においてはリスト要素の次の行の最初の文字列がシャープ # と半角スペース ! で行に空行が無い場合に，続く文章の解釈が異なる．筆者の始まる時，続く文字列は段落ではなく見出しとみなされ開発している NowType で読み込む場合は，先頭のインデる． # の数によって，見出しのレベルを６段階に設定でントとなる半角スペースが２つ以上存在する場合はリスト

きる．次の例では見出しと段落の記述を示している．

内の要素とみなし，存在しない場合は新しい段落とみなす．つまり，次の Markdown テキスト＃

見出し１（Title）‐ リストの文章１です．

ここが段落の文章になる改行しても無視される

行の頭に半角スペースが二つあるので，リストの空行がある為この文章は第二段落となる内部要素です．
‐ リストの文章２です．

＃＃

見出し２（Chapter）＃＃＃

行の頭に半角スペースが無いので新しい段落です．

見出し３（Section）＃＃＃＃

に対して，NowType では次の様に表示される．
!リストの文章１です．行の頭に半角スペースが二つあ

見出し４（Subsection）

るので，リストの内部要素です．
＃＃＃＃＃!リストの文章２です．

＃＃＃＃＃＃

見出し５
見出し６

行の頭に半角スペースが無いので新しい段落です．

段落の文章

この辺りは，Markdown のエディタ・ビューア毎に解釈が異なり，いわゆる Markdown の方言といわれる曖昧な部

ここでシャープの数による６段階の見出しは，ちょうど分である．

HTML の H1 タグから H6 タグに相当する．

番号付きリストの記述は次のようにする．行の最初の文
字が 数値 ，ピリオド ． ，半角スペース ! の順で始

４．
３ リスト
Markdown では，二種類の箇条書き（リスト）として番まった場合に，続く文章をリストの要素とみなす．その行

号無しリストと番号付きリストが使える．

を連続して記述することでひと纏まりのリストとみなされ番号無しリストの記述は次の様にする．行の最初の文字

る．また，二行目以降のリスト要素においては， 数値 のがマイナス記号 − と半角スペース ! で始まると，続く

前に２つ以上の半角スペースをインデントとして入力する

文章をリストの要素とみなす．同様の行を連続して記述すと，前の行のリストの子リスト要素になる．

ることでひと纏まりのリストとみなされる．また，リスト

番号付きリストの例を示す．

の子要素を追加する場合にはマイナス記号 − の前にインデントとなる半角スペースを２つ以上入力すると，前の行

１．リスト Aのリストの子リスト要素になる．

１．リスト B
１．子リスト B-a

番号無しリストの例を示す．

１．孫リスト B-a-a‐ リスト A

１．リスト C

‐ リスト B‐ 子リスト B-a

ここで数値に意味はなく，連番である必要はない．逆に何‐ 孫リスト B-a-a

かしら意味のある数値を書いても表示には反映されない．

‐ リスト C

表示の際には自動で連番になり，次のように表示される．

これは次のように表示される．

１．リスト A
２．リスト B

! リスト A（a）子リスト B-a! リスト Bi．孫リスト B-a-a− 子リスト B-a３．リスト C＊ 孫リスト B-a-a
３８１

Journal of Plasma and Fusion Research Vol.96, No.7 July 2020

い．

ちょうど HTML では OL タグと LI タグに相当する．

４．
７ テーブル４．
４ 強調
Markdown では，文字列をアスタリスク * で囲むと，Markdown ではテーブルも利用できる．テーブル表記に囲んだ部分が強調表示される．アスタリスクの数により強おいては，行の区切りを改行で表し，列の区切りをバー

調度合いは三段階に分かれる．通常それらは斜体，太字，ティカルバー ｜ で表す．テーブルを Markdown テキスト

斜 体＋太 字 で 表 示 さ れ る．例 え ば， *italic* ，で表現した例は次のようになる．

**bold** ， ***italic+bold*** と記入すると，italic，
bold，italic＋bold と表示される．これら三段階の強調は，｜項目１｜項目２｜項目３｜

ちょうど HTML の EM ， STRONG ，両方のネストに対応｜---｜---｜---｜

している．ただし実際の表示は CSS の指定によって変えら｜りんご｜ １００円｜れるので，エディタ・ビューアによって異なる場合があ｜みかん｜｜ １０個｜

る．

｜いちご｜

５０円

｜

３個｜
売り切れ｜

４．
５ コードブロック
強調と同様に文字列をバッククォートで囲むとコードブ

ここで，一行目は見出し（ヘッダー）になる．二行目は見

ロックになる．コードブロックではインライン表示とディ

出しとデータ行の区切り線であり．多くのビューアにおい

スプレイ表示（独立行表示）が使える．文字列を１つずつて，ヘッダー行と二行目の区切り線の行の存在がテーブルのバッククォートで囲むと， inline!code のようにイと認識する判定基準になる．

ンライン表示になる．一方で文字列を３つずつのバック

また，二行目の区切り線は列ごとの左寄せ・中央寄せ・クォートで囲んだ場合は，右寄せの指示にも使われる．バーティカルバーの間の半角文字は最低３つ必要で， --- もしくは :-- と記述すれdisplay style code block

ば，そ の 列 は 左 寄 せ に な る． --: と 記 述 す れ ば 右 寄

function test(a, b){

せ， :-: と記述すれば中央寄せになる．
三行目以降はデータ行である．上記の例の場合は次のよ

return a + b;

うに表示される．

}の様にディスプレイ表示になる．
これらのコードブロックは，ちょうど HTML の PRE
タグや CODE タグに相当する．

項目１

項目２

項目３

りんご

１００円

３個

みかん

５０円

１０個

いちご

４．
６ 数式
当初の Markdown には数式を記述する方法は存在しな

売り切れ

ちょうど HTML では TABLE タグに相当する．
４．
８ URL リンク

かったようだが，現在では殆どのエディタ・ビューアで数式のための拡張記法として，LaTeX 形式の数式記述がサ

MarkdownではURLリンクを記述できる．次のようなテポートされている．

キスト文字列を入力すれば，文字列の協調やコードブロックと同じように，文字列を［表示する文字列］（index.html）

ダラー $ で囲むと数式ブロックとなる．数式ブロック内
では LaTeX 表記が使える．数式ブロックでもコードブロックと同じようにインライン表示とディスプレイ表示

表示する文字列 が文章中にインライン表示されるとと（独立行表示）が使える．両端を１つずつのダラー $ で囲もに，リンクになる．

んだ数式文字列は， $&$#"&!!!&!"のようにインライン

これはちょうど HTML の A タグに相当する．
４．
９ 画像とキャプション

数式になる．一方で，両端を２つずつのダラー $$ で囲ん

Markdown では画像ファイルも張り込める．先の URL

だ数式文字列は，

リンクの括弧 [ の前にエクスクラメーションマーク !
$
&$
&
!
'$
#'
#
"!%#

を追加すると画像へのリンクと認識される．また，URL（１）

リンク同様にインラインブロックになる．例として次のよの様にディスプレイ数式になる．

うな Markdown テキストを考える．

TeX 表記の数式文字列を HTML にレンダリングする部
分は，MathJax［３］やKaTeX［４］といったライブラリが一般画像！［ALT 属性として登録する文字列］（icon.min.

的に使われる．どちらのライブラリを利用しているかでサpng）も表示させられます

ポートされている TeX 表記の範囲には若干の違いがある
が，殆どの場合には問題がない．ただし，LaTeX のような

これは次のような文章としてとして表示される．

数式番号の付与とその参照には独自の作り込みが必要であるので，全てのビューアで同様に表示させることは難し
３８２

Saloon

An Encouragement of Writing with Markdown

A.M. Ito

数式$x=y$や**強調表示**も記述できる．
（空行）
画像

段落２の文章も表示させられますHTML では IMG タグに相当する．

これは，HTML としては FIGURE タグと FIGCAPTION

ただし，文章ファイル自体の保存形式はテキスト形式でタグを使って次のように変換される．

あるので，画像データを埋め込めるわけではない．あくま
で画像ファイルへのパスを記述し，レンダリング時に画像<p>段落１の文章</p>

ファイルを読み込んで表示させることになる．よって画像<figure>ファイルは原稿の Markdown と同じディレクトリかサブ<img alt=’Fig1’ src=’icon256x256.png’>

ディレクトリに格納しておくのが良い．

<figcaption>
図１ここに書いた文章が caption とみなされる.

また，多くのビューアでは Markdown を HTML へ変換
することで表示を行っている．そのため，サポートされる

数式<span (generated by KaTeX)>x=y</span>や

画像ファイルフォーマットとしては JPG，PNG，GIF，SVG<strong>強調表示</strong>も記述できる.

などWebブラウザで表示できるものに限定される．論文等</figcaption>の印刷物で度々用いられるEPS形式等は表示できないこと</figure>が多いので事前に変換しておくことが望ましい．ベクター<p>段落２の文章</p>

画像形式である EPS の変換先としては，同じくベクター画像形式である SVG が良いだろう．

実際に表示される図とキャプションも図１として掲載し加えて，Markdownエディタ・ビューアにはWebブラウておく．
４．
１０ 引用（citation）と注釈（footnote）

ザ上で動作するものも存在する．Web ブラウザ上で動作する場合には，セキュリティーの観点からローカルファイル

Markdown では引用（citation）と注釈（footnote）に関操作に制限があり，画像ファイルの表示は上手くいかない

しては，それらを統合したような機能がある．文章内で引場合がある．

用をする時には，括弧 [] とハット記号（サーカムフレックス） ˆ を用いてところで，画像にキャプション（figure caption）を加えたいという要望もあるだろう．しかし，Markdown においてはキャプションの記述に関する標準的な記法は無い．

Markdown エディタ NowType は Ito によって作られよって様々な拡張記法が提案されており，ビューア毎に採た[ˆ1]

用されているものが異なる．
のように記述する．

例えば括弧 [] 内部の文字列をキャプションとして解釈するビューアがある．しかしその場合，キャプション中

そして引用元を記述する時には，同様の記号にコロン :にインライン数式などを記述しようとすると，括弧 []と半角スペース ! を加え，行の先頭に配置して次のようの内部に特殊な文字が並ぶことになり， IMG タグの ALTに書く．

属性として登録するのは相応しくないと考えられる．最悪のケースとして表示用の HTML が破壊される．
そこで筆者の開発した NowType では，次の条件を満たした時に画像をインライン表示ではなくディスプレイ表示と見なし，キャプションを追加することとした．
!画像用の Markdown テキスト ![Alt](path) が段落の先頭にある場合，この画像はディスプレイ表示とする．
!ディスプレイ表示と見なした場合，画像に続く文章・要素はキャプションと見なす．キャプションの終端は空行とする．
例として，次の Markdown テキストを考える．
段落１の文章（空行）
図１![図１](icon256x256.png)Fig1. ここに書いた文章が caption とみなされる．
３８３

ここに書いた文章が caption とみなされる．数式 !!"や強調表示も記述できる．

Journal of Plasma and Fusion Research Vol.96, No.7 July 2020

図，リンクの挿入など，上記で挙げた指示構文に関しての[ˆ1]: Atsushi M. Ito, プラズマ・核融合学会誌，

入力支援機能を持たせた．
出力機能として，PDF 形式と LaTeX（LuaLaTeX）形式

vol. X, No. Y, 2020.

へ変換して出力する機能も持たせてある．前述の Pandoc
これらは，HTML の A タグを利用して実装されること等の外部ツールを使わずに変換することで，NowType 独が多いが，実際にこれがどのように表示されるかはビュー

自の Markdown 表現にも開発者の責任の範疇として対応

アに依存するので注意が必要である．

させている．

４．
１１ その他

後述の Web 技術をベースにしているので，Operating

おそらく原稿執筆に必要な「文章構造」に関しては，上System（OS）に依存しないクロスプラットフォームなア記でだいたい事が足りるだろう．上記以外にも Markdown

プリケーションになっている．さらに，PC 上のデスクトッで記述できることはあるが，エディタやビューア毎の独自

プアプリケーションとして動作するスタンドアローン版に拡張である可能性が高いので注意が必要である．

加えて，Web ブラウザ上で動作する Web 版がある．これら

プログラマ界隈では，GitHub の投稿ページで採用されは NowType の Web サイトおよび Microsoft Store にて配布ている"GitHub Flavored Markdown Spec"［５］が一般的にしている．

成りつつある．また，Markdown 特有の方言を無くすために標準化をめざした"CommonMark"［６］という規格も提案

７．Markdown エディタ開発されている．ただし，両者ともに学術論文の執筆となると

７．
１ ２０２０年現在の GUI アプリ開発

少しできることが不足している．そのため，筆者の開発しここでは，Markdown エディタ NowType の開発を経てた NowType では学術論文執筆に必要最低限の機能を揃え筆者が得た経験を共有すべく，２
０２０年現在のアプリケー

るため，一部独自の拡張構文を追加している．

ション（以下，アプリ）開発について触れておきたい．
筆者は普段の研究では計算機シミュレーションを行って５．Markdown から別のファイル形式への変換

いる．シミュレーションの為のプログラムは何らかの数値

さ て，Markdown で 執 筆 し た 原 稿 を 他 者 に 渡 す 際 にを計算することが目的であり，見た目は必要ない．よって，

は，Markdown の普及が十分でないことと，表示の互換性

入力を受けとって出力として数値や文字列を返す Com-が課題である．最も良い方法はPDFに変換して受け渡すこ

mand Line Interface（CLI）アプリが中心となる．一方で，とである．多くのエディタ・ビューアはPDF出力を備えて

今回のエディタ開発のような場合には，OS 上で表示されいる．

るウィンドウ，ボタン，メニュー，チェックボックスなど，

しかし，出版物の原稿の場合には，MS Word や LaTeX

操作する上で便利な 見た目 を持った Graphical User In-

といった出版社指定のファイルフォーマットで提出する必

terface（GUI）アプリを作ることになる．CUI アプリとGUI要がある．このような場合には，Markdown で書かれたアプリの開発はかなり作法が異なる．CUI アプリの開発経

フ ァ イ ル を 変 換 す る こ と に な る．変 換 ツ ー ル と し て験が十分にある方でも，GUI アプリの開発には敷居の高さは"Pandoc"［７］が良く使われる．Pandoc で変換できるファを感じてなかなか取り組めないこともあるだろう．その敷イルフォーマットは非常に種類が豊富であるので，マニ居を跨ぐきっかけとして，この文章が役立てば幸いであ

アックな要望にも対応できるかもしれない．

る．

６．入力支援と NowType

以前までは OS の提供する Win32API を呼ぶことでウィン

Windows での GUI アプリ開発を振り返ると，Windows 7
ここまでに述べたように，Markdown はテキスト形式とドウやボタンを実装していた．言語は Visual C++，Visual

シンプルな構文を利点としたファイルフォーマットであBasic，Visual C#など色々なものがあったが，Win３２API

る．上記の指示構文は理解しやすく実際に使ってみると慣を直接呼び出すか，もしくは MFC などのラッパーライブ

れるのも早いだろう．一方で，やはりある程度の長さの文ラリを利用していた．その後，Windows の進化と共に，.

章を執筆する時にはプレーンなテキストエディタでの執筆

NET Framework や，Windows 10 に 合 わ せ て 作 ら れ た

作業は疲れるという人も多いのではないか．個人的にも，

WinRT が登場したが，なかなか Win32API 時代の資産から

WYSIWYG なエディタで書いた原稿を確認しながら執筆乗り換えることができないことが多いようだ．その精神的を進めていく方がやりやすい．

な障壁の一つは，これらが Windows OS のみで動くもので数式に関しては，入力した LaTeX 構文が意図したものあり，クロスプラットフォームが基本となりつつある昨今になっているかどうか，できるだけ迅速に数式へ整形してではあえて乗り換えるメリットが少ないと感じることでは確認したい．そこで，リアルタイムで Markdown を整形しないだろうか．

ながら原稿執筆ができる WYSIWYG エディタを作ること

アプリのクロスプラットフォーム化の波は，まさしくスが NowType［２］開発の主な目的である．数式のレンダリン

マートフォンやタブレットの普及で iOS や Android の利用

グには KaTeX［４］を利用したが，数式番号の付与などで独者が増えたことによるものだが，それに合わせて台頭して自の改良を加えてある．

きたものがブラウザで動く Web アプリケーション（以下，また，強調表示，コードブロック，箇条書き，テーブル，Web アプリ）である．今や PC デバイスやスマートフォン
３８４

Saloon

An Encouragement of Writing with Markdown

A.M. Ito

はインターネットに繋がることが当たり前で，インター編 集 を 受 け 付 け る HTML 要 素 は TEXTAREA 要 素 か

ネットを閲覧するための Web ブラウザはほぼ必ず搭載さ

INPUT 要素くらいであった．ところが，プロパティーとしれている．あわせて，ブラウザで表示する HTML は標準規て contentEditable=”true” を設定すると，デフォル

格が整備され，Web ページは OS やブラウザに依らず，同

トでは編集を受け付けないDIV要素等であってもキーボー

じ見た目，同じ動作が保証されていることになっている

ド入力を受け付けて文字列が編集可能な要素にすることが（ただし，実際に Web アプリ開発を行うと，OS 間の違いやできる．

ブラウザ間の違い，標準規格の穴に頭を抱えることにな

Markdown エディタを WYSIWIG として実現させるにる）．

は，ユーザーの入力に合わせて，動的に HTML 要素を生成

よって，Web ブラウザ上で動くアプリケーションを構築していく必要がある．例えば，シャープ # と半角スペー

できれば，それは自然とクロスプラットフォームアプリにス ! をユーザーが入力したことを検知したら，以後の文なる．ブラウザ上での表示であるので，Web ページと同様字列を 見出し とみなして HTML の H1 要素を動的に生成にボタンやラベルなどの「構造」は HTML で，色やフォンさせる．このような動的な HTML 要素の生成は JavaScript

トなどの見た目は CSS で記述すればよい．ボタンを押したを利用して行う．HTML における要素は開始と終了のある

ときの各種の動作は JavaScript で記述する．また最近でタグで挟むことで表現され，タグを入れ子にすれば要素のは，Web ページとして構築されたアプリをラップして単体

中に子要素を持たすことができる．このような要素の親子（スタンドアローン）のアプリとして構築する仕組みとし関係は Document Object Model（DOM）として規定されてて，Electron［８］や NW.js［９］といったツールが存在する．

おり，最近の JavaScript では DOM を直接操作する API

さらには，ブラウザのブックマークとキャッシュを利用しが用意されている．DOM 操作の API は殆どのモダンブラてオフラインでも Web ページを閲覧できるようにさせる

ウザでサポートされており，それらを使ってHTML要素のことで，より簡易的な疑似アプリとして動作させる Pro-

生成や消滅を行えばよい．

gressive Web Apps（PWA）と い っ た も の ま で 登 場 しただし，DOM を JavaScript で操作すると，ブラウザが標た．これらの登場により，Web ページさえ作れば，それを準で用意してくれている Undo 操作のための編集履歴と実各 OS 向けの単体アプリとして簡単にリリースでき，クロ

際の HTML 要素の状態に齟齬が生じる．よって，Undo

スプラットフォームで動かすことができる．さらに前者の操作に関する全ての処理も JavaScript で独自構築する必要

Electron や NW.js の場合には，Web ブラウザ上で動作するがある．

ことに起因したローカルファイル操作に関するセキュリ

７．
３ クロスプラットフォームの実際

ティー制限も，Node.js［１０］との連携によってかなり緩和

ここまでの内容を読んで，HTML と多少の JavaScriptされる．単体のアプリを動作させていながら，その実はが扱えれば，Electron でラップしてクロスプラットフォー

バックエンドで Node.js サーバーがローカルファイル操作

ムアプリが簡単に作れるという印象を持っていただけただ等を行い，フロントエンド側のWebページと通信すること

ろうか．興味を持った方は是非チャレンジしてほしい．

で実現される．この辺りはセキュリティーの面も含めて一方で，Markdown エディタ開発を通じて筆者が感じた

Electron のライブラリに必要な機能が整備されているので実際上の難しさにも触れておきたい．
常に計算をし続けているシミュレーションのような CUI

心配はいらない．
７．
２ HTML の動的編集

アプリと違い，GUI アプリではユーザーの操作に端を発し

それでは実際に Web アプリとしてリッチテキストエて何らかの処理を行う，いわゆる イベント駆動型 の処理

ディタを作る方法について述べる．リッチテキストエディを行う．ユーザーのクリック操作やキー入力に合わせてイ

タではなくプレーンなテキストエディタであれば，HTML

ベントが発火するので，それを JavaScript でフックして目の BODY 要素の中に TEXTAREA 要素を設けてやればよ

的の処理を行うようにコードを記述する．この時，フックい．殆どのブラウザはカット・コピー・ペーストや Undo，

しなかった場合にブラウザがデフォルトで行う動作をとい

Redo といった編集操作にも標準で対応しているのでプロ

うものもあるが，それをキャンセルしてやることもでき

グラムも最小限で良い．ブラウザがサポートしていれば，る．例えば，TEXTAREA にキー入力を行うと，フックし入力した文章のスペルチェック機能すら搭載されている．

なかった時はキーに合わせた文字が追加されるが，フック

しかしリッチテキストエディタを作るとなると，この様してデフォルト動作をキャンセルしてやれば文字が追加さに単純ではない．例えばある部分だけ太字にしたい場合，れなくなる．合わせて DOM 操作の API で何らかの HTML

対象の文字列をSTRONGタグやSPANタグで囲み，フォン

要素を追加するようにすれば，ユーザーのキー入力によっトの変わるような CSS を適用させるという操作が必要にて HTML 要素が追加されたように振る舞う．

なる．しかし，TEXTAREA 要素の子として別の HTMLしかしここで問題となるのが，イベントの種類が多く，

要素 は 持 た せ ら れ な い．よ っ て，こ の よう な 用 途 で はブラウザによってサポートされているイベントが完全には

TEXTAREA 要素は利用できない．

統一されていないということである．さらに，イベントのこ の よ う な リ ッ チ な テ キ ス ト の 編 集 を Web で 実 現

発生順序もブラウザによって異なる．もっと言えば，同じ

す る 機 能 と し て，HTML5 か ら は contentEditable 属

ブラウザであっても異なる OS 上では動作も異なる．よっ性 と い う も の が 追 加 さ れ た．通 常 キ ー ボ ー ド 入 力 でて実際の開発では，想定される主要ブラウザおよび主要
３８５

Journal of Plasma and Fusion Research Vol.96, No.7 July 2020

OS の全てで動作確認を行う必要がある．場合によっては，

このコード署名の問題はセキュリティーの観点からは理ブラウザや OS ごとに処理を書き分けてやる必要がある．

解できるが，「コード署名証明書」の発行には年間数万円

印象として，クリック関連のイベントはさほどブラウザ間の費用が掛かることが問題である．今回の様に学術研究目の差異がないが，キー入力関連には大きな差がある．

的で開発したアプリの配布や，個人が趣味で開発したアプ

キー入力に関連して，半角英数以外の日本語のような多リなど，フリーソフトを無料配布する場合にはこの発行費

言語入力の制御も難しい．半角英数以外の入力では，いわは悩みの種である．また，殆どの場合は法人としてしか発

ゆる Input Method Editor（IME）による入力を行うが，こ行を受け付けていないのも問題である．

の IME の制御はブラウザというより OS 側で制御している

この状況への一つの解として，Windows 10 向けのアプ部分が大きい．そのためか，上記で触れたようなイベント

リであれば Microsoft Store で配布することを紹介してお発火時にフックしてデフォルト処理による文字入力をキャく．開発したアプリを Web サイトから申請し，無事に認定

ンセルするという行 為 が，IME 入 力 に 関 し て は 行えなされれば Microsoft Store で配布することができる．このい．また，ブラウザや OS によって JavaScript から取得で際，コード署名とその証明書を Microsoft 社が無料で発行

きる IME 関連イベントのプロパティーに違いがあり，ものしてくれるということが何より重要な点である．アプリのによっては必要な情報が取得できない．主要ブラウザのエ申請権を得るためには開発者登録費として１８００円程度必要

ンジンが英語圏の開発者によって作られているので仕方のとなるが，初回の一度きりでよい．先のコード署名証明書

ないことかもしれないが，IME 入力に関しては，Web の標の発行費が毎年掛かることに比べたら遥かに安い．さら

準規格としてもまだ成立していないようである．

に，開発者になればアプリはいくつでも申請することがで

例 に も れ ず，Markdown エ デ ィ タ の 開 発 で も 日 本 語

きる．今回開発した NowType も Microsoft Store で配布しIME 入 力 の 制 御 に 大 変 苦 労 し た．最 終 的 に IME 入 力ている．実際にやってみると申請から認定までの作業はそに関しては，キー入力イベントをフックするのではなく，れほど難しくない．アプリの公開範囲は広く全ユーザー向

MutationObserver と い う DOM の 変 更 を 検 知 す る

けにしても良いし，指定したユーザーにだけ限定公開する

API を 利 用 す る こ と で な ん と か 制 御 す る に 至 っ た．

こともできるので，閉じた研究用途でも大丈夫だろう．

MutationObserver 自 体 も 新 し い API と い う こ と も

Mac OS の場合も，２０２０年２月以降は Apple 社の認定をあってブラウザのサポート状況が心配されたが，幸い現状受けたアプリ以外は実行不可能となった．詳細は割愛するの主要なモダンブラウザの全てで動作を確認することできが，こちらも App Store に申請して認定されればコード署

た．

名証明書を Apple 社が発行してくれるようである．ただ７．
４ アプリの配布に関する課題

し，開発者登録費として毎年１
１８００円が必要だ．

とはいえ，クロスプラットフォームアプリの開発は，一

また，将来的には先に上げた PWA によってコード署名

昔前に比べればかなり簡単になったという印象を受ける．

の問題は解決するかもしれないが，この辺りは Web と PC

一方で，開発したアプリの配布に関しては寧ろハードルがを取り巻く各団体のせめぎ合いがありそうだ．

上がっているように感じる．これは最近のセキュリティー

８．おわりに重視の観点から，配布されているアプリのインストールや実行に関して制限が掛けられるためである．インターネッ

本 稿 で は，Markdown 形 式 に よ る 執 筆 方 法 を 紹 介 しト上で配布されているアプリは，作者の意図に反して第三た．また，当初の予想以上に苦労の連続であったものの，者による改ざんが行われている可能性があるので，安易に何とか使えるレベルの Markdown エディタを作ることが実行してはいけないとされている．そのため，最近の OS

できた．まだまだ必要な機能やバグもたくさんあると思う

では標準機能として「信頼されてないアプリ」の実行を制が，積極的に対応していきたいので報告してほしい．読者

限する機能が搭載されている．Windows 10のSmart screenの日々の研究活動において，原稿執筆が少しでも楽しいもや Mac OS の Gatekeeper がこれにあたる．また，アンチのになれば幸いである．

ウィルスソフトによってはさらに厳しい警告が表示され謝る．最悪の場合はアプリを配布してもユーザーの PC では

辞

実行してもらうことができない．Web からのダウンロード

NowType は現在行っている研究遂行の為のサポートだけでなく，メールや USB メモリーを介して受け渡したア

ツールとして開発しました．本研究は JSPS 科研費 JP19H

プリにも同様の制限が掛かる．

01882，JP19K21870，JP19H01874 の助成を受けたものでこれらの検知をクリアして「信頼されたアプリ」にする

す．また，NowType の仕様を決めるにあたり，核融合科学

ためには，「コード署名」と呼ばれるものをアプリに同梱

研究所の高山有道助教から有意義なコメントをいただきまする必要がある．さらにそのコード署名が本物であることした．ここに感謝申し上げます．

を証明する「コード署名証明書」を然るべき機関で発行しなければならない．OS やアンチウィルスソフトがアプリ
付属のコード署名が本物かどうか確認を行うことで「信頼されたアプリ」として認められ，無事にインストールや実行ができるようになる．
３８６

Saloon

An Encouragement of Writing with Markdown［６］https://commonmark.org［７］https://pandoc.org

参考文献［１］https://daringfireball.net/projects/markdown/［２］https://atsushi-m-ito.github.io/nowtype/［３］https://www.mathjax.org［４］https://katex.org［５］https://github.github.com/gfm/［８］https://www.electronjs.org［９］https://nwjs.io［１０］https://nodejs.org

３８７

A.M. Ito