Top Banner
Kivy によるアプリケーショ ン開発のすすめ」 オカザキ
67

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

Jan 21, 2018

Download

Technology

Jun Okazaki
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: PyconJP2017 Kivyによるアプリケーション開発のすすめ

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

オカザキ

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

自己紹介

•オカザキ

•職業:プログラマー

• http://twitter.com/dario_okazaki

• Kivyの公式マニュアルの翻訳を有志でしています

(https://pyky.github.io/kivy-doc-ja/)

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

目次

• Kivyとは

•今日の内容

• kivyの機能について

• kivyの4つの壁

• kivyのよい点と悪い点

•まとめ

•おまけ

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

検証環境

• Windows10

• Python3.5

• Kivy1.10

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

コードについて

• GITHub:https://github.com/okajun35/kivy_pyconjp2017

• Slide:https://www.slideshare.net/secret/45D5Wuy6FWI3X5

※コードの詳しい説明は今回はしません。

コードの詳しい説明は後日webで公開予定

このスライドは配布用です。本番はGitHub上にあるKivyで作成したスライドで実施します

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

Kivyとは(1/2)

• PythonでGUIを作成するツール

• Python2/3対応

• マルチプラットフォーム(Win,Mac,Linux,RaspberryPi,android,ios)

• マルチタッチ対応

• Kv LanguageというUIを記述するメタ言語がある

• MITライセンス

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

Kivyとは(1/2)

• GitHub上( https://github.com/kivy/kivy )でコードが公開されている

• 2017年現在、開発は盛んにおこなわれている

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

kivyの知名度(1/2)

• Python3.6から公式の「グラフィックユーザインタフェース FAQ」にも紹介されている

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

kivyの知名度(2/2)

•「AweSome Python」ではGUIの部門で1位

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

今日の内容

「Kivyで何ができるか」の紹介

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

Kivyで作れるアプリケーション

公式で出しているAndroidアプリがあるので

それをインストールして試してみる。※Android端末がなくても「kivy_examples」を

インストールして、実行すれば試せます。

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

Kivy Showcase

• Kivy Showcas(https://play.google.com/store/apps/details?id=org.kivy.showcase)

• UI(widget)の一覧とコードが読める

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

Kivy Touchtracer

• Kivy Touchtracer(https://play.google.com/store/apps/details?id=org.kivy.touchtracer)

•タッチの軌跡を描画する

•マルチタッチ対応

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

Kivyの構造

• GraphicはOpenGL ESで描画

•入力などはSDLで制御

※Windowsはver1.10でANGLE(OpenGl ESのDirectX実装)が選択できるようになった

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

Kivyのファイル構造

① Pythonファイル(機能部分)とKVファイル(UI)の2つ

② Pythonファイルのみ1. KV言語が内部で記載されている

2. Pythonのみで構成

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

Kivyの機能について

ここで説明するのはごく一部の機能です

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

Widget

画面を構成するパーツ

• Label

• Image

• Button

etc…

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

Layout

画面のレイアウト

• BoxLayout

• GridLayout

• Float Layout

etc…

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

レイアウトの基本

• 「Layout」と「Widget」を組み合わせて作る

• 位置とサイズの指定は2パターンある• 絶対的な指標で指定:「pos」、[size」

• 画面サイズからの相対的な比率で指定:「pos_hint」「size_hint」

• 優先度は「hint」で決まるサイズが優先的に決まる

• 「Layout」の基本は「BoxLayout」

• 「BoxLayout」を組み合わせると大体のレイアウトはできる

• 「Label」などの文字のサイズは動的に変更する仕組みがない・・・

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

文字、画像の表示

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

文字、画像の表示(size_hint)

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

Event

動作に紐づく命令を実行する

• On_Press

• On_Relese

etc…

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

Property

widgetの値を参照する

• NumericProperty

• ringProperty

• ListProperty

etc…

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

ボタンの使用

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

ボタンとレイアウトの使用例(1/2)

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

ボタンとレイアウトの使用例(2/2)

https://github.com/kiok46/Kivy-Calender

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

Kivy Language

• KV Languageともいう

• UI用のメタ言語

• Widget(UI)を簡単に記述できる

• CSSとBootstrap(グリッド)の概念にちかい

※KVを使用しなくてもUIは作れるが使用したほうがコードが簡潔にかける。

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

Animation

•動きを付ける

• start

• stop

使用例:メニューの表示などに使う

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

Animationの使用

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

Clock

•繰り返しや定期的な動作を行う

• schedule_interval

• schedule_once

etc…

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

繰り返し(時計)

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

繰り返し(ストップウォッチ)

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

実例(時計2)

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

そのほかの機能1

•スライド

• Carousel:ヘッダー,フッターは固定

• ScreenManager:画面全体が動く※このスライドはScreenManagerによって作成されています

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

そのほかの機能2

•ファイル選択

•ドラッグ&ドロップ

etc…

Kivyにはこの他にもたくさんの機能があります

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

ファイル選択

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

ドラッグ&ドロップ

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

ドラッグ&ドロップ

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

Garden

拡張機能。個別にインストールする。

•地図表示

•グラフ描画

etc…

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

地図表示

• mapview(https://github.com/kivy-garden/garden.mapview)• OpenStreetMapを使用。

• マーカーを表示

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

mapview

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

グラフ描画

• 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)

• 動作が重い

• パッケージ化の際に難易度がます

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

グラフ(garden.glah)

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

グラフ(matplotlib)

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

デスクトップアプリの方法

• PyInstaller(http://www.pyinstaller.org/)を使用

• 使用方法はKivyの公式マニュアル(翻訳済み)を参考※

(https://pyky.github.io/kivy-doc-ja/guide/packaging.html)

• オプションでいろいろできる

• 依存関係の設定などコツがいる

• 起動が重い

※MacOSのみ翻訳が公式より古いので、MacOSの場合は公式を見てください

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

Androidアプリの作成

• Kivy Launcher• (GooglePlayから入手)• Pythonコードによるプレビューツール• バックグラウンドでも動作可能• 実行時のログ出力対応• Pyhon2系のみ対応• Kivy1.9.1対応で最新版には対応していない

• Buildozer(UbuntuによるVM)でのapk作成

• Python2/3系対応

• Plyer: Pythonラッパーのプラットフォーム非依存API群

• Pyjnius: PythonからJava / Android APIへ動的アクセスをする

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

androidアプリの作成2

androidの開発手順は以下が理想

① PCで開発② android端末にコードを転送③ Kivy Launcherで動作確認④ Buildozerでapk作成⑤ apkでの動作確認⑥ PlayStoreにリリース

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

iosアプリの作成

• Python2系のみ対応※

• toolchainを使用してXcode用のプロジェクトを作成する

• Pyobjus:動的にiosのAPIにアクセス※Python3系の対応は有志によって開発中

Python 3 support #184(https://github.com/kivy/kivy-ios/issues/184)

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

kivy Lancherでの実演

•国会図書館の検索APIを使用して書籍検索する

• UrlRequest()を利用して非同期でリクエストを送受信する

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

クロスプラットフォームについて

•どのデバイスまで視野にいれるかの検討が必要

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

クロスプラットフォームの一覧

※2019年をめどにすべてのデバイスでPython3系対応

およびPython2系の対応廃止予定

(https://github.com/kivy/kivy/wiki/Kivy-Python-2-Support-Timeline)

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

Kivyについて

GUIツールとしての機能は一通りそろっている

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

Kivyの4つの壁

①情報が少ない

②インストール

③KV Language

④日本語入力(IME)

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

①情報が少ない(1/4)

•日本語の情報は特に少ない• 存在していても日本語の情報は古いものがある

• 環境構築系は参考にしない方がいい

• コミュニティがないのでわからなくても聞く人がいない

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

①情報が少ない(2/4)

•公式サイト(英語) (https://kivy.org/docs/)

•公式の翻訳(https://pyky.github.io/kivy-doc-ja/)

※最初のうちは両方開いて比較するとよい

※翻訳の協力者募集中

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

①情報が少ない(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で無料で見れる

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

②インストール

• WindowsOSだとOpenGLとSDLなど依存関係のせいでpipでインストールできない場合がある

• Python2.7/3.4について• 公式どおりで大丈夫

• 3.5以上をインストール• VisualStudio2015をインストール。

• glutを配置しないとインストールできない• インストールがうまくいかない場合

• 非公式パッケージのインストールをお勧めします

(http://www.lfd.uci.edu/~gohlke/pythonlibs/#kivy)

• MacOSでもPython3.6だとうまく動作しない場合がある

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

③KV Language

kivy独自の概念なので理解するのに時間がかかる

• kviewerを使うとリアルタイムに変更が確認できる※Python3系だとコードを書きなおす必要があるのと反映されるのはkvファイル側の記述であるところが注意

Pythonファイル側の設定は反映されない

• Inspector()• 「 -m inspector」 を実行時の引数につける

• widegetを選択してPropertyの値、親子関係を確認できる

• Python側でwidget内部にブレイクポイントをはってwidgetの構成を調べる

• Atomやsublimeなどだと3rdPartyによる入力補完が可能

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

③KV Language(kviewer)

「python -m kivy.tools.kviewer <kvファイル>」で実行

• Python3系だとKivy本体のソースを修正しないとエラーになって起動しない

(http://qiita.com/gotta_dive_into_python/items/c32cdcb58c66f0a1b840)

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

③KV Language(Inspector)

「python ./main.py -m inspector」で実行

•「Ctr+e」でメニューがでる

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

④日本語入力(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のライブラリーが必要なのでビルド環境を作るのは難しい

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

④日本語入力(IME)2

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

Kivyのここがダメ

• 位置やサイズの指定がわかりにくい(pos_hint,size_hint)

• 公式マニュアルで大事なことがちゃんと書いていない・・・

• わかっている人がわかっている人に向けて書いている

• チュートリアルがあんまりよくない

• アニメーションとマルチタッチのチュートリアルであってKvLanguageのチュートリアルではない

• Kivyの正しい書き方がよくわからない

• 起動が重い• OpenGL ESで描画しているので起動時間など非力なPCだと時間ががかる

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

Kivyのいいところ

• Pythonで書ける• 簡潔に書ける

• Kivy Languleage• 機能とUIが分離できるので見やすい

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

まとめ

•簡単なアプリならすぐに作れる

•開発は今も盛んにおこなわれている

• Kivy Languageを使うことでUIと機能が簡潔かける

•日本語入力に問題がある• 原因と対策はある程度見えているのでいずれできる

•モバイル開発ならPython2系

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

おまけ1

• Kvファイルの分割について

以下のやり方でKvファイルを読みだすことでき、

Kvファイルを分割できます

• Kvファイルないで「#:include <KVファイル>」

• Pythonファイル内で「load_file(<Kvファイル>)

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

おまけ2

• Kivy MD

• Google material designに準拠するwidgetのコレクション

(https://gitlab.com/kivymd/KivyMD)

• モバイルでのレイアウトに向いている

• 起動がKivy単体より重くなる