Appcelerator Titanium DesktopでRuby,Python,PHPを使ったお手軽デスクトップアプリ開発その2
その1の続きです。
あとすいません。タイトルにPythonと、PHP入れてるのにすっかり忘れてました。
前回Rubyしか指定していませんでしたね。似たような感じですのでPythonやPHPについては、これを参考に応用でやっていただければと思います。
JavaScript+Rubyで進めます。
作るアプリのお題ですが、みんな大好きTwitterにしてみましょう。
Titanium Mobileの記事ではTwitter検索を表示してるようなので、それとは別の機能と言うことで、シンプルな投稿するだけアプリを作りたいと思います。
それでは早速Resources/index.htmlから編集していきます。
なお、ここからのコーディング作業はUTF-8が扱えるエディタやIDEを使用して、ファイルのエンコーディングは全てUTF-8にして作業してください
プロジェクト生成時に作られてたindex.htmlの中身は消して、以下のように編集します。なお、cssはお好みでどうぞ。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/ruby" src="twitpost.rb"> </script> <script type="text/javascript" src="application.js"> </script> <title>TweetPost</title> </head> <body> <h1>何が起こっていますか?</h1> <textarea id="tweet" name="tweet" rows="2" cols="40"></textarea> <input type="button" id="tweetbutton" value="update" name="update" /> </body> </html>
つぶやきを書き込むtextareaと投稿する為のボタンを作成しました。
また、JQueryを使います。
それと、index.htmlに直接JavaScript等を書き込んでもいいのですが、せっかくなので分離しておきました。
application.jsとtwitpost.rbにロジックを実装していきます。
両方ともこれから作ります。
application.jsはこんな感じに
$(function(){ $("#tweetbutton").click(update); }); function update(){ update_post($("#tweet").val()); showNotification(); } function showNotification() { var notification = Titanium.Notification.createNotification(window); notification.setTitle("updated"); notification.setMessage("投稿しました"); notification.setDelay(5000); notification.setCallback(function(){ alert("clickなう"); }); notification.show(); }
最初の部分はJQueryお馴染みのready()メソッドですね。
投稿ボタンをクリックした場合の関数updateを記述してます。
で、そのupdate()、Twitterへの投稿処理メソッドですが、実際の処理はupdate_post()で行います。
これはtwitpost.rbに記述します。
showNotification()はそのなの通りnotificationを表示します。Titanium.NotificationというAPIをよんでいます。投稿しましたというメッセージを表示します。Growlみたいな感じです。
ここで少し脱線してAPIの見方です。このTitanium.Notificationを例に取ります。
Desktop APIのURLはこちら。
開くとProperties,Methods,Objectsと並んでいるかと思います。
Titanium.NotificationはObjectsにあります。
調べる場合、大概このObjects(Namespaces)からたどっていく事になります。
で、Titanium.Notificationをクリックすると、今度はTitanium.Notificationの中でまた、Properties,Methods,Objectsと並んでいます。
ここのMethodsに大体オブジェクトを生成するメソッドが用意されていると思います。
で、NotificationにはcreateNotification( window )っていう生成するメソッドが一つだけあります。
返り値はと調べるとNotification objectとなっています。
後、このメソッドのページを開くと、サンプルコードも下に用意されてます。
返り値のオブジェクトがわかりましたので、今度はObjectsにあるNotificationを見ていきます。
そうするとこのオブジェクトが持っているメソッドが並んでます。
あとは必要に応じて各メソッドを調べ、実装という感じです。サンプルコードは載ってるのと、ないのと結構ばらつきがあります。
APIを見てもいまいち掴めない場合は、情報源にあげたサンプルアプリなどに当たるといいです。
戻ります。twitpost.rbを実装します。
Titanium.NetworkにはHTTPClientというのがあるのですが、素のJavaScriptでAJAXをやるのとあまり変わりません。
せっかくRubyが使えるので、今回はRubyで楽をします。
$KCODE='u' require 'net/http' Net::HTTP.version_1_2 require 'uri' def update_post status Net::HTTP.start('twitter.com',80) {|http| req = Net::HTTP::Post.new('/statuses/update.json') req.basic_auth('twitter_id','password') req.body = "status=" + URI.escape(status) res = http.request(req) } document.getElementById("tweet").value = "" end
一行目、エンコーディングをutf-8にしています。
twitterにポストするのに、net/httpを使用するのでrequireしています。
uriはTwitterのAPIではstatusを必ずエスケープすることとなっている為です。
IDとパスワードを自分のに直して下さい。それとソースコードに直接書いちゃってますので、取り扱いに気をつけて下さい。
ちなみにtwitterというそのものずばりのgemがあったりしますが、Titanium Desktopでgemを使う場合、gem内で依存しているgemも全てResourcesに用意する必要があります*1。
twitterは他にも沢山のgemを使います。労力に見合わないので、今回は標準のライブラリだけ使用しました。
やってる処理は見ての通り、twitterにポストして、textareaのvalueをクリアしてるだけです。
アプリをテストしてみます。Test&Packeageのタブを選択し、Launchをクリック。
さらにLaunch Appをクリックします。
何か書き込んで投稿してみます。なお、140文字以上書いて投稿しないで下さい。
140文字越えで注意のメッセージを出すとかチェックを特に実装していません。
140文字以上書いて投稿してもTwitter側で無視されます。
投稿すると、OS Xの場合は以下のようなノーティフィケーションが画面右上に表示されます。
Windowsの場合は画面右下に表示されます。
なお、これをクリックするとapplication.jsに書いたalert("clickなう");が実行されます。
Twitterを確認してみます。
ポスト成功してます。
その3へ続く