SlideShare a Scribd company logo
1 of 92
Download to read offline
で

ぶち壊す
制作効率の壁
GrowGroup合同会社 石原隆志
Frontend , web design , etc ….
ゴール
1. 効率についてもう一度考える

2. 知識を仕入れる

3. 開発フロー・ツールを見直す
1. 効率についてもう一度考える
のメリット
オープンソース ( 無料 )

豊富なリソース

圧倒的なプラグイン・テーマの量

信頼性

活発なコミュニティ

将来性
WordPressを使えば制作効率UP?
のデメリット

セキュリティ

トラブル時の対処

カスタマイズにはある程度の知識が必要

悪意を持ったプラグイン・テーマ
そんなことはありません。
オープンソース、無料だからという気持ちだと痛い目見る気がする。
レスポンシブwebデザイン
レスポンシブwebデザイン

・考えることがたくさん。

画像がぼやける…
表示速度が遅い…
javascriptが動かない…
動きが遅い…
HTML5 + javascript + css3
こんなサイトが
作りたいの!
もちろんスマホ
タブレットにも
対応させたい!

ユーザーが簡単
に写真を管理
できるサイト

WordPress
でね★

SNSのアカウント
を使って
こんなサイトが
作りたいの!
もちろんスマホ
タブレットにも

もうそれ
webアプリやん!

対応させたい!

ユーザーが簡単
に写真を管理
できるサイト

WordPress
でね★

SNSのアカウント
ももちろん連携
webサイトというより、webアプリ系のサービス

簡単にはできない。
お客さんの要望も多様化
WordPress = コスト低という理論
WordPress以外の知識も必要
進 化し続けるWebの技術
皆さんご存知ムーアの法則

大規模集積回路(LSI)のチップ上に集積
されるトランジスターの数は、

18∼24ヶ月毎に2倍になる

もちろんPCの性能が上がれば、
ブラウザの処理性能も上がる。

リッチなAPIが
実現!
皆さんご存知ムーアの法則

大規模集積回路(LSI)のチップ上に集積
されるトランジスターの数は、

18∼24ヶ月毎に2倍になる
テクノロジーの進化って

早いよね。
もちろんPCの性能が上がれば、
ブラウザの処理性能も上がる。

リッチなAPIが
実現!
WordPressだけで見ても
勉強することはたくさん。
3.7から自動更新機能

増加するAPI

WordPressコアの開発フローの変化

続々と便利なプラグイン・ツールの登場

機能の追加
増加するAPI

Dashboard
Widgets API

Database API

File Header API

Widgets API

Filesystem API

HTTP API

Metadata API

Options API

Plugin API

Quicktags API

Quicktags API

Rewrite API

Transients API

Settings API

Shortcode API

Theme
Customization API

Theme Modification
API

Heartbeat API
増加するAPI
Database API

Dashboard
Widgets API

File Header API

Widgets API

HTTP API
Metadata API
この内、どれだけ意識

Filesystem API

Plugin API

Quicktags API

Quicktags API

Rewrite API

Transients API

Settings API

Shortcode API

Theme

Options API

して使えますか?

Customization API
Theme Modification
API

Heartbeat API
WordPress 3.7から

自動更新機能
・目的

セキュリティの強化

アップグレードの効率化

・内容
コアの自動更新

プラグイン・テーマ

翻訳の自動更新

・マイナーバージョンのみ

の自動更新

デフォルトで有効

デフォルトで有効
・メージャーバージョンアッ
プも設定すれば可能

デフォルトでは無効
WordPress 3.7から

自動更新機能
・目的

詳しくは

セキュリティの強化

アップグレードの効率化

Codexで !
・内容

( http://wpdocs.sourceforge.jp/自動バッググラウンド更新の設定 )

コアの自動更新

プラグイン・テーマ

翻訳の自動更新

・マイナーバージョンのみ

の自動更新

デフォルトで有効

デフォルトで有効
・メージャーバージョンアッ
プも設定すれば可能

デフォルトでは無効
WordPress 3.7から

自動更新機能
・目的

バージョンアップしたくない?
アップグレードの効率化

セキュリティの強化

・内容

だめです。

コアの自動更新

プラグイン・テーマ

翻訳の自動更新

・マイナーバージョンのみ

の自動更新

デフォルトで有効

デフォルトで有効
・メージャーバージョンアッ
プも設定すれば可能

デフォルトでは無効
バージョンアップの重要さ

セキュリティ

バージョンアップでセキュリティに関する修正が行われる。
ちょっとづつバージョンをあげていったほうが楽でしょ。
コア機能の追加

WordPress 3.8

管理画面の大幅なUI変更

テーマ選択画面の一新

ダッシュボードの一新

ウィジェット画面の変更
コア機能の追加

管理画面UIの一新

WordPress 3.8
コア機能の追加

テーマ選択画面の一新

WordPress 3.8
コア機能の追加

ウィジェットUIの変更

WordPress 3.8
コア機能の追加

さらに…

ウィジェットUIの変更

WordPress 3.8
Make WordPress Core

WordPressの
開発動向は公開されています。
フロントエンドから記事編
集が可能に?!
コンテンツブロック
で投稿を作成できた
り?!
JSON REST APIを
コアに取り込んだり?!
WordPressコアの開発状況は公開されている。
3.8からさらに加速

機能の追加

WordPressのバージョン

管理画面の大幅なUI変更・管理画面のレスポンシブ対応

アップで、

テーマ選択画面の一新

ダッシュボードの一新

何が変わったか確認しよう!

さらに…

(自分も怪しいですが)

フロントエンドからの投稿

ウィジェット画面の変更

JSON REST API も取り入れる方向?
WordPress = 簡単?
開発者にとっては努力の日々
効率を上げるには更なる勉強の日々..
と思うのは僕の知識不足かもしれませんが.
2. 知識を仕入れる
情報、それは開発者にとって命

図1

一から機能を実装したけど、
プラグインあった時の図
情報はどこから手に入れるのか

RSS

ニュースキュレーション系のサービス
SNSからの情報取得

メルマガ
RSS

wp tuts +

( 海外の方が圧倒的に早い )

wordpress
wplift.com

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 に必要なコードを選択肢に応じて変換してくれる
ご清聴ありがとうございました。

More Related Content

Similar to Word bench 制作効率を上げるツール

20130126 mtddcms
20130126 mtddcms20130126 mtddcms
20130126 mtddcms
yokonaka
 
パッチを書いてみよう(第17回Nseg勉強会LT)
パッチを書いてみよう(第17回Nseg勉強会LT)パッチを書いてみよう(第17回Nseg勉強会LT)
パッチを書いてみよう(第17回Nseg勉強会LT)
Masahiro Yamada
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
亮 門屋
 
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Hideki Akiba
 

Similar to Word bench 制作効率を上げるツール (20)

20130126 mtddcms
20130126 mtddcms20130126 mtddcms
20130126 mtddcms
 
concrete5で社内システムのお話し
concrete5で社内システムのお話しconcrete5で社内システムのお話し
concrete5で社内システムのお話し
 
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
 
パッチを書いてみよう(第17回Nseg勉強会LT)
パッチを書いてみよう(第17回Nseg勉強会LT)パッチを書いてみよう(第17回Nseg勉強会LT)
パッチを書いてみよう(第17回Nseg勉強会LT)
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
 
負債返済の下準備「コメント付与まつり・準備編」
負債返済の下準備「コメント付与まつり・準備編」負債返済の下準備「コメント付与まつり・準備編」
負債返済の下準備「コメント付与まつり・準備編」
 
[SC12] あなたのチームのセキュリティスキルは十分ですか?DevSecOpsを見据えたセキュリティ人材の育成方法
[SC12] あなたのチームのセキュリティスキルは十分ですか?DevSecOpsを見据えたセキュリティ人材の育成方法[SC12] あなたのチームのセキュリティスキルは十分ですか?DevSecOpsを見据えたセキュリティ人材の育成方法
[SC12] あなたのチームのセキュリティスキルは十分ですか?DevSecOpsを見据えたセキュリティ人材の育成方法
 
アジャイルマネジメントとは?
アジャイルマネジメントとは?アジャイルマネジメントとは?
アジャイルマネジメントとは?
 
Trat_sprint3
Trat_sprint3Trat_sprint3
Trat_sprint3
 
Webの勉強会#14
Webの勉強会#14Webの勉強会#14
Webの勉強会#14
 
60分でわかった気になるMicrosoft Azure
60分でわかった気になるMicrosoft Azure60分でわかった気になるMicrosoft Azure
60分でわかった気になるMicrosoft Azure
 
Azure IaaS 環境で安心してシステム開発する方法を教えます
Azure IaaS 環境で安心してシステム開発する方法を教えますAzure IaaS 環境で安心してシステム開発する方法を教えます
Azure IaaS 環境で安心してシステム開発する方法を教えます
 
[db tech showcase Tokyo 2018] #dbts2018 #D1L 『"何が必要?どう実現?"~異種DB間データリアルタイム連携』
[db tech showcase Tokyo 2018] #dbts2018 #D1L 『"何が必要?どう実現?"~異種DB間データリアルタイム連携』[db tech showcase Tokyo 2018] #dbts2018 #D1L 『"何が必要?どう実現?"~異種DB間データリアルタイム連携』
[db tech showcase Tokyo 2018] #dbts2018 #D1L 『"何が必要?どう実現?"~異種DB間データリアルタイム連携』
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
 
精神論によるいきいきとした組織づくりのご提案
精神論によるいきいきとした組織づくりのご提案精神論によるいきいきとした組織づくりのご提案
精神論によるいきいきとした組織づくりのご提案
 
スマートフォンWebアプリ最適化”3つの極意”
スマートフォンWebアプリ最適化”3つの極意”スマートフォンWebアプリ最適化”3つの極意”
スマートフォンWebアプリ最適化”3つの極意”
 
モダンWeb開発ワークショップ
モダンWeb開発ワークショップモダンWeb開発ワークショップ
モダンWeb開発ワークショップ
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
 

Word bench 制作効率を上げるツール