• Tips

    Android(java)で電話番号にいい感じに'-'(ハイフン)を入れる方法

    電話番号って

    [市外局番] - [市内局番] - [顧客番号]

    みたいにハイフン２つで番号を区切る構造になっていますが

    0312345678

    みたいな、ハイフンが入っていない番号にハイフンを入れようと思うと、これが案外難しいです。

    市外局番は、2桁の時もあれば、3桁、4桁の時もあるし、携帯は3桁だし、ちょっと自分でなんとかするのは手に余ります。

    ウィキペディアの市外局番の項

    こんな時は長いものにまかれましょう、という事で信頼できそうなとこが提供しているライブラリを活用です。
    本家googleがライブラリを出してました。

    libphonenumber

    トップページ

    ダウンロード

    基本的には一番新しいものをダウンロードして、Android projectのlibsに放りこめば準備完了です。

    ※apkを作る時にエクスポートするライブラリにチェックを付けるのをお忘れなく。

    使い方は極めて簡単。

    [code lang=“java” light=“true”] /** * 数字が羅列された電話番号をハイフン付きの電話番号に変換する * @param incomingNumber * @return ハイフン付き電話番号 */ private String getFormattedPhoneNumber(String incomingNumber) { PhoneNumberUtil phoneUtil = PhoneNumberUtil.getInstance(); try { PhoneNumber pn = phoneUtil.parse(incomingNumber, “JP”); incomingNumber = phoneUtil.format(pn, PhoneNumberFormat.NATIONAL); } catch (NumberParseException e) { Log.e(“app tag”,“電話番号をフォーマットできませんでした”, e); } return incomingNumber; }[/code]

    ...

  • Tips

    iframeから新規ウィンドウを開いてリンクできない時の対処法

    完全な備忘録です。<br　/> インラインフレーム内に読み込んだHTMLから新しいウィンドウにリンクを開きたい時、Aタグのtarget="_blank"やjQueryMobileのrel="external"、果てはJavaScriptのwindow.open()を使っても出来ない状態に陥った時は、IFRAME内の属性にsandbox="allow-scripts"がないかを疑ってみましょう。
    HTML5で追加されたIFRAMEタグの新属性「sandbox」で「allow-scripts」を指定してしまうと、インラインフレーム内に読み込まれたコンテンツのJavaScriptの機能をかなり制限してしまいます。特にwindowオブジェクトが受ける影響は大きく、ブラウザのポップアップを伴う処理を完全に抑止してしまいます。
    WEBセマンティック的にも、IFRAMEを使うときは内包されるコンテンツによって属性を正しく設定してあげる必要があるってことですね。

    ...

  • Tips

    WordPressのデータベース仕様書を書いてみた

    以前から、 WordPressCodexのデータベース構造のページが見づらくて、仕様も古くなっていたのが、ちょっと気になっていたので、自分でデータベース仕様書を書き直してみようかと思っていたところ、WordPressでシステム開発する業務が急激に増えて来て、特にマルチサイト系の仕組みを把握する必要もあって、WordPressのデータベース仕様書をチートシート的に書き起こしておかないとシステム設計がしづらいという状況になってきた。そこで、自分なりのデータベース仕様書（テーブル定義書）を書いてみた次第。

    基本的には日本語版Codexと本家WordPress.orgのサイトを見ながら、実際のデータベース構造と見比べて書いてみたのだが、マルチサイト系のテーブル部分はまだちょっと不明なところが多いんだなこれが（特にwp_sitecategoriesテーブル…このテーブルってwp3.0以降ではドロップされてしまったのか？…みたいな）。

    まぁ、一通り書き切ったので、ここに共有化しておこうかと。

    バージョン：0.1

    さて話は変わる（…ようでそうでもないのだ）が、今月12/11に新安定バージョンのWordPress3.5がリリースされたので、さっそく本デベラボも3.5へアップグレードしてみた。
    管理パネルからの自動アップデートが上手く動作しなかった（パッケージデータを取得して展開している途中でタイムアウトしてしまう）ので、一旦アップグレードするのを躊躇したのだけど、PHP側の設定を見直すのは面倒だったので、最終的に手動でアップデートしてしまいました。アップデート後、今のところテーマやプラグインに不具合もなく動いているようだけど、管理パネルに常にWordPressの自動更新失敗のノーティフィケーションが出るようになってしまった…（大した影響はなさそうなので、そのうち直そうかと）。

    そんなわけで、WPも3.5になったので、書き上げたデータベース仕様書と構成の突合せをしてみようと、バージョン3.5のデータベースを覗いてみた。
    ざっと構造を見てみましたが、3.4.x → 3.5 でデータベースへの変更はなかった（マルチサイト側は突合せてませんが…）。

    本記事が今年最後のデベラボの投稿になりそうだ。
    それではみなさん、良いお年を。

    ...

  • Tips

    【WordPressを使う】WindowsPCで動かしてみる

    WordPressを仕事で扱うことになったので、試しにいつも使っているWindowsPCに入れてみることにしました。

    さてどうすれば動かせるのかと調べてみると、WordPressはPHPとMySQL、Apacheがあれば動くようで、WindowsPCではWebアプリを動かすのに必要なソフトウェアをひとまとめにした「XAMPP」というものをインストールして、それを利用してWordPressを実行できるようです。

    というわけで、まずはXAMPPをインストールすることに。

    ...

  • Tips

    サイトをスマートフォンに最適化してくれる無料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ツールは数あれど、無償でここまでの機能を提供されてしまうと、既存デベロッパーは苦しいだろうなぁ…。

    ...

  • Tips

    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」をインクルードしておくのが無難なようです。

    ...

  • Tips

    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 でインストール。

    ...

  • Tips

    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 されてしまっている可能性があるのでは…と思い調査してみた。
    だが、いくら変数をvar_dumpしてみてもわからずじまい…うぅむ、困った。

    ...

  • Tips

    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 プラグイン

    バージョン：0.2
    動作確認：WordPress 3.4.1 / PHPExcel 1.7.7
    ライセンス：GPLv2

    ...

  • Tips

    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());

    で確認できます。

    でもこの方法で公開用のアプリを作ってしまうと、受け取った値を素のまま展開しちゃうので、クロスサイトスクリプティングや各種インジェクションのセキュリティホール化する可能性が高いので、あくまでモック開発とかまでの利用にとどめておいた方が良いです。

    ...

  • Tips

    YouTubeの動画編集新機能・自動「顔ぼかし」を使ってみた

    YouTubeに追加された新編集機能「Face Blurring」（自動で人の顔にぼかしをいれてくれる機能）を試してみましたので、そのレビューを書いておきます。

    所感としては「あまり精度が良くないなぁ」と。
    ソースの動画が最適なものでなかったことも要因かもしれませんが…。まだ顔が認識できる程度のちょっと引いた映像や、手ぶれがちょっと多かったり速度のあるカメラのパン時には、ぼかしがかからないケースが多かったです。また、乳児の顔はほぼ認識してくれず、ぼかしがかかりませんでした。
    ただ、思っていたよりもフィルター処理が早くて、精度さえ向上してくればかなり有用な機能になるのではないかとも思いました。昨今は肖像権や個人情報保護にセンシティブな風潮が強いので、このツールに関してはぜひ機能強化を図って欲しいところです。

    [caption id=“attachment_370” align=“aligncenter”]

    Youtube自動顔ぼかし機能レビュー(1)

    [/caption]

    さて、自動「顔ぼかし」機能の使い方ですが、まずYouTubeにログインして「動画の管理」を行います(画面右上のボタン)。

    [caption id=“attachment_371” align=“aligncenter”]

    Youtube自動顔ぼかし機能レビュー(2)[/caption]

    次に編集したい動画のサムネイル右下にある「編集」のプルダウンから「動画加工ツール」を選びます。

    [caption id=“attachment_372” align=“aligncenter”]

    Youtube自動顔ぼかし機能レビュー(3)[/caption]

    そして、クイック編集タブのプレビュー動画エリアの下にある「追加オプション」のボタンを押すと、「すべての顔をぼかす」というツールメニューが開くので、そこの「適用」を押します。

    [caption id=“attachment_369” align=“aligncenter”]

    Youtube自動顔ぼかし機能レビュー(4)[/caption]

    動画のプレビューが始まり、左側に元の動画、右側にぼかしが入った動画が同期再生されます。

    結構簡単に編集が出来てしまいます。これで「特定の人物だけはぼかしを入れない」なんて拡張機能があったりするとかなり素敵なんですが、相当高度な顔認識処理が必要なので難しいでしょうね。

    ...

  • Tips

    カテゴリーごとに最新投稿が含まれていれば「NEW」を表示するWordPressのショートコード

    [caption id=“attachment_364” align=“alignleft” width=“320”]

    特定カテゴリーに新着投稿があればNEWを表示するショートコード[/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!=’’) ? do_shortcode($content) : ’new’; global $post; $cats = get_category_by_slug($slug); if(!$cats){ return ‘’; }else{ $cat = $cats->term_id; if(!$cat) return ‘’; } $last_post_ids = array(); $lastposts = get_posts(‘category=’.$cat); foreach($lastposts as $lastpost) : $entry = ($ttype == ‘pub’) ? date_i18n(‘U’, strtotime($lastpost->post_date)) : date_i18n(‘U’, strtotime($lastpost->post_modified)); $interval = date(‘U’, ($today - $entry)) / (60 * 60 * 24); if(intval($term) > $interval){ $last_post_ids[] = $lastpost->ID; } endforeach; if(count($last_post_ids) > 0){ if($vtype == ‘str’){ $retstr = $value; }else{ $retstr = count($last_post_ids); } } wp_reset_query(); if($retstr != ‘’) return $retstr; } add_shortcode(‘addnew’, ‘addnew’); [/php]

    ...

  • Tips

    JavaScriptデバッグ用オブジェクト「console」による落とし穴

    [caption id=“attachment_267” align=“alignleft”]

    'console'が宣言されていません(IE8) ‘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"を指定してあげれば、なにも処理されません。

    ...

  • Tips

    CANVAS版イメージトリマー

    任意の画像をHTML5のCANVASに読み込んで、範囲を指定してトリミングおよびリサイズし、ファイル形式を指定して出力するイメージトリマーツールです。
    処理の流れとしては、

    1. 指定されたディレクトリ内をサーチして画像ファイルだけをプルダウンメニューへ追加します。
    2. CANVASに読み込んだ画像の上にjQueryUIのドラッグ＆ドロップボックス（divレイヤー）を重ねる。
    3. トリミングボタンが押されたらドラッグ＆ドロップボックス（divレイヤー）のX,Y座標と縦横幅を取得します。
    4. 取得した座標と幅を元画像の実寸比に計算し直して、トリミング＆最終出力サイズにリサイズします。
    5. 最終出力画像をCANVASのtoDataURL()メソッドでテキストデータ化して、AjaxでPHPへポストします。
    6. PHP側では受け取ったテキストデータをJPEG/PNGのバイナリデータへ変換して指定場所へ出力します。

    HTML5とJavaScriptだけではバイナリファイルをローカルへファイルとして出力することが出来ないので、PHP化で処理しました。

    画像ファイル管理ツールの拡張機能として開発しましたが、いまだ日の目を見ていないプロト版ツールです（なので、ツール自体の見た目ものっぺりしています）。

    利用コード：HTML5、JavaScript、jQuery、PHP

    イメージトリマー

    任意の画像をHTML5のCANVASに読み込んで、範囲を指定してトリミングおよびリサイズし、ファイル形式を指定して出力するイメージトリマーツールです。
    処理の流れとしては、

    1. 指定されたディレクトリ内をサーチして画像ファイルだけをプルダウンメニューへ追加します。
    2. CANVASに読み込んだ画像の上にjQueryUIのドラッグ＆ドロップボックス（divレイヤー）を重ねる。
    3. トリミングボタンが押されたらドラッグ＆ドロップボックス（divレイヤー）のX,Y座標と縦横幅を取得します。
    4. 取得した座標と幅を元画像の実寸比に計算し直して、トリミング＆最終出力サイズにリサイズします。
    5. 最終出力画像をCANVASのtoDataURL()メソッドでテキストデータ化して、AjaxでPHPへポストします。
    6. PHP側では受け取ったテキストデータをJPEG/PNGのバイナリデータへ変換して指定場所へ出力します。

    HTML5とJavaScriptだけではバイナリファイルをローカルへファイルとして出力することが出来ないので、PHP化で処理しました。

    画像ファイル管理ツールの拡張機能として開発しましたが、いまだ日の目を見ていないプロト版ツールです（なので、ツール自体の見た目ものっぺりしています）。

    利用コード：HTML5、JavaScript、jQuery、PHP

    イメージトリマー

    ...