Playgroundのコードをアプリにしよう
iPad の Playgrounds や Xcode の Playground 機能でシンプルなコードを動かすことができます。
今回はそのコードを、ほぼそのままアプリにする方法をご紹介します。
『アプリのしくみ』の理解にもつながるのでぜひやってみてください。
毎月札幌でiOSアプリ作りをアシストするセミナーをやっています。1時間にわたるセミナーの全内容を、物理的に参加できない方のためにnote上で公開します。ぜひアプリ作りにチャレンジしてください。
おしらせ
iOSアプリ作りをアシストするセミナーは今後も月一回のペースで続ける予定です。
詳細は connpass.com の 札幌Swiftでご確認ください。そして機会があればぜひ参加してください。
アプリ作りやプログラミング教育に関連する話題は 札幌Swift のfacebookページで発信しています。
・画像クリックで拡大表示できます
・画像を拡大表示中は画像の左右をクリックで画像だけを順に表示できます
1-1 Playgroundとアプリ作りの違い
iPad の Playgrounds や Xcode の Playground 画面では行単位でコードを試すことができます。
一方 Xcode でアプリを作る場合には決まりごとがいくつかあり、最低限必要なコードも多くなります。
アプリではインターフェースビルダーが使える点も大きな違いです
Playgroundでは画面を作成する便利なツールはないため、すべてコードで記述しなければなりません。
インターフェースビルダーは便利ですが、コードとの接続のためのしくみが直感的でない部分もあります。
注意しないとツールで設定した画面を読み込めません。
インターフェースビルダーで保存したストーリーボードファイルにビューコントローラーとその画面内のラベルやボタンの配置データがあります。アプリは実行時にそれを再現するしくみです。
クラス名をもとに再現します。名称が違っていると再現できないので注意が必要です。
1-1-1 方針
Playground のコードをアプリにするにはいくつかのやり方が考えられます。
今回は次の方針でアプリにしましょう。
・ビューコントローラーを使ったPlaygroundをアプリにする
・アプリは Xcode のテンプレートを元にする
・テンプレートの（空白を表示する）テンプレートもそのまま使う
1-2 バックアップをしよう
変更を加える前のファイルを残しておきましょう。
修正で問題が発生した時、最低でも直前の動いている状態に戻れるようにすることは重要です。
前のファイルを残しておかないと、正常に動いていた状態に戻せなくなる場合が少なくありません。
これまでやってきたことが水の泡とならないように、必ず残しておきましょう。
Xcode のアプリ用プロジェクトではソースコード管理のしくみがあるので、これを活用するのがオススメです。
Playground ファイルは複製を保存しておくのが確実です。
1-3 Playgroundsでエラーなしの状態にする
iPad の Playgrounds のコードをアプリにする場合は、iPad上でコードのワーニングなどがない状態にしておきましょう。
そしてワーニングなどがなくなった状態でアプリ作成を開始しましょう。
特に作成してから時間がたっているコードは実行して、動作を確認してください。コード作成を古い Playgrounds で行なった場合場合、Swift言語のバージョンが変わっている可能性があります。
1-4 Macへコードを転送
アプリにする作業は Mac の Xcode を使います。
このため iPad のコードは Mac へ転送しなければなりません。
iPad から Mac へコードを転送するにはいくつかの方法があります。
iCloud ドライブを Xcode で開くのが簡単で確実です。
AirDrop を使って送ることもできます。
1-5 Playgroundsのファイルは二種類
iPadのPlaygroundsアプリで扱うファイルは二種類あります。
1-5-1 Xcode の Playground ファイル
拡張子が .playground です。
iPad の Playgrounds でも実行できます。
1-5-2 ブック形式
拡張子が .playgroundbook です。
コードを学ぼうなどで使われている形式です。学習用の機能をいろいろあります。ひとつのファイルを複数の言語で表示できるしくみもあり、ファイルの構造は複雑です。
ここでは Xcode の Playground ファイルを例に説明します。
サンプルは拙著「Swift4初級ガイドの」「SSG7_WarikanKey.playground」を使います。
「SSG7_WarikanKey.playground」は Xcode の Playground ファイルで4ページ構成です。4ページ目（最後のページ）の「割り勘キー」をアプリにしましょう。
「割り勘キー」は割り勘計算専用の電卓です。数値キーと入力の表示を持ちます。
2-1 Macでエラーなしを確認
アプリにする前に Xcode の Playground でエラーが出ず、実行できることを確認してください。
Xcode と Playgrounds のバージョンの違いなどでエラーやワーニングが表示されることがあります。
もしワーニングなどが表示されたら、原因を確認し必要なら修正してください。
余裕があれば print文をチェックしてください。print文の出力はアプリの画面には表示されませんが、内部には溜まっていきます。
アプリとして将来配布するのであれば不要なprint文は削除するのが良いでしょう。
近い将来配布の予定がなければ残しておいてもまったく問題はありません。
2-1-1 Xcode でのライブビューの表示方法：
Xcode ではライブビューは実行しても自動では表示しません。
ライブビューはアシスタントエディタに表示します。
View > Assistant Editor > Show Assistant Editor メニューでエディタを分割して表示します。
エディタの上部に Live View 表示を確認してください。Manual の場合はその文字がポップアップメニューなのでクリックして Live View に切り替えてください。
Xcode でPlaygroundの実行は Editor > Run Playground メニューです。
これでLive Viewに内容が表示され操作できれば大丈夫です。
2-1-2 割勘キーの操作
電卓のように金額を数値入力します。
「計」ボタンで入力金額を合計欄に表示します。
人数を入力します。
「人」ボタンで人数を入力し割勘金額と余りを表示します。
数値入力を間違えた場合は「計」または「人」ボタンをタップして、入力しなおしてください。
ここまでは準備段階です。ここまで準備ができれいればアプリにするのは難しくはありません。
2-2 Xcode でアプリの名前を決めて保存
Xcode を起動すると『Welcome to Xcode』のウインドウが開きます。（開かない場合は Window > Welcome to Xcode メニューで開いてください）
このウインドウで『Create anew Xcode project』をクリックしてください。
「Choose a template for your new project:」の画面で iOS の左上（数字の1のアイコン）「Single View App」テンプレートを選んでください。
Product Name: でアプリの名前を入力してください。（かな漢字は使わず英字が無難です）
ここでは「TestWari」としました。（割り勘アプリのテスト版といった意味です）
自由な名前でかまいません。
アプリケーション名やクラス名は大文字ではじめましょう。変数名などは小文字からはじめます。単語の区切りは1文字あけることができないので、単語の1文字目を大文字にします。（らくだのこぶのようになるのでキャメルケース camel case と呼ばれる書き方です）
プログラミングに使用する言語（Language:）は Swift 指定になっていることを確認してください。
2-3 ナビゲーションコントローラを追加して実行
「Single View App」テンプレートはシンプルで実行しても白い画面を表示するのみです。
ナビゲーションコントローラーを追加しナビゲーションバーにアプリの名前を表示しましょう。
ナビゲーションコントローラ追加は必須の手順ではありません。
でも、実行しても何も表示しないのは現在作っているコードが動いている実感を得にくいので何か独自表示が必要です。
ナビゲーションコントローラは一般のアプリでも頻繁に使われるので、ぜひ使いこなしてください。
左側にあるプロジェクトナビゲーターで「Main.storyboard」をクリックしてください。
インターフェースビルダーにMain.storyboardを表示します。
しばらくするとエディタにiPhoneの画面を表示します。
（表示されるiPhoneの画面は設定によりかわります。ここではiPhoneXRです）
エディタのiPhone画面の上のバー（下図の矢印部分）をクリックしてください。
これでビューコントローラーの選択になります。
Editor メニューの真ん中より少し下に「Embed In」があります。階層メニューなのでクリックして下から二番目の「Navigation Controller」を選んでください。
これで最初の iPhone 画面に矢印で連結するもうひとつの iPhone 画面が追加になります。（Navigation Controllerと書いてあります）
Xcode のインターフェースビルダーではそれぞれの画面をシーン（Scene）と呼びます。
Navigation Controllerシーンの上のバーをドラッグして移動できます。最初のシーンの真横に移動しておきましょう。
最初のシーンのナビゲーションバーをクリックして、右側のアトリビュートインスペクタでタイトルを入力してください。ここでは「割り勘電卓」としましょう。
タイトルを追加するのはナビゲーションコントローラではなく最初のビューコントローラーです。注意してください。
シミュレータで実行してここまでを確認しましょう。
シミュレータの機種はデフォルトでは iPhone XR になっていると思います。好みの機種に変更しても構いません。
Xcode の Product > Run メニューでシミュレータで実行します（ショートカットは ⌘R です）。
実行画面はこのようになるはずです。
2-4 保存したプロジェクトを確認
「Single View App」テンプレートの主なファイルはは AppDelegate.swift、ViewController.swift、Main.storyboardです。
今回は AppDelegate.swift は変更せずそのまま使います。
Playground のコードを組み込むのは「ViewController.swift」です。
ViewController.swift はクラス名が「ViewController」の UIViewController を継承したクラスです。
今後も記事を増やすつもりです。 サポートしていただけると大変はげみになります。