完全に理解した人達の「Web技術」Talk #4 (2020/04/30) の LT 資料です。 https://easy2.connpass.com/event/173015/

1. DartPad ＋ CodePen で、
Flutterを体験してみよう
1
完全に理解した人達の
「Web技術」Talk #4

2. 自己紹介
名前
robo （兼高理恵）
好きなもの
モバイル端末
おしごと
アプリの設計から実装まで
所属
GDG Kyoto (staff) WTM Kyoto (staff) Flutter Osaka (staff)
2

3. Flutterは、Webアプリも作れます
#3では、東京都 新型コロナウイルス感染症 対策サイト の
最新検査状況を表示する Web アプリを作ってみました。
3
ホスティングしていないので、
ローカルサーバで動作させて
います。

4. はじめに
このセッションは、Flutter 未体験者や初学者向けです。
● Flutter は、どんなものなのかな？
● Flutter を、触ってみたいな。（でも開発環境インストールや設定が面倒 …）
そんなあなたに、
Flutter 概要と オンライン開発環境の DartPad ＋ CodePen について紹介し、
一人でも手軽に Flutter 体験できるシェルスクリプト flexp を紹介します。
Fluttr ⇒ iOS/Android/Web アプリが作れるフレームワーク
4

5. Flutter とは
5
● Fast Development
ホットリロードでレイアウト変更も
素早く確認
● Expressive and flexible UI
柔軟に組み合わることのできる
ウィジェット＆高速レンダリング。
● Native Performance
iOS および Android リリースアプリは、ネ イ
ティブマシンコード(ARM)にビルドされま
す。
Flutter 公式サイト https://flutter.dev/

6.
6
● MacOS のみ、
アルファバージョン
dev channel 移行
release 実行対応
アルファバージョン Flutter on desktop
Desktop support for Flutter
https://flutter.dev/desktop

7.
7
● ベータバージョン
dev channel 移行
Chrome のみ対応
Edge Firefox Safari
対応計画中
ベータバージョン Flutter on the web
Web support for Flutter
https://flutter.dev/web

8. ベータバージョン Flutter on the web
【参考資料先】
Web support for Flutter ⇒ https://flutter.dev/web
Building a web application with Flutter ⇒ https://flutter.dev/docs/get-started/web
Web support for Flutter goes beta
https://medium.com/flutter/web-support-for-flutter-goes-beta-35b64a1217c0?
How to Write a Flutter Web Plugin
https://medium.com/flutter/how-to-write-a-flutter-web-plugin-5e26c689ea1
8

9.
9
● UI as a Source File
単一ソースによる、全ての UI 構築
● Material Design、Material Theming 準拠
OSや画面サイズに囚われず、
一貫して統一されたブランドイメージを実現
環境に合わせて意図した UI が表示される。
ユーザーに意図した体験を届ける。
Flutter とは、OSや画面サイズに囚われない
ambient computing 実現を担う UIプラットフォーム

10. オンライン開発環境で、
手軽に Flutter を体験してみる。
10

11. 速報
11
CodePen が、
米国時間 4月15日
Flutter 対応を発表！
Flutter on CodePen
https://blog.codepen.io/2020/04/15/flutter-on-codepen/
このニュースは、現在
Flutter の公式 Twitterアカウント
@FlutterDev トップに固定掲載
されています。

12. CodePenは、Webアプリ統合開発環境
CodePenは、Webブラウザ上で完結する、
Webアプリ統合開発環境 (IDE) です。
Webアプリ・プロジェクトのことを Pen と呼称し、
コラボモードを使った複数人でのコード共有開発や、
開発アプリのホスティング/コンテンツへの埋め込みや、
プライベート・プロジェクトの作成(*1)
もできます。
(*1)
有償版機能、サーバ上に保管されます。
(エクスポートも可)
12
Hello! This is CodePen
https://codepen.io/hello/

13. アカウント未登録でも使えます
13
Create a New Pen
https://codepen.io/pen/editor/flutter
アカウント登録しなくても、
Create a New Pen ページで、
新規プロジェクトが開きますし、
エディタにコードが書き込めます。
Webアプリの実行もできますよ。
(ただし保管はできません )
「いきなりコードは、
思いつかないよね」
…というあなたには

14. 14
CodePen Topics
https://codepen.io/topic/flutter/templates
Flutter Yeti - @mkiisoft テンプレート
https://codepen.io/pen?template=LYpGWBx
マウスカーソルを見
るよ！
背景が波打つよ！
Gooey edge - @gskinner テンプレート
https://codepen.io/pen?template=mdeVWjp
CodePen Flutter専用の CodePen Topics は、
Pen (プロジェクト) テンプレート・ページです。
実際に動作確認できる、複数のWebアプリの
テンプレート (コード) が登録されています。
テンプレートなので、ソースコードを編集して、
新たな自分の Webアプリを公開登録(*1)
できます！
(*1)
登録にはアカウント登録必須（無償版でも可）

15. CodePen Flutter は、DartPad の兄弟
15
Announcing CodePen support for Flutter (2020/04/16)
https://medium.com/flutter/announcing-codepen-support-for-flutter-bb346406fe50
CodePen の Flutter エディタは、DartPad 機能提
供サービスと同じバックエンドサービス
(dart-services) の上に構築されています。
CodePen’s Flutter editor is built on top of the same backend
service, dart-services, that currently powers DartPad (the
web-based editor created by the Flutter and Dart teams that
has been recently updated to support Flutter).
投稿者の Zoey Fan さんは、
Google、Flutterのプロダクトマネージャーです。

16. DartPad (https://dartpad.dev) は、
公式の Dart / Flutter オンライン実行環境
16
メリット（手軽）
・誰でも使えます。(アカウント登録不要)
・Dart プログラムを編集＆実行できます。
・Flutter for Web アプリを編集＆実行できます。
・Webブラウザで動作するので環境構築不要です。
・少数ですがサンプルコードが提供されています。
デメリット（機能制約）
・dart ファイルやディレクトリは作れません。
・コード自動補完や宣言元参照はあるけど限定的。
・外部ライブラリが使えません (pubspec.yaml 未対応)
・Embed/埋込や独自公開には、 gist 連携が必須。
・独自アプリも DartPad としての公開になる。
Counter app in Flutter サンプル
https://dartpad.dev/b6409e10de32b280b8938aa75364fa7b

17. DartPad 参考資料先
【参考資料先】
DartPad ⇒ https://dartpad.dartlang.org/
DartPad | Dart ⇒ https://dart.dev/tools/dartpad
ビルトイン(組み込み済み) DartPad 使用先
Codelabs | Dart ⇒ https://dart.dev/codelabs
Codelabs | Flutter ⇒ https://flutter.dev/docs/codelabs
Implicit animations ⇒ https://flutter.dev/docs/codelabs/implicit-animations
A brand new DartPad.dev with Flutter support (Flutter for web 対応報告投稿)
https://medium.com/dartlang/a-brand-new-dartpad-dev-with-flutter-support-16fe6027784
17

18.
18
DartPad コードは、gist に保管して再利用します。
gist 保管されたサンプルアプリ・コード
https://gist.github.com/cch-robo/1f60de0bfbd9887bdff672639832cd54
サンプルアプリ・コードのDartPad ページ埋込
https://dartpad.dev/embed-flutter.html?id=1f60de0bfbd9887bdff6726398
32cd54&theme=dark

19.
19
Gist連携した DartPad＆コードが埋め込みの実態
コードラボやドキュメントのページ中に、
DartPad コンテンツを埋め込むこともできます。
独自アプリを DartPad ページとして、
公開 (DartPad 埋め込み) できます。

20. DartPad コードの Gist 保管概要
1. DartPad は、pubspec.yaml を使わない ⇒ 外部ライブラリを使えない、
main.dart だけで完結する Flutter for Web アプリの簡易開発環境と考える。
2. DartPad で作成＆動作確認したコードをコピペして、
タイトルを main.dart にした gist にして保管します。
gist は、同じタイトルであっても GIST_ID (ハッシュ値？) が異なるので、
main.dart タイトルの gist は複数作成できます。
3. gist は、パブリックか プライベートの git リポジトリです。
URLを知っている人のみにアクセスさせるには、URLを非公開にします。
20

21. DartPad コードの Gist 保管手順
1. GitHub にサインインして、gist ページ https://gist.github.com/ を開きます。
2. gist の 説明文を入力して、タイトルは main.dart 固定入力で、
DartPad コードを Gist テキストボックスに貼り付けます。
3. 「Create public gist」か「Create secret gist」のいずれかを選んで、
URL公開 (検索可能) か、URL非公開 (URLを知らないとアクセス不能) かを
指定して gist を作成します。
4. gist が作成されると https://gist.github.com/ユーザ名/GIST_ID のような、
URLが割り当てられます。 (GIST_ID は、ランダムな英数字列をとります)
21
GitHub ヘルプ > Gist の作成
https://help.github.com/ja/github/writing-on-github/creating-gists

22. gist 連携 ⇒ DartPad＆コード埋め込み手順
1. コードを指定して DartPad を開くには、以下のようなホスト＋パスで、
DartPad コード gist URL の GIST_ID をクエリパラメータに指定します。
https://dartpad.dev/embed-flutter.html?id=1f60de0bfbd9887bdff672639832cd54
2. DartPadをページに追加するには、iframe タグと 上記URLを利用します。
<iframe src="https://dartpad.dev/embed-flutter.html?id=<GIST_ID>"></iframe>
3. ダークテーマにするには、クエリとして theme=dark を追加指定します。
https://dartpad.dev/embed-flutter.html?id=<GIST_ID>&split=80&theme=dark
22
dart-lang / dart-pad Embedding Guide
https://github.com/dart-lang/dart-pad/wiki/Embedding-Guide

23. 付 録
flexp / flutter 体験シェルスクリプト紹介
23

24. flexp / flutter 体験シェルスクリプト
bash シェルスクリプト flexp ファイルは、
Flutter未体験の方に、Flutter を簡易に体験してもらえるよう、
SDK インストールやアプリの実行を提供するスクリプトです。
注意１）git コマンドが実行できることが必須要件となります。
注意２）SDK インストールには、2GB (*1)
のディスクスペースが必要です。
(*1)
IntelliJ IDEA 統合開発環境を含めた場合。
flexp ⇒ flutter experimence シェルスクリプト・ダウンロード先
https://drive.google.com/open?id=1eLGvMXMje5t6I1-N-x34q-rh3vcgakFI
flexp と Flutterを体験してみよう.pdf (flexp 使い方ドキュメント) を含む 資料一式
https://drive.google.com/open?id=14uKhm2_9vvk-VMPcc2Yt_gjR5kTZCyst
24

25. セッション資料 URL
DartPad＋CodePenで、Flutterを体験してみよう
https://drive.google.com/open?id=1wg1s4zx89tAfxF3H2JFXIHBa4i8gkyuekCZRLJ9gqyk
flutter_for_web_scraping_sample.zip（#3 #4 資料一式）
https://drive.google.com/open?id=14uKhm2_9vvk-VMPcc2Yt_gjR5kTZCyst
【梱包資料】
● DartPad＋CodePenで、Flutterを体験してみよう.pdf (今回)
● CSSもHTMLも使わないWebアプリ開発.pdf (前回発表スライド)
● experience (前回発表サンプル Webアプリ ファイル一式フォルダ)
● flexp (Flutter環境構築スクリプト)
● Flutterを体験してみよう.pdf (flexp 使い方ドキュメント)
25

26. 26
ご清聴、
ありがとうございました。
情報修正があれば更新します
最新版スライドは こちらから