jQuery 1.9 で変更された仕様によって動かなくなるプラグインが多い
...code { padding: 2px; background-color: #f4f4f4; color: #7f0055; font-weight: bold; border: solid 1px #ddd; } blockquote { margin-left: 1em; font-size: 12px; line-height: 17px; background-color: #fdfdfd; border: solid 1px #ccc; padding: 4px; font-style: normal; }
現在開発しているあるシステムで、最新のjQuery 1.9.1を導入して開発を行っていたところ、先月開発していたシステムでは動いていて、同じように実装したはずなのに動かないjQueryプラグインがあってハマりました。それがWordPressのコアに同梱されている「thickbox」でして、管理パネルでは動いて、テーマ側で動かないのは何故だろうと思って調べてみたところ、読み込んでいるコアのjQueryが1.8系と1.9系と差があった。もしや･･･と思って、jQuery 1.9系の仕様変更内容を調べてみたら、おっと、今までかなり重宝していたメソッドがなくなっているではありませんか。
将来的に削除されることは知っていたけど、使い勝手が良くて使っていた$.browser()と、何気に動的に生成されたDOMオブジェクトに対して適応性が低い$.bind()より汎用的に使えるため重宝していた$.live()などが削除されてしまったため、これらのメソッドを使っているjQueryプラグインではエラーが発生してしまうようになってしまいました。
･･･と言うことで、jQuery 1.9系での主な仕様変更をまとめてみた。$.browser()が廃止1.3からサポート外に指定されてましたが、ついにメソッドが削除されてしまった･･･何気にお手軽にブラウザ判定できるので使い勝手良かったんだが･･･致し方ないですね。これからは、$.support()を使って判定式を組まないといかんです。$.live()が廃止$.bind()の拡張版メソッドで、bindはjQueryやJavaScriptで動的に生成されたオブジェクトに対して処理をバインドできなかったのを可能にするメソッド。これも使い勝手が良くて重宝していたのだが･･･廃止されてしまった。今後は$.on()と$.off()を使えってことです。まぁ、バインドイベントのオン・オフを判り易く制御できるのでこちらの方が確かにスマートだ。$.die()が廃止上記live関数を削除するメソッドです。liveがなければこちらも不要ということですね。
$.sub()が廃止プロパティとメソッドが自由に変更可能なコアjQueryオブジェクトのコピーを作成するメソッドです。プラグイン開発などで、コアを変更せずに、独自にjQueryコアを拡張する時などに使われていましたが、結構巨大なjQueryコア自体をコピーしてメモリ食いまくってまで作るプラグインもないだろう･･･という判断があったのかも。まぁ、プラグイン開発者以外にはあまり使わないメソッドだし、1.8系からこのメソッド自体がプラグイン化されたらしいので、廃止によるインパクトは低いかな。
$.toggle(fn1(),fn2(),[...fnN()])の廃止1.7系で非推奨化されてたメソッドです。指定のオブジェクトがクリックされる毎にfn1、fn2、･･･fnNと関数を実行して、fnN以降はfn1に戻るみたいな処理が書けるメソッドでした。まぁ、クリック毎にそこまで処理変えなきゃいかんUIってどうよ？って感じなので、廃止は妥当かな･･･と。あ、ちなみに、関数バインド型ではないイベントエフェクト型の
$.toggle()は廃止されていません。他に記述順や処理内容が変更されたメソッド
$.add()、$.before()、$.after()、$.addSelf()などなど細かいところが色々と変わっているようです。
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
スマートフォン向けギャラリーサイト
...自社運営の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