Slide 1

Slide 1 text

A Tour of Flutter.io Flutter Meetup Osaka #1 23 June 2018 Ryuji Iwata Okayama, Japan

Slide 2

Slide 2 text

Ryuji Iwata Google+ +RyujiIwata (https://plus.google.com/+RyujiIwata) Twitter @qt_luigi (http://twitter.com/qt_luigi) 2

Slide 3

Slide 3 text

Flutter JP (Google+ Community) plus.google.com/communities/101822628763858843669 (https://plus.google.com/communities/101822628763858843669) 3

Slide 4

Slide 4 text

Flutter Japan User Group (connpass.com) utter-jp.connpass.com/ (https:// utter-jp.connpass.com/) 4

Slide 5

Slide 5 text

本資料について 公式サイト「Flutter.io 」の見出し項目を日本語化(翻訳や意訳)して補足説明を加えた形に なっています。 タイトルの通り、はじめのうちに広大な公式サイト「Flutter.io 」を効率良く巡るための「ガ イドブック」としての役割が果たせたら幸いです。 Happy Fluttering! 5

Slide 6

Slide 6 text

Flutter.io 6

Slide 7

Slide 7 text

特徴 読みやすい 英語だが、文法や単語がシンプル。 同じ言い回しが多いので、読めば読むほどに。 理解しやすい 文章だけでなくコードや図が豊富。 説明していることがわかりやすい。 直しやすい ページの右上に"Edit Source" と"File issue" のリンクが常設。 クリックすると該当のGitHub ページへ遷移。 7

Slide 8

Slide 8 text

トップページ 8

Slide 9

Slide 9 text

ヘッダー 主要コンテンツへのリンク ドキュメント、ショーケース、GitHub 、パッケージ、サポート サイト内の検索欄 Google カスタムサーチを使用。 9

Slide 10

Slide 10 text

ヘッダー(ショーケース) 各企業が作成したFlutter アプリを紹介。 10

Slide 11

Slide 11 text

ヘッドライン トップニュースおよび関連記事へのリンク。 最近はリリース情報の場合が多い。 Jun 20 :Announcing Flutter Release Preview 1 medium.com/ utter-io/ utter-release-preview-1-943a9b6ee65a (https://medium.com/ utter-io/ utter-release-preview-1- 943a9b6ee65a) May 7 :Ready for Production Apps: Flutter Beta 3 developers.googleblog.com/2018/05/ready-for-production-apps- utter-beta-3.html (https://developers.googleblog.com/2018/05/ready-for-production-apps- utter-beta-3.html) Apr 10 :Announcing Flutter beta 2 medium.com/ utter-io/https-medium-com- utter-io-announcing- utters-beta-2- c85ba1557d5e (https://medium.com/ utter-io/https-medium-com- utter-io-announcing- utters-beta-2-c85ba1557d5e) 11

Slide 12

Slide 12 text

フッター(関連リンク) メーリングリスト( utter-dev@ ) twitter (@ utterio ) github (github.com/ utter/ ) 利用規約 プライバシーポリシー 社区中文资源(中国用サイト) 12

Slide 13

Slide 13 text

フッター(ライセンス情報) サイトコンテンツ Creative Commons Attribution 4.0 International License (CC BY 4.0) コードサンプル BSD License 13

Slide 14

Slide 14 text

[ 参考] Flutter 資産のライセンス ロゴ画像、など Creative Commons Attribution-ShareAlike 4.0 International License (CC BY-SA 4.0) github.com/ utter/identity-assets (https://github.com/ utter/identity-assets) 例)ロゴ画像を加工してイベントサイトに使用する、など 14

Slide 15

Slide 15 text

ボディ Flutter の特徴が紹介されている。 美しいネイティブモバイルアプリを構築 高速開発(ホットリロード) 表現力が豊かで美しいUI (マテリアルデザイン) モダンなリアクティブフレームワーク ネイティブの機能とSDK にアクセス可能 統合アプリケーション開発 始めるのは簡単、今日から試そう。 15

Slide 16

Slide 16 text

主要コンテンツ 16

Slide 17

Slide 17 text

ここでの「主要コンテンツ」とは? 公式サイト「Flutter.io 」のトップページ以外に表示される左側の項目一覧です。 17

Slide 18

Slide 18 text

基本的には「上から下へ」 Get started Flutter を始める時に。 Build UIs ユーザーインターフェースを開発する時に。 Use device and SDK APIs パッケージやプラグインを使ったりそれ自身を開発する時に。 Development and tools より効率的に開発を進めて行く時に。 More details Flutter 本体を知りたい時に。 18

Slide 19

Slide 19 text

Get started Flutter を始める時に。 1: Flutter のインストール(Windows, macOS, Linux ) 2: エディターの設定(Android Studio, Visual Studio Code ) 3: 雛形アプリで動作確認 4: 最初のアプリを書いてみる 5: 次に学ぶこと 19

Slide 20

Slide 20 text

Build UIs (1/3) ユーザーインターフェースを開発する時に。 ウィジェット ウィジェットの解説 ウィジェットのカタログ サンプル集 クックブック サンプルアプリのカタログ コードラボ 20

Slide 21

Slide 21 text

Build UIs (2/3) チュートリアル レイアウト構造 インタラクティブ機能 各デベロッパー向け Web Android iOS React Native 21

Slide 22

Slide 22 text

Build UIs (3/3) ジェスチャー アニメーション ボックスの制約 アセット(リソース)と画像 国際化対応(表示言語) アクセサビリティ 22

Slide 23

Slide 23 text

Use device and SDK APIs パッケージやプラグインを使ったりそれ自身を開発する時に。 パッケージの使い方 パッケージやプラグインの開発 各OS 機能にアクセス JSON と永続化(情報やデータの保存) 23

Slide 24

Slide 24 text

Development and tools (1/2) より効率的に開発を進めて行く時に。 IDE の使い方 ホットリロードの使い方 アプリのテスト方法 アプリのデバッグ方法 パフォーマンス測定 ウィジェット構造を観察する方法 24

Slide 25

Slide 25 text

Development and tools (2/2) Android アプリのリリース準備 iOS アプリのリリース準備 Fastlane を使った継続的開発 Flutter 本体のアップグレード コードフォーマット 25

Slide 26

Slide 26 text

More details Flutter 本体を知りたい時に。 よくある質問(FAQ ) Flutter の技術概要 スライド Flutter の概要説明 アーキテクチャー図 YouTube フレームワークの層(レイヤー)の設計 レンダリングの流れ(パイプライン) 26

Slide 27

Slide 27 text

Thank you Ryuji Iwata Okayama, Japan @qt_luigi (http://twitter.com/qt_luigi)