TWITTERへの画像の投稿
これまでの工程でTwitterのAPIが利用できるようになりましたが、Twitterに画像を投稿するためには、画像のデータ形式について少し考慮が必要になります。
Twitterへの画像の投稿は「update_with_media」というAPIを使います。画像のデータ形式はバイナリデータの他base64エンコード形式にも対応していますが、リクエストの形式はJSON形式ではなく「multipart/form-data」で送る必要があります。一方、jsOAuthにはPostメソッドのデータ部分にFile APIのFileオブジェクトが入っていた場合に自動でmultipart形式で送信してくれる機能が付いてはいるのですが、残念ながらFileオブジェクトはINPUTエレメントなどで取得する以外に、JavaScriptからオブジェクトを生成する方法がありません。
今回とった解決法は、IMAGEエレメントから取得したdataURL形式のデータをFileの基底クラスであるBlobクラスのオブジェクトに変換し、jsOAuthでBlobオブジェクトでも送信を受け付けるように修正するという方法です。データ変換のために、dataURItoBlobという名前でutils.jsに関数を用意しました。jsOAuthには、Postするデータの中にFileオブジェクトがある場合の条件分岐の部分にBlobオブジェクトがあった場合を追加しました。このような処置をした上で画像投稿の部分の実装は以下のとおりです。
var data = {
status : "Hello Tizen ! #codezine",
"media[]" : dataURItoBlob($("#savedImage").attr("src"))
};
oauth.post(
"https://api.twitter.com/1.1/statuses/update_with_media.json",
data,
//成功時のハンドラ
function(data) {
console.log(JSON.stringify(data))
},
//エラー時のハンドラ
function(e) {
console.error(e)
})
});
アプリへの組み込み
では、実際にアプリの方に組み込んでいきます。まずはindex.htmlの3ページ目を作成し、投稿する画像とTwitterのステータスを入力するテキストエリアとシェアボタンを付けます。
<div data-role="page" id="three" data-add-back-btn="true"> <div data-role="header" data-position="fixed"> <h1>Three</h1> </div> <div data-role="content"> <!-- ここに作成した画像を表示する --> <img id="savedImage" style="width: 344px;height: 344px;"/> <textarea id="status" rows="" cols="" placeholder="status"></textarea> <button id="shareButton">Share on Twitter</button> </div> <div data-role="footer" data-position="fixed"> <h4>Page Footer</h4> </div> </div>
次にmain.jsで、画像の前章で紹介した画像の保存が成功したタイミングで2ページ目の画像を3ページ目の画像にコピーし、3ページに移動する処理を追加した上で、シェアボタンを押した時の処理を以下のように書きます。jsOAuthを使った認証の部分は、一度取得したトークンをlocalstorageに保存して再利用できるように修正した上で、utils.jsにoauthFuncという名前で置いてあります。ただし、保存したトークンが無効になった場合の処理などは別途検討しましょう。
$("#shareButton").click(function(){
$.mobile.loading( 'show' );
var imageBlob = dataURItoBlob($("#savedImage").attr("src"));
oauthFunc(function(oauth){
var data = {
status : $("#status").val() || "Hello Tizen ! #codezine",
"media[]" : imageBlob
}
oauth.post("https://api.twitter.com/1.1/statuses/update_with_media.json",
data,
function(data){
$.mobile.loading( 'hide' );
console.log(JSON.stringify(data))
alert("Sharing image Succeeded");
},
function(e){
$.mobile.loading( 'hide' );
console.error(e)
alert("Sharing image Failed!");
})
});
});
補足：Webフォントの利用
今回のサンプルコードでは、GoogleのWebフォントを利用しています。Webベースのアプリなので、style.cssに下記のような一文を加えるだけで利用することができます。
@import url(http://fonts.googleapis.com/css?family=Baumans);
もちろんフォントの取得は、一度取得すればキャッシュされるとはいえネットワークに接続する必要があるため、オフラインでの起動を前提としているアプリではフォントファイルをアプリ内に同梱しておいたほうがよいでしょう。
まとめ
ここまで2回に渡ってTizen Webアプリケーションでカメラアプリの作り方を紹介してきました。誌面で紹介したソースだけでほぼアプリケーションが完成するというのは、すでにAndroidやiOSのアプリを作ったことのある方にも、Web制作に携わっている方にとっても魅力的なことなのではないかと思います。
また、HTML5の先端技術を率先してサポートしているため、WebSocketやWebRTC、WebWorkerやWebGLなどといった機能を使ってアプリケーションを実装していくことが可能です。Tizenアプリケーションを学習することは、HTML5の学習するのに非常に効率のいい方法といえるでしょう。また、HTML5は標準化が推進されており、互換性にも優れているため、プラットフォームのバージョンアップによるアプリへの影響も比較的少ないと思われます。よってDevice APIの部分さえ除けば、他のブラウザや同じくWebベースのモバイルOSであるFirefox OS、そして今後続々と登場するであろうHTML5ベースのプラットフォーム上への移植もスムーズに行えるでしょう。
今回紹介した機能以外にも、アプリケーション間の連携やBluetoothやNFCをJavaScriptから扱う方法、AndoroidでいうウィジェットやWindowsでいうライブタイル機能に類する機能である「Dynamicbox」、そしてTizenネイティブアプリと連携する方法など、魅力的な特色があります。それらについては、今後の連載などで紹介していければと思います。
