Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webassembly 以下の Note: Warning: Callout: を日本語に変換 #8942

Merged
merged 1 commit into from
Oct 3, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions files/ja/webassembly/c_to_wasm/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ Emscripten SDK を取得します。以下の指示に従ってください。<h

WebAssembly に対応しているブラウザーで `hello.html` を読み込むるだけです。既定で有効なのは Firefox 52, Chrome 57, Opera 44 以降です。

> **Note:** 生成された HTML ファイル (`hello.html`) をローカルのハードドライブから直接開こうとすると(例: `file://your_path/hello.html`)、 _`both async and sync fetching of the wasm failed` という複数行のエラーメッセージが表示されます。 HTML ファイルを HTTP サーバー (`http://`) で実行する必要があります。詳しくは [ローカルのテストサーバーを設定するには](/ja/docs/Learn/Common_questions/set_up_a_local_testing_server) を参照してください。
> **メモ:** 生成された HTML ファイル (`hello.html`) をローカルのハードドライブから直接開こうとすると(例: `file://your_path/hello.html`)、 _`both async and sync fetching of the wasm failed` という複数行のエラーメッセージが表示されます。 HTML ファイルを HTTP サーバー (`http://`) で実行する必要があります。詳しくは [ローカルのテストサーバーを設定するには](/ja/docs/Learn/Common_questions/set_up_a_local_testing_server) を参照してください。

全てが計画通りに機能していれば、ウェブページ上の Emscripten コンソールに "Hello world" の出力が表示されるはずです。おめでとうございます、ようやく C を WebAssembly にコンパイルしてブラウザーで実行することができました。
![image](helloworld.png)
Expand Down Expand Up @@ -95,7 +95,7 @@ WebAssembly に対応しているブラウザーで `hello.html` を読み込む

4. この例を実行してみましょう。上記のコマンドで hello2.html が生成されます。これは生成された wasm コードに対してロード、実行などを行うグルーコードを含むテンプレートと同じ内容を持ちます。ブラウザーを開いて最後の例と同じ出力であることを確認してください。

> **Note:** HTML ファイルの代わりに .js ファイルを `-o` フラグで指定することで、完全な HTML ではなく、 JavaScript の「グルー」ファイル*だけ*を出力するように指定することができます。例えば `emcc -o hello2.js hello2.c -O3` とします。そうすると、完全にスクラッチでカスタム HTML を作成することができますが、これは高度なアプローチであり、通常は提供されている HTML テンプレートを使用する方が簡単です。
> **メモ:** HTML ファイルの代わりに .js ファイルを `-o` フラグで指定することで、完全な HTML ではなく、 JavaScript の「グルー」ファイル*だけ*を出力するように指定することができます。例えば `emcc -o hello2.js hello2.c -O3` とします。そうすると、完全にスクラッチでカスタム HTML を作成することができますが、これは高度なアプローチであり、通常は提供されている HTML テンプレートを使用する方が簡単です。
>
> Emscripten は、メモリー割り当て、メモリーリーク、その他多くの問題を処理するために、多種多様な JavaScript の「グルー」コードを必要とします。

Expand Down Expand Up @@ -126,7 +126,7 @@ C で定義された関数があって、それを JavaScript から呼び出し

既定では、 Emscripten が生成したコードは常に `main()` を呼び出し、他のデッドコードは削除されます。関数名の前に `EMSCRIPTEN_KEEPALIVE` を置くことによって、これが起こらなくなります。また、`EMSCRIPTEN_KEEPALIVE` を使用するために `emscripten.h` をインポートする必要があります。

> **Note:** `#ifdef` ブロックを加えたことによって、C++ のコードからこの例をインクルードしようとしても動作するでしょう。 C と C++ の間でのマングリング規則によって、他の場合では壊れることもありますが、ここでは C++ を使用している場合に、外部の C の関数として扱うように設定しています。
> **メモ:** `#ifdef` ブロックを加えたことによって、C++ のコードからこの例をインクルードしようとしても動作するでしょう。 C と C++ の間でのマングリング規則によって、他の場合では壊れることもありますが、ここでは C++ を使用している場合に、外部の C の関数として扱うように設定しています。

2. 便宜上、この新しいディレクトリーに `html_template/shell_minimal.html` (もちろん、このファイルはあなたの実際の開発環境に置きます)を加えます。
3. さて、再びコンパイル手順を実行しましょう。あなたの最新のディレクトリーの中(そして、Emscripten コンパイラー環境の入っているターミナルウィンドウ)で、このように C のコードをコンパイルします(NO_EXIT_RUNTIME オプションを付与してコンパイルする必要があることに注意してください。そうしない場合、 main() 関数が終了したときにランタイムもシャットダウンされてしまい、コンパイルされたコードが正しく呼ばれなくなる可能性があります - 例えば、atexit の呼び出しなどの適切な C のエミュレーションに必要です)
Expand Down
6 changes: 3 additions & 3 deletions files/ja/webassembly/caching_modules/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ l10n:

{{WebAssemblySidebar}}

> **Warning:** 実験的な {{jsxref("WebAssembly.Module")}} IndexedDB のシリアル化サポートがブラウザーから削除されています。{{bug("1469395")}} と[この仕様の問題](https://github.com/WebAssembly/spec/issues/821)を参照してください。
> **警告:** 実験的な {{jsxref("WebAssembly.Module")}} IndexedDB のシリアル化サポートがブラウザーから削除されています。{{bug("1469395")}} と[この仕様の問題](https://github.com/WebAssembly/spec/issues/821)を参照してください。

キャッシュはアプリケーションのパフォーマンスを向上させるのに役立ちます。コンパイルされた WebAssembly モジュールをクライアントに格納することによって、毎回ダウンロードしてコンパイルする必要がなくなります。この記事では、キャッシュまわりのベストプラクティスについて解説します。

Expand All @@ -23,7 +23,7 @@ IndexedDB はやや昔ながらの API です。まず、私たちは今日の

wasm-utils.js ライブラリースクリプトに `instantiateCachedURL()` があります。この関数は `url` と `dbVersion` から wasm モジュールを読み取り、 `importObject` を指定してインスタンス化を行います。そして、成功時に wasm インスタンスを渡すプロミスを返します。さらに、コンパイルされた wasm モジュールをキャッシュするデータベースの作成、新しいモジュールのデータベースへの格納、事前にキャッシュされたモジュールのデータベースからの取得(再度ダウンロードする必要がなくなります)を行います。

> **Note:** サイト全体の wasm のキャッシュ(指定された URL だけではありません)は関数に渡す `dbVersion` によってバージョン管理されます。wasm モジュールコードが更新された場合や、URL が変更された場合は `dbVersion` を更新する必要があります。以降 `instantiateCachedURL()` を呼び出すと、キャッシュ全体がクリアされ、期限切れのモジュールの使用を避けることができます。
> **メモ:** サイト全体の wasm のキャッシュ(指定された URL だけではありません)は関数に渡す `dbVersion` によってバージョン管理されます。wasm モジュールコードが更新された場合や、URL が変更された場合は `dbVersion` を更新する必要があります。以降 `instantiateCachedURL()` を呼び出すと、キャッシュ全体がクリアされ、期限切れのモジュールの使用を避けることができます。

この関数はいくつかの必要な定数を定義することから始まります。

Expand Down Expand Up @@ -120,7 +120,7 @@ function instantiateCachedURL(dbVersion, url, importObject) {
},
```

> **Note:** {{jsxref("WebAssembly.instantiate()")}} は {{jsxref("WebAssembly.Module()", "Module")}} と {{jsxref("WebAssembly.Instance()", "Instance")}} の両方を返します。Module はコンパイルされたコードを表し、IDB に格納したり、[`postMessage()`](/ja/docs/Web/API/MessagePort/postMessage) を通じて ワーカーとの間で共有することができます。Instance はステートフルで、呼び出し可能な JavaScript の関数を含んでいるため、格納/共有することは出来ません。
> **メモ:** {{jsxref("WebAssembly.instantiate()")}} は {{jsxref("WebAssembly.Module()", "Module")}} と {{jsxref("WebAssembly.Instance()", "Instance")}} の両方を返します。Module はコンパイルされたコードを表し、IDB に格納したり、[`postMessage()`](/ja/docs/Web/API/MessagePort/postMessage) を通じて ワーカーとの間で共有することができます。Instance はステートフルで、呼び出し可能な JavaScript の関数を含んでいるため、格納/共有することは出来ません。

データベースをオープンすることに失敗した場合(例えば、パーミッションやクォータ等の原因による)、モジュールをフェッチしてコンパイルするだけにし、結果を格納しないでください (格納するデータベースがないため) 。

Expand Down
4 changes: 2 additions & 2 deletions files/ja/webassembly/concepts/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ WebAssembly は [W3C WebAssembly Community Group](https://www.w3.org/community/w
- 安全であること — WebAssembly は安全でサンドボックス化された実行環境上で動作するように設計されています。他のウェブ言語と同様に、ブラウザーに対して same-origin および権限ポリシーの確認を強制します。
- ウェブを破壊しないこと — WebAssembly は他のウェブ技術と協調し、後方互換性を維持するように設計されます。

> **Note:** WebAssembly はまたウェブの領域外の JavaScript 環境での利用も行います ([Non-web embeddings](http://webassembly.org/docs/non-web/) を参照)。
> **メモ:** WebAssembly はまたウェブの領域外の JavaScript 環境での利用も行います ([Non-web embeddings](http://webassembly.org/docs/non-web/) を参照)。

## WebAssembly はどのようにウェブプラットフォームに適合するのか

Expand Down Expand Up @@ -96,7 +96,7 @@ Emscripten ツールは C/C++ ソースコードを取得し、それを .wasm
2. Emscripten が Clang + LLVM によるコンパイル結果を .wasm バイナリーに変換します。
3. それ自体だけでは WebAssembly は現時点で DOM に直接アクセスできません; JavaScript を呼び出して、整数型もしくは浮動小数点型の基本データを渡せるだけです。そのため、ウェブ API にアクセスするためには、WebAssembly は JavaScript を呼び出す必要が有り、この時点でウェブ API の呼び出しが行われます。そのため Emscripten は結果を得るための HTML と JavaScript のグルーコードを生成します。

> **Note:** 将来的に [WebAssembly に直接ウェブ API を呼ばせることを許容する](https://github.com/WebAssembly/gc/blob/master/README.md) 計画があります。
> **メモ:** 将来的に [WebAssembly に直接ウェブ API を呼ばせることを許容する](https://github.com/WebAssembly/gc/blob/master/README.md) 計画があります。

JavaScript グルーコードは多くの人が想像するほど簡単な構造をしていません。はじめに、 Emscripten は [SDL](https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer)、 [OpenGL](https://en.wikipedia.org/wiki/OpenGL)、 [OpenAL](https://en.wikipedia.org/wiki/OpenAL) および [POSIX](https://en.wikipedia.org/wiki/POSIX) の一部といった主な C/C++ ライブラリーを組み込みます。これらのライブラリー群はウェブ API の観点から組み込まれ、各々が WebAssembly を既存のウェブ API に接続するためにいくつかの JavaScript グルーコードを必要とします。

Expand Down
6 changes: 3 additions & 3 deletions files/ja/webassembly/existing_c_to_wasm/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ $ emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' \
libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c
```

> **Note:** この方法はすべての C プロジェクトでうまくいく訳ではありません。多くのプロジェクトでは、コンパイルの前にシステム固有のコードを生成するため、 autoconf/automake に依存しています。 Emscripten は、これらのコマンドをラップして適切な引数を注入するための `emconfigure` と `emmake` を提供しています。詳細は [Emscripten のドキュメント](https://emscripten.org/docs/compiling/Building-Projects.html)を読んでください。
> **メモ:** この方法はすべての C プロジェクトでうまくいく訳ではありません。多くのプロジェクトでは、コンパイルの前にシステム固有のコードを生成するため、 autoconf/automake に依存しています。 Emscripten は、これらのコマンドをラップして適切な引数を注入するための `emconfigure` と `emmake` を提供しています。詳細は [Emscripten のドキュメント](https://emscripten.org/docs/compiling/Building-Projects.html)を読んでください。

これで、新しいモジュールを読み込むために必要なのは HTML と JavaScript だけになりました。

Expand All @@ -60,7 +60,7 @@ $ emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' \

![正しいバージョン番号を示すデベロッパーツールのコンソールのスクリーンショット](version.png)

> **Note:** libwebp は現在のバージョン a.b.c を 16 進数の 0xabc で返します。例えば、v0.6.1 は 0x000601 = 1537 としてエンコードされています。
> **メモ:** libwebp は現在のバージョン a.b.c を 16 進数の 0xabc で返します。例えば、v0.6.1 は 0x000601 = 1537 としてエンコードされています。

### JavaScript から Wasm に画像を取得する

Expand Down Expand Up @@ -166,7 +166,7 @@ const result = new Uint8Array(resultView);
api.free_result(resultPointer);
```

> **Note:** `new Uint8Array(someBuffer)` は同じメモリーチャンク上に新しいビューを作成し、 `new Uint8Array(someTypedArray)` はデータをコピーします。
> **メモ:** `new Uint8Array(someBuffer)` は同じメモリーチャンク上に新しいビューを作成し、 `new Uint8Array(someTypedArray)` はデータをコピーします。

画像のサイズによっては、 wasm が入力画像と出力画像を格納するためのメモリーを十分に大きくすることができないというエラーが発生する可能性があります。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ fetch('simple.wasm').then(response =>
);
```

> **Note:** おそらく多くの場合は {{jsxref("WebAssembly.compileStreaming()")}} を使用したほうが `compile()` よりも効率的なのでそちらの方がいいでしょう。
> **メモ:** おそらく多くの場合は {{jsxref("WebAssembly.compileStreaming()")}} を使用したほうが `compile()` よりも効率的なのでそちらの方がいいでしょう。

## 仕様書

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } })
});
```

> **Note:** この例は[GitHub 上の実行例](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)で確認できます。また、[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)も参照してください。
> **メモ:** この例は[GitHub 上の実行例](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)で確認できます。また、[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)も参照してください。

## 仕様書

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } })
});
```

> **Note:** この例は[GitHub 上の実行例](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)で確認できます。また、[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)も参照してください。
> **メモ:** この例は[GitHub 上の実行例](https://mdn.github.io/webassembly-examples/js-api-examples/global.html)で確認できます。また、[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html)も参照してください。

## 仕様書

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
.then(obj => obj.instance.exports.exported_func());
```

> **Note:** この例は GitHub 上の [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) ([実行例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)) で見ることができます。</p>
> **メモ:** この例は GitHub 上の [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) ([実行例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)) で見ることができます。</p>
</div>

## 仕様書
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/Inst

## 構文

> **Warning:** 巨大なモジュールのインスタンス化は高コストになる可能性があるので、開発者が同期的な `Instance()` コンストラクターを使用するのは、絶対に必要な場合のみにするべきです。それ以外の場合はすべて、{{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用してください。
> **警告:** 巨大なモジュールのインスタンス化は高コストになる可能性があるので、開発者が同期的な `Instance()` コンストラクターを使用するのは、絶対に必要な場合のみにするべきです。それ以外の場合はすべて、{{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用してください。

```js
new WebAssembly.Instance(module, importObject)
Expand Down
Loading