Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
210
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@taznica

iPhoneでiPhoneアプリを作ろう

はじめに

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

Pythonistaって?

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

準備

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

インストール

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

Pythonista3IconMasked-170.png

起動

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

IMG_6910.PNG

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

作成

それでは作っていきましょう!

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

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

IMG_6912.PNG

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

IMG_6913.PNG

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

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

IMG_6912.PNG

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

IMG_6914.PNG

IMG_6916.PNG

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

UIを編集

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

IMG_6939.PNG

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

IMG_6918.PNG

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

IMG_6919.PNG

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

IMG_6940.PNG

IMG_6920.PNG

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

IMG_6921.PNG

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

IMG_6922.PNG

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

IMG_6923.PNG

LabelButton の「Text」を編集してみました。

IMG_6924.PNG

これでUIは完成ですね。

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

コード

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

IMG_6925.PNG

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

(見やすさのために、これ以降のコードは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の画面も載せておきます。

IMG_6927.PNG

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

IMG_6926.PNG

関連付け

それでは、最後に Buttonplus メソッドを関連付けしていきます。

Count.pyui を開き、 Button をタップしてiボタンから設定画面を開きましょう。

一番下にある「Action」欄に plus と入力しましょう。これで、実行して Button をタップしたときに plus メソッドが呼ばれるようになります!

IMG_6928.PNG

実行!

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

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

IMG_6929.PNG

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

IMG_6902.PNG

機能を追加①

もう少し機能をつけていきましょう。タップすると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')

実行!!

プラスボタンをタップしていって、labelの数字が10になったときに数字の色が変わったら成功です!
クリアボタンをタップするとlabelの数字が0になることも確認できました!

IMG_6933.PNG

ホーム画面に追加

最後に、今作ったアプリをいつでも使えるように、ホーム画面に追加していきます。

右上のスパナのマークをタップして、「Home Screen」をタップ。

IMG_6934.PNG

タイトルやアイコンなどを決めたら次に進みましょう。

IMG_6935.PNG

Safariが開きます。あとは画面の指示に従って操作していきましょう。

IMG_6936.PNG

すると、ホーム画面に追加されます!

IMG_6937.PNG

これでいつでもアプリを立ち上げることができます!

おわりに

Pythonistaを使うことで、このように「iPhoneでiPhoneアプリを作る」ことができました。

PythonistaはこのようにGUI付きアプリを作ることができるほか、例えばURLをQRコードに変換するPythonスクリプトを作成して共有シートに組み込むなど、iOSの機能を自由にカスタマイズして便利にしてくれるとても魅力的なアプリです。ぜひ使ってみてください!

参考

210
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
210
Help us understand the problem. What is going on with this article?