最近のWeb業界のワークフローや
インフラのお話とハンズオン
2015年初夏 Picos LLC. 川田知愼
1

本日の予定
前半 いろいろ説明してみます
後半 ハンズオンをしないと無意味です
2Picos LLC. 川田

お話を始める前に
Picos LLC. 川田 3
IT会社のインフラに
本当に必要なものとは

お話を始める前に
Picos LLC. 川田 4
最先端の技術やサービスではなく
ある程度成熟したものです

最先端の何が悪いのか？
仕事で使えるレベルに達しているか？
ただ話題になっているだけじゃないのか？
社内のインフラを頻繁に変えていないか？
そういうのは個人で使ってから展開しましょう
5Picos LLC. 川田

インフラを導入する基準
周りに使っている人がチラホラといる
検索すれば解説しているサイトが多くある
自分以外で社内に理解者がいる
意識高い系の人はインフラ設計に向いていません
6Picos LLC. 川田

前半の目次
1. 社内からNASや外付けHDDを排除しよう
2. プロジェクト管理ツールを使おう
3. 素のCSSをやめよう
4. タスクランナーを使おう
7Picos LLC. 川田

１つ目のお話
Picos LLC. 川田 8
社内からNASや
外付けHDDを排除しよう

そもそもの話
NASって何に使ってるの？
外付けHDDは何のために使ってるの？
9Picos LLC. 川田

それって
Picos LLC. 川田 10
クラウドじゃダメなの？

社内から排除したい理由
Picos LLC. 川田 11
 管理コスト
NASの状況見てる？ アラートとか来てないよね？
その外付けHDD、寿命大丈夫？
 物理的なリスク
落として壊さないよね？
その外付けHDD、持ち歩いて大丈夫なの？
壊れた場合、誰が復旧するの？

有名なお話（東日本大震災の時のお話です）
Picos LLC. 川田 12http://www.slideshare.net/dateofrock/20130126-local-developerday

代わりに何を使うの？
Picos LLC. 川田 13
Amazon S3
Dropbox
SugarSync
GoogleDrive いろいろあるけれど…

仕事でExcelやPowerPointを使うのであれば
Picos LLC. 川田 14
Office365がオススメ！

主な理由
Picos LLC. 川田 15
既にOffice365契約してるよね？
あの料金で1人1TBは魅力的
SharePointで案件ごとに管理しやすい
案件への参加と離脱がしやすい

ちょっと分かりにくいけど
Picos LLC. 川田 16
組織用のSharePoint領域に作るサイト
個人用のストレージ内に作れるサブサイト
この２つがあります

個人のストレージ領域でサブサイトを作ろう
Picos LLC. 川田 17
SharePoint Onlineとして割り当てられている容量が使
えないレベル
個人のストレージをサブサイトとして割り当てれば、契
約人数×1TBの容量が使えるので、全く困らない
サイトを定義していた人が退職すると面倒くさいかも？

ここから作ると個人用の領域になります
1. Office365にログイン
2. 右上の歯車
3. サイトコンテンツ
4. 新しいサブサイト
5. URLに -my.sharepoint.com が含まれます
Picos LLC. 川田 18

OneDrive for Business に同期しよう
Picos LLC. 川田 19
1. タスクバーのOneDrive for Businessを右ク
リック
2. 新しいライブラリの同期
3. SharePointのURLを貼り付ける
どうしてこんなにも分かりにくいのか…

こんな風に運用すればいいかも
Picos LLC. 川田 20
 案件が発生したらとりあえずサブサイトを作る
 URLを関係者に教えるか、メールで通達して同期してもらう
 案件に関するファイルを入れていく
 案件が終息したり、案件から離れるときはOneDrive for Business
から切り離す（切り離してもサーバー上に保持されます）
切り離す事でマシンの容量を確保できる！
古い案件のファイルが視界に入らないのでフォルダの見通しが良い！

いい事ばかりではない
Picos LLC. 川田 21
Dropboxとかに比べて遅い（我慢できる）
同期できない拡張子がある（.jsonとか）
Mac用のクライアントが中途半端
使い方によっては安定しない

この運用方法であれば
Picos LLC. 川田 22
NASと外付けHDDいらないよね？

2つ目のお話
Picos LLC. 川田 23
プロジェクト管理ツールを使おう

プロジェクト管理してますか？
Picos LLC. 川田 24
何を使ってますか？

非常に良くないやつ
Picos LLC. 川田 25

ぱっと見良さそうでも辛いやつ
Picos LLC. 川田 26

やってみたけど結局使いにくいやつ
Picos LLC. 川田 27

硬派すぎるやつ
Picos LLC. 川田 28

それぞれの課題
Picos LLC. 川田 29
 Excel管理は製作時間もかかるし更新内容を共有しにくい
 Windowsの専用ソフトは万人向けではない
 カレンダーでタスク管理できるような案件がそんなにない
 硬派すぎるプロジェクト管理ツールは、高機能すぎるのと、
UIがユーザーフレンドリーじゃないし、管理者が必要

じゃあ…
Picos LLC. 川田 30
一体どうすればいいんだよ？

答え
Picos LLC. 川田 31

Picos LLC. 川田 32

Backlogの特徴（公式サイト引用）
Picos LLC. 川田 33
操作が簡単で分かりやすい＆使いやすい！
Web上でプロジェクトを一元管理できる
メンバー間のコラボレーションを促進！

基本的なフロー
Picos LLC. 川田 34
1. 案件ごとにプロジェクトを立てる
2. 見えている作業を登録していく
3. それぞれの作業に担当者と期限を決めていく

作業単位の問題
Picos LLC. 川田 35
どういう単位で作業を登録するか？
サイト制作であれば、
ページごとに追加するのがオススメですが、
このへんは各自やりやすいように！

登録すると
Picos LLC. 川田 36
どうなるの？

課題管理（公式サイト引用）
 プロジェクトにおける課題を追跡することで、
「最新の進捗や誰が進めているのか」
など、課題の状況を把握できます。
 もちろん、Web上で一元管理しているので、
メンバー全員で課題情報の共有も可能です。
ここだけ見ておけば自分やメンバーがやるべき
課題がひと目でわかる！
Picos LLC. 川田 37

ガントチャート（公式サイト引用）
 課題の開始日と期限日を設定するとガント
チャートを自動的に生成！
 課題の状態と連携し、進捗状況を視覚的にす
ることで、プロジェクトの「見える化」を簡
単に実現できます。
Excelファイルとしてダウンロードできたり！
Picos LLC. 川田 38

バーンダウンチャート（公式サイト引用）
 バーンダウンチャートは、「今どれくらい進
んでいるのか」「期限までにあとどれくらい
で終わるのか」が、
一目で確認できるグラフです。
 課題登録時にマイルストーンを設定すると自
動で作成。課題を完了するとバーンダウン
チャートにも反映されるので、常に最新の進
捗状況を把握できます。
大型案件の時は全体の進捗を把握しやすい！
Picos LLC. 川田 39

Backlogのその他
Picos LLC. 川田 40
長期案件、更新案件などはwikiを整備できる
必要な場合はバージョン管理と連携できる
使ってる人が多い！

Backlogがよさそうなことは分かった
Picos LLC. 川田 41
で、いくらかかるの？

仕事ならプレミアムプランがオススメです
Picos LLC. 川田 42

あとで
Picos LLC. 川田 43
ハンズオンしましょう
重要な事をお伝えします

3つ目のお話
Picos LLC. 川田 44
素のCSSをやめよう

現状
Picos LLC. 川田 45
Sass / LESS / Compass
使ってますか？

色々あるけど
Picos LLC. 川田 46
Compass使いましょう！

Compassとは
Sassを便利にしたもの
ソースが書きやすい＆高速に書ける
CSSスプライトと相性が良い
とにかく楽です。素のCSSしか使うなと言われると、
かなりのストレスを感じるくらい楽です。
Picos LLC. 川田 47

頻繁に使用する記述
.container{
background-color: red;
.span5{
background-color: pink;
}
.span7{
background-color: orange;
}
}
.container {
background-color: red;
}
.container .span5 {
background-color: pink;
}
.container .span7 {
background-color: orange;
}
Picos LLC. 川田 48

Compassの説明を詳細にすると大変なので
Picos LLC. 川田 49
詳しくはこのページを見ましょう
liginc.co.jp/designer/archives/11623
あとでハンズオンします！

4つ目のお話
Picos LLC. 川田 50
タスクランナーを使おう

タスクランナーとは
Sassのコンパイル
JavaScriptの圧縮
ブラウザのリロード
FTPでのアップロード
などなど、何度も同じことを繰り返すタスクを自動的に行
なってくれるものです
Picos LLC. 川田 51

どうやって使うの？
Picos LLC. 川田 52

node.js
 本来は高尚な目的があるサーバーサイドjs
 GruntとGulpのおかげで、それのツールだと
思われている（かもしれない）
 socket.ioによる通信が得意
Picos LLC. 川田 53

Grunt vs gulp どっちがいいの？
Picos LLC. 川田 54
弊社ではgulpを使っています
設定ファイルが書きやすい
理由は… おそらくこれくらいですが、重要です。

src と dest(destination)
Picos LLC. 川田 55
タスクランナーを使用する場合、srcとdestの概念が必須です
src → 編集するファイル
dest → 納品するファイル
基本的にdestのファイルは触りません

concat
Picos LLC. 川田 56
1.css
2.css
min.css

minify
Picos LLC. 川田 57
JSを1行にする
CSSを1行にする（納品後他の人が触る場合は遠慮する）
HTMLを1行にする（あまり見かけない）
こうする事によって読み込みが早くなる。

concat + minify で import.css を抹消
@charset "utf-8";
@import "reset.css";
@import "basic.css";
@import "common.css";
@import "header.css";
@import "footer.css";
@import "top.css";
@import "contents.css";
これは酷い…
all.min.css
Picos LLC. 川田 58

具体的な例 その1
srcのファイル(.scss)
base.scss
pc.scss
sp.scss
destのファイル
all.min.css
Picos LLC. 川田 59

具体的な例 その2
srcのjsファイル
$(function() {
$("#tab li").click(function() {
//コメントだよ！ ここさわってね！
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(num).removeClass('disnon');
$(".pic").addClass('disnon');
$(".pic").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
destのjsファイル
$(function(){$("#tab li").click(function(){var num=$("#tab
li").index(this);$(".content_wrap").addClass('disnon');$(".conten
t_wrap").eq(num).removeClass('disnon');$(".pic").addClass('disno
n');$(".pic").eq(num).removeClass('disnon');$("#tab
li").removeClass('select');$(this).addClass('select')})});
Picos LLC. 川田 60

コーディングで一番面倒くさい事…
Picos LLC. 川田 61
ブラウザの更新

Socket.IOの恩恵を感じる
Picos LLC. 川田 62
今までもこれを回避する手段は色々あった。
しかし‥
Socket.IO の存在により、レスポンシブサイトの
コーディングがめちゃくちゃ楽になる！

感動する例（ハンズオンでやりましょう）
Picos LLC. 川田 63
1. 作業PCのIPアドレスを調べる
2. スマートフォンや他のPCでそれを開いておく
3. 作業PCでHTMLやCSSを保存
4. 全てのスマートフォンやPCのブラウザがリロードされる！
5. スクロールすると・・・！！！！

タスクランナーを使う知識
Picos LLC. 川田 64
タスクランナーは確かに凄いツールですが
基本的に案件よって自分で設定ファイルを書き換える必
要があるため、ある程度の知識がないとダメです
これは徐々に覚えていきましょう！

さて
Picos LLC. 川田 65
お話は終わりです
実際に触らないと無意味です

後半の目次（スライドはここまで）
1. Backlogを使ってみます
2. gulpの動作環境を整えます
3. compassを含め、タスクランナーを動か
ししつつ動作を確認します
66Picos LLC. 川田