Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PyconJP2017 Kivyによるアプリケーション開発のすすめ

5,206 views

Published on

PyconJP2017でのトーク「Kivyによるアプリケーション開発のすすめ」(https://pycon.jp/2017/ja/schedule/presentation/20/)のスライドです。
※本番のスライドはKivyで作成しています。これはあくまでも配布用のスライドです

Published in: Technology
  • Be the first to comment

PyconJP2017 Kivyによるアプリケーション開発のすすめ

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

×