サイトをスマートフォンに最適化してくれる無料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ブラウザ スマートフォン向けギャラリーサイト...画像ファイル管理ツール
[caption id=“attachment_270” align=“aligncenter”] Image File Manageable Tools[/caption] あるECサイトのクライアント様より、「ECサイトに商品画像を登録する前に、ワークフローのルールに沿って撮影画像ファイルを一括でリネームしたい」というご要望をいただきまして、画像アップローダ付きのファイル管理ツールを開発しました。ECサイトで使われる商品画像の命名規則はそれぞれのECで微妙に異なっているので、最終的にはクライアント様専用ツールになってしまいましたが…。それでも、ファイルアップローダやリネーム処理といったコアの処理は汎用化しておけば転用や拡張が見込めるので、できうる限り汎用ツールとして開発しました。 今回『DEVLAβ』で紹介しているツールはその汎用版のデモバージョンになります（ファイルのアップロードやファイル名変更といった機能はデモバージョンでは使えなくしているのでエラーになります）。 コア機能はWordPress 3.3で採用されたドラッグ&ドロップ対応のファイルアップローダ「Plupload」を採用して、アップローダ以外のファイル管理部分のロジックを追加した形です。 実装機能としては、下記のような特徴があります。 HTML5に対応しているブラウザではドラッグ＆ドロップで画像ファイルのアップロードが可能（Pluploadの機能）。 大きいファイルを分割アップロードできるChunk機能（Pluploadの機能）。 アップロード時に同時にリサイズも行えます（Pluploadの機能）。 ファイルアップロードの処理をログ出力（Pluploadの機能を拡張）。 アップロード画像を確認しながら個別もしくは一括でファイルのリネームが可能。 ファイル名から商品番号を類推して、自動でリネームパターンを想定してデフォルト値として設定することが可能。 任意の画像を選択してグループ化でき、グループ化した画像ファイル群を別フォルダに抽出して出力できます。 クライアントさんへの提供方式は「XAMPP + 本ツール」のセットをインストールパッケージ化して、納品させていただきました。 クライアントさんからは拡張機能部分（「リサイズ」など）の要望がなかったため、その後ツールの拡張は行っていませんが、いつか汎用型ファイルマネージャとしてWordPressのプラグイン化みたいなものに進化させてみたいツールです。 余談ですが、Eコマースでは、商品を採寸して、撮影して、紹介用の原稿を書くといった倉庫側の作業を「採寸・撮影・原稿」のそれぞれの頭文字を取って『さ・さ・げ』と呼びます。このツールはその作業の一番最後にECシステムに商品を登録する時に使われました。そのため社内では「ささげツール」と呼ばれていました。 利用コード：HTML5、Plupload(JSライブラリ)、JavaScript、jQuery、PHP ささげツール...CSS3エディッター
CSS3で追加されたプロパティは構文が長いうえに、ブラウザ毎に実装差異があるためベンダープレフィックスを付けて記述分けする必要などもあって、マークアップするのがなかなかに大変です。「Adobe Dreamweaver」などのCSS3に対応しているオーサリングツールを使えばだいぶマークアップが楽になりますが、ツールを持っていないクライアントの担当者さんやツールの知識がないマークアップエンジニアには対応できません。 そこで、WEBベースで簡単に利用でき、視覚的で、設定が簡単なスタイルシート自動生成ツールを作ってみました。とあるスマートフォン専用のサービスにて、そのデザインテンプレートをWEB上から編集できるように…と開発したので、PC向けサイトやそのサービス以外のサイトに対応したオールラウンドのCSSエディッターにはなっていないのですが、CSS3でマークアップが面倒なグラデーションやボックスシャドウ、丸角などのコードを視覚的にエディットできて自動で吐き出してくれるので、CSSの特定プロパティの補助的な編集ツールとしては使えるかも知れません。 （※CSS3の全てのプロパティには対応していません。CSS2.1以前のプロパティにもいくつか対応しています。） 利用コード：HTML5、CSS3/CSS2.1、JavaScript、jQuery、PHP CSS3エディッター...