【Flutter】はてなブログに Flutterのコード＆プレビューを埋め込む

こんな感じになります

やり方

オンラインコードサンドボックスの Zapp を使用します。

zapp.run

埋め込みコードの取得

1. 上記にアクセスし、右上のGet Startedか、真ん中のView All Templatesを押します。
2. テンプレートが表示されるので、Flutterを選択します。
3. コードとPreviewが表示されるので、右上のEmbedを押します。
4. 各種設定をして、Copyボタンを押します。
   • デフォルト表示
     • Auto: ページの幅に応じて自動で切り替え？
     • Editor + Preview: EditorとPreviewを半々で表示
     • Editor: Editorを表示
     • Preview: Previewを表示
   • Light Theme
     • ライトテーマ or ダークテーマ
   • Lazy Load
     • ONの場合、閲覧者がクリックしないとコード、プレビューが読み込まれないモードになる

以下のようなコードがコピーできます。

<iframe 
  src="https://zapp.run/edit/flutter?theme=dark&lazy=false" 
  style="width: 100%; height: 100%; border: 0; overflow: hidden;"
></iframe>

はてなブログへの埋め込み

1. 上記でコピーしたコードを記事内容の入力欄にそのままペーストします。
   ※ Markdownモードでしか試してませんm(_ _)m
2. そのままだと平べったくなってしまうので、埋め込みコードのheight: 100%の部分をheight: ○○○pxに編集します（ここはお好みの数値でOKです）。
   • 参考までに、一番上に表示したサンプルではheight: 500pxとしています。

まとめ

CodePenなどでも同じようにFlutterのサンドボックスを扱うことができましたが、Zappはファイルエクスプローラーやコード補完も優秀だったので使いやすそうです。