
この記事はFlutter Advent Calendar 2021（カレンダー1）の9日目の記事です。⛄

こんにちはkawa([@dev_kawa](https://twitter.com/dev_kawa))です。

コーディング規約は、チームでルールを作り誰が見ても理解できるコードを書くことを目的として導入されると思います。

一方でコーディング規約が守られているかを担保するために、コードレビューのコストが増加してしまうという課題が発生します。

コストが増加しコーディング規約が守られないと、目的が達成されずコードレビューだけが辛くなってしまうという悲しいことになってしまいます。

flutter analyzeを実行することで、ある程度は解決できますが、〇〇というLintがあれば便利なのになぁ…というケースがあると思います。

本記事は、そうした状況を改善するために、Flutter(Dart)において静的解析を自作する方法を紹介します。

![vscode](/public/md/posts/create-flutter-analyzer-plugin/vscode.png)

(このように表示できます)

**お気持ちスター（⭐）で喜びます😻**

[https://github.com/kawa1214/import-lint](https://github.com/kawa1214/import-lint)

[https://pub.dev/packages/import_lint](https://pub.dev/packages/import_lint)


## この記事で伝えたいこと

- Analyzer Pluginで自作のLintを作る方法

## Analyzer周りのツールについて

AnalyzerはDartの静的解析をします。

Analysis Serverは、DartSDKに含まれているツールの一つです。

Analysis Serverから送られるJSON形式のデータを、VSCodeのDart Extensionを介して受け取り、VSCodeにエラーとして表示することができます。([dart code](https://github.com/Dart-Code/Dart-Code/blob/9732feed03f954fe82725e011b0846d3f27d3df6/src/extension/analysis/analyzer_das.ts#L103))

- Analyzer  
https://pub.dev/packages/analyzer
- Dart VSCode Extension  
https://github.com/Dart-Code/Dart-Code

## Analyzer Pluginについて

Analyzer PluginはAnalysis Serverのプラグインを作成するためのフレームワークです。

こちらを用いてLintを作ります。

- Analyzer Plugin  
https://pub.dev/packages/analyzer_plugin


## Analyzer Pluginで自作のLintを作る方法

### Dartのプロジェクトを作る

dart createでdartのプロジェクトを作成します。

```shell
dart create hoge_analyzer_plugin
```

### Analyzer Pluginの呼び出しに必要なファイルを配置

Analysis Serverは`<host_package>/tools/analyzerplugin`に存在するプロジェクトを読み込みます。プロジェクトに必要なファイルを配置します。

tools/analyzer_plugin/pubspec.yaml

```yaml
name: hoge_analyzer_plugin_loader
description: bootstrap package of hoge_analyzer_plugin
version: 1.0.0
publish_to: none

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  hoge_analyzer_plugin:
    path: /xxx/hoge_analyzer_plugin
# hoge_analyzer_plugin ディレクトリまでのパス
# pub.devに公開する際はバージョンを指定する
```

tools/analyzer_plugin/bin/plugin.dart

```dart
import 'dart:isolate';

import 'package:hoge_analyzer_plugin/plugin_starter.dart' as plugin;

void main(List<String> args, SendPort sendPort) {
  plugin.start(args, sendPort);
}
```

lib/plugin_starter.dart

```dart
import 'dart:isolate';

import 'package:analyzer/file_system/physical_file_system.dart';
import 'package:analyzer_plugin/starter.dart';

import 'plugin.dart';

void start(Iterable<String> _, SendPort sendPort) {
  ServerPluginStarter(HogeAnalyzerPlugin(PhysicalResourceProvider.INSTANCE))
      .start(sendPort);
}
```

### プラグインの実装

次にプラグイン本体の実装を進めます。

`ServerPlugin`を継承した`HogeAnalyzerPlugin`を作成します。

`createAnalysisDriver`でドライバーを作成します。ここで、情報を受け取り、分析結果を通知する処理を行います。

lib/plugin.dart

```dart
import 'dart:async';

import 'package:analyzer/dart/analysis/context_builder.dart';
import 'package:analyzer/dart/analysis/context_locator.dart';
import 'package:analyzer/dart/analysis/results.dart';
import 'package:analyzer/file_system/file_system.dart';
import 'package:analyzer/source/line_info.dart';
import 'package:analyzer/src/dart/analysis/driver.dart';
import 'package:analyzer/src/dart/analysis/driver_based_analysis_context.dart';
import 'package:analyzer_plugin/plugin/plugin.dart';
import 'package:analyzer_plugin/protocol/protocol_common.dart' as plugin;
import 'package:analyzer_plugin/protocol/protocol_generated.dart' as plugin;

class HogeAnalyzerPlugin extends ServerPlugin {
  HogeAnalyzerPlugin(ResourceProvider provider) : super(provider);

  var _filesFromSetPriorityFilesRequest = <String>[];

  // プラグインがAnalyzeの対象とするファイルをGlobで記述します
  @override
  List<String> get fileGlobsToAnalyze => <String>['/lib/**/*.dart'];

  // プラグインの名前を記述します
  @override
  String get name => 'Hoge Analyzer Plugin';

  // Server APIのバージョンを記述します
  @override
  String get version => '1.0.0';

  @override
  AnalysisDriverGeneric createAnalysisDriver(plugin.ContextRoot contextRoot) {
    final rootPath = contextRoot.root;
    final locator =
        ContextLocator(resourceProvider: resourceProvider).locateRoots(
      includedPaths: [rootPath],
      excludedPaths: [
        ...contextRoot.exclude,
      ],
      optionsFile: contextRoot.optionsFile,
    );

    if (locator.isEmpty) {
      final error = StateError('Unexpected empty context');
      channel.sendNotification(plugin.PluginErrorParams(
        true,
        error.message,
        error.stackTrace.toString(),
      ).toNotification());

      throw error;
    }

    final builder = ContextBuilder(
      resourceProvider: resourceProvider,
    );

    final analysisContext = builder.createContext(contextRoot: locator.first);
    final context = analysisContext as DriverBasedAnalysisContext;
    final dartDriver = context.driver;

    runZonedGuarded(
      () {
        dartDriver.results.listen((analysisResult) {
          if (analysisResult is ResolvedUnitResult) {

            final errors = _check(
              analysisResult: analysisResult,
            );

            channel.sendNotification(
              plugin.AnalysisErrorsParams(
                path,
                errors,
              ).toNotification(),
            );
          } else if (analysisResult is ErrorsResult) {
            channel.sendNotification(plugin.PluginErrorParams(
              false,
              'ErrorResult $analysisResult',
              '',
            ).toNotification());
          }
        });
      },
      (Object e, StackTrace stackTrace) {
        channel.sendNotification(
          plugin.PluginErrorParams(
            false,
            'Unexpected error: ${e.toString()}',
            stackTrace.toString(),
          ).toNotification(),
        );
      },
    );
    return dartDriver;
  }

  @override
  void contentChanged(String path) {
    super.driverForPath(path)?.addFile(path);
  }

  @override
  Future<plugin.AnalysisSetPriorityFilesResult> handleAnalysisSetPriorityFiles(
    plugin.AnalysisSetPriorityFilesParams parameters,
  ) async {
    _filesFromSetPriorityFilesRequest = parameters.files;
    _updatePriorityFiles();

    return plugin.AnalysisSetPriorityFilesResult();
  }

  @override
  Future<plugin.AnalysisSetContextRootsResult> handleAnalysisSetContextRoots(
    plugin.AnalysisSetContextRootsParams parameters,
  ) async {
    final result = await super.handleAnalysisSetContextRoots(parameters);
    return result;
  }

  void _updatePriorityFiles() {
    final filesToFullyResolve = {
      ..._filesFromSetPriorityFilesRequest,
      for (final driver2 in driverMap.values)
        ...(driver2 as AnalysisDriver).addedFiles,
    };

    final filesByDriver = <AnalysisDriverGeneric, List<String>>{};
    for (final file in filesToFullyResolve) {
      final contextRoot = contextRootContaining(file);
      if (contextRoot != null) {
        final driver = driverMap[contextRoot];
        if (driver != null) {
          filesByDriver.putIfAbsent(driver, () => <String>[]).add(file);
        }
      }
    }
    filesByDriver.forEach((driver, files) {
      driver.priorityFiles = files;
    });
  }

  List<plugin.AnalysisError> _check(
    ResolvedUnitResult analysisResult,
  ) {
    // TODO: 実装 
    // The Element Model
    // https://github.com/dart-lang/sdk/blob/e995cb5f7cd67d39c1ee4bdbe95c8241db36725f/pkg/analyzer/doc/tutorial/element.md

    // ここでエラー情報を返す
    return [];
  }
}

```

抽象構文木を用いて具体的な実装をしますが、今回は割愛します。（後で追記するかもしれないです）

- [The Element Model
](https://github.com/dart-lang/sdk/blob/e995cb5f7cd67d39c1ee4bdbe95c8241db36725f/pkg/analyzer/doc/tutorial/element.md)

通知するエラー以下のようになります。

```dart
final location =  plugin.Location(
      filePath,
      offset,
      length, 
      startLine,
      startColumn,
    );
  
final error =  plugin.AnalysisError(
      plugin.AnalysisErrorSeverity('INFO'),
      plugin.AnalysisErrorType.LINT,
      location,
      message,
      code,
      correction: 'Try ...',
      hasFix: false,
    );
```

AnalysisErrorSeverity: エラーの深刻度をINFO, WARNING, ERRORのレベルで指定できます。

AnalysisErrorType: エラーの種類を指定できます。

```dart
CHECKED_MODE_COMPILE_TIME_ERROR,
COMPILE_TIME_ERROR,
HINT,
LINT,
STATIC_TYPE_WARNING,
STATIC_WARNING,
SYNTACTIC_ERROR,
TODO,
```

message: 文字列型でコードのどこが間違っているかを示します。

code: 文字列型でエラーコードを表示します。

correction: 文字列型で修正する方法を示します。

## 注意点

```shell
flutter analyze
or
dart analyze
```

analyzeコマンドでは、プラグインで作成した情報は表示できないため、別途CLIの実装が必要です。

## おわりに

ざっくりとanalyzer pluginについて書きました。

足りないところが結構あると思うので、（多分）あとで追記します

（アドベントカレンダーギリギリで書いてしまう…）


Analyzer Pluginで欲しいLintを自作する

この記事で伝えたいこと

Analyzer周りのツールについて

Analyzer Pluginについて

Analyzer Pluginで自作のLintを作る方法

Dartのプロジェクトを作る

Analyzer Pluginの呼び出しに必要なファイルを配置

プラグインの実装

注意点

おわりに


ジャイロセンサーを用いて 3D 効果を実装しました。

![result-gif](/public/md/posts/flutter-3d-gyro/result.gif)

こちらのリポジトリで公開しています．

[https://github.com/kawa1214/flutter-3d-animation-gyrosensor](https://github.com/kawa1214/flutter-3d-animation-gyrosensor)

## どのような実装をしたか

今回は，画面を foreground，middle，background の３つのレイヤーに分けて，ジャイロセンサーに応じて移動させることで表現しました．

- 全面のレイヤーはキャラクターとエフェクトの要素です．
- 中間のレイヤーは文字です．
- 背面のレイヤーはバックグラウンド画像としました．

中間のレイヤーは固定し，全面のレイヤーはジャイロセンサーの値を元に移動しています．  
背面のレイヤーは全面のレイヤーとは逆方向に移動しています．

## ジャイロセンサーを Flutter で扱う

### パッケージ

sensors_plus というパッケージを用いて，ネイティブからジャイロセンサーの値を取得することができます．

```yaml
dependencies:
flutter:
sdk: flutter
sensors_plus:
git:
url: git://github.com/kawa1214/plus_plugins.git
path: packages/sensors_plus/sensors_plus
ref: f6f69986e80573f96d7d536e09585f3e842ee270
```

しかしながら，sensors_plus のジャイロスコープの値を取得する間隔が，Android では 0.2 秒と遅く，iOS ではデバイスによって異なるため扱いづらいです．

今回は，どちらのデバイスでも 0.02 秒ごとに取得するように Fork してコミットを積みました．

[iOS commit](https://github.com/kawa1214/plus_plugins/commit/c1e045cf8197ea4f282a3a6069af76c9a7c63a9d)

[Android commit](https://github.com/kawa1214/plus_plugins/commit/f6f69986e80573f96d7d536e09585f3e842ee270)

## Flutter からジャイロセンサーの値を取得する

こちらのコードで gyroscope のイベントを stream することができます．

```dart
import 'package:sensors_plus/sensors_plus.dart' as sensors;
sensors.gyroscopeEvents.listen((data) => print(data));
```

取得できるデータは x,y,z の 3 つの値をもっており，それぞれは以下の画像に対応します

![apple-gyro](/public/md/posts/flutter-3d-gyro/apple_gyro.png)

> (developers.apple.com より引用)

取得したジャイロセンサーの値から，現在の位置を更新することで 3D 視覚的効果を与えます．

### ジャイロセンサーの値を用いて 3D 効果を与える

最終的なコードは以下のようになります．

```dart
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<sensors.GyroscopeEvent> _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 >= _maxAngle || angle.dy >= _maxAngle) {
        return;
    }

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

    final newForegroundOffse = _foregroundOffset + addForegroundOffset;

    if (newForegroundOffse.dx >=
        _inititalForegroundOffset.dx + _maxForegroundMove.dx ||
        newForegroundOffse.dx <=
        _inititalForegroundOffset.dx - _maxForegroundMove.dx ||
        newForegroundOffse.dy >=
        _inititalForegroundOffset.dy + _maxForegroundMove.dy ||
        newForegroundOffse.dy <=
        _inititalForegroundOffset.dy - _maxForegroundMove.dy) {
        return;
    }

    setState(() {
        _foregroundOffset = _foregroundOffset + addForegroundOffset;
        _backgroundOffset = _backgroundOffset - addForegroundOffset*_backgroundMoveOffsetScale;
    });
}
```

こちらのコードを一つずつ見ていきます．

### 定数について

```dart
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);
```

`_interval` はセンサーから値を取得する間隔です．

`_backgroundScale` は背景画像の拡大の倍率です．（foregroud layer が左右に動くと，背景も左右に移動するため，ある程度拡大をしておく必要があります）

`_backgroundMoveOffsetScale` は foregroud layer の動きに合わせて backgroud layer をどれくらい動かすかの値です．

`_maxForegroundMove` は foregroud layer を上下左右にどれくらい動かせるかの値です．

`_inititalForegroundOffset` と `_inititalBackgroundOffset` は foregroud layer と backgroud layer の初期位置です．

```dart
Offset _foregroundOffset = _inititalForegroundOffset;
Offset _backgroundOffset = _inititalBackgroundOffset;
late StreamSubscription<sensors.GyroscopeEvent> _streamGyrpscopeEvent;
```

`_foregroundOffset` と `_backgroundOffset` は現在の layer の位置です．

また，`initState` で呼ぶ `gyroscope` のイベントを購読する `_streamGyrpscopeEvent` も定義します．

### initState について

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

`initState` では，`gyroscopeEvents` のイベントを listen し，listen した際は`_listenGyroscopeEvent` を呼ぶようにしています．

### _listenGyroscopeEvent について

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

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

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

    final newForegroundOffse = _foregroundOffset + addForegroundOffset;

    if (newForegroundOffse.dx >=
        _inititalForegroundOffset.dx + _maxForegroundMove.dx ||
        newForegroundOffse.dx <=
        _inititalForegroundOffset.dx - _maxForegroundMove.dx ||
        newForegroundOffse.dy >=
        _inititalForegroundOffset.dy + _maxForegroundMove.dy ||
        newForegroundOffse.dy <=
        _inititalForegroundOffset.dy - _maxForegroundMove.dy) {
        return;
    }

    setState(() {
        _foregroundOffset = _foregroundOffset + addForegroundOffset;
        _backgroundOffset = _backgroundOffset - addForegroundOffset * _backgroundMoveOffsetScale;
    });
}
```

若干長めに見えますが，多くの処理はしていません．

`GyroscopeEvent` は回転速度(rad/s)で提供されるため，回転速度 ＊ S ＊ 180/pi で度数法に変換しています．

```dart
final angle = Offset(
    event.x * _interval _ 180 / pi,
    event.y * _interval _ 180 / pi,
);
```

`_maxAngle` で `_maxForegroundMove` 分移動するということを表しています．

今回の場合では，x 軸に 120 度の回転を加えると，その軸の方向に対して 50 動くことになります

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

動かしたあとの値が動かせる範囲の最大値である`_maxForegroundMove`を超えていないか確認をします

```dart
final newForegroundOffse = _foregroundOffset + addForegroundOffset;

if (newForegroundOffse.dx >=
    _inititalForegroundOffset.dx + _maxForegroundMove.dx ||
    newForegroundOffse.dx <=
    _inititalForegroundOffset.dx - _maxForegroundMove.dx ||
    newForegroundOffse.dy >=
    _inititalForegroundOffset.dy + _maxForegroundMove.dy ||
    newForegroundOffse.dy <=
    _inititalForegroundOffset.dy - _maxForegroundMove.dy) {
    return;
}
```

問題がない場合は，foregroudOffset，backgroudOffset を更新します．

`backgroudOffset`は，`foregroudOffset`とは逆方向に`_backgroudMoveOffsetScale`の倍率で移動します．

```dart
setState(() {
    _foregroundOffset = _foregroundOffset + addForegroundOffset;
    _backgroundOffset =
    _backgroundOffset - addForegroundOffset * _backgroundMoveOffsetScale;
});
```

### ジャイロセンサーの値を用いて Widget を動かす

Positioned で位置を指定して動かしています．

```dart
Positioned(
    top: _foregroundOffset.dx,
    left: _foregroundOffset.dy,
    child: _buildHalloween,
)
```

## おわりに

いかがでしたでしょうか？

今回の記事は，こちらの重力センサーと地磁気センサーを用いた Kotlin の実装を参考に，ジャイロセンサーを用いて Flutter で実装してみました．

[https://juejin.cn/post/6989227733410644005](https://juejin.cn/post/6989227733410644005)

完全な実装は，こちらのリポジトリで公開しています．もしよかったら見てくださいー

[https://github.com/kawa1214/flutter-3d-animation-gyrosensor](https://github.com/kawa1214/flutter-3d-animation-gyrosensor)


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

どのような実装をしたか

ジャイロセンサーを Flutter で扱う

パッケージ

Flutter からジャイロセンサーの値を取得する

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

定数について

initState について

_listenGyroscopeEvent について

ジャイロセンサーの値を用いて Widget を動かす


FirestoreなどのNoSQLを使用しているとBigQueryの結果をレポートとして表示したいケースがあると思います．

Dartでバックエンドを構築している場合の，BigQueryのクエリを叩く方法を紹介します．

実際のコードを公開しています．お試しはこちらからどうぞ！

[https://github.com/kawa1214/dart-bigquery](https://github.com/kawa1214/dart-bigquery)

## BigQueryにアクセスするServiceAccountを作成

GCPのIAMのサービスアカウントから

- BigQuery ジョブユーザ
- BigQuery データ閲覧者

のロールを持ったサービスアカウントを作成します．

作成したサービスアカウントのキーから新しい鍵を作成し，JSON形式で保存します．

![service-account-json-1](/public/md/posts/dart-bigquery/service-account-json-1.png)

![service-account-json-2](/public/md/posts/dart-bigquery/service-account-json-2.png)

サービスアカウントの情報を環境変数として定義
Dockerで環境変数に追加します．

.env

```yaml
PROJECT_ID=
PRIVATE_KEY_ID=
PRIVATE_KEY=
CLIENT_EMAIL=
CLIENT_ID=
```

DockerFile

```yaml
# Official Dart image: https://hub.docker.com/_/dart
# Specify the Dart SDK base image version using dart:<version> (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"]
```

dockr-compose.yaml

```yaml
version: "3.4"
services:
  server:
    build:
      context: .
      dockerfile: Dockerfile
    image: server
    restart: always
    container_name: server
    ports:
    - "8080:8080"
    env_file:
      - .env
```

lib/constants/environment_variables.dart に環境変数のKeyを定義します．

```dart
const projectIdMapKey = 'PROJECT_ID';
const privateKeyIdMapKey = 'PRIVATE_KEY_ID';
const privateKeyMapKey = 'PRIVATE_KEY';
const clientEmailMapKey = 'CLIENT_EMAIL';
const clientIdMapKey = 'CLIENT_ID';
```

dart側からはfinal env = Platform.environment; で呼び出すことができます．

```dart
import '../constants/environment_variables.dart' as environment_variables;
final env = Platform.environment;
env[environment_variables.projectIdMapKey] // これでプロジェクトIDを参照することが出来ます
```

## BigQueryをDartから呼ぶ

BigQueryAPIをwrapperしているパッケージを追加します

```yaml
dependencies:
  googleapis: ^4.0.0　// APIのwrapper
  googleapis_auth: ^1.1.0 // サービスアカウントの認証で使います
```

サービスアカウントの認証は`googleapis_auth`を使用します．

```dart
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],
);
```

googleapisを用いてBigQueryのAPIを叩きます．

デフォルトではuseLegacySqlがfalseになっているため，標準SQLを使う場合はfalse にします．

タイムアウトはデフォルトで10秒なので，使用ケースに合わせて適切な値に設定します．

```dart
final queryResponse = await googleapis.BigqueryApi(authClient).jobs.query(
  googleapis.QueryRequest(
  useLegacySql: false,
  query: query,
  timeoutMs: 20000,
),
 projectId,
);
```
BigQueryを叩くためのクライアントクラスは，最終的に以下のようになります．

```dart
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<googleapis.QueryResponse> 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<BigQueryClient> 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,
    );
  }
}
```


実際にBigQueryClient を呼び出す処理は次のようになります．

エラーがある場合
レスポンスの行が0の場合
でエラーハンドリングをしています．

```dart
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<Response> _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) => e.f!.map((e) => e.toJson())).toList();

  return Response.ok(data);
}
```

### BigQueryを実際に叩く

```bash
docker-compose up -d
```

で立ち上げます．

`http://0.0.0.0:8080`を叩くとクエリ結果が返ります．



最小構成のコードを公開しています．実際に試してみたい方はこちらからどうぞ！

[https://github.com/kawa1214/dart-bigquery](https://github.com/kawa1214/dart-bigquery)

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

BigQueryにアクセスするServiceAccountを作成

BigQueryをDartから呼ぶ

BigQueryを実際に叩く


Flutterで国際化対応するときに便利なGoogle app scriptを用いたファイル生成を紹介します．

intl_translationパッケージが，null safetyをサポートしなくなりました．

今後は，flutter generateでファイルを生成する必要がありますが，arbを手書きしてくのは辛いのでGoogleスプレッドシートで翻訳情報を管理すると楽になるので管理方法を紹介する

## 国際化(i18n)対応をする

`pubspec.yaml` のdependeciesにflutter_localizationsとintlを追加します．同様にflutterのgenerateフラグをtrueにします．

```yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

flutter:
  generate: true
```

ルートディレクトリに l10n.yamlというファイルを作ります．ここにgenerate先や参照元を指定できます．

```yaml
arb-dir: lib/l10n
template-arb-file: intl_ja.arb
output-localization-file: app_localizations.dart
```

lib/l10n 以下に*.arb ファイルを配置します．

intl_ja.arb

```yaml
{
  "@@locale": "ja",
  "helloworld": "ハローワールド"
}
```

intl_en.arb

```yaml
{
  "@@locale": "en",
  "helloworld": "helloworld"
}
```

iOSの場合は，`open ios/Runner.xcworkspace`でworkspaceを開きます．

Localizationsに対応したい言語を追加します．


![ios](/public/md/posts/flutter-l10n-google-app-script/ios.png)

### アプリケーション側の対応

生成されたファイルをimportします．


`import 'package:fluttergen/genl10n/app_localizations.dart';`

国際化対応したい文字列は`AppLocalizations.of(context)!.helloWorld`で呼び出す事ができます．

最小構成のサンプルコードは以下のようになります．

```dart
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,
            ),
          ],
        ),
      ),
    );
  }
}
```

![result](/public/md/posts/flutter-l10n-google-app-script/result.png)

## GoogleAppScriptを用いて国際化対応に必要なファイルを生成する

スプレッドシートを作成します．

今回用意したスクリプトでは，4行目から翻訳対象のデータとしています．

また，#をつけることでコメントを書くことが出来るようにしています．ユースケースやスクリーンに対応したコメントをつけると良いと思います．

A列目にFlutterで呼び出しに使うメソッド名，B列目に翻訳文字列に対する説明，C列目以降に文字列を入れるようにしています．

![app-script](/public/md/posts/flutter-l10n-google-app-script/app-script.png)

ツールからスクリプトエディタを選択し，myFunctionを実行することでGoogleDriveに*.arb が生成されます．

ファイルをダウンロードし，lib/l10n 以下に配置することで使用することが出来ます．

```js
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 => {
    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 => e[col_key] !== '').filter(e => e[col_key].slice(0, 1) !== comment_out_string)
  
  generateArb(filtterdTransData)
}
```


サンプルプロジェクトを用意しました．実際に試してみたい方はぜひ使ってください🎅🏽
[https://github.com/kawa1214/flutter-l10n-app-script](https://github.com/kawa1214/flutter-l10n-app-script)

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

国際化(i18n)対応をする

アプリケーション側の対応

GoogleAppScriptを用いて国際化対応に必要なファイルを生成する


![kiwi](/public/md/posts/illust-kiwi/kiwi.jpeg)

## 参考動画

こちらのYoutubeの動画を参考にイラストを書いてみました．

[How to Draw a Kiwi & Realistic Water Drops in Procreate - Step by Step Tutorial](https://www.youtube.com/watch?v=3i6wDh5woDo)

## 学んだこと

- アシスト機能の使い方
- 物体に影を与える方法


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

参考動画

学んだこと


![landscape](/public/md/posts/illust-landscape/landscape.jpeg)

## 参考動画

こちらのYoutubeの動画を参考にイラストを書いてみました．

[Procreate Tutorial Step by Step for Beginners - Minimal Landscape Illustration](https://www.youtube.com/watch?v=PsRBZapM3DE)

## 学んだこと

- Procreateの使い方
- 影の付け方


風景のイラスト


SSGを適用したNext.jsで，目次(Table of Content)を生成する方法を紹介します．

h2タグを大目次，h3タグを小目次とし，こちらのような目次を生成することができます．

![toc-result](/public/md/posts/nextjs-toc-ssg/result.png)

こちらのブログはNext.jsで作成しており，目次を生成しています．具体的なコードを見たい方は，こちらのリポジトリを参考にしてください．

[https://github.com/kawa1214/micro-cms-nextjs-blog-boiler-template](https://github.com/kawa1214/micro-cms-nextjs-blog-boiler-template)

## NextjsでSSGを適用する

Next.jsではgetStaticPropsを用いることで，静的なファイルを事前に生成することができます．

`./pages/blogs/[id].tsx`

```ts
export const getStaticProps: GetStaticProps = async context => {  
  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,
    },
  }
}
```

### 目次を生成する

cheerioでhtmlを解析し，目次を生成します．

今回は，h2を大目次，h3を小目次としています．

`./pages/blogs/[id].tsx`


```ts
const Blog: React.FC<BlogProps> = ({ blog, toc }) => {
  return (
    <>
      <div
          id="blog_toc"
          dangerouslySetInnerHTML={{
            __html: toc,
          }}
      />
    </>
  )
}
export default Blog

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


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

export const getStaticProps: GetStaticProps = async context => {  
  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,
    },
  }
}
```


生成したHTMLにCSSを適用します．こちらのサンプルコードはtailwind cssを使用しています．

`./styles/Blog.module.css`

```css
/* 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
}
```

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

NextjsでSSGを適用する

目次を生成する


今回の記事の趣旨は，文字入力エリア(TextEdditingController)のカスタマ
イズです．Flutterで開発をしていると，Widgetが豊富でどれを継承すれば良いのか分からないことがありました．
文字入力については，TextEdditingControllerをオーバライドすれば良いという結論に至ったので，TextEdditingControllerについて解説します．

※）Markdownを実装したい場合は，素直にPackageを使うべきです．

## CodePenのデモ

codepenで公開しているので，もし良かったら遊んでみてください！

[code pen](https://codepen.io/kawa1214/pen/oNxgRpy)


## コードについて

```dart
TextStyle textStyle(String text) {
  String _textTag = text.split(" ").first;


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


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


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


    return TextSpan(
        children: <TextSpan>[
          for (String item in _splitTextList) 
            TextSpan(
              text: item + "\n",
              style: textStyle(item),
            ),
        ]
      );
   }
}
```

`TextEditingController`を継承した`CustomTextEditingController`クラスを作ります．

文字入力の表示をしている部分は，buildTextSpanメソッドなのでこちらをオーバライドして，TextSpan型で返してあげればOKです！

textStyleメソッドでは，予めMarkdownのTagと対応したTextStyleを定義しています．String型の値を渡すと，TagとマッチしたTextStyleが返ってきます．

## おわりに

実は，僕自身がTextFieldクラスを眺め続けて少しハマりまってました．

どこに書いてあるのか分かればシンプルなのですが．．．

FlutterでMarkDown Editorを作る

CodePenのデモ

コードについて


Jestでテストを書く際に，AxiosをMockする必要があります．Axiosの一部をmockする方法，全体をmockする方法の２つを紹介します．

## テストケース内で制御する方法

MockするAPIが少ない場合には，こちらの手法が有効です．シンプルに実装することができ，見通しが良いです．

```js
import axios from 'axios'
jest.mock('axios')
axios.get.mockImplementation((api) => {
  switch (api) {
    case '/api/test':
      return Promise.resolve( { status: 200 } )
  }
})
```

## Manual Mocks で制御する方法

>マニュアルモックはモックデータを返す機能をスタブするために使用します。 例えば、ウェブサイトやデータベースのような外部リソースにアクセスする代わりに、偽のデータが使えるマニュアルモックが欲しいと考えるでしょう。 これによりテストは高速で信頼性の高いものになります。
>(Manual Mocksについて Jest公式ドキュメント より引用)

共通のapiを複数箇所で呼び出す場合は，こちらの手法が有効です．
全てのテストケースにおいてAxiosをMockし，ディレクトリ構造でAPIを表現することができます．
`GET api/test`をMockしたい場合は，`__mockData__/api/test.json` にファイルを配置します．

./mocks/axios.js

```js
const fs = require('fs')

const mock = jest.fn((url) => {
  return new Promise((resolve, reject) => {
    fs.readFile(`./__mockData__/${url}.json`, 'utf8', (err, data) => {
      if (err) reject(err)
      resolve(JSON.parse(data))
    })
  })
})


module.exports = {
  get: mock,
}
mockData/api/test.json

{
  "status": 200
}
```


JestでAxiosをMockしテストする

テストケース内で制御する方法

Manual Mocks で制御する方法


## はじめに

この記事では，仮想 DOM を用いて TODO リストを作成します

仮想 DOM を作成し，差分から DOM を再生成する仕組み．それを用いた TODO リストの例を紹介します

[Github リポジトリ](https://github.com/kawa1214/learn-virtual-dom)

[GithubPages](https://kawa1214.github.io/learn-virtual-dom/)

スターお願いします ⭐

## 仮想 DOM を理解する

仮想 DOM について DOM 要素を取得する

`getElementById(‘app’)`で，id プロパティが app の Element オブジェクトを取得できます．

```ts
<html>
  <head>
    <title>simple vdom framework example</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/main.js"></script>
  </body>
</html>;
const $target = document.getElementById("app");
```

### 仮想 DOM を生成する

実現したいことは，以下のような html を生成することです．

```ts
<a id="element-1">text</a>
```

`このhtmlは，tag(a), attribute({id: element-1}), children(text)の要素から成り立っています．これらの要素を含むオブジェクトを返す関数を作ります．`

```ts
interface elementAttributeInterface {
  tagName: keyof HTMLElementTagNameMap;
  attrs: elementAttrsType;
  children: elementChildrenType;
}

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

type elementChildrenType = Array<elementAttribute | string>;

const createElement = (props: elementAttribute) => {
  return {
    tagName: props.tagName,
    attrs: props.attrs,
    children: props.children,
  };
};
```

この関数を用いて，先程の HTML 要素を表します．

```ts
const element = (state: any) => createElement({
  tagName: "p",
  attrs: {
    id: "element-1",
  },
  children: [
    "text",
  ],
}
```

### 仮想 DOM をレンダリングする

まずは，レンダリングするための関数を用意する必要があります．

attribute と child をすべて追加し，生成された Element オブジェクトを返しています．

```ts
const renderElem = (vNode: elementAttribute) => {
  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) => {
  return renderElem(vNode);
};
const element = createElement({
  tagName: "p",
  attrs: {
    id: "element-1",
  },
  children: ["text"],
});
const $app = firstRender(element);
```

### 仮想 DOM をマウントする

レンダリングしたオブジェクトをマウントします．

```ts
interface mountInterface {
  $node: Element;
  $target: Element | null;
}

const mount = (props: mountInterface) => {
  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 });
```

### 差分だけ更新する

仮想 DOM の特徴でもありますが，効率的にレンダリングするために，差分だけを更新してみます．

```ts
const replaceChildren = (
  oldVTree: elementAttribute,
  newVTree: elementAttribute,
  $rootEl: Element
) => {
  // childrenの分だけattributeがあるため，１つのFor分でattributeの差分も見ます．
  $rootEl = replaceAttrs(oldVTree.attrs, newVTree.attrs, $rootEl);

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

  newVTree.children.forEach((newVChild, i) => {
    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
) => {
  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
) => {
  $rootEl = replaceChildren(oldVTree, newVTree, $rootEl);
  return $rootEl;
};

const reRender = () => {
  const vNewApp = view(state);
  if ($rootEl !== undefined) {
    const $newRootEl = diff(vApp, vNewApp, $rootEl);
    $rootEl = $newRootEl;
  }
  vApp = vNewApp;
};
```

## TODO リストを作ろう

### TODO リストの動作 GIF

![vdom-diff](/public/md/posts/learn-virtual-dom/vdom-diff.gif)

### ソースコード

```ts
const view = (state: any) =>
  createElement({
    tagName: "div",
    attrs: { id: "app" },
    children: [
      createElement({
        tagName: "input",
        attrs: {
          type: "text",
          value: `${state.todoInput}`,
          oninput: (event: Event) => {
            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: () => {
            setState({ actionType: "addTodo", state: state.todoInput });
          },
        },
        children: [],
      }),
      ...todosMap(state.todos),
    ],
  });

const todosMap = (todos: Array<String>) => {
  return todos.map((todo, index) => {
    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) => {
  switch (actionState.actionType) {
    case "todoInputTextChange":
      state.todoInput = actionState.state;
      reRender();
      break;
    case "addTodo":
      state.todos.push(actionState.state);
      reRender();
      break;
  }
};

const reRender = () => {
  const vNewApp = view(state);
  if ($rootEl !== undefined) {
    const $newRootEl = diff(vApp, vNewApp, $rootEl);
    $rootEl = $newRootEl;
  }
  vApp = vNewApp;
};
```
