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

![result-gif](/public/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/posts/flutter-3d-gyro/apple_gyro.png)

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

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

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

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

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

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

### 定数について

```
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 について

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

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

### _listenGyroscopeEvent について

```
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 で度数法に変換しています．

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

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

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

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

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

```
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`の倍率で移動します．

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

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

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

```
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/posts/dart-bigquery/service-account-json-1.png)

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

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

.env

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

DockerFile

```
# 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

```
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を定義します．

```
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; で呼び出すことができます．

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

## BigQueryをDartから呼ぶ

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

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

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

```
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秒なので，使用ケースに合わせて適切な値に設定します．

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

```
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の場合
でエラーハンドリングをしています．

```
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を実際に叩く

```
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にします．

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

flutter:
  generate: true
```

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

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

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

intl_ja.arb

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

intl_en.arb

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

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

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


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

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

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


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

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

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

```
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/posts/flutter-l10n-google-app-script/result.png)

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

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

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

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

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

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

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

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

```
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/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/posts/illust-landscape/landscape.jpeg)

## 参考動画

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

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

## 学んだこと

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


風景のイラスト


2020年を振り返ろうと思います．

コロナがあったりしましたが，個人的にはなんだかんだ良い１年を過ごせた気がします．

どこかに残さないと，基本忘れちゃうなーと思ったのが動機で，ブログにするのは初めてです．

## ざっくりと振り返り

### 1月

WEB開発の仕事がしたいなーと思い，年末くらいから勉強をはじめました．

バックエンドはMongoDB，Nodejsとかで遊んだりしてました．

フロントエンドは何をやればいいか分からず，とりあえずVue，React，Angularをさくっと触って，一番気持ちよかったReactで遊んでました．

あとは，Fullstackopenっていう海外の大学のプロジェクトが公開されていて，それで認証周りとかも勉強した気がします．講義と課題が合わさっていて良い教材でした．しかも無料！

### 2,3月

就活をしてました．シンプルなポートフォリオを作っていくつか応募しました．

昨年の教訓（いきなり行動して失敗した）から，とりあえず経験しないと分からない．ということがあり，とある会社でソフトウェアエンジニアとしてアルバイトをさせていただくことになりました（とてもありがたい）

### 4~6月

Vue，Laravelのアプリケーションの保守をしました．

SQL難しいなーって気持ちでした．

毎日勉強させてもらって，刺激があり楽しかったです．なるほどーって気持ちに毎日なってた気がします．

あと，WEB開発いいね！って気持ちを決めた時期かも？覚えてないけど．．．

### 7~12月

Flutterの新規事業の開発をしました．エンジニアリング以外でも色々学びがありました．

こう書くべきだったなーって後悔が結構ありました(書いた直後は良い実装が出来た気がしてる．．．)

### 1月

少しだけ書きます．卒論終わりが見えました．

幸せです．

## 総括

昨年は，機械学習やKaggleで遊んでいて，楽しくはありながらも迷走していた気もします．．．

今年は目的をもって，遊んでいきたいかもー

### 今年したこと

- Go インタプリタ(途中)
- Nextjs
- Flutter
- Laravel
- Vue
- 仮想DOMいじり

### 来年したいこと

- Go インタプリタ(終わらせる)
- ３ヶ月毎にアプリリリースしたい
- graphql
- flutter pub(2つくらいあればいいなーってのがある)
- 新社会人なので頑張らなきゃー
- nextjs (なにか必要なものがあったらパッケージ作ってリリースしたい)
- Blitz.js
- 技術ブログを書くー（月1は書きたい）

そういえば，ブログにちょくちょくアクセスがあって幸せです．見てくれて感謝です．

2020年を振り返る

ざっくりと振り返り

1月

2,3月

4~6月

7~12月

総括

今年したこと

来年したいこと


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

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

![toc-result](/public/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`

```
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`


```
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`

```
/* 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)


## コードについて

```
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が少ない場合には，こちらの手法が有効です．シンプルに実装することができ，見通しが良いです．

```
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

```
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/virtual-dom-simple-framework)

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

スターお願いします⭐

## 仮想DOMを理解する

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

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

```
<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を生成することです．

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

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

```
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要素を表します．

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

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

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

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

```
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をマウントする

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

```
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の特徴でもありますが，効率的にレンダリングするために，差分だけを更新してみます．

```
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/posts/learn-virtual-dom/vdom-diff.gif)

### ソースコード
```
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
}
```