2c:null 2d:["$","title",null,{"children":"埋め込みとダウンロード上級編 | SUGIMOTO Tatsuo | Observable"}] 32:T5ae,幸いなことに、Observableは [オープンソースのランタイム](https://github.com/observablehq/runtime)、 [標準ライブラリ](https://github.com/observablehq/stdlib)、 [インスペクタ](https://github.com/observablehq/inspector) を提供しています。 - **ランライム**は、ノートブックのセルを依存関係のグラフにつなぎ合わせ、評価することで命を吹き込んでくれます。 - **標準ライブラリ**は、HTML、SVG、ジェネレータ、ファイル、Promise、[その他もろもろ](/@observablehq/standard-library)を扱う便利な関数を提供します。 - **インスペクタ**は、DOMとJavaScriptの値を、自分で自由に書いたWebページにレンダリングするためのデフォルト戦略を実装します。 33:T741,## セルのレンダリングノートブックを埋め込む最も明白な方法は、その内容を Web ページにライブで表示することです。そのため、Observable ランタイムには[標準的なインスペクタ](https://github.com/observablehq/inspector)を持っています。インスペクタは、ノートブックから生きた値を取得し、HTMLの希望する場所に入れます。例えば、以下はノートブックを空のボディに表示する埋め込みツールのコードです（[ライブのデモを見る](https://bl.ocks.org/mbostock/raw/1cf3e863b054aca0bc7061b5292120ab/)）。 ~~~html ~~~34:[{"id":"fc09bd06afec513a17fd0307631db89669916563522226a80b8d80dc1d725874903ca937523cad1e7b687ad3cf9a2c4276372fe1c8a6e13da06704b6f10f371f","href":"https://static.observableusercontent.com/files/fc09bd06afec513a17fd0307631db89669916563522226a80b8d80dc1d725874903ca937523cad1e7b687ad3cf9a2c4276372fe1c8a6e13da06704b6f10f371f","name":"books.png","type":"image/png","lastModified":1669775432201.464,"size":187300},{"id":"7d971069b132d5677828ec93de1fc744f1eca03f4b853e1495aa4ec5a78bdbe7ba4798606449c6e18d39367360cdf9e05b8e34a94375bf85d5e442c8d40b8dae","href":"https://static.observableusercontent.com/files/7d971069b132d5677828ec93de1fc744f1eca03f4b853e1495aa4ec5a78bdbe7ba4798606449c6e18d39367360cdf9e05b8e34a94375bf85d5e442c8d40b8dae","name":"breakout.png","type":"image/png","lastModified":1669775432201.464,"size":289675},{"id":"7259795c0542cbf685daa8e51b926c87e9fa774bce3947e1c2e26095183cc9443921fe2c0f30af59f9f4c8ad7590924dcd45eabaf597d27aa5b1292169ee4c9c","href":"https://static.observableusercontent.com/files/7259795c0542cbf685daa8e51b926c87e9fa774bce3947e1c2e26095183cc9443921fe2c0f30af59f9f4c8ad7590924dcd45eabaf597d27aa5b1292169ee4c9c","name":"new.png","type":"image/png","lastModified":1669775432201.464,"size":44522}] 30:{"id":"bccc414f83dfb547","slug":"advanced-embedding-and-downloading","title":"埋め込みとダウンロード上級編","thumbnail":"60445fa47a7372821bdad40bdad80757e1cca8364b70247db5c12afe23332083","access_level":"public","create_time":"$D2022-11-30T02:30:32.201Z","update_time":"$D2023-01-02T08:51:01.140Z","view_time":null,"first_public_time":"$D2022-12-01T04:54:49.905Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":"starter_2024"},"version":1424,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}],"members":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"67ae5c5d42ba44ac","slug":"observable","title":"Observableドキュメント","owner":{"id":"350b55c00cc281fb","login":"sugi2000","name":"SUGIMOTO Tatsuo"}},"type":"notebook","body":{"titling":"auto","title":"埋め込みとダウンロード上級編","cells":[{"id":577,"value":"# 埋め込みとダウンロード上級編\n\n

\n ノートブックはアプリケーションのデータやUIと統合できるポータブルなモジュールになります。\n

\n\n

Illustration: [ClipArt ETC](http://etc.usf.edu/clipart/54200/54238/54238_book_pile.htm)

\n\nThis is a Japanese version of [Advanced Embedding and Downloading](https://observablehq.com/@observablehq/advanced-embeds). Translated by SUGIMOTO Tatsuo.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1126,"value":"おや、大作を作りあげましたね。\n光り輝くよろこびいっぱいのノートブックです。\nこのノートブックをブログに埋め込んで、みんなに見てもらいたいものです。\nそこで問題になるのは、この美しいグラフをどうやってウェブアプリと統合させるかです。\nグラフをハードディスクに保存して、昔のWordファイルや旅の写真と一緒に後世にのこすにはどうしたらいいでしょうか。\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"intro","database":"$undefined"},{"id":1128,"value":"お気づきだとおもいますが、Observableのノートブックは、みんなが知っている普通のJavaScriptとはちょっと違います。\nノートブックでは、宣言順ではなく、[データの流れ](/@observablehq/how-observable-runs)にそって実行されます。\nそれに、[viewof](/@observablehq/introduction-to-views)や[mutable](/@observablehq/introduction-to-mutable-state)といった、特殊で素晴らしいリアクティブなプリミティブを含んでいます。\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":999,"value":"## Webページにセルを埋め込む\n\n[埋め込み入門](/@observablehq/embeds)では、公開または共有したノートブックから名前つきのセル（チャート、ビジュアリゼーション、ウィジェット）をすばやく簡単に埋め込むことができることを確認しました。\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1135,"value":"下のセルの左側のメニューの**Embed**をクリックすると、埋め込みツールが開きます。\nデフォルトのIframe手法はほぼこれだけで完結しています。\n今回は、ドロップダウンから**Runtime with JavaScript**を選択してみましょう。\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1002,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"graphic","database":"$undefined"},{"id":1144,"value":"デフォルトでは、埋め込みコードはノートブックの最新の公開バージョンを読み込みます。\nObservableでノートブックの新しいバージョンを公開すると、埋め込みセルもすぐに（すくなくとも30秒以内に）更新されます。\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1028,"value":"もし埋め込みコードを特定の公開バージョンに固定したい場合は、ノートブックのESモジュールURLに`@version`を追加してください。\n特定の公開バージョンは、[ノートブックの履歴](/@observablehq/history)からいつでも見つけることができます。\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1145,"value":"こちらは[\\`graphic\\`セルを埋め込んだシンプルなWebページ](https://observablehq.github.io/examples/versioning/)へのリンクです。\nこのノートブックから2つの異なるバージョンを埋め込んでいます。\nWebページは、別のサイトでホスティングされています。\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"## ESモジュールとしてのノートブック\n\nノートブックは、[JavaScriptモジュール](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)としてコンパイルし、ダウンロードすることができます！　\nノートブックメニューの**Download code**をクリックすると、コンパイルされたノートブックがダウンロードされます。\nObservableランタイム、インポートされたノートブック、ノートブックの実行方法をしめしたHTMLテンプレートなどが入っています。\n\n\n\n $\"Screen$ ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1152,"value":"また、ノートブックを公開したり、リンクの共有を有効にしておけば、Observableから直接コードを「ホットリンク」することも可能です。\n\n\n\n~~~\nhttps://api.observablehq.com/@jashkenas/my-neat-notebook.js?v=3\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1150,"value":"このモジュールを使えば、どんなJavaScript環境でもノートブックを実行することができます。\nこのような形で、ノートブックは真のJavaScriptプログラムとなり、アプリケーションを操作したり、深く統合したりすることができます。\nそれでは、組み込みノートブックの使い方を見てみましょう。\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"インスペクタにはインラインスタイルは含まれていませんが、\n必要であれば[デフォルトのスタイルシート](https://cdn.jsdelivr.net/npm/@observablehq/inspector@3/dist/inspector.css)（[ソース](https://github.com/observablehq/inspector/blob/master/src/style.css)）が用意されています。\n埋め込みノートブックを美しくするために、CSSフレームワークを試してみてください。\nObservableでは[Tachyons](http://tachyons.io/)を愛用していますが、GitHubの[Primer](https://primer.style/css)など、良い選択肢がたくさんあります。\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1161,"value":"ノートブック全体をレンダリングしたくない場合は、カスタム関数を定義して、どのセルをどこにレンダリングするかを制御します。例えば、「chart」という名前のセルだけを同じidのDOM要素にレンダリングするには、次のようにします。\n\n\n\n~~~js\nnew Runtime().module(notebook, name => {\n if (name === \"chart\") {\n return new Inspector(document.querySelector(\"#chart\"));\n }\n});\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1163,"value":"ノートブックの一部のセルだけをレンダリングする場合、使用されないセルやそのセルに依存するセルは、まったく実行されないことに注意しましょう！\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"時には、参照されないセルが重要な副作用をおよぼすことがあります。\n例えば、[Sortable Bar Chart](https://observablehq.com/@d3/sortable-bar-chart)では、`update`セルが既存のDOM要素を変化させるメソッドを介してチャートにデータを渡します。\nもし、組み込みノートブックのバックグラウンドで副作用をおこすセルを実行したい場合、そうしたセルに対してインスペクタの代わりに `true` を返すことができます。\n\n\n\n~~~js\n(new Runtime).module(define, name => {\n if (name === \"chart\") return Inspector.into(\".chart\")();\n if (name === \"update\") return true;\n});\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1167,"value":"Embedツールで生成されるコードは、このテクニックを使って、埋め込むセルの1つを参照している任意のセルを実行しています。\nもしそれがやりすぎであれば、その行を削除することができます。\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1165,"value":"CSS `