WordPressのデータベース仕様書を書いてみた
以前から、 WordPressCodexのデータベース構造のページが見づらくて、仕様も古くなっていたのが、ちょっと気になっていたので、自分でデータベース仕様書を書き直してみようかと思っていたところ、WordPressでシステム開発する業務が急激に増えて来て、特にマルチサイト系の仕組みを把握する必要もあって、WordPressのデータベース仕様書をチートシート的に書き起こしておかないとシステム設計がしづらいという状況になってきた。そこで、自分なりのデータベース仕様書（テーブル定義書）を書いてみた次第。 基本的には日本語版Codexと本家WordPress.orgのサイトを見ながら、実際のデータベース構造と見比べて書いてみたのだが、マルチサイト系のテーブル部分はまだちょっと不明なところが多いんだなこれが（特にwp_sitecategoriesテーブル…このテーブルってwp3.0以降ではドロップされてしまったのか？…みたいな）。 まぁ、一通り書き切ったので、ここに共有化しておこうかと。 PDF形式：WordPress3.4.xDataBase (655KB) バージョン：0.1 さて話は変わる（…ようでそうでもないのだ）が、今月12/11に新安定バージョンのWordPress3.5がリリースされたので、さっそく本デベラボも3.5へアップグレードしてみた。 管理パネルからの自動アップデートが上手く動作しなかった（パッケージデータを取得して展開している途中でタイムアウトしてしまう）ので、一旦アップグレードするのを躊躇したのだけど、PHP側の設定を見直すのは面倒だったので、最終的に手動でアップデートしてしまいました。アップデート後、今のところテーマやプラグインに不具合もなく動いているようだけど、管理パネルに常にWordPressの自動更新失敗のノーティフィケーションが出るようになってしまった…（大した影響はなさそうなので、そのうち直そうかと）。 そんなわけで、WPも3.5になったので、書き上げたデータベース仕様書と構成の突合せをしてみようと、バージョン3.5のデータベースを覗いてみた。 ざっと構造を見てみましたが、3.4.x → 3.5 でデータベースへの変更はなかった（マルチサイト側は突合せてませんが…）。 本記事が今年最後のデベラボの投稿になりそうだ。 それではみなさん、良いお年を。...【WordPressを使う】WindowsPCで動かしてみる
...WordPressを仕事で扱うことになったので、試しにいつも使っているWindowsPCに入れてみることにしました。
さてどうすれば動かせるのかと調べてみると、WordPressはPHPとMySQL、Apacheがあれば動くようで、WindowsPCではWebアプリを動かすのに必要なソフトウェアをひとまとめにした「XAMPP」というものをインストールして、それを利用してWordPressを実行できるようです。
というわけで、まずはXAMPPをインストールすることに。
サイトをスマートフォンに最適化してくれる無料WEBサービス「GoMo」がスゴイ！
そのサイト、いますぐスマホに最適化「GOMO」 dudamobile DudaMobile（とGoogle）がスゴイサービスを作ってくれました。 「GoMo」はスマートフォンに最適化されていないWEBサイトを自動でスマートフォンサイトへ最適化してくれるASP型のサービスだ。特筆すべきはなんと一年間は無料で使えるフリーウェア（二年目以降は1,180円）だということ。 WEBサイトのURLを入力して、数分待つだけで、スマートフォンに最適化されたサイトが出来上がり、プレビューしながらレイアウトのテンプレートやカラーバリエーションなどが選べるうえに、ページ単位で個別にヘッダーやフッター、コンテンツ部分のスタイルシートやHTMLも修正できる。さらに新規コンテンツの追加やSEOの設定なども可能だ。ブログサイトの場合、ブログとして認識させるか一般サイトとして認識させるかによってテンプレートのバリエーションが変る。 何気に、スマートフォンサイト作成用のCMSと言えるぐらい機能が充実していて、作成したサイトはアカウント登録すると保存できたり、そのまま公開できる。 これでFlash→HTML5コンバート機能が付いていたらほぼ無敵のサービスだったかもしれないが、まだFlashをHTML5へコンバートする機能やECサイト等の高度な機能を持っているサイトには対応できていない。 それでも十分スゴイWEBサービスなので、特殊なことをやっていないWEBサイトやブログならこのツールだけで最適化は事足りてしまうのではないだろうか。 また、現行サイトのスマートフォン最適化を企図した時の、モックアップ開発や最適化後の外観プレビュー的なツールとしても重宝しそうなツールでもある。 PCサイトやフィーチャーフォンサイトをスマートフォンサイト化するASPツールは数あれど、無償でここまでの機能を提供されてしまうと、既存デベロッパーは苦しいだろうなぁ…。...WordPressでHyperDBによるデータベース二重化を行う時の注意点
商用サイトなどをWordPressで構築する場合、WEBアプリケーションサーバとデータベースサーバを切り離して、データベース側を二重化することが良くあります。単にデータベースへのアクセス負荷を分散させてサービスのパフォーマンスを向上させるためでもあり、もし障害が発生した場合にミラーリングしている副系ノードのデータベースから正系データベースを復旧させることができる意味でも、サービスとして最悪のケースである「データ消失」のリスクを軽減できるからです。 WordPressにはそういう正副ノードのミラーリングデータベース構成にも対応できる「HyperDB」というドロップインがあります。これを使うことで、データベースの更新はマスターデータベースのみに集約し、データベース参照はマスターとセカンダリに分散させるということができます。 （※ 「HyperDB」ドロップインによるデータベース二重化の方法は、QuickKnowLedge : MySQL HyperDB + Keepalivedを利用した、wordpress の負荷分散 などで詳しく説明されています。） さて、この「HyperDB」を利用しているWordPressサイトで、WordPressのコア処理に依存しない形で、データベースアクセスの処理を独自拡張している場合に、問題が発生することがあります。 一体どういうケースかと言うと、WordPressのデータベース制御系のグローバル変数「$wpdb」をWordPressページ外で使う場合です。 例えば、WordPressの投稿からAjaxなどで直接独自に作成したPHPをコールし、そのPHP内でWordPressのデータベースへのアクセスを行う処理があるような場合です。このようなWordPressのプログラム群から独立した外部プログラムでデータベースアクセス用のグローバル変数「$wpdb」を利用する場合に、 [code lang=“php” light=“true”]require_once(’./wp-config.php’);[/code] …と、上記のように設定ファイルをインクルードしているケースだと「HyperDB」を有効化した途端に動かなくなります。 この場合、インクルードするファイルを設定ファイルからブログヘッダーに変更することで、正常化します。 [code lang=“php” light=“true”]require_once(’./wp-blog-header.php’);[/code] 特にインクルードファイルを変更してもパフォーマンスに変化が見られなかったため、結論的には、外部プログラムで「$wpdb」を利用する場合は「wp-blog-header.php」をインクルードしておくのが無難なようです。...Encrypted Http Live Streaming
自社サイトでiPhone向け動画を配信するにあたり、採用した手法です。 参考 HTTP Live Streaming(Encrypt) ここが詳しいですが、暗号化するとうまく再生できないのでアレンジしています。 iPhone, iPad, iPod – HTTP Live Streaming (HLS) with free tools on Windows エンコードのオプション等が参考になります。 方針 元動画 ↓ mpeg2ts ↓ 分割 ↓ 暗号化 ↓ 再生 プラットフォーム Ubuntu 12.04 ffmpeg は apt-get でインストール。 mpeg2ts化して分割 [code light=“true”] ffmpeg -i ./hoge.3gp -f segment -segment_time 10 -segment_list hoge.m3u8 -segment_format mpegts -vcodec libx264 -vbsf h264_mp4toannexb -flags -global_header -r 30 -s 640x480 -qmax 51 -b 300k -g 150 -qcomp 0....APCによるWordPressの管理画面にログインできない障害
WordPressサイトを構築していて、インストール直後に通常アクセスはできるのに、ログインページからログインすると画面が真っ白になってログインできない症状に出くわしたので、その解決方法を備忘録として残しておこうかと。 Codexに上記のケーススタディが載っていたのだが、該当する原因や解決方法がなかったので、エラーログを確認してみた。 [code light=“true”] PHP Fatal error: Call to undefined function get_option() in /var/www/html/wp-admin/admin.php on line 32, referer: http://******/wp-login.php[/code] と、出ている。エラーでは管理画面の本体 admin.php にて get_option 関数が定義されていないと言っている。ちなみに、インストールしたWordPressのバージョンは3.4.1（2012年8月29日時点最新）である。 今度はマニュアルサイトで関数を確認すると get_option() は wp-includes/functions.php で定義されているとのこと。そこで、wp-admin/admin.php のソースを追ってみると、30行目で wp-load.php が require_once されていた。wp-load.php では、48行目で load.php が require_once されており、その後で wp_load_translations_early() がコールされている。 load.php の668行目で定義されている wp_load_translations_early の関数内で、該当の functions.php が require_once されているので、このインクルード処理前に return されてしまっている可能性があるのでは…と思い調査してみた。...WordPressにPHPExcelライブラリを組み込むプラグイン
PHPからMicrosoft OfficeのExcelシートを操作できるフリーのライブラリとして有名な「PHPExcel」をWordPressに組み込むためのプラグインを作ってみました。 ちょうどWordPressで構築した自社のイントラサイトにて、アップロードされたエクセルシートをWEBから直接検索できないものかなぁと導入してみた「PHPExcel」が思いのほか使い勝手が良くて、これをWordPressの汎用プラグインにできれば色んなシーンで使えて有益なのでは…と思えたのがきっかけです。 今回、WordPressのプラグインを初めて作ったこともあって、中身は色々と粗いところが多いんですが…まぁ、まだバージョン0.1ですからと言うことでおいておきます。プラグインの機能としては単純でして、同梱している「PHPExcel（バージョン1.7.7）」をWordPressにインクルードしてくれるだけのブリッジプラグインです。さすがにそれだけだと能がないので、アップロードしたエクセルファイルやCSVファイルをCSVやらHTMLやらPDFなどに変換してリンクを表示するショートコードが使えるようにしてみました。今後はこのショートコード部分を拡張してWordPressでExcelシートを修正したり出力したりできるような機能を追加していければ…とか考えています。 なお、プラグインの設定で、PHPExcelライブラリを常に自動でインクルードしてどのページでもPHPExcelが使えるようにするか、ショートコードを利用する時だけとか任意でライブラリを読むかの設定ができるようにしてあります。実際のところPHPExcelは重いので、自動インクルードは切っておいて利用する時だけインクルードする方が無難かもしれません。インクルードだけするショートコードも登録しておけば良かったのだけど、現状は入ってません（次バージョンで入れます）。今のところ、投稿や固定ページなどでPHPコードを書いていく人向けのプラグインになっているので、もうちょっと汎用化しないと使いづらいですね（追々機能拡張していきます）。 WordPress Bridge PHPExcel プラグイン ZIP形式：wp-bridge-phpexcel.0.2.zip (11.6MB) バージョン：0.2 動作確認：WordPress 3.4.1 / PHPExcel 1.7.7 ライセンス：GPLv2...PHPに渡されたURLパラメータをそのままPHPの変数として使う
PHPに何か値を受け渡して処理を行う時に、受け渡された値の存在チェックをしながらPHPの変数として定義し直すことは良くあります。でもそういうお決まりの処理を毎度書くのは何気に手間で、URLパラメータ名を変更するとまたその部分にも手を入れないといけなくなったりして面倒です。 そこで、どんなURLパラメータでもとりあえずそのパラメータ名を変数名として定義してしまえれば、変数定義の初期処理が楽になるし、モック版のPHP処理を書く時などはお手軽でかなり効率的かな…と思いました。 と言うわけで、PHPの可変変数を使ってURLパラメータをそのままPHP変数化してみます。 foreach($_REQUEST as $query => $value){ ${$query} = (isset($value)) ? $value : ''; } これで、どんなURLパラメータを受け取ってもそのパラメータ名を変数名としたPHP変数が定義されます。 例えば、上記コードを含んでいる「test.php」に「test.php?a=test」でアクセスした場合、「test.php」ではURLパラメータの「a」が変数「$a」として定義されます。同じように「test.php?a=test&b=1&c=0」でアクセスすれば「$a」「$b」「$c」がそれぞれ定義されます。「$_REQUEST」のグローバル変数を可変変数に展開しているので、GETメソッドでもPOSTメソッドでも大丈夫です。 なお、変数の定義状況は、 print_r(get_defined_vars()); で確認できます。 でもこの方法で公開用のアプリを作ってしまうと、受け取った値を素のまま展開しちゃうので、クロスサイトスクリプティングや各種インジェクションのセキュリティホール化する可能性が高いので、あくまでモック開発とかまでの利用にとどめておいた方が良いです。...YouTubeの動画編集新機能・自動「顔ぼかし」を使ってみた
YouTubeに追加された新編集機能「Face Blurring」（自動で人の顔にぼかしをいれてくれる機能）を試してみましたので、そのレビューを書いておきます。 所感としては「あまり精度が良くないなぁ」と。 ソースの動画が最適なものでなかったことも要因かもしれませんが…。まだ顔が認識できる程度のちょっと引いた映像や、手ぶれがちょっと多かったり速度のあるカメラのパン時には、ぼかしがかからないケースが多かったです。また、乳児の顔はほぼ認識してくれず、ぼかしがかかりませんでした。 ただ、思っていたよりもフィルター処理が早くて、精度さえ向上してくればかなり有用な機能になるのではないかとも思いました。昨今は肖像権や個人情報保護にセンシティブな風潮が強いので、このツールに関してはぜひ機能強化を図って欲しいところです。 [caption id=“attachment_370” align=“aligncenter”] [/caption] さて、自動「顔ぼかし」機能の使い方ですが、まずYouTubeにログインして「動画の管理」を行います(画面右上のボタン)。 [caption id=“attachment_371” align=“aligncenter”] [/caption] 次に編集したい動画のサムネイル右下にある「編集」のプルダウンから「動画加工ツール」を選びます。 [caption id=“attachment_372” align=“aligncenter”] [/caption] そして、クイック編集タブのプレビュー動画エリアの下にある「追加オプション」のボタンを押すと、「すべての顔をぼかす」というツールメニューが開くので、そこの「適用」を押します。 [caption id=“attachment_369” align=“aligncenter”] [/caption] 動画のプレビューが始まり、左側に元の動画、右側にぼかしが入った動画が同期再生されます。 結構簡単に編集が出来てしまいます。これで「特定の人物だけはぼかしを入れない」なんて拡張機能があったりするとかなり素敵なんですが、相当高度な顔認識処理が必要なので難しいでしょうね。...カテゴリーごとに最新投稿が含まれていれば「NEW」を表示するWordPressのショートコード
[caption id=“attachment_364” align=“alignleft” width=“320”] [/caption] 自社のイントラをWordPressで再構築した際に、要望されたことのひとつに『サイドバーとして配置しているメニューのカテゴリー一覧に、カテゴリーごとに最新の投稿が含まれていたら「NEW」マークを表示して欲しい。』と言うのがありました。 そこで特定のカテゴリーを指定して、そのカテゴリーの投稿記事に最新のものが含まれていたらカテゴリー名の横に「NEW」マークを表示するというショートコードを作成してみましたのでここに共有しておきます。拡張機能としてカテゴリーの最新投稿数をカウントしてその件数を表示するということもできます（FaceBookのメニューなどで表示される最新未読アイコンみたいな感じの表示にすることもできます）。 ショートコードを色々探してみたのですが、何気にWordPressで記事の一覧リストの横に「NEW」を表示するみたいなショートコードは数多くあるのですが、どれも記事リストに対しての最新判定ばかりで、カテゴリーに対しての最新判定というショートコードはめぼしいのが見つからなかったので、自作することにしました。 参考にしたのは星野邦敏氏のWordPressコミュニティで紹介されていた「WordPressでNew!を表示するパターン別４つの方法」という記事。氏のサイトでは、WordPressの企業サイトならではの要望やニーズに対してのTIPSが紹介されていてとてもためになりました。 [php highlight=“2-37,38”] function addnew($attr, $content){ extract(shortcode_atts(array( ‘slug’ => ‘’, ’ttype’ => ‘pub’, ’term’ => 7, ‘vtype’ => ‘str’, ), $atts)); $today = date_i18n(‘U’); $ttype = ($ttype!=‘pub’) ? ‘mod’ : ‘pub’; $term = ($term!=7) ? intval($term) : 7; $vtype = ($vtype!=‘str’) ? ’num’ : ‘str’; $value = ($content!...JavaScriptデバッグ用オブジェクト「console」による落とし穴
[caption id=“attachment_267” align=“alignleft”] ‘console’が宣言されていません(IE8)[/caption] 最近のブラウザはほぼすべてデバッグ用の検証機能が付いていて、インクルードされた外部ファイルや適応されたスタイルなどを見れるうえに、JavaScriptやjQueryなどで動的に変更されたHTMLまでもリアルタイムに見ながら動作確認が行えるのでサイト制作がかなり楽になって来ています。 特にJavaScriptでは、consoleオブジェクトが追加されたことで、今までalert()メソッドで処理をいちいち止めながら動作確認していたところを、デバッグ用の出力をすべて裏のブラウザコンソール側に集約させてフロントエンドの処理を止めずに検証できるようになったのはすごく便利です。 このconsoleオブジェクトですが、今までJavaScriptの開発でalert()メソッドを使って来た人には共感してもらえると思うのですが、かなり使い勝手が良いです。すべて裏側で処理されて出力が表に出ないし、プログラムの流れも止まらない、ブラウザの実装にもよりますが配列やオブジェクトの中身まで簡単に一覧化表示できます。私的にもはやJavaScriptのコーディングには必須のオブジェクトになっています。 ただ、使い勝手が良過ぎるところに「落とし穴」もありまして、デバッグコードをそのままJavaScript内に残したままサイトをパブリッシュしてしまう…なんて事も多いです（…私だけ？）。 そしてそのデバッグ用のconsoleオブジェクトがたった一つ残っているだけで、consoleオブジェクトを持っていない古いブラウザでエラーが起こってしまうのです（当たり前ですが…）。 特にIE8のブラウザはやっかいでして、consoleオブジェクトを持つIE9で動作検証している時などが「落とし穴」にはまります。 というのも、IE9で追加された開発者モード（[F12]で起動します）は便利で、IE7やIE8のエミュレーション機能も持っているのですが、本来IE8では実装されていないconsoleオブジェクトに対するエラーをスルーしてしまいます。元々のブラウザであるIE9がconsoleオブジェクトに対応していて、エミュレーション時に内部的にその辺のスイッチングをしないからなのでしょうが、これがデバッグ用のconsoleオブジェクトがJavaScript内に残っていても正常処理されてしまうため、「IE8でも正常に動くJavaScript」としてそのままパブリッシュしてしまうケースがありえます（実際、私がそうでした）。 ──で、リリース後に純粋なIE8ユーザーからエラー報告が出るわけです。 でも、自分のIE9のエミュレーション機能ではバグらない…「あれ？なんで？」となるわけですね。 純粋なIE8のエラー内容（"「console」オブジェクトが定義されていない"旨）を伝えてもらえればすぐに気がつけるのですが、ユーザーさんはエラーの詳細なんて確認してくれるのが稀なので、「ここが動かない」「ここでエラーになる」というような断片的な報告が来ます。実際はconsoleオブジェクトの記述があることによって、それ以下に記述してある「一部の機能が動かなくなっている」のですが、こういう場合、原因がなかなか特定できずにかなり困惑することになります。 まぁ、consoleオブジェクトに限らず、デバッグ用の記述をリリースするソースコードに残すな！…というのがセオリーなのですが、後で切り戻すかも、機能追加とかあった時にまたデバッグするかも、とか考えてあえて残してしまうということもあるのではないでしょうか？ そんな時のために、consoleオブジェクトに対応していないブラウザでもエラーにならない実装をしておくと安心です。 さらに、consoleオブジェクトの使い勝手も殺さないように独自関数化していつでも呼べるようにしておきます。 [code lang=“js”] function debug(string, enable_flag){ if(enable_flag){ if(typeof console != ‘undefined’){ console.info(string); }else{ alert(string); } } return true; } [/code] そして、呼び出したい場所で、 [code lang=“js”] debug(“表示したい文字など”, true); [/code] と記述すれば、consoleオブジェクトが有効なブラウザならconsole.info()メソッドが実行され、無効なブラウザならalert()メソッドが実行されてダイアログが表示されます。もしデバッグ機能を一時的に無効化したい場合は第2引数に"false"を指定してあげれば、なにも処理されません。...CANVAS版イメージトリマー
任意の画像をHTML5のCANVASに読み込んで、範囲を指定してトリミングおよびリサイズし、ファイル形式を指定して出力するイメージトリマーツールです。 処理の流れとしては、 指定されたディレクトリ内をサーチして画像ファイルだけをプルダウンメニューへ追加します。 CANVASに読み込んだ画像の上にjQueryUIのドラッグ＆ドロップボックス（divレイヤー）を重ねる。 トリミングボタンが押されたらドラッグ＆ドロップボックス（divレイヤー）のX,Y座標と縦横幅を取得します。 取得した座標と幅を元画像の実寸比に計算し直して、トリミング＆最終出力サイズにリサイズします。 最終出力画像をCANVASのtoDataURL()メソッドでテキストデータ化して、AjaxでPHPへポストします。 PHP側では受け取ったテキストデータをJPEG/PNGのバイナリデータへ変換して指定場所へ出力します。 HTML5とJavaScriptだけではバイナリファイルをローカルへファイルとして出力することが出来ないので、PHP化で処理しました。 画像ファイル管理ツールの拡張機能として開発しましたが、いまだ日の目を見ていないプロト版ツールです（なので、ツール自体の見た目ものっぺりしています）。 利用コード：HTML5、JavaScript、jQuery、PHP イメージトリマー 任意の画像をHTML5のCANVASに読み込んで、範囲を指定してトリミングおよびリサイズし、ファイル形式を指定して出力するイメージトリマーツールです。 処理の流れとしては、 指定されたディレクトリ内をサーチして画像ファイルだけをプルダウンメニューへ追加します。 CANVASに読み込んだ画像の上にjQueryUIのドラッグ＆ドロップボックス（divレイヤー）を重ねる。 トリミングボタンが押されたらドラッグ＆ドロップボックス（divレイヤー）のX,Y座標と縦横幅を取得します。 取得した座標と幅を元画像の実寸比に計算し直して、トリミング＆最終出力サイズにリサイズします。 最終出力画像をCANVASのtoDataURL()メソッドでテキストデータ化して、AjaxでPHPへポストします。 PHP側では受け取ったテキストデータをJPEG/PNGのバイナリデータへ変換して指定場所へ出力します。 HTML5とJavaScriptだけではバイナリファイルをローカルへファイルとして出力することが出来ないので、PHP化で処理しました。 画像ファイル管理ツールの拡張機能として開発しましたが、いまだ日の目を見ていないプロト版ツールです（なので、ツール自体の見た目ものっぺりしています）。 利用コード：HTML5、JavaScript、jQuery、PHP イメージトリマー...WordPressにAjaXplorerを組み込む
[caption id=“attachment_107” align=“aligncenter”] AjaXplorer[/caption] 「DEVLAß」にショーケースを実現するにあたって考えなければならなかったのが、様々な形式のファイルをアップロードしたり削除したりという部分のUIでした。本サイトはWordPressで構築していますが、WordPressのメディアライブラリに依存してしまうとファイル管理用のプラグインを追加したとしても、アップロードされたファイルひとつひとつを管理しなくてはならず、一括削除やディレクトリでグルーピングするなどローカルのPC並みのファイル操作には遠く及ばないという難点がありました。さらには「DEVLAβ」ではセキュリティ上FTPを開放していないため、FTPに依存しないファイルアップローダーである必要もありました。そこで、ローカルPCのエクスプローラ並みのファイル管理・操作が可能で、FTPを使用しない「AjaXplorer」を導入することにしました。 この「AjaXplorer」はフリーなツールなのに驚くほど高機能なツールでして、ブラウザを介してWindowsのエクスプローラー的にファイルのアップロード・リネーム・削除・ディレクトリ作成・コピー・移動など様々なファイル操作がオンライン上で行えます。iOSなどのSmartPhoneにも対応しており、さらにはWordPressやDrupalといった主要なCMSに連結するプラグインもあります。CMS連携プラグインでは、例えばWordPress側へログインすれば、自動でAjaXplorerにログインでき、各ユーザー毎にリポジトリ（アクセスディレクトリやアクセス権限）を個別に設定できます。また「AjaXplorer」自体は日本語対応がされていて、ツール群も使い易くなっています。 ただ惜しむべきはWordPressへの組み込み方がちょっと面倒なうえ、詳しく説明しているサイトが少なく、CMS連携まで記述された日本語のヘルプがないという点です。そこで、今回私が組み込んだ際の手順をTIPS化してみます。さらにはAjaXplorerのWordPressプラグインの日本語化も行ってみましたので、その手順や日本語化ファイルも配布します。 （※本TIPSは、AjaXploreをインストールする環境に、すでにWordPressがインストールされていることが前提となっていますのでご注意ください） AjaXplorerのインストール まずは「AjaXplorer」をダウンロードします。 AjaXplorerの公式サイトより最新版をダウンロード(2012年7月時点で私がダウンロードしたバージョンは4.2.0でした)してサーバにアップロードします。もしくは、サーバー側から直接RPMやyumコマンドでダウンロード&インストールしても構いません（公式サイトにコマンドラインベースのダウンロード＆インストール情報が記載されていますのでそちらを参照してください）。今回私はコマンドラインベースではなく、ファイルアップロード型でのインストールを行いました。こちらの方が、AjaXplorerのインストールパスにそのまま設定ファイル等が展開されてコンフィギュレーションがし易いなと思ったからです。 [caption id=“attachment_115” align=“alignleft”] 【図1】 AjaXplorer インストール・ヘルスチェック画面[/caption] さて、ダウンロードしたファイルを展開すると、「ajaxplorer-core-4.2.0」のように長いディレクトリ名になります。このままサーバにアップするとアクセスURLが長くなって利用しづらいので、「ajaxplorer」とリネームしてサーバにアップします。 次に、AjaXplorerを展開したディレクトリの直下にある「data」ディレクトリとその下のサブディレクトリ群のパーミッションをユーザによる書き込み可(パーミッションを777か775)に変更します。 ここで、WEBブラウザからAjaXplorerを展開したディレクトリ（ルートパス）にアクセスします。例えばサイトのドキュメントルート直下にAjaXplorerをアップロードした場合は「http://mydomain.com/ajaxplorer/」となります。これでインストーラーのヘルスチェックが起動します。もしエラーが出る場合は、ほとんどがディレクトリのパーミッションが問題ですので、AjaXplorerを展開したルートディレクトリ（「ajaxplorer」など）自体のパーミッションを書き込み可にしてみてください。 無事にヘルスチェックが行われると、【図1】のような画面が表示されますので、内容に問題がなければ「click here to continue to AjaXplorer.」のリンクをクリックしてください。 \[caption id="attachment\_116" align="alignleft"\]<a href="http://devlab.isao.co.jp/uploads/scrsht-00004.png"> 【図2】 AjaXplorer ログイン画面[/caption] 初期管理ユーザのユーザ名とパスワードが同じである旨の警告ダイアログはスルーして構いません。【図2】のようなログイン画面が起動すればインストール完了です。初期管理ユーザのユーザ名とパスワードは共に「admin」ですので、まずはログインしてみてください。 AjaXplorerの初期設定 [caption id=“attachment_127” align=“alignleft”] 【図3】 AjaXplorerを日本語化する[/caption] まず、言語設定を日本語に変更します。【図3】のようにコンソール右上の「Logged as admin」のプルダウンから「Language」を選んで、セレクトボックス内から「日本語」を選択してください。これで、AjaXplorerの日本語化は完了です。 \[caption id="attachment\_126" align="alignright"\]<a href="http://devlab.isao.co.jp/uploads/scrsht-00006.png"> 【図4】 AjaXplorer ユーザパスワード変更[/caption]...スマートフォン向けギャラリーサイト
自社運営のECサイトのスマートフォン版を開発しようというプロジェクトにて作成したギャラリー型サイトのモックアップです。最終的にプロジェクト自体が途中で凍結したためお蔵入りしました。 モックアップサイトは、既にあるECサイトのフィーチャーフォン版をベースにして、jQueryMobile＋PHPで開発しました。スマートフォンからのアクセスについては専用のブラウザアプリ（URL欄などを廃して、起動したら直接ECサイトにアクセスするだけのブラウザのラッパー型アプリ）を提供して配布する形を想定していました。 下記のリンクよりプレビューできますが、今回『DEVLAβ』での紹介用にECサイトのモックとして使っていた商品画像やキャンペーンバナーなどは全て差し替えてあります。また、このアプリはAndroid端末向けに開発していたため、Webkitベースのブラウザ以外では正常に表示されません。動作推奨クライアントは、PCであれば、Google ChromeかSafari、スマートフォンではAndroid端末となります。各種UIにはスワイプやダブルタップなどのイベント効果を利用しているのでスマートフォンから動作させると機能がわかり易いです。 利用コード：HTML5、CSS3、JavaScript、jQueryMobile、PHP 対応ブラウザ：Google Chrome、Safari、Androidブラウザ スマートフォン向けギャラリーサイト...