今年最初の投稿のショートホープです。もう2月になってしまいましたが、今年もWP-Eをどうぞよろしくお願いします。今年はちゃんとコンスタントに記事書くんだ…（既に1月は書いてないけど(´・ω・｀)

Development Environments for Web Designers

今年の年明け早々に、電子書籍で「Development Environments for Web Designers」という書籍が出版された。直訳すれば「Webデザイナーのための開発環境」である。

著者はこもり まさあきさん。今更改めて説明するまでもないが、日本のWeb制作者の最先端を行く「アーリーアダプター」のひとりだ。もともと印刷会社でWeb制作に携わり、フリーランスとして独立してから既に15年あまり、という日本のWeb制作の早い時期から活躍してきた人だ。
個人的には、たまたま勉強会などで何度か顔を合わせるうちに顔なじみとなり、いろいろ情報や手法、技術的なところから必要な考え方まで大変お世話になっている、僕にとっていわば「先生」役の人でもある。

制作者の明日はどっちだ？

あちこちで「Web制作の環境を更新する」ブログ記事が盛んになって久しい。
閲覧環境が多様化するのにともなって、制作現場の負担は増すばかり。いままでと同じ手法で制作していてはその制作コストは増える一方で、「必要な制作期間が伸びる」か「納期までに工程が詰め込まれて現場が疲弊していく」かのどちらかだ。
そこで、いまの制作環境をクライアント側からの需要に対応させていくためには制作環境のアップデートが必要、というのが各ブログ記事の趣旨だ。

いまなぜ書籍として刊行するのか？

ただここにも問題があって、それぞれの制作者•制作会社の制作環境は千差万別だし、求められる制作物もクライアントによって異なるので、見つけたブログ記事と全く同じ設定で現在の制作環境に完全に適応するものを構築できるか甚だ怪しいうえ、参考にするべき記事がどれかの判断もつかないのが実情だ。また、それぞれのトピックをググれば何かしらの記事はヒットするものの、既に半年以上前に書かれた記事だったり、または英語の記事ばかりだったりして参考にするには不安なケースもままある。
こういった「いま制作環境を改めたいが、まとめて参考にすべき手本が近くにない」ということが往々にしてある。これを解決できるのが本書だ。
少なくともいまの時点で、これだけまとまって設定の手順を一から説明し、網羅しているものは他に見当たらない。
そここそが本書の目指すところで、本書のとおりに設定をしていけば制作環境を安全に、かつ確実にアップデートすることができる。

作業手順はMacでの操作を基準に書かれているが、ほとんどの部分はWindowsでも共通である。ただ、場合によってはWindowsで動くツールが配布されていなかったりすることからMacでの操作が記述のベースになっている。
これはいま現在のMacOS XがNeXTSTEPベース、もっと遡ればUNIXベースであることと無関係ではない。最近のエンジニアがこぞってMacを使っていることからもわかる。自分がMacを使い始めた頃は、デザイナーか医者以外で使っている人はちょっと変わり者だけ、だったことを思うと隔世の感がある。ここでもJobsは先見の明があった、ということだ。

ツール導入の目的から手順、使い方の初歩まで

本書はいわゆるデザイナーが敬遠しがちな「コマンドライン」を使うツールについての説明がほとんどなので、それだけで拒否反応を起こす人がいるだろうことは想像に難くない。もちろんそれが不要ならばわざわざ使うこともないのだけれど。

いまこの時期にこの電子書籍が刊行されたのにはもちろん理由がある。

デザイナーとエンジニアの境がどんどん曖昧になっていると言われる昨今、多少なりともコマンドラインを使えたほうが仕事の幅が広がるのはもちろん、制作会社であれば制作環境を簡単に共有できる大きなメリットもある。GUIのツールがあるならばそれを使うのもひとつの選択肢だが、GUIの裏側でどういったことが行われているのかを知ることでトラブルにも対処できるだろうし、そもそもGUIで操作できるツールがない、なんてこともザラだ。GUIで操作するツールは総じて動作が重くなりがち、という面もある。
こういった多方面からの要求によって、デザイナーといえどもコマンドラインでの操作を避けて通れない時代になってきていると言っていい。そういった時に大いに頼りになるバイブル的な書籍が本書であると言える。

電子書籍で出版するメリット

この記事の執筆時点でのバージョンは0.4.0。既にpdf換算で300ページを越すかなりのボリュームだが、バージョン番号が示すとおり実はこれがまだ途中だというのだから驚きだ。つまり、いまの時点では「 先行販売 」なのだ。まだツールの最初の導入手順と、タスクランナーなどの一部のツールの使い方が説明されている段階だ。これから先、実際にツールを使った開発手法が説明されていく（はず）。

この電子書籍を一旦購入すれば、現時点ではバージョンアップされるたびに通知があり、都度新しいバージョンが無料でダウンロードできる。こと技術の進歩や手法の変化の早い「Web制作」のジャンルでは非常に理に適った方法だ。特に本書に掲載されているツール類はアップデートが非常に頻繁にあり、アップデートによっていままで動いていたものが急にエラーになることも十分起こりうる。そういったケースにも対応されているのは大変ありがたい。ただ一つ心配なのは、著者のフォローアップ（と気力・体力？）がどこまで続くのか…。

配布されているファイル形式が.pdf、.epub、.mobi（kindle向け）の3種類から自由に選べるのも魅力的だ。まさに昨今のWeb制作と同じく、閲覧環境はユーザーにより千差万別なので、これは非常に嬉しい。更に.epubと.mobi形式ではリフロー型（閲覧環境の画面サイズに合わせてレイアウトが変更される）なので、上記の形式のファイルであれば閲覧環境に左右されることなく快適に読み進めることができる。
自分はiPhoneとMacにそれぞれ.epubファイルをダウンロードしてiBooks.appで閲覧しているが、著者のこもりさんによると最も閲覧しやすい環境はiPadなどのタブレット+.epub形式だろう、とのこと。iPad持ってない…(´ ; ω ; ｀)
このような「いままでにないツールを使った」環境を構築しようと思ったら、従来のスピード感では対応出来ないだろう。これも電子書籍として出版するメリットとして、新しい情報をすぐにフォローアップして内容に反映させられる点がある（著者は相当大変なはずだがw）。

目次

この記事の執筆時点で公開されている目次は以下のとおり。

### はじめに

###いまどきのサイト制作とは

- 変わり続けるWebサイト制作
- 最新の制作ツールはコマンドラインから
- ローカルでWebサイトを動かすには？

### ターミナルの操作に慣れよう

- シェル？
- 覚えておきたいシェルのコマンド
- 覚えておくと便利なコマンド
- ターミナルでテキストを編集する

### 制作環境構築の下準備

- Xcodeとコマンドラインツールのインストール
- Homebrewのインストール
- Homebrewによるツールのインストールと管理
- Android SDK Toolsのインストール

### Gitを導入する

- Gitをインストールする
- Gitを使う前に覚えておきたいこと
- Gitの基本操作を覚える
- Gitを使ってサイトを公開するには？

### node.jsの環境構築

- node.jsのインストール
- npmによるツールのインストールと管理
- インストールしておきたいツール

### Rubyの環境構築

- Rubyのインストール
- Gemによるツールのインストールと管理
- Bundlerによるバージョン管理

### フロントエンドツールの導入

- 変わり始めた制作環境
- いまどきサイト制作環境を整える

### Vagrantを使った環境構築

- システム内に別のOS環境を構築する
- Vagrantのインストール
- 仮想マシンを作ってみよう
- Boxファイルを使ってみよう

### オリジナルの仮想環境構築

- Linuxのディストリビューション
- Ubuntuを使ったLAMP環境の構築
- Node.js、Ruby、その他のインストール
- Apacheを使ったバーチャルホストの作り方
- ローカルのGitリポジトリの作り方

まぁ目次だけでこのボリュームに圧倒される。これだけで手強さをひしひしと感じるが、逆に考えれば全部とは言わなくともいまどきはこれくらいできたほうがいろいろ捗る、というわけだ。デザイナー、フロントエンドの制作者は、閲覧環境やクライアントのニーズの変化によって好むと好まざるとにかかわらずこういった制作環境を知る・導入していく必要性があるだろう。
内容は基本的にツールの導入から使い方の説明だが、ごく初歩的なコマンドからエラーが出たときのトラブルシューティングまで、およそ想像される導入の初期段階に必要な手順が全て網羅されている。

設定ファイルの記述方法などサンプルのコードも豊富に載っているので、これを参考にしていけば最低限の環境がすぐに手に入る。
あちこちのブログ記事を部分的に参考にしてカオスになってしまっている人は、一からクリーンインストールしてもいいくらいだ。そして本書の手順に従ってツールを導入していけば、最短距離で望む環境を用意できるだろう。

最新のツール導入の切り札

この書籍は「参考書」あるいは「教科書」と思うとわかりやすい。実際に読み進めると「あーここハマったわー」という点に関する記述が非常に多かった。実際に、いまようやく解決したところが実は先に書いてあった、なんてこともorz 先に読んでからやればよかった…！「転ばぬ先の杖」という意味でも一読する価値はある。

僕自身、普段こういったツールを導入する場合はまずブログ記事を探し、幾つかピックアップしたものを読んで手順をおよそ把握してから手をつけるようにしている。だいたい一般的には似たような流れでそんな風にしている方は多いのではないだろうか。
ただ、実際にはそれほどスムーズには進まず、インストールまでは出来ても何かしらのエラーで上手く動かずに機能の追加を先延ばし…なんてこともしばしば。
上手く動かない時点で更にキーワードを入れて検索するので情報はどんどんカオスになっていき、大量に開いたブラウザのタブを前にため息をつく…。
時短するためにツールを導入しようとしているのに、その下準備に時間と手間がかかるという本末転倒なことにorz
無理を承知で言うならば、もう少し早くこの本があればよかったwww

プロとして恥ずかしくない新•WEBデザインの大原則

昨年12月に、『プロとして恥ずかしくない 新•WEBデザインの大原則』という書籍が刊行された。この書籍に、こもりさんは「監修」として参加している。

書籍の概要についてはこちらの書評を参考にしていただきたいが、この書籍でも新しい制作環境については詳しく解説されている。ただ、こちらの書籍はツールに特化したものではなく、いまの制作の背景から目的、現在のデザイントレンド、もちろん新しいツールの紹介や得られるメリットなど、その全般を紹介する内容になっている。
どういう目的で導入すべきなのかから知りたい、あるいはツールに限らず最新の動向を知りたいという方には、まずはこちらの書籍から読むことをお勧めする。

ちなみに、3/1（日）にこの書籍の出版記念イベントが開催される。興味のある方は参加してみてはいかがだろうか。

2015年のWebサイトの作り方

これもつい先日、1/21にロクナナ・ワークショップが主催となって銀座のGATで「2015年のWebサイトの作り方」と題されたイベントが開催された。スピーカーはこの書籍の著者のこもりさん。制作への新しい取り組み方から最新の制作手法まで、あっという間の1時間だった。
平日夜の開催で、かつその時点で東京で今年一番の寒さだったにもかかわらず立ち見も出る盛況ぶりで、改めてこの分野に対する関心の高さを感じたイベントだった。

当日のイベントの所感について、当日参加されていた木達さんがブログに記事を書いてくださっている。こちらもご覧いただくと、この電子書籍刊行に至る背景なども伝わるのではないかと思う。

当日のスライドや全編（！）の動画（67WSさん太っ腹や…）も公開されているので是非参考にしていただきたい。ちなみに、当日のスライドは公開後1日半で9,000viewも閲覧されていた。それだけこの分野に対する注目度がある、という証左でもある。

いつかは通らねばならない

実際のところ、慣れている現状の制作環境を切り替えるのは非常にコストがかかる。ツールそのものは無料で手に入るとしても、ツールの使い方を覚え、チーム内で共有し、業務に落とし込んでいかなくてはならない。

ただ、これまでの制作手法がクライアントのニーズに（コスト的にも出来上がるコンテンツとしても）マッチしない、要求を満たせなくなってきていることも事実。
フリーランスであれば導入は自分の好きなタイミングでできるだろうが、組織に属しているとそうもいかないケースも多いと思われる。

では実際どのタイミングで導入するのが良いか、ということになるが、こればかりは各々の状況によって判断が別れると思う。
特に最近感じることは、最近の制作環境は進歩が非常に早く、また、利用されるツールも数が多いので選択に迷うことになる。やっとの思いで使い方を習得してもいつの間にか開発が止まっていたり、後からリリースされたツールがあっという間にスタンダードになってしまったり…。ツールに振り回されるのは勘弁してほしいのでできるだけ確実なツールを使いたいが、かといってスタンダードになるツールの完成を待っていてはいつまで経っても制作環境のアップデートはできない…。

解決策

ひとつの解決策としては、身近な知り合いで導入している人がいたらその人の環境をそっくり使わせてもらうことだ。
最低限パッケージマネージャーがインストールされていれば、設定ファイルを共有してもらうだけで同じ制作環境がすぐに手に入る。
もちろんパッケージなどのバージョンの管理には気をつけなくてはいけないが、「いま動いている環境」をそのままもらうのが一番確実な方法であるし、わからないことはまずその人に聞くことができるだろう。
共同で同じ環境下で制作する必要がある時に、その環境をクローンできる最大のメリットが活かせる。これだけでも新しいツールを採用する要因になるだろう。

経典

では身近にそんな人がいない、ブログ記事を真似て途中までやってみたものの詰んだ、という人はどうすればいいだろうか？

それはもうこの電子書籍をiPadで開いて、手元に置きながら環境構築をするのが最も早道だと断言できる。

当然のことながら、ここに書いてあるものすべてが大事なことなので全部出来るに越したことはない。だが、いままで全くターミナルに触ったことがない人にとってはそこだけでも敷居は高いだろう。少しずつでも進めていけばいいので、まずは慣れることが先決だ。もちろんここに書かれているのはツールの「導入」部分なので、実際の運用についてはまた次のステップ、ということになる。

やはりちょっとターミナルの敷居が高く感じる人は、まずRuby（Macはデフォルトで入っているが）とnode.jsのインストールができたら、この辺の記事を参考にちょこっとだけターミナルに触ってみるといいのではないだろうか。ターミナルの操作に慣れつつ新しいツールの初歩に触れる、というのはとてもいい経験になると思う。実際に体験した僕が言うのだから間違いない。

大げさに『経典』などと言っているが、まさにこの1冊で最新の制作環境がひととおりわかって、なおかつすべてインストールして動かせる状態にまでできるというのは、いろいろ回り道をして失敗してきた自分にとっては非常にありがたい。もちろんここに書いてあるもののうちのまだごく一部しかできていないが、それでも延々ググって記事を探し、英語も調べながら時間を浪費するよりはるかに生産的だ。

実際、この電子書籍はWeb制作に関わる人は全員持っていていいと思う。なくても困らないのはきっとフルスタックエンジニアくらいのものだ。基本的にはデザイナーや僕のようなマークアップエンジニア向けだが、プログラマーやディレクターでもここに載っているようなツールを活用できる機会はいくらでもある。
ここに載っているツールが使えないことが『恥ずかしい』時代はもうすぐそこまで来ていると感じた。

【おまけ】ちょっとお得情報

まだ購入していない人に耳寄り情報がある。この電子書籍、当初は少々割引価格で販売されていたが、いまは定価の$25なので日本円でおよそ3,000円程度（それでも激安である）。これが39%offで購入できる特典付きのイベントが2月と3月に東京と大阪の2会場で行われる。
この「WP-D Fes #03」というイベント、当WP-Eの兄貴分であるWP-D主催のイベントで、僕も東京会場のスタッフとして参加する。

詳細はリンク先のイベントの詳細ページをご覧いただきたいが、参加申し込みが完了すると、登録したメールアドレス宛てに専用のダウンロードリンクが送られてくる。このイベント自体も新しい制作環境構築の話などなかなか興味深いセッションが多くあるので、都合をつけて是非参加することをお勧めする。

最後は告知になってしまったが、Web制作者ならば誰でも勉強になる書籍である。金額も決して高いものではないし、ここに書いてあることが実践できれば充分モトが取れてお釣りがでるはずだ。少しでも興味があったらこちらからの購入を是非お勧めする。