Sample App: Tizengram

1.

カメラで写真を撮ります

2.

正方形にトリムして回転とかも補正します

3.

レトロ調のエフェクトを掛けます

4.

ライブラリに保存します

5.

Twitterに投稿します

•

全部HTML5（と一部DeviceAPI）でやります
2



カメラ画像取得



画像処理



ファイル保存



Twitter投稿



フォント

◦ <input type="file“ accept="image/*" capture="camera“>
◦ トリガーは別ボタンで、取得はchangeイベントから
◦ HTMLのCanvas上で
◦ Exif取得はHTML File API（FileReader）利用
◦ エフェクトはオープンソースのライブラリ：vintage.js利用
◦ DeviceAPIのFilesystemを利用
◦ オープンソースのjsOAuthを利用

◦ WebFontでgooglefontから取得

4



Googledrive(今日はこっちを。)



Github



WGTファイルのインポート

◦ http://goo.gl/mbl3R

◦ https://github.com/pcphashimoto/Tizengram
◦ （順次更新？）

◦ File > Import > Tizen > Web Projects and Widget
File
◦ Select Widget Fileでwgtファイルを選択
◦ Finish

5




STEP1：ｊQueryMobileでページを3つ作る
STEP2:Inputタグで画像を取得し、取得したら
ページ遷移する
◦ （今日の目標はこの辺）







STEP3:Canvasを使って画像処理をする
STEP4:画像にエフェクトかけてみる
STEP5:ギャラリーに保存する
STEP6:Twitterに投稿する

6



目標：
◦ jQueryMobile（もしくはTizenUI）で３ページ作り、ボタン
で遷移する



ポイント
◦ テンプレートはjQueryMobileかTizenUIのMultiPageがオスス
メ
◦ data-role=“page”のdivタグを３つ作り、それぞれにｉｄ
（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

Sample App: Tizengram

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Sample App: Tizengram (20)

Sample App: Tizengram