More than 5 years have passed since last update.

Life is Tech ! メンターAdvent Calendar 2017

iPhoneでiPhoneアプリを作ろう

Last updated at 2019-01-16Posted at 2017-12-22

はじめに

こんにちは！Life is Tech ! メンターのつっちーです。
今回は、「iPhoneでiPhoneアプリを作る」ということにチャレンジします。「Pythonista」というアプリを使い、カウントアプリを作っていきます！

Pythonistaって？

Pythonista は、iOS上で動作するPythonの統合開発環境です。有料アプリではありますがとても高機能で、URLスキームや共有シートから実行できる実用的なPythonスクリプトを作成できたり、ホーム画面から実行できるGUI付きのアプリケーションを作成したりすることができます。

準備

まずはアプリをインストールして準備をしていきます。

インストール

App Storeで「Pythonista」と検索！このアイコンが目印です。

起動

インストールが完了したら、さっそく起動してみましょう。

Pythonistaはこのようにフォルダ構造になっていて、中のファイルをタップすると編集できるようになっています。

#作成
それでは作っていきましょう！

フォルダ・ファイルを作成

画面左下の+ボタンで、まずはフォルダを作っていきます。

「New Folder」をタップして、「Count」という名前でフォルダを新しく作成します。

作成できたら今度はファイルを作成します。タップしてCountフォルダの中に入り、もう一度＋ボタンをタップ。

今回作るのはiPhoneアプリなので、コードを書くファイルとUIを設定するファイルがセットになった「Script with UI」を選びます。

「Count」という名前を入力して進めると、「Count.py」と「Count.pyui」の2つのファイルが作られます。

さあ、次はこれらのファイルを使ってアプリを作っていきます！

UIを編集

まずは Count.pyui を開いてUIを編集していきましょう。Xcodeの storyboard のようになっていますね。

はじめに、画面全体である View のサイズを変更していきます。画面中央にある白い四角の View をタップし、右上のiボタンをタップ。すると、 View の設定画面に移ります。

「Size」を変更して元の画面に戻ると、反映されていることが確認できました。

次に、今回使う部品である Label と Button を追加していきます。画面左上の+ボタンをタップすると View に追加できる部品が一覧で出てくるので、まずは Label をタップしましょう。

↓

View の上に置かれました。指でドラッグすることで好きな場所に移動することができます。

同じようにして、 Button も追加しましょう。追加できたら、いい感じに配置します。

この Label や Button も、タップすることでサイズやテキストなどの設定をすることができます。一番上にある「Name」は、このあとコードを書くときに使うので、頭の片隅に置いておいてください。

Label と Button の「Text」を編集してみました。

これでUIは完成ですね。

では、次はコードを書いていきましょう。

コード

Count.py を開くと、デフォルトで最低限必要なコードが書かれています。

ここに書き足していきます。

(見やすさのために、これ以降のコードはPythonistaのスクショではなくスニペットで示していきます。)

まずは変数を宣言します。

Count.py

import ui

# 変数numberを宣言
number = 0

v = ui.load_view()
v.present('sheet')

次に、プラスボタンをタップしたときに呼ばれ、Label の数字を1増やす処理を行うメソッドを書いていきます。

Count.py

import ui

number = 0

# プラスボタンをタップしたときに呼ばれるメソッド
def plus(sender):
    # グローバル変数numberを使う
    global number

    # Labelの宣言
    # senderはこのあとButtonとひも付けます。
    # 'label1'は、Count.pyuiでLabelの設定をした時に確認した名前です。
    # つまり、「Buttonの親Viewに置いてある、'label1'という名前の部品」という意味ですね。
    # Xcodeでの開発におけるIBOutletの関連付けと同じようなことをここで行っていると言えます。
    label = sender.superview['label1']

    # numberの値を1増やしてlabelのtextに反映させる
    number = number + 1
    label.text = str(number)

v = ui.load_view()
v.present('sheet')

普段Swiftなどでアプリ開発をしている人から見れば、細かな違いはあれど大体同じような処理をしているのが分かると思います。

ここまでで、コードを書く部分は終わりです。Pythonistaの画面も載せておきます。

Pythnistaのエディタはとても優れていて補完などの機能もしっかりついているので、iPhoneで操作しているとはいえ思ったよりも快適にコーディングできたのではないでしょうか。

実行！

さあ、実行してみましょう！ Count.py を開いて、右上の▷ボタンをタップすると、アプリが立ち上がります。

Button をタップして、 Label の数字が1増えたら成功です！！

実行した際に、このようにエラーが出ることがあります。その際は、エラーメッセージを読みコードをもう一度見直してみましょう。

機能を追加①

もう少し機能をつけていきましょう。タップするとlabelの数字が0になるクリアボタンを作ることにします。
プラスボタンと同様に作っていきます。

コードを書いていきます。

Count.py

import ui

number = 0

def plus(sender):
    global number
    label = sender.superview['label1']

    number = number + 1
    label.text = str(number)

# クリアボタンをタップしたときに呼ばれるメソッド
def clear(sender):
    global number
    label = sender.superview['label1']

    number = 0
    label.text = str(number)

v = ui.load_view()
v.present('sheet')

機能を追加②

「数字が10以上になったらlabelの色を変える」という条件も付けてみます。

Count.py

import ui

number = 0

def plus(sender):
    global number
    label = sender.superview['label1']

    number = number + 1
    label.text = str(number)

    # 10以上だったら赤にする
    if number >= 10:
        label.text_color = 'red'

def clear(sender):
    global number
    label = sender.superview['label1']

    number = 0
    label.text = str(number)

    # 色を黒に戻す
    label.text_color = 'black'

v = ui.load_view()
v.present('sheet')