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

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

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

• CodeSandbox: Online Code Editor and IDE for Rapid Web Development

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

まとめ

ナビゲーションバー表示

• 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>

開発ツールの非表示

• 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>

開発ツールの展開

• 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の使用

• 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が実行されている？）

変更時の強制更新

• 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全体が更新されます。

イニシャルパス

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

既定で開くモジュール

• 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>

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

• 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に評価結果が出力されます。

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

• 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>

クリック時のみ実行

• 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>

前編

• CodeSandboxの埋め込みオプションまとめ（前編） | DevelopersIO

参考

• Embedding - CodeSandbox Documentation

以上