CSS Nite LP39 フォローアップ（3）こもり まさあきさん

2015年2月7日（土）ベルサール九段 イベントホールで開催したCSS Nite LP39「Coder's High 2015：コーディングスタイルの理想と現実」のフォローアップとして、こもり まさあきさんの『ゼロからテストサイトまで5分で立ち上げます！』セッションのスライドなどをシェアします。

• スライド（PDF、10ページ、8.3MB）

フォローアップ

「CSS Nite LP39」に参加された皆様、長丁場お疲れ様でした。セッション3のこもりフォローアップです。

5分でテストサイトを立ち上げるデモのみのセッションをおこないました。
ピンマイク＋10分の時間をいただいたこともあったとはいえ、細かな解説はおこなうことはできませんでしたので、以下簡単ですがフォローを。

今回使ったスタティック・サイト・ジェネレータは「Harp（http://harpjs.com/）」です。

こちら、Sass、Less、Jade、EJS、MarkdownにCoffeeScriptと、Harp本体をインストールするだけで動きます。プラグインとかそういった外部のツールをインストールしたり設定する必要はなく、サーバを起動すればすぐサイト制作に入れる優れものです。また、Dropboxを使った「Harp Platform（https://www.harp.io/）」があるので、制作したものをそのままDropboxホスティングすることもできます。

数ページ?数十ページ程度のサイトであれば、プログラム言語に不慣れな方が多機能化しまくっているCMSでサイトを作るより、Markdownをはじめとしたテキストファイルのインクルードや簡単な条件分岐やJavaScriptを使ってサイトを構築しやすいかもしれません。

当日実際に作成、公開したファイルは下記GitHubのリポジトリにあります。
https://github.com/gaspanik/cssnitelp39

スタティック・サイト・ジェネレータは古くからいろいろな言語で開発・公開されています。Ruby界隈で人気のMiddlemanやJekyllなども同じものです。「StaticGen（https://www.staticgen.com/）」には、GUIのツールも含めさまざまなジェネレータが公開されていますので、こちらご参考まで。

また、Twitterのハッシュタグ（#cssnite_lp39）でいくつかあげていただいてますが、デモ中に利用していたツールなどは以下になります。

• Fish（ターミナル内のシェル）
• Jade（HTMLテンプレートエンジン）
• Bootstrap Jade Snippets
• Divshot（PaaSホスティング）

今回は静的なサイトをホスティングできるDivshotを使いましたが、アカウントさえ作っておけばコマンドラインからあのようにサーバを起動することが可能です。当日時間の関係で省略しましたが、ファイルを編集して再度アップロードするのもコマンドで一発ですし、開発サーバ・ステージングサーバ・公開サーバと3段階で環境を用意して公開することもできます。

Harpなどはnode.jsで動くので、環境そのものをheroku.comでホスティングすれば、いちいちサイトを書き出してアップしなくても大丈夫です。PaaS系はテストぐらいは無料で試せますし、費用も大量なアクセスを処理する以外は安価で利用できます。以下はherokuでの動作サンプルです（無料モードで動かしているので、アクセスがないと数分でスリープするので初回アクセス時に時間がかかります）。
https://lp39harp.herokuapp.com/

以上、デモ中は時間の関係もあって詳しい手順を順追って説明することができませんでしたので、セッションそのものが何をやっていたか不明な部分も多々あったかと思います。ただ、ああこういう作り方もできるんだ、と気付いて頂けていれば幸いです。

フレームワークやタスクランナーも含め、制作する時間を短くする術は豊富に揃っています。頭を使う、コードを書く、本来時間をかけるべきところにきちんと時間をかけていただければなぁ、とこもりは思っております。ありがとうございました。

こもりまさあき

Development Environments for Web Designers ?Webサイト制作の時流に乗り遅れないために、覚えておきたい開発環境の作り方

以下は、セッション中に紹介した現在販売している電子書籍「Development Environments for Web Designers ?Webサイト制作の時流に乗り遅れないために、覚えておきたい開発環境の作り方」が、CSS Nite LP39に参加された皆様（とフォローアップ参加の皆様）向けとして39%引きで購入できるURLです。

https://gum.co/GFXe/cnlp39

コマンドラインの基本からnode.jsやRubyの環境の作り方、さまざまなツールの紹介、タスクランナーのgulpの基本から実際のコードまで幅広く内容を入れておりますので、当日のセッションで興味を持たれた方は内容を抜粋したサンプルをご覧ください。

http://hive.gl/5TtQl （100p超のサンプルPDF）

動画

CSS Nite LP39「5分でゼロからテストサイトまで立ち上げます！」 from CSS Nite on Vimeo.