WordBench Osakaのスライド「アプリケーションプラットホームとしてのWordPress」

2013/04/06 追記
このプレゼンで使用したデモサイトは閉鎖しました。とても大勢の方に試していただいて感謝です。

3/16に大阪のサイバーエージェントさんで開催されたWordBench Osakaでのスライドをアップしましたので、そのご報告と補足説明をさせて頂きます。

1f927f148e0711e2924b22000aaa05e0_7

スライドについて

スライドは以下のとおりです。

しゃべってる最中にいくつか間違ってるとこがあるような気がしたんですが、忘れちゃったので、そのまんまアップしました。笑

デモサイトについて

デモサイトは以下のとおりです。

http://demo.ksm.to/

このデモサイトはAWS の Amimoto を使って期間限定で公開しています。

一部のデモはユーザー登録が必要となっておりますが、3月末に予告なく閉鎖 & 削除されますので、あしからずご了承ください。

サンプルファイルについて

今回のデモで使用したサンプルは以下のURLでシェアしました!

https://www.dropbox.com/sh/ffjgqhce6syld6d/6V9-4eHtXB

あくまでも自己責任でお願いします!

デモ用に開発したものなので、公式ディレクトリに登録する予定もありませんし、今後メンテナンスする気もないので、本番環境にはインストールしないことを強くご推奨します。

あとWordBenchのあとでいくつか不具合の修正 & 改善を行いました。

すでにお試しの方で、動かん…っていう方は最新版をお試しいただけると改善されるかも。

ファイルの内容は以下のとおりです。

login-customizer.zip (プラグイン)

ログイン画面をカスタマイズするプラグインのサンプルです。

スクリーンショット_2013_03_15_6_24

実際のデモは以下のURLでご覧になれます。

http://demo.ksm.to/wp-login.php

このサンプルでは、フィルターフックを駆使して、CSSやJavaScriptを適用すれば、デザイン面はほとんど自由自在だぜーということをご理解いただければ幸いです。

wbosaka.zip (テーマ)

上述のプラグインのログイン画面のスライド用画像を、テーマのfunctions.phpからフィルターフックを使用して書き換えたサンプルテーマです。

テーマを適用して、ログイン画面を見るとログイン画面のデザインが変わります。

スクリーンショット_2013_03_17_14_41

テーマを適用した後で、先ほどと同じ以下のURLでどうぞ。

http://demo.ksm.to/wp-login.php

(※ よく考えたら皆さんの環境じゃないと無理ですよね。笑)

このサンプルでは、自作プラグインに独自のフィルターフックを仕込むことによる、デザインとロジックの分離について、なんとなく食いついていただければと。

画像やテキスト、CSSはテーマとの関連性が高いので、プラグイン内の画像やCSSもfunctions.phpでカスタマイズできたら素敵ですよね!

rewrite-example.zip (プラグイン)

WordPressのURLに独自のパスを追加して、そのURLでウェブアプリケーションを動作させるための基本的な処理を知っていただくためのサンプルプラグインです。

このプラグインをみなさんの環境で有効化して /demo/ をご覧いただくには、以下のプラグインも必要です。(ショートコードも動くんだよっていうデモのために。)

WordPress › Simple Map « WordPress Plugins

スクリーンショット_2013_03_17_14_51

デモは以下のページでどうぞ

http://demo.ksm.to/demo/

この add_rewrite_endpoint() という関数を使用したやり方は、実はrewriteを処理するための最も簡単なやり方で、多少制約があったりするんですが、ほとんどの場合、この方法で何とかなります。

app/index.php には、htmlが記述されています。

このファイルをご覧いただくと、ほとんどのテンプレートタグが普通に動くことをご理解いただけるんじゃないかと思います。

あと、サインアップしていただくと、Adminバーも表示されます。

そのための処理は、たったの1行です。ぜひ、いろいろさわって確かめてみてください。

app-example.zip (プラグイン)

このプラグインは、WordPress上でウェブアプリを開発したサンプルです。

インストールすると、 /app/ というURLに以下のような画面が表示されます。

(ユーザー登録が必要です。)

スクリーンショット_2013_03_18_0_30

デモは以下のページでどうぞ。(ユーザー登録が必要です。)

http://demo.ksm.to/app/

しつこく書きますが、3月末にはサーバーごと削除します!

このデモプラグインは、オレオレEvernote風のサービスでメモやURLなどを個人的に保存するためのものです。

URLはoEmbedに対応しており、flickrやYoutube、Slideshare、InstagramなどのURLを保存すると、そのコンテンツに変換されて表示します。

これもWordPressがデフォルトで持ってる機能を活用して、このアプリ内ではたったの1行で実装しています。

最後に

今回は、すごくプログラマー向けの話で、退屈だった方も大勢いらっしゃると思いますが、一部の方には喜んでいただけたようで安心しました。

夜の懇親会もすごく楽しかったです。

WordBench大阪スタッフのみなさん、当日お会いしたみなさん、ありがとうございました!