Webビュー

WebViewコンポーネントは、アプリケーション内でWebコンテンツを表示するために使用されます。このコントロールを使用するには、URLまたはローカルHTMLファイルを指すsrc属性を指定します。

JAVASCRIPT
TYPESCRIPT

const webViewModule = require("tns-core-modules/ui/web-view");

import { WebView } from "tns-core-modules/ui/web-view";

基本

このサンプルは、NativeScriptアプリケーションでWebViewを使用する基本的な方法を示しています。

XML

<GridLayout rows="75 * 50">
    <GridLayout row="0" rows="*" columns="50 * 50" class="form">
        <Button class="btn btn-primary btn-active icon" row="0" col="0" text="" tap="goBack"/>
        <TextField row="0" col="1" id="urlField" hint="Enter URL" text="{{ tftext }}" returnKeyType="done" returnPress="submit"
            autocorrect="false" verticalAlignment="center" class="input input-border m-t-0" autocapitalizationType="none"/>
        <Button class="btn btn-primary btn-active icon" isEnabled="{{ enabled }}" row="0" col="2" text="" tap="goForward"/>
    </GridLayout>
    <WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="{{ webViewSrc }}" />
    <Label row="2" text="{{ result }}" />
</GridLayout>

webViewSrcを追加してloadFinishedEventイベントを処理する

JAVASCRIPT
TYPESCRIPT

const Observable = require("tns-core-modules/data/observable").Observable;
const dialogs = require("tns-core-modules/ui/dialogs");
const webViewModule = require("tns-core-modules/ui/web-view");
function onNavigatingTo(args) {
    const page = args.object;
    const vm = new Observable();
    vm.set("webViewSrc", "https://docs.nativescript.org/");
    vm.set("result", "");
    vm.set("tftext", "https://docs.nativescript.org/");
    page.bindingContext = vm;
}
// handling WebView load finish event
function onWebViewLoaded(webargs) {
    const page = webargs.object.page;
    const vm = page.bindingContext;
    const webview = webargs.object;
    vm.set("result", "WebView is still loading...");
    vm.set("enabled", false);

    webview.on(webViewModule.WebView.loadFinishedEvent, (args) => {
        let message = "";
        if (!args.error) {
            message = `WebView finished loading of ${args.url}`;
        } else {
            message = `Error loading ${args.url} : ${args.error}`;
        }

        vm.set("result", message);
        console.log(`WebView message - ${message}`);
    });
}
// going to the previous page if such is available
function goBack(args) {
    const page = args.object.page;
    const vm = page.bindingContext;
    const webview = page.getViewById("myWebView");
    if (webview.canGoBack) {
        webview.goBack();
        vm.set("enabled", true);
    }
}
// going forward if a page is available
function goForward(args) {
    const page = args.object.page;
    const vm = page.bindingContext;
    const webview = page.getViewById("myWebView");
    if (webview.canGoForward) {
        webview.goForward();
    } else {
        vm.set("enabled", false);
    }
}
// changing WebView source
function submit(args) {
    const page = args.object.page;
    const vm = page.bindingContext;
    const textField = args.object;
    const text = textField.text;
    vm.set("enabled", false);
    if (text.substring(0, 4) === "http") {
        vm.set("webViewSrc", text);
        textField.dismissSoftInput();
    } else {
        dialogs.alert("Please, add `http://` or `https://` in front of the URL string")
        .then(() => {
            console.log("Dialog closed!");
        });
    }
}
exports.onNavigatingTo = onNavigatingTo;
exports.onWebViewLoaded = onWebViewLoaded;
exports.submit = submit;
exports.goBack = goBack;
exports.goForward = goForward;

import {Observable} from "tns-core-modules/data/observable";
import * as dialogs from "tns-core-modules/ui/dialogs";
import {WebView, LoadEventData} from "tns-core-modules/ui/web-view";
import { Page } from "tns-core-modules/ui/page";
import { TextField } from "tns-core-modules/ui/text-field";

export function onNavigatingTo(args) {
    const page: Page = <Page> args.object;
    const vm = new Observable();
    vm.set("webViewSrc", "https://docs.nativescript.org/");
    vm.set("result", "");
    vm.set("tftext", "https://docs.nativescript.org/");
    page.bindingContext = vm;
}
// handling WebView load finish event
export function onWebViewLoaded(webargs) {
    const page: Page = <Page> webargs.object.page;
    const vm = page.bindingContext;
    const webview: WebView = <WebView> webargs.object;
    vm.set("result", "WebView is still loading...");
    vm.set("enabled", false);

    webview.on(WebView.loadFinishedEvent, (args: LoadEventData) => {
        let message = "";
        if (!args.error) {
            message = `WebView finished loading of ${args.url}`;
        } else {
            message = `Error loading ${args.url} : ${args.error}`;
        }

        vm.set("result", message);
        console.log(`WebView message - ${message}`);
    });
}
// going to the previous page if such is available
export function goBack(args) {
    const page: Page = <Page> args.object.page;
    const vm = page.bindingContext;
    const webview: WebView = <WebView> page.getViewById("myWebView");
    if (webview.canGoBack) {
        webview.goBack();
        vm.set("enabled", true);
    }
}
// going forward if a page is available
export function goForward(args) {
    const page: Page = <Page> args.object.page;
    const vm = page.bindingContext;
    const webview: WebView = <WebView> page.getViewById("myWebView");
    if (webview.canGoForward) {
        webview.goForward();
    } else {
        vm.set("enabled", false);
    }
}
// changing WebView source
export function submit(args) {
    const page: Page = <Page> args.object.page;
    const vm = page.bindingContext;
    const textField: TextField = <TextField> args.object;
    const text = textField.text;
    vm.set("enabled", false);
    if (text.substring(0, 4) === "http") {
        vm.set("webViewSrc", text);
        textField.dismissSoftInput();
    } else {
        dialogs.alert("Please, add `http://` or `https://` in front of the URL string")
        .then(() => {
            console.log("Dialog closed!");
        });
    }
}

CSS

icon{
    font-family: 'icomoon';
    vertical-align: center;
    margin: 6;
}

/*WebView {
    border-color: lightgray;
    border-width: 0.5;
}*/

デモソース

イベント

この例は、WebViewコンポーネントとそのreloadメソッドでサポートされているイベントの使用方法を示しています。

XML
JAVASCRIPT
TYPESCRIPT

<GridLayout rows="50 50 50 *" columns="* *">
    <Button row="0" col="0" text="Load first url" tap="loadFirst" />
    <Button row="0" col="1" text="Load second url" tap="loadSecond" />
    <Button row="1" col="0" colSpan="2" text="Reload page" tap="onReload" />
    <Label row="2" col="0" colSpan="2" text="{{ 'Url: ' + webViewSrc }}" textWrap="true" class="p-12" />

    <WebView id="webview" row="3" col="0" colSpan="2" loadStarted="onLoadStarted" loadFinished="onLoadFinished" src="{{ webViewSrc }}" />
    <GridLayout class="indicator" visibility="{{ isItemVisible ? 'visible' : 'collapsed' }}" row="0" col="0" rowSpan="4" colSpan="2">
            <ActivityIndicator width="100" height="100" busy="true"/>
    </GridLayout>
</GridLayout>

function onNavigatingTo(args) {
    const page = args.object;
    const vm = new Observable();
    vm.set("webViewSrc", secondUrl);
    vm.set("isItemVisible", true);
    page.bindingContext = vm;
}

function onLoadStarted(args) {
    const page = args.object;
    const vm = page.bindingContext;
    vm.set("isItemVisible", true);
    let message;
    if (!args.error) {
        message = `WebView started loading of ${args.url}`;
    } else {
        message = `Error loading  ${args.url} : ${args.error}`;
    }
    console.log(message);

}
function onLoadFinished(args) {
    const page = args.object;
    const vm = page.bindingContext;
    let message;
    if (!args.error) {
        message = `WebView finished loading of  ${args.url}`;
    } else {
        message = `Error loading ${args.url} : ${args.error}`;
    }
    console.log(message);
}

function loadFirst(args) {
    const page = args.object.page;
    const vm = page.bindingContext;
    vm.set("webViewSrc", firstUrl);
}

function loadSecond(args) {
    const page = args.object.page;
    const vm = page.bindingContext;
    vm.set("webViewSrc", secondUrl);
}

function onReload(args) {
    const page = args.object.page;
    webview = page.getViewById("webview");
    webview.reload();
}

exports.onNavigatingTo = onNavigatingTo;
exports.onLoadStarted = onLoadStarted;
exports.onLoadFinished = onLoadFinished;
exports.loadFirst = loadFirst;
exports.loadSecond = loadSecond;
exports.onReload = onReload;

export function onNavigatingTo(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();
    vm.set("webViewSrc", secondUrl);
    vm.set("isItemVisible", true);
    page.bindingContext = vm;
}

export function onLoadStarted(args) {
    const page: Page = <Page>args.object;
    const vm = page.bindingContext;
    vm.set("isItemVisible", true);
    let message;
    if (!args.error) {
        message = `WebView started loading of ${args.url}`;
    } else {
        message = `Error loading  ${args.url} : ${args.error}`;
    }
    console.log(message);

}
export function onLoadFinished(args) {
    const page = (<Page>args.object);
    const vm = page.bindingContext;
    let message;
    if (!args.error) {
        message = `WebView finished loading of  ${args.url}`;
    } else {
        message = `Error loading ${args.url} : ${args.error}`;
    }
    console.log(message);
}

export function loadFirst(args) {
    const page: Page = <Page>args.object.page;
    const vm = page.bindingContext;
    vm.set("webViewSrc", firstUrl);
}

export function loadSecond(args) {
    const page: Page = <Page>args.object.page;
    const vm = page.bindingContext;
    vm.set("webViewSrc", secondUrl);
}

export function onReload(args) {
    const page: Page = <Page>args.object.page;
    const webview: WebView = <WebView>page.getViewById("webview");
    webview.reload();
}

サンプルコードでは、イベントloadStartedとloadFinishedを設定しています。 WebViewコンポーネントのソースを変更すると（URLを変更するか、ローカルHTMLファイルをロードすると）、両方のイベントが発生します。このloadStartedイベントは、WebViewソースがロードを開始したときに実行され、 loadFinishedはソースのロードが完了したときに発生します。イベントは、ロードしようとしている eventName、navigationType、url に関する情報を返します。ソースロードのいくつかのステップでエラーが発生した場合、loadStartedイベントまたは loadFinishedイベントでerrorプロパティを使用して対応するエラーを受け取ります。

提供されているサンプルでは、WebViewのreloadメソッドを介して、現在ロードされているソースを再ロードする方法も示されています。

デモソース

ジェスチャー

コードサンプルは、iOSとAndroidの両方のプラットフォームでWebViewのジェスチャーを使用する方法を示しています。

XML
JAVASCRIPT
TYPESCRIPT

<GridLayout rows="50 50 *">
    <Label row="0" text="{{ touchResult }}" textWrap="true" />
    <Label row="1" text="{{ panResult }}" textWrap="true" />
    <WebView row="2" loaded="onWebViewLoaded"  touch="webViewTouch" pan="webViewPan" src="{{ webViewSrc }}" />
</GridLayout>

function onNavigatingTo(args) {
    const page = args.object;
    const vm = new Observable();
    vm.set("webViewSrc", "<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>");
    vm.set("touchResult", "Touch: x: _ y: _");
    vm.set("panResult", "Pan: deltaX: _ deltaY: _");
    page.bindingContext = vm;
}
// disabling the WebView's zoom control(required only for Android)
function onWebViewLoaded(webargs) {
    const webview = webargs.object;
    if (platformModule.isAndroid) {
        webview.android.getSettings().setDisplayZoomControls(false);
    }
}
// setting up Touch gesture callback method
function webViewTouch(args) {
    const page = args.object.page;
    const vm = page.bindingContext;
    vm.set("touchResult", `Touch: x: ${args.getX().toFixed(3)} y: ${args.getY().toFixed(3)}`);
    console.log(`Touch: x: ${args.getX().toFixed(3)} y: ${args.getY().toFixed(3)}`);
}
// setting up Pan gesture callback method
function webViewPan(args) {
    const page = args.object.page;
    const vm = page.bindingContext;
    vm.set("panResult", `Pan: deltaX: ${args.deltaX.toFixed(3)} deltaY: ${args.deltaY.toFixed(3)}`);
    console.log(`Pan: deltaX: ${args.deltaX.toFixed(3)} deltaY: ${args.deltaY.toFixed(3)}`);
}

exports.onNavigatingTo = onNavigatingTo;
exports.onWebViewLoaded = onWebViewLoaded;
exports.webViewTouch = webViewTouch;
exports.webViewPan = webViewPan;

export function onNavigatingTo(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();
    vm.set("webViewSrc", "<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>");
    vm.set("touchResult", "Touch: x: _ y: _");
    vm.set("panResult", "Pan: deltaX: _ deltaY: _");
    page.bindingContext = vm;
}
// disabling the WebView's zoom control(required only for Android)
export function onWebViewLoaded(webargs) {
    const webview: WebView = <WebView>webargs.object;
    if (isAndroid) {
        webview.android.getSettings().setDisplayZoomControls(false);
    }
}
// setting up Touch gesture callback method
export function webViewTouch(args) {
    const page: Page = <Page>args.object.page;
    const vm = page.bindingContext;
    vm.set("touchResult", `Touch: x: ${args.getX().toFixed(3)} y: ${args.getY().toFixed(3)}`);
    console.log(`Touch: x: ${args.getX().toFixed(3)} y: ${args.getY().toFixed(3)}`);
}
// setting up Pan gesture callback method
export function webViewPan(args) {
    const page: Page = <Page>args.object.page;
    const vm = page.bindingContext;
    vm.set("panResult", `Pan: deltaX: ${args.deltaX.toFixed(3)} deltaY: ${args.deltaY.toFixed(3)}`);
    console.log(`Pan: deltaX: ${args.deltaX.toFixed(3)} deltaY: ${args.deltaY.toFixed(3)}`);
}

注釈： AndroidのWebViewコンポーネントでジェスチャーを使用できるようにするには、まずズームコントロールを無効にする必要があります。これを行うには、androidプロパティにアクセスしその助けを借りて、 setDisplayZoomControlsコントロールをfalseに設定します。

デモソース

ソースの読み込み

この例では、ローカルファイルを使用するか、HTMLコードをsrcプロパティに直接提供することで、 WebViewコンポーネントにコンテンツをロードする方法を示します。

XML

<GridLayout rows="100 50 * 50" columns="*">
	<WebView row="0" col="0" loaded="onFirstWebViewLoaded" src="{{ firstWebViewSRC }}"/>
	<Label row="1" text="{{ resultFirstWebView }}" textWrap="true" />
	<WebView row="2" col="0" loaded="onSecondWebViewLoaded" src="{{ secondWebViewSRC }}"/>
	<Label row="3" text="{{ resultSecondWebView }}" textWrap="true" />
</GridLayout>

ローカルファイルからWebViewのsrcを追加する

JAVASCRIPT
TYPESCRIPT

const Observable = require("tns-core-modules/data/observable").Observable;
const webViewModule = require("tns-core-modules/ui/web-view");
function onNavigatingTo(args) {
    const page = args.object;
    const vm = new Observable();
    // loading the WebView source while providing a HTML code
    vm.set("firstWebViewSRC", "<!DOCTYPE html><html><head><title>MyTitle</title><meta charset='utf-8' /></head><body><span style='color:#0099CC; text-align: center;'>First WebView</span></body></html>");
    vm.set("resultFirstWebView", "");
    // loading the WebView source from a local file
    vm.set("secondWebViewSRC", "~/ns-ui-widgets-category/web-view/source-load/test.html");
    vm.set("resultSecondWebView", "");
    page.bindingContext = vm;
}

function onFirstWebViewLoaded(webargs) {
    const page = webargs.object.page;
    const vm = page.bindingContext;
    const webview = webargs.object;
    vm.set("resultFirstWebView", "First WebView is still loading...");
    // handling WebView load finish event
    webview.on(webViewModule.WebView.loadFinishedEvent, (args) => {
        let message = "";
        if (!args.error) {
            message = `First WebView finished loading of ${args.url}`;
        } else {
            message = `Error loading first WebView ${args.url} : ${args.error}`;
        }

        vm.set("resultFirstWebView", message);
        console.log("First WebView message - ", message);
    });
}

function onSecondWebViewLoaded(webargs) {
    const page = webargs.object.page;
    const vm = page.bindingContext;
    const webview = webargs.object;
    vm.set("resultSecondWebView", "Second WebView is still loading...");

    webview.on(webViewModule.WebView.loadFinishedEvent, (args) => {
        let message = "";
        if (!args.error) {
            message = `Second WebView finished loading of ${args.url}`;
        } else {
            message = `Error loading second WebView  ${args.url} : ${args.error}`;
        }

        vm.set("resultSecondWebView", message);
        console.log("Second WebView message - ", message);
    });
}

exports.onNavigatingTo = onNavigatingTo;
exports.onFirstWebViewLoaded = onFirstWebViewLoaded;
exports.onSecondWebViewLoaded = onSecondWebViewLoaded;

import {Observable} from "tns-core-modules/data/observable";
import {WebView, LoadEventData} from "tns-core-modules/ui/web-view";
import {Page} from "tns-core-modules/ui/page";
export function onNavigatingTo(args) {
    const page: Page = <Page> args.object;
    const vm = new Observable();
    // loading the WebView source while providing a HTML code
    vm.set("firstWebViewSRC", "<!DOCTYPE html><html><head><title>MyTitle</title><meta charset='utf-8' /></head><body><span style='color:#0099CC; text-align: center;'>First WebView</span></body></html>");
    vm.set("resultFirstWebView", "");
    // loading the WebView source from a local file
    vm.set("secondWebViewSRC", "~/ns-ui-widgets-category/web-view/source-load/test.html");
    vm.set("resultSecondWebView", "");
    page.bindingContext = vm;
}

export function onFirstWebViewLoaded(webargs) {
    const page: Page = <Page> webargs.object.page;
    const vm = page.bindingContext;
    const webview: WebView = <WebView> webargs.object;
    vm.set("resultFirstWebView", "First WebView is still loading...");
    // handling WebView load finish event
    webview.on(WebView.loadFinishedEvent, (args: LoadEventData) => {
        let message = "";
        if (!args.error) {
            message = `First WebView finished loading of ${args.url}`;
        } else {
            message = `Error loading first WebView ${args.url} : ${args.error}`;
        }

        vm.set("resultFirstWebView", message);
        console.log("First WebView message - ", message);
    });
}

export function onSecondWebViewLoaded(webargs) {
    const page: Page = <Page> webargs.object.page;
    const vm = page.bindingContext;
    const webview: WebView = <WebView>webargs.object;
    vm.set("resultSecondWebView", "Second WebView is still loading...");

    webview.on(WebView.loadFinishedEvent, (args: LoadEventData) => {
        let message = "";
        if (!args.error) {
            message = `Second WebView finished loading of ${args.url}`;
        } else {
            message = `Error loading second WebView  ${args.url} : ${args.error}`;
        }

        vm.set("resultSecondWebView", message);
        console.log("Second WebView message - ", message);
    });
}

デモソース

APIリファレンス WebViewクラス

ネイティブコンポーネント

ANDROID	IOS
android.webkit.WebView	WKWebView

入門

コアコンセプト

技術概要
モジュール
アーキテクチャ

ライフサイクル
ナビゲーション
入れ子のナビゲーション
データバインディング
イベント
プラグインの使用
ネイティブAPIへのアクセス
メモリー管理
マルチスレッドモデル
プロパティシステム
ユーティリティー
CommonJSモジュール
プロジェクト構造
エラー制御
Androidランタイム
- 概要
- 必要条件
- 入門
  - Hello Worldアプリ
  - プロジェクト構造
  - モジュール
  - 入れ子タイプ
- メタデータ
  - メタデータ概要
  - APIアクセス
  - TypeScript定義ファイル生成
- マーシャリング
  - データ変換（マーシャリング）
  - JavaScript→Java
  - JavaScript→Kotlin
  - JavaJava→Script
  - Kotlin→JavaScript
- デバッグ
  - デバッグ
  - ビルドツールのデバッグ
  - Androidランタイムのデバッグ
- 高度な項目
  - 実行フロー
  - アプリとアクティビティの拡張
  - Gradleへの介入
  - MarkingMode:Noneによる最適化
  - カスタムフラグ
  - メモリ制御
  - Android StudioプロジェクトによるAndroidランタイムのデバッグ
  - V8ヒープスナップショット
- Binding-generator
  - 概要
  - クラスとインターフェースの拡張
  - 拡張の動作
  - 落とし穴
iOSランタイム
- 概要
- 必要要件
- Hello Worldアプリ
- マーシャリング
- 制限
- カスタムフラグ
- タイプ
  - Objective-Cクラス
  - Objective-C
  - Objective-C
  - Objective-C
  - C Functions
  - C Structures
  - C Enums
  - Cグローバル変数
  - Cポインタ
  - Cファンクションポインタ
  - ランタイムタイプ
- How-To
  - XCodeによるiOSランタイムのデバッグ
  - iOSランタイムのDSYMパッケージの取得と使用
  - Objective-Cクラスのサブクラス化
  - AppInspector
  - バックグラウンドでの実行

ユーザーインターフェース

ツール

トランスパイラ
Visual Studio Code用のNativeScript拡張
アプリIDを変更する
Androidエミュレータの設定
iOSアプリ拡張
iOS WatchOSアプリケーション
公開
- iOS用の起動画面とアイコンの作成
- iOS向けの公開
- Android用の起動画面とアイコンの作成
- Android向けの公開
- Android ABI Split
- Android App Bundle
テスト
- 単体テスト
- End To Endのテスト
  - 概要
  - 入門
  - 特徴
  - カスタマイズ
  - CI(継続的インテグレーション)
  - トラブルシューティング
  - 参考文献
デバッグ
- デバッグ
- Chrome DevToolsによるデバッグ
CLI
- NativeScript CLI
- クラウド
  - Tns Cloud Setup
- デバイス
- 環境設定
  - Tns Setup
- 一般
- Lib管理
  - Tns plugin add
  - Tns plugin create
  - Tns plugin install
  - Tns plugin remove
  - Tns plugin update
  - Tns plugin build
  - Tns plugin
- プロジェクト
  - 構成
    - Tns install
    - Tns platform add
    - Tns platform clean
    - Tns platform remove
    - Tns platform update
    - Tns platform
    - Tns prepare
    - Tns update
    - Tns generate
    - リソース
      - Tns resources update
      - Tns resources generate icons
      - Tns resources generate splashes
  - 作成
    - Tns create
  - テスト
    - Tns build android
    - Tns preview
    - Tns build ios
    - Tns build
    - Tns debug android
    - Tns debug ios
    - Tns debug
    - Tns deploy
    - Tns run android
    - Tns run ios
    - Tns run
    - Tns test android
    - Tns test init
    - Tns test ios
    - Tns test
- 公開
  - Tns appstore upload
  - Tns appstore
  - Tns publish ios
  - Tns publish

ハードウェアアクセス

地理的位置データ
デバイスカメラを使用する

プラグインの開発

プラグインリファレンス
構築
デバッグ
複合コンポーネントを使用したUIプラグインの構築
カスタムコンポーネントを使用したUIプラグインの構築
CocoaPodを使用したプラグインの構築
プラグインでのNativeScriptテーマの実装
プラグインの品質を保証する
単体テスト
プラグインUIテスト
Androidプラグインインフラストラクチャ
iOSでネイティブライブラリを使用する方法

リリース

変更点
破壊的な変更
アップグレード手順
最新のコードの実行
NativeScriptコミュニティ

アプリテンプレート

テンプレート
テンプレートを作成する

パフォーマンスの最適化

Webpackでスクリプトをバンドルする
素早く起動するアプリを構築する
Androidでの画像の最適化

フレームワークモジュール

アプリケーション
アプリの設定
色
接続
コンソール
Observable
ObservableArray
VirtualArray
データの取得
ファイルシステム
FPSメーター
HTTP
イメージソース
プラットフォーム
タイマー
トレースモジュール
XMLパーサ

ガイド

サポートを受ける

トラブルシューティング

Siedkick