Hello, iOS

初めての Xamarin.iOS アプリケーション開発 - 入門ガイド

本ガイドでは、Xamarin Studio または Visual Studio を使用して初めての Xamarin.iOS アプリケーションのビルドを紹介し、Xamarin を使用して iOS アプリケーションの開発の基本的な部分を紹介します。 Xamarin.iOS アプリケーションのビルドと配布に必要なツール、コンセプト、ステップも紹介します。

Hello.iOS 入門

本セクションでは、ユーザーが入力した英数字の電話番号を数字の電話番号に変換し、その番号に電話するアプリケーションを作成します。 完成したアプリケーションは、以下のような画面になります:

それでは始めましょう!

要件

Xamarin を使用して iOS アプリケーションを開発するには以下が必要です:

  • OS X Mountain Lion またはそれ以降が起動する Mac
  • App Store から入手可能な最新バージョンの XCode と iOS SDK

Xamarin.iOS は以下の設定のいずれかで動作します:

  • 上記の仕様を満たす Mac で、最新バージョンの Xamarin Studio
  • Windows 7 またはそれ以降で、最新バージョンの Visual Studio Professional または上位エディション (上記の仕様を満たす Mac ビルド ホストでペアリング)。 このステップでは、Xamarin Business ライセンスまたは評価版ライセンスが必要になります。

Xamarin インストール ガイドでは、ステップ バイ ステップのインストール手順を紹介しています。

注意: Xamarin.iOS の場合、Windows で Xamarin Studio を使用できません。

アプリケーションの作成を始める前に、[Xamarin App Icons と Launch Screens set] (Resources/Xamarin App Icons と Launch Images.zip) ダウンロードしてください。

チュートリアル

Xamarin Studio を使用する場合

このセクションでは、英数字の電話番号を数字の電話番号に変換する Phoneword と呼ばれるアプリケーションを作成します。

  1. アプリケーション フォルダーまたは Spotlight から Xamarin Studio を起動して、起動画面を開きます:

    左上の New Solution... をクリックして、新規に Xamarin.iOS ソリューションを作成します:

  2. New Solution dialog から、C # > iOS > Unified API > iPhone > Single View Application のテンプレートを選択します。 NamePhoneword_iOSSolution NamePhoneword と入力します:


  3. 次に、Solution PadMainStoryboard.storyboard をダブルクリックしてファイルを開きます:

  4. Toolbox (画面右側) にある検索バーで "label" と入力し、デザイン画面 (画面中央) に Label をドラッグします:

  5. Dragging Controls (コントロールの囲いの○) のハンドルを摘み、ラベルを拡げます:

  6. デザイン画面で選択した Label で、Properties Pad を使用して、LabelTitle プロパティを "Enter a Phoneword:" に変更します:

    注意: View > Pads の操作をして、いつでも Properties Pad または Toolbox を使用できます。
  7. 次に、Toolbox で "text field" を検索し、デザイン画面で Toolbox から Text Field をドラッグし、Label の下に "text field" を配置します。 Text FieldLabel の幅が同じになるように調整します:

  8. デザイン画面で選択した Text Field で、Properties Pad の Identity セクションの Text FieldName プロパティを PhoneNumberText に変更し、Title プロパティを "1-855-XAMARIN" に変更します:

  9. 次に、デザイン画面に Toolbox から Button をドラッグし、Text Field の下に Button を配置します。 Button の幅も Text FieldLabel と同じ幅になるように調整します:

  10. デザイン画面で選択した Button で、Properties PadIdentity セクションの Name プロパティを TranslateButton に変更します。 Title プロパティを "Translate" に変更します:

  11. 上記 2つのステップを繰り返し、デザイン画面の Toolbox から Button をドラッグし、最初の Button の下にその Button を配置します。 その Button の幅を最初の Button と同じ幅になるように調整します:

  12. デザイン画面で選択した 2番目の Button で、Properties PadIdentity セクションにある Name プロパティを CallButton に変更します。 Title プロパティを "Call" に変更します:

    File > Save または ⌘ + s ボタンを押して作業内容を保存します。

  13. ここで、英数字から数字に電話番号を変換するコードを追加します。 Solution PadPhoneword_iOS プロジェクトの隣のグレーのギア アイコンをクリックして新しいファイルをプロジェクトに追加し、Add > New File... を選択または ⌘ + n ボタンを押します:

  14. New File ダイアログで、General > Empty Class を選択し、新しいファイルに PhoneTranslator と名前を付けます:

  15. ここで、新しい空の C# クラスを作成します。全てのテンプレートのコードを削除し、以下のコードに置き換えます:

    using System.Text;
    using System;
    namespace Core
    {
        public static class PhonewordTranslator
        {
            public static string ToNumber(string raw)
            {
                if (string.IsNullOrWhiteSpace(raw))
                    return "";
                else
                    raw = raw.ToUpperInvariant();
                var newNumber = new StringBuilder();
                foreach (var c in raw)
                {
                    if (" -0123456789".Contains(c))
                        newNumber.Append(c);
                    else {
                        var result = TranslateToNumber(c);
                        if (result != null)
                            newNumber.Append(result);
                    }    
                    // otherwise we've skipped a non-numeric char
                }
                return newNumber.ToString();
            }
            static bool Contains (this string keyString, char c)
            {
                return keyString.IndexOf(c) >= 0;
            }
            static int? TranslateToNumber(char c)
            {
                if ("ABC".Contains(c))
                    return 2;
                else if ("DEF".Contains(c))
                    return 3;
                else if ("GHI".Contains(c))
                    return 4;
                else if ("JKL".Contains(c))
                    return 5;
                else if ("MNO".Contains(c))
                    return 6;
                else if ("PQRS".Contains(c))
                    return 7;
                else if ("TUV".Contains(c))
                    return 8;
                else if ("WXYZ".Contains(c))
                    return 9;
                return null;
            }
        }
    }
    

    PhoneTranslator.cs ファイルを保存し、閉じます。

  16. 次に、コードを追加して、ユーザー インターフェースを操作します。 コードを追加して、Phoneword_iOSViewController クラスのユーザー インターフェースを動かします。 Solution PadPhoneword_iOSViewController.cs をダブルクリックして、開きます:

  17. TranslateButton を操作します。 Phoneword_iOSViewController クラスで、ViewDidLoad メソッドを見つけます。 ViewDidLoad にボタンのコードを追加します。 以下、base.ViewDidLoad() の呼び出しです:

    public override void ViewDidLoad ()
    {
      base.ViewDidLoad ();
      // code goes here
    }
    
  18. TranslateButton と名前を付けた最初のボタンをユーザーが押した際に応答するコードを追加します。以下のコードで ViewDidLoad を追加します:

    string translatedNumber = "";
    TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
      // Convert the phone number with text to a number 
      // using PhoneTranslator.cs
      translatedNumber = Core.PhonewordTranslator.ToNumber(
      PhoneNumberText.Text);   
      // Dismiss the keyboard if text field was tapped
      PhoneNumberText.ResignFirstResponder ();
      if (translatedNumber == "") {
        CallButton.SetTitle ("Call", UIControlState.Normal);
        CallButton.Enabled = false;
        } 
      else {
        CallButton.SetTitle ("Call " + translatedNumber, UIControlState.Normal);
        CallButton.Enabled = true;
        }
    };
    
  19. 次に、CallButton と名前を付けた二番目のボタンをユーザーが押した際に応答するコードを追加します。TranslateButton のコードの下に以下のコードを追加します:

    CallButton.TouchUpInside += (object sender, EventArgs e) => {
      var url = new NSUrl ("tel:" + translatedNumber);
        // Use URL handler with tel: prefix to invoke Apple's Phone app, 
        // otherwise show an alert dialog                
      if (!UIApplication.SharedApplication.OpenUrl (url)) {
          var av = new UIAlertView ("Not supported",
                      "Scheme 'tel:' is not supported on this device",
                      null,
                      "OK",
                      null);
          av.Show ();
      }
    };
    
  20. 作業を保存し、Build > Build All を選択または ⌘ + B ボタンを押して、アプリケーションをビルドします。 アプリケーションをコンパイルすると、IDE の上位に "Build Successful" とビルドが成功したメッセージが表示されます:

    エラーが発生する場合、前のステップに戻って、アプリケーションのビルドが成功するまで、不正な箇所を修正します。

  21. これで、アプリケーションが動作したので、最後の仕上げを加えていきましょう! Info.plist ファイルのアプリケーション名とアイコンを編集します。 Solution PadInfo.plist をダブルクリックして Info.plist を開きます:

  22. iOS Application Target セクションで、 Application Name を "Phoneword" に変更します:

  23. アプリケーションのアイコンと起動イメージを設定するために、まず Xamarin App Icons & Launch Screens set をダウンロードします。 iPhone Icon セクションで、(57x57) アイコン プレイスホルダーを直接クリックし、Xamarin App Icons & Launch Images ディレクトリから一致するアイコンを選択します:

    6つのアイコンを全て使います。Xamarin Studio はプレイスホルダーを Xamarin のアイコンに置き換えます:

  24. 次に、起動画像を設定しましょう。 Default.png を標準の解像度 (320x480) のプレイスホルダーに指定し、Default@2x.pngRetina (3.5-inch) プレイスホルダーに指定し、最後に Default-568h@2x.pngRetina (4-inch) プレイスホルダーに指定します。

    画像の名前は、それぞれの解像度に対して、iOS の命名規則に従います。

  25. 最後に、iOS Simulator でアプリケーションをテストします。 IDE の左上で、最初のドロップ ダウンから Debug を選択し、2番目のドロップ ダウンから iPhone Retina (4-inch) > iOS 7.x を選択し、Start (Play ボタンに似ている丸いボタン) ボタンを押します:

  26. これで、iOS シミュレーターでアプリケーションが起動します:

    iOS シミュレーターでは電話の発信をサポートしていません。その代わり、電話を掛ける際に、アラート ダイアログを表示します:

Xamarin Studio を使った初めての Xamarin.iOS アプリケーションの完成です!次のステップ Hello, iOS Deep Dive で、このガイドで習得したツールとスキルをさらに試しましょう。

Visual Studio を使用する場合

このセクションでは、英数字の電話番号を数字の電話番号に変換する Phoneword と呼ばれるアプリケーションを作成します。

  1. スタート メニューから Visual Studio を起動します:

    左上の 新しいプロジェクト... をクリックして、新規に Xamarin.iOS ソリューションを作成します。

  2. 新しいプロジェクト ダイアログ から、Visual C# > iOS > iPhone > Single View Application のテンプレートを選択します。 次の図のように、プロジェクトに Phoneword_iOS、新規ソリューションに Phoneword と名前を付けます:

  3. 次に、ソリューションMainStoryboard.storyboard をダブルクリックしてファイルを開きます:

  4. ツールボックス (画面左側) にある検索バーで "label" と入力し、デザイン画面 (画面中央) に Label をドラッグします:

  5. Dragging Controls (コントロールの囲いの○) のハンドルを掴み、ラベルを拡げます。

  6. デザイン画面で選択した Label で、プロパティ を使用して、LabelTitle プロパティを "Enter a Phoneword:" に変更します:

    注意: 表示 メニューの操作をして、いつでも プロパティ または ツールボックス を使用できます。
  7. 次に、ツールボックス で "text field" を検索し、デザイン画面で ツールボックス から Text Field をドラッグし、Label の下に、"text field" を配置します。Text FieldLabel の幅が同じになるように調整します:

  8. デザイン画面で選択した Text Field で、プロパティ の Identity セクションの Text FieldName プロパティを PhoneNumberText に変更し、Title プロパティを "1-855-XAMARIN" に変更します:

  9. 次に、デザイン画面に ツールボックス から Button をドラッグし、Text Field の下に Button を配置します。 Button の幅も Text FieldLabel と同じ幅になるように調整します:

  10. デザイン画面で選択した Button で、プロパティIdentity セクションの Name プロパティを TranslateButton に変更します。 Title プロパティを "Translate" に変更します:

  11. 上記 2つのステップを繰り返し、デザイン画面の ツールボックス から Button をドラッグし、最初の Button の下にその Button を配置します。 その Button の幅を最初の Button と同じ幅になるように調整します:

  12. デザイン画面で選択した 2番目の Button で、プロパティIdentity セクションにある Name プロパティを CallButton に変更します。 Title プロパティを "Call" に変更します:

    ファイル > 保存 または Ctrl + s ボタンを押して作業内容を保存します。

  13. ここで、英数字から数字に電話番号を変換するコードを追加します。 ソリューション エクスプローラPhoneword_iOS プロジェクトを右クリックして新しいファイルをプロジェクトに追加し、追加 > 新しいファイル... を選択または Ctrl + n ボタンを押します:

  14. 新しいファイル ダイアログで、Visual C# > 空のクラス を選択し、新しいファイルに PhoneTranslator と名前を付けます:

  15. ここで、新しい空の C# クラスを作成します。全てのテンプレートのコードを削除し、以下のコードに置き換えます:

    using System.Text;
    using System;
    namespace Core
    {
        public static class PhonewordTranslator
        {
            public static string ToNumber(string raw)
            {
                if (string.IsNullOrWhiteSpace(raw))
                    return "";
                else
                    raw = raw.ToUpperInvariant();
                var newNumber = new StringBuilder();
                foreach (var c in raw)
                {
                    if (" -0123456789".Contains(c))
                        newNumber.Append(c);
                    else {
                        var result = TranslateToNumber(c);
                        if (result != null)
                            newNumber.Append(result);
                    }    
                    // otherwise we've skipped a non-numeric char
                }
                return newNumber.ToString();
            }
            static bool Contains (this string keyString, char c)
            {
                return keyString.IndexOf(c) >= 0;
            }
            static int? TranslateToNumber(char c)
            {
                if ("ABC".Contains(c))
                    return 2;
                else if ("DEF".Contains(c))
                    return 3;
                else if ("GHI".Contains(c))
                    return 4;
                else if ("JKL".Contains(c))
                    return 5;
                else if ("MNO".Contains(c))
                    return 6;
                else if ("PQRS".Contains(c))
                    return 7;
                else if ("TUV".Contains(c))
                    return 8;
                else if ("WXYZ".Contains(c))
                    return 9;
                return null;
            }
        }
    }
    

    PhoneTranslator.cs ファイルを保存し、閉じます。

  16. 次に、コードを追加して、ユーザー インターフェースを操作します。 バッキング コードを Phoneword_iOSViewController クラスに追加します。 ソリューション エクスプローラPhoneword_iOSViewController.cs をダブルクリックして、開きます:

  17. TranslateButton を操作します。 Phoneword_iOSViewController クラスで、ViewDidLoad メソッドを見つけます。 ViewDidLoad にボタンのコードを追加します。 以下、base.ViewDidLoad() の呼び出しです:

    public override void ViewDidLoad ()
    {
      base.ViewDidLoad ();
      // code goes here
    }
    
  18. TranslateButton と名前を付けた最初のボタンをユーザーが押した際に応答するコードを追加します。以下のコードで ViewDidLoad を追加します:

    string translatedNumber = "";
    TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
      // Convert the phone number with text to a number 
      // using PhoneTranslator.cs
      translatedNumber = Core.PhonewordTranslator.ToNumber(
      PhoneNumberText.Text);   
      // Dismiss the keyboard if text field was tapped
      PhoneNumberText.ResignFirstResponder ();
      if (translatedNumber == "") {
        CallButton.SetTitle ("Call", UIControlState.Normal);
        CallButton.Enabled = false;
        } 
      else {
        CallButton.SetTitle ("Call " + translatedNumber, UIControlState.Normal);
        CallButton.Enabled = true;
        }
    };
    
  19. 次に、CallButton と名前を付けた二番目のボタンをユーザーが押した際に応答するコードを追加します。 TranslateButton のコードの下に以下のコードを追加します:

    CallButton.TouchUpInside += (object sender, EventArgs e) => {
      var url = new NSUrl ("tel:" + translatedNumber);
        // Use URL handler with tel: prefix to invoke Apple's Phone app, 
        // otherwise show an alert dialog                
      if (!UIApplication.SharedApplication.OpenUrl (url)) {
          var av = new UIAlertView ("Not supported",
                      "Scheme 'tel:' is not supported on this device",
                      null,
                      "OK",
                      null);
          av.Show ();
      }
    };
    
  20. 作業を保存し、ビルド > ビルド ソリューション を選択または Ctrl + Shift + B ボタンを押して、アプリケーションをビルドします。 アプリケーションをコンパイルすると、IDE の上位に "Build Successful" とビルドが成功したメッセージが表示されます:

    エラーが発生する場合、前のステップに戻って、アプリケーションのビルドが成功するまで、不正な箇所を修正します。

  21. これで、アプリケーションが動作したので、最後の仕上げを加えていきましょう! Info.plist ファイルのアプリケーション名とアイコンを編集します。 ソリューション エクスプローラInfo.plist をダブルクリックして Info.plist を開きます:

  22. iOS アプリケーション ターゲット セクションで、アプリケーションの名前 を "Phoneword" に変更します:

  23. アプリケーションのアイコンと起動イメージを設定するために、まず Xamarin App Icons & Launch Screens set をダウンロードします。 iPhone Icon セクションで、(57x57) アイコン プレイスホルダーを直接クリックし、Xamarin App Icons & Launch Images ディレクトリから一致するアイコンを選択します:

    6つのアイコンを全て使います。Visual Studio はプレイスホルダーを Xamarin のアイコンに置き換えます:

  24. 次に、起動画像を設定しましょう。 Default.png を標準の解像度 (620x482) のプレイスホルダーに指定し、Default@2x.pngRetina (3.5-inch) プレイスホルダーに指定し、最後に Default-568h@2x.pngRetina (4-inch) プレイスホルダーに指定します:

    画像の名前は、それぞれの解像度に対して、iOS の命名規則に従います。

  25. 最後に、iOS Simulator でアプリケーションをテストします。 IDE ツールバーで、デバッグ を選択し、ドロップ ダウン メニューから iPhone Retina (4-inch) iOS 7.x を選択し、スタート (Play ボタンに似ている緑の三角のボタン) ボタンを押します:

  26. これで、iOS シミュレーターでアプリケーションが起動します:

    iOS シミュレーターでは電話の発信をサポートしていません。その代わり、電話を掛ける際に、アラート ダイアログを表示します。

Visual Studio を使った初めての Xamarin.iOS アプリケーションの完成です! 次のステップ Hello, iOS Deep Dive で、このガイドで習得したツールとスキルをさらに試しましょう。

 


Infragistics Infragistics
エンタープライズ向け統合 UI 開発コンポーネント。WinForms、モバイル、Web 用の UI コントロール。
CodeValue OzCode CodeValue OzCode
Visual Studio デバッガー用のヘッドアップ ディスプレイ。
SmartBear Software SmartBear
GUI テスト / プロファイラー / 負荷テスト / API テスト: ソフトウェア テストの自動化/工数削減/品質向上。
JetBrains
世界中で 100 万人以上の開発者が使用する総合開発環境 (IDE) とコーディング ツール。