CodeSandboxの埋め込みオプションまとめ（後編）

若槻龍太

2021.08.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

CodeSandboxは、Webアプリの作成と共有を迅速に行うことができるオンラインコードエディターおよびプロトタイピングツールです。

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

今回は、CodeSandboxのサンドボックスをブログ記事に埋め込む際のオプションまとめの後編です。（前編はこちら）

まとめ

ナビゲーションバー表示

属性	オプション	値	既定値	説明
`src`	`hidenavigation`	`0`/`1`	`0`	ナビゲーションバー非表示

hidenavigation=0

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=0&theme=dark"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

開発ツールの非表示

属性	オプション	値	既定値	説明
`src`	`hidedevtools`	`0`/`1`	`0`	開発ツールの非表示

hidedevtools=1

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

開発ツールの展開

属性	オプション	値	既定値	説明
`src`	`expanddevtools`	`0`/`1`	`0`	開発ツールの展開

expanddevtools=1

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&expanddevtools=1"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

eslintの使用

属性	オプション	値	既定値	説明
`src`	`eslint`	`0`/`1`	`0`	eslintの使用（埋め込みサイズが大きくなります）

eslint=1

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&eslint=1"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

見た目上は何が変わっているのか分かりませんでした。（コードに対してeslintが実行されている？）

変更時の強制更新

属性	オプション	値	既定値	説明
`src`	`forcerefresh`	`0`/`1`	`0`	コード変更時にframeが強制的にフル更新される

forcerefresh=1

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&forcerefresh=1"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

表示テキストをエディターで変更すると分かりますが、forcerefresh=0の場合は変更部分のみ更新されるのに対して、forcerefresh=1の場合はframe全体が更新されます。

イニシャルパス

属性	オプション	値	既定値	説明
`src`	`initialpath`	パス文字列	`/`	既定でロードされるパス

既定の/ではindex.jsがあればそれがロードされる。

既定で開くモジュール

属性	オプション	値	既定値	説明
`src`	`module`	`/`から始まるパス	entry path	既定でどのモジュールをエディターで開くか。コンマ区切りで複数指定した場合はそれぞれがタブで開かれる。

module=/src/index.js

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&view=editor&/src/index.js"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

module=/src/index.js,/src/App.js

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&view=editor&module=/src/index.js,/src/App.js"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

開いているファイルの評価

属性	オプション	値	既定値	説明
`src`	`moduleview`	`/`から始まるパス	entry path	エディターで開いているファイルを評価する

moduleview=1

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&moduleview=1"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

開発ツールのConsoleに評価結果が出力されます。

既定のプレビューウィンドウ

属性	オプション	値	既定値	説明
`src`	`previewwindow`	`console`/`tests`/`browser`	`browser`	プレビューを開いた時の既定のウィンドウ

previewwindow=console

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&previewwindow=console"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

previewwindow=tests

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&previewwindow=tests"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

クリック時のみ実行

属性	オプション	値	既定値	説明
`src`	`runonclick`	`0`/`1`	`0`	クリック時のみプレビューを実行する

runonclick=1

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&runonclick=1"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="distracted-cori-x6d0s"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>