pyconjp2017 kivyによるアプリケーション開発のすすめ
TRANSCRIPT
「Kivyによるアプリケーション開発のすすめ」
オカザキ
自己紹介
•オカザキ
•職業：プログラマー
• http://twitter.com/dario_okazaki
• Kivyの公式マニュアルの翻訳を有志でしています
(https://pyky.github.io/kivy-doc-ja/)
目次
• Kivyとは
•今日の内容
• kivyの機能について
• kivyの４つの壁
• kivyのよい点と悪い点
•まとめ
•おまけ
検証環境
• Windows10
• Python3.5
• Kivy1.10
コードについて
• GITHub:https://github.com/okajun35/kivy_pyconjp2017
• Slide:https://www.slideshare.net/secret/45D5Wuy6FWI3X5
※コードの詳しい説明は今回はしません。
コードの詳しい説明は後日webで公開予定
このスライドは配布用です。本番はGitHub上にあるKivyで作成したスライドで実施します
Kivyとは(1/2)
• PythonでGUIを作成するツール
• Python2/3対応
• マルチプラットフォーム（Win,Mac,Linux,RaspberryPi,android,ios）
• マルチタッチ対応
• Kv LanguageというUIを記述するメタ言語がある
• MITライセンス
Kivyとは(1/2)
• GitHub上（ https://github.com/kivy/kivy ）でコードが公開されている
• 2017年現在、開発は盛んにおこなわれている
kivyの知名度(1/2)
• Python3.6から公式の「グラフィックユーザインタフェース FAQ」にも紹介されている
今日の内容
「Kivyで何ができるか」の紹介
Kivyで作れるアプリケーション
公式で出しているAndroidアプリがあるので
それをインストールして試してみる。※Android端末がなくても「kivy_examples」を
インストールして、実行すれば試せます。
Kivy Showcase
• Kivy Showcas（https://play.google.com/store/apps/details?id=org.kivy.showcase）
• UI（widget）の一覧とコードが読める
Kivy Touchtracer
• Kivy Touchtracer（https://play.google.com/store/apps/details?id=org.kivy.touchtracer）
•タッチの軌跡を描画する
•マルチタッチ対応
Kivyの構造
• GraphicはOpenGL ESで描画
•入力などはSDLで制御
※Windowsはver1.10でANGLE（OpenGl ESのDirectX実装）が選択できるようになった
Kivyのファイル構造
① Pythonファイル（機能部分）とKVファイル（UI）の２つ
② Pythonファイルのみ1. KV言語が内部で記載されている
2. Pythonのみで構成
Kivyの機能について
ここで説明するのはごく一部の機能です
Widget
画面を構成するパーツ
• Label
• Image
• Button
etc…
Layout
画面のレイアウト
• BoxLayout
• GridLayout
• Float Layout
etc…
レイアウトの基本
• 「Layout」と「Widget」を組み合わせて作る
• 位置とサイズの指定は２パターンある• 絶対的な指標で指定：「pos」、[size」
• 画面サイズからの相対的な比率で指定：「pos_hint」「size_hint」
• 優先度は「hint」で決まるサイズが優先的に決まる
• 「Layout」の基本は「BoxLayout」
• 「BoxLayout」を組み合わせると大体のレイアウトはできる
• 「Label」などの文字のサイズは動的に変更する仕組みがない・・・
文字、画像の表示
文字、画像の表示(size_hint)
Event
動作に紐づく命令を実行する
• On_Press
• On_Relese
etc…
Property
widgetの値を参照する
• NumericProperty
• ringProperty
• ListProperty
etc…
ボタンの使用
ボタンとレイアウトの使用例(1/2)
Kivy Language
• KV Languageともいう
• UI用のメタ言語
• Widget（UI）を簡単に記述できる
• CSSとBootstrap（グリッド）の概念にちかい
※KVを使用しなくてもUIは作れるが使用したほうがコードが簡潔にかける。
Animation
•動きを付ける
• start
• stop
使用例：メニューの表示などに使う
Animationの使用
Clock
•繰り返しや定期的な動作を行う
• schedule_interval
• schedule_once
etc…
繰り返し（時計）
繰り返し（ストップウォッチ）
実例(時計2)
そのほかの機能1
•スライド
• Carousel:ヘッダー，フッターは固定
• ScreenManager：画面全体が動く※このスライドはScreenManagerによって作成されています
そのほかの機能2
•ファイル選択
•ドラッグ＆ドロップ
etc…
Kivyにはこの他にもたくさんの機能があります
ファイル選択
ドラッグ＆ドロップ
ドラッグ＆ドロップ
Garden
拡張機能。個別にインストールする。
•地図表示
•グラフ描画
etc…
地図表示
• mapview(https://github.com/kivy-garden/garden.mapview)• OpenStreetMapを使用。
• マーカーを表示
mapview
グラフ描画
• Kivyの機能のみで実装する• Graph（https://github.com/kivy-garden/garden.graph）
※スライドに組み込むには改造する必要あり。
https://github.com/kivy-garden/garden.graph/issues/7
• matplotlbを使用する• matplotlib（https://github.com/kivy-garden/garden.matplotlib）
• 動作が重い
• パッケージ化の際に難易度がます
グラフ(garden.glah)
グラフ（matplotlib)
デスクトップアプリの方法
• PyInstaller(http://www.pyinstaller.org/)を使用
• 使用方法はKivyの公式マニュアル(翻訳済み)を参考※
(https://pyky.github.io/kivy-doc-ja/guide/packaging.html)
• オプションでいろいろできる
• 依存関係の設定などコツがいる
• 起動が重い
※MacOSのみ翻訳が公式より古いので、MacOSの場合は公式を見てください
Androidアプリの作成
• Kivy Launcher• (GooglePlayから入手)• Pythonコードによるプレビューツール• バックグラウンドでも動作可能• 実行時のログ出力対応• Pyhon2系のみ対応• Kivy1.9.1対応で最新版には対応していない
• Buildozer（UbuntuによるVM）でのapk作成
• Python2/3系対応
• Plyer： Pythonラッパーのプラットフォーム非依存API群
• Pyjnius： PythonからJava / Android APIへ動的アクセスをする
androidアプリの作成2
androidの開発手順は以下が理想
① PCで開発② android端末にコードを転送③ Kivy Launcherで動作確認④ Buildozerでapk作成⑤ apkでの動作確認⑥ PlayStoreにリリース
iosアプリの作成
• Python2系のみ対応※
• toolchainを使用してXcode用のプロジェクトを作成する
• Pyobjus：動的にiosのAPIにアクセス※Python3系の対応は有志によって開発中
Python 3 support #184（https://github.com/kivy/kivy-ios/issues/184）
kivy Lancherでの実演
•国会図書館の検索APIを使用して書籍検索する
• UrlRequest()を利用して非同期でリクエストを送受信する
クロスプラットフォームについて
•どのデバイスまで視野にいれるかの検討が必要
クロスプラットフォームの一覧
※2019年をめどにすべてのデバイスでPython3系対応
およびPython2系の対応廃止予定
（https://github.com/kivy/kivy/wiki/Kivy-Python-2-Support-Timeline）
Kivyについて
GUIツールとしての機能は一通りそろっている
Kivyの4つの壁
①情報が少ない
②インストール
③KV Language
④日本語入力(IME)
①情報が少ない(1/4)
•日本語の情報は特に少ない• 存在していても日本語の情報は古いものがある
• 環境構築系は参考にしない方がいい
• コミュニティがないのでわからなくても聞く人がいない
①情報が少ない(2/4)
•公式サイト（英語） (https://kivy.org/docs/)
•公式の翻訳(https://pyky.github.io/kivy-doc-ja/)
※最初のうちは両方開いて比較するとよい
※翻訳の協力者募集中
①情報が少ない(4/4)
• StackOverflow(https://stackoverflow.com/)• Google翻訳使えばなんとなくわかる
書籍（洋書だが国内でもAmazonで購入可能）
• Creating Apps in Kivy (O‘Reilly)
• Kivy :Interactive Applications and Games in Python -Second Edition
• Kivy Blueprints
※コードはwebで無料で見れる
②インストール
• WindowsOSだとOpenGLとSDLなど依存関係のせいでpipでインストールできない場合がある
• Python2.7/3.4について• 公式どおりで大丈夫
• 3.5以上をインストール• VisualStudio2015をインストール。
• glutを配置しないとインストールできない• インストールがうまくいかない場合
• 非公式パッケージのインストールをお勧めします
(http://www.lfd.uci.edu/~gohlke/pythonlibs/#kivy)
• MacOSでもPython3.6だとうまく動作しない場合がある
③KV Language
kivy独自の概念なので理解するのに時間がかかる
• kviewerを使うとリアルタイムに変更が確認できる※Python3系だとコードを書きなおす必要があるのと反映されるのはkvファイル側の記述であるところが注意
Pythonファイル側の設定は反映されない
• Inspector（）• 「 -m inspector」 を実行時の引数につける
• widegetを選択してPropertyの値、親子関係を確認できる
• Python側でwidget内部にブレイクポイントをはってwidgetの構成を調べる
• Atomやsublimeなどだと3rdPartyによる入力補完が可能
③KV Language(kviewer)
「python -m kivy.tools.kviewer <kvファイル>」で実行
• Python3系だとKivy本体のソースを修正しないとエラーになって起動しない
（http://qiita.com/gotta_dive_into_python/items/c32cdcb58c66f0a1b840）
③KV Language(Inspector)
「python ./main.py -m inspector」で実行
•「Ctr+e」でメニューがでる
④日本語入力（IME）2
• windows/mac/iosだと日本語入力中のIMEが表示されない
• SDL側の入力イベントをキャッチしていないのが原因(http://qiita.com/dario_okazaki/items/8c6953166b336e83e417)
• @sou_anさんがプルリクしたが採択されていない。
「Add textedit event for text editing by IME #5109」
※個人で直すとcythonによるビルドが必要
SDL2のライブラリーが必要なのでビルド環境を作るのは難しい
④日本語入力（IME）2
Kivyのここがダメ
• 位置やサイズの指定がわかりにくい(pos_hint,size_hint)
• 公式マニュアルで大事なことがちゃんと書いていない・・・
• わかっている人がわかっている人に向けて書いている
• チュートリアルがあんまりよくない
• アニメーションとマルチタッチのチュートリアルであってKvLanguageのチュートリアルではない
• Kivyの正しい書き方がよくわからない
• 起動が重い• OpenGL ESで描画しているので起動時間など非力なPCだと時間ががかる
Kivyのいいところ
• Pythonで書ける• 簡潔に書ける
• Kivy Languleage• 機能とUIが分離できるので見やすい
まとめ
•簡単なアプリならすぐに作れる
•開発は今も盛んにおこなわれている
• Kivy Languageを使うことでUIと機能が簡潔かける
•日本語入力に問題がある• 原因と対策はある程度見えているのでいずれできる
•モバイル開発ならPython2系
おまけ1
• Kvファイルの分割について
以下のやり方でKvファイルを読みだすことでき、
Kvファイルを分割できます
• Kvファイルないで「#:include <KVファイル>」
• Pythonファイル内で「load_file(<Kvファイル>)
おまけ2
• Kivy MD
• Google material designに準拠するwidgetのコレクション
(https://gitlab.com/kivymd/KivyMD)
• モバイルでのレイアウトに向いている
• 起動がKivy単体より重くなる