PyconJP2017 Kivyによるアプリケーション開発のすすめ
6 likes10,586 views
PyconJP2017でのトーク「Kivyによるアプリケーション開発のすすめ」（https://pycon.jp/2017/ja/schedule/presentation/20/）のスライドです。 ※本番のスライドはKivyで作成しています。これはあくまでも配布用のスライドです
PyconJP2017 Kivyによるアプリケーション開発のすすめ
- 2. 自己紹介 • オカザキ • 職業：プログラマー • http://twitter.com/dario_okazaki • Kivyの公式マニュアルの翻訳を 有志でしています (https://pyky.github.io/kivy-doc-ja/)
- 3. 目次 • Kivyとは • 今日の内容 • kivyの機能について • kivyの４つの壁 • kivyのよい点と悪い点 • まとめ • おまけ
- 4. 検証環境 • Windows10 • Python3.5 • Kivy1.10
- 6. Kivyとは(1/2) • PythonでGUIを作成するツール • Python2/3対応 • マルチプラットフォーム（Win,Mac,Linux,RaspberryPi,android,ios） • マルチタッチ対応 • Kv LanguageというUIを記述するメタ言語がある • MITライセンス
- 7. Kivyとは(1/2) • GitHub上（ https://github.com/kivy/kivy ）でコード が公開されている • 2017年現在、開発は盛んにおこなわれている
- 9. kivyの知名度(2/2) • 「AweSome Python」 ではGUIの部門で1位
- 12. Kivy Showcase • Kivy Showcas （https://play.google.com/store/apps/details?id=org.kivy.showcase） • UI（widget）の一覧とコードが読める
- 13. Kivy Touchtracer • Kivy Touchtracer （https://play.google.com/store/apps/details?id=org.kivy.touchtracer） • タッチの軌跡を描画する • マルチタッチ対応
- 14. Kivyの構造 • GraphicはOpenGL ESで描画 • 入力などはSDLで制御 ※Windowsはver1.10でANGLE（OpenGl ESの DirectX実装）が選択できるようになった
- 15. Kivyのファイル構造 ① Pythonファイル（機能部分）とKVファイル （UI）の２つ ② Pythonファイルのみ 1. KV言語が内部で記載されている 2. Pythonのみで構成
- 17. Widget 画面を構成するパーツ • Label • Image • Button etc…
- 18. Layout 画面のレイアウト • BoxLayout • GridLayout • Float Layout etc…
- 19. レイアウトの基本 • 「Layout」と「Widget」を組み合わせて作る • 位置とサイズの指定は２パターンある • 絶対的な指標で指定： 「pos」、[size」 • 画面サイズからの相対的な比率で指定： 「pos_hint」「size_hint」 • 優先度は「hint」で決まるサイズが優先的に決まる • 「Layout」の基本は「BoxLayout」 • 「BoxLayout」を組み合わせると大体のレイアウトはできる • 「Label」などの文字のサイズは動的に変更する仕組みがない・・・
- 20. 文字、画像の表示
- 23. Property widgetの値を参照する • NumericProperty • ringProperty • ListProperty etc…
- 24. ボタンの使用
- 27. Kivy Language • KV Languageともいう • UI用のメタ言語 • Widget（UI）を簡単に記述できる • CSSとBootstrap（グリッド）の概念にちかい ※KVを使用しなくてもUIは作れるが使用したほうがコードが簡潔にかける。
- 28. Animation • 動きを付ける • start • stop 使用例：メニューの表示などに使う
- 29. Animationの使用
- 30. Clock • 繰り返しや定期的な動作を行う • schedule_interval • schedule_once etc…
- 31. 繰り返し（時計）
- 32. 繰り返し（ストップウォッチ）
- 33. 実例(時計2)
- 34. そのほかの機能1 • スライド • Carousel:ヘッダー，フッターは固定 • ScreenManager：画面全体が動く ※このスライドはScreenManagerによって作成されています
- 36. ファイル選択
- 37. ドラッグ＆ドロップ
- 38. ドラッグ＆ドロップ
- 40. 地図表示 • mapview(https://github.com/kivy-garden/garden.mapview) • OpenStreetMapを使用。 • マーカーを表示
- 41. mapview
- 42. グラフ描画 • 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） • 動作が重い • パッケージ化の際に難易度がます
- 43. グラフ(garden.glah)
- 44. グラフ（matplotlib)
- 45. デスクトップアプリの方法 • PyInstaller(http://www.pyinstaller.org/)を使用 • 使用方法はKivyの公式マニュアル(翻訳済み)を参考※ (https://pyky.github.io/kivy-doc-ja/guide/packaging.html) • オプションでいろいろできる • 依存関係の設定などコツがいる • 起動が重い ※MacOSのみ翻訳が公式より古いので、MacOSの場合は 公式を見てください
- 46. Androidアプリの作成 • Kivy Launcher • (GooglePlayから入手) • Pythonコードによるプレビューツール • バックグラウンドでも動作可能 • 実行時のログ出力対応 • Pyhon2系のみ対応 • Kivy1.9.1対応で最新版には対応していない • Buildozer（UbuntuによるVM）でのapk作成 • Python2/3系対応 • Plyer： Pythonラッパーのプラットフォーム非依存API群 • Pyjnius： PythonからJava / Android APIへ動的アクセスを する
- 47. androidアプリの作成2 androidの開発手順は以下が理想 ① PCで開発 ② android端末にコードを転送 ③ Kivy Launcherで動作確認 ④ Buildozerでapk作成 ⑤ apkでの動作確認 ⑥ PlayStoreにリリース
- 48. iosアプリの作成 • Python2系のみ対応※ • toolchainを使用してXcode用のプロジェクトを 作成する • Pyobjus：動的にiosのAPIにアクセス ※Python3系の対応は有志によって開発中 Python 3 support #184（https://github.com/kivy/kivy-ios/issues/184）
- 49. kivy Lancherでの実演 • 国会図書館の検索APIを使用して書籍検索する • UrlRequest()を利用して非同期でリクエストを 送受信する
- 54. ①情報が少ない(1/4) • 日本語の情報は特に少ない • 存在していても日本語の情報は古いものがある • 環境構築系は参考にしない方がいい • コミュニティがないのでわからなくても聞く 人がいない
- 55. ①情報が少ない(2/4) • 公式サイト（英語） (https://kivy.org/docs/) • 公式の翻訳 (https://pyky.github.io/kivy-doc-ja/) ※最初のうちは両方開いて比較するとよい ※翻訳の協力者募集中
- 56. ①情報が少ない(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で無料で見れる
- 57. ②インストール • WindowsOSだとOpenGLとSDLなど依存関係のせい でpipでインストールできない場合がある • Python2.7/3.4について • 公式どおりで大丈夫 • 3.5以上をインストール • VisualStudio2015をインストール。 • glutを配置しないとインストールできない • インストールがうまくいかない場合 • 非公式パッケージのインストールをお勧めします (http://www.lfd.uci.edu/~gohlke/pythonlibs/#kivy) • MacOSでもPython3.6だとうまく動作しない場合が ある
- 58. ③KV Language kivy独自の概念なので理解するのに時間がかかる • kviewerを使うとリアルタイムに変更が確認できる ※Python3系だとコードを書きなおす必要があるのと反映されるのはkvファイル側の記述であるところが 注意 Pythonファイル側の設定は反映されない • Inspector（） • 「 -m inspector」 を実行時の引数につける • widegetを選択してPropertyの値、親子関係を確認できる • Python側でwidget内部にブレイクポイントをはって widgetの構成を調べる • Atomやsublimeなどだと3rdPartyによる入力補完が可能
- 59. ③KV Language(kviewer) 「python -m kivy.tools.kviewer <kvファイル>」で実行 • Python3系だとKivy本体のソースを修正しないとエ ラーになって起動しない （http://qiita.com/gotta_dive_into_python/items/c32cd cb58c66f0a1b840）
- 60. ③KV Language(Inspector) 「python ./main.py -m inspector」で実行 • 「Ctr+e」でメニューがでる
- 61. ④日本語入力（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のライブラリーが必要なのでビルド環境を作るのは難しい
- 62. ④日本語入力（IME）2
- 63. Kivyのここがダメ • 位置やサイズの指定がわかりにくい(pos_hint,size_hint) • 公式マニュアルで大事なことがちゃんと書いていない・・・ • わかっている人がわかっている人に向けて書いている • チュートリアルがあんまりよくない • アニメーションとマルチタッチのチュートリアルであってKv Languageのチュートリアルではない • Kivyの正しい書き方がよくわからない • 起動が重い • OpenGL ESで描画しているので起動時間など非力なPCだと時間ががかる
- 64. Kivyのいいところ • Pythonで書ける • 簡潔に書ける • Kivy Languleage • 機能とUIが分離できるので見やすい
- 65. まとめ • 簡単なアプリならすぐに作れる • 開発は今も盛んにおこなわれている • Kivy Languageを使うことでUIと機能が簡潔かける • 日本語入力に問題がある • 原因と対策はある程度見えているのでいずれできる • モバイル開発ならPython2系
- 66. おまけ1 • Kvファイルの分割について 以下のやり方でKvファイルを読みだすことでき、 Kvファイルを分割できます • Kvファイルないで「#:include <KVファイル>」 • Pythonファイル内で「load_file(<Kvファイル>)
- 67. おまけ2 • Kivy MD • Google material designに準拠するwidgetのコレクション (https://gitlab.com/kivymd/KivyMD) • モバイルでのレイアウトに向いている • 起動がKivy単体より重くなる