クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 | WordCamp Tokyo 2011
Upcoming SlideShare
Loading in...5
×
 

クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 | WordCamp Tokyo 2011

on

  • 13,845 views

とかくカオスになりがちな WordPress の PHP ...

とかくカオスになりがちな WordPress の PHP 周りのコードを、どう綺麗な設計で作るかということをデザイナーやディレクター向けにわかりやすく扱います。1年後に見て「あれ、なんだっけ?」となりにくい、コラボレーションしやすい設計をご紹介します。

Statistics

Views

Total Views
13,845
Views on SlideShare
10,566
Embed Views
3,279

Actions

Likes
37
Downloads
100
Comments
0

25 Embeds 3,279

http://neulog.example.jp 1088
http://blog.greative.jp 544
http://stackstock.net 415
http://localhost 301
http://suema-r.com 276
http://gorton.jp 191
http://www.andask.net 140
http://andask.net 102
http://act.exp.jp 32
http://www.phorsythia.net 30
http://s.deeeki.com 27
http://www.harukibun.com 22
https://twitter.com 22
https://si0.twimg.com 18
http://web-pallet.com 17
http://knowledge.kosaido-solution.com 12
http://fab-wp.biz 12
http://tumblr.nemooon.jp 9
http://a0.twimg.com 6
http://webcache.googleusercontent.com 5
http://nemooon.tumblr.com 3
http://tumblr.ntks.jp 2
http://paper.li 2
http://tweetedtimes.com 2
http://slideshare-download.seesaa.net 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 | WordCamp Tokyo 2011 クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 | WordCamp Tokyo 2011 Presentation Transcript

  • WordCamp クリーンな WordPressサイトのための PHPコーディングのお作法 計画的に WordPress を拡張していくためのフレームワーク思考 原 一浩 @kara_d2011年11月27日日曜日 1
  • 本日お話すること とかくカオスになりがちな WordPress の PHP周りのコードを、どう綺麗な設計で 作るかということをデザイナーや ディレクター向けにわかりやすく扱います。 1年後に見て「あれ、なんだっけ?」 となりにくい、コラボレーションしやすい 設計をご紹介します。2011年11月27日日曜日 2
  • 経緯 WordPressを使った規模の大きい カスタマイズを担当 ➡ 大部分はフックを多用したプラグイン ➡ 一部WordPressの内部コードをいじる ➡ 既存プラグインはコードが入り組んでいて大変 ➡ 切り離せる部分は別途CakePHPを使って構築2011年11月27日日曜日 3
  • 僕について 原 一浩 ➡ http://greative.jp/ ➡ twitter id : @kara_d ➡ facebook : kazuhirohara2011年11月27日日曜日 4
  • Greativeとは? (グレーティブ) ➡ クリエイティブルールに沿った 成果物の自動化と、 トレンドに即した 統計 継続的な改良を 統計的手法で解決 デザイン トレンド ➡ karad@greative.jp システム2011年11月27日日曜日 5
  • もくじ Framework ➡ 考え方の基準について Design ➡ 設計のほうのデザイン Coding ➡ コーディングにも決まりがある ➡ Naming • 命名規則について ➡ Leaning • 効率的にまなぶ2011年11月27日日曜日 6
  • CakePHPでいうところのモンブラン スパゲッティなコード モンブラン ジャム こんがらがったケーキ 紙づまり2011年11月27日日曜日 7
  • プログラムを使った問題の解決方法 技術的ノウハウからの解決 ➡ オブジェクト指向など実装のパラダイム ➡ ライブラリ、別言語の使用 考え方からの解決 ➡ 規約 ➡ フォルダ構成 ➡ プログラムの構成2011年11月27日日曜日 8
  • プログラムを使った問題の解決方法 技術的ノウハウからの解決 ➡ オブジェクト指向など実装のパラダイム ➡ ライブラリ、別言語の使用 考え方からの解決 ➡ 規約 ➡ フォルダ構成 ➡ プログラムの構成2011年11月27日日曜日 9
  • テーマとは何か? テーマとは! ➡ 単なるテンプレート集? ➡ アプリケーション? or テーマは、 「親子関係を作れるテンプレートであり、  設定画面なども持てるアプリケーション」2011年11月27日日曜日 10
  • Framework 考え方の基準について2011年11月27日日曜日 11
  • ます、わかりやすくて、よい設計 後から土台を 作らないよね2011年11月27日日曜日 12
  • フレームワークの考え方を取り入れよう フレームワーク(枠組み) ➡ 思考の方法 ➡ Webフレームワーク ツールの使い方 構造 作る手順 命名規約2011年11月27日日曜日 13
  • Webフレームワークの考え方を取り入れよう フレームワーク(枠組み) ➡ 思考の方法 ➡ Webフレームワーク オレオレからの 卒業2011年11月27日日曜日 14
  • WordPressの設計思想 WordPressは、 あえて、フラットな設計にしてある ➡ クラスベースのオブジェクト指向とかではない ➡ グローバル領域に全ての関数が読み込まれる ➡ フラットなだけに理解しやすい ➡ ちょっとした拡張が楽 ➡ 入れ子構造は、順番がある ➡ 拡張はフックなどを使った割り込みにより行う 拡張は計画的に2011年11月27日日曜日 15
  • オブジェクト指向、Webフレームワークを使わない場合でもいい仕事をすることは可能 プログラムの設計をはじめると、 よく出てくる用語 オブジェクト指向 MVC 技術+考え方 考え方2011年11月27日日曜日 16
  • オブジェクト指向、Webフレームワークを使わない場合でもいい仕事をすることは可能 プログラムの設計をはじめると、 よく出てくる用語 オブジェクト指向 MVC 技術+考え方 考え方 今回は技術的に難しい話はしません2011年11月27日日曜日 17
  • フレームワークはMVCベースで考えてみる MVCは、 MVC モデル ビュー コントローラ2011年11月27日日曜日 18
  • MVCは使う MVCは、一言で言うと、 「プログラムを、  データの管理(M:モデル)、  入出力の担当(C:コントローラー)、  出力のありかた(V:ビュー)、  に分けて構築する設計手法」 今回はMとVのみ2011年11月27日日曜日 19
  • MVCというと難しいからMVのみを考えてみよう データの管理および加工処理(モデル)と、 表示系の管理(ビュー) MV モデル ビュー2011年11月27日日曜日 20
  • MVCというと難しいからMVのみを考えてみよう M モデル データの管理 WordPress内のデータは、 必要な形にして使おう2011年11月27日日曜日 21
  • MVCというと難しいからMVのみを考えてみよう テンプレートに WordPressの情報を 入れるとき どうしてますか?2011年11月27日日曜日 22
  • テンプレートタグと関数 テンプレートタグと関数(API) ➡ テンプレートタグ <?php  the_author();  ?> ➡ 関数(API) <?php  echo  get_the_author();  ?>2011年11月27日日曜日 23
  • テンプレートタグと関数 テンプレートタグと関数(API) ➡ テンプレートタグ <?php  the_author();  ?> ➡ 関数(API) <?php  echo  get_the_author();  ?>2011年11月27日日曜日 24
  • MVCというと難しいからMVのみを考えてみよう V ビュー 表示関係を管理 エレメント ヘルパー2011年11月27日日曜日 25
  • エレメントとヘルパー エレメントって? ➡ ページ内に表示する様々なパーツを 共通化できるように切り出したもの ヘルパーって? ➡ 表示系でプログラム的な処理が必要な ものを切り出したもの ➡ モデル経由でデータを取得し、 加工など(専門的にはコントローラ を兼ねている) ➡ 直表示せず返り値を返すように2011年11月27日日曜日 26
  • オブジェクト指向は脇に置いておく 今すぐ出来る構造設計:概略 ➡ フォルダ構造による意味的な関数の振り分け ➡ グローバル領域に変数などを置かない ➡ WordPressのAPIに直接アクセスしない間接化 ➡ 命名規則、コーディング規則を徹底2011年11月27日日曜日 27
  • Design 設計のほうのデザイン2011年11月27日日曜日 28
  • テーマに使われているPHPコード Twenty Elevenの場合 ➡ 特定機能ファイル • 404ページ、検索ページ、画像表示ページ ➡ 部分出力用標準ファイル • ヘッダー用、フッター用、検索フォーム ➡ ページテンプレートファイル • パーマリンク用、カテゴリー用、インデックス用 ➡ 機能ファイル • functions.php2011年11月27日日曜日 29
  • functions.phpを掘り下げる functions.phpは、 テーマに機能 を持たせれば持たせるほど、 肥大する しかも、 1次元的に、 カオス。2011年11月27日日曜日 30
  • functions.phpを開こう functions.phpを見てみる ギャーッ!!2011年11月27日日曜日 31
  • いろいろな機能が入り乱れている 見なかったことにして、閉じよう...2011年11月27日日曜日 32
  • まずは、フォルダーを分けましょう こういう状態のものを functions.php2011年11月27日日曜日 33
  • 各フォルダ、ファイルの用途 functions.php models wordpress.php views helpers util.php elements header.php2011年11月27日日曜日 34
  • 各フォルダ、ファイルの用途 functions.php modelとviewsの呼び出しのみ models データおよびロジック周りの管理 wordpress.php Wordpress内のAPI呼び出し views 主に表示用の関数管理 helpers 表示用のデータ加工などを書く util.php おおざっぱな機能ごとに用意 elements 主に表示用のパーツ管理 header.php 例えばヘッダーパーツ2011年11月27日日曜日 35
  • 用途別に分けるメリット こんなメリットがあり ➡ プログラマーが構造を一目で判断しやすい ➡ 各関数のテストが容易になる ➡ 拡張する際にどこをいじればいいかわかる ➡ 再利用が容易 ➡ 将来WordPressのAPIが変わっても対応が楽 ➡ 平行作業が得意 ➡ おれおれ流を作業者に伝える必要がない ➡ コードがすっきり ➡ モダン系MVCフレームワークと共通の概念2011年11月27日日曜日 36
  • Coding コーディングにも決まりがある2011年11月27日日曜日 37
  • ここまでの流れ ここまでで、やったこと ➡ functions.phpに書かれていた関数を 一旦用途別に振り分けた その他やるべきこと ➡ functions.phpで各ファイルを読み込む ➡ プログラムの書き方に注意する ➡ 命名規則について気をつける2011年11月27日日曜日 38
  • 関数をそのままテンプレートに埋め込むのは出来るだけやめよう APIを 直接テンプレートから 使うのは、出来るだけ避けましょう なんで?2011年11月27日日曜日 39
  • APIをテンプレート内で使うことのいくない点 こんな可能性が ➡ 返ってくる値にいろいろな処理を追加する必要が ➡ なんか Deprecated になっちゃった ➡ テンプレート中にいきなりプログラムが始まった ➡ ちょっと変えたらエラーで動かなくなった そこで設計の登場2011年11月27日日曜日 40
  • 各フォルダ、ファイルの用途 functions.php modelとviewsの呼び出しのみ models データおよびロジック周りの管理 wordpress.php Wordpress内のAPI呼び出し views 主に表示用の関数管理 helpers 表示用のデータ加工などを書く util.php おおざっぱな機能ごとに用意 elements 主に表示用のパーツ管理 header.php 例えばヘッダーパーツ2011年11月27日日曜日 41
  • 従来型の読み込み方 階層型に格納されたテンプレートを取得 <?php   require_once(        dirname(  __FILE__  )  .          /views/helpers/sidebar-­‐helper.php );   ?> 便利な関数が用意2011年11月27日日曜日 42
  • テンプレートの読み込み get_template_part ➡ get_template_part( $slug, $name ) <?php   get_template_part(        /views/helpers/sidebar,  helper );   ?> バージョン3.0以降2011年11月27日日曜日 43
  • モデルの場合 モデルの場合も <?php   get_template_part(        /model/blog,  model );   ?> すっきりかつモダン2011年11月27日日曜日 44
  • APIとMVC テンプレート内で、 APIをそのまま使って ロジックを書かないようにする $current_user  =  wp_get_current_user(); $user  =  $current_user-­‐>user_login; echo  $user  .  さん、ようこそ; ➡ こういうのはヘルパーに関数を書いて、タグにする <?php  display_current_user();?>2011年11月27日日曜日 45
  • こんな風に書いてませんか? もう1つ。 基本関数内に変数などは閉じ込める グローバル領域をなるべく浸食しない $current_user  =  wp_get_current_user(); $user  =  $current_user-­‐>user_login; echo  $user  .  さん、ようこそ;2011年11月27日日曜日 46
  • テンプレートに書いていいもの 基本的にはタグしか書かない!! ➡ 複雑な処理はヘルパー ➡ 分岐はエレメントとかで テンプレートすっきり2011年11月27日日曜日 47
  • まとめ Framework ➡ ModelとViewの考え方 Design ➡ 決められた役割で設計 Coding ➡ 決められたスタイルを守る2011年11月27日日曜日 48
  • おつかれさまでした!! ➡ Webデザイナーのための、PHPプログラミング WordPressで学ぶCMSカスタマイズ入門 ∼WordPressサイト構築編∼ • http://www.pasonatech.co.jp/event/index.jsp?no=33112011年11月27日日曜日 49
  • Naming 命名規則について2011年11月27日日曜日 50
  • 命名規則 キャメルケース ➡ getBlogEntries スネークケース ➡ get_blog_entry ハイフン区切り(チェインケースとか?) ➡ get-blog-entry.php2011年11月27日日曜日 51
  • 名前空間的な話 独自の名前空間(擬似的)を持とう ➡ ドメイン名、プロジェクト名、用途名など • jp_greative_get_blog_info(); • JP_GREATIVE_DEFAULT_LIB_PATH2011年11月27日日曜日 52
  • 定数 print_r(get_defined_constants()); ➡ [WP_CONTENT_URL] => http://URL/wp-content ➡ [WP_PLUGIN_DIR] => /PATH/wp-content/plugins ➡ [WP_PLUGIN_URL] => http://URL/wp-content/plugins ➡ [PLUGINDIR] => wp-content/plugins ➡ [TEMPLATEPATH] => /PATH/wp-content/themes/twentyeleven ➡ [STYLESHEETPATH] => /PATH/wp-content/themes/twentyeleven ➡ [WP_DEFAULT_THEME] => twentyeleven ➡ [WP_CONTENT_DIR] => /PATH/wp-content ➡ [ABSPATH] => /PATH/2011年11月27日日曜日 53
  • 関数名のつけかた get_ ➡ だいたい何かを出力する系 • get_user_info() is_ ➡ 何かを判定する系 • is_user_active() display_ ➡ 何かを出力する系 • display_side_ad()2011年11月27日日曜日 54
  • 他言語化系のハナシ _e()から__()へ ➡ __e()は、翻訳済みの語句を、echoで出力 ➡ __()は、翻訳済みの語句を、返す function内で使うと、 具合が悪い時があるので、 _e()を__()に変える2011年11月27日日曜日 55
  • learning 効率的にまなぶ2011年11月27日日曜日 56
  • Codexを読もう Codexの歩き方 ➡ テンプレートタグ ➡ 条件分岐タグ ➡ インクルードタグ ➡ 関数 ブクマしておこう2011年11月27日日曜日 57
  • 本家の読み方 困ったら本家を読もう ➡ Usage … 構文 ➡ Parameters … 引数 ➡ Examples … 例 ➡ Source File … この関数が書かれているファイル ➡ Related … 関係している関数 Deprecatedに注意2011年11月27日日曜日 58
  • WordPressのコーディングの基準にまず目を通そう WordPress コーディング基準 ➡ http://codex.wordpress.org/ WordPress_Coding_Standards2011年11月27日日曜日 59
  • PHPの規約にも目を通そう Zend Framwork PHP 標準コーディング規約 ➡ http://framework.zend.com/manual/ja/coding- standard.html2011年11月27日日曜日 60
  • Others その他2011年11月27日日曜日 61
  • 編集画面からやらない IDE推奨 ➡ とくにプログラムが苦手な方こそ ➡ できればバージョン管理も2011年11月27日日曜日 62
  • WordPressでのMVCとは 本気モードでプラグインとかを 作ろうと考えたら ➡ WP MVC • Webアプリケーションフレームワーク ➡ WP Unit • ユニットテスト こういうのを使うと、よいよ この話はいずれまた..2011年11月27日日曜日 63
  • パーツに直接アクセスが可能 実行すると表示されてしまうパーツは、 やめよう ➡ 例) http://localhost:8805/wp-content/themes/ twentyeleven/sidebar-footer.php Fatal  error:  Call  to  undefined  function   is_active_sidebar()  in  /Users/ harakazuhiro/gitrepo/wpjelly/wp-­‐content/ themes/twentyeleven/sidebar-­‐footer.php  on   line  172011年11月27日日曜日 64
  • テーマディレクトリにあるindex.php /PATH/wp-content/themes index.php twentyeleven2011年11月27日日曜日 65
  • index.phpにこんなことが書かれている 沈黙は金なり index.php <?php //  Silence  is  golden. ?>2011年11月27日日曜日 66