次の方法で共有


Hello, iOS – クイックスタート

警告

iOS Designer は、Visual Studio 2019 バージョン 16.8 および Visual Studio 2019 for Mac バージョン 8.8 で非推奨とされ、Visual Studio 2019 バージョン 16.9 および Visual Studio for Mac バージョン 8.9 から削除されています。 iOS のユーザー インターフェイスについては、Xcode の Interface Builder が実行されている Mac で直接ビルドすることをお勧めします。 詳細については、「Xcode を使用したユーザーインターフェイスの設計」を参照してください。

このガイドでは、ユーザーが入力した英字の電話番号を数値の電話番号に変換してから、その番号に電話をかけるアプリケーションの作成方法を説明します。 最終的にアプリケーションは次のようになります。

Hello.iOS クイック スタート アプリ

要件

Xamarin を使用した iOS 開発の要件:

  • macOS High Sierra (10.13) 以降を実行している Mac。
  • App Store からインストールした最新版の Xcode と iOS SDK。

Xamarin.iOS は次のセットアップで機能します。

  • 上記の仕様を満たす最新版の Visual Studio for Mac。

Xamarin.iOS Mac インストール ガイドで段階的インストール手順をご確認いただけます

Xamarin.iOS は次のセットアップで機能します。

  • 最新版の Visual Studio 2019 または Visual Studio 2017 Community、Professional、または Enterprise。Windows 10。上記の仕様を満たす Mac ビルド ホストとペア。

Xamarin.iOS Windows インストール ガイドでステップ バイ ステップのインストール手順をご確認いただけます。

始める前に、Xamarin アプリ アイコン セットをダウンロードしてください。

Visual Studio for Mac のチュートリアル

このチュートリアルでは、英数字の電話番号を数字の電話番号に変換する Phoneword という名称のアプリケーションを作成する方法を説明します。

  1. Applications フォルダーまたはスポットライトから Visual Studio for Mac を起動します。

    起動画面

    起動画面で、[新しいプロジェクト...] をクリックして、新しい Xamarin.iOS ソリューションを作成します。

    iOS ソリューション

  2. [新しいソリューション] ダイアログで [iOS] > [アプリ] > [単一ビュー アプリケーション] テンプレートの順に選択し、C# が選択されていることを確認します。 [次へ] をクリックします。

    単一ビュー アプリケーションの選択

  3. アプリを構成します。 [名前]Phoneword_iOS を指定し、他のすべてを既定値のままにします。 [次へ] をクリックします。

    アプリ名の入力

  4. プロジェクトとソリューションの名前はそのままにします。 ここでプロジェクトの場所を選択するか、既定のままにします。

    プロジェクトの場所の選択

  5. [作成] をクリックしてソリューションを作成します。

  6. Solution PadMain.storyboard ファイルをダブルクリックして開きます。 必ず Visual Studio iOS Designer を使用してファイルを開いてください (ストーリーボードを右クリックし、[ファイルを開くアプリケーションの選択] > [iOS Designer] の順に選択します)。 これで目視で確認しながら UI を作成できます。

    iOS Designer

    "サイズ クラス" は既定で有効になっています。 詳細については、Unified Storyboards ガイドをご覧ください。

  7. ツールボックス パッドの検索バーに「label」と入力し、デザイン サーフェイス (中央の領域) にラベルをドラッグします。

    デザイン サーフェイス (中央の領域) にラベルをドラッグする

    Note

    [表示] > [パッド] の順に選択すれば、Properties Padツールボックスをいつでも表示できます。

  8. ドラッグ コントロールのハンドル (コントロールを囲む円) をつかみ、ラベルを大きくします。

    ラベルの幅を広げる

  9. デザイン サーフェイスでラベルが選択されている状態で、[プロパティ] パッドを利用し、[ラベル][テキスト] プロパティを "Enter a Phoneword:" に変更します。

    ラベルに「Enter a Phoneword」を設定する

  10. ツールボックス内で “テキスト フィールド” を検索し、[ツールボックス][テキスト フィールド] をデザイン サーフェイスにドラッグし、[ラベル] の下に置きます。 テキスト フィールドの幅がラベルの幅と同じになるまで幅を調整します。

    テキスト フィールドをラベルと同じ幅にする

  11. デザイン サーフェイスでテキスト フィールドが選択されている状態で、Properties Pad の ID セクションの [テキスト フィールド][名前] プロパティを PhoneNumberText に変更し、[テキスト] プロパティを "1-855-XAMARIN" に変更します。

    [タイトル] プロパティを 1-855-XAMARIN に変更する

  12. [ボタン][ツールボックス] からデザイン サーフェスにドラッグし、[テキスト フィールド] の下に配置します。 ボタンの幅がテキスト フィールドラベルの幅と同じになるように幅を調整します。

    ボタンの幅がテキスト フィールドやラベルの幅と同じになるように調整する

  13. デザイン サーフェイスでボタンが選択されている状態で、Properties Pad[ID] セクションの [名前] プロパティを TranslateButton に変更します。 [タイトル] プロパティを "Translate" に変更します。

    [タイトル] プロパティを Translate に変更する

  14. 上記の 2 つの手順を繰り返し、[ボタン][ツールボックス] からデザイン サーフェスにドラッグし、最初の [ボタン] の下に配置します。 ボタンの幅が最初のボタンの幅と同じになるように幅を調整します。

    ボタンの幅が最初のボタンの幅と同じになるように調整する

  15. デザイン サーフェイスで 2 つ目のボタンが選択されている状態で、[プロパティ] パッドの [ID] セクションの [名前] プロパティを CallButton に変更します。 [タイトル] プロパティを "Call" に変更します。

    [タイトル] プロパティを Call に変更する

    [ファイル] > [保存] の順に選択するか、⌘ + s を押し、変更内容を保存します。

  16. 電話番号を英数字から数字に変換するには、いくつかのロジックをアプリに追加する必要があります。 Solution PadPhoneword_iOS プロジェクトを右クリックし、[追加] > [新しいファイル...] の順に選択するか、⌘ + n を押し、新しいファイルをプロジェクトに追加します。

    新しいファイルをプロジェクトに追加する

  17. [新しいファイル] ダイアログで [全般] > [空のクラス] の順に選択し、新しいファイルに「PhoneTranslator」という名前を付けます。

    [空のクラス] を選択し、新しいファイル PhoneTranslator という名前を付ける

  18. これで、新しい空の C# クラスが作成されます。 テンプレート コードをすべて削除し、次のコードに置き換えます。

    using System.Text;
    using System;
    
    namespace Phoneword_iOS
    {
        public static class PhoneTranslator
        {
            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 ファイルを保存して閉じます。

  19. ユーザー インターフェイスを接続するコードを追加します。 Solution PadViewController.cs をダブルクリックして開きます。

    ユーザー インターフェイスを接続するコードを追加する

  20. 最初に TranslateButton を接続します。 ViewController クラスで、ViewDidLoad メソッドを見つけ、base.ViewDidLoad() 呼び出しの下に次のコードを追加します。

    string translatedNumber = "";
    
    TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
        // Convert the phone number with text to a number
        // using PhoneTranslator.cs
        translatedNumber = PhoneTranslator.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;
        }
    };
    

    ファイルの名前空間が異なる場合、using Phoneword_iOS; を追加します。

  21. 2 つ目のボタンである CallButton をユーザーが押したときに応答するためのコードを追加します。 TranslateButton のコードの下に次のコードを配置し、ファイルの一番上に using Foundation; を追加します。

        CallButton.TouchUpInside += (object sender, EventArgs e) => {
            // Use URL handler with tel: prefix to invoke Apple's Phone app...
            var url = new NSUrl ("tel:" + translatedNumber);
    
            // ...otherwise show an alert dialog
            if (!UIApplication.SharedApplication.OpenUrl (url)) {
                var alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
                alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
                PresentViewController (alert, true, null);
            }
        };
    
  22. 変更内容を保存したら、[ビルド] > [すべてビルド] の順に選択するか、⌘ + B を押し、アプリケーションをビルドします。アプリケーションがコンパイルされると、IDE の一番上に成功メッセージが表示されます。

    IDE の一番上に成功メッセージが表示される

    エラーがある場合は、アプリケーションが正常にビルドされるまで、前の手順を実行し、誤りを修正します。

  23. 最後に iOS シミュレーターでアプリケーションをテストします。 IDE の左上で、最初のドロップダウンから [デバッグ] を選択し、2 つ目のドロップダウンから [iPhone XR iOS 12.0] (またはその他の使用可能なシミュレーター) を選択し、[開始] (再生ボタンに似た三角形のボタン) を押します。

    シミュレーターを選択して [開始] を押す

    Note

    現在のところ、Apple の要件に起因し、場合によっては、デバイスまたはシミュレーターのコードをビルドするため、開発証明書または "署名 ID" を用意する必要があります。 デバイス プロビジョニング ガイドの手順に従ってこれを設定します。

  24. これにより、iOS シミュレーター内でアプリケーションが起動します。

    iOS シミュレーター内で実行されているアプリケーション

    iOS シミュレーターでは通話に対応していません。代わりに、電話をかけようとすると警告ダイアログが表示されます。

    電話をかけようとしたときの警告ダイアログ

Visual Studio チュートリアル

このチュートリアルでは、英数字の電話番号を数字の電話番号に変換する Phoneword という名称のアプリケーションを作成する方法を説明します。

Note

このチュートリアルでは、Windows 10 仮想マシンの Visual Studio Enterprise 2017 を使用します。 上記の要件を満たす限り、実際のセットアップはこれと異なってもかまいません。一部のスクリーンショットが実際とは異なる場合があります。

Note

このチュートリアルを進める前に、Visual Studio から Mac に接続しておく必要があります。 これは、Xamarin.iOS が、アプリケーションのビルドと起動に Apple のツールを利用するからというのが理由です。 「Mac とペアリング」ガイドの手順に従い、設定を始めます。

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

    スタート画面

    [ファイル] > [新規] > [プロジェクト...]> [Visual C#] > [iPhone と iPad] > [iOS アプリ (Xamarin)] の順に選択し、新しい Xamarin.iOS ソリューションを作成します。

    iOS アプリ (Xamarin) プロジェクト タイプの選択

    次に表示されたダイアログで [単一ビュー アプリ] テンプレートを選択し、[OK] をクリックしてプロジェクトを作成します。

    単一ビュー プロジェクト テンプレートの選択

  2. ツール バーの [Xamarin Mac エージェント] アイコンが緑であることを確認します。

    ツール バーの [Xamarin Mac エージェント] アイコンが緑であることを確認します

    緑でない場合は、Mac ビルド ホストへの接続がないことを示しているため、構成ガイドの手順に従って接続します。

  3. ソリューション エクスプローラー で iOS デザイナーの Main.storyboard ファイルをダブルクリックして開きます。

    iOS Designer

  4. [ツールボックス] タブの検索バーに「label」と入力し、デザイン サーフェイス (中央の領域) にラベルをドラッグします。

    デザイン サーフェイス (中央の領域) にラベルをドラッグする

  5. 次に、ドラッグ コントロールのハンドルをつかみ、ラベルを大きくします。

    ラベルの幅を広げる

  6. デザイン サーフェイスでラベルが選択されている状態で、[プロパティ] ウィンドウを利用し、[ラベル][テキスト] プロパティを "Enter a Phoneword:" に変更します。

    ラベルの [テキスト] プロパティを

    Note

    [表示] メニューに移動すれば、[プロパティ][ツールボックス] をいつでも表示できます。

  7. ツールボックス内で “テキスト フィールド” を検索し、[ツールボックス][テキスト フィールド] をデザイン サーフェイスにドラッグし、[ラベル] の下に置きます。 テキスト フィールドの幅がラベルの幅と同じになるまで幅を調整します。

    テキスト フィールドの幅がラベルの幅と同じになるまで調整する

  8. デザイン サーフェイスでテキスト フィールドが選択されている状態で、[プロパティ] パッドの ID セクションの [テキスト フィールド][名前] プロパティを PhoneNumberText に変更し、[テキスト] プロパティを "1-855-XAMARIN" に変更します。

    [テキスト] プロパティを 1-855-XAMARIN に変更する

  9. [ボタン][ツールボックス] からデザイン サーフェスにドラッグし、[テキスト フィールド] の下に配置します。 ボタンの幅がテキスト フィールドラベルの幅と同じになるように幅を調整します。

    ボタンの幅がテキスト フィールドやラベルの幅と同じになるように調整する

  10. デザイン サーフェイスでボタンが選択されている状態で、[プロパティ] パッドの [ID] セクションの [名前] プロパティを TranslateButton に変更します。 [タイトル] プロパティを "Translate" に変更します。

    [タイトル] プロパティを Translate に変更する

  11. 前の 2 つの手順を繰り返し、[ボタン][ツールボックス] からデザイン サーフェスにドラッグし、最初の [ボタン] の下に配置します。 ボタンの幅が最初のボタンの幅と同じになるように幅を調整します。

    ボタンの幅が最初のボタンの幅と同じになるように調整する

  12. デザイン サーフェイスで 2 つ目のボタンが選択されている状態で、[プロパティ][ID] セクションの [名前] プロパティを CallButton に変更します。 [タイトル] プロパティを "Call" に変更します。

    [タイトル] プロパティを Call に変更する

    [ファイル] > [すべて保存] の順に選択するか、Ctrl + s を押し、変更内容を保存します。

  13. 電話番号を英数字から数字に変換するコードをいくつか追加します。 これを行うには、最初に新しいファイルをプロジェクトに追加します。ソリューション エクスプローラーPhoneword プロジェクトを右クリックし、[追加] > [新しい項目...] の順に選択するか、Ctrl + Shift + A を押してください。

    電話番号を英数字から数字に変換するコードをいくつか追加する

  14. [新しい項目の追加] ダイアログ (プロジェクトを右クリックし、[追加] > [新しい項目] の順に選択する) で [Apple] > [クラス] の順に選択し、新しいファイルに「PhoneTranslator」という名前を付けます。

    PhoneTranslator という名前の新しいクラスを追加する

    重要

    アイコンに C# がある 'class' テンプレートを必ず選択してください。 それ以外を選択すると、この新しいクラスを参照できないことがあります。

  15. これで、新しい C# クラスが作成されます。 テンプレート コードをすべて削除し、次のコードに置き換えます。

    using System.Text;
    using System;
    
    namespace Phoneword
    {
        public static class PhoneTranslator
        {
            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. ハンドルとボタンの相互作用にロジックを追加できるように、ソリューション エクスプローラーViewController.cs をダブルクリックして開きます。

    ボタンとの相互作用を処理するために追加されたロジック

  17. 最初に TranslateButton を接続します。 ViewController クラスで、ViewDidLoad メソッドを見つけます。 ViewDidLoad 内の base.ViewDidLoad() 呼び出しの下に次のボタン コードを追加します。

    string translatedNumber = "";
    
    TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
    
        // Convert the phone number with text to a number
        // using PhoneTranslator.cs
        translatedNumber = PhoneTranslator.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;
            }
    };
    

    ファイルの名前空間が異なる場合、using Phoneword; を追加します。

  18. 2 つ目のボタンである CallButton をユーザーが押したときに応答するためのコードを追加します。 TranslateButton のコードの下に次のコードを配置し、ファイルの一番上に using Foundation; を追加します。

    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 alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
                        alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
                        PresentViewController (alert, true, null);
                    }
    };
    
  19. 変更内容を保存したら、[ビルド] > [ソリューションのビルド] の順に選択するか、Ctrl + Shift + B を押し、アプリケーションをビルドします。アプリケーションがコンパイルされると、IDE の一番下に成功メッセージが表示されます。

    IDE の一番下に成功メッセージが表示される

    エラーがある場合は、アプリケーションが正常にビルドされるまで、前の手順を実行し、誤りを修正します。

  20. 最後にリモートの iOS シミュレーターでアプリケーションをテストします。 IDE ツール バーで、ドロップダウン メニューから [デバッグ][iPhone 8 Plus iOS x.x] を選択し、[開始] (再生ボタンに似た緑の三角形) を押します。

    [開始] を押す

  21. これにより、iOS シミュレーター内でアプリケーションが起動します。

    iOS シミュレーター内で実行されているアプリケーション

    iOS シミュレーターでは通話に対応していません。代わりに、電話をかけようとすると警告ダイアログが表示されます。

    電話をかけようとすると警告ダイアログが表示される

おつかれさまでした。これで最初の Xamarin.iOS アプリケーションが完成しました。

次は、「Hello, iOS Deep Dive」で、このガイドに登場したツールやスキルを詳しく分析します。