sasaki takeru Blog

2021年もよろしくおねがいします！

Mon, 14 Jun 2021 03:04:00 GMT

どうやるんだっけ？？？？

% gatsby develop
zsh: command not found: gatsby

node消してたような。。。ああ、ndenvにしたんだった。

% ndenv versions
* system (set by /Users/takeru/.ndenv/version)
  v12.20.1


% brew upgrade ndenv
% ndenv install -l
% ndenv install v12.22.1
% ndenv local v12.22.1

% node -v
v12.22.1

% npm install -g gatsby-cli
...
+ gatsby-cli@3.7.1
...

% gatsby develop
 ERROR

...
...
...

https://kikunantoka.com/2021/03/15—migrate-from-gatsby-v2-to-gatsby-v3/

v3になってるらしい。

gatsby v3

たいしてカスタマイズしていなかったはずなのでテンプレから作り直し

% gatsby new my-blog-202106 https://github.com/gatsbyjs/gatsby-starter-blog

コピーしてdiff見てコピペコピペ。。。。

% gatsby develop

よさそう。

git pushしたら本番も更新された。 github action設定されてるんだっけ？よし。

『状態管理』ってなんですか？

Sat, 07 Nov 2020 19:48:00 GMT

謎ワード『状態管理』

Flutterについて調べはじめた初心者が２日目あたりに遭遇する謎ワード『状態管理』。

しかも、ググって出てきた１００いいね超えの良さそうなドヤ記事に書いてある内容も半年ごとぐらいに「もっといいヤツ」が登場してオワコン化しているっぽくて、今から始めたいんですけど、どれですか、、、ね？？状態。。。

で、チュートリアルやりつつ、実際のコード書きつつ、その「ジョウタイカンリ」を調べて、数週間後の今(2020-11-08)の理解のメモ。

問題はなにか？なにがそんなにむずかしいの？？

FlutterはUIをつくるお仕事がメインです。WidgetというUI部品のツリー構造をつくるとiPhoneとAndroidのアプリの画面ができちゃう。それだけ。

UIの裏側で動くロジック(サーバにAPIゲットしたり、画像ダウンロードしたり、AIがディープラーニングしたりするなど)を書くところや、その仕組み、フレームワークはなにも用意されていなくて、好きなようにつくるなり、パクるなりしてやってねということになっている。 Railsおじさんにはどこに何書いていいかぜんぜんわからないようになっている。

flutter createで生成されるアプリの雛形(StatefulWidgetの(Stateの)メンバ変数にintを保持していてボタンを押すと数字が増えるやつ) を元にして、俺が考えた最強のアプリ作っていくとすると、このStateにどんどん変数が増えるのか？APIにgetするのをonTapに・。。ってのはすぐ無理が見えるので、

「FlutterのWidgetを構築するコード」と「ビジネスロジックのコード」をきれいに分けたい、整理したい。

となる。

「データ(=状態)」を「画面に表示」したい

Flutterにおいて「画面に表示」とはWidgetツリーをつくること。

Widgetツリーをつくるコードは、

child,childrenで子を連ねていく
Widgetを返すbuildコールバックメソッド

が主原料になっていて、

なにものかから「build」が呼ばれる
buildの中で最新のデータを使った最新のWidgetを作り直す
なにものかが、画面に最新のデータを表示する

という風なピタゴラ装置になっている。

画面を更新したかったら、buildが呼ばれるように仕向ければいいんだけど、そのへんを手作業でやるのはきっとややこしいので、

「データ(=状態)」が変わったら(buildが自動的に呼ばれて)「画面の表示」も『自動的に変わる仕組み』がほしい。

となる。

— データはいつ変わるのか？ — データはどこにあるのか？ — データを変えるのはだれ？

あたりが、アプリそれぞれで違ってきてややこしいとこなんだけど、このあたりを上手に整理吸収できたらよくない？かっこよくない？？

じゃあ、

データが変わったらWidget(のあたり)に通知するようにしよう
通知を受け取ったらWidgetを再構築して表示を更新することにしよう

というアイデアが、Flutter初心者殺し謎ワード『状態管理』テクノロジーが解決する画期的ソリューションなのです。あ、これ Virtual DOM のときにみたやつっぽい。

いろんな『状態管理』

https://flutter.dev/docs/development/data-and-backend/state-mgmt/options

ここにしっかり全部リストされているけども、結論から逆に歴史をたどって調べたメモ。

BLoC

Widgetとビジネスロジック間はStreamでつなごう
ビジネスロジック側にView側都合なコード入れないでね(そりゃそうだ)
Streamか・・・面倒ぽくないかい？しらないけど。

Scoped Model

ツリーの上の方に「モデル」を置いておいて、
その配下から「モデル」アクセスできるようにしよう
「モデル」のデータが変わったら、使ってるWidget再構築しますね(たぶんここが雑でリビルド多すぎどうのこうの問題なんじゃないか)

Provider

Widget(buildの中やUI操作のコールバックあたり)からビジネスロジック(=のクラスのインスタンス)を見つける仕組み
なんとかNotifier群。変わったらnotifyするわかりやすいのから、Stream、Futureなど変わる系のものならなんでも対応的な？
readとwatch(とchange)を上手に使ってリビルド多すぎ問題に対応可能

Riverpod

Flutter(InheritedWidgetなど)に依存しないように作り直したProvider相当のもの

結論 Riverpod

進化の到達点である、Riverpodで遊んでおこう。だって今からやる人は古いのとの違いがわからないよ。 (半年後はまたその時考える)

でも、まだまだ便利になる余地があるきがします。いろいろな背景知識なしで、もっとゆるふわにアプリが作れるように進化するはず。

Providerってなんですか？

Tue, 27 Oct 2020 06:47:00 GMT

Providerってなんですか？

Providerは色々機能(各種Providerの種類)はありつつも、主に以下の用途で使え、状態管理をこれだけに頼ってアプリを組むことも可能です。

(不変な)インスタンスを受け渡す(DI・サービスロケーター的な用途)

状態の変更を伝える

(https://medium.com/flutter-jp/state-1daa7fd66b94)

InheritedWidget を使いやすくしてミスを防ぐためのシンタックスシュガー DI の仕組みを提供インスタンスの生成と破棄を助ける（StatelessWidget でも dispose() が可能になる等）その他何でも（Scoped Model、BLoC 等による状態管理、ValueNotifier 等による Widget 更新など） (https://qiita.com/kabochapo/items/a90d8438243c27e2f6d9)

https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple https://github.com/flutter/samples/blob/c6f6b5b757/provider_shopper/lib/main.dart

https://github.com/flutter/samples/blob/c6f6b5b757752da94daee570ce28a8724c94b92c/provider_shopper/lib/models/catalog.dart#L14

class CatalogModel {
  static const _itemNames = [
    'Code Smell',
    ...
    ...

CatalogModelはChangeNotifierを実装していない。

https://github.com/flutter/samples/blob/c6f6b5b757752da94daee570ce28a8724c94b92c/provider_shopper/lib/models/cart.dart#L8

class CartModel extends ChangeNotifier { //★★★
  /// The private field backing [catalog].
  CatalogModel _catalog;

  /// Internal, private state of the cart. Stores the ids of each item.
  final List<int> _itemIds = [];

  /// The current catalog. Used to construct items from numeric ids.
  CatalogModel get catalog => _catalog;

  set catalog(CatalogModel newCatalog) {
    assert(newCatalog != null);
    assert(_itemIds.every((id) => newCatalog.getById(id) != null),
        'The catalog $newCatalog does not have one of $_itemIds in it.');
    _catalog = newCatalog;
    // Notify listeners, in case the new catalog provides information
    // different from the previous one. For example, availability of an item
    // might have changed.
    notifyListeners();
  }

  /// List of items in the cart.
  List<Item> get items => _itemIds.map((id) => _catalog.getById(id)).toList();

  /// The current total price of all items.
  int get totalPrice =>
      items.fold(0, (total, current) => total + current.price);

  /// Adds [item] to cart. This is the only way to modify the cart from outside.
  void add(Item item) {
    _itemIds.add(item.id);
    // This line tells [Model] that it should rebuild the widgets that
    // depend on it.
    notifyListeners(); //★★★
  }
}

CartModelはChangeNotifierを実装している。内容が変わったときにnotifyListenersを呼ぶことになっている(おやくそく)。

https://github.com/flutter/samples/blob/c6f6b5b757752da94daee570ce28a8724c94b92c/provider_shopper/lib/main.dart

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Using MultiProvider is convenient when providing multiple objects.
    return MultiProvider(
      providers: [
        // In this sample app, CatalogModel never changes, so a simple Provider
        // is sufficient.
        Provider(create: (context) => CatalogModel()), //★★★
        // CartModel is implemented as a ChangeNotifier, which calls for the use
        // of ChangeNotifierProvider. Moreover, CartModel depends
        // on CatalogModel, so a ProxyProvider is needed.
        ChangeNotifierProxyProvider<CatalogModel, CartModel>( //★★★
          create: (context) => CartModel(),
          update: (context, catalog, cart) {
            cart.catalog = catalog;
            return cart;
          },
        ),
      ],
      child: MaterialApp(
        title: 'Provider Demo',
        theme: appTheme,
        initialRoute: '/',
        routes: {
          '/': (context) => MyLogin(),
          '/catalog': (context) => MyCatalog(),
          '/cart': (context) => MyCart(),
        },
      ),
    );
  }
}

Widgetツリーの一番上あたりでCatalogModelとCartModelのインスタンスを生成している。

CartModelはCatalogModelに依存しているので、上で生成したCatalogModelを取ってきて(内部でProvider.of(context))「cart.catalog = catalog;」として注入ってことだろうたぶん。

Provider.of

Provider.of<ほしいクラス>(context)で、contextを上に登って見つかった『ほしいクラス』のインタンスを取れる。

https://github.com/flutter/samples/blob/c6f6b5b757752da94daee570ce28a8724c94b92c/provider_shopper/lib/screens/cart.dart#L40

class _CartList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var itemNameStyle = Theme.of(context).textTheme.title;
    var cart = Provider.of<CartModel>(context); //★★★

    return ListView.builder(
      itemCount: cart.items.length,
      itemBuilder: (context, index) => ListTile(
        leading: Icon(Icons.done),
        title: Text(
          cart.items[index].name,
          style: itemNameStyle,
        ),
      ),
    );
  }
}

cart.itemsを使ってリスト表示を作っている。

https://github.com/flutter/samples/blob/c6f6b5b757752da94daee570ce28a8724c94b92c/provider_shopper/lib/screens/catalog.dart#L35

class _AddButton extends StatelessWidget {
  final Item item;

  const _AddButton({Key key, @required this.item}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var cart = Provider.of<CartModel>(context); //★★★

    return FlatButton(
      onPressed: cart.items.contains(item) ? null : () => cart.add(item),
      splashColor: Theme.of(context).primaryColor,
      child: cart.items.contains(item)
          ? Icon(Icons.check, semanticLabel: 'ADDED')
          : Text('ADD'),
    );
  }
}

cart.itemsに含まれているか(contains)を見てボタンの切り替えをしている。
cart.addでボタンが押されたときの「カートに追加」の処理を行っている。

https://github.com/flutter/samples/blob/c6f6b5b757752da94daee570ce28a8724c94b92c/provider_shopper/lib/screens/catalog.dart#L70

class _MyListItem extends StatelessWidget {
  final int index;

  _MyListItem(this.index, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var catalog = Provider.of<CatalogModel>(context); //★★★
    var item = catalog.getByPosition(index);
    var textTheme = Theme.of(context).textTheme.title;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: LimitedBox(
        maxHeight: 48,
        child: Row(
          children: [
            AspectRatio(
              aspectRatio: 1,
              child: Container(
                color: item.color,
              ),
            ),
            SizedBox(width: 24),
            Expanded(
              child: Text(item.name, style: textTheme),
            ),
            SizedBox(width: 24),
            _AddButton(item: item),
          ],
        ),
      ),
    );
  }
}

「model=Provider.ofを呼んだbuildが属するWidgetはmodelが更新されたらリビルドされます」むずかしい。。。

具体的には。。。

CartList,AddButtonのbuildの中で『var cart = Provider.of(context);』としている。
- cartの内容を使って画面表示を作っている。(カート内リストの内容や数,ボタンのラベルの切り替えなど)
- このWidget(CartList,AddButton)はcartが更新されたらリビルド(=表示を最新に更新)してほしい。
- → Providerさん「Provider.of(listen=true)したのでデータが更新されたらリビルドしますね！！」
CartModel(extends ChangeNotifier)のaddでnotifyListenersが呼ばれる。
- ChangeNotifierProviderが変更を受け取る。
- → 「データが更新されたそうなのでさっきのProvider.ofしたところのWidget、リビルドします！」
TODO
- Provider.ofしたリビルド対象のWidgetを覚えている仕組みが謎。
- ProviderがWidget更新する仕組みが謎。特にStatelessWidget。

Consumer

class _CartTotal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var hugeStyle = Theme.of(context).textTheme.display4.copyWith(fontSize: 48);

    return SizedBox(
      height: 200,
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Consumer<CartModel>(
                builder: (context, cart, child) =>
                    Text('\$${cart.totalPrice}', style: hugeStyle)),
            SizedBox(width: 24),
            FlatButton(
              onPressed: () {
                Scaffold.of(context).showSnackBar(
                    SnackBar(content: Text('Buying not supported yet.')));
              },
              color: Colors.white,
              child: Text('BUY'),
            ),
          ],
        ),
      ),
    );
  }
}

contextが無い場合にConsumer<ほしいクラス>でProvider.ofのようにインスタンスを取れるWidget。 Builder Widget使うかWidgetを切り出すかすれば同じこと、かな？複数取りたいときはどうするのかな？

と思ってたら、

childを使うとリビルドを最適化できる
Consumer2() から Consumer6()まである
Consumer をより便利にした Selector がある (https://qiita.com/kabochapo/items/a90d8438243c27e2f6d9)

read,watchという新しいのがある

context.read() ≒ Provider.of(context, listen: false)
context.watch() ≒ Provider.of(context, listen: true)

context.select()

final value = context.select((Foo foo) => foo.value);
Text(value.toString());

大きなクラスのある一部だけの変化だけを検知→リビルドできる。これは良さそう。 ChangeNotifierProviderに大きなモデルを乗っけてselectで指定したところが変わったときだけrebuildされる。「モデルの『どこ』が変わったら〜」の『どこ』をWidget側に寄せることができる。

まとめ

いろんななんとかProviderがあるけど、データソースによっていろいろ使えるよってことみたい。基本はChangeNotifierってことでいいのかな。

Widgetと変更検知範囲の粒度をうまくやって、コードの可読性と変更検知＆リビルドのパフォーマンスのバランスを取るってことかな。はじめは荒く、問題になったら最適化、で。

ブログ更新!!

Mon, 26 Oct 2020 06:54:00 GMT

さっき書いたmdをaddしてpushしてみますが、、、、

15:52:30 tkrimac3:~/proj/flutter-firebase-gatsby-takeru/my-blog[main]% ga content/blog/2020-10-26/
15:52:34 tkrimac3:~/proj/flutter-firebase-gatsby-takeru/my-blog![main]% gs
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        new file:   content/blog/2020-10-26/2020-10-26-1427.md
        new file:   content/blog/2020-10-26/2020-10-26-1526.md

15:52:34 tkrimac3:~/proj/flutter-firebase-gatsby-takeru/my-blog![main]% gc -m "add posts"
[main 2b6ec4d] add posts
 2 files changed, 191 insertions(+)
 create mode 100644 content/blog/2020-10-26/2020-10-26-1427.md
 create mode 100644 content/blog/2020-10-26/2020-10-26-1526.md
15:52:58 tkrimac3:~/proj/flutter-firebase-gatsby-takeru/my-blog[main]% git push
Enumerating objects: 10, done.
Counting objects: 100% (10/10), done.
Delta compression using up to 4 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 3.49 KiB | 3.49 MiB/s, done.
Total 7 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To github.com:takeru/my-blog-20201026.git
   210ed14..2b6ec4d  main -> main

これでいいんでしょうか。。。 https://nervous-bartik-3220fe.netlify.app/2020-10-26/2020-10-26-1526/

いいみたいです、スゴーイ。

テンプレ変えよう

「Written by Kyle Mathews」になってるので変えたい。

もしかして？と思ってlocalhost:8000を開いたページを横において、設定ファイルを編集して保存したら、やっぱりリアルタイムに更新されました。こんなのが2020年当たり前だよねってなるといろいろしんどい。

こうなると、保存しなくてもVSCodeで編集中のテキストがグレーの文字でリアルタイムに更新されてほしいんだけど。。。

と思ったら、Kyle Mathewsにもどった？？設定ファイル上書きしたらまたtakeruになった。またもどった！ふしぎ！なにが起こってる！？

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `sasaki takeru Blog`,
    author: {
      name: `takeru`,
      xxx_summary: ``,
    },
    description: `FlutterとFirebaseとGatsbyとM5StickCと3Dプリンタとシャボン玉と犬ロボットについて書くよてい(2020-10)`,
    siteUrl: `https://nervous-bartik-3220fe.netlify.app/`,
    social: {
      twitter: `urekat`,
    },
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
...

こんなんなってて、blogのmdファイルの読み込みは「gatsby-source-filesystem」というpluginが「blog」という名前で登録されているみたい。ということは、

なるほど、ローカルファイルもいったんGraphQLを通してやってくるのか。

とりあえず、テキトーにmdで書いておいて、あとで好きなガワに変えることもできることがわかったのでコツコツコンテンツを作っていこう！！

gatsby-starter-blogでそれいけ

Mon, 26 Oct 2020 06:26:00 GMT

とにかくblogをつくりたい

https://www.gatsbyjs.com/tutorial/ https://www.gatsbyjs.com/docs/quick-start/

https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog/ https://github.com/gatsbyjs/gatsby-starter-blog

インストール

ねんのため、nodeを最新にしておいて、、

brew upgrade node

14:59:41 tkrimac3:~/proj/flutter-firebase-gatsby-takeru[master]% node -v
v15.0.1
14:59:43 tkrimac3:~/proj/flutter-firebase-gatsby-takeru[master]% npm -v
7.0.3

15:00:30 tkrimac3:~/proj/flutter-firebase-gatsby-takeru[master]% npm install -g gatsby-cli
npm ERR! Cannot read property 'matches' of undefined

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/takeru/.npm/_logs/2020-10-26T06_00_41_739Z-debug.log

は？いきなりなんだよ。

https://nodejs.org/ja/download/ おすすめは12か・・・

15:11:49 tkrimac3:~/proj/flutter-firebase-gatsby-takeru[master]% brew uninstall node
Uninstalling /usr/local/Cellar/node/15.0.1... (3,331 files, 61.2MB)

15:16:35 tkrimac3:~/proj/flutter-firebase-gatsby-takeru[master]% node -v
v12.19.0
15:16:43 tkrimac3:~/proj/flutter-firebase-gatsby-takeru[master]% npm -v
6.14.8

15:16:49 tkrimac3:~/proj/flutter-firebase-gatsby-takeru[master]% npm install -g gatsby-cli
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
/usr/local/bin/gatsby -> /usr/local/lib/node_modules/gatsby-cli/cli.js

> core-js@2.6.11 postinstall /usr/local/lib/node_modules/gatsby-cli/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> gatsby-telemetry@1.3.38 postinstall /usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-telemetry
> node src/postinstall.js || true


> gatsby-cli@2.12.111 postinstall /usr/local/lib/node_modules/gatsby-cli
> node scripts/postinstall.js

╔════════════════════════════════════════════════════════════════════════╗
║                                                                        ║
║   Gatsby collects anonymous usage analytics                            ║
║   to help improve Gatsby for all users.                                ║
║                                                                        ║
║   If you'd like to opt-out, you can use `gatsby telemetry --disable`   ║
║   To learn more, checkout https://gatsby.dev/telemetry                 ║
║                                                                        ║
╚════════════════════════════════════════════════════════════════════════╝
Success!

Welcome to the Gatsby CLI! Please visit https://www.gatsbyjs.org/docs/gatsby-cli/ for more information.

npm WARN gatsby-interface@0.0.193 requires a peer of gatsby@^2.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN gatsby-interface@0.0.193 requires a peer of react-dom@^16.8.1 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN theme-ui@0.2.52 requires a peer of @mdx-js/react@^1.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/popover@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/alert@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/tooltip@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/dialog@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/menu-button@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/tabs@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/combobox@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/utils@0.10.5 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/visually-hidden@0.10.4 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/portal@0.10.5 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/auto-id@0.10.5 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/descendants@0.10.5 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/rect@0.10.5 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.

+ gatsby-cli@2.12.111
added 862 packages from 625 contributors in 45.899s


   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New minor version of npm available! 6.13.7 → 6.14.4       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.14.4   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

15:18:36 tkrimac3:~/proj/flutter-firebase-gatsby-takeru[master]%

いきなりいろいろ言われてもわかんないですよ。 WARNたくさんあるけどなんだ？

blogをつくる

https://qiita.com/k-penguin-sato/items/7554e5e7e90aa10ae225 ちょうどいこれを見ながら・・・

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blo
cd my-blog/
gatsby develop

で、http://localhost:8000/ でた〰！

デプロイ

netlifyにデプロイもできた。

https://nervous-bartik-3220fe.netlify.app/

へぇ、人類の進化はすごいな。

Gatsbyでblogをつくる

Mon, 26 Oct 2020 05:27:00 GMT

Gatsbyにした経緯

Flutterのサイトを作りたいなぁ。 https://www.google.com/search?q=markdown+blog+system

https://hexo.io/ これが見つかって、こないだ見た https://itome.team/blog/2019/08/my-first-post/ このサイトに…「HUGO」だったちがうな。

静的サイトジェネレーターっていうのか。 https://www.google.com/search?q=%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC

https://dyno.design/articles/what-is-static-site-generator/

Reactとかそんな仰々しいのいるのか？

https://qiita.com/uehaj/items/1b7f0a86596353587466

https://qiita.com/hppRC/items/00739eaf9ae7fc95c1ca

…

Gatsby

とりあえずmdで書いておいてあとで作ったサイトのblogにしよう。という作戦なのでいま(2020-10-26 14:31)時点ではVSCodeでテキストファイルを書いているだけです。

いろいろすごいしくみ(GraphQL)ですごいのも作れますって感じですので将来性も◎

でも元々の目的はFlutterのサイトを作りたいってことなのでHelloWorldみたいなチュートリアルとかやらずに(必要ならあとでやる)最速でサイト立ち上げたいです。

『というか長々とかきましたがお気に入りのstarterから初めて少し変更するぐらいが一番コスパが良いと思います。』 https://qiita.com/abouch/items/ab7694e64f011ee2b265

No title

Wed, 30 Sep 2020 15:00:00 GMT

AppStoreに出すまでのあれこれ。

Login with Apple

User Generated Content

リソース

スプラッシュ画像
- https://flutter.dev/docs/development/ui/advanced/splash-screen
アイコン

利用規約、プライバシーポリシー、ライセンス表示

リリース

ストア用画像
ストア用文章

No title

Wed, 30 Sep 2020 15:00:00 GMT

https://flutter.dev/docs/development/tools/devtools/overview

VSCodeから起動

コマンドパレットに”devtool”といれる。

No title

Wed, 30 Sep 2020 15:00:00 GMT

https://firebase.flutter.dev/docs/overview

Firebaseプロジェクトを作成
GoogleAnalyticsどうするか聞かれたら、Yes、Yes、デフォルトなかんじで。

iOS

xcodeを開く。open ios/Runner.xcworkspace
iOSバンドルID 「com.example.testAppTakeru001」ダウンロードした GoogleService-Info.plist は FinderからXCodeにドラッグ＆ドロップする。

ios/Podfile

target 'Runner' do
pod 'FirebaseFirestore', :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git', :tag => '6.26.0'
use_frameworks!
use_modular_headers!

flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

dependencies:
  firebase_core: "0.5.0+1"
  firebase_analytics: "^6.0.2"
  firebase_auth: "^0.18.1+2"
  google_sign_in: "^4.5.1"
  cloud_firestore: "^0.14.1+3"

.dart

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}


import 'package:firebase_core/firebase_core.dart';

No title

Wed, 30 Sep 2020 15:00:00 GMT

調べたことのまとめ。

インストール
Hello Flutter
状態管理 - 基本 / setState…
状態管理 - Provider
状態管理 - Riverpod
シミュレータ iPhone
シミュレータ Android
デバイス iPhone
デバイス iPad
デバイス Android
デバイス Amazon Fire
Flutter Web
Firebase Auth
Firebase Auth (Google Login)
Firebase Auth (Apple)
Firebase Auth (匿名)
Firestore セキュリティルール
Firestore ドキュメント設計
Firebase Storage - アップロード
カメラ iOS,Android
写真を開く iOS,Android
タブレット iPad,Fire10
レスポンシブ
テーマ

No title

Wed, 30 Sep 2020 15:00:00 GMT

便利ライブラリ

https://medium.com/flutter-jp/tips-b2487a63a8

quiver tuple rxdart intl

No title

Wed, 30 Sep 2020 15:00:00 GMT

https://qiita.com/k3ntar0/items/f14b0b03fbc13d0ed925 (https://medium.com/flutter-jp/state-1daa7fd66b94)

https://github.com/mono0926/wdb106-flutter/blob/main/lib/model/entities/cart_item/cart_item.dart https://github.com/mono0926/wdb106-flutter/blob/main/lib/model/entities/cart_item/cart_item.freezed.dart

json

jsonの機能を使うには、jsonのライブラリをいれないとダメ！

No title

Wed, 30 Sep 2020 15:00:00 GMT

GooglePlayに出すまでのあれこれ。

No title

Wed, 30 Sep 2020 15:00:00 GMT

Hot reload / Hot restart / Full restart

https://flutter.dev/docs/development/tools/vs-code#hot-reload-vs-hot-restart https://flutter.dev/docs/development/tools/hot-reload

No title

Wed, 30 Sep 2020 15:00:00 GMT

Flutterをやってみよう！と思って調べていくと、

公式読め
英語読め
リンク先でさらにこれ読めっていわれてどんどん増える
多すぎる。いつおわるんだ。
これ古いんじゃないか？
ねむくなる。ねむい。
どこまで行ったらコード書き始めていいんだ。

こんな感じなのでおすすめの勉強コンテンツリンク集を作りました。

(以下作成中)

環境構築

最低限(iPhoneシミュレータで実行できるところまで)のセットアップをする。

Mac
VSCode
iPhoneシミュレータだけ入れる。(Androidと実機はやりたくなったときにあとでやる)
Run
- flutter create my_app
- cd my_app
- flutter run
iPhoneシミュレータで実行する / 再起動する
コードを書き換えるとHotReloadされる

(実技) チュートリアル(Write your first Flutter app)

写経して体験

(実技) Widgetを組み合わせて画面を作る

Widgetツリーを作れば画面ができる

Building layouts https://flutter.dev/docs/development/ui/layout/tutorial

(理論) WidgetとWidgetツリー

Layouts in Flutter https://flutter.dev/docs/development/ui/layout いろいろなWidgetがあることを知る
Introduction to widgets https://flutter.dev/docs/development/ui/widgets-intro StatefulWidgetとStateが出てくる
さらに詳しく
- Flutterのサンプルアプリが画面に描画されるまで https://itome.team/blog/2019/12/flutter-advent-calendar-day5/

(実技) setState

https://flutter.dev/docs/development/ui/interactive

(理論)

Widgetのライフサイクル
- StatelessWidget
- StatefulWidget
- (https://medium.com/flutter-jp/dive-into-flutter-4add38741d07)
setStateから画面が更新されるまで
Flutter の Widget ツリーの裏側で起こっていること
- https://medium.com/flutter-jp/dive-into-flutter-4add38741d07
状態には2種類ある
- https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app
- Differentiate between ephemeral state and app state

(実技) Provider

https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

Consumer
Provider.of

(理論) WidgetツリーとInheritedWidgetとProvider

FlutterのBuildContextとInheritedWidgetを理解する https://itome.team/blog/2019/12/flutter-advent-calendar-day6/
Providerの役割
- (setStateしてくれる??)
- DI
- (InheritedWidget を完全に理解する https://medium.com/flutter-jp/inherited-widget-37495200d965)
  
  (実技) 環境設定
linter
VSCodeでの便利機能

No title

Wed, 30 Sep 2020 15:00:00 GMT

Stateful Widget のパフォーマンスを考慮した正しい扱い方 https://medium.com/flutter-jp/state-performance-7a5f67d62edd

Flutter の Widget ツリーの裏側で起こっていること https://medium.com/flutter-jp/dive-into-flutter-4add38741d07

パフォーマンスをどの程度意識するべきか
まず、優先度観点としては、個人的には以下程度で良いと思います。
(項目や順番は厳密なものではなく、パフォーマンスが一番下ということが主旨です。)
1. 可読性
2. メンテナンス性
3. 実装の手間
4. パフォーマンス

とのことなのでパフォーマンスで困ったらまたここに戻ってこよう。

DevTool

Flutterでの開発をスムーズに行うためのTips集 https://medium.com/flutter-jp/tips-b2487a63a8

Flutter Performanceでリビルド回数がおかしくないか確認する。

No title

Wed, 30 Sep 2020 15:00:00 GMT

識者の見解2020-10

Flutterの状態管理手法の選定 2020年8月版 https://medium.com/flutter-jp/state-1daa7fd66b94

Riverpod (新Provider) StateNotifier (Better ValueNotifier) freezed (immutableなクラスの扱いなどを楽にするコード生成器)

ProviderとRiverpod、どちらがお勧め？まず、純粋に機能的にProviderがRiverpodより優れている点は思い浮かびません。そのため、個人的には今後Providerをあえて選ぶことはないと思いますが、

StateNotifierを使ったFlutterのアプリ設計 https://itome.team/blog/2020/05/flutter-state-notifier-provider/

Collection if/forや拡張メソッドを使うためにDart2.7~を有効にしておく

状態管理にはStateNotifierを使う

LocatorMixinを使った依存性の注入

Modelクラスの定義にはfreezedを使う

StateNotifierとfreezedが共通、Riverpodでやってみよう。半年後どうなってるかわかりませんが。。。

https://github.com/rrousselGit/river_pod

https://riverpod.dev/

No title

Wed, 30 Sep 2020 15:00:00 GMT

Linterはコーディングルールをチェックしてくれる仕組みです。

https://dart.dev/guides/language/analysis-options

セットアップ

まずは、 https://medium.com/flutter-jp/analysis-b8dbb19d3978 の通りに入れました。

# pubspec.yamlにpedantic_monoを追加
dev_dependencies:
  flutter_test:
    sdk: flutter
  pedantic_mono: any

# analysis_options.yaml をつくる
wget https://raw.githubusercontent.com/mono0926/pedantic_mono/master/example/analysis_options.yaml

一部のルール除外するには

# https://pub.dev/packages/pedantic_mono
include: package:pedantic_mono/analysis_options.yaml
linter:
    rules:
        omit_local_variable_types: false
        lines_longer_than_80_chars: false

dartfixで自動修正

途中からセットアップするとおそらく指摘が多すぎて手動でなおしてられません。 dartfixを使うと自動で修正できました。

https://pub.dev/packages/dartfix

pub global activate dartfix
export PATH="$PATH":"$HOME/.pub-cache/bin"

dartfix --pedantic lib
dartfix --pedantic lib --overwrite

dartfix --fix=prefer_const_constructors,prefer_final_locals lib
dartfix --fix=prefer_const_constructors,prefer_final_locals lib --overwrite

No title

Wed, 30 Sep 2020 15:00:00 GMT

https://flutter.dev/docs/cookbook 全部見る Imagesまで見た

Flutterの効率良い学び方 https://medium.com/flutter-jp/flutter-learning-c5640c5f05b9

Flutterでの開発をスムーズに行うためのTips集 https://medium.com/flutter-jp/tips-b2487a63a8

【神パッケージ】 Riverpod の使い方【Flutter】 https://note.com/mxiskw/n/n5c06bc2dd0d5

https://itome.team/blog/

Flutter Layout Cheat Sheet https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

No title

Wed, 30 Sep 2020 15:00:00 GMT

おかしくなったらやってみること

flutter clean
rm ios/Podfile.lock
XCodeをすべて閉じる
VSCodeをすべて閉じて開き直す
OS再起動
アップデート(XCode,VSCode,Dart/Flutterプラグイン,利用中のライブラリ)

No title

Wed, 30 Sep 2020 15:00:00 GMT

VSCodeのプラグイン

https://flutter.dev/docs/get-started/editor?tab=vscode

Flutter/Dart Pluginを入れる
Flutter Doctorで確認

VSCodeの使い方

https://flutter.dev/docs/development/tools/vs-code

プロジェクト作成
プロジェクトを開く
QuickFix

No title

Wed, 30 Sep 2020 15:00:00 GMT

難易度、使用頻度で整理したらどうだろう？

https://flutter.dev/docs/reference/widgets https://flutter.dev/docs/development/ui/widgets

初級 : Widgetを組み合わせて画面を作れるようになる

Widgetの階層構造を作れれば、Flutterでモック画面が作れる。

中級 : ちょっとだけむずかしいWidget

上級 : 無くてもアプリは作れるけど知ってると便利なWidget

No title

Wed, 30 Sep 2020 15:00:00 GMT

日付選択フォームが欲しくて、探していたら、

https://pub.dev/packages/flutter_form_builder

その他いろいろ入っている物を見つけましたが、日付選択フォームだけが欲しかったのでflutterformbuilderの依存先パッケージの

https://pub.dev/packages/datetime_picker_formfield

これを使ってみることにしました。

日本語にする

あとでかく。

New Beginnings

Thu, 28 May 2015 22:40:32 GMT

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

On deer horse aboard tritely yikes and much

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.

This however showed weasel
Well uncritical so misled
- this is very interesting
Goodness much until that fluid owl

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rhetoric question ran over her cheek, then she continued her way. On her way she met a copy.

Overlaid the jeepers uselessly much excluding

But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

According a funnily until pre-set or arrogant well cheerful

So baboon this
Mounted militant weasel gregariously admonishingly straightly hey
Dear foresaw hungry and much some overhung
Rash opossum less because less some amid besides yikes jeepers frenetic impassive fruitlessly shut

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rhetoric question ran over her cheek, then she continued her way. On her way she met a copy.

The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word “and” and the Little Blind Text should turn around and return to its own, safe country.

Silent delightfully including because before one up barring chameleon

Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.

Wherever far wow thus a squirrel raccoon jeez jaguar this from along

She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rhetoric question ran over her cheek, then she continued her way. On her way she met a copy.

Slapped cozy a that lightheartedly and far

The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word “and” and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.

My Second Post!

Wed, 06 May 2015 23:46:37 GMT

Wow! I love blogging so much already.

Did you know that “despite its name, salted duck eggs can also be made from chicken eggs, though the taste and texture will be somewhat different, and the egg yolk will be less rich.”? (Wikipedia Link)

Yeah, I didn’t either.

Hello World

Fri, 01 May 2015 22:12:03 GMT

This is my first post on my new fake blog! How exciting!

I’m sure I’ll write a lot more interesting things in the future.

Oh, and here’s a great quote from this Wikipedia on salted duck eggs.

A salted duck egg is a Chinese preserved food product made by soaking duck eggs in brine, or packing each egg in damp, salted charcoal. In Asian supermarkets, these eggs are sometimes sold covered in a thick layer of salted charcoal paste. The eggs may also be sold with the salted paste removed, wrapped in plastic, and vacuum packed. From the salt curing process, the salted duck eggs have a briny aroma, a gelatin-like egg white and a firm-textured, round yolk that is bright orange-red in color.

You can also write code blocks here!

const saltyDuckEgg = "chinese preserved food product"

Number	Title	Year
1	Harry Potter and the Philosopher’s Stone	2001
2	Harry Potter and the Chamber of Secrets	2002
3	Harry Potter and the Prisoner of Azkaban	2004

View raw (TEST.md)

This is a paragraph.

This is a paragraph.

Header 1

Header 2

Header 1
========

Header 2
--------

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

# Header 1 #
## Header 2 ##
### Header 3 ###
#### Header 4 ####
##### Header 5 #####
###### Header 6 ######

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

This is a header.

This is the first list item.

This is the second list item.

Here’s some example code:
Markdown.generate();

> ## This is a header.
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
>     Markdown.generate();

Red
Green
Blue
Red
Green
Blue
Red
Green
Blue

- Red
- Green
- Blue

* Red
* Green
* Blue

- Red
- Green
- Blue

code goes here in this line
bold goes here

- `code goes` here in this line
- **bold** goes here

Buy flour and salt
Mix together with water
Bake

1. Buy flour and salt
1. Mix together with water
1. Bake

code goes here in this line
bold goes here

1. `code goes` here in this line
1. **bold** goes here

Paragraph:

Code

Paragraph:

    Code

* * *

***

*****

- - -

---------------------------------------

This is an example link.

This link has no title attr.

This is an example reference-style link.

This is [an example](http://example.com "Example") link.

[This link](http://example.com) has no title attr.

This is [an example] [id] reference-style link.

[id]: http://example.com "Optional Title"

single asterisks

single underscores

double asterisks

double underscores

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

This paragraph has some code in it.

This paragraph has some `code` in it.

![Alt Text](https://placehold.it/200x50 "Image Title")

sasaki takeru Blog

2021年もよろしくおねがいします！

どうやるんだっけ？？？？

gatsby v3

『状態管理』ってなんですか？

謎ワード『状態管理』

問題はなにか？ なにがそんなにむずかしいの？？

「データ(=状態)」を「画面に表示」したい

いろんな『状態管理』

BLoC

Scoped Model

Provider

Riverpod

結論 Riverpod

Providerってなんですか？

Providerってなんですか？

Provider.of

Consumer

read,watchという新しいのがある

まとめ

ブログ更新!!

テンプレ変えよう

gatsby-config.js

gatsby-starter-blogでそれいけ

とにかくblogをつくりたい

インストール

blogをつくる

デプロイ

Gatsbyでblogをつくる

Gatsbyにした経緯

No title

Login with Apple

User Generated Content

リソース

利用規約、プライバシーポリシー、ライセンス表示

リリース

No title

VSCodeから起動

No title

iOS

.dart

No title

No title

No title

json

No title

No title

Hot reload / Hot restart / Full restart

No title

環境構築

(実技) チュートリアル(Write your first Flutter app)

(実技) Widgetを組み合わせて画面を作る

(理論) WidgetとWidgetツリー

(実技) setState

(理論)

(実技) Provider

(理論) WidgetツリーとInheritedWidgetとProvider

(実技) 環境設定

No title

DevTool

No title

識者の見解2020-10

https://github.com/rrousselGit/river_pod

https://riverpod.dev/

No title

セットアップ

一部のルール除外するには

dartfixで自動修正

No title

No title

おかしくなったらやってみること

No title

VSCodeのプラグイン

VSCodeの使い方

No title

初級 : Widgetを組み合わせて画面を作れるようになる

中級 : ちょっとだけむずかしいWidget

上級 : 無くてもアプリは作れるけど知ってると便利なWidget

No title

日本語にする

問題はなにか？なにがそんなにむずかしいの？？