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：ｊ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