Python×Kivyでスマホ対応アプリ開発入門(Android/iOS対応)

# 任意の作業フォルダへ
PS> mkdir kivy-hello; cd kivy-hello

# 仮想環境の作成
PS> py -3.11 -m venv .venv

# 有効化
PS> .\.venv\Scripts\Activate.ps1

# pipを更新
(.venv) PS> python -m pip install -U pip setuptools wheel

# 任意の作業フォルダへ
$ mkdir kivy-hello && cd kivy-hello

# 仮想環境の作成
$ python3 -m venv .venv

# 有効化
$ source .venv/bin/activate

# pipを更新
(.venv) $ python -m pip install -U pip setuptools wheel

(.venv) $ pip install "kivy[base]"  # まずは最小
# 例: 音声や各種機能まで含めたい場合は
# (.venv) $ pip install "kivy[full]"

# main.py
# Kivyの最小例: ボタンを押すとコンソールに"Hello, Kivy!"を表示します。
from kivy.app import App
from kivy.uix.button import Button

class HelloApp(App):
    def build(self):
        # Buttonウィジェットをそのままルートとして返す
        btn = Button(text="Hello Kivy")
        # on_pressイベントにPython関数をバインド
        btn.bind(on_press=self.say_hello)
        return btn

    def say_hello(self, instance):
        print("Hello, Kivy!")  # コンソール出力

if __name__ == "__main__":
    HelloApp().run()

(.venv) $ python main.py

# main.py
# AppとカスタムWidgetを定義し、構造を分かりやすくします。
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class MainView(BoxLayout):
    pass  # レイアウトと見た目はkvに任せる

# structure.kvが自動で読み込まれます。
class StructureApp(App):
    def build(self):
        return MainView()

if __name__ == "__main__":
    StructureApp().run()

import os
from kivy.resources import resource_add_path
from kivy.core.text import LabelBase, DEFAULT_FONT
# fontsフォルダのパスを追加
resource_add_path(os.path.join(os.path.dirname(__file__), 'fonts'))
# デフォルトフォントをIPAexゴシックに設定
LabelBase.register(DEFAULT_FONT, 'ipaexg.ttf')

#:kivy 2.1.0
BoxLayout:
    orientation: "horizontal"  # 左から右へ並ぶ
    spacing: "6dp"
    Button:
        text: "左"
    Button:
        text: "中央"
    Button:
        text: "右"

from kivy.app import App

class LayoutSampleApp(App):
    pass

if __name__ == "__main__":
    LayoutSampleApp().run()

#:kivy 2.1.0
BoxLayout:
    orientation: "vertical"
    padding: "12dp"
    spacing: "8dp"
    Label:
        text: "お名前を入力してください"
    TextInput:
        id: name_field
        hint_text: "たろう"
        multiline: False
    Button:
        text: "送信"
        on_press: print("name:", name_field.text)  # コンソールへ出力

# events.py
# on_pressやテキスト変更イベントを受け取る例
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import StringProperty

class EventView(BoxLayout):
    message = StringProperty("")

    def submit(self):
        # kvから呼ばれるメソッド
        print(f"submitted: {self.ids.name_field.text}")
        self.message = f"こんにちは、{self.ids.name_field.text}"

class EventApp(App):
    def build(self):
        return EventView()

if __name__ == "__main__":
    EventApp().run()

# kv_basic.py
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class KvRoot(BoxLayout):
    pass

class KvBasicApp(App):
    def build(self):
        return KvRoot()

if __name__ == "__main__":
    KvBasicApp().run()

# screens.py
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen, SlideTransition

class HomeScreen(Screen):
    pass

class DetailScreen(Screen):
    pass

class ScreenApp(App):
    def build(self):
        sm = ScreenManager(transition=SlideTransition())
        sm.add_widget(HomeScreen(name="home"))
        sm.add_widget(DetailScreen(name="detail"))
        return sm

if __name__ == "__main__":
    ScreenApp().run()

#:kivy 2.1.0
# image_sample.kv
BoxLayout:
    orientation: "vertical"
    padding: "12dp"
    spacing: "8dp"
    Image:
        source: "assets/photo.png"   # 画像ファイルの相対パス
        allow_stretch: True          # 親に合わせて伸縮を許可
        keep_ratio: True             # 縦横比は維持
        size_hint_y: 0.7             # 画面の7割を画像に
    Label:
        text: "画像は比率を維持して表示されます"

# touch_scroll.py
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.scrollview import ScrollView
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.graphics import Color, Rectangle # 必要なモジュールをインポート

class TouchArea(FloatLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        # 背景色を描画するためのcanvas設定を追加
        with self.canvas.before:
            # 色を薄いグレーに設定 (R, G, B, A)
            Color(0.85, 0.85, 0.85, 1) 
            # ウィジェットのサイズと位置に追従する四角形を描画
            self.rect = Rectangle(size=self.size, pos=self.pos)

        # ウィジェットのサイズや位置が変わったときに背景の四角形も更新する
        self.bind(pos=self.update_rect, size=self.update_rect)

    def update_rect(self, instance, value):
        """Rectangleのposとsizeを更新するコールバック関数"""
        self.rect.pos = instance.pos
        self.rect.size = instance.size

    def on_touch_down(self, touch):
        # 自分の領域内だけ処理する
        if self.collide_point(*touch.pos):
            print(f"down: {touch.pos}")
            return True
        return super().on_touch_down(touch)

    def on_touch_move(self, touch):
        if self.collide_point(*touch.pos):
            print(f"move: {touch.pos}")
            return True
        return super().on_touch_move(touch)

    def on_touch_up(self, touch):
        if self.collide_point(*touch.pos):
            print(f"up: {touch.pos}")
            return True
        return super().on_touch_up(touch)

class TouchScrollApp(App):
    def build(self):
        root = BoxLayout(orientation="vertical", spacing=8, padding=12)
        root.add_widget(TouchArea(size_hint_y=0.4))
        # 縦スクロール
        scroll = ScrollView(size_hint_y=0.6)
        content = BoxLayout(orientation="vertical", size_hint_y=None, spacing=6)
        content.bind(minimum_height=content.setter("height"))
        for i in range(30):
            content.add_widget(Label(text=f"Item {i}", size_hint_y=None, height=32))
        scroll.add_widget(content)
        root.add_widget(scroll)
        return root

if __name__ == "__main__":
    TouchScrollApp().run()

# 基本ツール
$ sudo apt update
$ sudo apt install -y python3-venv python3-pip git build-essential \
  openjdk-17-jdk unzip zip libffi-dev libssl-dev

# プロジェクト仮想環境で
$ python3 -m venv .venv && source .venv/bin/activate
(.venv) $ pip install -U pip setuptools wheel cython
(.venv) $ pip install buildozer

(.venv) $ buildozer init          # buildozer.spec を生成
# 依存ライブラリは requirements にカンマ区切り: kivy, requests など
# パッケージ名やアイコンもspecで設定(後述)

# buildozer.spec 抜粋
[app]
title = My Kivy App
package.name = mykivyapp
package.domain = org.example
source.dir = .
version = 0.1.0
# Play向けはAAB推奨
android.release_artifact = aab
# Pythonで使う依存ライブラリ
requirements = python3,kivy,requests
# 自前のアプリアイコン
icon.filename = assets/icon.png

[buildozer]
log_level = 2

# デバッグAPK/AABの作成
(.venv) $ buildozer -v android debug

# 端末をUSBデバッグ接続し、インストールと起動
(.venv) $ buildozer android deploy run

bin/  # APKやAABが出力されます

$ adb install -r bin/mykivyapp-0.1.0-debug.apk

# XcodeとCommand Line ToolsをApp Storeなどから導入
# Homebrewでビルドツール
$ brew install autoconf automake libtool pkg-config
$ python3 -m venv .venv && source .venv/bin/activate
(.venv) $ pip install kivy "cython<3.1"  # 依存相性に応じてピン止め
(.venv) $ pip install kivy-ios

# Kivy-iOSで依存のビルド(時間がかかります)
(.venv) $ toolchain build python3 kivy sdl2 openssl
# プロジェクトの作成(例: 本体は../myapp ディレクトリ)
(.venv) $ toolchain create ios mykivyapp ../myapp
# 生成されたXcodeプロジェクトを開く
(.venv) $ open mykivyapp-ios/mykivyapp.xcodeproj

# buildozer.spec 抜粋
[app]
android.permissions = INTERNET, CAMERA, WRITE_EXTERNAL_STORAGE
# ネットワークやカメラを使う場合は適切な権限を追加

# buildozer.spec 抜粋
[app]
ios.plist_keys = NSCameraUsageDescription=カメラをQRコード読み取りに使用します, \
    NSPhotoLibraryAddUsageDescription=画像保存のために使用します

# metrics_dp.py
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.metrics import dp, sp

class MetricsApp(App):
    def build(self):
        root = BoxLayout(orientation="vertical", padding=dp(12), spacing=dp(8))
        from kivy.uix.label import Label
        from kivy.uix.button import Button
        root.add_widget(Label(text="dp/spの例", font_size=sp(20)))
        root.add_widget(Button(text="押す", size_hint_y=None, height=dp(44)))
        return root

if __name__ == "__main__":
    MetricsApp().run()

# buildozer.spec 抜粋
[app]
title = Sample App
package.name = sampleapp
package.domain = com.example      # 逆ドメイン形式
version = 1.2.3                   # 人が読む版
android.numeric_version = 10203   # 内部用。1.2.3 -> 10203 のように増加必須
icon.filename = assets/icon.png   # 512x512以上推奨
# AABでPlayに提出する場合
android.release_artifact = aab
# ターゲットAPI等(必要に応じて指定)
# android.api = 34
# android.minapi = 23