2月サンプル実行note

iOSアプリを作ろう・サンプルを実行

2019年のセミナー2回目をnote上で公開します。
Appleのサンプル「UIKitCatalog」を例にXcodeの使い方を紹介します。
サンプルプロジェクトの構成や設定、シミュレータアプリの操作までを細かく解説します
内容の難易度は[初歩、初級、中級、上級]の初級レベルです。
Xcode は 10.1 を使います。

【2020年3月29日現在Xcode 11.4が最新版です】

快技庵(かいぎあん)の高橋です。
古いMacの開発者です、現在は電子書籍などのiOSアプリを作っています。

画像1

このセッションの内容は目次を参考にしてください。

これが今日とりあげるUIKitCatalogの実行画面です。

画像2

サンプル「UIKitCatalog」のダウンロード

画像3

UIKitCatalog」サンプルを使います。(こちらのリンクでダウンロードページを開きます)
このサンプルはAppleのものでiOSがアップデートするたびに更新されています。

現在のバージョンは 14 【2020年3月現在iOS13対応のバージョン15】でコードは Swift 言語で書かれています。
このサンプル自体は初学者には難しい内容です。理解できない部分ばかりかもしれませんがそのまま実行してみてください。

画像4

青いDownloadボタンをクリックしダウンロードしてください。
UIKitCatalogCreatingAndCustomizingViewsAndControls.zip を解凍すると準備完了です。
UIKitCatalogCreatingAndCustomizingViewsAndControlsフォルダはデスクトップや書類フォルダなど任意のフォルダに移動してかまいません。
このフォルダ内には5項目(三つのフォルダと二つのファイル)あります。
 Configuration
 LICENSE
 README.md
 UIKitCatalog
 UIKitCatalog.xcodeproj

Finderでの拡張子の表示
開発では拡張子を表示する方が便利です。
表示するにはFinderの 環境設定 > 詳細 で「すべてのファイル名拡張子を表示」をチェックしてください。
注意
「UIKitCatalog」はUI部品の使い方のサンプルですが、同時にカスマイズ方法の実例でもあります。
カスタマイズする際にはガイドラインにそっているか、アクセシビリティへの対応は十分かなど確認すべきことがあります。
なおUIKitのUI部品はデフォルトでVoiceOverなどのアクセシビリティ機能に対応しています。

サンプルを開く

画像5

UIKitCatalog.xcodeproj をダブルクリックしてください。
Xcodeが起動しプロジェクトウインドウを開きます。
拡張子 .xcodeproj がプロジェクトファイルです。
プロジェクトファイルはXcodeの書類で青焼き《あおやき》のアイコンです。

シミュレータで実行

画像6

XcodeでiOSアプリのプロジェクトを実行するとシミュレータアプリが起動し、Mac上で動作を試すことができます。

画像7

実行前にツールバーにあるメニューで実行に利用するiOSデバイスの機種を選択できます。
デフォルトでは現行機種が表示されます。これはXcodeのバージョンで変わります。(今後の新機種は新しいXcodeで対応となるはずです)

Xcodeのプロジェクトウインドウ左上にある動画再生と同じアイコンのボタンが実行するためのRunボタンです。
実行停止はRunボタンの隣のStopボタンをクリックします。

シミュレータはXcodeに内蔵している独立したアプリです。
選んだ機種のウインドウが開き、その機種を初期化する処理が(実際のデバイスの起動とほぼ同じに)実行されます。
このため最初の起動は(シミュレータもデバイスの電源オンと同様の起動処理のため)やや時間がかかります。
XcodeからiOSアプリを実行した場合は、さらにコンパイルしたアプリのインストール処理が加わるため、RunしたiOSアプリが起動するまでには時間がかかります。

シミュレータアプリはXcodeの中にある
DockのコンテキストメニューからシミュレータをFinderに表示するとシミュレータアプリはXcodeの中にあることを確認できます。実はXcodeに限らずMacのアプリの構造はこのようにフォルダ階層と同じになっています。これはiOSのアプリでも同じです。

Xcodeはシミュレータアプリのほかにもアプリやドキュメント類、コンパイルやリンクに必要なフレームワークなど膨大なファイルを内蔵しているためアプリサイズが巨大になっています。

シミュレータの使い方

画像8

SimulatorアプリもXcodeと同様日本語にはローカライズされていません。
メニューなどは英語です。
Helpメニューに Simulator Help があります。
Simulator Help は共有メニューから Safari で開ことができます。画像9

タップ ダブルタップ
クリック(トラックパッドならタップ)がそのままタップ操作となります。
2本指の操作
オプションキーを押すとシミュレータの画面に二つのタッチポイントを表示します(デバイス画面中央を中心とする点対称で動きます)。ピンチ操作やローテート操作ができます。
オプションキーとシフトキーを同時に押すと二本指でのドラッグ操作ができます。
⌘ S 
画面をキャプチャーしデスクトップに保存します。
⌘ ← ⌘ →
デバイス上部を矢印の方向へ回転します。
⌘ ⇧ H
ホームに戻ります。

そのほかの操作は Simulator Help を参照してください。

シミュレータは強力

画像10

シミュレータもMacの一つのアプリであり、当然MacのインテルCPUを使って動作しています。
一方iPhoneなどのiOSデバイスのCPUはARMでMacとはまったく異なります。

なぜiOS用のアプリがMacで実行できるのでしょう?
シミュレータ用にビルドし、インテルCPU用のライブラリをリンクしているためです。
実際のiOSデバイスで実行するためには ARM CPU用にビルドし、ARM CPU用のライブラリをリンクします。同じソースコードやリソースを利用しますが、二つの別のアプリを作っています。

シミュレータはとてもよくできています。
ホームでアプリアイコン長押し操作でアイコンの位置移動や削除もできます。
設定アプリは全機能はありませんが、言語を切り替えることができます。
とてもよくできていますが、すべて Mac の CPU とメモリ環境で動いているので完全に同じではありません
カメラや加速度センサーはシミュレータではテストできません。
ただしGPSによる位置情報はテストできるように考慮されています。
またシミュレータアプリは一つだけ起動し、複数のiOSデバイスを別ウインドウで開くことができます。(それぞれのウインドウで別のアプリを実行できます。ただし Xcode のひとつのプロジェクトウインドウから一度にRunできるのはひとつのデバイスだけです)

画像11

シミュレータは強力ですが、実機テストは必要です。
開発中はシミュレータで動作確認するのが効率が良いのですが、完成しストアに提出する前には必ず実機でテストし全動作を確認しなければなりません。
実機でテストするためには Apple ID を利用するか、Apple にデベロッパー登録が必要です。

カメラや加速度などデバイスのセンサーを使う場合だけでなく、メモリ不足が発生しないか、通信が途中で切れたり接続できない場合の挙動なども確認してください。

まだiOSに慣れていない頃iPadの回転対応処理が正しくなく、ひっくり返すことで発生する180度の回転に画面が乱れるバグが出たことがありました。
シミュレータでは縦横縦横の回転しか試せませんが、上下逆になる回転は実機でなければ動作確認できません。

サンプルの中身(ファイル構成)

画像12

アプリ作りにはたくさんのファイルが必要です。
それを一括管理するのがプロジェクトファイルです。
プロジェクトファイルにはアプリを作るための設定と使用するすべてのファイルを登録します。
プロジェクトファイルは Xcode では一つのウインドウが対応します(これをプロジェクトウインドウと呼びます)。

画像13

プロジェクトウインドウの説明がまだですが、左側(ナビゲーションエリア)に登録したファイルを一覧表示します。
このリストの項目はサンプルを解凍した各ファイルと対応しています。
アプリ作りに使用するファイルを追加する場合は、プロジェクトファイルと同じ階層にフォルダを作りその中にファイルを入れてからプロジェクトに追加します。
このようにするとプロジェクトファイルの入ったフォルダ単位で別のMacにコピーしてもプロジェクトに必要なファイルがそろった状態を保て便利です。

ここから先は

7,184字 / 24画像
この記事のみ ¥ 500

今後も記事を増やすつもりです。 サポートしていただけると大変はげみになります。