HTMLを使わないWebページ作成

1. Markdown

最初に提示した箇条書きベースのテキスト(これがMarkdownで書かれた原稿でもある)。

• 他の軽量マークアップ言語
  • Markdownがすべてではない（検索すると沢山出てくるだろう）
  • 技術系の有力な交流サイトでは、投稿者が原稿をMarkdownで書くことが標準になりつつある（右図）。
  • 軽量マークアップ言語の中では、最も人気が高い存在になってきたと考えられる。
• 文法概要

  • 文法についての情報源は多数あるので検索してみるといいだろう

    （が、とりあえずこの一覧ページを紹介しておきます）。

  • タイトル
    • 行頭に1～6個程度の #。
  • 段落（複数の行にまたがる長さの分）
    • 段落の区切りとして、空白行を挟む（それ以外の単なる改行は、文の継続を意味する）。
  • 箇条書き
    • 数字なしの箇条書きは、行頭に * または + （混在してもいい）、のあとにスペースを1つ。
    • 数字つきの箇条書きは（やはり行頭から）数字、ピリオド、スペース（1. のように）。

  • 表（テーブル）の書き方（GFMでの書き方になります）

    （一行の空行のあと、） |表題|表題|表題| |–|–|–| |項目|項目|項目| |項目|項目|項目|

  

  • リンク（アンカー；Aタグ）のはさみ方
  • 図（写真など；IMGタグ）のはさみ方

  以上に列挙したルールはすべて、半角英文字で表現する（全角文字は認識されない）。

  • なお、Markdownは、オリジナルのMarkdown（編集支援環境や変換システムに依存しない共通の文法）に対して、 独自拡張を行うグループ（たとえばGitHub）があり、その拡張部分は時には互換性のない「方言」 のような状態になっていることを承知しておこう。
• どこで編集するか
  • 右図のようにいくつかの選択肢がある。
  • いずれの環境でも、おおむね右図のような構成であることが多い。
    • 左半分がMarkdownの入力・編集のためのペイン。右側にその（おそらくリアルタイムで反応する）プレビュー画面。
• 変換の方法
  • 各編集環境がHTMLへの変換機能を提供しているのでそれを使ってもいい（手っ取り早い、が 機能が低かったり不便だったりすることもある。
  • 一括変換やグループで共同作業を行ったりする場合は、コマンドで変換する機能が使えるようにしておくといいだろう。
  • 前述の（板書図で紹介したうちの）Pandocの場合、 右図のような使い方（コマンドプロンプトでコマンドを入力し動作させる）になる。
  • Pandocの場合、単なるMarkdown->HTML変換ツールではなく、 様々な文書形式への変換ができる（右右図）相互融通ツールとしての意味がある。
    • その出発点としてMarkdownを捉えると、Markdownの適用領域が広いことが理解できるだろう。

2. テンプレート言語

• プログラミング言語との関係
  • プログラミング言語ごとに、その言語に適したソフトウェア開発ツール群（フレームワーク等； テンプレートエンジンも含まれる）が開発され提供されている。
  • テンプレート言語は、HTMLに変換されることが前提だが、その中に プログラムの実行結果も埋め込むことができる、というのがテンプレートの重要な機能であるため そのプログラムをどう表現するか、は、土台となるプログラミング言語との関連で決まる。
• フレームワークとの関係
  • フレームワーク（Webアプリケーションフレームワーク）では、プログラムで画面生成 （つまりHTMLを出力）する。
  • その際、HTMLによるページの大枠は、すでに設計されたものがあり、その枠の中に、 プログラムで生成するデータを埋め込んでいく形をとる。
  • その大枠（と、データを埋め込む場所や形式）を記述するための言語がテンプレート言語。
  • HTMLに準拠した（タグを <...> の形で書く言語と、HTMLの文法から離れて 文書構造（要素と要素の関係）を違う形で表現する言語がある（ここでは後者に属するものを紹介する）。
  • なお、フレームワークの動作の中でプログラムの機能として呼び出される（クラスやライブラリ関数などの形で） 形に加えて、テンプレート単独でHTMLへの変換を行うためのコマンドも用意されていることが多い。
• 主な言語 PUG SLIM …
  • ここでは JavaScript（Node.js）ベースの、（Express.jsや、それを活用したフレームワークで よく使われる） Pug（旧名 Jade）と、Rubyベースの Slim を紹介しておく。
  • インストールの方法は右板書図の通り、それぞれの（土台となる）プログラミング言語のパッケージマネージャ （RubyGems；gemコマンド、Npm）で行う。
• 変換の方法
  • 右図のように slimrbや pugコマンドで変換する。
  • rakeなどのビルドツール（これもプログラミング言語ごとに作られているが、これはプログラミング言語の 枠を使うことも可能）を使うと、変換を半自動化でき、コマンドを1つ入力すれば自動的に、 テンプレートに対応したHTML（未変換のものだけ扱う）を生成できる。
• Markdownとの関係
  • SLIMでもPUGでも、そのテンプレート言語以外で書かれたコード（をHTML変換したもの）を 生成物の中に埋め込むことができる。Markdownはその対象（として主力扱いされている）。

  • SLIMの場合：

    markdown:
      ## タイトル
      * 箇条書き
      * 箇条書き
    

  • Pugの場合：

    :markdown-it
      ## タイトル
      * 箇条書き
      * 箇条書き
    

  のように書くとその部分がMarkdownとして扱われる（テンプレート言語のファイル中に Markdownをインラインで書くことができる）。

  • 外部ファイルに書いたMarkdownをテンプレートのどこかに展開する標準的な方法は 明示的に提示されていないことが多いが（Pugでは このような記事がありよく使われているようだが）、
    • そもそもテンプレート言語はプログラムの実行結果を簡単に埋め込むためにできているので、 Markdownを変換するプログラムをそこに書けばいい。