WP-D Fes #01 Megane Fes in GMO 2014/02/01/sat

1. これからのWEB制作必須スキルセット

2. 機器
Apple - MacBook Pro Ratina
-
画面キレイ!
-
スペックに文句なし
-
16GB メモリ
-
キャプチャが倍で面倒
-
ストレージ256GBは
こころ細かった

3. まずはデモ
http://www.youtube.com/watch?v=WjYWMPdpfHk

4. さて黒い画面です

5. さて黒い画面です
cd 移動

6. さて黒い画面です
ls 表示

7. さて黒い画面です
exit 出る

8. さて黒い画面です
大抵書いてある
ドルマークは不要

9. このページが大事
http://gatespace.jp/2013/10/31/mac-web-setup-use-terminal/

10. Homebrew

11. webkit2png

12. node
node
npm
!
ruby

13. npm

14. Ruby

15. RubyGem

16. Grunt

17. Gruntはnpm

18. Compass

19. CompassはRuby

20. なんにせよこのページです
http://gatespace.jp/2013/10/31/mac-web-setup-use-terminal/
色々なのでとにかく
gatespace
!
----

21. 何回も出てくる内容
!
何がし -v
バージョン確認
!
確認
-v
これができればインストールできてる

22. やっと Gruntです
そしてGrunt
nodeで動くので
npm でインストールしてる

23. やっと Gruntです
https://github.com/megane9988/Foundation5-meganeset
タスクランナー
!
いろんなことを任意のタイミングでできる
!
メガネのを見てみましょう
!
ホスト作って
!
監視して
!
そのタイミングで自動化

24. さて黒い画面です
とここまでやりましたが
!
codekit
koara
!
などは
入れればできます。

25. さて黒い画面です
!
じゃあなんでやるの？
!
そのうち、もっとすごい機能がでるかも
なれるならいまのうち

26. さて黒い画面です
つづいてgit
!
分散ファイル管理
!
流れ
!
ローカル編集
!
リポジトリ（共有保管庫）にプッシュ
!
本番からプル

27. さて黒い画面です
いいところ
!
リポジ
トリ
ftp見たいにまどろっこしくない
!
全部履歴残る
!
戻せる
!
プログラマの変更箇所わかる
!
学べる
本番
ローカル

28. さて黒い画面です
共有保管庫
!
github
!
掲示板のような機能があり
フォローしたり
ウォッチしたり
!
あとほかにも、ある

29. さて黒い画面です
バックログは見やすいうえに
課題管理と繋がる
!
べんり
!
おぼえるとすぐ
!
黒い画面じゃなくても大丈夫
!
でも使えた方がお得

30. さて黒い画面です
foundation
!
cssフレームワーク
有りものですぐ実装できる
!
例えばオフセット
!
グリッド

31. さて黒い画面です
http://notnil-creative.com/blog/archives/1785
ドキュメントをみながらやればok
!
ヒッシーのブログは翻訳してくれてる
!
8に対応したければ3をつかう
!
脆弱性きにしなくてよい

32. Vagrant
vagrant
!
ローカルにサーバ環境を作る
!
一発でwordpress入る
!
すぐはじめられる
!
ここで修正
!
確認後git を使ってアップすれば効率良い

33. Vagrant
up
!
halt
!
destroy

34. wp cli
wp cli コマンドでいろいろ操作
!
プラグインリスト
!
コアアップロード
!
手っ取り早い
!
WordPressが入ってるサーバで
WordPressを操作する

35. Fesサイトでデモします
こんな感じ
リポジ
トリ
!
fesサイトも大体全部使ってる
本番
ローカル

36. 後出来る限り便利なソフト
ClipMenu
sublime
Dragon Drop
Bartender
Fantastical
Alfred
!
!
macの方がべんりツール多い印象
さあ、快適構築環境でレッツラゴー！