これからのweb制作必須スキルセット #wpdfes #gmoyours

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

機器

Apple - MacBook Pro Ratina

- 画面キレイ! - スペックに文句なし - 16GB メモリ

- キャプチャが倍で面倒 - ストレージ256GBはこころ細かった

まずはデモ

http://www.youtube.com/watch?v=WjYWMPdpfHk

さて黒い画面です

さて黒い画面です

cd移動

さて黒い画面です

ls 表示

さて黒い画面です

exit出る

さて黒い画面です

大抵書いてある ドルマークは不要

このページが大事

http://gatespace.jp/2013/10/31/mac-web-setup-use-terminal/

Homebrew

webkit2png

node

node npm !

ruby gem

npm

Ruby

RubyGem

Grunt

Gruntはnpm

Compass

CompassはRuby

なんにせよこのページです

色々なのでとにかく gatespace !

---- !

http://gatespace.jp/2013/10/31/mac-web-setup-use-terminal/

何回も出てくる内容

-v 確認!

何がし -v バージョン確認 !

これができればインストールできてる

やっと Gruntです

そしてGrunt nodeで動くので npm でインストールしてる

やっと Gruntです

タスクランナー !

いろんなことを任意のタイミングでできる !

メガネのを見てみましょう !

ホスト作って !

監視して !

そのタイミングで自動化

https://github.com/megane9988/Foundation5-meganeset

さて黒い画面です

とここまでやりましたが !

codekit koara !

などは 入れればできます。

さて黒い画面です

!

じゃあなんでやるの？ !

そのうち、もっとすごい機能がでるかも なれるならいまのうち

さて黒い画面です

つづいてgit !

分散ファイル管理 !

流れ !

ローカル編集 !

リポジトリ（共有保管庫）にプッシュ !

本番からプル

さて黒い画面です

いいところ !

ftp見たいにまどろっこしくない !

全部履歴残る !

戻せる !

プログラマの変更箇所わかる !

学べる

本番

リポジトリ

ローカル

さて黒い画面です

共有保管庫 !

github !

掲示板のような機能があり フォローしたり ウォッチしたり !

あとほかにも、ある

さて黒い画面です

バックログは見やすいうえに 課題管理と繋がる !

べんり !

おぼえるとすぐ !

黒い画面じゃなくても大丈夫 !

でも使えた方がお得

さて黒い画面です

foundation !

cssフレームワーク 有りものですぐ実装できる !

例えばオフセット !

グリッド

さて黒い画面です

ドキュメントをみながらやればok !

ヒッシーのブログは翻訳してくれてる !

8に対応したければ3をつかう !

脆弱性きにしなくてよい

http://notnil-creative.com/blog/archives/1785

Vagrant

vagrant !

ローカルにサーバ環境を作る !

一発でwordpress入る !

すぐはじめられる !

ここで修正 !

確認後git を使ってアップすれば効率良い

Vagrant

up !

halt !

destroy

wp cli

wp cli コマンドでいろいろ操作 !

プラグインリスト !

コアアップロード !

手っ取り早い !

WordPressが入ってるサーバで WordPressを操作する

Fesサイトでデモします

こんな感じ !

fesサイトも大体全部使ってる

本番

リポジトリ

ローカル

後出来る限り便利なソフト

ClipMenu sublime Dragon Drop Bartender Fantastical Alfred !

!

macの方がべんりツール多い印象 さあ、快適構築環境でレッツラゴー！