モバイルアプリ開発入門

iOSやAndroidアプリの開発入門者向けブログです。

組み合わせテスト(直行表・オールペア法)を使ってみよう

はじめに

ソフトウェアのテストには様々な技法があります。
その中で、組み合わせテスト技法である直行表・オールペア法について紹介します。
直行表やオールペア法に則してテスト設計をすることで、テストすべき項目を洗い出してソフトウェアのテストをすることができます。  

直行表とは

直交表とは、どの2列をとっても、その水準のすべての組み合わせが同数回現れる配列のことです。
テスト対象の項目を因子、対象項目が取りうる値を水準と呼びます。
例えば、以下のようになります。

因子 水準
性別 男性・女性
年齢 20歳未満・20歳以上
出生地 日本・米国・日米以外

これらの全組み合わせは2×2×3=12通りあります。
これを直行表で表すと以下のようになります。

No. 性別 年齢 出生地
1 男性 20歳未満 日本
2 男性 20歳未満 米国
3 男性 20歳未満 日米以外
4 男性 20歳以上 日本
5 男性 20歳以上 米国
6 男性 20歳以上 日米以外
7 女性 20歳未満 日本
8 女性 20歳未満 米国
9 女性 20歳未満 日米以外
10 女性 20歳以上 日本
11 女性 20歳以上 米国
12 女性 20歳以上 日米以外

これは、すべての因子の水準同士の組み合わせを表現しているので、全網羅といったりします。また、3つの因子の水準同士の組み合わせを表現しているので、3因子間網羅と呼んだりします。
ここで一つ疑問が生じます。因子の数や水準が増えていった場合はどうなるでしょうか?
例えば、因子の種類が9種類で、それぞれの因子の水準の数は9種類あると、9の9乗になるので、387420489通りになります。
一方で、ソフトウェアテストの世界では、Software fault interactions and implications for software testing - IEEE Journals & Magazine の論文にあるように、以下であることが経験的に分かっています。

  • 経験的根拠「多くの欠陥は2因子間でみつかる」
  • 1因子で見つかる欠陥: 29%〜68%
  • 2因子で見つかる欠陥: 70%〜97%
  • 3因子で見つかる欠陥: 89%〜99%

とするとすべての因子の水準同士の組み合わせでなくても、2因子や3因子の水準同士の組み合わせでもソフトウェアのテストとしては十分な場合が多いと考えられます。

例えば、前述の組み合わせの2因子間網羅での直行表は以下になります。

No. 性別 年齢 出生地
1 女性 20歳以上 米国
2 男性 20歳未満 日本
3 女性 20歳未満 米国
4 女性 20歳以上 日本
5 女性 20歳以上 日米以外
6 男性 20歳未満 日米以外
7 男性 20歳以上 米国

組み合わせテストツール

前述のような、2因子間網羅や3因子間網羅はツールで自動で抽出できます。
例えば、MicrosoftOSSのPICTなどがあります。

おわりに

その他組み合わせテストの技法やPICTの簡単な使い方については後日紹介したいと思います。

Google Analytics for Firebaseを使ってみよう(iOS, Objective-c)

はじめに

iOSAndroid・Web等に向けた、Google Analytics for FirebaseというGoogleのサービスがあります。これは何のサービスかというと、アプリのイベントログやアクセスログを解析・可視化するためのサービスです。これを使うことで、開発者はユーザのアプリの利用状況を知ることができます。例えば、どのバージョンが多く使われているか、どの機能がよく使われているか、どの地域でどのくらい使われるかなどです。
さて、今回はGoogle Analytics for FirebaseのiOSでの利用方法を説明します。前回作ったSample WebViewアプリを元に実際に使ってみましょう。

事前準備

Google Analytics for FirebaseをMacにインストールする場合は、一般的にiOSライブラリ管理ツールであるCocoaPodsを利用します。また、CocoaPodsをMacにインストールするのにmacOS(またはLinux)用パッケージマネージャーのHomebrewを使うことが多いです。
ここでは、MacにHomebrewおよびCocoaPodsをインストールしましょう。
1. Macでターミナル を起動し、以下のコマンドを実行します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

2. 次に以下のコマンドを実行します。

brew install cocoapods

これで事前準備は完了です。

Google Analytics for Firebaseの設定

Google Analytics for Firebaseを利用するため、ウェブ上のコンソールの設定およびiOS用のSDKの設定を行います。
1. 以下のウェブページにアクセスし、ログインします。
firebase.google.com Googleアカウントをお持ちでない方は、作成してください。
2. [コンソールへ移動]をクリックします(図1)。

f:id:ActivityService:20200630232024p:plain
図1
3. [プロジェクトを追加]をクリックします(図2)。
f:id:ActivityService:20200630232247p:plain
図2
4. プロジェクト名に"Sample Analytics"を入力の上、[続行]をクリックします(図3)。
f:id:ActivityService:20200630232405p:plain
図3
5. [続行]をクリックします(図4)。
f:id:ActivityService:20200630232731p:plain
図4
6. [Google アナリティクス アカウントを選択または作成します。]で"SampleAnalytics"でアカウントを作成の上、選択します(図5)。
7. [プロジェクト作成]をクリックします(図5)。
f:id:ActivityService:20200630233000p:plain
図5
8. [続行]をクリックします(図6)。
f:id:ActivityService:20200630233111p:plain
図6
9. [アプリを]追加 > iOSボタンをクリックします(図7)。
f:id:ActivityService:20200708075359p:plain
図7
10. [iOSバンドルID]で"com.sampleapps.SampleWebView"を入力の上、[アプリを登録]をクリックします(図8)。
f:id:ActivityService:20200708075457p:plain
図8
11. [GoogleService-Info.plistをタウンロード]をクリックし、GoogleService-Info.plistをダウンロードします(図9)。
f:id:ActivityService:20200708075548p:plain
図9
GoogleService-Info.plistはFirebaseを利用するための設定ファイルです。
12. Xcodeで、[SampleWebView] > [SampleWebView]を開きます。右クリックをクリックします(図10)。
f:id:ActivityService:20200708075721p:plain
図10
13. [Show in Finder]をクリックし、Finderで該当パスを開き、先ほどダウンロードしGoogleService-Info.plistをコピーします(図11)。
f:id:ActivityService:20200708075839p:plain
図11
14. Xcodeで、[SampleWebView] > [SampleWebView]を開きます。右クリックをクリックします(図12)。
f:id:ActivityService:20200708075721p:plain
図12
15. [Add Files to "SampleWebView"]をクリックし、プロジェクトにGoogleService-Info.plistを追加します(図13)。
f:id:ActivityService:20200708075839p:plain
図13
16. 正しい位置にGoogleService-Info.plistがあることを確認してください(図14)。
f:id:ActivityService:20200708080023p:plain
図14
17. もう一度Firebaseのウェブページに戻り、[次へ]をクリックします(図15)。
f:id:ActivityService:20200708075839p:plain
図15
18. ターミナル以下のコマンドを実行し、SampleWebViewのディレクトリに移動してください(図16)。

pushd <SampleWebViewのディレクトリパス>

f:id:ActivityService:20200708080301p:plain
図16
19. ターミナル以下のコマンドを実行し、Podfile(CocoaPodsの設定ファイル)を初期化します(図17)。

pod init

f:id:ActivityService:20200708080301p:plain
図17
20. ターミナル以下のコマンドを実行します(図18)。こうすることでviエディタで編集します。

vi Podfile

f:id:ActivityService:20200708080301p:plain
図18
21. キーボードの[i]キーを押し、編集を有効の上、以下のコードを追記します(図19)。

pod 'Firebase/Analytics'

f:id:ActivityService:20200708080445p:plain
図19
22. キーボードの[esc]キー > [:] キー> [w]キーの順で押して、編集を保存します。
23. [:] キー> [q]キーの順で押して、viエディタを閉じます。
24. ターミナル で以下のコマンドを実行し、Google Analytics for Firebase SDKをインストールします(図20)。
25. ターミナル でエラーが無いことを確認してください(図21)。
26. Xcodeを閉じて、FinderでSampleWebViewのパスを開き、SampleWebView.xcworkspaceをダブルクリックして、Xcodeを起動してください(図22)。
間違えてSampleWebView.xcodeprojを開かないようにください。以降の作業でエラーがでます。
f:id:ActivityService:20200708082027p:plain
図22
27. 再度Firebaseのウェブページに戻り、[次へ]をクリックします(図23)。
f:id:ActivityService:20200708082740p:plain
図23
28. 再度、[次へ]をクリックします(図24)。
f:id:ActivityService:20200708083240p:plain
図24
29. [このステップをスキップ]をクリックします(図25)。(本来ならば、一度アプリをビルドして、アプリがサーバーと通信したかどうかを確認すべきですが、今回はスキップしました。)
f:id:ActivityService:20200708083820p:plain
図25
30. Google Analytics for Firebaseの画面で[アナリティクス データを待機しています...]が表示されていると思います(図26)。初回の反映は1日程度かかります。
f:id:ActivityService:20200630235752p:plain
図26
これでGoogle Analytics for Firebaseの設定は完了です。

Google Analytics for Firebaseの実装

Google Analytics for Firebaseの実装をします。
SampleWebViewアプリを起動しWebViewを表示した時に、"WebView(iOS)"タグをFirebaseに送るようにします。こうすることで、Google Analytics for Firebaseのコンソール上で、「SampleWebViewアプリが起動しWebViewを表示した」ことが分かるようになります。(今回はタグを"WebView(iOS)"としていますが、任意の名前で構いません。)
1. [SampleWebView] > [SampleWebView] > AppDelegate.mをクリックします(図27)。
2. 以下のコードを追記します(図27)。

@import Firebase; // Google Analytics for Firebaseのインポート
  1. application:didFinishLaunchingWithOptionsメソッド内に以下のコードを追記します(図28)。
[FIRApp configure]; // Firebase を初期化する

f:id:ActivityService:20200708084837p:plain
図28
4. [SampleWebView] > [SampleWebView] > ViewController.mをクリックします(図29)。
5. Google Analytics for Firebaseにデータを送るための、以下の処理viewDidLoadメソッドに追記します(図29)。

// Google Analytics for Firebaseにデータを送信
[FIRAnalytics logEventWithName:@"WebView(iOS)" parameters:nil];

f:id:ActivityService:20200708085033p:plain
図29
これで実装は完了です。

Google Analytics for Firebaseの設定

  1. SampleWebViewをビルドして、端末にインストールしてください。
  2. 以下のウェブページにアクセスし、ログインします。
    firebase.google.com
  3. [コンソールへ移動]をクリックします。
  4. [Sample Analytics]を選択してください(図30)。
    f:id:ActivityService:20200701001805p:plain
    図31
  5. Analytics画面でユーザーの利用状況を確認できます(図31)。
    アクセスログを確認できました。
    f:id:ActivityService:20200701130015p:plain
    図31
  6. 左側メニュー > [分析] > [Events]をクリックします(図32)。
    f:id:ActivityService:20200701130106p:plain
    図32
  7. [既存のイベント]で"WebView"の利用件数を確認できます(図33)。
    イベントログを確認できました。

アプリをリリースする際の注意点

2018年5月25日に「EU一般データ保護規則」(GDPRGeneral Data Protection Regulation)が施行されました。 これは欧州連合 (EU) 内の全ての個人のためにデータ保護を強化し統合することを意図している規則です。
Google Analyticsでデータを取得するアプリをリリースした際にEUで使われると、GDPRに基づく罰則の対象になることがあります。具体的には、違反した場合に巨額の罰金が科されます。
罰則の対象にならないように、「ユーザーの同意を得てからGoogle Analyticsでデータを取得する」や「日本国外では利用できないようにする」などの対応をしてください。これはあくまで例なので、GDPRについて十分に調査・確認の上、判断・対応をしてください。

おわりに

今回はGoogle Analytics for FirebaseiOSでの利用方法を説明しました。Google Analytics for Firebaseを行うことで、アプリのユーザー・利用データを分析できることが分かったと思います。
今回の分析方法は単純な例でしたが、他にも様々な分析ができるので、Google Analytics for Firebaseコンソール上で色々と試すといいかもしれません。
また、Firebaseは今回紹介したGoogle Analytics以外にも様々なサービスがあります。また機会があれば、他のサービスについても紹介したいと思います。

Google Analytics for Firebaseを使ってみよう(Android, Java)

はじめに

AndroidiOS・Web等に向けた、Google Analytics for FirebaseというGoogleのサービスがあります。これは何のサービスかというと、アプリのイベントログやアクセスログを解析・可視化するためのサービスです。これを使うことで、開発者はユーザのアプリの利用状況を知ることができます。例えば、どのバージョンが多く使われているか、どの機能がよく使われているか、どの地域でどのくらい使われるかなどです。
さて、今回はGoogle Analytics for FirebaseのAndroidでの利用方法を説明します。前回作ったSample WebViewアプリを元に実際に使ってみましょう。

事前準備

Google Analytics for Firebaseは、アプリのパッケージ名にcom.exampleが含まれていると正しく動作しない場合があります。 これを回避するために、パッケージ名をcom.example.samplewebviewからcom.test.samplewebviewに変更します。
1. [SampleWebView] > [app] > [src] > [main] > AndroidManifest.xmlをクリックします。
2. 図1のようにcom.example.samplewebviewからcom.test.samplewebviewに変更します。

f:id:ActivityService:20200630224713p:plain
図1
3. [SampleWebView] > [app] > [src] > [main] > [java] > [com.example.samplewebview] > MainActivity.javaをクリックします。
4. 図2のようにcom.example.samplewebviewのexampleを選択の上、右クリックします。
f:id:ActivityService:20200630225743p:plain
図2
5. [Refactor] > [Rename...]をクリックします(図3)。
f:id:ActivityService:20200630225908p:plain
図3
6. [Rename package]をクリックします(図4)。
f:id:ActivityService:20200630230239p:plain
図4
7. "example"から"test"に書き換えた後、[Refactor]をクリックします(図5)。
f:id:ActivityService:20200630230506p:plain
図5
8. [Do Refactor]をクリックします(図6)。
f:id:ActivityService:20200630231038p:plain
図6
9. [SampleWebView] > [app] > build.gradleをクリックします。
10. 図7のようにapplicationIdを"com.example.samplewebview"から"com.test.samplewebview"に変更します。
f:id:ActivityService:20200630231521p:plain
図7
これで事前準備は完了です。

Google Analytics for Firebaseの設定

Google Analytics for Firebaseを利用するため、ウェブ上のコンソールの設定およびAndroid用のSDKの設定を行います。
1. 以下のウェブページにアクセスし、ログインします。
firebase.google.com Googleアカウントをお持ちでない方は、作成してください。
2. [コンソールへ移動]をクリックします(図8)。

f:id:ActivityService:20200630232024p:plain
図8
3. [プロジェクトを追加]をクリックします(図9)。
f:id:ActivityService:20200630232247p:plain
図9
4. プロジェクト名に"Sample Analytics"を入力の上、[続行]をクリックします(図10)。
f:id:ActivityService:20200630232405p:plain
図10
5. [続行]をクリックします(図11)。
f:id:ActivityService:20200630232731p:plain
図11
6. [Google アナリティクス アカウントを選択または作成します。]で"SampleAnalytics"でアカウントを作成の上、選択します(図12)。
7. [プロジェクト作成]をクリックします(図12)。
f:id:ActivityService:20200630233000p:plain
図12
8. [続行]をクリックします(図13)。
f:id:ActivityService:20200630233111p:plain
図13
9. Androidボタンをクリックします(図14)。
f:id:ActivityService:20200630233222p:plain
図14
10. [Androidパッケージ名]で"com.test.samplewebview"を入力の上、[アプリを登録]をクリックします(図15)。
f:id:ActivityService:20200630233432p:plain
図15
11. [google-services.jsonをタウンロード]をクリックし、google-services.jsonをダウンロードします(図16)。
google-services.jsonFirebaseを利用するための設定ファイルです。
f:id:ActivityService:20200630233821p:plain
図16
12. AndroidStudioで、[SampleWebView] > [app]に先ほどダウンロードしたgoogle-services.jsonをコピーします(図17)。

f:id:ActivityService:20200630234234p:plain
図17
13. もう一度Firebaseのウェブページに戻り、[次へ]をクリックします(図18)。
f:id:ActivityService:20200630234527p:plain
図18
14. 再度AndroidStudioに戻り、[SampleWebView] > [build.gradle]で以下を追記します(図19)。

classpath 'com.google.gms:google-services:4.3.3'

f:id:ActivityService:20200630234838p:plain
図19
15. [SampleWebView] > [app] > [build.gradle]で以下のコードを追記します(図20)。

apply plugin: 'com.google.gms.google-services'
implementation 'com.google.firebase:firebase-analytics:17.2.2'

f:id:ActivityService:20200630235139p:plain
図20
16. 再度Firebaseのウェブページに戻り、[次へ]をクリックします(図21)。
f:id:ActivityService:20200630235251p:plain
図21
17. [このステップをスキップ]をクリックします(図22)。(本来ならば、一度アプリをビルドして、アプリがサーバーと通信したかどうかを確認すべきですが、今回はスキップしました。)
f:id:ActivityService:20200630235514p:plain
図22
18. Google Analytics for Firebaseの画面で[アナリティクス データを待機しています...]が表示されていると思います(図23)。初回の反映は1日程度かかります。
f:id:ActivityService:20200630235752p:plain
図23
これでGoogle Analytics for Firebaseの設定は完了です。

Google Analytics for Firebaseの実装

Google Analytics for Firebaseの実装をします。
SampleWebViewアプリを起動しWebViewを表示した時に、"WebView"タグをFirebaseに送るようにします。こうすることで、Google Analytics for Firebaseのコンソール上で、「SampleWebViewアプリが起動しWebViewを表示した」ことが分かるようになります。(今回はタグを"WebView"としていますが、任意の名前で構いません。)
1. [SampleWebView] > [app] > [src] > [main] > [java] > [com.test.samplewebview] > MainActivity.javaをクリックします(図24)。
2. MainActivity.javaで以下のメンバ変数を追記します(図24)。

private FirebaseAnalytics mFirebaseAnalytics;
  1. Google Analytics for Firebaseにデータを送るための、以下のsendLog()メソッドを追加します(図24)。
private void sendLog(Context context, String className, String functionName){
    // Google Analytics for Firebaseの初期化
    mFirebaseAnalytics = FirebaseAnalytics.getInstance(context);
    // イベントをロギングする
    Bundle bundle = new Bundle();
    bundle.putString(functionName, className);
    mFirebaseAnalytics.logEvent(functionName, bundle);
}
  1. onCreate()メソッドで、以下のようにsendLog()メソッドを呼び出します(図24)。
sendLog(this, this.getLocalClassName(), "WebView"); //Google Analytics for Firebaseにログを送る

f:id:ActivityService:20200701001327p:plain
図24

これで実装は完了です。

Google Analytics for Firebaseの設定

  1. SampleWebViewをビルドして、端末にインストールしてください。
  2. 以下のウェブページにアクセスし、ログインします。
    firebase.google.com
  3. [コンソールへ移動]をクリックします。
  4. [Sample Analytics]を選択してください(図25)。
    f:id:ActivityService:20200701001805p:plain
    図25
  5. Analytics画面でユーザーの利用状況を確認できます。
    アクセスログを確認できました。
    f:id:ActivityService:20200701130015p:plain
    図26
  6. 左側メニュー > [分析] > [Events]をクリックします。
    f:id:ActivityService:20200701130106p:plain
    図27
  7. [既存のイベント]で"WebView"の利用件数を確認できます。
    イベントログを確認できました。
    f:id:ActivityService:20200701130147p:plain
    図28

アプリをリリースする際の注意点

2018年5月25日に「EU一般データ保護規則」(GDPRGeneral Data Protection Regulation)が施行されました。 これは欧州連合 (EU) 内の全ての個人のためにデータ保護を強化し統合することを意図している規則です。
Google Analyticsでデータを取得するアプリをリリースした際にEUで使われると、GDPRに基づく罰則の対象になることがあります。具体的には、違反した場合に巨額の罰金が科されます。
罰則の対象にならないように、「ユーザーの同意を得てからGoogle Analyticsでデータを取得する」や「日本国外では利用できないようにする」などの対応をしてください。これはあくまで例なので、GDPRについて十分に調査・確認の上、判断・対応をしてください。

おわりに

今回はGoogle Analytics for FirebaseAndroidでの利用方法を説明しました。Google Analytics for Firebaseを行うことで、アプリのユーザー・利用データを分析できることが分かったと思います。
今回の分析方法は単純な例でしたが、他にも様々な分析ができるので、Google Analytics for Firebaseコンソール上で色々と試すといいかもしれません。
また、Firebaseは今回紹介したGoogle Analytics以外にも様々なサービスがあります。また機会があれば、他のサービスについても紹介したいと思います。

WebViewを使ってみよう(Android, Java)

はじめに

Androidでは、WebViewChrome Custom Tabsを利用して実装することで、ウェブページをアプリ内で表示することができます。

今回はWebViewの利用方法を説明します。

前準備

プロジェクトの作成

  1. Android Studioを起動してください。
  2. 起動画面の[Start a new Android Studio Project]をクリックします(図1)。
    f:id:ActivityService:20200623220543p:plain
    図1
  3. [Empty Activity]を選択の上、[Next]をクリックします(図2)。
    f:id:ActivityService:20200623221456p:plain
    図2
  4. [Name]に"Sample WebView"を入力の上、[Finish]をクリックします(図3)。
    f:id:ActivityService:20200623221623p:plain
    図3

これでアプリの前準備は完了です。

パーミッションの追加

今回はWebViewを使うので、アプリのインターネットの権限を有効にする必要があります。
1. [app] > [manifests] > [AndroidManifest.xml]をクリックします(図4)。
2. 以下のコードをAndroidManifest.xmlに追記します(図4)。

<uses-permission android:name="android.permission.INTERNET"/>

f:id:ActivityService:20200623221734p:plain
図4
これでアプリのインターネットの権限が有効になりました。

レイアウトの追加

画面にWebViewを表示するために、WebViewのレイアウトを設定する必要があります。
1. [app] > [res] > [layout] > [activity_main.xml]をクリックします(図5)。

f:id:ActivityService:20200623222237p:plain
図5
2. 以下のコードをactivity_main.xmlに追記し編集します(図6)。

<WebView
    android:id="@+id/webView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="1dp"
    tools:layout_editor_absoluteY="1dp" />

f:id:ActivityService:20200623222300p:plain
図6

wrap_contentを指定することで、指定したViewを表示するのに十分なサイズを自動で指定できます。

WebViewの実装

1. [app] > [java] > [com.example.samplewebview] > [MainActivity.java]をクリックします(図7)。

f:id:ActivityService:20200623223117p:plain
図7

2. MainActivity.javaに以下のコードを追記します(図8)。

static final String URL = "https://google.com";
private WebView webView;

3. onCreate()メソッド内に以下のコードを追記します(図8)。

// Web Viewの初期設定
webView = (WebView) findViewById(R.id.webView);
webView.setWebViewClient(new WebViewClient()); // WebViewを設定する
webView.getSettings().setJavaScriptEnabled(true); // JavaScriptを有効にする
webView.loadUrl(URL); // URLを読み込む

これでMainActivityが呼び出された場合、WebViewが表示されます。

4. onKeyDown()メソッドを作成し、以下のコードを追記します(図8)。

@Override
public boolean onKeyDown(int keyCode, KeyEvent e){
    if(keyCode == KeyEvent.KEYCODE_BACK){ // 戻るボタンがタップされた時
        if(webView != null && webView.canGoBack()){ // WebViewがNULLでなく、閲覧履歴があるなら
            webView.goBack(); // 一つ前のウェブページを表示する
        }
        return true;
    }else{
        return super.onKeyDown(keyCode, e);
    }
}

これで、端末の戻るボタンがタップされた時に一つ前のウェブページが表示されるようになります。

5. onResume()メソッドを作成し、以下のコードを追記します(図8)。

@Override
protected void onResume() {
    super.onResume();// バックグラウンドからフォアグランドに戻った時など
    if(webView != null){ // WebViewが空でなければ
        String url = webView.getUrl(); // 現在のウェブページを
        webView.loadUrl(url); // 再表示する
    }
}

f:id:ActivityService:20200623223933p:plain
図8
これで、バックグラウンドからフォアグランドに戻った時にも正しく表示されるようになります。

動作確認

  1. 上部のツールバーでビルド先(端末やエミュレーター)を選択の上、[▶︎]をクリックします(図9)。
    f:id:ActivityService:20200623224105p:plain
    図9
  2. ビルド先(端末やエミュレーター)で指定したURLのウェブページが表示されるのを確認できました(図10)。
    f:id:ActivityService:20200623224218j:plain
    図10

おわりに

WebViewChrome Custom Tabsは様々な場面で使われます。例えば、OAuth2.0を使った認可・認証のログイン画面の表示やネットショッピングサイトのアプリ(アプリはWebViewやChrome Custom Tabsのみ実装し、アプリ内でモバイル向けのウェブページを表示するようにしている場合もあるようです。)によく使われています。もちろん、ウェブブラウザアプリなどにも利用されています。

WebViewを使ってみよう(iOS, Objective-C)

はじめに

iOS&iPadOSでは、WebKit FrameworkSFSafariViewControllerを利用して実装することで、ウェブページをアプリ内で表示することができます。

今回はWebKit Frameworkの利用方法を説明します。

前準備

プロジェクトの作成

  1. Xcodeを起動してください。

  2. 起動画面の [Create a new Xcode project]をクリックします(図1)。

    f:id:ActivityService:20200617002521p:plain
    図1

  3. [Single View App]を選択のうえ、[Next]ボタンをクリックします(図2)。

    f:id:ActivityService:20200617002527p:plain
    図2

  4. [Product Name]に"Sample WebView"と入力します。
     "Sample WebView"がアプリ名になります(図3)。

  5. [Language]で"Objective-C"を選択のうえ、[Next]ボタンをクリックします(図3)。

    f:id:ActivityService:20200617002535p:plain
    図3

  6. 適当なフォルダを選択のうえ、[Create]をクリックします(図4)。

    f:id:ActivityService:20200617002540p:plain
    図4

    これでアプリの前準備は完了です。

ビルド設定(任意)

この作業は任意です。
1. ビルドターゲットの設定(OS Version) [PROJECT] > [Info] > [Deployment Target] > [iOS Deployment Target]で[13.0]を選択します(図5)。
これでiOS & iPadOS13向けのビルドにすることができます。

f:id:ActivityService:20200617002546p:plain
図5

  1. ビルドターゲットの設定(Device) [TARGETS] > [SampleWebView] > [General] > [Deployment Info]でMacチェックボックスにチェックを入れます(図6)。
    その後、[Enable]ボタンをクリックします(図6)。
    これでiPhoneiPadMac向けのアプリにそれぞれビルドすることができます。
    f:id:ActivityService:20200617002552p:plain
    図6

    ※Xcode11からMac向けにもビルドできるようになりました。

WebKit Frameworkの追加

  1. [TARGETS] > [SampleWebView] > [General] > [Frameworks, Libraries, and Embedded Content]で[+]ボタンをクリックします(図7)。

    f:id:ActivityService:20200617004426p:plain
    図7

  2. "WebKit.framework"を選択のうえ、[Add]ボタンをクリックします(図8)。

    f:id:ActivityService:20200617004545p:plain
    図8

    これでプロジェクトにWebKit Frameworkを追加できました。

WebViewの実装

  1. "ViewController.m"を選択してください(図9)。

    f:id:ActivityService:20200617004641p:plain
    図9

  2. 図10の赤枠部のようにソースコードを修正してください。

    f:id:ActivityService:20200617004759p:plain
    図10

    これで実装は完了しました。

 動作確認

動作確認(iOSの場合)

  1. iPhone系の実機、または、シミュレーターを選択の上、[▶︎]をクリックしてください(図11)。これでiPhone向けにビルドができます。
    f:id:ActivityService:20200617005053p:plain
    図11

2.iPhoneで指定したURLのウェブページが表示されるのを確認できました(図12)。

f:id:ActivityService:20200617010402p:plain
図12

動作確認(iPadOSの場合)

  1. iPad系の実機、または、シミュレーターを選択の上、[▶︎]をクリックしてください(図13)。これでiPad向けにビルドができます。
    f:id:ActivityService:20200617010448p:plain
    図13

2.iPadで指定したURLのウェブページが表示されるのを確認できました(図14)。

f:id:ActivityService:20200617010509p:plain
図14

動作確認(macOSの場合)

  1. [My Mac]を選択の上、[▶︎]をクリックしてください(図15)。これでMac向けにビルドができます。
    f:id:ActivityService:20200617010540p:plain
    図15

2.Macで指定したURLのウェブページが表示されるのを確認できました(図16)。

f:id:ActivityService:20200617010556p:plain
図16

おわりに

WebKit FrameworkSFSafariViewControllerは様々な場面で使われます。例えば、OAuth2.0を使った認可・認証のログイン画面の表示やネットショッピングサイトのアプリ(アプリはWebViewやSFSafariViewのみ実装し、アプリ内でモバイル向けのウェブページを表示するようにしている場合もあるようです。)によく使われています。もちろん、ウェブブラウザアプリなどにも利用されています。