## 目次
- [目次](#目次)
- [結論](#結論)
- [対象](#対象)
- [背景](#背景)
- [試したこと　](#試したこと)
 - [1. tflite + tensorflow](#1-tflite--tensorflow)
 - [2. tflite\_flutter + tensorflow](#2-tflite_flutter--tensorflow)
 - [3. tflite\_flutter + Yolo](#3-tflite_flutter--yolo)
 - [4. pytorch\_mobile + Yolo](#4-pytorch_mobile--yolo)
- [感想](#感想)

## 結論
- Yolov8のModelをFlutter側で使う事はできない。 （できてもやらない方がいい）

## 対象
- [tflite](https://pub.dev/packages/tflite)を利用している
- [tflite_flutter](https://pub.dev/packages/tflite_flutter)を利用している
- [pytorch_mobile](https://pub.dev/packages/pytorch_mobile)を利用している

## 背景
麻雀の手牌をスマホで画像を取ることで牌を読み取ってくれるアプリを実装することになりました。
!["image"](https://tspace-prod.s3.amazonaws.com/articles/d7abefacaab896414f978332c73429bd.jpg)

## 試したこと　

1. [tflite](https://pub.dev/packages/tflite) + tensorflow
2. [tflite_flutter](https://pub.dev/packages/tflite_flutter) + tensorflow
3. [tflite_flutter](https://pub.dev/packages/tflite_flutter) + Yolo
4. [pytorch_mobile](https://pub.dev/packages/pytorch_mobile) + Yolo


### 1. [tflite](https://pub.dev/packages/tflite) + tensorflow

tfliteとTensorflowの組み合わせになります。
- 結論：動作しない。
 - 2年間サポートされていない。
!["image"](/assets/articles/flutter-yolo-error/1.png)

### 2. [tflite_flutter](https://pub.dev/packages/tflite_flutter) + tensorflow
tflite_flutterとTensorflowの組み合わせになります。

- 結論：牌が一つであれば動作する。
 - 複数個でも画像分類ができそうだが、機械学習の深い知識が必要になる。

以下のログ画像では`JIHAI_KAZEHAI_TON`が39%の確率というログを返却してくれています。
!["image"](/assets/articles/flutter-yolo-error/2.png)

### 3. [tflite_flutter](https://pub.dev/packages/tflite_flutter) + Yolo
tflite_flutterとYoloの組み合わせになります。

- 結論：動作しない
 - tflite_flutterがYolo(.pb)のモデルに対応していない !["image"](/assets/articles/flutter-yolo-error/5.png)
- 原因：41のラベルの数を設定しているがYoloモデルでは異なる数字を変えてしまう
 - デバック結果の比較
 - Tensorflowのモデルの場合：`shape[1]`が41で正しい !["image"](/assets/articles/flutter-yolo-error/3.png)
 - Yoloのモデルの場合：`shape[1]`が25200で不正 !["image"](/assets/articles/flutter-yolo-error/4.png)


### 4. [pytorch_mobile](https://pub.dev/packages/pytorch_mobile) + Yolo
pytorch_mobileとYoloの組み合わせになります。

- 結論：動作しない
 - Androidの画像分類は可能だが、IOSでErrorとなる。


## 感想
API通信が発生するのでMobile側で動作させたかったのですが最終的にPythonサーバーをVPSで動かすこととなりました。

今回の学習したことをまとめました。
- Flutter系のパッケージは最終更新日を確認する。月単位で保守されてないだけで動作しないことがある。
- Pytorch系とTensorflow系のモデルは互換性があまりよくない。
- 最新の機械学習系ライブラリを使いたいならPython一択。
- Androidは動いてもIOSは動かない事が多い。
- Tensorflowの画像分類モデルでは精度が低くYoloの画像分類モデルを使用した方がいい。
- 色々考慮するとFlutter側でモデルを動作させない方がいい。

これで、以上になります！
最後までご覧いただきありがとうございます。

FlutterでYolo（Pytorch）を動かすのは難しい

## 対象
- Github ActionsでSupabaseにfunctionを自動でデプロイしたい。

https://youtu.be/l2KlzGrhB6w

## 目次
- [対象](#対象)
- [目次](#目次)
- [前提](#前提)
- [実践](#実践)
 - [プロジェクトIDの取得](#プロジェクトidの取得)
 - [アクセストークンの作成](#アクセストークンの作成)
 - [Githubの環境変数を設定](#githubの環境変数を設定)
 - [workflowファイルの作成](#workflowファイルの作成)
 - [デプロイ確認](#デプロイ確認)
- [できなかったこと](#できなかったこと)
 - [--import-mapを指定しても、相対パスの関係が解決できない。](#--import-mapを指定しても相対パスの関係が解決できない)
- [参考](#参考)


## 前提
- supabase cli(v1.41.4)がインストールされている
- supabaseのプロジェクトを作成している

## 実践

Github ActionsからSupabaseにデプロイするためには、プロジェクトIDとアクセストークンが必要になります。

### プロジェクトIDの取得
1. https://app.supabase.com/project/[プロジェクトID]/settings/general に遷移してください。
2. `Reference ID`をコピーしましょう。 !["image"](/assets/articles/supabase-function-deploy/2.png)


### アクセストークンの作成
1. アクセストークンはSupabaseアカウント単位で作成します。https://app.supabase.com/account/tokens に遷移してください。
2. `Generate new token`の緑のボタンをクリック。 !["image"](/assets/articles/supabase-function-deploy/7.png)
3. トークン名(例：`og-image`)を入力して`Generate token`の緑のボタンをクリック。 !["image"](/assets/articles/supabase-function-deploy/5.png)
4. Tokenが作成されるのでCopyしておいてください。 !["image"](/assets/articles/supabase-function-deploy/6.png)

### Githubの環境変数を設定
1. https://github.com/damono999/[リポジトリ名前]/settings/secrets/actions に遷移。
2. `SUPABASE_ACCESS_TOKEN`と`SUPABASE_PROJECT_ID`という名前で環境変数を定義しましょう。 !["image"](/assets/articles/supabase-function-deploy/3.png)
3. 画像のように二つの環境変数が定義されていればOKです。 !["image"](/assets/articles/supabase-function-deploy/1.png)

### workflowファイルの作成
Github Actionsを動作させるためには`.github/workflows/`配下にファイルを作成する必要があります。
1. `.github/workflows/deploy.yml`を作成してください。

```shell
touch .github/workflows/deploy.yml
```

2. workflowのコード

```yaml
name: Deploy Supabase Functions

on:
 push:
 branches:
 - 'feature/*'
 paths:
 - 'supabase/functions/[functions name]/index.ts'
 workflow_dispatch:

jobs:
 deploy:
 runs-on: ubuntu-latest

 env:
 SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
 PROJECT_ID: ${{ secrets.SUPABASE_PROJECT_ID }}

 steps:
 - uses: actions/checkout@v3

 - uses: supabase/setup-cli@v1.1.5
 with:
 version: 1.28.3

 - run: supabase functions deploy [functions name] --project-ref $PROJECT_ID
```

コードの説明
- ワークフローは「push」イベントに反応し、[functions name]が変更された場合にのみ実行される。
- workflow_dispatchもイベントに反応し、手動でワークフローをトリガーするためのオプションを提供する。
- `SUPABASE_ACCESS_TOKEN`と`PROJECT_ID`の2つの環境変数が設定され、GitHub Secretsから値が取得される。


::::message alert

もし、認証したくない場合は`--no-verify-jwt`付与してあげてください。
[こちら](https://damono.dev/articles/supabase-edge-functions-og-image)のog-imageを作成するための関数の場合など`--no-verify-jwt`を付与しないと認証エラーになります。

```shell
supabase functions deploy [functions name] --project-ref $PROJECT_ID --no-verify-jwt
```
::::


### デプロイ確認

1. `.github/workflows/deploy.yml`をリポジトリにpushしてください。
2. Github ActionsのCI結果を確認しましょう。 !["image"](/assets/articles/supabase-function-deploy/10.png)
3. 実行前のdeploymentsのversionを確認。 !["image"](/assets/articles/supabase-function-deploy/11.png)
4. 実行後のdeploymentsのversionがインクリメントされていれば成功です。 !["image"](/assets/articles/supabase-function-deploy/12.png)

## できなかったこと

### --import-mapを指定しても、相対パスの関係が解決できない。
1. workflow.ymlに`--import-map`オプションを追加。

```sh
supabase functions deploy calculator --project-ref $PROJECT_ID --import-map $DENO_IMPORT_MAP
```

2. Github Actionsのログ

```log
error: Uncaught (in promise) Error: Relative import path "server" not prefixed with / or ./ or ../ and not in import map from "file:///supabase/functions/[functions name]/index.ts"
 const ret = new Error(getStringFromWasm0(arg0, arg1));
 ^
 at __wbg_new_8d2af00bc1e329ee (https://deno.land/x/eszip@v0.30.0/eszip_wasm.generated.js:312:19)
 at <anonymous> (https://deno.land/x/eszip@v0.30.0/eszip_wasm_bg.wasm:1:79439)
 at <anonymous> (https://deno.land/x/eszip@v0.30.0/eszip_wasm_bg.wasm:1:1388039)
 at <anonymous> (https://deno.land/x/eszip@v0.30.0/eszip_wasm_bg.wasm:1:1862894)
 at __wbg_adapter_18 (https://deno.land/x/eszip@v0.30.0/eszip_wasm.generated.js:146:6)
 at real (https://deno.land/x/eszip@v0.30.0/eszip_wasm.generated.js:130:14)

Try rerunning the command with --debug to troubleshoot the error.
Error: Process completed with exit code 1.
```


3. 解決方法

import_map.jsonを利用せずに直接パスを指定することにしました。

```diff ts
- import { serve } from "server";
+ import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
```

```diff json:supabase/functions/import_map.json
- {
- "imports": {
- "server": "https://deno.land/std@0.168.0/http/server.ts",
- }
- }
```


これで、以上になります！
最後までご覧いただきありがとうございます。


## 参考
- [公式Githubコード](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/github-action-deploy)
- [Supabaseのドキュメント](https://supabase.com/docs/guides/functions/examples/github-actions)

Github ActionsでSupabase Edge Functionをdeployする

## 対象
- リリースモードでflutterを起動時に`type 'StackParentData' is not a subtype of type 'FlexParentData' in type cast`というエラーが発生する。
- Stackウィジット内でExpandedを使っていて解決方法がみつからない

## 目次
- [対象](#対象)
- [目次](#目次)
- [前提](#前提)
- [結論](#結論)
- [説明](#説明)


## 前提
- Flutterの環境が動作可能

## 結論
Stack内で`Expanded`ではなく`Positioned`を使う。

```diff dart
body: Stack(
 fit: StackFit.expand,
 children: <Widget>[
+ Positioned(
- Expanded(
 child: Center(
 child: Container(
```

## 説明

`type 'StackParentData' is not a subtype of type 'FlexParentData' in type cast`のエラーは、Flutterのレイアウトシステムで使用される異なるレイアウトクラス間での型の不一致によって引き起こされます。

よくある原因は、レイアウトに使用されるウィジェットの親子関係に問題があることです。例えば、Stack内にFlexが含まれている場合、レイアウトシステムはStack用のStackParentDataクラスを使用する必要がありますが、Flex用のFlexParentDataクラスが使用されてしまうことがあります。この場合、エラーが発生します。

この問題を解決するには、レイアウトシステムで使用されるすべてのレイアウトクラスに適切な親子関係があることを確認する必要があります。例えば、Stack内にはPositionedやAlignなどのStack用のレイアウトクラスを使用し、Flex内にはExpandedやFlexibleなどのFlex用のレイアウトクラスを使用することができます。

また、このエラーを引き起こす可能性があるウィジェットの親子関係を持つコードを見つけた場合は、親子関係を修正することで問題を解決できます。それでも解決できない場合は、詳細なログ情報を確認して、問題の原因を特定する必要があります。


:::details エラーログ
```log
I/flutter (24631): type 'StackParentData' is not a subtype of type 'FlexParentData' in type cast
I/flutter (24631): #0 Flexible.applyParentData (package:flutter/src/widgets/basic.dart:5089)
I/flutter (24631): #1 RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:6138)
I/flutter (24631): #2 RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:6159)
I/flutter (24631): #3 RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5828)
I/flutter (24631): #4 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6376)
I/flutter (24631): #5 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #6 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #7 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #8 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #9 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #10 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #11 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #12 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6512)
I/flutter (24631): #13 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6524)
I/flutter (24631): #14 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #15 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #16 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #17 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #18 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #19 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #20 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #21 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #22 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #23 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #24 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #25 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #26 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #27 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #28 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #29 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #30 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #31 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #32 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #33 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #34 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #35 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #36 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #37 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #38 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #39 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6512)
I/flutter (24631): #40 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6524)
I/flutter (24631): #41 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #42 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #43 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #44 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #45 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #46 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #47 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #48 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #49 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #50 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5133)
I/flutter (24631): #51 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #52 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #53 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:5124)
I/flutter (24631): #54 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #55 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #56 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #57 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #58 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5133)
I/flutter (24631): #59 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #60 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #61 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:5124)
I/flutter (24631): #62 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #63 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #64 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #65 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #66 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #67 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #68 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #69 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #70 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #71 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #72 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5133)
I/flutter (24631): #73 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #74 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #75 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:5124)
I/flutter (24631): #76 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #77 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #78 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #79 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6377)
I/flutter (24631): #80 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #81 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #82 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #83 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #84 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #85 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #86 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #87 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #88 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6377)
I/flutter (24631): #89 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #90 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #91 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): #92 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5133)
I/flutter (24631): #93 Element.rebuild (package:flutter/src/widgets/framework.dart:4690)
I/flutter (24631): #94 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4950)
I/flutter (24631): #95 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:5124)
I/flutter (24631): #96 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4944)
I/flutter (24631): #97 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3953)
I/flutter (24631): #98 Element.updateChild (package:flutter/src/widgets/framework.dart:3682)
I/flutter (24631): #99 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993)
I/flutter (24631): Another exception was thrown: Instance of 'DiagnosticsProperty<void>'
```
:::



これで、以上になります！
最後までご覧いただきありがとうございます。

【Flutter】Stack内でExpandedは使うべきでない

## 対象
- AWS Glueで共通のPython Moduleを利用したい
- AWS GlueでPythonのPackageがうまく利用できない
- AWSサービスを利用してPackageのModule化を自動化したい

## 目次
- [対象](#対象)
- [目次](#目次)
- [前提](#前提)
- [実践](#実践)
 - [CodeCommitでリポジトリの作成](#codecommitでリポジトリの作成)
 - [ローカルでPython Moduleのコードの準備](#ローカルでpython-moduleのコードの準備)
 - [出力先のS3の作成](#出力先のs3の作成)
 - [ビルドプロジェクトの作成](#ビルドプロジェクトの作成)
 - [CodePipelineの用意](#codepipelineの用意)
 - [パイプラインの実行と確認](#パイプラインの実行と確認)


## 前提
- 既にAWSアカウントを作成している
- Git バージョン 1.7.9以降をサポートしている
- 利用するAWSコンポーネント
 - CodeCommit
 - CodeBuild
 - CodePipeline
 - IAM
- 既に作業用のIAM Userは作成されている
- Git Pullなどのコマンドが問題なく使用できる

## 実践

### CodeCommitでリポジトリの作成

1. [CodeCommit](https://ap-northeast-1.console.aws.amazon.com/codesuite/codecommit/repositories?region=ap-northeast-1)のダッシュボードに遷移
2. リポジトリを作成をクリック !["image"](/assets/articles/s3-put-python-module/a.png)
3. 任意のリポジトリの名前を入力してリポジトリを作成。 今回は`python-module`という名前で作成します。 !["image"](/assets/articles/s3-put-python-module/b.png)
4. リポジトリのHTTPSのURLをコピーして、ローカルにCloneする。 筆者の場合は`HTTPS(GRC)`を利用しています。 !["image"](/assets/articles/s3-put-python-module/c.png)
5. 任意の場所で`git clone codecommit::ap-northeast-1://python-module`を実行して、リポジトリをクローンしてあげましょう。



### ローカルでPython Moduleのコードの準備

1. 作業ディレクトリに移動

```shell
cd python-module
```

2. ファイルの作成

- `__init__.py`はPythonインタプリタに、このディレクトリがパッケージであることを伝える役割がああります。
- `calcu.py`は簡単な計算関数が定義されています。
- `hello_world.py`はconsoleにhello worldをprintする関数が定義されています。

```shell
touch __init__.py
touch calcu.py
touch hello_world.py
```

3. コードの定義

それぞれファイルのコードは以下のようになります。
ファイルにそれぞれ貼り付けてください。

```py:__init__.py
from .calcu import sum
from .hello_world import hello_world

__all__ = ['sum', 'hello_world']
```

```py:calcu.py
def sum(x, y):
 return x + y
```

```py:hello_world.py
def hello_world(name):
 return 'Hello World, ' + str(name)
```

4. コードをコミット
```shell
git commit -m "first commit"
```

5. コードをプッシュ
```shell
git push
```


画像のようにプッシュしたコードが画面で確認できたら成功です。
!["image"](/assets/articles/s3-put-python-module/d.png)

### 出力先のS3の作成

1. [S3](https://s3.console.aws.amazon.com/s3/get-started?region=ap-northeast-1)に遷移
2. バケットを作成をクリック !["image"](/assets/articles/s3-put-python-module/j.png)
3. バケット名に`python-module-bucket`と入力してバケットを作成をクリック !["image"](/assets/articles/s3-put-python-module/l.png)
4. バケットが作成されていることの確認 !["image"](/assets/articles/s3-put-python-module/k.png)

### ビルドプロジェクトの作成

1. [Code Build](https://ap-northeast-1.console.aws.amazon.com/codesuite/codebuild/start?region=ap-northeast-1)に遷移
2. プロジェクトの作成をクリック !["image"](/assets/articles/s3-put-python-module/i.png)
3. Code Buildの設定を入力してください
- プロジェクト名：python-module-build
- オペレーティングシステム：Amazon Linux 2
- ランタイム：Standard
- イメージ：任意
- イメージのバージョン：任意
- ビルドコマンド：以下のコード
```yaml
version: 0.2

phases:
 build:
 commands:
 - zip -r python-module.zip ./
 - aws s3 cp python-module.zip s3://python-module-bucket/python-module.zip --metadata Content-Type=application/zip --debug
```
!["image"](/assets/articles/s3-put-python-module/m.png)
4. ビルドプロジェクトが作成されたことの確認 !["image"](/assets/articles/s3-put-python-module/n.png)



### CodePipelineの用意

1. パイプラインの作成をクリック !["image"](/assets/articles/s3-put-python-module/e.png)
2. パイプライン名は`python-module-pipeline`と入力しています。パイプライン名を入力したら次にをクリック。 !["image"](/assets/articles/s3-put-python-module/f.png)
3. ソースステージを入力します。 !["image"](/assets/articles/s3-put-python-module/g.png)
 - ソースプロバイダー: AWS CodeCommit
 - リポジトリ名：python-module
 - ブランチ名：master
4. ビルドステージを入力します。 !["image"](/assets/articles/s3-put-python-module/h.png)
 - プロパイダー：AWS CodeBuild
 - プロジェクト名：先ほど作成したビルドプロジェクトを指定（python-module-build）
5. デプロイステージを追加するは`導入段階をスキップ`をクリック !["image"](/assets/articles/s3-put-python-module/p.png)
6. レビュー画面の`パイプラインを作成する`をクリック !["image"](/assets/articles/s3-put-python-module/r.png)
7. 作成されたことの確認

::::message alert
1. 初回実行時はCodeCommitへの権限がなく、Errorとなる可能性がありますが2度目実行すると解決されます。
2. パイプラインを作成時点で自動的に起動すると思いますが、この段階ではビルドプロジェクトでS3にアクセスする権限を与えていないのでErrorになります。
::::

8. codebuild-python-modu-service-roleというロールにS3にアクセスするポリシーをアタッチするためにIAM画面に遷移してください
 1. AmazonS3FullAccessをアタッチしてください。!["image"](/assets/articles/s3-put-python-module/o.png)



### パイプラインの実行と確認
1. パイプラインの一覧画面に遷移して、`変更をリリース`をクリック !["image"](/assets/articles/s3-put-python-module/s.png)
2. パイプラインが成功しているか確認 !["image"](/assets/articles/s3-put-python-module/t.png)
3. S3にZIPファイルが設置されていることの確認。画像のように`python-module.zip`が配置されていたら成功です。 !["image"](/assets/articles/s3-put-python-module/u.png)



これで、以上になります！
最後までご覧いただきありがとうございます。

Code Commitで管理しているPythonパッケージをZIP化してS3にuploadする

## 対象
- OGP画像の動的生成をしたい
- ブログを無料で運用したい
- Vercelの`@vercel/og`から脱却したい
- CloudFlareのCloud WorkerでOGP生成が難しいので、簡単にOGPを生成したい


## 目次
- [対象](#対象)
- [目次](#目次)
- [前提](#前提)
- [実装](#実装)
 - [作業フォルダーを作成](#作業フォルダーを作成)
 - [Supabaseの初期化](#supabaseの初期化)
 - [Supabase Edge FunctionsをCLIを使って生成](#supabase-edge-functionsをcliを使って生成)
 - [handler.tsxを作成](#handlertsxを作成)
 - [コードを貼り付ける](#コードを貼り付ける)
 - [SupabaseのContainerを起動](#supabaseのcontainerを起動)
 - [サーバーの起動](#サーバーの起動)
 - [ブラウザで確認](#ブラウザで確認)
 - [Supabaseにdeploy](#supabaseにdeploy)
- [最後に](#最後に)
 - [きっかけ](#きっかけ)
 - [目的](#目的)
- [参考情報](#参考情報)


## 前提
- 既にSupabaseアカウントを作成している
- 既にSupabaseプロジェクトを作成している
- Supabaseプロジェクトの`Reference ID`わかる

## 実装

基本的にはSupabaseの公式ドキュメントに記載されている[Generating OG Images](https://supabase.com/docs/guides/functions/examples/og-image)を参考に実装しました。

### 作業フォルダーを作成
```shell
mkdir og-image
cd og-image
```

### Supabaseの初期化

```shell
Supabase init
```

### Supabase Edge FunctionsをCLIを使って生成

```shell
supabase functions new og-image
```

`supabase/functions/og-image/index.ts`というファイルが生成されます。

### handler.tsxを作成

`og-image`ディレクトリに移動して、handler.tsxを作成してください。
```shell
cd supabase/functions/og-image
touch handler.tsx
```

### コードを貼り付ける

以下のコードは公式のドキュメントに貼られているコードになります。

handler.tsxは以下のようにコードを貼り付けてあげてください。
```ts:handler.tsx
import React from 'https://esm.sh/react@18.2.0'
import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.6/mod.ts'

export default function handler(req: Request) {
 return new ImageResponse(
 (
 <div
 style={{
 width: '100%',
 height: '100%',
 display: 'flex',
 alignItems: 'center',
 justifyContent: 'center',
 fontSize: 128,
 background: 'lavender',
 }}
 >
 Hello OG Image!
 </div>
 )
 )
}
```

index.tsには以下のコードを貼り付けてください。
```ts:index.ts
import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
import handler from './handler.tsx'

console.log('Hello from og-image Function!')

serve(handler)
```

### SupabaseのContainerを起動

```shell
supabase start
```
初回実行だと起動までに数分かかることもあります。

### サーバーの起動

```shell
supabase functions serve og-image --no-verify-jwt
```
以下のようなコンソールが表示されれば起動は成功です。
!["image"](/assets/articles/supabase-edge-functions-og-image/a.png)

::::message
--no-verify-jwtがないと`anon key`をAPIアクセスするたびに必要になるのでオプションとして必ず付与してあげてください。
::::

### ブラウザで確認

http://localhost:54321/functions/v1/og-image にアクセスしてみてください。

以下のような画像が生成されたら成功です。
!["image"](/assets/articles/supabase-edge-functions-og-image/b.png)

### Supabaseにdeploy

以下のコマンドを実行してSupabaseのダッシュボードでEdge Functionsを確認すると画像のように`og-image`という関数が追加されていると思います。
```shell
supabase functions deploy og-image --project-ref [SupabaseのReferenceID] --no-verify-jwt
```

!["image"](/assets/articles/supabase-edge-functions-og-image/d.png)


## 最後に

### きっかけ
仕事の関係でSupabaseのEdge Funcitonsを読むことがありました。
その時に画像の赤枠ように[Open Graph Image Generation](https://supabase.com/docs/guides/functions/examples/og-image)のExamplesがあったので実装してみることとしました。

!["image"](/assets/articles/supabase-edge-functions-og-image/c.png)


### 目的

エンジニアだものブログはVercelに当初はdeployをしていたのですが、Vercelの無料枠では広告をつけられないという制約があるためhosting先をCloudFlareに変更しました。
[@vercel/ogを使ってogp画像の表示](https://damono.dev/articles/ogp-nextjs)の記事で手順を書いているのですがNextjsのApi Routeという機能を使ってserverを立ち上げなければならずCloudFlare Pageではこれがうまく動作しませんでした。

そこで、今回Supabase Edge Functionsを使って、jsxで簡潔に実装できそうだったので実装してみることにしました。

| | CloudFlare + Supabase | Vercel |
| -------------------- | --------------------- | ------ |
| 無料プランの広告掲載 | ⭕️ | ❌ |
| OGP画像生成の難易度 | 難しい→易しい | 易しい |



最後までご覧いただきありがとうございます。


## 参考情報

- https://supabase.com/docs/guides/functions/examples/og-image
- https://github.com/vercel/satori
- https://github.com/ascorbic/og-edge
- https://rakko.tools/tools/9/

Supabase Edge Functionsを使用したOGP画像の生成

# 問題

[zenn-markdown-html](https://github.com/zenn-dev/zenn-editor)を使用していると`※1画像`のようにaタグが横幅をはみ出してしまうデザイン崩れが発生しました。
!["image"](/assets/articles/zenn-markdown-wrap-a-tag/a.png)
*※1画像*

本来、`https://xxxx....`から始まるリンクをmarkdown上に書くとcardに変換されてURLではなく以下の`※2画像`のようにカードが表示されます。
!["image"](/assets/articles/zenn-markdown-wrap-a-tag/c.png)
*※2画像*

しかし、埋め込みスクリプトが動作しない→カードが作成されない→長いURLが表示される→スマホのデザインが崩れるという事象が発生しているのでこの対応ができたので記載します。


::::message
[こちら](https://github.com/zenn-dev/zenn-editor/issues/293#issuecomment-1120523049)の記事にあるように`zenn-markdown-htmlのv0.1.106`を使うように書かれているのですが埋め込み系の動作がうまく行かない事象が時々発生してしまいます。
::::


# 解決

!["image"](/assets/articles/zenn-markdown-wrap-a-tag/b.png)
*※3画像*

結論としては、`※3画像`のようにaタグに折り返し用のCSSを設定してあげると上手くaタグが折り返されるようになりました。

`※3画像`では`word-wrap`を指定していますが、[こちら](https://web.hazu.jp/overflow-wrap-word-break/)の記事によれば`overflow-wrap`を使用するのがよさそうです。

さらに言うなら、単語や特殊文字でのタイミングに関係なく折り返したい場合は`word-break: break-all`を指定してあげると横幅ギリギリで折り返すようになるので統一性があって綺麗になります。
折り返し用のCSSをどちらにするかはコンテンツに合わせると良さそうです。


筆者の場合、tailwindcssを利用しているので以下のようになりました。
```html:tailwindcssの場合
<div
 className='znc break-all'
 dangerouslySetInnerHTML={{
 __html: content,
 }}
/>
```

zenn-markdown-htmlでaタグが折り返されない

# 背景
Flutter側で画像分類のmodelを実行したかったのでmodelファイルなどをアプリにバンドルして実行できないか調査したところ[tflite_flutter](https://pub.dev/packages/tflite_flutter)というpackageがあったので導入することにしました。

::::message
[tflite](https://pub.dev/packages/tflite)という似たpackageもあるのですが、`Your Flutter application is created using an older version of the Android embedding.`というErrorが発生しGithubのIssueも確認したところ現在未対応の状態だったので`tflite_flutter`を使用することにしました。
::::

# tflite_flutterの導入

### インストールコマンドの実行
```shell
flutter pub add tflite_flutter
```

### Androidの設定

1. tflite_flutterの[androidの設定](https://pub.dev/packages/tflite_flutter#android)部分に遷移します。
2. [install.sh](https://github.com/am15h/tflite_flutter_plugin/blob/master/install.sh)というshellファイルをプロジェクトのルートにダウンロードしてください。
3. `sh install.sh`を実行すると、`android/app/src/main/jniLibs`配下にバイナリファイルが4つinstallされます。
```shell
android/app/src/main/jniLibs/x86_64/libtensorflowlite_c.so
android/app/src/main/jniLibs/x86/libtensorflowlite_c.so
android/app/src/main/jniLibs/armeabi-v7a/libtensorflowlite_c.so
android/app/src/main/jniLibs/arm64-v8a/libtensorflowlite_c.so
```
4. GPUを使いたい場合は、`sh install.sh -d`も実行してください。

Androidの設定は完了です。

### IOSの設定
1. [TensorFlowLiteC.framework](https://github.com/am15h/tflite_flutter_plugin/releases/download/v0.5.0/TensorFlowLiteC.framework.zip)というZipフォルダをダウンロードします。
```TensorFlowLiteC.framework
ios/.symlinks/plugins/tflite_flutter/ios/TensorFlowLiteC.framework/Headers
ios/.symlinks/plugins/tflite_flutter/ios/TensorFlowLiteC.framework/Modules
ios/.symlinks/plugins/tflite_flutter/ios/TensorFlowLiteC.framework/TensorFlowLiteC
```
2. `ios/.symlinks/plugins/tflite_flutter/ios`配下に解答した`TensorFlowLiteC.framework`フォルダを配置してください。

::::message alert
公式の手順の場合、`.pub-cache(~/.pub-cache/hosted/pub.dartlang.org/tflite_flutter-<plugin-version>/ios/)`フォルダーに配置するように記載されています。
筆者が確認したところこちらでは上手く動作しませんでした。代わりに、Issueで同じ事象についての解決策を書かれていたのでURLを貼っておきます。 https://github.com/am15h/tflite_flutter_plugin/issues/153#issuecomment-1126694294


ざっくり対応方法をまとめると以下の手順でIOSでも上手くビルドが通るようになりました。
1. `/YourProject/ios/TensorFlowLiteC.framework` copy into `/YourProject/ios/.symlinks/plugins/tflite_flutter/ios/`
2. `flutter clean` && `flutter pub get`
3. `arch -x86_64 pod install`

::::

3. 最後に`arm64`のPCを使用されている方は、`ios/Podfile`に`config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'i386 arm64'`を追加してください。

```diff ruby:ios/Podfile

post_install do |installer|
 installer.pods_project.targets.each do |target|
 flutter_additional_ios_build_settings(target)
+ target.build_configurations.each do |config|
+ config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'i386 arm64'
+ end
 end
end
```

### tflite_flutter_helperのインストール

画像分類などをしたい場合はtflite_flutter_helperのpackageを追加してください。
```shell
flutter pub add tflite_flutter_helper
```

https://pub.dev/packages/tflite_flutter_helper

# 実装

基本的にはGithubリポジトリの[サンプルコード](https://github.com/am15h/tflite_flutter_helper/tree/master/example/image_classification)を参考に実装しました。

1. [classifier.dart](https://github.com/am15h/tflite_flutter_helper/blob/master/example/image_classification/lib/classifier.dart)をダウンロードします。
2. [classifier_quant.dart](https://github.com/am15h/tflite_flutter_helper/blob/master/example/image_classification/lib/classifier_quant.dart)と同じように`classifier.dart`を継承した推論用クラスを宣言します。
3. modelNameを変更します。

```diff dart:classifier_quant.dart
import 'package:imageclassification/classifier.dart';
import 'package:tflite_flutter_helper/tflite_flutter_helper.dart';

class ClassifierQuant extends Classifier {
 ClassifierQuant({int numThreads: 1}) : super(numThreads: numThreads);

 @override
+ String get modelName => '[modelName].tflite'; // ←ここを任意のmodelファイル名に変更
- String get modelName => 'model/individual_tile_model.tflite';

 @override
 NormalizeOp get preProcessNormalizeOp => NormalizeOp(0, 1);

 @override
 NormalizeOp get postProcessNormalizeOp => NormalizeOp(0, 255);
}
```

4. labelファイルの呼び込み先も任意の場所に追加

```diff dart:classifier.dart
abstract class Classifier {
 late Interpreter interpreter;
 late InterpreterOptions _interpreterOptions;

 var logger = Logger();

 late List<int> _inputShape;
 late List<int> _outputShape;

 late TensorImage _inputImage;
 late TensorBuffer _outputBuffer;

 late TfLiteType _inputType;
 late TfLiteType _outputType;

+ final String _labelsFileName = 'assets/[label name].txt'; // ←labelファイルの追加
- final String _labelsFileName = 'assets/labels.txt';

 final int _labelsLength = 1001;

 late dynamic _probabilityProcessor;

 late List<String> labels;

 String get modelName;

 NormalizeOp get preProcessNormalizeOp;
 NormalizeOp get postProcessNormalizeOp;
 ...
}
```
5. pubspec.yamlファイルにassetsを追加
```diff yaml:pubspec.yaml
assets:
+ - assets/
```

6. 実際にmodelで推論するコード

今回、筆者の場合は[camera](https://pub.dev/packages/camera)というpackageを使用してカメラで取得した画像使っていますがお好みのライブラリで対応してください。
```dart
// 画像の取得
final XFile xFile = await cameraController.takePicture();
// 画像をバイトに変換
final bytes = await File(xFile.path).readAsBytes();
// Image型に変換
final img.Image? image = img.decodeImage(bytes);
if (image != null) {
 print("実行");
 // 推論
 Category category = classifier.predict(image);
 // 推論した結果をprint
 print(category.label);
 print("終了");
}
```

7. 最後に実装が終わったら`flutter run`でiosまたはandroidで実行をして見てください。
画像のように`debug console`に出力されていたら成功です。
!["image"](/assets/articles/use-tflite-flutter/a.png)

tflite_flutterのpackageの導入方法

# OGPとは
下記に貼ってある画像のようにTwitter上でサイトの宣伝をしてくれる画像になります。
!["image"](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/69a6fd97-8580-4da8-8782-a527ada90815.png)

通常、画像は静的なファイルをサーバーにdeployをしておいてmetaタグで指定されれば画像がSNS上で表示されることになります。

しかし、ブログによっては記事ごとにOGP画像を生成したい場合はあり、そのようなサイトでは静的ファイルでは対応できなくなります。

そこで、vercelではOGP画像を動的に生成してくれる`@vercel/og`というpackgeが提供されています。

こちらのpackageを使用すれば画像のカスタマイズも自由できendpointを一つ追加するだけOGP画像を用意時間を短縮できます。

# packageの追加

まずは、packageの追加を行います。

```shell
npm i @vercel/og

yarn add @vercel/og
```

# opg画像生成apiの作成

endpointを追加します。
作成するディレクトリは`pages/api/og.tsx`になります。
拡張子が`ts`ではなく`tsx`になっているので注意してください。

```tsx:pages/api/og.tsx

import { ImageResponse } from '@vercel/og'

export const config = {
 runtime: 'experimental-edge',
}

export default function handler() {
 return new ImageResponse(
 (
 <div
 style={{
 display: 'flex',
 justifyContent: 'center',
 alignItems: 'center',
 width: '100%',
 height: '100%',
 backgroundColor: 'white',
 fontSize: '128px',
 }}
 >
 Hello world!
 </div>
 )
 )
}
```

記述が完了したら、[http://localhost:3000/api/og](http://localhost:3000/api/og) にアクセスしてみてください。
以下のように`Hello world!`の画像が表示されれば成功しています。

!["image"](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/cbae85d0-cd25-4ada-8801-1c7a3d71bc2a.png)

# header meta情報を追加

`meta`タグに先ほど作成したog画像の作成用endpointを指定してあげましょう。

```tsx
<Head>
 <meta
 key="og:image"
 property="og:image"
 content="http://localhost:3000/api/og"
 />
</Head>
```

# OGP画像の確認
`vercel`にdeploy後、発行されたPreviewURLなどをコピーしてください。

確認する方法としては以下のようなサイトがあります。
1. Twitter公式
https://cards-dev.twitter.com/validator
画像のように表示されるかと思います。
2022年12月現在、Logなどは表示されますがCardのPreviewの取得ができない状態となっています。
!["image"](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/057ffdab-1d15-4664-92f6-90b431c8f804.png)

2. Web ToolBox
https://web-toolbox.dev/tools/ogp-checker
URLの入力後、`OGPチェック`を入力するとPCサイズモバイルサイズなどの様々なOGP画像のPreviewが確認できます。
また、使用されているmeta情報なども確認できるのでこちらを参考にmeta情報の調整もされるといいかと思います。

!["image"](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/ec7ba300-4d6e-423d-b006-b48c080186b3.png)

3. ラッコツールズ
こちらは`はてなブックマーク`などの確認もできるので日本のSNS系も確認したい場合に有効かと思います。
`meta`タグなどの細かい情報は表示されないので注意。
!["image"](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/10f36262-c997-4888-9e9d-0c281ef31d2b.png)

# 処理の流れを表示

筆者自身、実装をしてTwitterなどのSNSに表示されたのはよかったのですが
正直どういった流れでOGP画像が表示されているのか分からなかったので図にまとめてみました。

::::message
あくまで、筆者の経験からの予測になるので参考程度にご覧ください。
::::

!["image"](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/2b1f7987-1feb-44d9-9d18-76459d3312da.png)

@vercel/ogを使ってogp画像の表示

# 検証環境

| 対象 | |
| ---- | ---------- |
| PC | MAC M1 PRO |
| OS | 13.2.1 |

# DockerでAWS GlurのImageのインストール

筆者の環境だとM1 macの利用しているので`tag`の部分は `glue_libs_4.0.0_image_01-arm64`を利用しています。ご自身の環境に合わせてImageを選択してください。

### glue v4

```shell
docker pull amazon/aws-glue-libs:glue_libs_4.0.0_image_01-arm64
```

::::message
glue v4だと`AWS Glue Streming Job`と`AWS Glue interactive sessions`は2022/11/28時点では対応されてないとのこと。
他にも対応していないサービスがありそうなので検証してからv4を使うようにしてください。
::::

### glue v3
```shell
docker pull amazon/aws-glue-libs:glue_libs_3.0.0_image_01-arm64
```


::::details タグを指定しない場合エラーになる現象

```log
docker pull amazon/aws-glue-libs 12:33:12

Using default tag: latest
Error response from daemon: manifest for amazon/aws-glue-libs:latest not found: manifest unknown: manifest unknown
```

上記のコマンドだとエラーになりますが、これは`latest`というTagは存在しないため発生しています。
そのため、https://hub.docker.com/r/amazon/aws-glue-libs/tags を参考に存在しているTag名を指定して`docker pull`を実行するようにしましょう。


https://genchan.net/it/virtualization/docker/2553/
::::

# AWS Glurのcontainerの作成

`<username>`はご自身のPCに合わせて変更をしてください。
`windows`ユーザーの場合は`/c`を付与してあげてください。
使用するImageはGlue v3, Glue v4使いたいものに変更してあげてください。

## jupyter notebook

```shell
docker run -itd -p 8888:8888 -p 4040:4040 -v /Users/<username>/docker-share:/home/glue_user/share -e DISABLE_SSL="true" --name glue-j amazon/aws-glue-libs:glue_libs_4.0.0_image_01-arm64 /home/glue_user/jupyter/jupyter_start.sh
```

## vscode

```shell
docker run -itd -v /Users/<username>/docker-share:/home/glue_user/share -e DISABLE_SSL="true" --name glue-vs amazon/aws-glue-libs:glue_libs_4.0.0_image_01-arm64
```

# dockerコマンドの操作

## containerの起動

```
docker start glue-j
```

## containerの停止

```
docker stop glue-j
```

## containerの削除

```
docker rm glue-j
```

## containerにアクセス

```
docker exec -it glue-j bash
```


# Jupyter Notebookの起動確認

http://127.0.0.1:8888/lab にアクセスして

!["image"](/assets/articles/glue-local/a.png)


:::: message
http://127.0.0.1:8888/lab にアクセスして404が返却される場合は
以下のコマンドでjupyterを起動
```shell
/home/glue_user/jupyter/jupyter_start.sh
```
::::


# AWS KEYの作成
いかのURLからアクセスキーを作成します。

https://us-east-1.console.aws.amazon.com/iamv2/home#/security_credentials/access-key-wizard

!["image"](/assets/articles/glue-local/b.png)
`その他`を選択して次へをクリックしてください

!["image"](/assets/articles/glue-local/c.png)
keyの説明が必要であれば入力してください。(必須ではありません)

!["image"](/assets/articles/glue-local/d.png)
アクセスキーが発行されますのでcsvファイルをdownloadするか、`アクセスキー`と`シークレットキー`をコピーしてメモをしておいてください。


# AWS KEY設定


```shell
[glue_user@70e71ec1ea82 workspace]$ aws configure
AWS Access Key ID [None]: [アクセスキー]
AWS Secret Access Key [None]: [シークレットキー]
Default region name [None]: ap-northeast-1
Default output format [None]: json
```

`AWS Access Key ID`：先ほどコピーしたアクセスキーを設定してください
`AWS Secret Access Key`：先ほどコピーしたシークレットキーを設定してください
`Default region name`：リージョンを入力してください
`Default output format`：データ形式を入力してください

#### 参考URL

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-quickstart.html#cli-configure-quickstart-config

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-quickstart.html#cli-configure-quickstart-creds-create

# サンプルコードの実行

```py
from pyspark import SparkContext
from awsglue.context import GlueContext

glueContext = GlueContext(SparkContext.getOrCreate())
inputDF = glueContext.create_dynamic_frame_from_options(connection_type = "s3", connection_options = {"paths": ["s3://awsglue-datasets/examples/us-legislators/all/memberships.json"]}, format = "json")
inputDF.toDF().show()
```

画像のように結果が表示されていたら成功です。
!["image"](/assets/articles/glue-local/e.png)


# 参考記事
https://dev.classmethod.jp/articles/2022-01-29-glue-local-dockerimage/

AWS Glueの環境をDockerで構築

# 概要
現場で複数のGithubアカウントを使用することになったので
簡単に切り替えられる方法をまとめてみました。

### 動作環境
OS: M1 Mac Pro ventura

# 秘密鍵・公開鍵の生成

sshするために必要な.sshディレクトリに移動します。
```shell
 ~cd ~/.ssh
```

次に秘密鍵と公開鍵のペアをコマンドで作成します。
こちらので公開鍵のGithubに登録することで安全な通信ができるようになります。
```shell:~/.ssh
ssh-keygen -t rsa
```
上記のコマンドを実行すると、3つの質問がされますが
一つ目の質問の時に既存のファイルとは異なる名前にする必要があります。
（例：id_rsa_sub ... など）
1. `Enter file in which to save the key (/Users/xxx/.ssh/id_rsa)`
2. `Enter passphrase (empty for no passphrase):`
3. `Enter same passphrase again:`


```shell:~/.ssh
$ ls
id_rsa id_rsa.pub id_sub_rsa id_sub_rsa.pub 
```

# Githubで公開鍵を設定
まずは、公開鍵を設定するためのGithubの画面に遷移します。
[https://github.com/settings/ssh](https://github.com/settings/ssh)のURL公開鍵を設定できます。

`New SSH key`というボタンをクリック
![image](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/c539b948-8beb-49b3-903e-c9f38cbe56fd.png)

keyの入力をしていきます。

![image](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/eb1520aa-ee32-4c30-9ba7-067173902a82.png)

- 「title」には分かりやすいKeyの名前を入力しましょう。
id_sub_rsa.pubという名前の公開鍵が作成されたのでこちらをtitleにしておくと分かりやすいかもしれません。
- 「Key Type」はdefaultで大丈夫です。
- 「key」はid_sub_rsa.pubの中身をcopyして貼り付けましょう。
鍵の中身のクリップボードへのコピーは

```shell:~/.ssh
# Macの場合
pbcopy < ~/.ssh/id_sub_rsa.pub
# Windowsの場合
clip < ~/.ssh/id_sub_rsa.pub
```
になります。

# configファイルに使用する秘密鍵を切り分ける。

こちらの設定をすることで`Host`名によって使用する秘密鍵を使い分けることができます。

```shell:~/.ssh
# ~/.ssh/にconfigを作成
touch config
# configを開く
vi config
```

```shell:~/.ssh/config
#メインアカウント
Host github #任意のホスト名
 HostName github.com
 IdentityFile ~/.ssh/id_rsa #メインアカウントの鍵のファイル
 User git
 Port 22
 TCPKeepAlive yes
 IdentitiesOnly yes

#サブアカウント
Host github-sub #任意のホスト名
 HostName github.com
 IdentityFile ~/.ssh/id_sub_rsa #サブアカウントの鍵のファイル
 User git
 Port 22
 TCPKeepAlive yes
 IdentitiesOnly yes
```

# GitHub との接続を確認

`ssh -T xxxxxx`と入力することで接続ができたかどうかを確認することができます。
`xxxxxx`には上の`config`ファイルに設定した`Host`名を入力してください。

```shell
# メインアカウントの接続確認
ssh -T github
Hi [UserName]! You've successfully authenticated, but GitHub does not provide shell access.
```

```shell
# サブアカウントの接続確認
ssh -T github-sub
Hi [UserName]! You've successfully authenticated, but GitHub does not provide shell access.
```

# ~/.gitconfigファイルでpathによってgithubアカウントを切り分ける
.gitconfig_subを作成、編集
```shell:~
touch ~/.gitconfig_sub
vi ~/.gitconfig_sub
```


サブアカウントの情報を記載
```shell:~/.gitconfig_sub
[user]
	name = [サブアカウント名]
	email = [サブアカウントのメールアドレス]
```
.gitconfigに設定をする
```shell:~/.gitconfig
[user]
 name = [メインアカウント名]
 email = [メインアカウントのメールアドレス]

 [includeIf ""gitdir:~/private/""]
 path = ~/.gitconfig_sub
```

::::details 注意事項
:::message
`~/private`で`git config user.name`を実行するとメインアカウントが表示されてしまいます。

```shell:~/private/
git config user.name
[メインアカウント]
```
~/private/aで確認するとディレクトリサブアカウントが表示されます。
```shell:~/private/a
git config user.name
[サブアカウント]
```
~/privateでもサブアカウントになる方法を現在調査中。
:::
::::

# 対象のrepositoryをcloneする
git cloneをしてきた時にリポジトリが見つからない場合が見つからない場合があります。

```shell:~/private
git clone xxx.git
remote: Repository not found.
```

このエラーが発生した場合はaccess tokenが必要になるので以下のURLからtokenを作成してあげましょう。
[https://github.com/settings/tokens
](https://github.com/settings/tokens)

Personal access tokensページが表示されたら、［Generate new token］ボタンをクリックします。
![image](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/cacb5e08-87ca-470d-a50c-b52e5fe69ca9.png)

repoにチェックをつけてrepository操作に関する権限を付与します
:::details イメージ
![image](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/902de217-6eca-437a-820b-0e9dcf96f4a8.png)
:::
「Generate Token」をクリックしてください。
そうすると、ghp_から始まるtokenが作成されるのでこちらをcopy。

最後に以下のように@の前に先ほどcopyしたtokenを貼り付けてcloneしてあげるとうまくいくと思います。

```shell
git clone https://ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx@${ユーザー名}/${リポジトリ名}.git
```

最後までご覧いただきありがとうございました！

# 参考にした記事
[複数のGitHubアカウントを使い分けたい時の設定方法とTips](https://zenn.dev/taichifukumoto/articles/how-to-use-multiple-github-accounts)
[GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~](https://qiita.com/shizuma/items/2b2f873a0034839e47ce)
[remote: Repository not found.となった時の対応方法](https://qiita.com/ponsuke0531/items/4fe191b7bed03342cff2)

githubのアカウントを複数個管理する方法


[こちら](https://zenn.dev/taichifukumoto/scraps/78e2f13e923b06)の記事を参考

vercel deployでErrorが発生
```log
$ next build
info  - Linting and checking validity of types...
Failed to compile.
./src/lib/gtag.ts:7:10
Type error: Property 'gtag' does not exist on type 'Window & typeof globalThis'.
   5 | export const pageview = (url: string) => {
   6 |   if (!GA_ID) return;
>  7 |   window.gtag('config', GA_ID, {
     |          ^
   8 |     page_path: url,
   9 |   });
  10 | };
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1
```

next buildすると`next-env.d.ts`がリセットされる。


[https://nextjs.org/docs/basic-features/typescript#existing-projects](https://nextjs.org/docs/basic-features/typescript#existing-projects)
の記事を参考に実装

`additional.d.ts`を追加するといいみたい
> next-env.d.ts を編集する代わりに、新しいファイルを追加することで追加のタイプを含めることができます。 additional.d.ts を作成し、tsconfig.json のインクルード配列で参照します。
!["image"](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/1e1c784a-6b5a-41ca-bdc4-039a786f9311.png)


Next.js (TypeScript) に Google Analytics を導入まで

# エラー1

```shell
Error: Image Optimization using Next.js' default loader is not compatible with
```

imageの最適化を無効化する必要がある。
こんな感じで最適化を無効化。
```js:next.config.js
module.exports = {
    images: {
        unoptimized: true
    }
}
```

https://stackoverflow.com/questions/65487914/error-image-optimization-using-next-js-default-loader-is-not-compatible-with-n

# エラー2
cloudflareでnode`v16.18.0`だとtrpcのpackageがunresolveになる。

```log:cloudflare log
	npm WARN exec The following package was not found and will be installed: @cloudflare/next-on-pages@0.2.0
09:24:05.219	⚡️ @cloudflare/next-to-pages CLI
09:24:05.222	⚡️
09:24:05.223	⚡️ Installing 'vercel' CLI...
09:24:05.223	⚡️
09:24:05.651	▲ npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
09:24:05.651	▲ npm WARN config location in the cache, and they are managed by
09:24:05.651	▲ npm WARN config     [`cacache`](http://npm.im/cacache).
09:24:05.652	▲ 
09:24:08.365	▲ npm 
09:24:08.365	▲ ERR! code ERESOLVE
09:24:08.365	▲ 
09:24:08.367	▲ npm ERR!
09:24:08.368	▲  ERESOLVE could not resolve
09:24:08.368	▲ 
09:24:08.368	▲ npm ERR!
09:24:08.369	▲  
09:24:08.369	▲ npm ERR! While resolving: @trpc/react@9.27.4
09:24:08.369	▲ npm ERR! Found: @trpc/client@10.0.0-rc.8
09:24:08.369	▲ npm ERR! node_modules/@trpc/client
09:24:08.369	▲ npm 
09:24:08.370	▲ ERR!   peer @trpc/client@"10.0.0-rc.8" from @trpc/next@10.0.0-rc.8
09:24:08.370	▲ npm ERR!   node_modules/@trpc/next
09:24:08.370	▲ npm ERR!     @trpc/next@"^10.0.0-rc.8" from the root project
09:24:08.370	▲ npm ERR!
09:24:08.370	▲    peer @trpc/client@"10.0.0-rc.8" from @trpc/react-query@10.0.0-rc.8
09:24:08.370	▲ npm ERR!   node_modules/@trpc/react-query
09:24:08.370	▲ npm ERR!     peer @trpc/react-query@"^10.0.0-proxy-beta.21" from @trpc/next@10.0.0-rc.8
09:24:08.370	▲ npm ERR!     node_modules/@trpc/next
09:24:08.370	▲ npm ERR!       @trpc/next@"^10.0.0-rc.8" from the root project
09:24:08.370	▲ npm ERR!     @trpc/react-query@"^10.0.0-rc.8" from the root project
09:24:08.370	▲ npm
09:24:08.371	▲  ERR!   1 more (the root project)
09:24:08.371	▲ npm ERR! 
09:24:08.371	▲ npm ERR! Could not resolve dependency:
09:24:08.371	▲ npm ERR! peer @trpc/client@"9.27.4" from @trpc/react@9.27.4
09:24:08.371	▲ npm ERR! node_modules/@trpc/react
09:24:08.371	▲ npm ERR!   @trpc/react@"^9.27.4" from the root project
09:24:08.371	▲ npm ERR! 
09:24:08.371	▲ 
09:24:08.371	▲ npm ERR! Conflicting peer dependency: @trpc/client@9.27.4
09:24:08.371	▲ npm ERR! node_modules/@trpc/client
09:24:08.372	▲ npm ERR!   peer @trpc/client@"9.27.4" from @trpc/react@9.27.4
09:24:08.372	▲ npm ERR!   node_modules/@trpc/react
09:24:08.372	▲ npm ERR!     @trpc/react@"^9.27.4" from the root project
09:24:08.372	▲ npm ERR! 
09:24:08.372	▲ npm 
09:24:08.372	▲ ERR! Fix the upstream dependency conflict, or retry
09:24:08.372	▲ npm ERR! this command with --force, or --legacy-peer-deps
09:24:08.372	▲ npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
09:24:08.372	▲ npm ERR! 
09:24:08.372	▲ npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
09:24:08.372	▲ 
09:24:08.373	▲ 
09:24:08.373	▲ 
09:24:08.373	▲ npm ERR! A complete log of this run can be found in:
09:24:08.373	▲ npm ERR!     /opt/buildhome/.npm/_logs/2022-11-30T00_24_05_619Z-debug-0.log
09:24:08.373	▲ 
09:24:08.382	node:internal/process/promises:279
09:24:08.382	            triggerUncaughtException(err, true /* fromPromise */);
09:24:08.382	            ^
09:24:08.383	
09:24:08.383	[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "undefined".] {
09:24:08.383	  code: 'ERR_UNHANDLED_REJECTION'
09:24:08.383	}
09:24:08.413	Failed: build command exited with code: 1
09:24:09.617	Failed: an internal error occurred
```

せっかくなので`.node-version`ファイルをrootに作成してnodeのversionをコードで管理してみる

```log:.node-version
18.11.0
```

するとしっかりとversionを認識している模様
```log
Attempting node version '18.11.0' from .node-version
```

ただ、versionが高すぎてErrorとなるので一旦versionを下げてみる

next-authでErrorが発生
```log:cloudflare
error next-auth@4.16.4: The engine "node" is incompatible with this module. Expected version "^12.19.0 || ^14.15.0 || ^16.13.0 || ^18.12.0". Got "17.9.1"
```

`"^12.19.0 || ^14.15.0 || ^16.13.0 || ^18.12.0"`がいいみたいなので、16.13.0でやってみる。

# この`エラー2`の解決方法
```log:cloudflare
09:24:08.369	▲ npm ERR! While resolving: @trpc/react@9.27.4
```

nodeのversionを`^16.13.0`で実行すると上手くいった。


# エラー3 deployは上手くいくのにサイトにアクセスしたが404が返却されてしまう。

```log
10:05:00.709	Note: No functions dir at /functions found. Skipping.
10:05:00.709	Validating asset output directory
10:05:11.919	Success: Assets published!
10:05:12.919	Success: Your site was deployed!
```


### Try1 : ビルドの出力ディレクトリを`out`に変更
Errorになる。
```log
09:58:45.652	⚡️ No functions detected.
09:58:45.679	Finished
09:58:45.680	Note: No functions dir at /functions found. Skipping.
09:58:45.680	Validating asset output directory
09:58:45.680	Error: Output directory "out" not found.
09:58:47.044	Failed: build output directory not found
```
[こちら](https://zenn.dev/laiso/articles/c086dd115f5d4e)によると`.vercel/output/static`で正しいみたい

### Try2 : Cloudflareの[公式ページ](https://blog.cloudflare.com/next-on-pages)の設定を真似てみる

```js:next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    runtime: 'experimental-edge',
  },
  reactStrictMode: true,
  swcMinify: true,
}
module.exports = nextConfig
```

:::details api毎に設定

```js:page/api/xxx.ts
// pages/api/hello.js

// Next.js Edge API Routes: https://nextjs.org/docs/api-routes/edge-api-routes

export const config = {
  runtime: 'experimental-edge',
}

export default async function (req) {
  return new Response(
    JSON.stringify({ name: 'John Doe' }),
    {
      status: 200,
      headers: {
        'Content-Type': 'application/json'
      }
    }
  )
}
```

:::

### Cloudflare ページでの実行方法 互換性日付と互換性フラグ
日付を選択すると、build環境を変えることができるみたい。

!["image"](https://ogtguvchdhhwjkgikojh.supabase.co/storage/v1/object/public/articles/8e704e71-3159-4f38-90de-ad9dd57b2875.png)


```log
10:17:03.508	▲ warn  - Found lockfile missing swc dependencies, run next locally to automatically patch
10:17:03.508	▲ 
10:17:03.825	▲ warn  - You are using the experimental Edge Runtime with `experimental.runtime`.
10:17:03.827	▲ 
10:17:51.881	▲ Failed to compile.
10:17:51.881	▲ 
10:17:51.882	▲ ./node_modules/@babel/runtime/regenerator/index.js
10:17:51.882	▲ Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime 
10:17:51.882	▲ Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
10:17:51.882	▲ 
10:17:51.882	▲ Import trace for requested module:
10:17:51.883	▲ ./node_modules/@babel/runtime/regenerator/index.js
10:17:51.883	▲ ./node_modules/next-auth/core/errors.js
10:17:51.883	▲ ./node_modules/next-auth/utils/logger.js
10:17:51.883	▲ ./node_modules/next-auth/core/index.js
10:17:51.883	▲ ./node_modules/next-auth/next/index.js
10:17:51.883	▲ ./src/server/createContext.ts
10:17:51.883	▲ 
10:17:51.883	▲ ./node_modules/@babel/runtime/regenerator/index.js
10:17:51.883	▲ Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime 
10:17:51.884	▲ Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
10:17:51.884	▲ 
10:17:51.884	▲ Import trace for requested module:
10:17:51.885	▲ ./node_modules/@babel/runtime/regenerator/index.js
10:17:51.885	▲ ./node_modules/next-auth/core/errors.js
10:17:51.885	▲ ./node_modules/next-auth/utils/logger.js
10:17:51.885	▲ ./node_modules/next-auth/core/index.js
10:17:51.885	▲ ./node_modules/next-auth/next/index.js
10:17:51.886	▲ ./src/server/createContext.ts
10:17:51.886	▲ 
10:17:51.886	▲ 
10:17:51.886	▲ 
10:17:51.886	▲ > Build failed because of webpack errors
10:17:51.886	▲ 
10:17:51.983	▲ error Command failed with exit code 1.
10:17:51.984	▲ 
10:17:51.984	▲ info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
10:17:51.984	▲ 
10:17:52.014	▲ Error: Command "yarn run build" exited with 1
10:17:52.014	▲ 
10:17:52.082	node:internal/process/promises:246
10:17:52.082	          triggerUncaughtException(err, true /* fromPromise */);
10:17:52.082	          ^
10:17:52.082	
10:17:52.082	[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "undefined".] {
10:17:52.082	  code: 'ERR_UNHANDLED_REJECTION'
10:17:52.083	}
10:17:52.107	Failed: build command exited with code: 1
10:17:53.481	Failed: an internal error occurred
```

この部分が怪しい。
```log
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime 
10:17:51.882	▲ Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
...
```

[https://nextjs.org/docs/messages/edge-dynamic-code-evaluation](https://nextjs.org/docs/messages/edge-dynamic-code-evaluation)を確認しろと言われる。

公式ページに書かれている通り以下のコードを試してみる。
```js:next.config.js
export const config = {
  runtime: 'experimental-edge', // for Edge API Routes only
  unstable_allowDynamic: [
    '/lib/utilities.js', // allows a single file
    '/node_modules/function-bind/**', // use a glob to allow anything in the function-bind 3rd party module
  ],
}
```

Localで試した方が早いので
`npx @cloudflare/next-on-pages`を実行する


cloudflareでnextjsをdeploy成功まで


[こちら](https://codelikes.com/javascript-no-browser-back/#toc6)の記事を参考に`window.onload`を使用してブラウザバックができないか確認。

```jsx
window.onload = function() {
  history.pushState(null, null, null);

  window.addEventListener("popstate", function (e) {
    history.pushState(null, null, null);
    return;
  });
};
```
イメージはこんな感じになるが、`useEffect`と併用してみる


[こちら](https://teratail.com/questions/143283)の記事でalertだと反応しないけど、modalを表示するようにしたら上手くいったという意見を発見。

```tsx
  useEffect(() => {
    const event = (ev: PopStateEvent) => {
      ev.preventDefault();
      ev.stopPropagation();
      setShowModal(true);
      const agent = window.navigator.userAgent.toLowerCase();
      history.go(1);
    };

    history.pushState(null, '', null);
    if (window) {
      window.addEventListener('popstate', event);
    }
    return () => {
      window.removeEventListener('popstate', event);
    };
  }, []);
```
こんな感じで書いて要素を表示するようにしたが、上手くいかず。


いろんな記事を参考にして最終的な落とし所は以下のコードになりそう。
```tsx
  useEffect(() => {
    const event = () => {
      history.go(1);
    };
    history.pushState(null, '', null);
    if (window) {
      window.addEventListener('popstate', event);
    }
    return () => {
      window.removeEventListener('popstate', event);
    };
  }, []);
```
