Webマニュアル30分クッキング MarkdownにJAMstackを添えて 株式会社ヒューマンサイエンス ドキュメントソリューション部コンサルティンググループ 米倉 裕基 

アジェンダ 自己紹介 Webマニュアル制作の状況 技術選定において大事なこと LAMPstack vs JAMstack レシピ紹介 30分クッキング 本日の振り返り 

米倉 裕基 システムエンジニア テクニカルコンサルタント テクニカルライター 主なタスク ドキュメントシステム提案/プロビジョニング 軽量マークアップ言語とエコシステムの普及 

株式会社ヒューマンサイエンス マニュアル制作 ローカライズ 機械翻訳 ドキュメント制作標準化コンサルティング eラーニングコンテンツ制作 moodle運用サポート 

Webマニュアル制作の状況 

従来の開発手法 WordPress/MovableType等のCMSを利用 Wordで編集しRoboHelpで変換 DITA等でワンソースからのHTML変換 導入・運用に相応のコスト、リードタイムが必要。 パッと入れて、パッと使うという用途には向かない。 

他の手法はないの？ 

他の手法はないの？ たくさんあります 

Web開発技術の変遷 https://github.com/kamranahmedse/developer‑roadmap 

No content

いや、ありすぎでしょ？ 逆に多すぎて適切な技術を選べない... 

技術選定において大事なこと 

目的を明確にする Webマニュアル制作の目的を明確にする。 

Webマニュアル制作に置ける目的とは 例えば... 高機能で見た目の良いリッチなWebマニュアル 安く運用できるWebマニュアル コンテンツの更新が簡単にできるWebマニュアル 

本発表で制作するWebマニュアル目的を設定 「早く」 「安く」 「簡単に」 30分でサイト構築から公開まで行う必要がある。 

「早く、安く、簡単に」を目的として技術選定 ロゴ マイクロサービス名 用途 Markdown 軽量マークアップ言語 VuePress MarkdownからHTMLを生成 Firebase 生成されたWebサイトのホスティング Git/GitHub データのバージョン管理 Visual Studio Code Markdownの編集エディタ CircleCI 自動ビルド・デプロイ 技術選定の根拠は論文を参照してください。 

JAMstackと呼ばれる概念 前ページの技術選定はおおよそJAMstackと呼ばれるシステム構成 

LAMPstack と JAMstack 

LAMPstack 従来型のWebサイト構築のための技術 Linux (OS) Apache (Webサーバー） MySQL (データベース) PHP (プログラム) 

JAMstackとは Javascript APIs Markup 公式サイト https://jamstack.org/ 

JAMstackの提唱者 Matt Billmann (Netlify CEO) 

JAMstack命名の由来 The JAMstack Origin Story They were highly dynamic web applications. They were single‑page apps or they were big, content‑driven sites that just used content APIs instead of a traditional monolithic dynamic CMS. それらは高度に動的なWebアプリであり、SPAであり、旧来のモノリシックな動 的CMSではなくコンテンツAPIを使った巨大なコンテンツドリブンなサイトだっ た。 "But that's really like a new stack, right? Before it was the LAMPstack. You should have like a name for that, like what about..." And he thought a bit, and then he said JAM. 「こういうサイトって新しいStackって言えない？ LAMPstackというよりは...」 ちょっと考えた後、彼は「JAM」と言ったんだ。 

JAMstackのエコシステム 

LAMPstack と JAMstack の相違点 LAMPstackは モノリシック （一枚岩的）デザイン JAMstackは アトミック （原子的）デザイン 

モノリシックデザイン 一枚岩的にサーバー内に全環境を構築する集中的なシステム構成 

アトミックデザイン マイクロサービスをAPI経由で連携する 分散的なシステム構成 

アトミックデザイン（JAMstack）にすることで どうして「早く、安く、簡単に」を実現できるのか？ 

マイクロサービスのイイトコ取り 作り手 読み手 早く 開発不要 高速なページ配信 安く OSSやSaaSの無料枠利用 ‑ 簡単に 簡易な記法でライティング ユーザビリティの高いサイト 

レシピ紹介 Webマニュアル30分クッキングのレシピ 

30分クッキング開始 1. VuePressプロジェクト作成 2. ローカルサーバー起動 3. 設定ファイルの作成 4. Markdownコンテンツ作成 5. GitHubでデータ管理 6. Firebaseへホスト 7. CircleCIを設定 8. デザイン/機能の拡張 

本日の振り返り 

30分でできた事 ：「早く、安く、簡単に」Webマニュアルの構築が実現できた ：30分でWebマニュアルの構築から配信まで実現できた ：ハイパフォーマンスかつセキュアなページが作成できた ：SSL設定でHTTPS公開できた ：レスポンシブデザインを実現できた ：コンテンツページだけでなくホーム画面を作成できた ：自動ビルド/デプロイの仕組みの実装できた 

30分でできなかった事 ：全文検索の実装 ⇧ Algolia（全文検索機能を提供するSaaS）により実現可能 ：デザインの拡張 ⇧ Tailwind等のCSSフレームワークを取り込む事で実現可能 ：アクセス解析の実装 ⇧ 標準機能によりGoogle Analyticsの実装が可能 ：PDF出力 ⇧ CSS組版により高品質なPDF出力が可能（なはず） ：CMSによるデータ管理 ⇧ Headless CMSによる連携が可能（なはず） 

ヒューマンサイエンスの所感 Webマニュアルのような静的コンテンツであれば、LAMPstackよ りもJAMstackで構成した方が、導入コスト/運用コスト両面でメリ ットが多い。 Markdown記法の学習コストは非常に低い。もしMarkdown記法に 抵抗がある場合は、WYSIWYGなどでMarkdownを編集することも できる。 いくら高機能でも巨額のコストがかかるモノリシックデザインのシ ステムは使っているうちに古くなるし、管理コストも増大する。 モダンで高機能なマイクロサービスが凄まじい速さで進化し続けて いるので、マイクロサービスの組み合わせで柔軟に構成可能なアト ミックデザインがこれからは望ましいのではないだろうか。