CodeSandboxの埋め込みオプションまとめ（前編）
2021.08.10
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、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>
後編
参考
- Embedding - CodeSandbox Documentation
- 外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 | アシアルブログ
以上
