サンプルアプリ：どんなアプリ？
それでは、実際のアプリ開発に入っていきたいと思います。
本稿で紹介するアプリは、カメラを使った写真加工、投稿ツールです。
- カメラで写真を撮ります
- 取得した画像を縮小して、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プラグイン版がある
|
|
ギャラリーに 保存する |
Tizen Device APIのFilesystemと Contentを利用 |
|
|
画像をTwitterに 投稿する |
jsOAuthを利用 |
オープンソースライブラリ
oAuthを認証のため必要とする
サービスについてのユーティリティーライブラリ |
