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