DartPad をブログなどに埋め込む方法

DartPad をブログなどに埋め込む方法

Dec 26, 2019

DartPadをブログなどサイトに埋め込む方法を紹介します。

このエントリーをはてなブックマークに追加

DartPad とは

DartPadDartのコードをブラウザ上で実行できるサイトです。

2019年12月に大幅にアップデートされてFlutter対応になりました。そして、codelabなどで使われていますが、サイトにDartPadを埋め込むことができるようになりました。

このブログでも使ってますが、解説記事などに実際のコードを埋め込めるし、その場で編集して実行することができるので非常に便利です。

今回はDartPadをブログなどに埋め込む方法を紹介したいと思います。

埋め込み方法

サイトにDartPadを埋め込む方法は4つあります。

  1. Dart コードとコンソール(embed-dart)
  2. Dart コードと小さめのコンソール(embed-inline)
  3. Fluter コードとコンソールと HTML 出力(embed-flutter)
  4. Fluter コードとコンソールと 装飾可能な HTML 出力(embed-html)

それぞれ具体例と合わせて紹介していきます。

embed-dart

Dartのコードの記述と実行ができます。 左にDartコードのエディタ、右側に結果のコンソールが表示されます。

https://dartpad.dev/embed-dart.htmlを使用し、以下のように記述します。

<iframe src="https://dartpad.dev/embed-dart.html?id=215ba63265350c02dfbd586dfd30b8c3"></iframe>

embed-inline

embed-dartと同じくDartのコードの記述と実行ができます。 上部にエディタ、下部に結果のコンソールが表示されます。

https://dartpad.dev/embed-inline.htmlを使用し、以下のように記述します。

<iframe src="https://dartpad.dev/embed-inline.html?id=215ba63265350c02dfbd586dfd30b8c3"></iframe>

embed-flutter

Flutterのコードの記述と実行ができます。 左上にエディタ、左下にコンソール、右に実行結果が表示されます。

https://dartpad.dev/embed-flutter.htmlを使用し、以下のように記述します。

<iframe src="https://dartpad.dev/embed-flutter.html?id=b3ccb26497ac84895540185935ed5825"></iframe>

embed-html

embed-flutterと同じくFlutterのコードの記述と実行ができます。 HTMLタブとCSSタブで装飾することができます。

https://dartpad.dev/embed-htmlr.htmlを使用し、以下のように記述します。

<iframe src="https://dartpad.dev/embed-html.html?id=b3ccb26497ac84895540185935ed5825"></iframe>

クエリの紹介

クエリを指定することでダートモードにしたり、エディタのサイズを変えたりすることができます。 DartPadで指定できるクエリ一覧を紹介します。

クエリ パラメータ
id gist の id
split エディタの幅の割合
theme テーマ(dark or light)
run true で自動で実行するか

例えば id が 23b1bb0f1d56f867c441773ba1697007のgistをダークテーマで、自動で実行したい場合は以下のように記述します。

<iframe src="https://dartpad.dev/embed-flutter.html?id=23b1bb0f1d56f867c441773ba1697007&theme=dark&run=true"></iframe>

次のように埋め込まれます。

公式ドキュメント

このエントリーをはてなブックマークに追加