word bench 制作効率を上げるツール
TRANSCRIPT
で
制作効率の壁ぶち壊すG r o w G r o u p 合同会社 石原隆志
Frontend , web design , etc ….
ゴール
1. 効率についてもう一度考える
2. 知識を仕入れる
3. 開発フロー・ツールを見直す
1. 効率についてもう一度考える
豊富なリソース
活発なコミュニティ
オープンソース ( 無料 )
圧倒的なプラグイン・テーマの量 将来性
信頼性
のメリット
WordPressを使えば制作効率UP？
のデメリット
トラブル時の対処セキュリティ
カスタマイズにはある程度の知識が必要
悪意を持ったプラグイン・テーマ
そんなことはありません。 オープンソース、無料だからという気持ちだと痛い目見る気がする。
レスポンシブwebデザイン
・考えることがたくさん。
画像がぼやける…
表示速度が遅い…
javascriptが動かない…
動きが遅い…
レスポンシブwebデザイン
HTML5 + javascript + css3
こんなサイトが
作りたいの！
SNSのアカウント
を使って
ユーザーが簡単
に写真を管理
できるサイト
もちろんスマホ
タブレットにも
対応させたい！
WordPress
でね★
こんなサイトが
作りたいの！
SNSのアカウント
ももちろん連携
ユーザーが簡単
に写真を管理
できるサイト
WordPress
でね★
もちろんスマホ
タブレットにも
対応させたい！
もうそれ
webアプリやん！
簡単にはできない。
お客さんの要望も多様化
WordPress以外の知識も必要
webサイトというより、webアプリ系のサービス
WordPress ＝ コスト低という理論
皆さんご存知ムーアの法則
大規模集積回路（ＬＳＩ）のチップ上に集積
されるトランジスターの数は、
18～24ヶ月毎に2倍になる
もちろんPCの性能が上がれば、
ブラウザの処理性能も上がる。
リッチなAPIが
実現！
皆さんご存知ムーアの法則
大規模集積回路（ＬＳＩ）のチップ上に集積
されるトランジスターの数は、
18～24ヶ月毎に2倍になる
もちろんPCの性能が上がれば、
ブラウザの処理性能も上がる。
リッチなAPIが
実現！
テクノロジーの進化って
早いよね。
勉強することはたくさん。
WordPressだけで見ても
3.7から自動更新機能 増加するAPI
WordPressコアの開発フローの変化
続々と便利なプラグイン・ツールの登場
機能の追加
増加するAPI Dashboard
Widgets API
Database API File Header API
Filesystem API
Quicktags API
Options API
Metadata APIHTTP API
Plugin API Quicktags API
Settings API
Rewrite API
Shortcode API
Theme Modification
API
Theme
Customization API
Transients API
Widgets API
Heartbeat API
増加するAPI Dashboard
Widgets API
Database API File Header API
Filesystem API
Quicktags API
Options API
Metadata APIHTTP API
Plugin API Quicktags API
Settings API
Rewrite API
Shortcode API
Theme Modification
API
Theme
Customization API
Transients API
Widgets API
Heartbeat API
この内、どれだけ意識
して使えますか？
WordPress 3.7から
自動更新機能
セキュリティの強化 アップグレードの効率化
コアの自動更新 ・マイナーバージョンのみ
デフォルトで有効
・メージャーバージョンアッ
プも設定すれば可能
プラグイン・テーマ
の自動更新 デフォルトでは無効
翻訳の自動更新 デフォルトで有効
・目的
・内容
WordPress 3.7から
自動更新機能
セキュリティの強化 アップグレードの効率化
コアの自動更新 ・マイナーバージョンのみ
デフォルトで有効
・メージャーバージョンアッ
プも設定すれば可能
プラグイン・テーマ
の自動更新 デフォルトでは無効
翻訳の自動更新 デフォルトで有効
・目的
・内容
詳しくは
Codexで ! ( http://wpdocs.sourceforge.jp/自動バッググラウンド更新の設定 )
WordPress 3.7から
自動更新機能
セキュリティの強化 アップグレードの効率化
コアの自動更新 ・マイナーバージョンのみ
デフォルトで有効
・メージャーバージョンアッ
プも設定すれば可能
プラグイン・テーマ
の自動更新 デフォルトでは無効
翻訳の自動更新 デフォルトで有効
・目的
・内容
バージョンアップしたくない？
だめです。
バージョンアップの重要さ
セキュリティ
バージョンアップでセキュリティに関する修正が行われる。
ちょっとづつバージョンをあげていったほうが楽でしょ。
WordPress 3.8コア機能の追加
管理画面の大幅なUI変更
ダッシュボードの一新テーマ選択画面の一新
ウィジェット画面の変更
WordPress 3.8コア機能の追加
管理画面UIの一新
WordPress 3.8コア機能の追加
テーマ選択画面の一新
WordPress 3.8コア機能の追加
ウィジェットUIの変更
WordPress 3.8コア機能の追加
ウィジェットUIの変更
さらに…
コンテンツブロック
で投稿を作成できた
り？！
JSON REST APIを
コアに取り込んだり？！
3.8からさらに加速機能の追加
管理画面の大幅なUI変更・管理画面のレスポンシブ対応
ダッシュボードの一新テーマ選択画面の一新
ウィジェット画面の変更
さらに…
フロントエンドからの投稿
JSON REST API も取り入れる方向？
WordPressのバージョン
アップで、
何が変わったか確認しよう！ (自分も怪しいですが)
WordPress = 簡単？ 開発者にとっては努力の日々
効率を上げるには更なる勉強の日々.. と思うのは僕の知識不足かもしれませんが.
2. 知識を仕入れる
情報、それは開発者にとって命
一から機能を実装したけど、
プラグインあった時の図図1
情報はどこから手に入れるのか
RSS
ニュースキュレーション系のサービス
SNSからの情報取得
メルマガ
RSS ( 海外の方が圧倒的に早い )
wp tuts + wplift.comwordpress
tavern
メールマガジン
wpmail.me wplift.com
プラグインを探すときってどうやっ
て探します?
プラグインの探し方
1. WordPressの公式ディレクトリで探す。
!
!
!
!
・ダウンロード数や評価が指標に。
・掘り出しものを発見することも。
・なにより安心。
プラグインの探し方
2. Google で検索
!
!
!
!
・幅が広すぎる。
・マイナーな機能だと、でないこともおおい。
プラグインの探し方
2. Google で検索
!
!
!
!
・幅が広すぎる。
・マイナーな機能だと、でないこともおおい。
Google 翻訳さんを酷使して、
英語でも検索するくせをつけよう！
プラグインの探し方
3 .Githubで検索
!
!
!
!・公式ディレクトリに登録していないけど便利なものも。
・もちろん英語での検索。
・信頼できるかどうかは英語力にかかってくる。
プラグインの探し方
4 .有料のプラグインを探してみる
・海外ではプラグイン・テーマ販売が盛ん。
ゴールドラッシュとも呼ばれている。
しかも比較的安い。
常に最新の知識を仕入れることで
車輪の再発明をくいとめる！
3. 開発フロー・ツールを見直す
どんな環境で仕事していますか？
Text Editor 開発環境
どんな環境で仕事していますか？
デザイン その他
(僕の) 現在の開発環境
Text Editor
Sublime Text 3
・動作も軽い
・カスタマイズ性が高い
・プラグインが豊富。
簡単に導入できる
Sublime Text 2 WordPress
・WordPressの関数を自動補完
・ループなんかも呼び出してくれ
る。
Sublime Text 2 WordPress
Emmet
・HTMLのコーディング時間
超短縮
・CSSの自動補完機能も高性能
Css comb
・CSSのプロパティを自動的に
並び替えしてくれる。
・並び変える基準も自由に設定！
Css comb
・CSSのプロパティを自動的に
並び替えしてくれる。
・並び変える基準も自由に設定！
紹介しきれない程便利なプラグイン
がたくさん。
探せば日本の記事でもたくさん
出てくるのでぜひ！
たまに浮気… ( sshで作業する時とか )
Yadr - dotdiles
これをインストールすれば、黒い画面もプロ級 ( に見えるだけ )
インストールするのも簡単！( 環境が整っていたらね )
開発環境
前回お越し頂いた宮内さんのVCCM
Grunt や wp-cli , Gitといったな
どの便利なツールもそろってくる。
CSS書くのめんどい。 でも、Sassとかlessのコンパイルもめんどい。
jsのminifyめんどい。
画像の最適化めんどい。
CSS書くのめんどい。 でも、Sassとかlessのコンパイルもめんどい。
jsのminifyめんどい。
画像の最適化めんどい。
それ、自動化できます！
Grunt
さっきのやつ全部自動化。
Roots
Grunt の使用を前提としたフレームワーク。
超便利っす。
Roots
Grunt の使用を前提としたフ
レームワーク。
超便利っす。
ちょっとデモ
iemoto
めぐみさんのテンプレート。
こちらもGrunt 使えます。
wp cli でさらに開発効率化
もちろん、Gitも使用。
一人で作るからいらない？
もちろん、Gitで。
一人でも使った方が楽！！
Vagrantの
仮想環境で開発その都度
Git
本番環境でGitから
反映
URL同じにしとけ
ば問題なし！
本番環境でいきなり
いじるより安全。
自動化の環境がVagrantを使えば
すぐに用意できる。 (前回と話かぶってすみません)
その他のツール
細かいところでの効率化
まさしく
ちりも積もれば山となる。
Google Developer Tool
Google Developer Tool
CSSのプロパティ
いじったり… (Sass,Lessにも対応)
Google Developer Tool
表示測度をはかったり…
Google Developer Tool
Workspaceを使って、直接ソースを編集することも。
Google Developer Tool
Vagrant 上でGruntを走らせ、Livereloadで自動反映なんてことも。
Google Developer Tool
マルチデバイスの確認にも！ユーザーエージェントも偽装！
Google Developer Tool
Google Chrome Canary だともっと便利なモバイルシミュレーション
Alfred
Alfred
Alfred
CDN を探したり…
Alfred
とにかくいろんなことがショートカットできる
GenerateWP
WordPress に必要なコードを選択肢に応じて変換してくれる
ご清聴ありがとうございました。