• 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エディッター
    ...