CodeSandboxの埋め込みオプションまとめ(前編)

2021.08.10

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

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

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

まとめ

既定

サンドボックスの埋め込み(Embed)はiframeのコードを使用して行います。

埋め込み用コードはサンドボックスのページから取得できます。取得方法はこちらをご確認ください。下記は既定のコードです。

<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&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>

このサンドボックスの埋め込みのカスタマイズはiframeのオプションを使用して行います。

高さ

属性 オプション 既定値 説明
style height px 500px サンドボックスの高さ
  • height:250px
<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark"
  style="width:100%; height:250px; 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>

ページに対する横幅の比率

属性 オプション 既定値 説明
style width %/px 100% ページの横幅に対するサンドボックスの横幅の比率
  • width:70%
<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark"
  style="width:70%; 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>

縦横の縮尺

属性 オプション 既定値 説明
style 下記参照(対象ブラウザごとに異なります) 既定値に対する縮尺 1 表示するサンドボックスの縦横の縮尺
  • transform:scale(0.55); -o-transform:scale(0.55); -webkit-transform:scale(0.55); -moz-transform:scale(0.55); -ms-transform:scale(0.55);
<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden; transform:scale(0.55); -o-transform:scale(0.55); -webkit-transform:scale(0.55); -moz-transform:scale(0.55); -ms-transform:scale(0.55);"
  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 theme dark/light dark サンドボックスのテーマ
  • theme=light
<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=light"
  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 view editor/split/preview preview 既定のビュー
  • view=split
<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&view=split"
  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>

  • view=editor
<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&view=editor"
  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 editorsize 数値 50 エディターサイズの比率(スプリットビューの場合)
  • editorsize=70
<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&view=split&editorsize=70"
  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>

CodeMirrorエディター

属性 オプション 既定値 説明
src codemirror 0/1 0 CodeMirrorエディターの使用(埋め込みサイズが軽量化される)
  • codemirror=1
<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&view=editor&codemirror=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 highlights 行番号をコンマで指定 コードの行のハイライト(CodeMirrorを使用時のみ)
  • highlights=6,7
<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=14&hidenavigation=1&theme=dark&codemirror=1&highlights=6,7"
  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 fontsize ピクセル数 14 エディターのフォントサイズ
  • fontsize=8
<iframe
  src="https://codesandbox.io/embed/distracted-cori-x6d0s?fontsize=8&hidenavigation=1&theme=dark&view=editor"
  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>

後編

参考

以上