Markdownから効率的なWebサイト制作を〜CreateJS入門サイト制作時に採用したGitを中心にした原稿執筆方法〜

前編記事「CreateJS入門サイトを立ち上げました」の続きとして、CreateJS入門サイトの原稿執筆とWebサイト制作にあたって、効率化した手順を紹介します。

生きる入門サイトを : オープンソースとして公開することのメリット

このサイトはGitHub「ics-creative/tutorial-createjs」で原稿とサンプルをオープンソースとして管理してます。オープンソースとして管理する一般的なメリットとして次があります。

• 更新情報がパブリックになっており、進行状況が明確
• 編集のログが残るため、履歴確認に役立つ
• プルリクエストという形で誰もがブラッシュアップに参加可能
• 間違いや訂正の指摘をするのにプルリクエストだと敷居が低い

原稿はMarkdown形式で書いていますが、プッシュするとGitHub上でも原稿の確認が可能です（例：「tutorial-createjs/index.md」）。わざわざWebサイトにしなくても原稿レベルでの推敲はGitHub上で行えるというメリットもあります。

GitHubによる効率的なサンプルの公開方法

当サイトがGitHubを採用した理由がもう一つあります。それはサンプルの管理です。読者にとって全てのサンプルは実行確認ができ、かつコードを全て確認できる利便性が入門サイトには必須だと考えています。例えば、書籍(紙媒体)ではコードを示すことができるものの、実行可能なサンプルはブラウザでアクセスしなおさなければなりません。それは不便ではないでしょうか。当サイトが紙媒体ではなくウェブサイト形態を選定したのは、利便性を高めるためです。

また、執筆者にとってサンプルの作成の負荷を下げることは生産効率やモチベーションの観点からも必要でした。そこで当サイトでは、GitHubにサンプルをプッシュすることによって、コードと実行可能なサンプルページを同時に公開しています。GitHubではgh-pagesブランチを作成することで、ウェブページとして公開することができます。例えば、次のURLでコードと実行可能なページが確認してみましょう。

• 実行可能なサンプルページ fractal_triangle_steps.html
• コードの確認ページ fractal_triangle_steps.html

どちらも同じfractal_triangle_steps.htmlファイルになっていることがポイントです。著者はサンプルのHTMLファイルを編集しプッシュするだけで、2つのページを1回の手間で用意できます。

Node.jsで徹底的な自動化を

ウェブサイト制作の手間を最小限にするために面倒な作業を自動化しました。

• サンプルのキャプチャ画像を作成
• MarkdownファイルからHTMLファイルへの変換

サンプルファイルのキャプチャは経験上、原稿執筆で最も手間のかかる作業の一つです。キャプチャを撮影し、必要に応じて余白やウインドウ枠を除去しトリミング。それもサンプルを修正したら、もう一度同じ手順を踏まなければならない・・・。

この作業を自動化できることで原稿執筆の負荷が下がります。詳しい手順は動画にまとめましたのでYouTubeにアップしたビデオをご覧ください。

この自動化ツールはGitHubで公開していますので、使いたい方がいましたらどうぞご自由に改変してお使いください。Node.jsを使って動かしています。

過去バージョンにも対応したかった

JSライブラリ側のバージョンアップに伴って過去バージョンの情報が見れなくなることも防ぎたいと考えていました。GitHubのTagsを使って過去バージョンの入門サイトの情報をダウンロードできるようにしています。

Releases · ics-creative/tutorial-createjs

プロジェクトの規模が大きくなると常に最新版を利用するというわけにはいかず、どこかのバージョンに固定し開発をすすめることがあるでしょう。この入門サイトは今後も特定バージョンの情報を提供できるようにしていきます。

書籍レベルの入門サイトに

私は今までに8冊書籍を執筆してきましたが、その経験から言えばこの入門サイトの内容は書籍としてリリースできる分量・質にもなっていると自負します。前述のとおり生きる入門サイトにしたかったので書籍化するつもりはありませんが、書籍レベルのまとまった情報となっていることを意識しています。

CreateJSを学ぶことで、インタラクションデザインの本質を学習できる、そんなサイトを目指してこれからも滞り無くアップデートしていくつもりです。今後ともCreateJS入門サイトをご活用ください。