Ruby,Python,PHP,JavaScriptでマルチプラットフォームなデスクトップアプリを簡単に作成する Appcelerator Titanium Desktop

古いエントリーなのですが、まだ時折検索エンジン経由?でいらっしゃる方がいるみたいなので追記
Titanium Desktopは今はTideSDKと変わってオープンソースプロジェクトになっています。


いいたい事を先に。
Ruby,Python,PHP,JavaScriptやってる人でデスクトップアプリ作成に興味ある人は
Appcelerator Titanium Desktop さわってみるといいと思います。OS X, Windows,Linuxマルチプラットフォームなデスクトップアプリをhtml,JavaScript,Ruby,Python等の慣れ親しんだ技術で簡単に作成、公開することができます。

予想以上にブクマされてるみたいなので、Titanium Desktopの特徴を箇条書きですが追加しておきます。

ex.<script type="text/python">....</python>,<script type="text/php">....</php>,<script type="text/ruby" src="test.rb"/>,<?php ... ?>

  • html5対応
  • WebKitを基盤技術に使っているので、はじめからchromesafariでお馴染みのWeb Inspector*1デバッグできる
  • AIRのようなセキュリティサンドボックスはない(メリット、デメリットそれぞれありますね)
  • OS X, Windows,Linuxとそれぞれのプラットフォーム向けのインストーラを作ってくれる。ex.OS Xdmg,Winはmsi
  • 作ったパッケージのインストール時にAIRのようにランタイムを必要としない(インストール時にごっそりつっこんでんだけど)
  • krollというライブラリが変数やメソッドを変換して橋渡ししてくれる。これによりjavascriptRuby,Python等を混ぜ込んで相互に使える。ex:JavaScriptRuby,PythonJavaScript
  • Drillbitというunit test frameworkが使えます。JSSpec testという感じです。


さて。

http://www.atmarkit.co.jp/fwcr/design/tool/titanium01/01.html

Appcelerator Titaniumをここのところ触ってたんですけど、タイムリーに記事になりましたね。
これは結構面白い技術ですよ。

このAppcelerator Titaniumは、簡単にいうと、HTML/CSS/JavaScriptといったWebの技術を使って、デスクトップアプリや、iPhone/Androidアプリを作成できる開発環境です。ちゃんとOSネイティブな機能をJavaScriptでよぶ事が出来ます。

記事に書いてあるMobileの方ですが、JavaScriptやhtmlで書いた同じソースコードからiPhone OS/Android向けのアプリを作成出来るというのは、iPhoneAndroidの開発をしている方々にはかなり魅力があるのではないでしょうか?

で、みんな興味があると思うiPhone/Android開発に使うTitanium Mobileには私はあんまり興味がなかったり。
興味はないですませるのはあれなので、Mobileの方の今時点での国内情報源のリンクを張っておきます。
Titanium Mobileに興味のある方はお役立て下さい。
http://code.google.com/p/titanium-mobile-doc-ja/
http://d.hatena.ne.jp/donayama/searchdiary?word=*[Titanium]


私はデスクトップアプリを作るTitanium Desktopの方に注目しています。
私の今目指している物を作るのにはちょうどいいので。
Adobe AIR等と比較してみているのですが、中々いい技術だなと思っています。
前述したようにOS X, Windows,Linuxマルチプラットフォームなデスクトップアプリをhtml,JavaScript,Ruby,Python等の技術で簡単に作成、公開することができます。




前置きはこれぐらいにして、Titanium Desktopについて実際にどんなものなのか説明していこうと思いますが、ちょっと長くなりそうなので別エントリーにします。

とりあえず書いてみた簡単なテストアプリのコードだけ張っておきますね。
なお、Windows環境で写経してRuby,Pythonのところで文字列を日本語に変更した場合、このままでは表示されませんのでご注意下さい。後で説明します。→日本語について書きました

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script type="text/javascript" src="jquery-1.3.2.js" />
  </head>
  <body>
    <div id="result"></div>
    <div id="output">Click!</div>
    <div>
      <button onclick="helloJS()">Hello Javascript!</button>
      <button onclick="helloPython()">Hello Python!</button>
      <button onclick="helloRuby()">Hello Ruby!</button>
    </div>
    <button onclick="readFile()">read file</button>
    <p />
    <div id="stuff" style="border:1px solid #CDCDCD" />
    <p />

    <script>
      $(function(){
      alert(Titanium.App.getURL());
       });

      function helloJS(){
        $("#output").html("<p>hello javascript</p>");
      }
    </script>

    <script type="text/python">
      def helloPython():
        document.getElementById('output').innerHTML = "Hello World from Titanium using Python"
    </script>

    <script type="text/ruby">
      def helloRuby
        document.getElementById('output').innerHTML = "Hello World from Titanium using Ruby"
      end
    </script>

    <script>
      function readFile() {
        var contents;
        var filename = 'test.txt';
        var userDir = Titanium.Filesystem.getUserDirectory();
        var readFile = Titanium.Filesystem.getFile(userDir, filename);
        if(! readFile.exists()) {
          alert("File does not exist: " + readFile);
          return;
        }
        var readStream = Titanium.Filesystem.getFileStream(readFile);
        readStream.open(Titanium.Filesystem.MODE_READ);
        contents = readStream.read();
        readStream.close();
        var stuff = document.getElementById("stuff");
        stuff.innerHTML = contents;
      }

    </script>
  </body>
</html>

別エントリーにて説明したいと思いますが、これだけでも大体感じはつかめるんじゃないでしょうか?JavaScript+HTMLのコードの中にPythonRubyのコードも入ってます。ネイティブな機能の呼び出しとして、ここではTitanium.FilesystemというAPIを使ってユーザーディレクトリのファイルの読み込みを行っています。

後は画面。デザイン全然してないんでちょっとそっけないですけど・・。

それにしても、JavaScriptの重要性がどんどん増しているなと感じますね。

*1:Fire FoxのFire Bugみたいなやつですね

Appcelerator Titanium DesktopでRuby,Python,PHPを使ったお手軽デスクトップアプリ開発その1

古いエントリーなのですが、まだ時折検索エンジン経由?でいらっしゃる方がいるみたいなので追記
Titanium Desktopは今はTideSDKと変わってオープンソースプロジェクトになっています。


2月22日現在のTitanium Developer0.8.4&Desktop SDK 0.8.4をダウンロードしてインストールするとSDK欄がブランクでプロジェクトを作ることができないようです
解決C:\Program Files\Titanium Developer\manifestにsdk:0.8.4と追加して、アイコンをクリックすると再セットアップされます。情報元
さらに追記:Vista等では管理者権限があるユーザーを使用していても普通に開いたらこのファイルを編集できません。編集に使うエディタを右クリックして管理者権限で起動して、そこから manifestファイルを開いて編集してください。


簡単に説明と思ったんですが、実際に作ってみるのが手っ取り早いと思うのでちょっと作ってみましょう。


まずはここからTitanium Developerをダウンロード。これがないと始まりません。
OS X,Windows,Linux(32bit,64bit)それぞれのプラットフォームにあったものをダウンロードしてインストールします。
インストール後、起動すると以下のような画面に。

アカウントを作成する必要がありますのでサインアップしましょう。

で、早速プロジェクトを作りたい所ですが、ちょっと脱線。SandBoxがあるので試してみます。
画面左上のPerspectivesの真ん中のアイコンをクリックして、SandBoxタブを選択します。

ここにコードを書いてLaunchを押すと書いたコードの動作を確認することが出来ます。
今回は左側にある Select code snipetから Javascript to Ruby to Pythonを選択してLaunchを押してみましょう。
なお、このコードはその名のとおり、JavascriptからRubyのメソッドをよび、RubyのメソッドからPythonのメソッドをよぶコードスニペットです。

<script type="text/python">
def pyFunc():
      window.alert("hi, i'm python")
</script>

<script type="text/ruby">
def rubyFunc
     pyFunc()
end
</script>

<script>
rubyFunc();
</script>

以下のようにhi, i'm pythonとalertが表示されたかと思います。


緑のNew Projectっていうのをクリックすると以下の画面に。

New Projectとなっているとおり、プロジェクトを作成します。
上から順番にいきます。

Project type: デスクトップアプリを作成しますので初期状態のままDesktopにします。iPhoneAndroidの場合はここをMobileにします。
Name: ここにアプリケーションの名前を入れます。とりあえずTestAppとしておきましたがお好みで。
App id: com.companyname.appnameと例が表示されてますね。JavaFlex,AIR等でお馴染みのドメイン反転させたようなやつです。その規則に従って入力しておきましょう。私の場合はjp.katahirado.testappとなるかと思いますが、なんとなくTitaniumのTestAppだと明示的にしておきたかったのでjp.katahirado.titanium.testappとしました。
Directory: これはプロジェクトの置き場所です。任意の場所を選択しましょう。
Company/Personal URL: そのまま会社や個人のurlです。私はhttp://katahirado.jp/にしておきました。
Titanium SDK version: 最新のSDKが選択されているかと思うので*1そのままでいいです。
JS Libraries: ここはオプションです。選ばなくても問題ないですが、今回はJQueryを選らんで下さい。SWF Objectが選択肢にあるところなんかはおっと思って貰えますかね。
Language Modules: PythonRuby,PHPを使う場合は、使いたい言語のチェックボックスにチェックを入れます。なお、Mobileではこれらの言語は使えません。とりあえず、Rubyにチェックをいれておきましょう。

準備オッケーです。Create Project押しましょう。
Directory欄で指定したディレクトリに アプリケーション名のディレクトリが生成されます。
生成されたプロジェクトディレクトリの中身はこんな感じになってます。
基本的にこのResourcesの中にhtml,css,javascript等を書いていく事になります。

Titanium Developerの画面は以下のようになっているかと思います。

ここで一つ注意ですが、このTitanium DeveloperはIDEではないので、エディタ機能はありません。最初気づかなくて悩みました・・。
自分の好きなエディタやIDEで開発しましょう。私はVimで開発してます。
あと、実はこのTitanium Developer自体もTitanium Desktopで作成されたアプリだったりします。

脱線しました。
まだ何もコード書いてないですけど、早速アプリを動かしてみましょう。
Test&Packeageのタブを選択すると、Learn,Package,Launchと並んでいますので、Launchをクリックしてください。

Launch Appをクリックします。

そうするとこのようにアプリが起動します。Welcome to Titaniumと表示されるだけですが・・

起動したTestAppを閉じて直接終了させるか、Titanium DeveloperからKill Appをクリックして終了させて下さい。

その2に続きます。

*1:インストール直後はSDKは一つのバージョンしか入っていないかと