こんにちは!
Flutterだけではなく、いろいろなプログラミング学習では、動作させるための環境準備が必要になることが多いです。DartPadを使えば、環境準備は不要です。
DartPadを使ってFlutterに入門してみよう！
別の記事の中でDartPadを利用して簡単にFlutterを実行できることを確認しました。
実行するために、ブログ内に公開したコードをDartPadにペーストしていただくことで確認しました。
でも、それって貼り付けて確認いただく必要があったり、変更に弱かったりします。
DartPadではGitHubと連携してソースコードを実行、公開することが可能です。また、ブログにDartPadを埋め込むことができるので、コード説明をしつつ、展開ができるということです。
今回はGithub（正確にはgist)への公開とその連携方法を整理、公開します！
GitHub（Gist)
Gistとは
GistとはGitHubのサービスの一つで、1ファイルでGit管理、公開することができます。無料で公開できるのもメリットです！
GitHubにアカウントを作成しなくても自分のソースや文書を公開できますが、普通にアカウントを作ることをお勧めします。（GistのURLを忘れるとアクセス先が分からなくなるとかあり得ます）
ソースコード作成
githubにアカウントを作成していることを前提に手順を紹介します。
もし作成していなくても簡単に作れますので作ってみてください。
まず、githubのトップページ右から「new gist」を選択します。
選択後、↓の画像の通り入力していきます。
gistも仕組みとしてはgitによるリモートのバージョン管理なので、世代管理しています。後からでも修正はできます。
筆者は前回のソースコードをそのまま登録しています。
これで保存が完了しました。
赤い枠の中にあるURLを利用して、DartPadと連携します。
ここのコードをコピーするとこんな感じ。
<script src="https://gist.github.com/masaki-ikuta/b93ac266f1fd3a719b6f376380ce8f56.js"></script>DartPadと連携するときに使用します。
DartPad×Github連携
それでは、GithubとDartPadを連携していきましょう。
連携手順
連携手順はこれだけです！
先ほどコピーしたURL部分を一部変更するだけなんです。
https://gist.github.com/masaki-ikuta/b93ac266f1fd3a719b6f376380ce8f56
↓
https://dartpad.dartlang.org/b93ac266f1fd3a719b6f376380ce8f56
これでDartPadからgistのソースコードを参照してソースコードを実行することができます。
DartPadで実行する
ブログなどのページにインラインフレームを利用してDartPadを埋め込めます。↓のは埋め込みですので、ここからDatPadを利用できます。
まとめ
今回は、DartPadとgithubを連携してみました。
参考になりましたか？
個人開発なら必須ではないことかもしれませんが、多人数で開発するなら、人のソースを簡単に確認できる機能ですし、便利ですよ。
このブログのように、自身のブログにも埋め込んで利用できますしね。
それでは、また会いましょう。see you again!
