<p>ジャイロセンサーを用いて3D効果を実装しました．<br><br><img src="https://images.microcms-assets.io/assets/f5e6ab40ae474bf7a9f69442a8f9b4a4/79b22c9646c94a978c9217bb75170d3e/result.gif" alt=""><br><br>こちらのリポジトリで公開しています．<br><a href="https://github.com/kawa1214/flutter-3d-animation-gyrosensor" target="_blank" rel="noopener noreferrer">https://github.com/kawa1214/flutter-3d-animation-gyrosensor</a><br></p><h2 id="hd024f2be26">どのような実装をしたか</h2><p>今回は，画面をforeground，middle，backgroundの３つのレイヤーに分けて，ジャイロセンサーに応じて移動させることで表現しました．<br></p><ul><li>全面のレイヤーはキャラクターとエフェクトの要素です．</li><li>中間のレイヤーは文字です．</li><li>背面のレイヤーはバックグラウンド画像としました．</li></ul><p><br>中間のレイヤーは固定し，全面のレイヤーはジャイロセンサーの値を元に移動しています．<br>背面のレイヤーは全面のレイヤーとは逆方向に移動しています．<br></p><h2 id="haecf929fc9">ジャイロセンサーをFlutterで扱う</h2><h3 id="h6ed9e38521">パッケージ</h3><p>sensors_plusというパッケージを用いて，ネイティブからジャイロセンサーの値を取得することができます．</p><pre><code>dependencies:
  flutter:
    sdk: flutter
  sensors_plus:
    git:
      url: git://github.com/kawa1214/plus_plugins.git
      path: packages/sensors_plus/sensors_plus
      ref: f6f69986e80573f96d7d536e09585f3e842ee270</code></pre><p><br>しかしながら，sensors_plusのジャイロスコープの値を取得する間隔が，Androidでは0.2秒と遅く，iOSではデバイスによって異なるため扱いづらいです．<br><br>今回は，どちらのデバイスでも0.02秒ごとに取得するようにForkしてコミットを積みました．<br><a href="https://github.com/kawa1214/plus_plugins/commit/c1e045cf8197ea4f282a3a6069af76c9a7c63a9d" target="_blank" rel="noopener noreferrer">iOS commit</a><br><a href="https://github.com/kawa1214/plus_plugins/commit/f6f69986e80573f96d7d536e09585f3e842ee270" target="_blank" rel="noopener noreferrer">Android commit</a></p><h2 id="h5b1541719e">Flutterからジャイロセンサーの値を取得する</h2><p>こちらのコードでgyroscopeのイベントをstreamすることができます．</p><pre><code>import 'package:sensors_plus/sensors_plus.dart' as sensors;
sensors.gyroscopeEvents.listen(data) =&gt; print(data))</code></pre><p><br>取得できるデータはx,y,zの3つの値をもっており，それぞれは以下の画像に対応します<br><img src="https://images.microcms-assets.io/assets/f5e6ab40ae474bf7a9f69442a8f9b4a4/9391ad2bd76542609d448af08962fb3a/c9b606b2-9a52-487e-8385-e710ffa1ce5f.png" alt=""><br>(developers.apple.comより引用)<br><br>取得したジャイロセンサーの値から，現在の位置を更新することで３D視覚的効果を与えます．<br></p><h2 id="ha51a6d9a85">ジャイロセンサーの値を用いて3D効果を与える</h2><p>位置を更新するコードは，最終的に以下のようになります．</p><pre><code>static const _interval = 0.02;
static const _backgroundScale = 1.2;
static const _backgroundMoveOffsetScale = 0.6;
static const _maxAngle = 120;
static const _maxForegroundMove = Offset(50, 50);
static const _inititalForegroundOffset = Offset(400, 30);
static const _inititalBackgroundOffset = Offset(0, 0);

Offset _foregroundOffset = _inititalForegroundOffset;
Offset _backgroundOffset = _inititalBackgroundOffset;
late StreamSubscription&lt;sensors.GyroscopeEvent&gt; _streamGyrpscopeEvent;

@override
void initState() {
  _streamGyrpscopeEvent =
      sensors.gyroscopeEvents.listen((_listenGyroscopeEvent));
  super.initState();
}

void _listenGyroscopeEvent(sensors.GyroscopeEvent event) {
  final angle = Offset(
    event.x * _interval * 180 / pi,
    event.y * _interval * 180 / pi,
  );

  if (angle.dx &gt;= _maxAngle || angle.dy &gt;= _maxAngle) {
    return;
  }

  final addForegroundOffset = Offset(
    angle.dx / _maxAngle * _maxForegroundMove.dx,
    angle.dy / _maxAngle * _maxForegroundMove.dy,
  );

  final newForegroundOffse = _foregroundOffset + addForegroundOffset;

  if (newForegroundOffse.dx &gt;=
          _inititalForegroundOffset.dx + _maxForegroundMove.dx ||
      newForegroundOffse.dx &lt;=
          _inititalForegroundOffset.dx - _maxForegroundMove.dx ||
      newForegroundOffse.dy &gt;=
          _inititalForegroundOffset.dy + _maxForegroundMove.dy ||
      newForegroundOffse.dy &lt;=
          _inititalForegroundOffset.dy - _maxForegroundMove.dy) {
    return;
  }

  setState(() {
    _foregroundOffset = _foregroundOffset + addForegroundOffset;
    _backgroundOffset =
        _backgroundOffset - addForegroundOffset * _backgroundMoveOffsetScale;
  });
}</code></pre><p><br>こちらのコードを一つずつ見ていきます．<br></p><h3 id="hb815725c9f">定数について</h3><pre><code>static const _interval = 0.02;
static const _backgroundScale = 1.2;
static const _backgroundMoveOffsetScale = 0.6;
static const _maxAngle = 120;
static const _maxForegroundMove = Offset(50, 50);
static const _inititalForegroundOffset = Offset(400, 30);
static const _inititalBackgroundOffset = Offset(0, 0);</code></pre><ul><li><code>_interval</code> はセンサーから値を取得する間隔です．</li><li><code>_backgroundScale</code> は背景画像の拡大の倍率です．（foregroud layerが左右に動くと，背景も左右に移動するため，ある程度拡大をしておく必要があります）</li><li><code>_backgroundMoveOffsetScale</code> はforegroud layerの動きに合わせてbackgroud layerをどれくらい動かすかの値です．</li><li><code>_maxForegroundMove</code> はforegroud layerを上下左右にどれくらい動かせるかの値です．</li><li><em><code>inititalForegroundOffset と </code></em><code>inititalBackgroundOffset</code>  はforegroud layerとbackgroud layerの初期位置です．</li></ul><p><br></p><pre><code>Offset _foregroundOffset = _inititalForegroundOffset;
Offset _backgroundOffset = _inititalBackgroundOffset;
late StreamSubscription&lt;sensors.GyroscopeEvent&gt; _streamGyrpscopeEvent;</code></pre><p><code>foregroundOffset と backgroundOffset</code> は現在のlayerの位置です．<br>また，initStateで呼ぶgyroscopeのイベントを購読する <code>_streamGyrpscopeEvent</code> も定義します．<br></p><h3 id="h4e3c7f8902">initStateについて</h3><pre><code>@override
void initState() {
  _streamGyrpscopeEvent =
      sensors.gyroscopeEvents.listen((_listenGyroscopeEvent));
  super.initState();
}</code></pre><p>initStateでは，gyroscopeEventsのイベントをlistenし，listenした際は<code>_listenGyroscopeEvent</code> を呼ぶようにしています．<br></p><h3 id="he4b28eec24">_listenGyroscopeEventについて</h3><pre><code>void _listenGyroscopeEvent(sensors.GyroscopeEvent event) {
  final angle = Offset(
    event.x * _interval * 180 / pi,
    event.y * _interval * 180 / pi,
  );

  if (angle.dx &gt;= _maxAngle || angle.dy &gt;= _maxAngle) {
    return;
  }

  final addForegroundOffset = Offset(
    angle.dx / _maxAngle * _maxForegroundMove.dx,
    angle.dy / _maxAngle * _maxForegroundMove.dy,
  );

  final newForegroundOffse = _foregroundOffset + addForegroundOffset;

  if (newForegroundOffse.dx &gt;=
          _inititalForegroundOffset.dx + _maxForegroundMove.dx ||
      newForegroundOffse.dx &lt;=
          _inititalForegroundOffset.dx - _maxForegroundMove.dx ||
      newForegroundOffse.dy &gt;=
          _inititalForegroundOffset.dy + _maxForegroundMove.dy ||
      newForegroundOffse.dy &lt;=
          _inititalForegroundOffset.dy - _maxForegroundMove.dy) {
    return;
  }

  setState(() {
    _foregroundOffset = _foregroundOffset + addForegroundOffset;
    _backgroundOffset =
        _backgroundOffset - addForegroundOffset * _backgroundMoveOffsetScale;
  });
}</code></pre><p>若干長めに見えますが，多くの処理はしていません．<br><br>GyroscopeEventは回転速度(rad/s)で提供されるため，回転速度 ＊ S<em> </em>＊<em> </em>180/pi で度数法に変換しています．</p><pre><code>final angle = Offset(
  event.x * _interval * 180 / pi,
  event.y * _interval * 180 / pi,
);</code></pre><p><br><em>maxAngleで</em>maxForegroundMove分移動するということを表しています．<br>今回の場合では，x軸に120度の回転を加えると，その軸の方向に対して50動くことになります</p><pre><code>final addForegroundOffset = Offset(
    angle.dx / _maxAngle * _maxForegroundMove.dx,
    angle.dy / _maxAngle * _maxForegroundMove.dy,
  );</code></pre><p><br>動かしたあとの値が動かせる範囲の最大値である<code>_maxForegroundMove</code> を超えていないか確認をします</p><pre><code>final newForegroundOffse = _foregroundOffset + addForegroundOffset;

if (newForegroundOffse.dx &gt;=
        _inititalForegroundOffset.dx + _maxForegroundMove.dx ||
    newForegroundOffse.dx &lt;=
        _inititalForegroundOffset.dx - _maxForegroundMove.dx ||
    newForegroundOffse.dy &gt;=
        _inititalForegroundOffset.dy + _maxForegroundMove.dy ||
    newForegroundOffse.dy &lt;=
        _inititalForegroundOffset.dy - _maxForegroundMove.dy) {
  return;
}</code></pre><p><br>問題がない場合は，foregroudOffset，backgroudOffsetを更新します．<br>backgroudOffsetは，foregroudOffsetとは逆方向に_backgroudMoveOffsetScaleの倍率で移動します．</p><pre><code>setState(() {
    _foregroundOffset = _foregroundOffset + addForegroundOffset;
    _backgroundOffset =
        _backgroundOffset - addForegroundOffset * _backgroundMoveOffsetScale;
  });</code></pre><p><br></p><h3 id="h00ab1925fe">ジャイロセンサーの値を用いてWidgetを動かす</h3><p>Positionedで位置を指定して動かしています．</p><pre><code>Positioned(
  top: _foregroundOffset.dx,
  left: _foregroundOffset.dy,
  child: _buildHalloween,
)

</code></pre><p><br></p><h2 id="h9be0c3393d">おわりに</h2><p>いかがでしたでしょうか？<br><br>今回の記事は，こちらの重力センサーと地磁気センサーを用いたKotlinの実装を参考に，ジャイロセンサーを用いてFlutterで実装してみました．<br><a href="https://juejin.cn/post/6989227733410644005" target="_blank" rel="noopener noreferrer">https://juejin.cn/post/6989227733410644005</a><br><br>完全な実装は，こちらのリポジトリで公開しています．もしよかったら見てくださいー<br><a href="https://github.com/kawa1214/flutter-3d-animation-gyrosensor" target="_blank" rel="noopener noreferrer">https://github.com/kawa1214/flutter-3d-animation-gyrosensor</a><br><br></p>

Flutterでジャイロセンサーを用いて3D効果を与える

<p>FirestoreなどのNoSQLを使用しているとBigQueryの結果をレポートとして表示したいケースがあると思います．<br>Dartでバックエンドを構築している場合の，BigQueryのクエリを叩く方法を紹介します．<br><br>実際のコードを公開しています．お試しはこちらからどうぞ！<br><a href="https://github.com/kawa1214/dart-bigquery" target="_blank" rel="noopener noreferrer">https://github.com/kawa1214/dart-bigquery</a><br></p><h2 id="hb023796222">BigQueryにアクセスするServiceAccountを作成</h2><p>GCPのIAMのサービスアカウントから</p><ul><li>BigQuery ジョブユーザ</li><li>BigQuery データ閲覧者</li></ul><p>のロールを持ったサービスアカウントを作成します．<br><br>作成したサービスアカウントのキーから新しい鍵を作成し，JSON形式で保存します．<br><img src="https://images.microcms-assets.io/assets/f5e6ab40ae474bf7a9f69442a8f9b4a4/8d990db22d644f8c89a494645cd85033/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-04%2018.20.49.png" alt=""><br><img src="https://images.microcms-assets.io/assets/f5e6ab40ae474bf7a9f69442a8f9b4a4/812375a9e71048409868509809d873bd/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-04%2018.58.29.png" alt=""></p><h2 id="h42c2b498c8">サービスアカウントの情報を環境変数として定義</h2><p>Dockerで環境変数に追加します．<br>.env</p><pre><code>PROJECT_ID=
PRIVATE_KEY_ID=
PRIVATE_KEY=
CLIENT_EMAIL=
CLIENT_ID=</code></pre><p>DockerFile</p><pre><code># Official Dart image: https://hub.docker.com/_/dart
# Specify the Dart SDK base image version using dart:&lt;version&gt; (ex: dart:2.12)
FROM dart:stable AS build

# Resolve app dependencies.
WORKDIR /app
COPY pubspec.* ./
RUN dart pub get

# Copy app source code and AOT compile it.
COPY . .
# Ensure packages are still up-to-date if anything has changed
RUN dart pub get --offline
RUN dart compile exe bin/server.dart -o bin/server

# Build minimal serving image from AOT-compiled `/server` and required system
# libraries and configuration files stored in `/runtime/` from the build stage.
FROM scratch
COPY --from=build /runtime/ /
COPY --from=build /app/bin/server /app/bin/

# Start server.
EXPOSE 8080
CMD ["/app/bin/server"]</code></pre><p>dockr-compose.yaml</p><pre><code>version: "3.4"
services:
  server:
    build:
      context: .
      dockerfile: Dockerfile
    image: server
    restart: always
    container_name: server
    ports:
    - "8080:8080"
    env_file:
      - .env</code></pre><p><code>lib/constants/environment_variables.dart</code> に環境変数のKeyを定義します．</p><pre><code>const projectIdMapKey = 'PROJECT_ID';
const privateKeyIdMapKey = 'PRIVATE_KEY_ID';
const privateKeyMapKey = 'PRIVATE_KEY';
const clientEmailMapKey = 'CLIENT_EMAIL';
const clientIdMapKey = 'CLIENT_ID';</code></pre><p>dart側からは<code>final env = Platform.environment;</code> で呼び出すことができます．</p><pre><code>import '../constants/environment_variables.dart' as environment_variables;
final env = Platform.environment;
env[environment_variables.projectIdMapKey] // これでプロジェクトIDを参照することが出来ます</code></pre><h2 id="hd2d620a6df">BigQueryをDartから呼ぶ</h2><p>BigQueryAPIをwrapperしているパッケージを追加します</p><pre><code>dependencies:
  googleapis: ^4.0.0　// APIのwrapper
  googleapis_auth: ^1.1.0 // サービスアカウントの認証で使います</code></pre><p>サービスアカウントの認証は<code>googleapis_auth</code> を使用します．</p><pre><code>final env = Platform.environment;

final credentials = googleapis_auth.ServiceAccountCredentials.fromJson({
  'type': 'service_account',
  'project_id': env[environment_variables.projectIdMapKey],
  'private_key_id': env[environment_variables.privateKeyIdMapKey],
  'private_key':
   '-----BEGIN PRIVATE KEY-----\n${env[environment_variables.privateKeyMapKey]}\n-----END PRIVATE KEY-----\n',
  'client_email': env[environment_variables.clientEmailMapKey],
  'client_id': env[environment_variables.clientIdMapKey],
});

final authClient = await googleapis_auth.clientViaServiceAccount(
  credentials,
  [googleapis.BigqueryApi.bigqueryScope],
);</code></pre><p>googleapisを用いてBigQueryのAPIを叩きます．<br>デフォルトではuseLegacySqlがfalseになっているため，標準SQLを使う場合は<code>false</code> にします．<br>タイムアウトはデフォルトで10秒なので，使用ケースに合わせて適切な値に設定します．</p><pre><code>final queryResponse = await googleapis.BigqueryApi(authClient).jobs.query(
  googleapis.QueryRequest(
  useLegacySql: false,
  query: query,
  timeoutMs: 20000,
),
 projectId,
);</code></pre><p>BigQueryを叩くためのクライアントクラスは，最終的に以下のようになります．</p><pre><code>import 'dart:io';

import 'package:googleapis/bigquery/v2.dart' as googleapis;
import 'package:googleapis_auth/auth_io.dart' as googleapis_auth;
import 'package:googleapis_auth/googleapis_auth.dart' as googleapis_auth;

import '../constants/environment_variables.dart' as environment_variables;

class BigQueryClient {
  BigQueryClient(this.projectId, this.authClient);

  final String projectId;
  final googleapis_auth.AutoRefreshingAuthClient authClient;

  Future&lt;googleapis.QueryResponse&gt; query(String query) async {
    try {
      final queryResponse = await googleapis.BigqueryApi(authClient).jobs.query(
            googleapis.QueryRequest(
              useLegacySql: false,
              query: query,
              timeoutMs: 50000,
            ),
            projectId,
          );
      return queryResponse;
    } catch (e, s) {
      stderr.writeAll({
        'Error': e,
        'StackTrace': s,
      }.entries);
      rethrow;
    }
  }

  static Future&lt;BigQueryClient&gt; getInstance() async {
    final env = Platform.environment;

    final credentials = googleapis_auth.ServiceAccountCredentials.fromJson({
      'type': 'service_account',
      'project_id': env[environment_variables.projectIdMapKey],
      'private_key_id': env[environment_variables.privateKeyIdMapKey],
      'private_key':
          '-----BEGIN PRIVATE KEY-----\n${env[environment_variables.privateKeyMapKey]}\n-----END PRIVATE KEY-----\n',
      'client_email': env[environment_variables.clientEmailMapKey],
      'client_id': env[environment_variables.clientIdMapKey],
    });

    final authClient = await googleapis_auth.clientViaServiceAccount(
      credentials,
      [googleapis.BigqueryApi.bigqueryScope],
    );
    return BigQueryClient(
      env[environment_variables.projectIdMapKey]!,
      authClient,
    );
  }
}</code></pre><p>実際に<code>BigQueryClient</code> を呼び出す処理は次のようになります．</p><ul><li>エラーがある場合</li><li>レスポンスの行が0の場合</li></ul><p>でエラーハンドリングをしています．</p><pre><code>import 'dart:io';

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as shelf_io;

import 'package:dart_bigquery/clients/big_query_client.dart';

void main() async {
  final handler = Pipeline().addHandler(_queryRequest);

  final server = await shelf_io.serve(handler, InternetAddress.anyIPv4, 8080);
  server.autoCompress = true;

  print('Serving at http://${server.address.host}:${server.port}');
}

Future&lt;Response&gt; _queryRequest(Request request) async {
  final client = await BigQueryClient.getInstance();

  final res = await client.query('''
    select * from table
    ''');

  final errors = res.errors ?? [];
  if (errors.isNotEmpty) {
    throw Exception(errors);
  }

  final tableRows = res.rows;
  if (tableRows == null) {
    throw Exception('Incorrect query');
  }

  final data = tableRows.map((e) =&gt; e.f!.map((e) =&gt; e.toJson())).toList();

  return Response.ok(data);
}</code></pre><p>BigQueryを実際に叩く</p><pre><code>docker-compose up -d</code></pre><p>で立ち上げます．</p><pre><code>http://0.0.0.0:8080</code></pre><p>を叩くとクエリ結果が返ります．<br><br>最小構成のコードを公開しています．実際に試してみたい方はこちらからどうぞ！<br><a href="https://github.com/kawa1214/dart-bigquery" target="_blank" rel="noopener noreferrer">https://github.com/kawa1214/dart-bigquery</a></p>

DartからBigQueryのクエリを叩く方法

<p>Flutterで国際化対応するときに便利なGoogle app scriptを用いたファイル生成を紹介します．<br><br>intl_translationパッケージが，null safetyをサポートしなくなりました．<br><br>今後は，flutter generateでファイルを生成する必要がありますが，arbを手書きしてくのは辛いのでGoogleスプレッドシートで翻訳情報を管理すると楽になるので管理方法を紹介する</p><h2 id="h137e1efc72">国際化(i18n)対応をする</h2><p><code>pubspec.yaml</code> のdependeciesにflutter_localizationsとintlを追加します．同様にflutterのgenerateフラグをtrueにします．</p><pre><code>dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

flutter:
  generate: true</code></pre><p><br>ルートディレクトリに<code> l10n.yaml</code>というファイルを作ります．ここにgenerate先や参照元を指定できます．</p><pre><code>arb-dir: lib/l10n
template-arb-file: intl_ja.arb
output-localization-file: app_localizations.dart</code></pre><p><code>lib/l10n</code> 以下に<code>*.arb</code> ファイルを配置します．<br><code>intl_ja.arb</code> </p><pre><code>{
  "@@locale": "ja",
  "helloworld": "ハローワールド"
}</code></pre><p><code>intl_en.arb</code></p><pre><code>{
  "@@locale": "en",
  "helloworld": "helloworld"
}</code></pre><p>iOSの場合は，<br><code>open ios/Runner.xcworkspace&nbsp;</code> でworkspaceを開きます．<br>Localizationsに対応したい言語を追加します．<br><img src="https://images.microcms-assets.io/assets/f5e6ab40ae474bf7a9f69442a8f9b4a4/e1d8b51ba82e43069e0d1ab5fe71df23/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-30%2021.40.13.png" alt=""></p><h3 id="h090f85bfd6">アプリケーション側の対応</h3><p>生成されたファイルをimportします．<br><code>import 'package:fluttergen/genl10n/app_localizations.dart';</code><br>国際化対応したい文字列は<code>AppLocalizations.of(context)!.helloWorld</code> で呼び出す事ができます．<br>最小構成のサンプルコードは以下のようになります．</p><pre><code>import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Localizations Sample App',
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', ''),
        Locale('ja', ''),
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              AppLocalizations.of(context)!.helloworld,
            ),
          ],
        ),
      ),
    );
  }
}</code></pre><p><img src="https://images.microcms-assets.io/assets/f5e6ab40ae474bf7a9f69442a8f9b4a4/ccf7fb1d85d948dda5f2180d6d299c9e/Simulator%20Screen%20Shot%20-%20iPhone%2012%20Pro%20-%202021-08-30%20at%2021.45.03.png?w=184&amp;h=400" alt=""><br></p><h2 id="h9a90d4a08b">GoogleAppScriptを用いて国際化対応に必要なファイルを生成する</h2><p>スプレッドシートを作成します．<br>今回用意したスクリプトでは，4行目から翻訳対象のデータとしています．<br>また，#をつけることでコメントを書くことが出来るようにしています．ユースケースやスクリーンに対応したコメントをつけると良いと思います．<br><br>A列目にFlutterで呼び出しに使うメソッド名，B列目に翻訳文字列に対する説明，C列目以降に文字列を入れるようにしています．<br><img src="https://images.microcms-assets.io/assets/f5e6ab40ae474bf7a9f69442a8f9b4a4/072dabbf16fe438e90701427459e244e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-30%2022.13.44.png" alt=""><br>ツールからスクリプトエディタを選択し，myFunctionを実行することでGoogleDriveに<code>*.arb</code> が生成されます．<br>ファイルをダウンロードし，<code>lib/l10n</code> 以下に配置することで使用することが出来ます．</p><pre><code>const col_key = 0
const col_desc = 1
const col_ja = 2
const col_en = 3

const row_data_start = 3

const comment_out_string = '#'

function generateArb(data) {
  const exportHeader = "{\n"
  const exportFooter = "}\n"
  
  const arbSettings = [
    {
      "locale": "ja",
      "file_name": "intl_ja.arb",
      "col": col_ja,
    },
    {
      "locale": "en",
      "file_name": "intl_en.arb",
      "col": col_en,
    },
  ]
    
  arbSettings.forEach(arb =&gt; {
    let exportData = ""
    exportData += exportHeader
    
    let locale = `  "@@locale": "${arb['locale']}",\n`
    exportData += locale
    
    data.forEach(function(e, index, array) {
      if (index === array.length - 1){
        exportData += `  "${e[col_key]}": "${e[arb['col']]}"\n`
      } else {
        exportData += `  "${e[col_key]}": "${e[arb['col']]}",\n`
      }
    })
    exportData += exportFooter
    exportDataToDrive(exportData, arb['file_name'])
  })
}

function exportDataToDrive(data, fileName) {
    const blob = Utilities.newBlob(data, MimeType.PLAIN_TEXT, fileName)
    DriveApp.createFile(blob)
}

function myFunction() {
  const sheet = SpreadsheetApp.getActiveSheet()
  const data = sheet.getDataRange().getValues()

  const transData = data.splice(row_data_start, data.length)
  const filtterdTransData = transData.filter(e =&gt; e[col_key] !== '').filter(e =&gt; e[col_key].slice(0, 1) !== comment_out_string)
  
  generateArb(filtterdTransData)
}</code></pre><p><br>サンプルプロジェクトを用意しました．実際に試してみたい方はぜひ使ってください<span style="color:#333333">🎅🏽</span><br><a href="https://github.com/kawa1214/flutter-l10n-app-script" target="_blank" rel="noopener noreferrer">https://github.com/kawa1214/flutter-l10n-app-script</a></p>

【Flutter】Googleスプレッドシートを使って国際化(i18n)対応をする(null safety)

<p><img src="https://images.microcms-assets.io/assets/f5e6ab40ae474bf7a9f69442a8f9b4a4/d3065fde6de54b6b8f3c9c8d866c9416/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%82%A2%E3%83%BC%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%20(1).jpg" alt=""></p><h2 id="h75e1959d61">参考動画</h2><p>こちらのYoutubeの動画を参考にイラストを書いてみました．<br><a href="https://www.youtube.com/watch?v=3i6wDh5woDo" target="_blank" rel="noopener noreferrer">How to Draw a Kiwi &amp; Realistic Water Drops in Procreate - Step by Step Tutorial</a><br></p><h2 id="h447d69583c">学んだこと</h2><ul><li>アシスト機能の使い方</li><li>物体に影を与える方法</li></ul><p><br></p>

キウイフルーツのイラスト

<p>2020年を振り返ろうと思います．<br>コロナがあったりしましたが，個人的にはなんだかんだ良い１年を過ごせた気がします．<br><br>どこかに残さないと，基本忘れちゃうなーと思ったのが動機で，ブログにするのは初めてです．</p><h2 id="h2010eb7c42">ざっくりと振り返り</h2><p><strong>1月</strong><br>WEB開発の仕事がしたいなーと思い，年末くらいから勉強をはじめました．<br>バックエンドはMongoDB，Nodejsとかで遊んだりしてました．<br>フロントエンドは何をやればいいか分からず，とりあえずVue，React，Angularをさくっと触って，一番気持ちよかったReactで遊んでました．<br><br>あとは，Fullstackopenっていう海外の大学のプロジェクトが公開されていて，それで認証周りとかも勉強した気がします．講義と課題が合わさっていて良い教材でした．しかも無料！<br><strong>2,3月</strong><br>就活をしてました．シンプルなポートフォリオを作っていくつか応募しました．<br>昨年の教訓（いきなり行動して失敗した）から，とりあえず経験しないと分からない．ということがあり，とある会社でソフトウェアエンジニアとしてアルバイトをさせていただくことになりました（とてもありがたい）<br><strong>4~6月</strong><br>Vue，Laravelのアプリケーションの保守をしました．<br>SQL難しいなーって気持ちでした．<br>毎日勉強させてもらって，刺激があり楽しかったです．なるほどーって気持ちに毎日なってた気がします．<br>あと，WEB開発いいね！って気持ちを決めた時期かも？覚えてないけど．．．<br><strong>7~12月</strong><br>Flutterの新規事業の開発をしました．エンジニアリング以外でも色々学びがありました．<br>こう書くべきだったなーって後悔が結構ありました(書いた直後は良い実装が出来た気がしてる．．．)<br><strong>1月</strong><br>少しだけ書きます．卒論終わりが見えました．<br>幸せです．<br></p><h2 id="h85a62dd0d7">総括</h2><p>昨年は，機械学習やKaggleで遊んでいて，楽しくはありながらも迷走していた気もします．．．<br>今年は目的をもって，遊んでいきたいかもー<br><br>今年したこと</p><ul><li>Go インタプリタ(途中)</li><li>Nextjs</li><li>Flutter</li><li>Laravel</li><li>Vue</li><li>仮想DOMいじり</li></ul><p><br>来年したいこと</p><ul><li>Go インタプリタ(終わらせる)</li><li>３ヶ月毎にアプリリリースしたい</li><li>graphql</li><li>flutter pub(2つくらいあればいいなーってのがある)</li><li>新社会人なので頑張らなきゃー</li><li>nextjs (なにか必要なものがあったらパッケージ作ってリリースしたい)</li><li>Blitz.js</li><li>技術ブログを書くー（月1は書きたい）</li></ul><p><br>そういえば，ブログにちょくちょくアクセスがあって幸せです．見てくれて感謝です．</p>

2020年を振り返る

<p>SSGを適用したNext.jsで，目次(Table of Content)を生成する方法を紹介します．<br>h2タグを大目次，h3タグを小目次とし，こちらのような目次を生成することができます．<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:544eaac9-d93f-4f98-8fb7-13836080432d/service/kawa/media/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-01-16%2020.14.19.png" alt=""><br><br>こちらのブログはNext.jsで作成しており，目次を生成しています．具体的なコードを見たい方は，こちらのリポジトリを参考にしてください．<br><a href="https://github.com/kawa1214/micro-cms-nextjs-blog-boiler-template" target="_blank" rel="noopener noreferrer">https://github.com/kawa1214/micro-cms-nextjs-blog-boiler-template</a></p><h2 id="he7334e2a6f">NextjsでSSGを適用する</h2><p>Next.jsではgetStaticPropsを用いることで，静的なファイルを事前に生成することができます．<br>./pages/blogs/[id].tsx</p><pre><code>export const getStaticProps: GetStaticProps = async context =&gt; {  
  const id = context.params.id;
  const key = {
    headers: { 'X-API-KEY': process.env.API_KEY },
  }

  const res = await fetch(process.env.ENDPOINT + '/blogs/' + id, key)
  const blog: BlogType  = await res.json()

  return {
    props: {
      blog: blog,
    },
  }
}</code></pre><h2 id="he52fdbde3b">目次を生成する</h2><p>cheerioでhtmlを解析し，目次を生成します．<br>今回は，h2を大目次，h3を小目次としています．<br>./pages/blogs/[id].tsx</p><pre><code>const Blog: React.FC&lt;BlogProps&gt; = ({ blog, toc }) =&gt; {
  return (
    &lt;&gt;
      &lt;div
          id="blog_toc"
          dangerouslySetInnerHTML={{
            __html: toc,
          }}
      /&gt;
    &lt;/&gt;
  )
}
export default Blog

const generateTableOfContent = (body: string) =&gt; {
  const $ = cheerio.load(body,{ decodeEntities: false })
  let generateHtml = ''
  generateHtml = generateHtml + '&lt;ul&gt;'
  $('h2, h3').each((index, elm) =&gt; {
    const text = $(elm).html()
    const tag = $(elm)[0].name


    const refId = $(elm)[0].attribs.id
    generateHtml = generateHtml + 
    `&lt;li class="toc_${tag}" key=${index}&gt;`+
    `  &lt;a href="#${refId}"&gt;${text}&lt;/a&gt;`+
    '&lt;/li&gt;'
  })
  generateHtml = generateHtml + '&lt;/ul&gt;'
  return generateHtml
}

export const getStaticProps: GetStaticProps = async context =&gt; {  
  const id = context.params.id;
  const key = {
    headers: { 'X-API-KEY': process.env.API_KEY },
  }

  const res = await fetch(process.env.ENDPOINT + '/blogs/' + id, key)
  const blog: BlogType  = await res.json()
  const toc: string = generateTableOfContent(blog.body)

  return {
    props: {
      blog: blog,
      toc: toc,
    },
  }
}</code></pre><p><br>生成したHTMLにCSSを適用します．こちらのサンプルコードはtailwind cssを使用しています．<br>./styles/Blog.module.css</p><pre><code>/* blog table of content*/
#blog_toc ul {
  @apply bg-white rounded px-2 py-2;
}

#blog_toc li {
  @apply ml-4 my-1.5;
}

#blog_toc a:link {
  @apply text-gray-900;
}

#blog_toc a:visited {
  @apply text-gray-900;
}

#blog_toc a:hover {
  color: #4C74B9;
}

#blog_toc a:active {
  color: #4C74B9;
}

#blog_toc .toc_h3 {
  @apply pl-4
}</code></pre><p><br></p>

SSGを適用したNextjsで目次を生成する

<p>SSGを適用したNext.jsで，sitemap.xmlを生成する方法を紹介します．<br>こちらのブログはNext.jsで作成しており，sitemap.xmlを生成しています．具体的なコードを見たい方は，こちらのリポジトリを参考にしてください．<br><a href="https://github.com/kawa1214/micro-cms-nextjs-blog-boiler-template" target="_blank" rel="noopener noreferrer">https://github.com/kawa1214/micro-cms-nextjs-blog-boiler-template</a></p><h2 id="he7334e2a6f">NextjsでSSGを適用する</h2><p>Next.jsではgetStaticPropsを用いることで，静的なファイルを事前に生成することができます．<br>./pages/blogs/[id].tsx</p><pre><code>export const getStaticProps: GetStaticProps = async context =&gt; {  
  const id = context.params.id;
  const key = {
    headers: { 'X-API-KEY': process.env.API_KEY },
  }

  const res = await fetch(process.env.ENDPOINT + '/blogs/' + id, key)
  const blog: BlogType  = await res.json()

  return {
    props: {
      blog: blog,
    },
  }
}</code></pre><p><br><code>yarn build</code>をすることで，ローカルであれば，<code>.next/server/pages/*/.html</code>にVercelであれば<code>.next/serverless/pages/*/*.html</code>以下にファイルが出力されます．</p><h2 id="ha71c69d8b7">sitemap.xmlを生成する</h2><p>sitemap.xmlを生成するための，コードを書きます．<br>globbyを用いて，指定したフォルダ以下のファイルを取得しています．<br>今回は，ローカルとサーバ上で実行したに生成された静的なファイルのタイトルを取得しています．next.jsの仕様上，こちらがURLになります．<br>例えば，<code>.next/server/pages/blogs/page1.html</code>が生成された場合のURLは<code>https://example.com/blogs/page1</code>になります．<br>utils/generateSiteMap.js</p><pre><code>const fs = require('fs')
const globby = require('globby')

async function generateSiteMap() {
  const pages = await globby([
    '.next/server/pages/**/*.html',
    '.next/serverless/pages/**/*.html'
  ])

  const sitemap = `&lt;?xml version="1.0" encoding="UTF-8"?&gt;
    &lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&gt;   
      ${pages
        .map(page =&gt; {
          const path = page
            .replace('/index', '')
            .replace('.next/serverless/pages', '')
            .replace('.next/server/pages', '')
            .replace('.html', '')
          return `
      &lt;url&gt;
        &lt;loc&gt;${`https://kawa.dev${path}`}&lt;/loc&gt;
      &lt;/url&gt;
              `
        })
        .join('')}
  &lt;/urlset&gt;
  `

  fs.writeFileSync('public/sitemap.xml', sitemap)
}

generateSiteMap()</code></pre><h3 id="hb12a1563db">package.jsonのスクリプトを編集する</h3><p>これで，site.mapを生成するコードの準備は完了しました．<br>最後に，先程書いた<code>generateSiteMap</code>関数を実行するために，package.jsonのスクリプトを編集します．<br><code>next build</code>後に実行したいため，以下のように書き換えます．</p><pre><code>"scripts": {
&nbsp; "build": "next build &amp;&amp; node utils/generateSiteMap.js",
},</code></pre><p><code>yarn build</code>を実行すると，<code>./public/sitemap.xml</code>が生成されます．</p>

Next.jsでSSGを使用してsitemap.xmlを生成する

<p><strong>はじめに</strong><br>この記事では，仮想DOMを用いてTODOリストを作成します<br>仮想DOMを作成し，差分からDOMを再生成する仕組み．それを用いたTODOリストの例を紹介します<br>Githubリポジトリ:&nbsp;<a style="color:inherit" href="https://github.com/kawa1214/virtual-dom-simple-framework" target="_blank" rel="noopener noreferrer">https://github.com/kawa1214/virtual-dom-simple-framework</a><br>GithubPages:&nbsp;<a style="color:inherit" href="https://kawa1214.github.io/virtual-dom-simple-framework/" target="_blank" rel="noopener noreferrer">https://kawa1214.github.io/virtual-dom-simple-framework/</a><br><strong>スターお願いします⭐</strong></p><h2 id="hcc1a3c044b">仮想DOMを理解する</h2><h3 id="h5fb5151624">仮想DOMについてDOM要素を取得する</h3><p>getElementById(‘app’)で，idプロパティがappのElementオブジェクトを取得できます．</p><pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;simple vdom framework example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
    &lt;script src="./dist/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
const $target = document.getElementById('app')</code></pre><h3 id="h1099218861">仮想DOMを生成する</h3><p>実現したいことは，以下のようなhtmlを生成することです．</p><pre><code>&lt;a id="element-1"&gt;text&lt;/a&gt;</code></pre><p>このhtmlは，tag(a), attribute({id: element-1}), children(text)の要素から成り立っています．これらの要素を含むオブジェクトを返す関数を作ります．</p><pre><code>interface elementAttributeInterface {
  tagName: keyof HTMLElementTagNameMap,
  attrs: elementAttrsType,
  children: elementChildrenType,
}

type elementAttrsType = { [key: string ]: string | EventListener }


type elementChildrenType = Array&lt;elementAttribute | string&gt;

const createElement = (props: elementAttribute) =&gt; {
  return {
    tagName: props.tagName,
    attrs: props.attrs,
    children: props.children,
  }
}</code></pre><p>この関数を用いて，先程のHTML要素を表します．</p><pre><code>const element = (state: any) =&gt; createElement({
  tagName: "p",
  attrs: {
    id: "element-1",
  },
  children: [
    "text",
  ],
})</code></pre><h3 id="hd70e3d3b68">仮想DOMをレンダリングする</h3><p>まずは，レンダリングするための関数を用意する必要があります．<br>attributeとchildをすべて追加し，生成されたElementオブジェクトを返しています．</p><pre><code>const renderElem = (vNode: elementAttribute) =&gt; {
  const $el = document.createElement(vNode.tagName)

  for (const [k, v] of Object.entries(vNode.attrs)) {
    if (typeof v === 'function') {
      /// EventListenerのための処理
      /// oninput を input に変換する必要がある．
      const eventName = k.slice(2)
      $el.addEventListener(eventName, v as EventListener)
    }else {
      $el.setAttribute(k, v)
    }
  }

  for (const child of vNode.children) {
    $el.appendChild(render(child))
  }

  return $el
}

const firstRender = (vNode: elementAttribute) =&gt; {
  return renderElem(vNode)
}
const element = createElement({
  tagName: "p",
  attrs: {
    id: "element-1",
  },
  children: [
    "text",
  ],
})
const $app = firstRender(element)</code></pre><h3 id="h4bc4299c70">仮想DOMをマウントする</h3><p>レンダリングしたオブジェクトをマウントします．</p><pre><code>interface mountInterface {
  $node: Element,
  $target: Element | null,
}

const mount = (props: mountInterface) =&gt; {
  if (props.$target !== null) {
    props.$target.replaceWith(props.$node)
    return props.$node
  }
}

let vApp = element(state)
const $app = firstRender(vApp)
const $target = document.getElementById('app')
let $rootEl = mount({ $node: $app, $target: $target })</code></pre><h3 id="hdc000f3f1f">差分だけ更新する</h3><p>仮想DOMの特徴でもありますが，効率的にレンダリングするために，差分だけを更新してみます．</p><pre><code>const replaceChildren = (oldVTree: elementAttribute, newVTree: elementAttribute, $rootEl: Element,) =&gt; {
  // childrenの分だけattributeがあるため，１つのFor分でattributeの差分も見ます．
  $rootEl = replaceAttrs(oldVTree.attrs, newVTree.attrs, $rootEl)

  /// いくつか場合分けをして考えます．
  /// 1.文字列のは置き換えます．
  /// 2.新たに加えたChildrenがある場合は追加します．
  /// 3.Childrenがない場合は，削除する (実装し忘れたー．あとでやります)

  newVTree.children.forEach((newVChild, i) =&gt; {
    if (oldVTree.children === undefined || newVTree.children === undefined) {
      return $rootEl
    }
    
    const oldVChild = oldVTree.children[i]
    // string型の場合は 文字列のため，replaceWithメソッドで置き換えます．
    if (typeof newVChild === 'string' || typeof oldVChild === 'string') {
      if (newVChild !== oldVChild) {
        const $newNode = render(newVTree)
        $rootEl.replaceWith($newNode)
      }
      return $rootEl
    }
    
    // 新たに加えたChildrenがある場合は，appendChildメソッドで追加します．
    if ($rootEl.children[i] === undefined) {
      $rootEl.appendChild(render(newVChild))
      return $rootEl
    }
    replaceChildren(newVChild, oldVChild, $rootEl.children[i])
  })
  return $rootEl
}

const replaceAttrs = (oldAttrs: elementAttrs, newAttrs: elementAttrs, $rootEl: Element,) =&gt; {
  for (const [k, v] of Object.entries(newAttrs)) {
    if (typeof v === 'function') {
      $rootEl.addEventListener(k, v as EventListener)
    }else {
      $rootEl.setAttribute(k, v)
    }
  }

  for (const k in oldAttrs) {
    if (!(k in newAttrs)) {
      $rootEl.removeAttribute(k)
    }
  }
  return $rootEl
}

const diff = (oldVTree: elementAttribute , newVTree: elementAttribute, $rootEl: Element) =&gt; {
  $rootEl = replaceChildren(oldVTree, newVTree, $rootEl)
  return $rootEl
}

const reRender = () =&gt; { 
  const vNewApp = view(state)
    if ($rootEl !== undefined ) {
      const $newRootEl = diff(vApp, vNewApp, $rootEl)
      $rootEl = $newRootEl
    }
    vApp = vNewApp
}</code></pre><h2 id="he5018ae6b7">TODOリストを作ろう</h2><h3 id="hf3d6bc1af0">TODOリストの動作GIF</h3><p><img src="https://images.microcms-assets.io/protected/ap-northeast-1:544eaac9-d93f-4f98-8fb7-13836080432d/service/kawa/media/vdom-diff.gif" alt=""></p><h3 id="hd0767d8049">ソースコード</h3><pre><code>const view = (state: any) =&gt; createElement({
  tagName: "div",
  attrs: { id: 'app'},
  children: [
    createElement({
      tagName: "input",
      attrs: {
        type: "text",
        value: `${state.todoInput}`,
        oninput: (event: Event) =&gt; {
          const target = event.target as HTMLInputElement
          setState({actionType: 'todoInputTextChange', state: target.value})
        }
      },
      children: [
        createElement({
          tagName: "p",
          attrs: {},
          children: [
            `${state.todos[0]}`
          ]
        }),
      ],
    }),
    createElement({
      tagName: "button",
      attrs: {
        type: "button",
        onclick: () =&gt; {
          setState({actionType: 'addTodo', state: state.todoInput})
        }
      },
      children: [
      ],
    }),
    ...todosMap(state.todos),
  ],
})

const todosMap = (todos: Array&lt;String&gt;) =&gt; {
  return todos.map((todo, index) =&gt; {
    return createElement({
      tagName: "p",
      attrs: {
        key: `${index}`,
      },
      children: [
        `${todo}`
      ]
    })
  })
}

let state: any = {
  todoInput: "input todo",
  todos: ["todo1", "todo2", "todo3"],
}

let vApp = view(state)
const $app = firstRender(view(state))
const $target = document.getElementById('app')
let $rootEl = mount({ $node: $app, $target: $target })


const setState = (actionState: setStateInterface) =&gt; {
  switch(actionState.actionType) {
    case 'todoInputTextChange':
      state.todoInput = actionState.state
      reRender()
      break
    case 'addTodo':
      state.todos.push(actionState.state)
      reRender()
      break
  }
}

const reRender = () =&gt; {
  
  const vNewApp = view(state)
  if ($rootEl !== undefined ) {
    const $newRootEl = diff(vApp, vNewApp, $rootEl)
    $rootEl = $newRootEl
  }
  vApp = vNewApp
}</code></pre>

仮想DOMをスクラッチで理解して，TODOリストを作る

<p>今回の記事の趣旨は，文字入力エリア(TextEdditingController)のカスタマイズです．Flutterで開発をしていると，Widgetが豊富でどれを継承すれば良いのか分からないことがありました．<br>文字入力については，TextEdditingControllerをオーバライドすれば良いという結論に至ったので，TextEdditingControllerについて解説します．<br>※）Markdownを実装したい場合は，素直にPackageを使うべきです．</p><h2 id="h78dc070eb7">CodePenのデモ</h2><p>codepenで公開しているので，もし良かったら遊んでみてください！<br><a href="https://codepen.io/kawa1214/pen/oNxgRpy" target="_blank" rel="noopener noreferrer">https://codepen.io/kawa1214/pen/oNxgRpy</a><br><img src="undefined" alt=""></p><h3 id="h11c3117cb1">コードについて</h3><pre><code>TextStyle textStyle(String text) {
&nbsp; String _textTag = text.split(" ").first;


&nbsp; TextStyle _h1 = TextStyle(color: Colors.black, fontSize: 32);
&nbsp; TextStyle _h2 = TextStyle(color: Colors.black, fontSize: 26);
&nbsp; TextStyle _p = TextStyle(color: Colors.black, fontSize: 16);&nbsp;
&nbsp;
&nbsp;switch (_textTag) {
	 case "#":
	&nbsp; &nbsp;return _h1;
	&nbsp; &nbsp;break;
	 case "##":
	&nbsp; &nbsp;return _h2;
	&nbsp; &nbsp;break;
	 default:
	&nbsp; return _p;
&nbsp;}
}


class CustomTextEditingController extends TextEditingController {
&nbsp; CustomTextEditingController({String text}) : super(text: text);


&nbsp; @override
&nbsp; TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
&nbsp; &nbsp; List _splitTextList = text.split("\n");


&nbsp; &nbsp; return TextSpan(
&nbsp; &nbsp; &nbsp; &nbsp; children: &lt;TextSpan&gt;[
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (String item in _splitTextList)&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TextSpan(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: item + "\n",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style: textStyle(item),
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; &nbsp; ]
&nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp;}
}</code></pre><p>TextEditingControllerを継承したCustomTextEditingControllerクラスを作ります．<br>文字入力の表示をしている部分は，buildTextSpanメソッドなのでこちらをオーバライドして，TextSpan型で返してあげればOKです！<br>textStyleメソッドでは，予めMarkdownのTagと対応したTextStyleを定義しています．String型の値を渡すと，TagとマッチしたTextStyleが返ってきます．</p><h3 id="h9be0c3393d">おわりに</h3><p>実は，僕自身がTextFieldクラスを眺め続けて少しハマりまってました．<br>どこに書いてあるのか分かればシンプルなのですが．．．</p>

Flutter

Dart

BigQuery

Flutter

イラスト

日記

Next.js

Javascript

Next.js

Javascript

Javascript

VirtualDom

Flutter

Markdown