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

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

FacebookHatena blogX
2021.08.11

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

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

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

今回は、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>

前編

参考

以上

この記事をシェアする

FacebookHatena blogX