(null);
const button = (label: string, enabled: boolean, action: () => void) => (
{label}
);
return (
{nav()?.loading ? "Loading…" : nav()?.title ?? ""}
nav.set(n)}
ios={{ allowsBackForwardNavigationGestures: true }}
/>
{button("Back", !!nav()?.canGoBack, () => web.goBack())}
{button("Forward", !!nav()?.canGoForward, () => web.goForward())}
{button("Reload", true, () => web.reload())}
);
}
mount(Browser);
```
### ページとアプリ間のメッセージング
ページは `window.nsh.postMessage(string)` でアプリと通信し、メッセージは `on_message`（`onMessage`）として届きます。アプリは ref の `post_message`（`postMessage(string)`）でページと通信し、メッセージはページ内で `window` 上の `message` イベントとして届きます。メッセージは文字列です。構造化データには JSON を送ってください。
```rust
use nsh_core::prelude::*;
const PAGE: &str = r#"
Nothing from the app yet.
"#;
#[component]
pub fn App() -> impl IntoElement {
let web = element_ref();
let last = signal(String::new());
view()
.flex_1()
.pt(px(50.0))
.gap(px(12.0))
.child(
web_view_html(PAGE, None)
.element_ref(&web)
.h(px(240.0))
.on_message(move |data: &str| {
let message: serde_json::Value = serde_json::from_str(data).unwrap_or_default();
last.set(message["type"].as_str().unwrap_or_default().to_owned());
}),
)
.child(
text("Post to the page")
.p(px(16.0))
.text_color(rgb(0x0969da))
.on_press(move || web.post_message("hi from nsh")),
)
.child(text(move || format!("Last message: {}", last.get())).px(px(16.0)))
}
```
```tsx
import { mount, signal, Text, View, WebView, type WebViewRef } from "nsh";
const page = `
Nothing from the app yet.
`;
function App() {
let web!: WebViewRef;
const last = signal("");
return (
last.set(JSON.parse(e.data).type)}
/>
web.postMessage("hi from nsh")} style={{ padding: 16, color: "#0969da" }}>
Post to the page
Last message: {last()}
);
}
mount(App);
```
ref の `inject_java_script`（`injectJavaScript(script)`）は、現在のページでいつでもコードを実行します。`injected_java_script` と `injected_java_script_before_content`（`injectedJavaScript`、`injectedJavaScriptBeforeContentLoaded`）は、ページ自身のスクリプトの前または後に、ページの読み込みごとに実行されます。フックのインストールにはここを使います。
```rust
web_view("https://example.com")
.injected_java_script_before_content("window.isNativeApp = true;")
.injected_java_script("window.nsh.postMessage(document.title);")
.on_message(|title: &str| log::info!("title {title}"))
```
```tsx
console.log("title", e.data)}
/>
```
### ユーザー自身の操作としての入力
`injectJavaScript` では合成イベントしか作れず、ページはそれを信頼できないもの（`event.isTrusted` は `false`）として扱い、一部のウィジェットは無視します。ref の `send_input`（`sendInput(input)`）は、ユーザー自身の手による操作と同じようにページへ入力を与えるため、そのイベントは信頼されます。
- `{ type: "click", x, y }` は、ビューポート上の点を CSS ピクセル（`getBoundingClientRect()` が報告する単位）でクリックします。
- `{ type: "text", text }` は、ページがフォーカスしている要素へ、1 キーずつテキストを入力します。各文字は US 配列の対応するキーで、改行は Enter で入力され、US キーで入力できないもの（`é`、CJK、絵文字）はどのキーも使わずに入力されます（`code` は `"Unidentified"`）。
- `{ type: "key", key }` は、`Enter`、`Tab`、`Escape`、`Backspace` を押します。
```rust
use nsh_core::{WebInput, WebKey, prelude::*};
use std::time::Duration;
fn search(web: &ElementRef) {
web.send_input(WebInput::Click { x: px(120.0), y: px(40.0) });
let web = *web;
set_timeout(Duration::from_millis(50), move || {
web.send_input(WebInput::Text("espresso".into()));
web.send_input(WebInput::Key(WebKey::Enter));
});
}
```
```tsx
web.sendInput({ type: "click", x: 120, y: 40 });
setTimeout(() => {
web.sendInput({ type: "text", text: "espresso" });
web.sendInput({ type: "key", key: "Enter" });
}, 50);
```
Rust では、これらは `WebInput::Click { x, y }`、`WebInput::Text(text)`、`WebInput::Key(WebKey::Enter)` です。
信頼された入力にはユーザーアクティベーションが伴います（ウィンドウを開く、クリップボードに書き込む、システムのファイルパネルを開く、ページの確認ボタンを押す、といったことができます）。そのため、これは独立したケイパビリティです。アプリには `nsh.json` の `capabilities`（[`webview`](https://nsh.dev/translations/ja/docs/sandbox-and-capabilities.md#webview)）に `"webview": { "input": true }` が必要で、何も宣言していない場合も同様です。ない場合、コアは呼び出しを破棄します。
クリックと同様に、`sendInput` は Web ビューのためにキーボードフォーカスを取得し、アプリ自身の `Input` からフォーカスを奪います。ページは自身のタイミングで入力を処理します。クリックのイベントは、次の呼び出しが始まっても処理中のことがあるため、クリックの後に入力する前には、クリックが落ち着くのを（1 フレーム程度）待ってください。macOS は入力を配信しますが、他のプラットフォームは今のところ無視します。
これに依存する機能を提供する前に、ここで動作するかを確認してください。`web_input_available()`（`WebView.inputAvailable()`）は、プラットフォームが入力を配信し、かつアプリが `webview.input` を持っている場合にのみ `true` で解決されます。そのため、呼び出しを無視するプラットフォームや、許可のないアプリでは `false` になります。
```rust
use nsh_core::prelude::*;
let input = signal(false);
spawn(async move { input.set(web_input_available().await) });
```
```tsx
import { signal, WebView } from "nsh";
const input = signal(false);
WebView.inputAvailable().then((available) => input.set(available));
```
### Web ビューが表示できるサイト
`nsh.json` が `"capabilities"` を宣言している場合、Web ビューは `webview` に列挙されたホストのみを表示し、そこへのみナビゲートできます。
```json
{
"capabilities": {
"webview": { "hosts": ["example.com", "*.example.com"] }
}
}
```
このチェックは、Web ビューの `src` と、ページが行うすべてのトップレベルナビゲーション（リンク、リダイレクト、`location` の変更）を対象とします。判定は、プラットフォームがナビゲーションを進めてよいか問い合わせた時点でネイティブに行われます。ページ自身のサブリソース（スクリプト、画像、フレーム）は Web コンテンツ側の責任であり、チェックされません。`*.example.com` はサブドメインのみに一致するため、ベアドメインには `example.com` も列挙してください。`"capabilities"` キーのないアプリは、任意のページを表示できます。[サンドボックスとケイパビリティ](https://nsh.dev/translations/ja/docs/sandbox-and-capabilities.md)を参照してください。
## Video
```rust
use nsh_core::prelude::*;
pub fn player() -> impl IntoElement {
let player = element_ref();
let paused = signal(true);
let time = signal(String::new());
let link = |label: &'static str| text(label).text_color(rgb(0x0969da));
view()
.flex_1()
.justify_center()
.p(px(16.0))
.gap(px(12.0))
.child(
video("https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4")
.element_ref(&player)
.paused(paused)
.repeat(true)
.object_fit(ResizeMode::Contain)
.h(px(220.0))
.rounded(px(12.0))
.overflow_hidden()
.bg(rgb(0x000000))
.on_progress(move |e: &VideoProgress| {
time.set(format!("{:.1} / {:.1} s", e.current_time, e.duration))
})
.on_end(move || paused.set(true)),
)
.child(
view()
.flex_row()
.gap(px(16.0))
.items_center()
.child(
text(move || if paused.get() { "Play" } else { "Pause" })
.text_color(rgb(0x0969da))
.font_weight(FontWeight::SEMIBOLD)
.on_press(move || paused.update(|p| *p = !*p)),
)
.child(link("Restart").on_press(move || player.seek(0.0)))
.child(text(move || time.get()).text_color(rgb(0x57606a))),
)
}
```
```tsx
import { mount, signal, Text, Video, type VideoRef, View } from "nsh";
function Player() {
let video!: VideoRef;
const paused = signal(true);
const time = signal("");
return (
);
}
mount(Player);
```
再生は props で制御します。`paused`、`muted`、`volume`、`rate` をシグナルから設定すると、プレーヤーがそれに追従します。ref には `seek(seconds)` があります。
Rust では、`video(url)` がプレーヤーを作成し（URL には値、シグナル、またはクロージャを渡せます）、各 prop はスネークケースのビルダーメソッド（`paused`、`repeat(true)`、`object_fit(ResizeMode::Contain)`（`objectFit` スタイル）、`progressUpdateInterval` には `progress_interval`）です。`on_load` は `VideoInfo`（`duration`、`size`）を、`on_progress` は `VideoProgress`（`current_time`、`duration`）を、`on_buffer` は `bool` を受け取ります。
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| `src` | `string` | | ビデオの URL。 |
| `paused` | `boolean` | `false` | 再生を一時停止します。 |
| `muted` | `boolean` | `false` | 無音にします。 |
| `volume` | `number` | `1` | 0〜1。 |
| `rate` | `number` | `1` | 再生速度。 |
| `repeat` | `boolean` | `false` | 終了時に最初から再び再生します。 |
| `objectFit`（スタイル）、`object-*` クラス | `"cover" \| "contain" \| "fill" \| "none" \| "scale-down"` | `"contain"` | 映像をビューに合わせる方法。CSS の `object-fit`（`class="object-cover"`）と同じです。 |
| `controls` | `boolean` | `false` | プラットフォームの再生コントロール。 |
| `progressUpdateInterval` | `number` | `250` | `onProgress` イベントの間隔（ミリ秒）。 |
| イベント | ペイロード | 発生タイミング |
|---|---|---|
| `onLoadStart` | | 読み込みが始まったとき。 |
| `onLoad` | `{ duration, size }` | ビデオの準備ができたとき（長さ（秒）とサイズ）。 |
| `onProgress` | `{ currentTime, duration }` | 再生中、`progressUpdateInterval` ミリ秒ごと。 |
| `onBuffer` | `{ isBuffering }` | データ待ちで再生が停止したとき、または再開したとき。 |
| `onEnd` | | 再生が終端に達したとき。 |
| `onError` | `{ message }` | 読み込みまたは再生に失敗したとき。 |
`controls` を指定すると、プラットフォームが独自の再生ボタン、シークバー、全画面ボタンを描画します。指定しない場合は、ビデオの上または下にビューを置いて独自に描画します。ビデオはレイアウト内のネイティブビューなので、オーバーレイは自然に機能します。
```rust
view()
.h(px(220.0))
.child(video(url).paused(paused).flex_1())
.child(
view()
.absolute()
.inset_0()
.items_center()
.justify_center()
.on_press(move || paused.update(|p| *p = !*p))
.child(when(move || paused.get(), || {
text("▶").text_size(px(48.0)).text_color(rgb(0xffffff))
})),
)
```
```tsx
paused.set(!paused())}
style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, alignItems: "center", justifyContent: "center" }}
>
▶
```
ビデオのソースはネットワークリクエストです。ケイパビリティを宣言している場合、`fetch` やリモート画像と同様に、ビデオのホストは `nsh.json` の `network` で許可されている必要があります。拒否されたソースは何も表示されず、拒否は追加すべきキーとともに一度だけログに記録されます。
## 関連項目
- [`WebView`](https://nsh.dev/translations/ja/elements/web-view.md) と [`Video`](https://nsh.dev/translations/ja/elements/video.md): 要素リファレンス。
- [サンドボックスとケイパビリティ](https://nsh.dev/translations/ja/docs/sandbox-and-capabilities.md): `webview` と `network` の許可。
- [ネイティブコンポーネント](https://nsh.dev/translations/ja/docs/native-components.md): ホストアプリが提供する他のネイティブビューの埋め込み。