Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

タスクランナー導入 〜とあるWordPress制作環境〜

1,767 views

Published on

HTML5fun×AOITコラボイベント「現場で使えるライブラリとJavaScriptの基礎」の担当セッションで使用したスライド

Published in: Software

タスクランナー導入 〜とあるWordPress制作環境〜

  1. 1. タスクランナー導入 ∼とあるWordPress制作環境∼ 古川 勝也 NPO法人 あおもりIT活用サポートセンター 理事
  2. 2. 自己紹介 • 古川 勝也(こがわ まさや) • あおもりIT活用サポートセンター理事 • CalmTech(カームテック) 代表 • CPIエバンジェリスト • テクテク編集部 代表 • 料理研究一家「古川家」
  3. 3. 本日の流れ • Webデザインを取り巻く現状 • セッションの対象とゴール • ブラウザの外のJS • パッケージマネージャー概説 • タスクランナー概説 • WordPress制作環境での導入例 • まとめ
  4. 4. Webデザイナーはどこへ行く? 認識をすり合わせましょう
  5. 5. Webは高度な複合技術 • ホームページ作りたい!(ごく気軽な思い) • サーバー、ドメイン、FTP…etc • HTML、CSS、JS、ビットマップ…etc • CGI、データベース、SSL…etc • CMS、ウェブビルダー、ブログ…etc • 一体いくつ覚えればいいのよ!?(半ギレ)
  6. 6. 楽になったコトも苦になったコトも増えましたね ぜんぜん手軽じゃない
  7. 7. だって、いっぱい増えてますもの
  8. 8. Webデザイン業界の個人的超解釈 • DTP業界からの流入で本格スタート • 検索エンジン浸透で代理店、マーケターが本腰 • SEO戦国時代、ガラケー天国 • 回線の高速化が普及してキャズム越え • iPhone登場でアプリバブル到来 • 1人1台スマホ、SIer業界からの流入が増加 • コンテンツと技術の乱立で見直し開始 <イマココ
  9. 9. どういうバランスにしていきます? マーケティング インタラクション マークアップ IA UX ビジュアルデザイン
  10. 10. 大事なのはゴールとモチベーション そもそもナゼ?
  11. 11. Web技術のコモディティ化 • 誰でも「すぐに」ホームページ、ブログ開設 • 誰でも「すぐに」決済機能つきECサイト開設 • 誰でも「すぐに」写真、動画を共有 • 誰でも「すぐに」メッセージ送信、返信
  12. 12. 大量生産、大量消費、スピード命 • 技術の進歩が高速化&多様化 • 消費サイクルも高速化 • 高度化した技術がインフラとして浸透
  13. 13. でも健康でいることを第一にしましょうね 時間がいくらあっても足りない
  14. 14. 時間は資源であり有限、効率よく使いたいところ 時は金なり
  15. 15. どうやって壁を越えていくか? • 手動の割合を減らしていく • 作ったものは可能な限り再利用する • 1つの仕事が連鎖する仕組みを作る
  16. 16. それが全てではありませんが 自動化せよ
  17. 17. 本セッションでの自動化とは • コンピューターに任せる仕事の範囲を決める • コンピューターに任せるために仕事を定型化する • 繰り返しに落とし込む • コンピューターに仕事を任せる
  18. 18. コンピューターは知の鏡 自動化=機械化
  19. 19. 機械化するメリットとは? • ミスの可能性が減る • 品質の保証ラインが均一化される • 人間が拘束される時間が減少する • 人間しかできないコトに集中できる • 「時間」を「価値」に転化する機会が増える
  20. 20. 時間をお金で買うのも1つの選択ですが 時は金なり
  21. 21. Web制作で自動化できることは? • CMSや制作環境の導入 • CSSやJSの結合、圧縮 • 動作確認のブラウザリロード • 複数デバイスでの表示確認
  22. 22. 本セッションのターゲット 前提知識が色々とありまして・・・
  23. 23. HTMLの前提知識・経験 • 静的サイトの制作経験がある
  24. 24. CSSの前提知識・経験 • CSSフレームワークを知っている、使っている • CSSプリプロセッサを知っている、使っている
  25. 25. JavaScriptの前提知識・経験 • jQueryとかのライブラリを使ったことがある • JSONを見たこと、聞いたことがある
  26. 26. WordPressの前提知識と経験 • WordPressインストールは自分でできる • XAMPPやMAMP上に構築できる • 独自テーマを作成したことがある
  27. 27. そう、あれです。黒いやつです。 運命の別れ道
  28. 28. Y/n 黒い画面つかってみますか?
  29. 29. 顔に出てますよ? 今、迷わず「No」と思いましたね
  30. 30. 嘘です (・∀・)カエレ!
  31. 31. 他の方法もちゃんとあります 黒い画面をできるだけ避けたい方へ
  32. 32. CodeKit(Macのみ) 一時期、話題になったコンパイルツールが進化しました
  33. 33. Prepros(Win/Mac/Linuxすべて対応) コンパイルとかブラウザリロードとかFTPとか全部やってくれます
  34. 34. これで十分なのでは? • Sass/SCSSだけ自動化は手軽 • ブラウザリロードだけでもありがたいぐらい • まず必要性と利便性を感じてみる • Macユーザー特権でなくなってきました
  35. 35. git for windows(git-bash) Windowsで黒い画面を使うにはこれが1番手軽
  36. 36. プログラマーには日常的ですが・・・ なんで黒い画面前提なんでしょうね
  37. 37. GUI化は多大な労力が必要 • フロントエンドの変化がかなり早い状況 • 今は「鉄板」がない • 作ってすぐ動かすにはCUIが手軽 • GUIだとカスタマイズに限界がある • カンプ作って終わりならな… < 同じこと
  38. 38. コントロールできない技術はリスクにもなります 待つことも重要な選択肢
  39. 39. ブラウザの外で動くJS いろいろな使い方されるようになりました
  40. 40. Node.js • サーバーサイドJavaScript環境 • フロントエンドに役立つツールがいっぱい • Long-term Support版がオススメ
  41. 41. パッケージマネージャー概説 これがないと困ったことになります
  42. 42. なぜ必要なの? • Aと言うライブラリを使うにはBが必要 • BはCとDに依存したツール • えーと、つまり全部入れればいいのかな? • バージョンの相性とかあんの!? • 人の手でやってられません
  43. 43. • Node.jsのパッケージ管理ツール • サーバーサイド、フロントエンド問わず • npmにもタスク実行機能が備えられている npm
  44. 44. -g はグローバルの意味 1度インストールすると以後はどこでも呼び出し可能に > npm install -g [パッケージ名]
  45. 45. 初期処理として packages.json 作成 プロジェクトごとにパッケージを管理する想定 > npm init
  46. 46. インストールしたパッケージは packages.json に追記 ̶save でパッケージ間の依存関係も追加される ̶save-dev は制作時のみ使用するパッケージを指す node_modules 以下にインストールされる > npm install [パッケージ名] ̶save > npm install [パッケージ名] ̶save-dev
  47. 47. プロジェクトで packages.json を共有している時に利用 指定しておいたパッケージが一括でインストールされる そのためにも ̶save と ̶save-dev オプションが重要 ̶production で ̶save-dev で入れたパッケージ除外 > npm install
  48. 48. • Twitter製パッケージマネージャー • フロントエンド用に特化 • Bootstrapとか Bower
  49. 49. 初期処理 bower.json 作成 プロジェクトごとにパッケージを管理する想定 > bower init
  50. 50. インストールしたパッケージは bower.json に追記 ̶save でパッケージ間の依存関係も追加される ̶save-dev は制作時のみ使用するパッケージを指す bower_components 以下にインストールされる > bower install [パッケージ名] ̶save > bower install [パッケージ名] ̶save-dev
  51. 51. プロジェクトで bower.json を共有している時に利用 指定しておいたパッケージが一括でインストールされる そのためにも ̶save と ̶save-dev オプションが重要 ̶production で ̶save-dev で入れたパッケージ除外 > bower install
  52. 52. • Rubyのパッケージマネージャー • Sass/SCSS、Compassぐらい RubyGems(通称:gem)
  53. 53. グローバルでインストール プロジェクトごとにパッケージを管理するBundlerもある > gem install [パッケージ名]
  54. 54. • PHPのパッケージマネージャー • WordPressがらみで使うかも Composer
  55. 55. composer.json というパッケージを記述するファイル生成 > composer init
  56. 56. インストールしたパッケージは composer.json に追記 パッケージ間の依存関係も追加される ̶dev は制作時のみ使用するパッケージを指す vendor 以下にインストールされる > composer require [パッケージ名] > composer require [パッケージ名] ̶dev
  57. 57. composer.json に記述されたパッケージをインストール > composer install
  58. 58. うわぁ・・・って思われても仕方ありません 察しの通り、全部つかいます
  59. 59. 実はコマンド形式ほぼ一緒 npm install bower install gem install composer install
  60. 60. タスクランナー概説 なんと本編はここから!
  61. 61. Gulp • タスクという単位の処理を自動でこなす • 非同期で実行するので既存ツールより高速 • プラグインを組み合わせると高度な処理が可能に
  62. 62. インストールから実行まではこれだけ > npm install -g gulp > gulp
  63. 63. WordPress制作環境に導入 いくつかのアプローチがあります
  64. 64. ツール群をどう取り込むべきか? • WordPress構造はどうする? • 独自テーマだけ作ることができればいい? • 動作確認はどうやって行う?
  65. 65. なるべく手動で用意しないように ゼロから考えるより既存をカスタム
  66. 66. Yeoman • ひな型を自動生成してくれるツール • 様々なひな型が公開されている • インストールしたもので勉強する
  67. 67. 後は yo というコマンドを呼ぶだけ > npm install -g yo
  68. 68. YeoPress • Yeoman経由でWordPressをインストール • 初期設定を対話形式CUIで行う • あらかじめカスタムされたフォルダ構造もある • local-config.phpで設定を上書きできる
  69. 69. WordPressのインストールが始まります ̶advanced オプションをつけると細かい点を調整できます > npm install -g generator-wordpress > yo wordpress ̶advanced
  70. 70. WordPress日本語化に注意 • アップデートすれば日本語化は大丈夫 • WP Multibyte Patch は自分で入れます
  71. 71. local-config.php テスト環境用のファイルを置くだけで設定の切り替えができます
  72. 72. yo-emi • WordPressのテーマひな型 Emi がベース • Yeoman経由でインストール • Gulp、Sass、Autoprefixerなど設定済み • LiveReloadで自動更新
  73. 73. テーマフォルダの下で実行します テーマ名は英数字とアンダースコアでつけましょう ハイフンだと自動生成される関数名でエラーになります > yo emi
  74. 74. Gulp利用前に > gem install sass gulpfile.jsでコンパイル対象を指定する LiveReload使用が初期状態
  75. 75. 制作環境が最初から整っている、ありがたさ 洗練された土台でスタートダッシュ
  76. 76. Bedrock • WordPressのひな型 • 最初から色々とカスタマイズ済み • 構成は複雑に見えるが、よく整理されている • dotenvという仕組みで設定を変更できる
  77. 77. パッケージをインスールしましょう 必要なものは最初から記述されています > composer install
  78. 78. やはりWordPress日本語化に注意 • アップデートを忘れずに • これもWP Multibyte Patch は自分で入れます
  79. 79. .env local-config.phpのようにテスト環境と設定の切り替えができます
  80. 80. • WordPressテーマのひな型 • 必要なものは一通り揃っている • Bedrockは必須ではない Sage
  81. 81. Sageインストールの前に > gem install sass
  82. 82. パッケージをインスールしましょう 必要なものは最初から記述されています > npm install > bower install
  83. 83. manifest.json Gulpで使用される基本設定が記述されています
  84. 84. まとめ お持ち帰りできることはありましたか?
  85. 85. できそうなところから自動化 • SCSS/Sassの導入とコンパイル • ブラウザリロード • 複数端末での表示チェック • GUIツールからまず触ってみる
  86. 86. 自動化=機械化
  87. 87. 機械化したメリットとは? • ミスの可能性が減る • 品質の保証ラインが均一化される • 人間が拘束される時間が減少する • 人間しかできないコトに集中できる • 「時間」を「価値」に転化する機会が増える
  88. 88. 大事なことなので3回言いました 時は金なり
  89. 89. 良き「きっかけ」となりますように http://www.aoit.jp

×