はじめに
こんにちは！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のスクショではなくスニペットで示していきます。)
まずは変数を宣言します。
import ui
# 変数numberを宣言
number = 0
v = ui.load_view()
v.present('sheet')
次に、プラスボタンをタップしたときに呼ばれ、Label の数字を1増やす処理を行うメソッドを書いていきます。
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で操作しているとはいえ思ったよりも快適にコーディングできたのではないでしょうか。
関連付け
それでは、最後に Button と plus メソッドを関連付けしていきます。
Count.pyui を開き、 Button をタップしてiボタンから設定画面を開きましょう。
一番下にある「Action」欄に plus と入力しましょう。これで、実行して Button をタップしたときに plus メソッドが呼ばれるようになります！
実行！
さあ、実行してみましょう！ Count.py を開いて、右上の▷ボタンをタップすると、アプリが立ち上がります。
Button をタップして、 Label の数字が1増えたら成功です！！
実行した際に、このようにエラーが出ることがあります。その際は、エラーメッセージを読みコードをもう一度見直してみましょう。
機能を追加①
もう少し機能をつけていきましょう。タップするとlabelの数字が0になるクリアボタンを作ることにします。
プラスボタンと同様に作っていきます。
コードを書いていきます。
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の色を変える」という条件も付けてみます。
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')
実行！！
プラスボタンをタップしていって、labelの数字が10になったときに数字の色が変わったら成功です！
クリアボタンをタップするとlabelの数字が0になることも確認できました！
ホーム画面に追加
最後に、今作ったアプリをいつでも使えるように、ホーム画面に追加していきます。
右上のスパナのマークをタップして、「Home Screen」をタップ。
タイトルやアイコンなどを決めたら次に進みましょう。
Safariが開きます。あとは画面の指示に従って操作していきましょう。
すると、ホーム画面に追加されます！
これでいつでもアプリを立ち上げることができます！
おわりに
Pythonistaを使うことで、このように「iPhoneでiPhoneアプリを作る」ことができました。
PythonistaはこのようにGUI付きアプリを作ることができるほか、例えばURLをQRコードに変換するPythonスクリプトを作成して共有シートに組み込むなど、iOSの機能を自由にカスタマイズして便利にしてくれるとても魅力的なアプリです。ぜひ使ってみてください！
参考
Pythonistaについて詳しく知りたい方はこちら↓の記事を参考にしてみてください。
iOS上で動作する革命的ものづくり環境「Pythonista 3」の魅力をとくと語るPythonista公式サイト
Pythonista 3公式ドキュメント
Pythonista Documentation