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

で

ぶち壊す
制作効率の壁
GrowGroup合同会社石原隆志

Frontend , web design , etc ….

ゴール
1. 効率についてもう一度考える

2. 知識を仕入れる

3. 開発フロー・ツールを見直す

1. 効率についてもう一度考える

のメリット
オープンソース ( 無料 )

豊富なリソース

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

信頼性

活発なコミュニティ

将来性

WordPressを使えば制作効率UP？

のデメリット

セキュリティ

トラブル時の対処

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

悪意を持ったプラグイン・テーマ

そんなことはありません。
オープンソース、無料だからという気持ちだと痛い目見る気がする。

レスポンシブwebデザイン

レスポンシブwebデザイン

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

画像がぼやける…
表示速度が遅い…
javascriptが動かない…
動きが遅い…

こんなサイトが
作りたいの！
もちろんスマホ
タブレットにも
対応させたい！

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

WordPress
でね★

SNSのアカウント
を使って

こんなサイトが
作りたいの！
もちろんスマホ
タブレットにも

もうそれ
webアプリやん！

対応させたい！

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

WordPress
でね★

SNSのアカウント
ももちろん連携

webサイトというより、webアプリ系のサービス

簡単にはできない。
お客さんの要望も多様化
WordPress ＝コスト低という理論
WordPress以外の知識も必要

進化し続けるWebの技術

皆さんご存知ムーアの法則

大規模集積回路（ＬＳＩ）のチップ上に集積
されるトランジスターの数は、

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

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

リッチなAPIが
実現！

皆さんご存知ムーアの法則

大規模集積回路（ＬＳＩ）のチップ上に集積
されるトランジスターの数は、

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 = 簡単？
開発者にとっては努力の日々
効率を上げるには更なる勉強の日々..
と思うのは僕の知識不足かもしれませんが.

情報、それは開発者にとって命

図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

CSSのプロパティ
いじったり…
(Sass,Lessにも対応)


表示測度をはかったり…


Workspaceを使って、直接ソースを編集することも。


Vagrant 上でGruntを走らせ、Livereloadで自動反映なんてことも。


マルチデバイスの確認にも！ユーザーエージェントも偽装！


Google Chrome Canary だともっと便利なモバイルシミュレーション

Alfred

CDN を探したり…

Alfred

とにかくいろんなことがショートカットできる

GenerateWP

WordPress に必要なコードを選択肢に応じて変換してくれる

ご清聴ありがとうございました。

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

Recommended

Recommended

More Related Content

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

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

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