プログ

’14修了無内定理系院卒の活動雑記||プー太郎ログ||プログラミング雑記

モバイル端末への対応 と 3次元変換

今日はようやくアルバイトに応募したのと,次のステップへの取り組みだったのですが結論から言うとあまり思い通りに行かずという状態.

もう少し読み進めないと分からないけど,実装は難しいかもしれない.

次に移る前に

昨日タブレットから動作確認をしていたら気づいたのですが,結果画像の保存に使っている saveBlob() 周りの関数がAndroid端末では(?)うまく機能しない様でした.Twitter連携の方は正常に動くので,そっちを使えば投稿できるしツイート画面からローカル保存することも可能だったのですが,反応が無いのは気持ち悪いし連携を強制するのは良くないので以下の様にしてみました.

function buttonSave(){
  //モバイル端末の場合は保存用のポップアップを開く
  if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0){
    w = window.open('http://www55.atpages.jp/triplog/ultimateoauth534/UltimateOAuth-master/popup.php','','scrollbars=yes,Width=600,Height=500');
    w.focus();
  }
  //PCの場合は今まで通り
  else{
    var cvs = document.getElementById('srcImg');
    saveBlob(dataUrlToBlob(cvs.toDataURL()), 'ra-men_collage.png');
  }
}

navigator.userAgent.indexOf() で種類を判別して, buttonTweet() で使ってたポップアップ表現を持ってきて専用ページに飛ぶだけ.ポップアップにしたのはページ内に登場させても区別がつきにくかったり余計な移動を必要とするのを防ぐため.現状の問題というか改善したい点としては,ファイルのデフォルト名が dataURL の生データで人間が読んでもなんだか分からないのでこれを変更すること.とりあえず title 属性を変更してみても変化が起きませんでした.というか Android で実行しなきゃなのでサーバにアップロードする必要が有る上に別環境から見なくてはならず,かつJavaScriptコンソール的なものも見られないので非常に面倒くさい.GoogleChrome でモバイル端末をエミュレーションする方法も試してみたけどうまくいかないので,今後を考えるとエミュレータを入れたほうが良いのかなぁ・・・

参考
スマホからのアクセスを判別して動作を切り替えるCSS、PHP、Javascript
web帳 | スマートフォン JavaScript ユーザーエージェント振分け
パソコンのGoogle ChromeでUser Agentとかを設定変更したい - Qiita

OpenCVjs

OpenCVjs を初めてちゃんと見てみたのですがメインの4096行に面食らいました,Notepad++ だと関数名のリストボックス的なのが無いから一々大変.とりあえず当初の予定としては,今までのジェネレータで作った画像ファイル(=canvas でない)をガリガリ編集していく感じで特にフィルタや3次元変換を使っていきたいと思っていたんですが,IplImage のプロパティに canvas があるから基本は canvas で操作しているのかな?また

//メモ
//imgタグの画像から直接IplImage型へは変換できない
//ローカルの画像ファイルはクロスドメイン扱いとなりjavascriptのエラーが出る

というのが書かれていて思っていた使い方は難しそう.とりあえず現状としては適当なファイルを読み込んで処理を掛けるのはできているけど,ジェネレータで作成したデータを IplImage 型に入れるのに苦労している状態.ただ,適当なファイルを img に読み込んだ上で img の src に dataURL をぶち込むとそれらしく動作する(後に貼る画像参照)ので,できないこともないはず・・・

CSS3 Transform Test

OpenCVjs の中に透視投影変換の関数である cvWarpPerspective が見当たらなかったので,(もしかしたら用意されている関数を組み合わせれば実装自体はできるかもしれないけど)こんなものも入れてみました.簡単に言うとCSSを用いて3次元表現をするための処理で,3次元変換したエリアに画像を貼ることで画像を3次元変換したように見せることができます.ただ画像自体は変化しているわけではないので,変換状態で保存することができないことからスクリーンショットなどで保存するしかできず,できれば変更したいところ. canvas 使って似たようなことやってる人もいるみたいなので,OpenCVjs の方も含めてもう少し canvas への理解を深める必要がありそうです.

ところでこれを入れるにあたって jQueryUI が必要になり,最新バージョンの jQuery && jQuery UI にしたら動きが大分怪しかったので古いバージョンの方を採用したのだけれど,他のページと jQuery のバージョンがズレてしまうんだよね.統一するために全体でダウングレードした方が良いんだろうか.あと一緒に入れた Sylvester.js ってのもCDN用意して欲しいなぁ・・・

進捗???

f:id:triplog:20140526235257p:plain

参考
opencv.jp - OpenCV: サンプリング,補間,幾何変換(Sampling, Interpolation and Geometrical Transforms)サンプルコード -
CSS3 Transform 3D Test - jsdo.it - Share JavaScript, HTML5 and CSS
3D CSS Tester
jQuery UI – All Versions | jQuery CDN
jQuery UIを利用するには? - Build Insider
Sylvester
テクスチャマッピング入門 射影変換(ホモグラフィ) - jsdo.it - Share JavaScript, HTML5 and CSS
3D回転 射影変換(ホモグラフィ) - jsdo.it - Share JavaScript, HTML5 and CSS