ようやく仕事が一段落ついたのですが、その反動で週末寝込み気味です。また更新の間が空いてしまいました。

ここ最近、Kivyをちょこちょこ触っているのですが、iPhone、Androidを含むマルチプラットフォームに対応していて、速度もそれほど悪くない感じでなかなか好感触です。

ということで、今日は久々にProcessingから離れて、Kivyを使って簡単なお絵描きをしてみたいと思います。Python書くの久しぶり。

Kivyとは

KivyはPythonでマルチタッチに対応したアプリ開発を行うためのオープンソースのライブラリです。動作環境はAndroid、iOS、Linux、MacOS X、Windowsなどをサポートしており、ワンソースでマルチプラットフォームに対応するアプリを開発することができます。

MITライセンスで配布されており、商用でも利用可能です。

実際にKivyで開発されたアプリの例がこちらです。

なかなかいい感じですね。

Kivyのインストール

Kivyのインストールは公式サイトのダウンロードページから、対応するプラットフォームのバイナリをダウンロードして行います。プラットフォーム毎の手順は公式サイトのインストールガイドをご参照ください。

尚、Macの場合、アプリケーションフォルダへKivy.appをコピーした後に、インストールダイアログのmake-symlinksをダブルクリックすることで、ターミナルからkivyコマンドが使えるようになります。

f:id:tkitao:20140907230830p:plain

グラフィックスの描画方法

Kivyアプリケーションの作成は、ルートとしてWidget インスタンスを1つ持つAppクラスを定義することで行います。その際に、ルートWidgetのcanvasプロパティに描画命令を登録することで、好きなグラフィックスを描画することができます。

Canvasへの描画命令の登録は、addメソッドやwithコマンドで行います。

self.canvas.add(Color(1, 0, 0))
self.canvas.add(Rectangle(pos=(10, 10), size=(500, 500))

with self.canvas
    Color(1, 0, 0)
    Rectangle(pos=(10, 10), size=(500, 500)

KivyではHTMLのCanvasと異なり、命令実行時に描画が行われるのでなく、実行時に描画命令が追加登録され、Widgetの描画が必要になる度に登録された一連の命令群が実行されます。そのため、命令登録後も各描画命令の表示位置等のプロパティを変更することで、描画内容を変更する（＝アニメーションさせる）ことができます。

サンプルコード

実際のサンプルコードと実行結果は以下になります。

このサンプルではwithコマンドを使って描画命令を登録しています。

from kivy.config import Config
Config.set('graphics', 'width', '400')
Config.set('graphics', 'height', '300')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Color
from kivy.graphics import Rectangle
from kivy.graphics import Line
from kivy.graphics import Ellipse


class MyApp(App):
    title = 'Simple Graphics'

    def build(self):
        widget = Widget()

        with widget.canvas:
            Color(1, 0, 0)
            Rectangle(pos=(50, 80), size=(120, 120))

            Color(1, 1, 0, .5)
            Line(points=[100, 50, 350, 250, 350, 50], width=10, close='True')

            Color(0, .5, 1)
            Ellipse(pos=(150, 150), size=(120, 120))

        return widget


if __name__ == '__main__':
    MyApp().run()