前回までで、パソコンの開発環境構築（Visual Studio 2017）と、iPhone 実機の環境構築（Xamarin Live Player）が整いました。
環境構築がまだの方は、下記の記事を参考にしてください。
今回は、Xamarin のホームページに公開されている、サンプルプログラムをダウンロードし、Visual Studio 2017 と Xamarin Live Player を連携して、スマホアプリ（今回は iPhone 限定です）を動かしてみましょう！
サンプルプログラムをダウンロードしよう
- Xamarin のホームページ Developer Center（https://developer.xamarin.com/）を開きます。
そして、［Samples］を押下します。
- 検索欄に「color」と入力すると、下に候補が表示されます。
その中の「Color Control Sample（iOS）」を押下します。
- Color Control Sample（iOS）ページが表示されるので、［Download］を押下します。
- 下記ファイルがダウンロードされました。
- 解凍するフォルダを決めて、解凍してください。
ここで注意点があります。
解凍するフォルダには、日本語文字は含めずに英数字としてください！
日本語文字のフォルダ名を使用すると、正常に動作しない場合があるそうです。
私は「C:\Develop」フォルダを作成して解凍しました。
Visual Studio 2017 でサンプルプログラムを開こう
- 解凍したファイルから、「ColorControl.sln」を選択し、ダブルクリックします。
- Visual Studio 2017 をインストール後、初めて「sln（ソリューション）ファイル」をダブルクリックすると、下記メッセージが表示されると思います。
表示された場合は、下記を確認後、［OK］ボタンを押下してください。
・［Microsoft Visual Studio Version Selector］が選択されていること
（初期で選択されています）
・［常にこのアプリケーションを使って .sln ファイルを開く］チェックボックスのチェックをONにする
（初期ではチェックOFFです）
- 上記手順で Visual Studio 2017 に、開発で必要な各種ファイルが読み込まれます。
下記の警告ダイアログが表示された場合は、［ソリューションの再読み込み］ボタンを押下してください。
これで、実行するサンプルプログラムの準備が整いました。
では、実機の iPhone にサンプルプログラムを転送して、動かしてみましょう！
Visual Studio 2017 でサンプルプログラムを動かそう
サンプルプログラムを動かす前の注意点です。
必ず、Visual Studio 2017 がインストールされているパソコンと、実機の iPhone は、同じネットワークとしてください。
- ＜OK な例＞
パソコンが自宅の Wi-Fi に接続され、iPhone も自宅の Wi-Fi に接続されている。 - ＜NG な例＞
パソコンが自宅の Wi-Fi に接続されているが、iPhone は電話回線で接続されている。
- 下記のとおり、赤枠で囲まれている設定がされているか確認します。
［Live Player］左に表示されている緑三角ボタンを押下します。
- 下記のような画面が表示されます。
・左側の QR コードは、iPhone にインストールした、Xamarin Live Player で使用します。
・右側の情報は、接続する iPhone のデバイス名が表示されます。
※デバイス名の確認は iPhone の「設定＞一般＞情報＞名前」で確認できます。
- iPhone の Xamarin Live Player を起動します。
起動後、［Pair to Visual Studio］を押下します。
- 下記が表示されたら、［許可］を押下します。
- カメラが起動しますので、パソコンに表示されている QR コードを読み取ってください。
一番下の赤枠は次回以降、パソコンと iPhone の連携で使用する英数字 6 桁のコードが表示されています。
一度、パソコンと iPhone を連携してしまえば、次回以降は QR コードを読み取らなくても良いそうです。
- 下記インフォメーションダイアログが表示された場合、［OK］ボタンを押下します。
- QR コードの読み取り後、Visual Studio 2017 が iPhone にサンプルプログラムを転送し、アプリケーションが起動します。
私の環境ではエラーダイアログが 2 回表示されましたが、エラーダイアログの［OK］ボタンを押下したら次に進めました。
ただし、デバッグはできないようでしたが…。
- サンプルプログラムでは、［Take Phote］ボタンの押下で、写真を撮り、撮った写真は下のエリアに表示されます。
そして、［Contrast］、［Saturation］、［Brightness］の3 つのスライドバーで、撮った写真の色調整を行うことができます。
- では、ちょっとだけプログラムを変更してみましょう！
ちゃんと、iPhone のアプリケーションに反映されるかな？？
右上に表示されている、「ソリューションエクスプローラー」から、「ImageViewController.cs」ファイルをダブルクリックすると、編集用ウィンドウが表示されます。
そしたら、下記のとおり変更します。
・30 行目
変更前 ： Title = "Color Controls Pro";
変更後 ： Title = "色の調整";
・37 行目
変更前 ： cameraButton.SetTitle ("Take Photo", UIControlState.Normal);
変更後 ： cameraButton.SetTitle ("写真を撮る", UIControlState.Normal);
・59 行目
変更前 ： resetButton.SetTitle ("Reset", UIControlState.Normal);
変更後 ： resetButton.SetTitle ("リセット", UIControlState.Normal);
- 再び、Visual Studio 2017 の、［Live Player］左に表示されている緑三角ボタンを押下します。
今度は、QR コードを読み取らずに、Xamarin Live Player に表示されたコードで動かしてみましょう！
- iPhone の Xamarin Live Player を起動します。
起動後、［Pair to Visual Studio］を押下します。
- 一番下の赤枠に「ABC123」のように英数字 6 桁が表示されていると思います。
Xamarin Live Player のコードを、Visual Studio 2017 のコード入力テキストボックスに入力し、［接続］ボタンを押下します。
- 英語で表示されていた文字列が、変更した日本語文字で表示されましたね！
変更した内容が、実機の iPhone のアプリケーションに反映できました！
どうでしたか？
Visual Studio 2017 を使用して、手軽に iPhone で動かすことができましたね！
今回はサンプルプログラムを使用しましたが、実際には自分で一から作成して iPhone で動かせたら、もっと感動ものですよね。
ゆくゆくは、クロスプラットフォームでの開発を味わってみたいものです。
その前に、実行時に発生するエラーの対応を解決しないとかな。
Visual Studio は多くの開発者で使われている開発ツールです。（私も Visual Studio で開発している一人です）
もっと参考資料が出回れば、Visual Studio で、iPhone、Android、Windows Phone の開発が進み、効率化できるのではないかと期待しています！
 |
価格:3,993円 |
