iOSアプリでのWebページのレンダリング

iOSアプリでのWebページのレンダリング

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

Webコンテンツのレンダリング チュートリアルでは、iOSアプリでLiferay DXPサイトから Webコンテンツ を表示する方法を示します。コンテンツの表示は素晴らしいですが、ページ全体を表示したい場合はどうでしょうか? 問題ない\! Webスクリーンレット では、任意のWebページを表示できます。 ローカルまたはリモートのJavaScriptファイルとCSSファイルを挿入して、ページをカスタマイズすることもできます。 Liferay DXPのサーバー側のカスタマイズ機能(例: アプリケーション表示テンプレート)と組み合わせると、Web ScreenletはiOSアプリでWebページを表示するためのほぼ無限の可能性を提供します。

このチュートリアルでは、Web Screenletを使用してiOSアプリでWebページを表示する方法を学習します。

アプリにWebスクリーンレットを挿入する

アプリにWebスクリーンレットを挿入することは、アプリにスクリーンレットを挿入する と同じです

  1. Interface Builderで、新しいView Controllerに新しいビュー(UIView)を挿入します。 この新しいビューは、View Controllerの既存のビューの下にネストする必要があります。

  2. 新しいビューを選択した状態で、IDインスペクターを開き、ビューのカスタムクラスを WebScreenlet設定します。

  3. シーン内のスクリーンレットに必要な制約を設定します。

Web Screenletを構成する正確な手順は、Web Screenletに固有です。 最初に、View ControllerをWeb Screenletのデリゲートプロトコルに適合させます。

Web Screenletのデリゲートプロトコルに準拠

Screenletを使用するには、それを含むView ControllerのクラスをScreenletのデリゲートプロトコルに準拠させる必要があります。 Web Screenletのデリゲートプロトコルは WebScreenletDelegateです。 以下の手順に従って、View Controllerを WebScreenletDelegateに適合させます:

  1. 個のLiferayScreens をインポートし、 WebScreenletDelegate プロトコルを採用するようにView Controllerを設定します。

    import UIKit
    import LiferayScreens
    
    class ViewController: UIViewController, WebScreenletDelegate {...
    
  2. WebScreenletDelegate メソッド onWebLoad(_:url :)実装し。 このメソッドは、スクリーンレットがページを正常にロードしたときに呼び出されます。 どのように実装するかは、ページのロード時に何をしたいか(もしあれば)によって異なります。 その引数は、 <code>WebScreenlet インスタンスとページURLです。 この例では、ページがロードされたことを示すメッセージをコンソールに出力します。

    func onWebLoad(_ screenlet: WebScreenlet, url: String) {
        // Called when the page is loaded
        print("\(url) was just loaded")
    }
    
  3. WebScreenletDelegate メソッド screenlet(_:onError :)実装し。 このメソッドは、ページの読み込み中にエラーが発生したときに呼び出されるため、 <code>NSError オブジェクトが含まれます。 これにより、エラーを記録または印刷できます。 たとえば、この実装はエラーの説明を含むメッセージを出力します:

    func screenlet(_ screenlet: WebScreenlet, onError error: NSError) {
        print("Failed to load the page: \(error.localizedDescription)")
    }
    
  4. WebScreenletDelegate メソッド screenlet(_:onScriptMessageNamespace:onScriptMessage :)実装します。 このメソッドは、スクリーンレットの WKWebView

送信したときに呼び出されます。 このメソッドの引数には、メッセージの名前空間とメッセージが含まれます。 このメソッドを実装する方法は、メッセージが送信されたときに何をしたいかによって異なります。 たとえば、セグエを実行し、メッセージをセグエの 送信者として含めることができます。

    func screenlet(_ screenlet: WebScreenlet,
        onScriptMessageNamespace namespace: String,
        onScriptMessage message: String) {
   
        performSegue(withIdentifier: "detail", sender: message)
    }
   </li> 

5 Interface Builderを使用してView Controllerでアウトレットを作成し、ストーリーボード上のWeb Screenletへの参照を取得します。 それはScreenletそれが参照した後Screenletコンセントに名前を付けることをお勧めです、または単に screenlet。 次に、Webスクリーンレットアウトレットの例を示します。

   @IBOutlet weak var webScreenlet: WebScreenlet?

6 View Controllerの viewDidLoad() メソッドで、作成したWeb Screenlet参照を使用して、View ControllerをScreenletのデリゲートとして設定します。 これを行うには、 super.viewDidLoad() 呼び出しのすぐ下に次のコード行を追加します。

   self.webScreenlet?.delegate = self
  </ol> 

次に、同じWebスクリーンレット参照を使用して、スクリーンレットのパラメーターを設定します。

Webスクリーンレットのパラメーターの設定

Web Screenletには、Screenletが機能するために必要なパラメーターを提供する 個のWebScreenletConfiguration および WebScreenletConfigurationBuilder オブジェクトがあります。 これらのパラメーターには、ロードするページのURLと、ページをカスタマイズするJavaScriptファイルまたはCSSファイルの場所が含まれます。 これらのパラメーターのほとんどは、 WebScreenletConfigurationBuilderのメソッドを介して設定します。

Web Screenletのパラメータを設定するには、Web Screenletを使用するView Controllerの viewDidLoad() メソッドで次の手順を実行します。

  1. WebScreenletConfigurationBuilder オブジェクトを作成するには、 WebScreenletConfigurationBuilder(<url>)<url> はWebページのURL文字列)を使用します。 ページにLiferay DXP認証が必要な場合、ユーザーは Login Screenlet または SessionContext メソッドを介してログインする必要があり、 WebScreenletConfigurationBuilder コンストラクターに相対URLを提供する必要があります。 たとえば、そのようなページの完全なURLが http://your.liferay.instance/web/guest/blogである場合、コンストラクターの引数は / web / guest / blogです。 Liferay DXP認証を必要としないその他のページについては、コンストラクターに完全なURLを指定する必要があります。

  2. WebScreenletConfigurationBuilder メソッドを呼び出して、必要なパラメーターを設定します。

  1. WebScreenletConfigurationBuilder インスタンスの load() メソッドを呼び出して、 WebScreenletConfiguration オブジェクトを返します。

  2. WebScreenletConfiguration オブジェクトをWeb Screenletインスタンスの 構成 プロパティに設定します。

  3. Web Screenletインスタンスの load() メソッドを呼び出します。

以下に、Web Screenletインスタンスが webScreenletで、 WebScreenletConfiguration オブジェクトが webScreenletConfigurationであるView Controllerの viewDidLoad() メソッドのこれらのステップのスニペットの例を示します。

override func viewDidLoad() {
    super.viewDidLoad()

    self.webScreenlet?.delegate = self

    let webScreenletConfiguration = 
        WebScreenletConfigurationBuilder(url: "/web/westeros-hybrid/companynews")
            .addCss(localFile: "blogs")
            .addJs(localFile: "blogs")
            .load()
    webScreenlet.configuration = webScreenletConfiguration
    webScreenlet.load()
}

WebScreenletConfigurationBuilder コンストラクターに提供される相対URL / web / westeros-hybrid / companynews 、および set(webType:.other) 呼び出しがないことは、このWeb ScreenletインスタンスがLiferay DXPページをロードすることを示します。認証が必要です。 addCss および addJs 呼び出しは、それぞれローカルCSSファイルとJavaScriptファイルを追加します。 両方のファイルの名前は ブログです。

すばらしいです\! これで、iOSアプリでWebスクリーンレットを使用する方法がわかりました。

関連トピック

iOS用Webスクリーンレット

iOSアプリでCordovaでWebスクリーンレットを使用する

iOSアプリでのスクリーンレットの使用

iOSアプリでのWebコンテンツのレンダリング

« iOSアプリでのWebコンテンツのレンダリングiOSアプリでCordovaでWebスクリーンレットを使用する »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています