Pyjamas事始め

Python JavaScript

きっかけ

WebアプリのクライアントサイドのIFを作るのに、Javascriptで試行錯誤しながら書くよりも、Pythonでできたらうれしいのではないかと思い、google検索したら最初にPyjamasを見つけた。PythonのコードをJavascriptコードに変換してくれる、コンパイラ機能を持つものらしい。Pythonで書いて、作業効率が上がるのであればうれしいし、Javascriptのコードに変換した後で、そのJavascriptコード自体を修正することもできる（はず）なので、いろいろ便利ではないかと思う。それで、ちょっと試してみようと。

Pyjamasとは

オープンソースのフレームワーク。以下のウェブページから、ソースやサンプルコードをダウンロードできる。最新版でもまだバージョン0.7。
Python Javascript Compiler, Desktop Widget Set RIA Web Framework
どんなもので構成されているフレームワークかというと、PythonコードをJavascriptコードに変換するコンパイラ、Ajaxフレームワーク、そしてWidget Set APIということらしい。これだけでも完璧です。

インストール

コンパイル方法は、ダウンロードしたtarボールを展開して、トップレベルディレクトリで

% python bootstrap.py

とコマンド入力すればよい。これで同じくトップレベルディレクトリにあるbin/ディレクトリに実行モジュールがいくつか作成される。

サンプルコード

何はともあれ試しに60個ぐらいあるサンプルコードをすべて動かしてみる。動かすと言っても、Pythonコードをコンパイルして、作成されたhtmlファイルをブラウザで開いただけ。大体動作した。いくつかは動かなかったり、ファイルが足りなかったりしたが、現時点では原因を深く考えない。
自分でもサンプルコードを参考にして、試しに単純なコードを書く。ボタン、リストボックス等を画面に配置してみる。ボタンを押すとダイアログが開くようにした。以下は、メインのコード（Hello.py)。

# Hello.py
from pyjamas.ui.Button import Button
from pyjamas.ui.RootPanel import RootPanel
from pyjamas.ui.HTML import HTML
from pyjamas.ui.HorizontalPanel import HorizontalPanel
from pyjamas.ui.ListBox import ListBox
from pyjamas.ui.FileUpload import FileUpload
from pyjamas.ui.TextBox import TextBox
from pyjamas import Window
from pyjamas.ui.CheckBox import CheckBox

class P2JExample:
    def onModuleLoad(self):
        b = Button("Click me", self)
        hw = HTML("Pyjamas <b>test</b>")
        up = FileUpload()
        lb = ListBox()
        lb.addItem("foo", "fooValue")
        lb.addItem("bar", "barValue")
        lb.addItem("baz", "bazValue")

        p = HorizontalPanel()
        p.add(b)
        p.add(hw)
        p.add(up)
        p.add(lb)

        p.setStyleName("panel")
        hw.setStyleName("helloworldwords")

        RootPanel().add(p)

    def onClick(self, sender):
        Window.alert("Hello, Pyjamas!")

if __name__ == '__main__':
    app = P2JExample()
    app.onModuleLoad()

このファイル（Hello.py)とは別に、同じディレクトリ内に public/というディレクトリを作りその中に、雛型となるhtmlファイル(Hello.html)とスタイルシート(Hello.css)を置いておく。
以下、Hello.htmlファイル。

<html>
    <head>
      <meta name="pygwt:module" content="Hello">
      <link rel='stylesheet' href='Hello.css'>
      <title>Helloooo</title>
    </head>
    <body bgcolor="white">
      <script language="javascript" src="bootstrap.js"></script>
    </body>
</html>

以下、Hello.cssファイル。

.panel {
  margin: 10px;
  padding: 10px;
  background-color: #99ffaa;
  width: 20%;
  height: 200px;
}
.helloworldwords {
  font-size: 20px;
  border: 1px solid #ffaaff;
  margin: 10px;
  padding: 10px;
}

で、コマンドラインで

% ../../bin/pyjsbuild Hello.py

と入力してコンパイルする（pyjsbuildのパスは適当に変更する）。問題なければ、output/ディレクトリが作成されているので、その中のHello.htmlファイルをブラウザで開く。

こんな感じ。