sample app: tizengram
TRANSCRIPT
Satoru Hashimoto, PCPhase
1
1. カメラで写真を撮ります
2. 正方形にトリムして回転とかも補正します
3. レトロ調のエフェクトを掛けます
4. ライブラリに保存します
5. Twitterに投稿します
• 全部HTML5(と一部DeviceAPI)でやります
2
実機で実演します
3
カメラ画像取得◦ <input type="file“ accept="image/*" capture="camera“>◦ トリガーは別ボタンで、取得はchangeイベントから
画像処理◦ HTMLのCanvas上で◦ Exif取得はHTML File API(FileReader)利用◦ エフェクトはオープンソースのライブラリ:vintage.js利用
ファイル保存◦ DeviceAPIのFilesystemを利用
Twitter投稿◦ オープンソースのjsOAuthを利用
フォント◦ WebFontでgooglefontから取得
4
Googledrive(今日はこっちを。)◦ http://goo.gl/mbl3R
Github◦ https://github.com/pcphashimoto/Tizengram
◦ (順次更新?)
WGTファイルのインポート◦ File > Import > Tizen > Web Projects and Widget
File
◦ Select Widget Fileでwgtファイルを選択◦ Finish
5
STEP1:jQueryMobileでページを3つ作る
STEP2:Inputタグで画像を取得し、取得したらページ遷移する◦ (今日の目標はこの辺)
STEP3:Canvasを使って画像処理をする
STEP4:画像にエフェクトかけてみる
STEP5:ギャラリーに保存する
STEP6:Twitterに投稿する
6
目標:◦ jQueryMobile(もしくはTizenUI)で3ページ作り、ボタンで遷移する
ポイント◦ テンプレートはjQueryMobileかTizenUIのMultiPageがオススメ
◦ data-role=“page”のdivタグを3つ作り、それぞれにid(one,two,three等)を振る
◦ content内にボタン(<a href=“#two” data-role=“button”>two</a>)を置く◦ backボタンはpageのタグにdata-add-back-btn=“true”をつければfooterに表示される。自分で作っても可
◦ ハードウェアキーの制御は下記、参考までに。 documentのイベントで“tizenhwkey”というのが飛んできます
e.keyNameが“back”や“menu”になります
7
ポイント◦ <input type=“file” type="file" accept="image/*"
capture="camera ” id=“inputCamera” >
◦ 画像を取得したイベントは$(“#inputCamera”).change()で取得する。
◦ イベントオブジェクトのe.target.files[0]がFile
◦ HTML5 File APIのFileReaderでデータを読み込むことができる
FileReaderのreadAsDataURL→onload(e)
$(“#inputImg”).attr(“src”, e.target.result)で画像取得
◦ ページ遷移のメソッドは$.mobile.changePage(“#two”)
8
ポイント
◦ カメラで撮った画像は解像度が大きすぎるので縮小したい
Canvasに貼り付けて縮小
◦ カメラで撮った画像は回転がかかっているので補正したい
exif情報取るのはややこしい
canvas上で回転して描画するのもちょっとややこしい
◦ canvas[0].getContext(„2d‟)でコンテクストを取得し各種の描画をする
◦ context.drawImage(img,…)で画像貼り付け
◦ canvas[0].toDataURL()でimgのsrc部分に出力する
9
ポイント◦ vintage.jsのjQueryプラグイン版
https://github.com/rendro/vintageJS
$(“img”).vintage()でエフェクトが掛けられる
$(“img”).data(“vintageJS”)で継続的な処理ができるAPI取得
◦ 今回はサンプルなので解像度は400x400で
10
ポイント◦ DeviceAPIのfilesystemを利用。要Privilegesの設定
◦ tizen.filesystem.resolve(“images“,..)で共通のイメージディレクトリ取得
◦ ファイル保存時はdata:image/png…などの部分は手で削除
◦ dir.createFile > file.openStream > fs.write(今回はwriteBase64)の流れでファイル書き込み
◦ 最後にtizen.content.scanFileでギャラリーに認識させ
る(しなくても再起動後などにはギャラリーに反映される)
11
ポイント◦ jsOAuth
http://bytespider.github.io/jsOAuth/
オープンソースのOAuthライブラリ
今回はブラウザを開いてPINで認可処理
認可が済むとoauth.get(url)などでtwitterなどのサービスにアクセスできる
multipartファイルアップロードにBlobが対応していなかったので該当箇所を変更してます
12
jQueryMobileが必須ではない◦ Sencha TouchがTizen対応
◦ Canvas主体で作るのもあり
create.js, enchant.js, three.js, processing.js、etc…
大きめのアプリを作るときは設計を大切に◦ $.getScriptでファイル分割
◦ JavaScriptによるMVCの話
BackBone.js、require.jsその他の利用
◦ 重い処理ならWebWorkersやHybridアプリの利用も
13
HTML5はなんでも出来る訳じゃないけど意外と高機能◦ Inputでカメラ、ファイルアクセス◦ Canvasで画像処理◦ WebFont
様々な既存のJSライブラリが使える強み◦ Canvasの画像処理補助系◦ 各ソーシャルサービスのAPIのライブラリ等
Device APIでネイティブ機能にアクセス デザインが自由 デバッグが楽
14