読了: 約 3 分

iPhoneのOS6からinput type=”file”が使用可能になり、写真投稿機能作成に追われている毎日かと思いますが、いかがお過ごしでしょうか。
自分も、現在開発しているスマートフォンのアプリケーションの開発で必要になったのでメモしておこうと思います。

Google Chromeの設定の場合

最近はChromeのデベロッパーツールも進化してきて、CSS3,Jsのアニメーションをフレームではかりながら、
どこが処理の重さのボトルネックになっているか把握出来たりするようになってきましたよね。

さて、本題は下記。

  • 1.右クリックして要素を検証
  • 2.右下の設定アイコンをクリック
  • 3.User Agentのセレクトボックスの一番下のOther…を選択
  • 4.下記に記載したコードをテキストエリアに貼付けて更新
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X; ja-jp) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25

とりあえずChromeだけですが、firefox,safariとかでも普通に出来るので試してみてはいかがでしょうか。

そもそも写真投稿ってどうなん?

普通にiPhoneのカメラロールから投稿すれば、枠が出てくるし、縦横比とか気にしなくていいですし、
でもブラウザからダウンロードしてそれ投稿されたらどうするん?みたいな事もあって、
ついでにリサイズ機能も必要になりますよね。。

小さい画像を入れるなんてそんな可能性…と思いながらも他のスマホに限らず他のアプリケーションってどうしてるんでしょうかね。
SNSとか作成してるところとか永遠の課題ですよねほんと。

結局

大きい画像なら、顔認識の出来る画像API使って、なるべく近いところがトリミングされるように
してますが、それ以外の画像だと中央位がトリミングされるという仕様になりました。

そういえばFacebookめっちゃ綺麗になりますよね。
Facebookが買収後すぐに閉鎖したFace.comが、顔認識APIで復活すると思う理由

会社で使っているのはおそらくこれではないですが、顔認識APIいいですね。
マッシュアップとかに使っている方もいるそうです。
detectFace();

実装方法

後日追記しようかなと考えていますが、仕様としては画像をinput type=”file”であげるのですが、
そのまま投稿(サーバーには送らず)ではなくて、小さいサムネイル表示をして、ある項目を入力して
POSTする際に一緒に投稿されるというものです。

小さいサムネイルはcanvasresizeを使用しています。
https://github.com/gokercebeci/canvasResize

ドキュメントの中に、
The plugin for client side image resizing. It’s compatible with iOS6 and Android 2.3+.
と書かれているのですが、androidだとうまく動いていない?

プラス、htmlの中に直書きしている疑惑ぎょええr(‘Д‘n)

試してみたものです。

サンプル

会社のものは書けないので、簡単なサンプルを作成していた人がいました。
画像の縦横幅は指定して、変更する事が可能です。
http://jsfiddle.net/uKnAR/3/

あとはこの辺とか、

IOS6 and Safari Photo Uploading – File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously

日本語の情報はほぼ皆無で,海外の方は結構敏感なのか早いですね。
上のgithubに上げられているcanvasresize.jsの方が参考になるかもしれません。

Chrome developer tools資料

最近の資料ですが、結構参考になります。
JS側で出来る事が増えてくる中で、こういうデバックツールの使い方一つで開発スピードがかわってくるので
覚えておきたいですね。

ハッピーな写真投稿ライフを送りたいですね。