モバイルアプリ開発入門

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

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

はじめに

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

今回は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)。
    これでiPhone・iPad・Mac向けのアプリにそれぞれビルドすることができます。
    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 FrameworkやSFSafariViewControllerは様々な場面で使われます。例えば、OAuth2.0を使った認可・認証のログイン画面の表示やネットショッピングサイトのアプリ(アプリはWebViewやSFSafariViewのみ実装し、アプリ内でモバイル向けのウェブページを表示するようにしている場合もあるようです。)によく使われています。もちろん、ウェブブラウザアプリなどにも利用されています。