iPhoneでiPhoneアプリを作ろう

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

## Pythonistaって？
[**Pythonista**](http://omz-software.com/pythonista/) は、iOS上で動作するPythonの統合開発環境です。有料アプリではありますがとても高機能で、URLスキームや共有シートから実行できる実用的なPythonスクリプトを作成できたり、ホーム画面から実行できるGUI付きのアプリケーションを作成したりすることができます。

# 準備

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

## インストール
App Storeで「**Pythonista**」と検索！このアイコンが目印です。

![Pythonista3IconMasked-170.png](https://qiita-image-store.s3.amazonaws.com/0/120362/97a482a8-1f7a-bcd6-a254-6570be50d9d7.png)

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

<img width="375" alt="IMG_6910.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/c892ea8d-79e3-5a1c-3b58-70c284db5df6.png">

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

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

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

<img width="375" alt="IMG_6912.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/9534a30a-33e4-a091-0adc-b9928f58131a.png">

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

<img width="375" alt="IMG_6913.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/dd18e708-becc-d23e-8db6-40a0d4b5367d.png">

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

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

<img width="375" alt="IMG_6912.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/453bd7a9-4a12-37ac-0e92-4ce7773232d7.png">

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

<img width="375" alt="IMG_6914.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/d4c89c98-e54b-b574-a49d-8672480ceb0c.png">

<img width="375" alt="IMG_6916.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/5d3eded8-144e-e464-1102-2c54e3234ce6.png">




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

## UIを編集

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

<img width="375" alt="IMG_6939.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/07c6ad5b-50e8-8a42-81d9-d9cf4f99c026.png">


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

<img width="375" alt="IMG_6918.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/aac52e91-bdc4-7cc1-b1c1-dd0884539886.png">

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

<img width="375" alt="IMG_6919.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/042b1266-57de-a499-ead7-cef771b5cfc3.png">


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

<img width="375" alt="IMG_6940.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/892887ef-2bad-e26e-d641-c08c47b7ca4e.png">

↓

<img width="375" alt="IMG_6920.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/0dd884d4-2f47-7a7e-7bfe-2428dcd02aa6.png">

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

<img width="375" alt="IMG_6921.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/afa00036-55bf-8022-1103-b744eb2a36e8.png">

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

<img width="375" alt="IMG_6922.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/ee2a84af-91d2-2427-aeef-d93640cc8212.png">

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

<img width="375" alt="IMG_6923.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/e1e00dcc-f422-99ca-df05-2fb81ba61e70.png">

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

<img width="375" alt="IMG_6924.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/5ef967a9-a366-6848-02e4-aa5123c56872.png">

これでUIは完成ですね。

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

## コード

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

<img width="375" alt="IMG_6925.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/54b7d6ce-b918-3f6b-cdfe-6a7eade97843.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 width="375" alt="IMG_6927.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/c868dc32-ced3-ceec-84e0-242bc177fc74.png">

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

<img width="375" alt="IMG_6926.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/8ebb92a1-5ef7-cdb4-5b0e-0b1440f5ade3.png">


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

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

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

<img width="375" alt="IMG_6928.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/4298ef6c-c6aa-f3b8-9877-1fe8c036f491.png">

## 実行！

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

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

<img width="375" alt="IMG_6929.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/c822ab1d-30f5-c315-1e9f-db7d47b5d2ab.png">

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

<img width="375" alt="IMG_6902.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/51eeed7a-ab9d-43a1-9fc7-5ef3c9df2fad.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 width="375" alt="IMG_6933.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/0398c015-d761-cf6b-d020-3da3bdfafee9.png">


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

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

<img width="375" alt="IMG_6934.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/e6f09461-aad7-da76-07a1-cd2e5fb7741f.png">

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

<img width="375" alt="IMG_6935.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/0ea4b0b7-fdf6-ba06-36a6-622b530d729c.png">

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

<img width="375" alt="IMG_6936.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/53770a17-96d1-76d6-ae27-0ddcc98b9b15.png">

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

<img width="375" alt="IMG_6937.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120362/56585578-9c53-69f0-97dd-881d35b159b3.png">

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

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

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

# 参考
- Pythonistaについて詳しく知りたい方はこちら↓の記事を参考にしてみてください。
[iOS上で動作する革命的ものづくり環境「Pythonista 3」の魅力をとくと語る](http://hitoriblog.com/?p=42145#i-11)

- Pythonista公式サイト
[Pythonista 3](http://omz-software.com/pythonista/) 

- 公式ドキュメント
[Pythonista Documentation](http://omz-software.com/pythonista/docs/)