25:["$","title",null,{"children":"高度な埋め込みとダウンロード | Yuichi Yazaki | Observable"}] 49:[{"id":"7d971069b132d5677828ec93de1fc744f1eca03f4b853e1495aa4ec5a78bdbe7ba4798606449c6e18d39367360cdf9e05b8e34a94375bf85d5e442c8d40b8dae","href":"https://static.observableusercontent.com/files/7d971069b132d5677828ec93de1fc744f1eca03f4b853e1495aa4ec5a78bdbe7ba4798606449c6e18d39367360cdf9e05b8e34a94375bf85d5e442c8d40b8dae","name":"breakout.png","type":"image/png","lastModified":1723122646701.525,"size":289675},{"id":"7259795c0542cbf685daa8e51b926c87e9fa774bce3947e1c2e26095183cc9443921fe2c0f30af59f9f4c8ad7590924dcd45eabaf597d27aa5b1292169ee4c9c","href":"https://static.observableusercontent.com/files/7259795c0542cbf685daa8e51b926c87e9fa774bce3947e1c2e26095183cc9443921fe2c0f30af59f9f4c8ad7590924dcd45eabaf597d27aa5b1292169ee4c9c","name":"new.png","type":"image/png","lastModified":1723122646701.525,"size":44522}] 29:{"id":"f794deb02aa133f5","slug":null,"title":"高度な埋め込みとダウンロード","thumbnail":"be1cac40873b493e0f0702c62476a6f9a4f6edce0fd239c12c547a8ed4d4fcad","access_level":"public","create_time":"$D2024-08-08T13:10:46.701Z","update_time":"$D2024-08-08T13:24:21.079Z","view_time":null,"first_public_time":"$D2024-08-08T13:23:54.618Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false},"version":1266,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false}],"members":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"role":"editor"},{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"高度な埋め込みとダウンロード","cells":[{"id":577,"value":"# 高度な埋め込みとダウンロード","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1126,"value":"さて、あなたは最高傑作を書き上げました。それは、素晴らしさと楽しさに満ちたノートです。それをブログに埋め込んで、みんなに見せたかもしれません。さて、問題は、その気の利いたグラフを Web アプリに統合するにはどうしたらよいか、ということです。それをハードドライブに保存して、古い Word 文書や休暇の写真と一緒に後世に残すにはどうすればよいでしょうか。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"intro","database":"$undefined"},{"id":1128,"value":"すでにお気づきかと思いますが、Observable ノートブックは、皆さんがよくご存知の従来の JavaScript とは少し異なります。ステートメントの線形シーケンスではなく、[データフロー](/@observablehq/how-observable-runs) の順序で実行され、[viewof](/@observablehq/introduction-to-views) や [mutable](/@observablehq/introduction-to-mutable-state) などの奇妙で素晴らしいリアクティブプリミティブが含まれています。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"幸いなことに、Observable は、ノートブックのセルを依存関係グラフにつなぎ合わせて評価することでセルに命を吹き込む [オープンソースランタイム](https://github.com/observablehq/runtime)、HTML、SVG、ジェネレーター、ファイル、Promise などの [その他の便利な雑多なもの](/@observablehq/standard-library) を操作するための便利な機能を提供する [標準ライブラリ](https://github.com/observablehq/stdlib)、DOM と JavaScript の値をライブ Web ページにレンダリングするためのデフォルトの戦略を実装する [インスペクター](https://github.com/observablehq/inspector) を提供しています。ただし、独自のインスペクターを作成することもできます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":999,"value":"## Web ページにセルを埋め込む\n\n[埋め込みの概要](/@observablehq/embeds) では、公開または共有されたノートブックの名前付きセル (グラフ、視覚化、ウィジェット) をすばやく簡単に埋め込む方法について説明しました。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1135,"value":"下のセルの左側にあるメニューの [**埋め込み**] をクリックして、埋め込みツールを開きます。デフォルトの iframe メソッドはほぼ自己完結型です。今回は、ドロップダウンから [**JavaScript 付きランタイム**] を選択して、詳細を確認します。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1002,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"graphic","database":"$undefined"},{"id":1144,"value":"デフォルトでは、埋め込みコードはノートブックの最新の公開バージョンを読み込みます。Observable でノートブックの新しいバージョンを公開すると、埋め込まれたセルはすぐに (または少なくとも 30 秒以内に) 更新されます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1028,"value":"埋め込みコードを特定の公開バージョンにロックしたい場合は、ノートブックの ES モジュール URL に `@version` を追加できます。また、特定の公開バージョンは [ノートブックの履歴](/@observablehq/history) でいつでも見つけることができます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1145,"value":"以下は、オフサイトでホストされているこのノートブックの 2 つの異なるバージョンからの [上記の \\`graphic\\` セルを埋め込んだ単純な Web ページ](https://observablehq.github.io/examples/versioning/) へのリンクです。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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/) としてコンパイルしてダウンロードできます。ノートブックメニューの [**コードをダウンロード**] をクリックすると、コンパイル済みのノートブック (Observable ランタイム、インポートしたノートブック、ノートブックの実行方法を示す HTML テンプレートを含む) をダウンロードできます。\n\n $\"Screen$ ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1152,"value":"あるいは、ノートブックを公開しているかリンク共有を有効にしている場合は、Observable から直接コードを「ホットリンク」することもできます:\n\n~~~\nhttps://api.observablehq.com/@jashkenas/my-neat-notebook.js?v=3\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1150,"value":"このモジュールを使用すると、任意の JavaScript 環境でノートブックを実行できます。この形式では、ノートブックは操作してアプリケーションと深く統合できる真の JavaScript プログラムです。では、埋め込みノートブックを使用する方法をいくつか見ていきましょう。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"## セルのレンダリング\n\nノートブックを埋め込む最も明白な方法は、その内容を Web ページにライブで表示することです。このために、Observable ランタイムには [標準インスペクター](https://github.com/observablehq/inspector) が含まれています。このインスペクターは、ノートブックからライブ値を取得し、必要な HTML に配置できます。たとえば、以下は、ノートブックを空の本文にレンダリングするために Embed ツールが提供するコードの拡大表示です ([ライブで表示](https://bl.ocks.org/mbostock/raw/1cf3e863b054aca0bc7061b5292120ab/))。\n\n~~~html\n\n\n\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"インスペクターにはインラインスタイルは含まれていませんが、必要に応じて [デフォルトのスタイルシート](https://cdn.jsdelivr.net/npm/@observablehq/inspector@3/dist/inspector.css) ([ソースを参照](https://github.com/observablehq/inspector/blob/master/src/style.css)) があります。埋め込みノートブックを美しくするには、CSS フレームワークを試してみてください。Observable では [Tachyons](http://tachyons.io/) を推奨していますが、GitHub の [Primer](https://primer.style/css) など、優れた選択肢は数多くあります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1161,"value":"ノートブック全体をレンダリングしたくない場合は、レンダリングするセルとその配置場所を制御するカスタム関数を定義します。たとえば、「chart」という名前のセルだけを同じ ID を持つ DOM 要素にレンダリングするには、次のようにします:\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1163,"value":"ノートブックから限られたセルのセットをレンダリングする場合、使用されていないセル、または使用されているセルによって依存されていないセルはまったく実行されないことに注意することが重要です。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"参照されていないセルに重要な副作用がある場合もあります。たとえば、[ソート可能な棒グラフ](https://observablehq.com/@d3/sortable-bar-chart) では、\\`update\\` セルが既存の DOM 要素を変更するメソッドを介してデータをグラフに渡します。埋め込みノートブックのバックグラウンドで副作用のあるセルを実行する場合は、それらのセルのインスペクターの代わりに \\`true\\` を返すことができます:\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1167,"value":"埋め込みツールによって生成されるコードは、この手法を使用して、埋め込むセルの 1 つを参照するすべてのセルを実行します。それが過剰である場合は、行を削除できます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1165,"value":"CSS `