Tizen SDK 2.2の変更点・注意点と、カメラアプリの作例

HTML5で作る！ 次世代スマートフォンOS「Tizen」アプリケーション（2）

サンプルアプリ：どんなアプリ？

　それでは、実際のアプリ開発に入っていきたいと思います。

　本稿で紹介するアプリは、カメラを使った写真加工、投稿ツールです。

• カメラで写真を撮ります
• 取得した画像を縮小して、Exif情報から回転し、正方形にトリムします
• レトロ調のエフェクトを掛けます
• ギャラリーに保存します
• Twitterに投稿します

　これらの機能を、HTML5と一部Tizen Device APIを利用して作成します。

プロジェクトのインポート

　上記のアプリケーションのソースは下記で公開しています

• 元のアプリケーションソース

　また、本稿で解説する範囲のみを抜粋したサンプルソースを別途下記で公開しています。

• 本稿で触れる部分のソース

　Tizen SDKはEclipseベースのため、プロジェクトのインポートもEclipseの機能が使えますが、初期状態でGitのプラグインが同梱されているため、Gitを利用したインポートが便利です。Gitになじみのない方でもインポートであれば簡単にできますので試してみてください。以下ではインポートの仕方について説明します。

　まず、Gitのページ上の右下にある［HTTPS clone URL］からURLをコピーします。次にTizen SDKの［File］-［Import］を開き、インポートウィンドウを開きます。そして［Git］-［Projects from Git］を選択し、次の画面でインポート元として［URI］を選択します。次の画面で先ほどコピーしたURLをURIフィールドに貼り付けてください。次の［Branch Selection］［Local Destination］は基本的にデフォルトのまま進み、［Select a wizard to use for impoting projects］画面では［Import existing projects］を選んでください。最後の画面で［Finish］を押すと、プロジェクトがTizen SDK上にインポートされます。

各機能の実現方法

　まずは、各機能をどのような手段でWebアプリケーションとして実装していくかを考えていきます。

実現したい機能	実現手法	備考
カメラから 画像取得	HTMLのINPUTタグを利用 File Apiを利用して 画像データを読み込む
調整して 画面に表示	Exif情報取得関数 Canvasでの縮小と回転
レトロ調の エフェクトを掛ける	vintage.jsを利用	オープンソースライブラリ IMGエレメントにレトロ調などのエフェクトを掛ける jQueryプラグイン版がある https://github.com/rendro/vintageJS
ギャラリーに 保存する	Tizen Device APIのFilesystemと Contentを利用
画像をTwitterに 投稿する	jsOAuthを利用	オープンソースライブラリ oAuthを認証のため必要とする サービスについてのユーティリティーライブラリ http://bytespider.github.io/jsOAuth/