0
これからの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
npm
Ruby
RubyGem
Grunt
Gruntはnpm
Compass
CompassはRuby
なんにせよこのページです
http://gatespace.jp/2013/10/31/mac-web-setup-use-terminal/

色々なのでとにかく
gatespace
!

----
何回も出てくる内容
!

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

確認
-v

これができればインストールできてる
やっと Gruntです

そしてGrunt
nodeで動くので
npm でインストールしてる
やっと Gruntです
https://github.com/megane9988/Foundation5-meganeset
タスクランナー
!

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

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

ホスト作って
!...
さて黒い画面です

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

codekit
koara
!

などは
入れればできます。
さて黒い画面です

!

じゃあなんでやるの?
!

そのうち、もっとすごい機能がでるかも
なれるならいまのうち
さて黒い画面です
つづいてgit
!

分散ファイル管理
!

流れ
!

ローカル編集
!

リポジトリ(共有保管庫)にプッシュ
!

本番からプル
さて黒い画面です
いいところ
!

リポジ
トリ

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

全部履歴残る
!

戻せる
!

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

学べる

本番

ローカル
さて黒い画面です

共有保管庫
!

github
!

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

あとほかにも、ある
さて黒い画面です

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

べんり
!

おぼえるとすぐ
!

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

でも使えた方がお得
さて黒い画面です

foundation
!

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

例えばオフセット
!

グリッド
さて黒い画面です
http://notnil-creative.com/blog/archives/1785
ドキュメントをみながらやればok
!

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

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

脆弱性きにしなく...
Vagrant
vagrant
!

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

一発でwordpress入る
!

すぐはじめられる
!

ここで修正
!

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

up
!

halt
!

destroy
wp cli

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

プラグインリスト
!

コアアップロード
!

手っ取り早い
!

WordPressが入ってるサーバで
WordPressを操作する
Fesサイトでデモします

こんな感じ

リポジ
トリ

!

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

本番

ローカル
後出来る限り便利なソフト

ClipMenu
sublime
Dragon Drop
Bartender
Fantastical
Alfred
!
!

macの方がべんりツール多い印象
さあ、快適構築環境でレッツラゴー!
Upcoming SlideShare
Loading in...5
×

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

766

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
766
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "これからのWEB制作必須スキルセット #wpdfes #gmoyours"

  1. 1. これからのWEB制作必須スキルセット
  2. 2. 機器 Apple - MacBook Pro Ratina - 画面キレイ! - スペックに文句なし - 16GB メモリ - キャプチャが倍で面倒 - ストレージ256GBは
 こころ細かった
  3. 3. まずはデモ http://www.youtube.com/watch?v=WjYWMPdpfHk
  4. 4. さて黒い画面です
  5. 5. さて黒い画面です cd 移動
  6. 6. さて黒い画面です ls 表示
  7. 7. さて黒い画面です exit 出る
  8. 8. さて黒い画面です 大抵書いてある ドルマークは不要
  9. 9. このページが大事 http://gatespace.jp/2013/10/31/mac-web-setup-use-terminal/
  10. 10. Homebrew
  11. 11. webkit2png
  12. 12. node node npm ! ruby
  13. 13. npm
  14. 14. Ruby
  15. 15. RubyGem
  16. 16. Grunt
  17. 17. Gruntはnpm
  18. 18. Compass
  19. 19. CompassはRuby
  20. 20. なんにせよこのページです http://gatespace.jp/2013/10/31/mac-web-setup-use-terminal/ 色々なのでとにかく gatespace ! ----
  21. 21. 何回も出てくる内容 ! 何がし -v バージョン確認 ! 確認 -v これができればインストールできてる
  22. 22. やっと Gruntです そしてGrunt nodeで動くので npm でインストールしてる
  23. 23. やっと Gruntです https://github.com/megane9988/Foundation5-meganeset タスクランナー ! いろんなことを任意のタイミングでできる ! メガネのを見てみましょう ! ホスト作って ! 監視して ! そのタイミングで自動化
  24. 24. さて黒い画面です とここまでやりましたが ! codekit koara ! などは 入れればできます。
  25. 25. さて黒い画面です ! じゃあなんでやるの? ! そのうち、もっとすごい機能がでるかも なれるならいまのうち
  26. 26. さて黒い画面です つづいてgit ! 分散ファイル管理 ! 流れ ! ローカル編集 ! リポジトリ(共有保管庫)にプッシュ ! 本番からプル
  27. 27. さて黒い画面です いいところ ! リポジ トリ ftp見たいにまどろっこしくない ! 全部履歴残る ! 戻せる ! プログラマの変更箇所わかる ! 学べる 本番 ローカル
  28. 28. さて黒い画面です 共有保管庫 ! github ! 掲示板のような機能があり フォローしたり ウォッチしたり ! あとほかにも、ある
  29. 29. さて黒い画面です バックログは見やすいうえに 課題管理と繋がる ! べんり ! おぼえるとすぐ ! 黒い画面じゃなくても大丈夫 ! でも使えた方がお得
  30. 30. さて黒い画面です foundation ! cssフレームワーク 有りものですぐ実装できる ! 例えばオフセット ! グリッド
  31. 31. さて黒い画面です http://notnil-creative.com/blog/archives/1785 ドキュメントをみながらやればok ! ヒッシーのブログは翻訳してくれてる ! 8に対応したければ3をつかう ! 脆弱性きにしなくてよい
  32. 32. Vagrant vagrant ! ローカルにサーバ環境を作る ! 一発でwordpress入る ! すぐはじめられる ! ここで修正 ! 確認後git を使ってアップすれば効率良い
  33. 33. Vagrant up ! halt ! destroy
  34. 34. wp cli wp cli コマンドでいろいろ操作 ! プラグインリスト ! コアアップロード ! 手っ取り早い ! WordPressが入ってるサーバで WordPressを操作する
  35. 35. Fesサイトでデモします こんな感じ リポジ トリ ! fesサイトも大体全部使ってる 本番 ローカル
  36. 36. 後出来る限り便利なソフト ClipMenu sublime Dragon Drop Bartender Fantastical Alfred ! ! macの方がべんりツール多い印象 さあ、快適構築環境でレッツラゴー!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×