shimakyohsuke.com

行って参りました、CSS Nite イン KOBE!

CSS Nite、WordBench と立て続けに勉強会に参加したので、
教えてもらった事を忘れない内に復習して書いていきます。

当日のメモを中心に内容を書いていくのでラフな感じで書いてます。ほぼ箇条書きですし。
あおり気味に書いてるのは受講中に自分自身がそう感じたのでなんかそんな感じになってます。

登壇者のこもりさん自身はゆっくりと丁寧にわかりやすく説明してくださってました。

イベント概要

CSS Nite in KOBE, Vol.8「デバイス多様化時代に備える Web 制作環境の効率化」
https://cssnite-kobe.doorkeeper.jp/events/22111

登壇者:こもりまさあき
日時:2015年4月24日(金)14:00-17:45
会場:plug078 コワーキングスペース(新神戸)

Web制作に関わる方のためのセミナーイベントCSS Nite in KOBE
http://cssnite-kobe.jp/

内容

  1. Web 制作を取り巻く環境の変化
  2. 従来のワークフローの問題点
  3. ワークフローの全体効率化、部分効率化

Web 制作を取り巻く環境の変化

モバイルからのアクセス増!
デバイス自体の多様化がなお進行中!
Android は世界で1万8千機種あるらしい
閲覧環境はもはや限定的ではない

それにより、コンテンツも変化していく。
アクセスするポイント(PC なのかスマホなのかタブレットなのか)が違うので、閲覧環境が様々。
コンテンツをいつどこで取得されるかわからない世界

コンテキストファースト

モバイルファーストとはいわれるが、やはり時と場合によるのでサイトの性質によって、
レスポンシブ対応することが最適なのか考えよう。

要は、PC 向けのページを先に充実した方が良い場合があるし、
モバイルファースト、モバイルファースト言ってないで
顧客のサイトの性質に合わせてスタートしようってことですね。

いかにして時代に適応するか

デバイス多様化による製作時間の増加 → ヤバイ
コンテンツのリアルタイム化ビジネススピードが加速 → ヤバイ

こんなんでいままで通りで対応できるの?


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

制作現場でありがちな問題

  • データが届いていない問題
  • どれが最新ファイル?問題(◯◯_最新.zip←これやめろ)
  • 作ってみたけど、動作しません問題
  • 勝手にファイル差し替えられる問題

制作ワークフロー改善の必要性

トラブル対応は時間の無駄。
問題の多くは改善できる類いのものであることが多い

サンクコスト(埋没コスト)に囚われない

「うちはずっとこれでやってるから」→やり方にこだわり続けることはかえってコスト高

考えるのは関係者全員

例え自分の実務に直接関係なくても、
情報をとりにこないやつは知らないうちに取り残されることに気づけ。


ワークフローの全体効率化、部分効率化

データの受け渡し

まずは Git でバージョン管理。
お馴染みのサービス

  • Github
  • Bitbuket

Git 関連でこんなサービス・ツールもある

beanstalk

http://beanstalkapp.com/

検索スキルが必要なサービス名。AWS Elastic Beanstalkではないので注意。

サービス内容はリポジトリにファイルおいて、
ブラウザ上でコードレビュー・コミュニケーションとって、
問題なければそのままブラウザ上からの操作で FTP を使って、
ステージングや公開サーバーへデプロイしてしまおう的な。。。

Web フックがあるので Slack などにチャットを送れる。
無料プランもあるがリポジトリ数やらに制限があるので実務で使うには有料プランで。
こもりさんが実際に使用してる感じをみると便利そうな感じはしました。
でも、いかんせんサービス名のせいかググってもあまり情報がでてこない。

Git-ftp

http://git-ftp.github.io/git-ftp/

Git でファイル管理をしつつ FTP でしか公開サーバーへアクセスできない状況、
例えば共有レンサバなどでは、

  1. Git のリポジトリへファイルアップロード(git commit , git push)
  2. FTP ソフトで公開サーバーへファイルアップロード(drag and drop)

といった作業が必要で二度手間です。
この作業を一括でやってしまおうっていうツールです。

Git Large File Storage

https://git-lfs.github.com/

Github で重たいファイルも扱えるよー

GitSavvy

https://github.com/divmain/GitSavvy

Sublime Text から直接 Git コマンド使えるプラグイン。
ターミナルへウィンドウ移動しなくても ST の画面で操作できる。

コミュニケーションコストの削減

コミュニケーションを見える化できるサービス達。

チャットサービスはたくさんあるけど、
プラスアルファを考えると選択肢が絞れそう。

ワイヤーフレーム、プロトタイピング

ワイヤーフレーム

アートボードをデバイス毎に作成できるので作りやすい。
フォトショだと工夫が必要。

  • Sketch
  • Ai
Sketch いいよ
  • ワイヤーフレームごと同じファイル内で展開できる。
  • Web パーツをシンボル化できる

作り込みすぎるデザインには向いてないかも。

プロトタイピング

プロジェクト初期の段階であっても、ブラウザでラフが見せれる。
手作業にこだわること=作りこんだデザインがいいことではない。
使えるものは使う。

これらを取り入れれば、
プロジェクト初動でデザインを作りこむ必要がない。

画像ファイルでの確認ではなく、
ブラウザ確認(実機確認)が一番フィードバックを得やすいのは確実なので、
もっと積極的に取り入れたい。

こもりさんの PC 画面(スクリーン)を見逃さずサラッと使ってたやつ(メモってた)

指定幅でスクショとれる npm

指定した幅でめっちゃスクショとってくれる。

pageres - Capture website screenshots
https://github.com/sindresorhus/pageres

pageres - 指定幅でのスクリーンショットをまとめて取得 MOONGIFT
http://www.moongift.jp/2014/02/pageres-指定幅でのスクリーンショットをまとめて取得

制作環境の共有による業務効率化

Node.js、タスクランナー(Gulp、Grunt)

Node.js を使ったタスクランナー(Gulp、Grunt)を使えば制作環境の共有ができる。
Node.js はインストールされてて当たり前。
タスクランナー(Gulp、Grunt)を使えればなおよし。

Node.js
https://nodejs.org/

gulp.js - the streaming build system
http://gulpjs.com/

Grunt: The JavaScript Task Runner
http://gruntjs.com/

Bundler

Bundler: The best way to manage a Ruby application’s gems
http://bundler.io/

プロジェクト毎のパッケージ依存関係を解消してくれるツール。
Ruby 製だから、sass/scss は Bundler でバージョン管理できる。

他の方と環境を共有する場合、
自身の PC にインストールされたパッケージのバージョンを前提に環境を共有してしまうと、
他の方の環境のパッケージのバージョンが異なる可能性が高いので、共有した環境が動かないかもしれない。
プロジェクト毎にバージョンを指定し、Bundler などでパッケージのバージョンを管理し共有しなければならない。

仮想環境

仮想環境を使えば公開用のサーバーとローカルで建てたサーバーの、
環境の差(OS や Apache、PHP、MySQL 等のバージョンの差)を減らすことができる。
ローカルで動いてたのに公開サーバーに展開したら動かない問題の解消

  • Vagrant
  • Docker
  • VCCW

Vagrant や Docker は一度、指定の OS やソフトの情報を書いた設定ファイル書くことで、
ローカルで建てるサーバー等の情報を共有することができ、
面倒な構築作業不要(大体コマンド一行)でローカルホストを建てることが可能。
(Vagrant や Docker 本体がインストールされていること前提)

よって、設定ファイルさえあればいろんな環境を他の人と共有ができ、
チェックしなければならないデバイスが今後増えてきても、
設定ファイルを誰かが書いて共有すればいいのです。

WordPress なら VCCW はすごく便利

WordPress で言えば、
大体 WordPress 本とかに書かれている以下作業、

  1. XAMPP や LAMP で Apache・PHP・MySQL のインストール
  2. DB セットアップ、
  3. WordPress インストール
  4. WordPress の初期設定

などを手作業で行わなければならず、なにかと面倒でした。

もし上記の環境(苦労して作った環境)のどこかがおかしくなった時、
一度行ったあの忌々しい記憶が蘇り、自分の場合なかなかリセットする気になれませんでした。
(全部消して再インストールはやりたくない。)

しかし、VCCW を使えば、上記の一連の流れがすべて自動で実行され
コーヒーブレイクをしていれば勝手に環境を構築してくれるので、
あとはデフォルトで指定されている URL にアクセスすれば、WordPress のログイン画面がでてきます。

使用方法も簡単で、コマンドラインで vagrant up と入力するだけ!

これだけ簡単に WordPress をローカルに構築することができるので、
少し調子が悪いなとか、プラグインでなにかミスって DB がおかしくなっても、
すぐに環境をリセットする踏ん切りが付きます。(治す技術も必要ですが。)

最近は Wocker というツールもあり、
今度、WordBench 大阪で注目の戦いがあるので、どちらを使用するかはこの決戦を見て決めましょう。

第41回 WordBench 大阪 「VCCW vs Wocker」
https://wbosaka.doorkeeper.jp/events/23279

山崎邦正 vs モリマンばりの戦いに期待。
(本当は VCCW と Wocker それぞれの特徴やインストール方法、使い方を教えてくれます。)

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

適材適所で選択する、新しい CMS や Static Site Generator

a-blog cms スマホ・PCサイトを一元管理!
http://www.a-blogcms.jp/

Craft
https://buildwithcraft.com/

Webhook
http://www.webhook.com/

Harp, the static web server with built-in preprocessing
http://harpjs.com/

CMS といえば WordPress みたいなところがありますが、
実際に運用してみると、「こういった使い方をしたい」っていう欲が出てきます。
当然ながらそういった欲を解消するにはプラグインを使用し、
自身でカスタマイズしなければならない訳ですが、
最近でてきた CMS はそういった細かい需要に最初から応えていているものが多いようです。

Craft はパッと見、UI がユーザーフレンドリーな CMS だなと思いました。
でも October の方が気になります。

October - The PHP platform that gets back to basics.
https://octobercms.com/

ちなみにこのサイトは Static Site Generator の Hexo を使用しています。

プレビュー、テスト環境の改善

BrowserSync - Time-saving synchronised browser testing
http://www.browsersync.io/

ngrok - secure introspectable tunnels to localhost
https://ngrok.com/

ちょっとした確認時に、
ローカルホストをみんなに閲覧できる状態にするツール。

BrowserSync は同ネットワーク環境内でしかローカルホストを閲覧させることができないが、
ngrok を使えば、ローカルホストを外部からアクセスさせることができます。

ngrok はどこにいても指定の URL にアクセスすれば、
自分のローカルホストをそのまま外部に共有できるので、
どうしても見たいけど、外だから heroku にあげてっていうことが無くなりますね。


まとめ

これまでの制作環境では閲覧環境(デバイス多すぎ)の変化についていかないから、
ディレクター・デザイナー・エンジニア・クライアントも!含め、
みんなのワークフロー見直そうぜって感じでした。

今は最新のツールでも、時がくれば廃れていくのが世の常なので、
ワークフローを最適化するっていう姿勢さえ崩さなければ大丈夫かなと思いました。

自分だけであっても改善できることもありますが、
チームで取り組んだほうが当然効率化を図れます。
その際、いかにしてチームを巻き込む(もしくは切り捨てる。。)ことができるかが、自分自身の課題です。

最後にこもりさんが仰っていた3つのことを盾に、
社内でプレゼンしようと思います。

  1. 環境の変化を捉えて未来に備える準備を
  2. 既存のワークフロー上の無駄を減らそう
  3. 最新のワークフローで仕事をスムーズに

以上です。
勉強しよう。

あと最後まで書いてて気づいたのですが、
実際にこもりさんがおっしゃてたことと、自分の感想がごっちゃ混ぜになってるので読み難いっすね。

なんにしろ、CSS Nite 面白かったです。