CSS Nite in KOBE, Vol.8 「デバイス多様化時代に備えるWeb制作環境の効率化」参加レポート [ 紹介されたツールのまとめ付き ]

2015年4月24日（金）に新神戸のplug078 コワーキングスペースで行われたCSS Nite in KOBE, Vol.8 「デバイス多様化時代に備えるWeb制作環境の効率化」に参加してきました。
今回の講師は、こもりまさあきさんで、こもりさんの視点で見る効率化についてを知りたくて参加してみました。
このブログを読んでいる人は知っているかもしれませんが、僕はけっこうこもりさんの話を聞きに行っているので、実は今回の内容も情報として「全く知らなかった」というものはほとんどありませんでした。
でも、話を聞きに行ったのは「新しい情報を得よう」ということではなくて、「考え方を再構築するきっかけとして改めて現場について考えなおしてみる」為に参加しました。
普段「これ知ってる」って思うことは、ちゃんと勉強していればあるかと思いますが、「これ知ってる」っていう認識でいると知った気になってしまうということもあり、僕はその部分が危険だなと常々考えています。
そういう「自分の知ったかぶりの皮」を剥がす意味でも、こういう機会はすごく大切だと思っています。
なので、これを読む人も「これ知ってる」と思考停止をせずに、初心に戻った気持ちで考えてみると面白い発見があるかもしれません。
ちなみに、今回の内容は主に「作る人」向けの内容です。

当日のハッシュタグはこちら。
イベント自体のタグで管理されていたので、勝手に今回分だけでまとめました。

cssnite_kobe#08

取り巻く環境の事

まずは前提の話から。
今回のタイトルにもあるように、現在は「デバイス多様化時代」ともいえる状況で、かつてのようにPCで作成した環境でみんなが画面の前に座ってPCでインターネットを見ていたという時代ではありません。
自分の生活や周りの風景を思い出してみると分かりますが、PCの前に座ってインターネットを見る機会よりも、今で座ったり寝転んでスマートフォンやタブレットで情報を閲覧でしたり、電車の移動中はスマートフォンの画面をけっこうずっと見ていたりと、これまでとは明らかに違う形でインターネットとの接触ポイントが変わってきています。
自分だけではなく、ふと電車内で周りを見ればほとんどの人がスマートフォン見てますし、携帯電話売り場をみればスマートフォンがものすごいたくさん発売されていることも実感します。
アクセス解析を見れば実際のアクセスの8割がタブレットやスマートフォンからという業種のサイトもあります。
インターネットを取り巻く現在の環境がそうなのであれば、まずはそこを意識して合わせていくというのは至極当然な考え方かと思います。
それをふまえた上で、「じゃあ実際に何をどうすればいいのか」を考えることができるようになるわけで、ここで初めてスタートラインに立っているということだと思います。

従来のワークフローの問題点

さて、その現状をふまえて従来のワークフローの問題点はどこにあるのかを考えなおしてみる必要があります。
分かりやすいところで、「こういうことあったー！というようなあるある話」からひもとくと考えやすいということで、「データが来てるとか来てない」とか、「最新ファイルってどれよ？」みたいな例を上げて説明していただいたので分かりやすかったです。
問題点はその人によって千差万別だと思うので、「これが確実」という絶対の正解はありませんが、まずは「できるところから」始めることが重要で、旧式の「慣れた」やり方にこだわらないというのは非常に共感出来ました。
こもりさんは「サンクコスト」という風に表現されていましたが、まさにそのとおりだなと思ったのは、「こだわることがコスト高」になっているという点です。
従来のやり方に固執し、視野が狭くなることで、少しの努力の先にある多くの無駄を効率化できると考えれば「まずはやってみる」というのが実は理にかなった考え方だということも理解できるかと思います。
そして、本当に大切なのはこれを「関係者全員が考えること」。
やる前から「どうせ出来ないだろう」と考えるのではなく、ダメもとでもやってみることで少しづつでも変わっていくことができるということもすごくいいメッセージだったと思います。
実際にこもりさんが経験した事例を元に「やらないから変わらない。ダメもとで言ってみる、やってみる。」ということがすごく印象的でした。

全体効率化、部分効率化

今までの段階で非常にたくさん感想書いてますが、実際にはここまでで全体の1/3くらいの時間で、実はここからが本編だったりします。
ここから先はデモも交えての内容になるので、紹介されたツールと特徴を書いていくことにします。
大切なのはこれから紹介されるツールは、あくまで「効率化を実現するための道具」であり、本当に大切なのは「効率化を実現する理由」です。
「何のために、なぜそれをするのか」という、根本的な部分は絶対に忘れないようにしましょう。

データ受け渡し

業務をする際に行うデータの受け渡しのためのツール。
やりとりが煩雑にならないように、誰もが同じ状況で同じ状態を維持するための道具です。
今回は主にGitを中心に話をされてましたが、おっしゃられていたようにGitとGithubの違いとかはGitの事をあまり知らないと混同しやすいポイントだと思います。
すごく乱暴に書くと、GithubはGitという仕組みを使ったサービスということです。
個人的には、Sublimetext3のパッケージ「GitSavvy」はすごくアツイサービスだと思っています。
詳しく書くと感想が暴走しそうなので自重しますが、ソフトの立ち上げすら不要になるとてもいけてるサービスです。

• Git[Gitという仕組み]
• Github[Gitを使用したサービス]
• Bitbucket[Gitを使用したサービス]
• Beanstalk[Gitを使用したサービス]
• SourceTree[Gitのクライアントソフト（無料）]
• Tower[Gitのクライアントソフト（有料）]
• GitLargeFileStrage[Gitのファイル制限対策]
• Universions[Gitみたいな別の仕組み]
• GitSavvy[SublimeText上でGitを使用するためのプラグイン]

コミュニケーションツール

コミュニケーションのための使用するツールを何のために使うのかと考えると、「メールを送ったとか送ってないとかいったトラブル」を回避してみんなが気持ちよくスムーズに仕事ができるようにするためです。
同じような機能を持ったツールが沢山ありますが、ツールに人を合わせるのではなく、どのツールを使うことが一番チームのコミュニケーションが円滑になるのかを考えて採用することが重要です。

• Backlog[プロジェクト管理ツール]
• Basecamp[プロジェクト管理ツール]
• Brashup[プロジェクト管理ツール]
• chatwork[チャットツール]
• slack[チャットツール]
• glip[チャットツール]

ワイヤーフレーム・プロトタイプ

Webサイトの画面構成/ワイヤーフレームやアプリのプロトタイプを作成する時に使えるツール。
使用目的は「早くつくって問題点を洗い出し、より早く改善を繰り返す」というスピード化だったり、早く実際に動く形で確認できるものを用意することでお客さんとの意識の共有を行うこととかが目的です。
SketchやIllustratorには「アートボード」の概念があるので、色々なパターンを１画面で作成できるというメリットがあります。

• Sketch
• Adobe Illustrator
• inVision
• UXPin
• prott
• Framer
• ionic

※説明が難しいので（一言でどう言えばいいのか難しいという意味で）[]の紹介は省略します。

CSS Flamework

予め用意されたスタイルを使用して、ささっときれいな形でのテストを作成すれば、開発速度が上がりますね。
以下の2つが有名ですが、個人で作られた物を含めるとCSS Flameworkはもっと膨大な量があります。

• Boostrap
• Foundation

制作環境の共有

作るときの環境を同じにしておけばトラブルは減ります。
「package.json」や「gulpfile.js」のようなテキスト形式で環境設定を共有できるようにしておくと、すぐに別のマシンでも同じ環境で作成を行うことができるようにもなったりします。

• node.js[とりあえず入れる]
• npm[node.jsのパッケージ管理]
• Bundler[細かいバージョン管理]
• Vagrant[仮想環境]
• Docker[仮想環境]
• VCCW[Vagrant + Chef + WordPress]
• WP-CLI[コマンドラインからWordPress]

コンテンツ運用管理の効率化

作ったコンテンツを再利用したりモジュール化したり、色々アプローチは異なってもやりたいことは「同じ単純作業を繰り返さないようにしたい」という部分です。
ツールで管理したほうが簡単で、いわゆるCMSもそういう類のものです。

• a-blog cms
• Craft
• webhook
• harp

テスト環境

テストするための環境は「より早く」「より簡単に」用意をすることが大切で、ここには時間を書けずに違うところに時間をかけたいところです。
ということで、テスト環境を作る場合はツールに任せるというのが簡単ですね。

• BrowserSync[ライブリロードや端末間同期など]
• ngrok[ローカルの作成物を簡単に共有]
• degitalocean[dropletで色々簡単に利用出来る]
• aws[amazonが提供しているwebサーバー]
• divshot[Static Web Hosting]

まとめ

今回こもりさんがお話ししてくれた内容は、全部をやらないとダメという話ではありませんでした。
たくさん紹介したツールの中で、自分たちのチームで使えるツールは何かなということを考えることが大切ですね。
ただし、Gitとnode.jsはもはや「避けては通れない」所まで来ているものなので、知ってるけどまだ手を出してないという人は食わず嫌いをするのはやめたほうがいいとは思います。
以前「Git使えない人と仕事をしたくない」という趣旨の話でWebが盛り上がったことがありましたが、その可否はともかくとして「めんどくさそうだからやりたくない」と、しようとする意思を放棄している人と仕事をするのは大変だろうなとは思います。
したいかしたくないかではなく、そういう考え方の人とうまく付き合っていくというのは大変だろうなということです。
出来ないなら出来ないなりに、頑張ろうとしている姿勢がある人の方が僕は好きです。

あと、嬉しかったことがあって、セミナーの最後にブログは基本書いたら書きっぱなしなので紹介記事を鵜呑みにせずに情報元を確認したほうがいいという話の際に、「ブログの内容をきちんと直して更新するのはそこにいる出口さんくらいですよ（笑）」と言っていただけたことがすごく気恥ずかしいながら嬉しかったですね。
普段している事が評価されていると感じられるとやはりうれしいです。
と同時に、やはり「ブログは書いたら書きっぱなしになるもの」というイメージが強いので、そこを変えていけるように自分自身が動いていこうと気持ちを新たにしました。
最後の部分は本編とは関係ないですが、セミナーに参加するときのメリットとして、本来想定していなかった事に気付けるということがあるんですね。
そういう意味でもやはり参加してよかったなと思えるいいセミナーでした！