<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/733233b1b8884371bcb20181d0911fa7/image.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/2a750075287c4dbb96059adc4ed93155/Screenshot%20from%202024-04-01%2022-59-54.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/cf213cf0d3d0442f8f62e6ad63e88130/image.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/ef375ca6f364478397e86f9703993e61/Screenshot%20from%202024-04-01%2023-02-53.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/d3a28bba2ba843908323d1f8b0ac1526/Screenshot%20from%202024-04-01%2023-12-44.png" alt="">短文を投稿するのと自分の投稿を一覧表示するシンプルな画面を作りました。ちなみに、投稿画面だけちょっといい感じのスタイルになってるのはChatGPTさんに作ってもらったからです。html+cssだったらかなり上出来でいいなと思いました。

成果物

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/03a5facc8c3f4d91bf2cad40c35d2487/google_oauth_example_dynamo.png" alt="">追加の要素としては、データ永続化層が必要なので、DynamoDBが増えたというところだけです。

インフラ

認証（IDトークンを取得する）フローについては前回までの内容と同じなので省略します。認証後のフローとしては、IDトークン・アクセストークンをセッションストレージに保存し、それを持ってアプリ固有の保護対象リソースにアクセスするAPIを呼び出します。今回は投稿機能ということで、投稿内容を一覧取得するAPIと、投稿するAPIの2本を作成しました。 以下は投稿時のフロー図です。認可サーバのユーザ情報取得APIと投稿API、投稿一覧取得APIの計3本のAPIを叩きます。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/65d87407f98545dcaa8a7fedd281e50e/oauth2.0_dynamo.png" alt="">

フロー図

Users<ul><li>issuer（パーティションキー）</li><li>subject（ソートキー）</li><li>id</li><li>createdAt</li><li>updatedAt</li></ul> Microposts<ul><li>userId（パーティションキー）</li><li>postedAt（ソートキー）</li><li>content</li><li>createdAt</li><li>updatedAt</li></ul> Usersの用途としては、IDトークンのissとsubからアプリ固有のidにマッピングするのが目的です。IDトークンの仕様上、issとsubの組み合わせでグローバルに一意になることが保証されるためです。こうしておくことで、もし他のIDProviderが増えても問題ない作りになっています。 Micropostsが投稿を保存するためのテーブルです。主にユーザに紐づく投稿を一覧取得する目的なので、userId, postedAtの複合主キーとしました。ただ、投稿を一意に指定できるIDもあったほうが良かったかもしれません。今の形だと、例えば特定の投稿を更新したい場合に、「自分が投稿した投稿日時yyyy-MM-dd hh:mm:ssの投稿を更新してください」のようなぎこちない指定方法になってしまうためです。

テーブル設計

設計

src/routes/callback/+page.svelte<pre><code>@@ -1,4 +1,5 @@
&nbsp;&lt;script lang="ts"&gt;
+	import { goto } from '$app/navigation';
&nbsp;	import { error } from '@sveltejs/kit';
&nbsp;	import axios, { type AxiosResponse } from 'axios';
&nbsp;	import { onMount } from 'svelte';
@@ -22,6 +23,10 @@
&nbsp;			code: queryParams.code,
&nbsp;		});
&nbsp;
+		// トークンをセッションストレージに保存
+		sessionStorage.setItem('access_token', res.data.access_token);
+		sessionStorage.setItem('id_token', res.data.id_token);
+
&nbsp;		// userinfoエンドポイントにアクセス
&nbsp;		const discoverDoc = JSON.parse(sessionStorage.getItem('discoverDoc') ?? '');
&nbsp;		userInfoRes = await axios.get(discoverDoc.userinfo_endpoint, {headers: {Authorization: `Bearer ${res.data.access_token}`}});
@@ -32,6 +37,7 @@
&nbsp;{#if userInfoRes}
&nbsp;	&lt;h1&gt;{userInfoRes.data?.name}&lt;/h1&gt;
&nbsp;	&lt;img src={userInfoRes.data?.picture} alt="facePicture" /&gt;
+	&lt;button on:click={() =&gt; goto("/microposts")}&gt;投稿&lt;/button&gt;
&nbsp;{:else}
&nbsp;	&lt;h1&gt;ログインしています...&lt;/h1&gt;
&nbsp;{/if}</code></pre> src/routes/microposts/+page.svelte<pre><code>&lt;script lang="ts"&gt;
 import axios, { type AxiosResponse } from 'axios';
 import dayjs from 'dayjs';
 import { onMount } from "svelte";

 let access_token: string;
 let id_token: string;
 let userInfoRes: AxiosResponse;
 let micropostRes: AxiosResponse;
 let content: string;

 onMount(async () =&gt; {
 // セッションストレージからトークンを取得
 access_token = sessionStorage.getItem('access_token') ?? '';
 id_token = sessionStorage.getItem('id_token') ?? '';

 // userinfoエンドポイントにアクセス
 const discoverDoc = JSON.parse(sessionStorage.getItem('discoverDoc') ?? '');
 userInfoRes = await axios.get(discoverDoc.userinfo_endpoint, {headers: {Authorization: `Bearer ${access_token}`}});
 console.log(userInfoRes);

 // 投稿一覧取得APIにアクセス
 micropostRes = await axios.get('https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/microposts', {headers: {Authorization: `Bearer ${id_token}`}});
 console.log(micropostRes);
 });

 async function post() {
 // 投稿
 await axios.post('https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/microposts', {content: content}, {headers: {Authorization: `Bearer ${id_token}`}});
 // リロード
 micropostRes = await axios.get('https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/microposts', {headers: {Authorization: `Bearer ${id_token}`}});
 console.log(micropostRes);
 // インプットを空にする
 content = ''
 }
&lt;/script&gt;

&lt;h1&gt;投稿&lt;/h1&gt;
{#if userInfoRes &amp;&amp; micropostRes}
&lt;div style="max-width: 600px; margin: 20px auto;"&gt;
 {#each micropostRes.data as micropost}
 &lt;div style="border-bottom: 1px solid #ccc; padding: 10px 0; display: flex; align-items: center;"&gt;
 &lt;img style="width:50px; height:50px; border-radius:50%; margin-right:10px;" src={userInfoRes.data.picture} alt="facePicture"&gt;
 &lt;div style="flex-grow: 1;"&gt;
 &lt;h3 style="margin:0; font-size:18px;"&gt;{userInfoRes.data.name}&lt;/h3&gt;
 &lt;p style="margin:5px0; font-size:14px; color:#555;"&gt;{micropost.content}&lt;/p&gt;
 &lt;p style="margin:5px0; font-size:14px; color:#555;"&gt;{dayjs(micropost.postedAt).format('YYYY-MM-DD HH:mm:ss')}&lt;/p&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 {/each}
 &lt;div style="padding: 10px 0; display: flex; align-items: center;"&gt;
 &lt;div style="flex-grow: 1;"&gt;
 &lt;input style="display: inline-block; width: calc(100% - 6em);" type="text" bind:value={content} /&gt;
 &lt;button on:click={post}&gt;投稿&lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
{/if}</code></pre>

フロントエンド

app.py<pre><code>@@ -3,6 +3,8 @@ import logging
&nbsp;import requests
&nbsp;import boto3
&nbsp;import urllib
+from chalicelib.models import Microposts
+from chalicelib.utils import login
&nbsp;
&nbsp;
&nbsp;app = Chalice(app_name="XXXXXXXXXXXXXXXXX")
@@ -39,3 +41,32 @@ def index():
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return Response(body={"message": "server error"}, status_code=500)
&nbsp;
&nbsp; &nbsp; &nbsp;return res.json()
+
+
+@app.route("/microposts", methods=["POST"], cors=CORSConfig(allow_origin="https://XXXXXXXXXXXXXXXXXXXXXXXXX"))
+def post():
+&nbsp; &nbsp; try:
+&nbsp; &nbsp; &nbsp; &nbsp; user = login(app, CLIENT_ID)
+&nbsp; &nbsp; except Exception:
+&nbsp; &nbsp; &nbsp; &nbsp; return Response(body={"message": "server error"}, status_code=500)
+
+&nbsp; &nbsp; req = app.current_request.json_body or {}
+&nbsp; &nbsp; if "content" not in req:
+&nbsp; &nbsp; &nbsp; &nbsp; return Response(body={"message": "server error"}, status_code=500)
+
+&nbsp; &nbsp; micropost = user.post(req["content"])
+&nbsp; &nbsp; micropost.save()
+
+&nbsp; &nbsp; return Response(body={"posted_at": micropost.postedAt.isoformat()}, status_code=201)
+
+
+@app.route("/microposts", methods=["GET"], cors=CORSConfig(allow_origin="https://XXXXXXXXXXXXXXXXXXXXXXX"))
+def get_list():
+&nbsp; &nbsp; try:
+&nbsp; &nbsp; &nbsp; &nbsp; user = login(app, CLIENT_ID)
+&nbsp; &nbsp; except Exception:
+&nbsp; &nbsp; &nbsp; &nbsp; return Response(body={"message": "server error"}, status_code=500)
+
+&nbsp; &nbsp; posts = Microposts.query(user.id)
+&nbsp; &nbsp; res = [post.to_simple_dict() for post in posts]
+&nbsp; &nbsp; return Response(body=res, status_code=200)</code></pre> chalicelib/utils/login.py<pre><code>import jwt
from chalice import Chalice
from chalicelib.models import Users


def login(app: Chalice, client_id: str) -&gt; Users:
 if "Authorization" not in app.current_request.headers:
 raise Exception

 id_token = app.current_request.headers["Authorization"].removeprefix("Bearer ")

 jwks_client = jwt.PyJWKClient("https://www.googleapis.com/oauth2/v3/certs")
 try:
 signing_key = jwks_client.get_signing_key_from_jwt(id_token)
 payload = jwt.decode(
 id_token,
 signing_key.key,
 algorithms=["RS256"],
 audience=client_id,
 )
 except Exception as e:
 app.log.error(e)
 raise Exception

 count = Users.count(payload["iss"], Users.subject == payload["sub"])
 if count == 0:
 u = Users(issuer=payload["iss"], subject=payload["sub"])
 u.save()

 return Users.get(payload["iss"], payload["sub"])</code></pre> 一旦app.pyにベタ書きで済ませたかったのですが、UsersのインスタンスをreturnしようとするとChaliceResponceでラッピングされてしまうようだったので、utilに切り出しました。

バックエンド

今回、IDトークンを利用する実装を行ったので、nonce検証に対応しました。nonce検証はインプリシットフローでは必須となっています。そもそもnonce検証の目的は、リプレイアタックへの対策です。リプレイアタックとは簡単に言うと、URLのフラグメントに設定されたトークンだけを別のトークンに置き換える攻撃のことです。インプリシットフローでは必須と書きましたが、その理由としてはURLにトークンが含まれるため、履歴などから簡単に抜き取れるためです。ただ、フロント実装はいくらでも手元で変更できるので、あまり対策になっていない気もします・・・あと、認可コードフローでもURLに認可コード含まれない？と一瞬思いましたが認可コードは1回しか使えないので使用済みのものを抜き取っても使えないですね。認可コードフロー強し。 src/routes/implicit/callback/+page.svelte<pre><code>@@ -22,6 +22,13 @@
&nbsp;			error(401, { message: 'Invalid state parameter.' });
&nbsp;		}
&nbsp;
+		// nonceの検証
+		const sessionNonce = sessionStorage.getItem('nonce');
+		const payload = JSON.parse(decodeURIComponent(atob(fragmentArgs.id_token.split('.')[1])));
+		if (sessionNonce != payload.nonce) {
+			error(401, { message: 'Invalid nonce parameter.' });
+		}
+
&nbsp;		// トークンをセッションストレージに保存
&nbsp;		sessionStorage.setItem('access_token', fragmentArgs.access_token);
&nbsp;		sessionStorage.setItem('id_token', fragmentArgs.id_token);</code></pre>

nonceに対応する

実装

今回は、アプリ固有の機能として投稿機能を実装し、その中でIDトークンを利用するようになったことからnonceの検証にも対応しました。

最後に

「Googleでログイン」を実装してみた（その３）

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/55a5e7124d97406eb7560dca4d9a56d3/Screenshot%20from%202024-03-26%2022-18-30.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/14c358cc482e4e629a0e37c7a6042a0c/Screenshot%20from%202024-03-26%2022-20-00.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/41963139eece4a459bac601f42c9f7bc/Screenshot%20from%202024-03-26%2022-21-12.png" alt="">ぶっちゃけ見た目的にはほとんど何も変わってないです・・・

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/24752de02e534d318b401d8af6e17ec5/google_oauth_example_implicit.png" alt="">認可エンドポイントしか使用しないのでバックエンドは不要になりました。

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/1c656de1d3d3404a97999e442297218d/oauth2.0_implicit.png" alt="">認可コードフローの場合は認可エンドポイントから認可コードが返ってきて、それをアクセストークンと交換する必要があったのですが、インプリシットフローの場合は直接アクセストークンが返ってきます。前回よりもぐっとシンプルになりました。

認可コードフローが実装できればインプリシットフローはほぼ同じです。以下、フロント実装の差分です。<pre><code>diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 659e6e5..910dc9d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -23,7 +23,31 @@
&nbsp;		const href = `${discoverRes.data.authorization_endpoint}?response_type=${params.response_type}&amp;client_id=${params.client_id}&amp;scope=${params.scope}&amp;redirect_uri=${params.redirect_uri}&amp;state=${params.state}&amp;nonce=${params.nonce}`;
&nbsp;		location.href = href;
&nbsp;	}
+
+	async function implicitLogin() {
+		// ディスカバリドキュメントを参照
+		const discoverRes = await axios.get('https://accounts.google.com/.well-known/openid-configuration');
+		sessionStorage.setItem('discoverDoc', JSON.stringify(discoverRes.data));
+
+		// 認可エンドポイントへのリクエストパラメータ設定
+		const params = {
+			response_type: 'token id_token',
+			client_id: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com',
+			scope: 'openid profile email',
+			redirect_uri: 'https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/implicit/callback',
+			state: Math.random().toString(32).substring(2),
+			nonce: Math.random().toString(32).substring(2)
+		};
+
+		sessionStorage.setItem('state', params.state);
+		sessionStorage.setItem('nonce', params.nonce);
+
+		// 認可エンドポイントへ遷移
+		const href = `${discoverRes.data.authorization_endpoint}?response_type=${params.response_type}&amp;client_id=${params.client_id}&amp;scope=${params.scope}&amp;redirect_uri=${params.redirect_uri}&amp;state=${params.state}&amp;nonce=${params.nonce}`;
+		location.href = href;
+	}
&nbsp;&lt;/script&gt;
&nbsp;
&nbsp;&lt;h1&gt;ログイン&lt;/h1&gt;
&nbsp;&lt;p&gt;&lt;button on:click={login}&gt;Googleでログイン&lt;/button&gt;&lt;/p&gt;
+&lt;p&gt;&lt;button on:click={implicitLogin}&gt;Googleでログイン(Implicit)&lt;/button&gt;&lt;/p&gt;
diff --git a/src/routes/implicit/callback/+page.svelte b/src/routes/implicit/callback/+page.svelte
new file mode 100644
index 0000000..efac8cb
--- /dev/null
+++ b/src/routes/implicit/callback/+page.svelte
@@ -0,0 +1,36 @@
+&lt;script lang="ts"&gt;
+	import { error } from "@sveltejs/kit";
+	import axios, { type AxiosResponse } from "axios";
+	import { onMount } from "svelte";
+	let userInfoRes: AxiosResponse;
+
+&nbsp; &nbsp; onMount(async () =&gt; {
+&nbsp; &nbsp; &nbsp; &nbsp; const fragment = window.location.hash;
+&nbsp; &nbsp; &nbsp; &nbsp; const keyValueArgs = fragment.substring(1).split('&amp;');
+&nbsp; &nbsp; &nbsp; &nbsp; let fragmentArgs: Record&lt;string, string&gt; = {};
+&nbsp; &nbsp; &nbsp; &nbsp; for (const keyValue of keyValueArgs) {
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const [key, value] = keyValue.split('=');
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fragmentArgs[decodeURIComponent(key)] = decodeURIComponent(value);
+&nbsp; &nbsp; &nbsp; &nbsp; }
+&nbsp; &nbsp; &nbsp; &nbsp; console.log(fragmentArgs);
+
+		// 送られてきたstateが一致しているか確認
+		const sessionState = sessionStorage.getItem('state');
+
+		if (fragmentArgs.state != sessionState) {
+			error(401, { message: 'Invalid state parameter.' });
+		}
+
+&nbsp; &nbsp; &nbsp; &nbsp; // userinfoエンドポイントにアクセス
+		const discoverDoc = JSON.parse(sessionStorage.getItem('discoverDoc') ?? '');
+		userInfoRes = await axios.get(discoverDoc.userinfo_endpoint, {headers: {Authorization: `Bearer ${fragmentArgs.access_token}`}});
+		console.log(userInfoRes);
+&nbsp; &nbsp; });
+&lt;/script&gt;
+
+{#if userInfoRes}
+	&lt;h1&gt;{userInfoRes.data?.name}&lt;/h1&gt;
+	&lt;img src={userInfoRes.data?.picture} alt="facePicture" /&gt;
+{:else}
+	&lt;h1&gt;ログインしています...&lt;/h1&gt;
+{/if}</code></pre>

設計も実装もシンプルなインプリシットフローは魅力的に見えてしまうのですが、OAuth2.0で推奨されているのは認可コードフローの方です。インプリシットフローではアクセストークンやIDトークンが直接コールバックエンドポイントのURLのフラグメントとして付与されます。URLフラグメントはブラウザの履歴に残るため、履歴を閲覧できる立場であれば過去に発行されたトークンを抜き取ることが簡単にできてしまいます。対策としては、トークンの有効期限を短めに設定することが重要だと思います。 他にもセキュリティ的に考慮すべき点がいくつかあるようですが、深掘っていくとそれだけでかなりのボリュームになりそうなので、別の機会に譲ろうと思います。

インプリシットフローのセキュリティホールについて

今回は、OIDCのインプリシットフローを実装してみました。実装してみて、認証コードフローをしっかりと押さえていればよりシンプルな形になっただけなのでかなりハードルが低いように思えました。

まとめ

「Googleでログイン」を実装してみた（その２）

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b590b4bc231e423a9f3637ae996dae9f/image.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/bd7ce0a4b28c42168648346657a5b010/Screenshot%20from%202024-03-23%2018-20-57.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/9c676aa0560942bfaa9d600c65417704/image.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/32d6a3e9b18549e4bb0e4b4f6c1fb69c/Screenshot%20from%202024-03-23%2018-23-11.png" alt="">たったのこれだけです。

今回は以下のようなインフラ構成で実現しました。 <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/81ae802b06b645568065fb11d864edf9/google_oauth_example.png" alt="">ざっくりと説明するとフロントエンドがCloudFront + S3で静的サイト配信しJSで認可コードを取得、バックエンドがAPI Gateway + Lambdaでフロントで取得した認可コードを使ってトークン取得を取得します。

図にするとこんな感じです。 <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b0ae281a05b04625a7f72893015b9b6b/oauth2.0_code_spa.png" alt=""> <ol><li>アプリのURLにアクセスするとCloudFrontからJSなどの静的コンテンツが返される</li><li>ブラウザ上のJSから、Googleの認可エンドポイントにアクセスする<ol><li>その際、リクエストにクライアントIDとコールバックURLを含める</li></ol></li><li>Googleの認可画面が表示されるので、ユーザが（ログインしていなければログインした上で）認可を行う</li><li>認可エンドポイントにアクセス時に渡していたコールバックURLにリダイレクトする<ol><li>その際、認可コードを受け取る</li></ol></li><li>ブラウザ上のJSから、API Gatewayに対してトークン取得リクエストを送る<ol><li>その際、リクエストに認可コードを含める</li></ol></li><li>API Gatewayからトークンエンドポイントにアクセスし、アクセストークンやIDトークンなどを受け取る</li><li>ブラウザ上のJSから、Googleのuserinfoエンドポイントにアクセスしユーザ情報を取得する<ol><li>その際、リクエストにアクセストークンを含める</li></ol></li></ol>

まず考えられるのは認可コードをバックエンドに送信していますが、このバックエンドはSSGからのリクエストを受け付ける必要がありパブリックアクセスを許容する必要があるので、どこからでもアクセスできてしまいます。そうすると攻撃者が総当り的に認可コードを大量に送ると、ユーザのアクセストークンを奪うことができてしまう可能性があるかなと思います。当然CORSは設定していますが、APIを直で叩く場合は関係ないです。ただ少なくとも使用済みの認可コードは使えなくなるので、実際にその攻撃が成功する可能性は極めて低いと思います。 他には、同じくフロント・バック通信のところで、リクエスト・レスポンスを平文でやり取りしているため、万が一通信が傍受されると同様にアクセストークンが奪われる可能性がありそうです。公開鍵暗号を使おうとしても結局フロントがSSGなので秘密鍵を安全に保管することができないと思います。ただ、Googleからはアクセストークンがそのまま送られてくるわけで、お門違いな心配をしているような気もします。

セキュリティ的にどうなのか考えてみる

セキュリティの点はすぐに結論がでなそうなのでじっくり考えようと思います。その他で今後やってみたいこととしては、<ul><li>インプリシットフローを試す</li><li>保護対象リソースを構築して実際にアプリ固有のユーザ情報を取得する</li><li>認可スコープを増やしてGoogleカレンダーなどにアクセスしてみる</li></ul>このあたりが実装できたらまた記事にしたいと思います。

ネクストアクション

フロントは個人的にシンプルで好きなsvelteを使っています。 src/routes/+page.svelte<pre><code>&lt;script lang="ts"&gt;
 import axios from "axios";

 async function login() {
 // ディスカバリドキュメントを参照
 const discoverRes = await axios.get('https://accounts.google.com/.well-known/openid-configuration');
 sessionStorage.setItem('discoverDoc', JSON.stringify(discoverRes.data));

 // 認可エンドポイントへのリクエストパラメータ設定
 const params = {
 response_type: 'code',
 client_id: 'XXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com',
 scope: 'openid profile email',
 redirect_uri: 'XXXXXXXXXXXXXXXXXXXXXXXXXX/callback',
 state: Math.random().toString(32).substring(2),
 nonce: Math.random().toString(32).substring(2)
 };

 sessionStorage.setItem('state', params.state);
 sessionStorage.setItem('nonce', params.nonce);

 // 認可エンドポイントへ遷移
 const href = `${discoverRes.data.authorization_endpoint}?response_type=${params.response_type}&amp;client_id=${params.client_id}&amp;scope=${params.scope}&amp;redirect_uri=${params.redirect_uri}&amp;state=${params.state}&amp;nonce=${params.nonce}`;
 location.href = href;
 }
&lt;/script&gt;

&lt;h1&gt;ログイン&lt;/h1&gt;
&lt;p&gt;&lt;button on:click={login}&gt;Googleでログイン&lt;/button&gt;&lt;/p&gt;</code></pre> src/routes/callback/+page.svelte<pre><code>&lt;script lang="ts"&gt;
 import { error } from '@sveltejs/kit';
 import axios, { type AxiosResponse } from 'axios';
 import { onMount } from 'svelte';
 let queryParams;
 let userInfoRes: AxiosResponse;

 onMount(async () =&gt; {
 // コールバックエンドポイントにリダイレクトしてきた際のクエリパラメータを取得
 const params = new URLSearchParams(window.location.search);
 queryParams = Object.fromEntries(params.entries());

 // 送られてきたstateが一致しているか確認
 const sessionState = sessionStorage.getItem('state');

 if (queryParams.state != sessionState) {
 error(401, { message: 'Invalid state parameter.' });
 }

 // バックエンドからトークン取得
 const res = await axios.post('https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/get_token', {
 code: queryParams.code,
 });

 // userinfoエンドポイントにアクセス
 const discoverDoc = JSON.parse(sessionStorage.getItem('discoverDoc') ?? '');
 userInfoRes = await axios.get(discoverDoc.userinfo_endpoint, {headers: {Authorization: `Bearer ${res.data.access_token}`}});
 console.log(userInfoRes);
 });
&lt;/script&gt;

{#if userInfoRes}
 &lt;h1&gt;{userInfoRes.data?.name}&lt;/h1&gt;
 &lt;img src={userInfoRes.data?.picture} alt="facePicture" /&gt;
{:else}
 &lt;h1&gt;ログインしています...&lt;/h1&gt;
{/if}</code></pre>

バックエンドは個人的に好きなScalaとかを使いたかったのですがCI/CDの構築に詰まったので一旦安定のpython(Chalice)で作りました<pre><code>from chalice import Chalice, Response, CORSConfig
import logging
import requests
import boto3
import urllib

app = Chalice(app_name="XXXXXXXXXXXXXXXXXX")
app.log.setLevel(logging.DEBUG)

ssm = boto3.client("ssm")

CLIENT_ID = ssm.get_parameter(Name="/google_oauth/client_id")["Parameter"]["Value"]
CLIENT_SECRET = ssm.get_parameter(Name="/google_oauth/client_secret")["Parameter"]["Value"]
REDIRECT_URI = ssm.get_parameter(Name="/google_oauth/redirect_uri")["Parameter"]["Value"]


@app.route("/get_token", methods=["POST"], cors=CORSConfig(allow_origin="https://XXXXXXXXXXXXXXXXXXXXXXXXXXX"))
def index():
 req = app.current_request.json_body or {}
 if "code" not in req:
 return Response(body={"message": "server error"}, status_code=500)

 body = {
 "code": req["code"],
 "client_id": CLIENT_ID,
 "client_secret": CLIENT_SECRET,
 "redirect_uri": REDIRECT_URI,
 "grant_type": "authorization_code",
 }
 encoded = urllib.parse.urlencode(body)
 res = requests.post(
 "https://oauth2.googleapis.com/token",
 headers={"Content-Type": "application/x-www-form-urlencoded"},
 data=encoded,
 )
 if res.status_code &gt;= 300:
 app.log.error(res.json())
 return Response(body={"message": "server error"}, status_code=500)

 return res.json()</code></pre>

(おまけ)実装

<ul><li><a href="https://amzn.asia/d/6KPSQnn" target="_blank" rel="noopener noreferrer">OAuth徹底入門</a></li><li><a href="https://amzn.asia/d/8c7FfOw" target="_blank" rel="noopener noreferrer">OpenID Connect入門</a></li></ul>

参考文献

「Googleでログイン」を実装してみた（その１）

APIViewの継承時にauthenticationclassesを設定すると、その認証が必要になり、またpermissionclassesを設定するとその権限を持っているものしかAPIViewを起動することができなくなる。(認可)認証と承認の違いだった。以下ものすごくわかりやすい例<blockquote>ある家族が休暇で留守の間、その家のペットを世話するために訪れた人が、施錠されたドアの前に立っている状況を考えてみましょう。この人物には、以下が必要です。 認証：この場合は、家の鍵です。施錠されたドアは、正しい鍵を持つ人だけが開けることができます。これは、システムが正しい資格情報を持つユーザーにのみアクセス権を付与する認証と同じことです。 承認：この場合は、家に入る許可です。家の中では、キッチンに入り、ペットフードを保管している食器棚を開けることができます。しかし、昼寝のために寝室に入る許可（認可）は与えられないでしょう。</blockquote> 参考サイト↓https://torajirousan.hatenadiary.jp/entry/2021/01/01/192820https://www.okta.com/jp/identity-101/authentication-vs-authorization/

認証と承認の違い

authentication_classesとpermission_classesの違い

docker-composeは別々にやるべし。非同期でappがmysqlコンテナ立ち上がるのを待たずに実行してしまうため。（depends_onは起動順番は制御できるけど稼働順序は制御できない）<pre><code>docker-compose up -d db
docker-compose up app&nbsp;</code></pre> ので↑のように順に実行する。

原因

解決方法

docker compose時のappコンテナ立ち上げエラー

Githubのmainブランチが更新されたら自動デプロイできるようにする具体的には下記の手順を自動で行えるようにします。<ol><li>Githubのmainブランチを変更</li><li>GithubActionsが作動し、S3にファイルをアップロード</li><li>Lambda関数が発火し、CloudFrontのキャッシュを削除する</li></ol> 図にするとこんな感じです<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/4ed975a03ea9499b80ce3901f3f296a0/image.png" alt="">

今回やりたいこと

まずは事前準備として、GithubActionsからCLIでS3のバケットにアクセスするための権限を持っているIAMユーザーを作成します。 1.ユーザー名は分かりやすく「GithubActions」に設定します。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/41297af906ad4982b5bf3bc0106e7fbf/image.png" alt="">2.S3へのアクセスを付与します。　「ポリシーを直接アタッチする」を選択し、<a style="color:inherit" href="https://us-east-1.console.aws.amazon.com/iam/home?region=ap-northeast-1#/policies/details/arn%3Aaws%3Aiam%3A%3Aaws%3Apolicy%2FAmazonS3FullAccess" target="_blank" rel="noopener noreferrer">AmazonS3FullAccess</a>を追加<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/ae26824587ee44f3baab32c4af9855c0/image.png" alt="">3.S3にアクセスするためのキーを取得します。　IAMユーザー作成後、「セキュリティ認証情報」&gt;「アクセスキーを作成」　ユースケースの選択画面では「AWS の外部で実行されるアプリケーション」を選択　　→アクセスキー、シークレットアクセスキーが発行されるのでどっかにコピーしておく 4.Githubのリポジトリにアクセスキーとシークレットアクセスキーを環境変数として設定　Githubのリポジトリの「Settings」タブのRepository secretsから登録できます。　<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/c17fc1aad29e49078742db771c34c053/image.png" alt=""> これにて事前準備は完了です。

GithubActionsからS3へアクセス可能にしよう

次にGithub 側の設定です。mainブランチに変更があった際にS3へファイルをアップロードする処理を書いていきます。 導入の仕方は以下の公式ドキュメントを参照してください<a href="https://docs.github.com/ja/actions/quickstart" target="_blank" rel="noopener noreferrer">https://docs.github.com/ja/actions/quickstart</a> <code>.github/workflows</code>&nbsp;ディレクトリ配下に<code>ci.yml</code>を作成します。<pre><code>name: Build and Deploy to S3


on:
 # mainブランチへのプッシュをトリガーにする
 push:
 branches:
 - main


jobs:
 build-and-deploy:
 runs-on: ubuntu-latest
 steps:
 - name: Checkout
 uses: actions/checkout@main # リポジトリをチェックアウト 


 - name: Install Dependencies
 run: npm install
 # ビルドしてdistディレクトリ以下のファイルを更新
 - name: Build
 run: npm run build 


 - name: Deploy # S3にデプロイ 
 env:
 # IAMユーザーに作成したアクセスキー
 AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
 AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
 run: | # S3のバケットにデプロイ
 aws s3 sync --region ap-northeast-1 ./dist s3://nuxt-app-20240218 --delete
 aws s3 cp --recursive --region ap-northeast-1 ./dist s3://nuxt-app-20240218</code></pre> <code>git push origin main</code>コマンドを実行。無事、処理が完了したみたいです。S3にもアップロードされていることを確認できました。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/fb8c75b3b0ef4f6188ff72a3e70b4449/image.png" alt="">

ワークフローの作成

①GithubActionsを使った自動デプロイ

Python3.9を使って、関数を1から作成していきます。関数名は「delete-cache-cloudfront」としておきます。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/483aacf31399478bbf243fd36e7dd4dc/image.png" alt="">

Lambda関数の作成

Lambda関数からCloudFrontにアクセス権限を付与する必要があります。以下の手順で設定<ul><li>作成したLambda関数の設定タブの「アクセス権限」から、実行ロールのリンクをクリック</li><li>IAMロールの画面に飛ばされるので「許可の追加」から「ポリシーのアタッチ」をクリック</li><li>CloudFrontで検索すると<a href="https://us-east-1.console.aws.amazon.com/iam/home#/policies/details/arn%3Aaws%3Aiam%3A%3Aaws%3Apolicy%2FCloudFrontFullAccess" target="_blank" rel="noopener noreferrer">CloudFrontFullAccess</a>が出てくるので選択して許可を追加</li></ul><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/31079a3315a541cfb3ee0f30a8fbd4cf/image.png" alt="">

アクセス権限の付与

関数の概要の「トリガーを追加」をクリック。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/60f918dfe8b54bfc89b4a825ea6d0a74/image.png" alt="">以下の内容で設定し、追加を押下<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/5fc8cf095a8d49fabc0b5ff1062ad358/image.png" alt="">

トリガーの作成

Lambdaを使ったキャッシュクリア

まずは変更前の状態を確認。CloudFrontのディストリビューションのドメインにアクセス<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/94d565f35cae494c947b8821b5721e85/image.png" alt="">CloudFrontのキャッシュ削除履歴最終履歴は2024年3月5日 15:03:11<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/86a73a40087b42c9a2431affcdc9a9e8/image.png" alt="">今回はタイトルバーの「MyApp」の文字列を「YOKU」に書き換えます。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b490c4d0335544b0a7b3358f3f96ccd2/image.png" alt=""> 変更をコミットして<code>git push origin main</code>を実行！ キャッシュ削除することなく、きちんと変更が反映されていました(^ ^)<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/e484fe389dcb454ea7db9ffb168bb6bb/image.png" alt=""> ちなみにCloudFrontのコンソール画面のキャッシュ削除履歴も2024年3月5日 15:13:07に更新されています。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/a513f0e6d4384d809ca378d45f96102c/image.png" alt="">

動作確認！

実務でアプリを運用していくことを想定して、デプロイを仕組み化することでヒューマンエラーを防いでいきたいと思いました。

mainブランチにマージ→S3にデプロイ→CloudFrontのキャッシュ削除まで自動化してみた

<ul><li>この記事に書くこと<ul><li>S3にNuxt.jsのファイルをデプロイする方法</li><li>CloudFrontのディストリビューション作成、設定方法</li></ul></li><li>この記事に書かないこと<ul><li>S3, CloudFrontについての概要、基礎知識</li></ul></li></ul>

前提

バケット名　→今回は<code>nuxt-app-20240218</code>というバケット名で作成。オブジェクト所有者　→「ACL有効」に設定　※ACLを無効にすると、バケットのオブジェクトの公開設定ができなくなる。　　今回は静的Webホスティングとして公開するため、有効に設定デフォルトの暗号化　→無効に設定。　作成完了。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/450a1c9ed1834015ad239dd259c44395/image.png" alt=""> 作成したバケットを静的webホスティング用に設定していく。上記のバケット詳細の画面の下の方に「静的webホスティング」のセクションがあるのでそこから編集。　→静的webホスティングを有効に設定

S3バケットを新規作成～静的webホスティング設定

distディレクトリとはNuxtのプロジェクトをビルドした際に生成されるファイル群。.vue形式で記述したファイルが、htmlで作られた Web サイト用のファイルに変換されます。※distディレクトリごとアップロードしてしまうと、Webページにアクセスした際にindex.htmlがなく403となってしまうので注意！ 無事アップデート完了。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/08bc12b91b11486ea8e4a6b08cb11690/image.png?w=500&amp;h=401" alt="">

S3にNuxtのファイル(distディレクトリ配下)をアップロード

次に、https通信を実現するためにSSL証明書を発行していきます。主な手順としては以下の通りです。<ol><li>ドメインを購入（今回はお名前ドットコムを利用）</li><li>Route53でホストゾーンの設定</li><li>ACMを使ってパブリック証明書をリクエスト<ol><li>注意：CloudFrontで利用するためにはリージョンをバージニア北部に設定してリクエストを行う必要がある</li></ol></li><li>Route53でDNSレコードを作成（CNAMEタイプ）</li></ol> 詳細な手順は以下の記事を参考にしましたので参照ください。<a href="https://dev.classmethod.jp/articles/route53-domain-onamae/" target="_blank" rel="noopener noreferrer">https://dev.classmethod.jp/articles/route53-domain-onamae/</a>

SSL証明書を発行

事前準備

Origin domain　→作成したS3バケット名を入力<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/f9d071a6d5e144d8bed17d90abeb78ec/image.png" alt=""> オリジンへのアクセス制限<ul><li>　OAIを作成<ul><li>OAIとは？</li><li>→CloudFront内に存在する仮想的なユーザーみたいなもの。このユーザーの権限を使ってS3へのアクセス制限を行うことができる。</li><li>今回はこのOAI（CloudFront）経由でのみS3にアクセスできるようにする。</li></ul></li><li>バケットポリシーを設計する必要があるので「はい、バケットポリシーを自動で更新します」を選択 <ul><li>CloudFront側で設定したポリシーがS3側でも自動で適用される</li></ul></li></ul>　　　<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/9fede0a4dced46e7809fcd55f063e6d1/image.png" alt=""> オリジンシールドの適用　→オリジンの負荷を最小限に抑え、可用性を向上させてくれる<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/ee9157e4ae4742e5bf27555bcbea9fe9/image.png" alt=""> ビューワーの設定<ul><li>Redirect HTTP to HTTPS<ul><li>httpでアクセスした際に自動でhttpsにリダイレクトしてくれる</li></ul></li><li>今回はWebサイトの閲覧が目的なのでGET, HEADメソッドのみ</li><li>今回はWebサイトの公開が目的なのでNoに設定 （yesにするとキーペアを作成する）</li></ul><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/5750c900110a48b1a3b9d1691cc3508d/image.png" alt="">https通信を実現させるための設定<ul><li>代替ドメイン名に取得したドメイン名を入力</li><li>SSL証明書はACMで発行した証明書を選択</li></ul><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/3e37326d675244b5ac614b7c6e180f47/image.png" alt=""> ディストリビューション作成完了！<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/4f0e0bf736524bb6895b15225969fa16/image.png" alt="">

作成時の設定

CloudFront ディストリビューションを新規で作成

<ol><li>Route53で作成したホストゾーンから、「レコードを作成」を選択</li><li>エイリアスを有効にして、「トラフィックのルーティング先」をCloudFrontに設定すると自動でディストリビューションが表示される</li></ol><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/7e2e41d044b64baea572f4cdfa26d080/image.png" alt="">

ドメインとの関連付け

S3＞バケット＞バケット名＞バケットポリシーを編集<ul><li>①があらかじめS3に設定したバケットポリシー。（誰でもアクセスできる状態）</li><li>②がディストリビューション作成時に作成したバケットポリシー （OAIを新規作成して、そのCloudFrontからでしかアクセスできない）<ul><li>①のバケットポリシーを削除</li></ul></li></ul><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/73ae18372d9e463a9b413d58e5e14bfc/image.png" alt=""> この設定により、変更前はS3のオブジェクトURIへ直接アクセスしてページを閲覧できていましたが、変更後はForbiddenで閲覧できなくなりました

S3でOAIがうまく機能しているかを確認

レコード名を貼り付けてアクセス<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/67061f93b9a246e09a69a9e0b2adfd4c/image.png" alt="">無事、アクセスすることができました。（今はドメインの更新をしていないのでディストリビューション名のドメインからアクセスしてます。）<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/4c109960d1af4826b6a6f7ef052c1343/image.png" alt="">

CloudFrontからアクセス！

CloudFrontを経由してアクセスしてみよう

今回S3にフロントエンドのプロジェクトをデプロイしてCloudFrontで配信する構成をしてみました。 思ったのは、リリースのたびにS3にアップロードして、キャッシュを削除しないといけないので少し面倒だということです。 次回はデプロイの一連のワークフローのパイプラインを作っていきたいと思います。

おわりに

Nuxt.jsをS3にデプロイしてCloudFront経由でアクセスする

今回紹介するロジックを使用して作成したパスワードのスコアです２文字分割、３文字分割 については後に説明します 文字列 = 算出したスコア11111111 = 0.003772540762336680312121212 = 0.03091931216931216612341234 = 0.3333333333333333765872934 = 174829653 = 1aaaaaaaaaa = 0.0016624335562414267abcabcabc = 0.07316468253968254zxpzxpzxpzxpzxpzxp = 0.0061785130718954254abcabcabcxyzxyzxyz = 0.15788398692810457xkskefstpwzyjszp = 1hcksvibdvwgruusb = 1 同じ文字が連続した場合に低いスコアとなっており意図通りに動作していることが分かります

サンプル

与えられた文字列（パスワード）を２～３文字単位に分割し、同じ文字列が出てくる回数をカウントします何度も出てくる単語があった場合にはスコアを低くし単語が少ない回数しか出ていない場合はスコアを高くします

ロジック概要

１．与えられた文字列（パスワード）を先頭から２文字抽出して辞書に登録します　１－１　抽出した２文字が辞書に存在しないのならその単語のカウンターに１を設定し登録処理を終了します　１－２　抽出した２文字が辞書に登録済みであったらその単語のカウンターを１加算します２．検索位置を１文字進めて「１」の処理に戻ります　２－１　文字列の末尾の文字を辞書に取り込んだら処理を終了しますスコア算出部分の実装です<pre><code>function repititionScore(text, wordLength) {
&nbsp; &nbsp; var dicionary = {};
&nbsp; &nbsp; var size = text.length;
&nbsp; &nbsp; var procSize = size - (wordLength - 1);
&nbsp; &nbsp; for(var i = 0; i &lt; procSize; i += 1) {
&nbsp; &nbsp; &nbsp; &nbsp; var word = text.substring(i, i + wordLength);
&nbsp; &nbsp; &nbsp; &nbsp; if(word in dicionary) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dicionary[word] += 1;
&nbsp; &nbsp; &nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dicionary[word] = 1;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; &nbsp; prt("text", text);
&nbsp; &nbsp; prt(dicionary);
&nbsp; &nbsp; var score = 0;
&nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; for(k in dicionary) {
&nbsp; &nbsp; &nbsp; &nbsp; score += 1 / dicionary[k] ** 2;
&nbsp; &nbsp; }
&nbsp; &nbsp; score = score / (procSize);
&nbsp; &nbsp; return score;
}</code></pre> 文字列 abcabcabcxyzxyzxyz に対して処理を行うと以下のような辞書が作られます <pre><code>{
&nbsp;&nbsp;"ab": 3,
&nbsp;&nbsp;"bc": 3,
&nbsp;&nbsp;"ca": 2,
&nbsp;&nbsp;"cx": 1,
&nbsp;&nbsp;"xy": 3,
&nbsp;&nbsp;"yz": 3,
&nbsp;&nbsp;"zx": 2
}</code></pre> これらの ２乗の逆数 の 平均値 をスコアとします ＞"bc": 3,＞"ca": 2,この２つについて計算すると(1/(3*3) + 1/(2*2)) / 2 = 0.361となりスコアは 0.361 となります辞書全てを計算すると 0.11437908496732027 となります（計算省略） 文字列 11111111 に対して実施した場合は以下のような辞書が作られます<pre><code>{
&nbsp;&nbsp;"11": 7
}</code></pre>0.0204081632653061 / 7 = 0.0029154518950437となります ソースコードは最後に全て掲載していますので興味があれば御覧ください

ロジック解説

例えばですが・最低8文字とする・8文字区切り（最低文字数区切り）ですべての箇所でスコアを算出し、一番スコアの高い箇所を採用するという使い方になります 32文字パスワードだった場合に全部の文字列を一発で判定してしまえば良いのでは？と思うかもしれませんがその場合に納得いかないような結果になります例えばですが!!!!!!!!!!!!!!!!!!!!xkskefstpwzyjszp!!!!!!!!!!!!!!!!!!!!このようなパスワード文字列を指定した場合にスコアが 0.32 と低くなってしまいます真ん中のランダム文字列がかなりセキュアだとは思いますし、桁数が多く桁数予測もしづらいですですが !!! の繰り返しが低スコア判定となり強固なパスワードを指定したにも関わらず低スコアとなってしまいます

本ロジックの使い方

先の説明で<blockquote>先頭から２文字抽出して辞書に登録します</blockquote>とありました、これはパラメータで変更でき辞書を作成する際に辞書単語を「２文字」にするか「３文字」にするかでスコアが微妙に異なります４文字以上の指定も可能です実装部分は<blockquote>function repititionScore(text, wordLength)</blockquote>になります３文字のほうがスコアがやや高くなる傾向にあります「３文字は繰り返しに入らない、２文字で充分」とかいう人間の感覚的な問題に対応するためにある可変パラメータです実際にNGパターンパスワードを作成し納得いくスコアの出る方を採用すれば良いと思います

２文字分割と３文字分割について

以下のソースを html ファイルとして保存しブラウザで開けば動くと思います <pre><code>&lt;html lang="ja"&gt;
&lt;head&gt;
&nbsp; &nbsp; &lt;meta charset="utf-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&nbsp; &nbsp; &lt;div id="sample_area"&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div id="operation_area"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="button" id="operation_area_reset_button"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Reset
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="button" id="operation_area_submit_button"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 判定する
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;br&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div id="log_area"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea id="log_arrea_view" style="width: 200px; height: 600px; background-color: #DDDDDD;"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/textarea&gt;
&nbsp; &nbsp; &lt;/div&gt;


&nbsp; &nbsp; &lt;div id="templates" style="display: none;"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id="template_password_view" name="o_password_text"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" id="set_up_id_you_want_1" name="password_value"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;score: &lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;2char= &lt;/span&gt;&lt;span name="password_score2"&gt;&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;, 3char= &lt;/span&gt;&lt;span name="password_score3"&gt;&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;, average= &lt;/span&gt;&lt;span name="password_score_avr"&gt;&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;


&nbsp; &nbsp; &lt;script type="text/javascript"&gt;


function prt() {
&nbsp; &nbsp; console.log.apply(null, arguments);
}


function onReady(fn) {
&nbsp; &nbsp; setTimeout(function() {
&nbsp; &nbsp; &nbsp; &nbsp; fn();
&nbsp; &nbsp; }, 1);
}


function repititionScore(text, wordLength) {
&nbsp; &nbsp; var dicionary = {};
&nbsp; &nbsp; var size = text.length;
&nbsp; &nbsp; var procSize = size - (wordLength - 1);
&nbsp; &nbsp; for(var i = 0; i &lt; procSize; i += 1) {
&nbsp; &nbsp; &nbsp; &nbsp; var word = text.substring(i, i + wordLength);
&nbsp; &nbsp; &nbsp; &nbsp; if(word in dicionary) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dicionary[word] += 1;
&nbsp; &nbsp; &nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dicionary[word] = 1;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; &nbsp; prt("text", text);
&nbsp; &nbsp; prt(dicionary);
&nbsp; &nbsp; var score = 0;
&nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; for(k in dicionary) {
&nbsp; &nbsp; &nbsp; &nbsp; score += 1 / dicionary[k] ** 2;
&nbsp; &nbsp; }
&nbsp; &nbsp; score = score / (procSize);
&nbsp; &nbsp; return score;
}


function repititionScore2(text) {
&nbsp; &nbsp; return repititionScore(text, 2);
}


function repititionScore3(text) {
&nbsp; &nbsp; return repititionScore(text, 3);
}


////////////////////////////////////////
// メインクラス
////////////////////////////////////////
function PasswordCheck() {
&nbsp; &nbsp; var self = this;
&nbsp; &nbsp; self.samples = [
&nbsp; &nbsp; &nbsp; &nbsp; "11111111",
&nbsp; &nbsp; &nbsp; &nbsp; "12121212",
&nbsp; &nbsp; &nbsp; &nbsp; "12341234",
&nbsp; &nbsp; &nbsp; &nbsp; "65872934",
&nbsp; &nbsp; &nbsp; &nbsp; "74829653",
&nbsp; &nbsp; &nbsp; &nbsp; "aaaaaaaaaa",
&nbsp; &nbsp; &nbsp; &nbsp; "abcabcabc",
&nbsp; &nbsp; &nbsp; &nbsp; "zxpzxpzxpzxpzxpzxp",
&nbsp; &nbsp; &nbsp; &nbsp; "abcabcabcxyzxyzxyz",
&nbsp; &nbsp; &nbsp; &nbsp; "xkskefstpwzyjszp",
&nbsp; &nbsp; &nbsp; &nbsp; "hcksvibdvwgruusb"
&nbsp; &nbsp; ];
&nbsp; &nbsp; self.initElements = function() {
&nbsp; &nbsp; &nbsp; &nbsp; var me = this;
&nbsp; &nbsp; &nbsp; &nbsp; return new Promise(function(resolve) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var area = document.getElementById("sample_area");
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var tpl = document.getElementById("template_password_view");
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var samples = me.samples;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; area.querySelectorAll("*").forEach(function(element) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.remove();
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //prt(element);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i &lt; samples.length; i += 1) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cln = tpl.cloneNode(true);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cln.setAttribute("id", cln.getAttribute("id") + "_" + String(i));
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var inp = cln.querySelectorAll("input")[0];
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //var inp = cln.getElementsByTagName("input")[0];
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inp.setAttribute("id", "sample-input-" + String(i));
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inp.value = samples[i];
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; area.appendChild(cln);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onReady(function() {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve(true);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; }
&nbsp; &nbsp; self.setupEvents = function() {
&nbsp; &nbsp; &nbsp; &nbsp; var me = this;
&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("operation_area_reset_button").addEventListener("click", function() {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.initElements();
&nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("operation_area_submit_button").addEventListener("click", function() {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.scoreThePassword();
&nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; }
&nbsp; &nbsp; self.scoreThePassword = function() {
&nbsp; &nbsp; &nbsp; &nbsp; var me = this;
&nbsp; &nbsp; &nbsp; &nbsp; var sample_area = document.getElementById("sample_area");
&nbsp; &nbsp; &nbsp; &nbsp; var items = sample_area.querySelectorAll('[name="o_password_text"]');
&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i &lt; items.length; i += 1) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var oinp = items[i];
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var inp = oinp.querySelectorAll('[name="password_value"]')[0];
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var score2 = repititionScore2(inp.value);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var score3 = repititionScore3(inp.value);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var score_avr = (score2 + score3) / 2;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oinp.querySelectorAll('[name="password_score2"]')[0].innerHTML = String(score2);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oinp.querySelectorAll('[name="password_score3"]')[0].innerHTML = String(score3);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oinp.querySelectorAll('[name="password_score_avr"]')[0].innerHTML = String(score_avr);
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; &nbsp; self.start = function() {
&nbsp; &nbsp; &nbsp; &nbsp; var me = this;
&nbsp; &nbsp; &nbsp; &nbsp; return me.initElements()
&nbsp; &nbsp; &nbsp; &nbsp; .then(function() {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.setupEvents();
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;
&nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; }
}


window.addEventListener('load', function(){
&nbsp; &nbsp; var x = new PasswordCheck();
&nbsp; &nbsp; x.start();
});
&nbsp; &nbsp; &lt;/script&gt;


&lt;/body&gt;
&lt;/html&gt;


</code></pre>

ソースコード

パスワードに繰り返し文字を使用させない

まず初めにDockerfile、docker-compose.yaml、.dockerignoreを作成していきます。docker init コマンドを実行すると順番に以下の選択・入力を求められるので、聞かれるままに答えていくと自動的にDockerfileなどが生成されます。（<a style="background-color:#ffffff" href="https://yoku-tech-blog.microcms.io/apis/articles/%E5%85%AC%E5%BC%8F%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0" target="_blank" rel="noopener noreferrer">公式のブログ</a>） <ul><li>使用言語</li><li>バージョン</li><li>メインパッケージの相対ディレクトリ</li><li>サーバーのリッスンポート</li></ul> <pre><code>$ docker init

Welcome to the Docker Init CLI!

This utility will walk you through creating the following files with sensible defaults for your project:
&nbsp;- .dockerignore
&nbsp;- Dockerfile
&nbsp;- docker-compose.yaml

Let's get started!

? What application platform does your project use? Go
? What version of Go do you want to use? 1.18
? What's the relative directory (with a leading .) of your main package? .
? What port does your server listen on? 8080

CREATED: .dockerignore
CREATED: Dockerfile
CREATED: docker-compose.yaml

✔ Your Docker files are ready!

Take a moment to review them and tailor them to your application.

When you're ready, start your application by running: docker compose up --build -d

Your application will be available at http://localhost:8080

To stop your application, run: docker compose down</code></pre>

1. docker init でファイルを自動生成する

次に go mod init コマンドを実行してGoモジュールを初期化します。helloworldの部分はプロジェクト名なので何でも良いです。<code>$ go mod init helloworld</code>このコマンドを実行するとgo.modが生成されます。

2. go mod init で新しいGoモジュールを初期化する

go.modが作成できたら、go get コマンドを実行してGinをインストールします。<code>$ go get -u github.com/gin-gonic/gin</code>このコマンドを実行するとgo.modが変更され、go.sumが生成されます。

3. go get でGinをインストールする

最後に main.go を作成し、以下のコードをコピペします。内容としては <code>/hellowworld</code> に向けてGETすると Hello World! が返ってくるという簡単な内容です。<pre><code>package main

import (
	"net/http"
	"github.com/gin-gonic/gin"
)

func main() {
	r := gin.Default()
	r.GET("/helloworld", func(ctx *gin.Context) {
		ctx.JSON(http.StatusOK, gin.H{
			"message": "Hello World!",
		})
	})
	r.Run()
}</code></pre> ここまで作成したら、プロジェクト内のファイルは以下のようになっているはずです。不足している場合は手順を戻って生成しましょう。<pre><code>.
├── Dockerfile
├── docker-compose.yaml
├── .dockerignore
├── go.mod
├── go.sum
└── main.go</code></pre>

4. main.goを用意する

<code>$ docker compose up --build</code> を実行します。<code>Listening and serving HTTP on :8080</code> と表示されたらOKです。<pre><code>&nbsp;✔ Container docker_init_test-server-1&nbsp;Recreated&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.1s
Attaching to docker_init_test-server-1
docker_init_test-server-1&nbsp;| [GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached.
docker_init_test-server-1&nbsp;|
docker_init_test-server-1&nbsp;| [GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production.
docker_init_test-server-1&nbsp;|&nbsp;- using env:&nbsp;&nbsp;&nbsp;export GIN_MODE=release
docker_init_test-server-1&nbsp;|&nbsp;- using code:&nbsp;&nbsp;&nbsp;gin.SetMode(gin.ReleaseMode)
docker_init_test-server-1&nbsp;|
docker_init_test-server-1&nbsp;| [GIN-debug] GET&nbsp;&nbsp;/helloworld&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&gt; main.main.func1 (3 handlers)
docker_init_test-server-1&nbsp;| [GIN-debug] [WARNING] You trusted all proxies, this is NOT safe. We recommend you to set a value.
docker_init_test-server-1&nbsp;| Please check https://pkg.go.dev/github.com/gin-gonic/gin#readme-don-t-trust-all-proxies for details.
docker_init_test-server-1&nbsp;| [GIN-debug] Environment variable PORT is undefined. Using port :8080 by default
docker_init_test-server-1&nbsp;| [GIN-debug] Listening and serving HTTP on :8080</code></pre>

5. docker compose up --build でコンテナをビルドして立ち上げる

サーバーが立ち上がったはずなのでリクエストを投げて確認してみましょう。curlコマンドを使って /helloworld に向けてGETリクエストを投げます。<code>$ curl http://localhost:8080/helloworld</code> 以下のようなレスポンスが返ってきていればOKです。<pre><code>&nbsp;% curl http://localhost:8080/helloworld
{"message":"Hello World!"}%</code></pre>

6. curlでレスポンスが返ってくるか確認

本題

エラー例）<pre><code>&nbsp;=&gt; ERROR [build 3/4] RUN --mount=type=cache,target=/go/pkg/mod/&nbsp;&nbsp;&nbsp;--mount=type=bind,source=go.sum,target=go.sum&nbsp;&nbsp;&nbsp;&nbsp;0.2s
------
&nbsp;&gt; [build 3/4] RUN --mount=type=cache,target=/go/pkg/mod/&nbsp;&nbsp;&nbsp;--mount=type=bind,source=go.sum,target=go.sum&nbsp;&nbsp;&nbsp;--mount=type=bind,source=go.mod,target=go.mod&nbsp;&nbsp;&nbsp;go mod download -x:
#0 0.205 go: errors parsing go.mod:
#0 0.205 /src/go.mod:3: invalid go version '1.21.3': must match format 1.23
------
failed to solve: executor failed running [/bin/sh -c go mod download -x]: exit code: 1</code></pre> こんなエラーが発生したら、go.modに記載されているgoのバージョンを <code>1.21.3</code> → <code>1.21</code> のように修正し、その後再度 <code>$ docker comose up --build</code> を実行します。 <pre><code>module helloworld

go 1.21.3 ←こいつを1.21に変更

require (
	github.com/bytedance/sonic v1.10.2 // indirect
	github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d // indirect
	github.com/chenzhuoyu/iasm v0.9.1 // indirect
	github.com/gabriel-vasile/mimetype v1.4.3 // indirect
	github.com/gin-contrib/sse v0.1.0 // indirect
	github.com/gin-gonic/gin v1.9.1 // indirect</code></pre> おそらくエラーが解消してサーバーが立ち上がります。

docker compose up --buildでエラーが出るとき

おまけ

docker init コマンドが非常に便利ですね。 もし、ここまで記事を読んでDockerってそもそもなんぞやと思った方はこちらの記事で解説しているので合わせてどうそ。<a href="https://build.yoku.co.jp/articles/a_y-w8d81" target="_blank" rel="noopener noreferrer">https://build.yoku.co.jp/articles/a_y-w8d81</a>

Docker+Go+GinのAPI開発環境を5分で作る

趣味で自分用のアプリケーションの実装であれば、前回の実装で十分というよりオーバースペックくらいだと思います。しかし、実際の業務システムであれば、異常系も考慮しなければいけません。処理の途中で異常終了するケースを考えてみます。<pre><code> def reserve(
 organizerId: UserId,
 participantIds: List[UserId],
 startAt: LocalDateTime,
 endAt: LocalDateTime,
 title: String,
 detail: String
 ): Unit =
 val (meeting, event) =
 Meeting.create(
 organizerId,
 participantIds,
 startAt,
 endAt,
 title,
 detail
 )
 meetingRepository.save(meeting) // ①
 val users = userRepsitory.getByIds(organizerId :: participantIds)
 publisher.publish(event) // ②</code></pre> <code>reserve</code>メソッド全体にDBトランザクションが張られているとします。つまり、<code>reserve</code>メソッドのどこかの処理で異常終了した場合はロールバックします。<ul><li>①で落ちた場合<ul><li>DBはロールバックします。ミーティング作成通知（及び通知予約）も送られていないため、処理全体としてなかったことと同じであり、整合性は保たれています。</li></ul></li><li>②で落ちた場合<ul><li>ミーティング作成通知（及び通知予約）の途中で落ちるため、何人かにはミーティングが作成された（もしくは開始・終了した）旨の通知が届くことでしょう。しかしDBはロールバックするため、実際にはミーティングは作成されておらず、整合性が保たれなくなってしまいます。</li></ul></li></ul>この問題を回避するためにはどうしたらいいでしょうか。

問題点

ミーティング作成と、作成後の通知が同じトランザクション内で処理してしまっていることが問題と言えます。なのでトランザクションを切り離したいです。つまり、通知処理はあくまでミーティング作成のコミットが成功してから走るようにしたいです。また、後続のトランザクションが失敗した場合、後続のみ再実行できるようにしたいので、同じアプリケーションサービス内で複数トランザクションを実行するのではなく、<code>reserve</code>メソッド内ではあくまでミーティング作成のトランザクションのみに責任を持ち、通知は別プロセスで（何らかの方法で）行うようにします。 通知は別プロセスで行うとして、ミーティングが作成されたという事実を知る必要があります。ドメインイベントを生成するようにしたので、それ自体をミーティングオブジェクトと同じDBに保存してしまいましょう。そうすれば同じDBトランザクションで整合性を担保できます。

対応方針

ミーティングオブジェクトをDBに保存することを決めたので、テーブル設計を考えます。各イベントごとにテーブルを用意してもいいのですが、コストがかかるためすべてのイベントを同じテーブルに保存する方向で考えます。以下のようなカラム構成でどうでしょうか。<ul><li><code>id</code> (string): イベントID(UUID)</li><li><code>type</code> (string): イベント種別（例："MeetingCreated", "MeetingDeleted"）</li><li><code>occuredOn</code> (datetime): イベント発生日時</li><li><code>details</code> (json): イベント詳細（例：{"meetingId": 1, "organizerId": 1, ...}）</li><li><code>processed_at</code> (datetime): イベント処理完了日時</li><li><code>created_at</code> (timestamp): 作成日時</li><li><code>updated_at</code> (timestamp): 更新日時</li></ul>イベントを一意に指定するIDがあったほうが何かと便利だと思うので、<code>id</code>を付与しました。イベント種別は<code>type</code>で識別します。またイベントごとに異なるカラムについては<code>details</code>で吸収できるようにしました。別プロセスでイベントを処理する際にすでに処理済みなのかを知る必要があるため、<code>processed_at</code>を付与しました。 次に実装です。

イベント作成と通知が別プロセスということになったので、まずはイベント作成の方の実装からしてみます。<pre><code>@@ -100,6 +100,10 @@ trait MeetingRepository:
&nbsp;trait DomainEvent:
&nbsp; &nbsp;val occuredOn = LocalDateTime.now()
&nbsp;
+trait DomainEventRepository:
+&nbsp; def save[T &lt;: DomainEvent](event: T): Unit =
+&nbsp; &nbsp; println(event)
+
&nbsp;class MeetingCreated(
&nbsp; &nbsp; &nbsp;val meetingId: MeetingId,
&nbsp; &nbsp; &nbsp;val organizerId: UserId,
@@ -171,13 +175,9 @@ class EmailReserveService(
&nbsp;
&nbsp;class MeetingService(
&nbsp; &nbsp; &nbsp;meetingRepository: MeetingRepository,
-&nbsp; &nbsp; userRepsitory: UserRepository
+&nbsp; &nbsp; userRepsitory: UserRepository,
+&nbsp; &nbsp; eventRepository: DomainEventRepository
&nbsp;):
-&nbsp; private val publisher = DomainEventPublisher(
-&nbsp; &nbsp; EmailSendService(userRepsitory, EmailSender()),
-&nbsp; &nbsp; EmailReserveService(userRepsitory, EmailReserver())
-&nbsp; )
-
&nbsp; &nbsp;def reserve(
&nbsp; &nbsp; &nbsp; &nbsp;organizerId: UserId,
&nbsp; &nbsp; &nbsp; &nbsp;participantIds: List[UserId],
@@ -196,8 +196,7 @@ class MeetingService(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;detail
&nbsp; &nbsp; &nbsp; &nbsp;)
&nbsp; &nbsp; &nbsp;meetingRepository.save(meeting)
-&nbsp; &nbsp; publisher.publish(event)
+&nbsp; &nbsp; eventRepository.save(event)
&nbsp;
&nbsp; &nbsp;def reserveWithFollowed(
&nbsp; &nbsp; &nbsp; &nbsp;organizerId: UserId,
@@ -218,13 +217,10 @@ class MeetingService(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;detail
&nbsp; &nbsp; &nbsp; &nbsp;)
&nbsp; &nbsp; &nbsp;meetingRepository.save(meeting)
-&nbsp; &nbsp; publisher.publish(event)
+&nbsp; &nbsp; eventRepository.save(event)
&nbsp;
&nbsp; &nbsp;def remove(meetingId: MeetingId): Unit =
&nbsp; &nbsp; &nbsp;val meeting = meetingRepository.get(meetingId)
&nbsp; &nbsp; &nbsp;val event = meeting.delete
&nbsp; &nbsp; &nbsp;meetingRepository.delete(meetingId, event)
-&nbsp; &nbsp; publisher.publish(event)
+&nbsp; &nbsp; eventRepository.save(event)</code></pre> <code>publisher.publish</code>の代わりに<code>eventRepository.save</code>を呼ぶようになっただけです。簡単ですね。 では続いて、通知処理です。<pre><code>@@ -99,11 +99,28 @@ trait MeetingRepository:
&nbsp;
&nbsp;trait DomainEvent:
&nbsp; &nbsp;val occuredOn = LocalDateTime.now()
+&nbsp; var processedAt: Option[LocalDateTime] = None
+
+&nbsp; def processCompleted(): Unit =
+&nbsp; &nbsp; processedAt = Some(LocalDateTime.now())
&nbsp;
&nbsp;trait DomainEventRepository:
&nbsp; &nbsp;def save[T &lt;: DomainEvent](event: T): Unit =
&nbsp; &nbsp; &nbsp;println(event)
&nbsp;
+&nbsp; def getUnprocessed: List[DomainEvent] =
+&nbsp; &nbsp; List(
+&nbsp; &nbsp; &nbsp; MeetingCreated(
+&nbsp; &nbsp; &nbsp; &nbsp; MeetingId(1),
+&nbsp; &nbsp; &nbsp; &nbsp; UserId(1),
+&nbsp; &nbsp; &nbsp; &nbsp; List(UserId(2), UserId(3)),
+&nbsp; &nbsp; &nbsp; &nbsp; title = "ミーティング1",
+&nbsp; &nbsp; &nbsp; &nbsp; detail = "全員集合",
+&nbsp; &nbsp; &nbsp; &nbsp; startAt = LocalDateTime.now(),
+&nbsp; &nbsp; &nbsp; &nbsp; endAt = LocalDateTime.now()
+&nbsp; &nbsp; &nbsp; )
+&nbsp; &nbsp; )
+
&nbsp;class MeetingCreated(
&nbsp; &nbsp; &nbsp;val meetingId: MeetingId,
&nbsp; &nbsp; &nbsp;val organizerId: UserId,
@@ -173,6 +190,24 @@ class EmailReserveService(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;reserver.reserve(u.email, e.title, e.detail, e.endAt)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;})
&nbsp;
+class EventProcessService(
+&nbsp; &nbsp; eventRepository: DomainEventRepository,
+&nbsp; &nbsp; userRepsitory: UserRepository
+):
+&nbsp; val publisher = DomainEventPublisher(
+&nbsp; &nbsp; EmailSendService(userRepsitory, EmailSender()),
+&nbsp; &nbsp; EmailReserveService(userRepsitory, EmailReserver())
+&nbsp; )
+
+&nbsp; def process(): Unit =
+&nbsp; &nbsp; val events = eventRepository.getUnprocessed
+&nbsp; &nbsp; events.foreach(processEvent)
+
+&nbsp; private def processEvent(event: DomainEvent): Unit =
+&nbsp; &nbsp; publisher.publish(event)
+&nbsp; &nbsp; event.processCompleted()
+&nbsp; &nbsp; eventRepository.save(event)
+
&nbsp;class MeetingService(
&nbsp; &nbsp; &nbsp;meetingRepository: MeetingRepository,
&nbsp; &nbsp; &nbsp;userRepsitory: UserRepository,</code></pre> 未処理のイベントリストを取得し、それぞれのイベントについて<code>publish</code>し、完了時間を記録してからDBに保存します。各イベント発生時の処理と別プロセスで行うという大幅な仕様変更ですが、実装的にはそれほど大きく変わっていません。（別プロセスの具体的な方法については未実装ですが・・・）

実装修正

ところで、今の実装でも、イベントの処理途中で落ちた場合のことを考えると、通知などは行われますが完了時間の記録は行われないため、同じイベントが再度発行されてしまいます。これはDBトランザクションでない以上、どうしようもないと思います。ただし、テーブル設計でイベントIDを付与しているため、同じイベントが発行されてもリモートのサブスクライバ側で処理済みの場合は破棄することが可能です。イベント発行の際の冪等性は留意が必要なテーマだと思います。

重複排除

今回は、異常系について考慮する中で、イベントの保存と発行を別プロセスで行うという仕様変更を行いました。なお、「何らかの方法で」別プロセスで行うと言いましたが、それを実現する具体的な技術論については自分がまだ勉強不足のため、別の機会に譲ろうと思います。あと、実はまだ一度も実行していないので、そろそろちゃんと動かしてみようと思います。それについても次回以降に回したいと思います。 ひたすらリファクタを繰り返してきましたが、今回でかなり理想的な形に近づいたと思います。現時点でのコード全容を貼っておきます。<pre><code>// ドメイン層
class UserId(val value: Int) extends AnyVal
class Email(val value: String) extends AnyVal

class User(val id: UserId, val email: Email):
 def followed: List[User] =
 List(
 User(UserId(1), Email("hoge1@example.com")),
 User(UserId(2), Email("hoge2@example.com"))
 )

trait UserRepository:
 def get(id: UserId) =
 User(id, Email("hoge@example.com"))

 def getByIds(ids: List[UserId]) =
 ids.map(User(_, Email("hoge@example.com")))

class MeetingId(val value: Int) extends AnyVal

class Meeting(
 val id: MeetingId,
 val organizerId: UserId,
 val participantIds: List[UserId],
 val startAt: LocalDateTime,
 val endAt: LocalDateTime,
 val title: String,
 val detail: String
):
 def delete: MeetingDeleted =
 MeetingDeleted(id, organizerId, participantIds)

object Meeting:
 def create(
 organizerId: UserId,
 participantIds: List[UserId],
 startAt: LocalDateTime,
 endAt: LocalDateTime,
 title: String,
 detail: String
 ): (Meeting, MeetingCreated) =
 val id = MeetingId(1)
 val meeting =
 Meeting(id, organizerId, participantIds, startAt, endAt, title, detail)
 val event = MeetingCreated(
 id,
 organizerId,
 participantIds,
 title,
 detail,
 startAt,
 endAt
 )
 (meeting, event)

trait MeetingRepository:
 def save(meeting: Meeting): Unit
 def get(meetingId: MeetingId): Meeting
 def delete(meetingId: MeetingId, event: MeetingDeleted): Unit

trait DomainEvent:
 val occuredOn = LocalDateTime.now()
 var processedAt: Option[LocalDateTime] = None

 def processCompleted(): Unit =
 processedAt = Some(LocalDateTime.now())

trait DomainEventRepository:
 def save[T &lt;: DomainEvent](event: T): Unit =
 println(event)

 def getUnprocessed: List[DomainEvent] =
 List(
 MeetingCreated(
 MeetingId(1),
 UserId(1),
 List(UserId(2), UserId(3)),
 title = "ミーティング1",
 detail = "全員集合",
 startAt = LocalDateTime.now(),
 endAt = LocalDateTime.now()
 )
 )

class MeetingCreated(
 val meetingId: MeetingId,
 val organizerId: UserId,
 val participantIds: List[UserId],
 val title: String,
 val detail: String,
 val startAt: LocalDateTime,
 val endAt: LocalDateTime
) extends DomainEvent

class MeetingDeleted(
 val meetingId: MeetingId,
 val organizerId: UserId,
 val participantIds: List[UserId]
) extends DomainEvent

trait DomainEventObserver:
 def respondTo[T &lt;: DomainEvent](event: T): Unit

class DomainEventPublisher(obs: DomainEventObserver*):
 def publish[T &lt;: DomainEvent](event: T): Unit =
 obs.foreach(_.respondTo(event))

// インフラストラクチャ層
class EmailSender:
 def send(to: Email, subject: String, body: String): Unit =
 println(s"email send to $to")

class EmailReserver:
 def reserve(
 to: Email,
 subject: String,
 body: String,
 when: LocalDateTime
 ): Unit =
 println(s"email reserved sending to $to when $when")

// アプリケーション層
class EmailSendService(
 userRepsitory: UserRepository,
 sender: EmailSender
) extends DomainEventObserver:
 override def respondTo[T &lt;: DomainEvent](event: T): Unit =
 event match
 case e: MeetingCreated =&gt;
 val users =
 userRepsitory.getByIds(e.organizerId :: e.participantIds)
 users.foreach(u =&gt; sender.send(u.email, e.title, e.detail))
 case e: MeetingDeleted =&gt;
 val users =
 userRepsitory.getByIds(e.organizerId :: e.participantIds)
 users.foreach(u =&gt;
 sender.send(u.email, "ミーティング削除のお知らせ", "ミーティングが削除されました")
 )

class EmailReserveService(
 userRepsitory: UserRepository,
 reserver: EmailReserver
) extends DomainEventObserver:
 override def respondTo[T &lt;: DomainEvent](event: T): Unit =
 event match
 case e: MeetingCreated =&gt;
 val users =
 userRepsitory.getByIds(e.organizerId :: e.participantIds)
 users.foreach(u =&gt; {
 reserver.reserve(u.email, e.title, e.detail, e.startAt)
 reserver.reserve(u.email, e.title, e.detail, e.endAt)
 })

class EventProcessService(
 eventRepository: DomainEventRepository,
 userRepsitory: UserRepository
):
 val publisher = DomainEventPublisher(
 EmailSendService(userRepsitory, EmailSender()),
 EmailReserveService(userRepsitory, EmailReserver())
 )

 def process(): Unit =
 val events = eventRepository.getUnprocessed
 events.foreach(processEvent)

 private def processEvent(event: DomainEvent): Unit =
 publisher.publish(event)
 event.processCompleted()
 eventRepository.save(event)

class MeetingService(
 meetingRepository: MeetingRepository,
 userRepsitory: UserRepository,
 eventRepository: DomainEventRepository
):
 def reserve(
 organizerId: UserId,
 participantIds: List[UserId],
 startAt: LocalDateTime,
 endAt: LocalDateTime,
 title: String,
 detail: String
 ): Unit =
 val (meeting, event) =
 Meeting.create(
 organizerId,
 participantIds,
 startAt,
 endAt,
 title,
 detail
 )
 meetingRepository.save(meeting)
 eventRepository.save(event)

 def reserveWithFollowed(
 organizerId: UserId,
 startAt: LocalDateTime,
 endAt: LocalDateTime,
 title: String,
 detail: String
 ): Unit =
 val organizer = userRepsitory.get(organizerId)
 val followers = organizer.followed
 val (meeting, event) =
 Meeting.create(
 organizerId,
 followers.map(_.id),
 startAt,
 endAt,
 title,
 detail
 )
 meetingRepository.save(meeting)
 eventRepository.save(event)

 def remove(meetingId: MeetingId): Unit =
 val meeting = meetingRepository.get(meetingId)
 val event = meeting.delete
 meetingRepository.delete(meetingId, event)
 eventRepository.save(event)</code></pre>

異常系を考える

Scalaの型について（応用編その４）

マウスゼスチャに代表されるポインティングデバイスの軌道でなんらかのアクションをするというのが基本的な使い方になると思いますＺ の軌道を描いたらメニュー起動とか、VRゲームで手をトラッキングして星型を描いていたら魔法が発動するとかでしょうか？部屋にトラッキング装置を設置して部屋の証明や暖房の調整ができてもいいかもしれません

手書き認識ロジックの使い道

処理１．描き始めから描き終わりまでのXY座標（マウスの軌道）を全て記録処理２．三角形判定「処理１」で記録した座標配列を解析し三角形であるかの判定をします条件１．折返し（角）が３つ以上ある（任意に設定した最小角度以上であり、最大角度以下である事）条件２．３つの角全てが同一方向への回転である（全部右回り又は全部左回り）処理３．「処理２」の条件を全て満たしていたら三角形と断定し、３つの折返し部分を頂点とした三角形を描画する おおまかにこのような流れで三角形の判定を行っています

処理の流れ

手書き図形の認識（ゼスチャー認識）

マウスクリックで記録開始（描く間はずっと押しっぱなし）クリック時のX座標、Y座標を保存マウス移動が検出されたらX座標、Y座標を追加で保存していきますマウスボタンが離されたら記録終了とし図形判定処理を行います <pre><code>&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mousedown", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prt("mousedown");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationReset();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingX.push(event.offsetX);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingY.push(event.offsetY);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMousePress = true;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMouseRelease = false;
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mouseup", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prt("mouseup");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMousePress = false;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMouseRelease = true;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.drawEnd();
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mousemove", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(me.operationMousePress === true) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingX.push(event.offsetX);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingY.push(event.offsetY);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var x = me.mouseTrackingX;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var y = me.mouseTrackingY;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var idxA = x.length - 2;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var idxB = x.length - 1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var ctx = canvas.getContext('2d');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.strokeStyle = "rgb(0, 0, 0)";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(x[idxA], y[idxA]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(x[idxB], y[idxB]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;});</code></pre>

手書き軌道の記録

例えば記録されたXY座標データが１００個だとしてその中から２０フレームだけを処理対象とする方法を取ります手ブレの酷い箇所を雑に取り除くためです、丁寧に手ブレ検出する方法もあるのかもしれませんが良いロジックを思いつかなかったので解析粒度を粗くすることで細かなブレを無視するというロジックにしました４個スキップして５個目だけ採用するという処理で配列を作り直し、中間データのブレ（があると決めつけた区間）を無視します記録したデータをそのまま解析すると瞬間的な手ブレ箇所を三角形だと誤認識してしまいますその際にスキップする個数は動的で、大きな三角形であれば粗く解析する（スキップ数多い）、小さな三角形であれば細かく解析する（スキップ数少ない）、として解析します<pre><code>&nbsp;&nbsp;&nbsp;&nbsp;var skipRate = parseInt(me.mouseTrackingX.length / self.constSensitivity);
&nbsp;&nbsp;&nbsp;&nbsp;var x = n1d.skipSampling(me.mouseTrackingX, skipRate);
&nbsp;&nbsp;&nbsp;&nbsp;var y = n1d.skipSampling(me.mouseTrackingY, skipRate);</code></pre>

解析前処理-スキップサンプリング

閉じない三角形を描かれた場合を考慮しXY座標記録の先頭のいくつかをXY座標の末尾に追加して図形を閉じた状態にします本処理を実施することで３個の角を描かれた場合でも２個の角だけの閉じていない三角形でも３個角を必要とする同じロジックで三角形判定が行なえます<pre><code>&nbsp;&nbsp;&nbsp;&nbsp;x = x.concat(x.slice(0, me.constRingBufferSize));
&nbsp;&nbsp;&nbsp;&nbsp;y = y.concat(y.slice(0, me.constRingBufferSize));</code></pre>

解析前処理-描画軌道を閉じる

前処理でデータを整えたら三角形判定処理を実行しますプログラム中の trackingIsTriangle という関数になりますXY座標配列から３点の座標を取得処理１．「折返し」と認識できる箇所を３箇所以上検出する　　処理１－１．３点の成す角度を取得　　処理１－２．「処理１－１」の角度が任意の角度範囲であれば「折返し」として保存、そうでなければ保存しない　　　　処理１－２－１．回転方向を取得し保存処理２．以下の条件を全て満たしていたら「三角形成立」と、３点座標の構造体を返却、そうでない場合は「三角形不成立」取れただけの「折返し」座標の構造体を返却　　条件１．「処理１」の結果、３箇所以上の「折返し」が発見されている　　条件２．全ての「折返し」で回転方向が同一である <h3 id="hfb4b7ccd8d">角度の算出</h3>以下の資料を参考にした■3点の座標から角度と回転方向を求める方法を解説！プログラムで自動化！<a href="https://youta-blog.com/angle-and-rotation-direction/" target="_blank" rel="noopener noreferrer">https://youta-blog.com/angle-and-rotation-direction/</a> ■３点の座標から簡単に角度と回転方向を求める．<a href="https://www5d.biglobe.ne.jp/~noocyte/Programming/Geometry/RotationDirection.html#GetAngleOnly" target="_blank" rel="noopener noreferrer">https://www5d.biglobe.ne.jp/~noocyte/Programming/Geometry/RotationDirection.html#GetAngleOnly</a> 点A → 点B → 点C の順番で描画された場合に３点の成す角度（Bの角度）を求めます２つのベクトル →BA、→BC とし内積を取り、公式に当てはめて cosθ を求めます求めた cosθ を arccos 関数で ラジアンに変換します詳細は参考資料としたサイトを御覧ください（手抜き） <pre><code>function angleOf3Points(a, b, c) {
&nbsp;&nbsp;var vBA = [a.x - b.x, a.y - b.y];
&nbsp;&nbsp;var vBC = [c.x - b.x, c.y - b.y];
&nbsp;&nbsp;var dot = n2d.dot(vBA, vBC);
&nbsp;&nbsp;var normBA = Math.sqrt(Math.pow(vBA[0], 2) + Math.pow(vBA[1], 2));
&nbsp;&nbsp;var normBC = Math.sqrt(Math.pow(vBC[0], 2) + Math.pow(vBC[1], 2));
&nbsp;&nbsp;var cosTheta = dot / (normBA * normBC);
&nbsp;&nbsp;return Math.acos(cosTheta);
}</code></pre> <h3 id="hbed541ce77">回転方向の算出（描画方向の特定）</h3> 以下の資料を参考にした■3点の回転方向を調べる<a href="https://qiita.com/tydesign/items/d41ac74b5effd87141b8" target="_blank" rel="noopener noreferrer">https://qiita.com/tydesign/items/d41ac74b5effd87141b8</a> 点A → 点B → 点C の順番で描画された場合に描画方向を特定し、その描画順が三角形を右回りで描こうとしているのか、左回りで描こうとしているのかを特定します点A → 点B → 点C の描画を「点A を中心に 点B から 点C へと回転変形した」と考えます→AB と →AC の傾きを比較して →AC のほうが大きく傾いているのであれば左回り、そうでなければ右回りとします詳細は参考資料としたサイトを御覧ください（手抜き） <pre><code>&nbsp;&nbsp;// 折返しと認識する「最小角度」「最大角度」を設定する
&nbsp;&nbsp;// 折返しが３個以上ある場合は検査処理を実行
&nbsp;&nbsp;// 発見した折返しの最初の３個について検査処理を実行
&nbsp;&nbsp;// ３箇所全てが同じ方向への回転だった場合は三角形だとする
&nbsp;&nbsp;var dataRotate = [];
&nbsp;&nbsp;var dataRad = [];
&nbsp;&nbsp;var dataX = []
&nbsp;&nbsp;var dataY = [];
&nbsp;&nbsp;var count = 0;
&nbsp;&nbsp;for(var i = 0; i &lt; size - 2; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;var A = {x: x[i + 0], y: y[i + 0]};
&nbsp;&nbsp;&nbsp;&nbsp;var B = {x: x[i + 1], y: y[i + 1]};
&nbsp;&nbsp;&nbsp;&nbsp;var C = {x: x[i + 2], y: y[i + 2]};
&nbsp;&nbsp;&nbsp;&nbsp;var rad = angleOf3Points(A, B, C);
&nbsp;&nbsp;&nbsp;&nbsp;if(rad &gt; minRad &amp;&amp; rad &lt; maxRad) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var rotate = rotateDirectionOf3Points(A, B, C);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataRotate.push(rotate);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataRad.push(rad);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataX.push(B.x);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataY.push(B.y);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count += 1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(count &gt;= 3) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;//prt("dataRotate", dataRotate);
&nbsp;&nbsp;//prt("dataRad", dataRad);
&nbsp;&nbsp;//prt("dataX", dataX);
&nbsp;&nbsp;//prt("dataY", dataY);
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;// 折返しとみなせる物が３箇所あり、３箇所の回転方向が同一であるなら三角形の描画とする
&nbsp;&nbsp;if(count &gt;= 3 &amp;&amp; n1d.allEqual(dataRotate, dataRotate[0])) {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ok: true,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: dataX.length,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: dataX,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: dataY,
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ok: false,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: dataX.length,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: dataX,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: dataY,
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}</code></pre>

三角形判定処理

三角形の検出が終わったら特に特殊なロジックはありません返却された三角形のパラメータに従い三角形を描画します 処理解説は以上です

描画処理

詳細な処理の流れ

サンプリングの粒度変更ロジックはまだ改善の余地があります、現状は「描いた長さに比例して粒度調整」ですが点と点の間の距離を見て区間別に粒度調整するのが望ましいと思います、点ABCの→ABは高速に描き、→BCはゆっくり描かれていたとしますその際に→ABは細かい粒度で判定して問題なく、→BCは荒い粒度でブレを軽減させる処置が必要になりますこれは実際にある問題で三角形を描く際にそれぞれの辺を描く時の自分の手の動きを注意して観察すると分かります、素早くなめらかに描ける辺とブレやすく描くのが遅い辺があるはずです、人間の手の動きではXY軸全てに精密動作はできないはずです、人それぞれ癖があります

改善点１－サンプリングの改善

今回のロジックは書き順に完全に依存しています、そもそもがゼスチャーの延長なので大きな問題ではないのですが。ただし図形を認識させるという点で考えた場合に書き順を無視して輪郭や線の検出に特化したほうが効率が良い、精度が高い場合も考えられます目的によっては根本的なロジック変更を考えたほうが良さそうです

改善点２－書き順に依存しない図形認識の採用

三角形は１つの角度と２辺が決まれば三角形を決定することが可能です、長方形は直角部分と２辺が決まれば四角形全体を決定可能です、このように理論的に可能な条件と人間に「三角形を描いてください」と指示した場合には大きな差があります、エンジニア寄りの人間は「１つの角度と２辺が決まれば三角形を決定できるのだからそれだけ描けば認識するんでしょ？」と思う可能性が高いです人種や用途によって個人の認識差がありロジックが大幅に異なる事もありますので、自動認識ソフトを作成する時は誰向けになにを目的とした物を作るのかを考える必要があります、具体的には試験する際にエンジニアだけで終わらせずに非エンジニアにも触らせたりすればそれで良い話だとは思います

図形認識の考え方

改善点など

<pre><code>&lt;html lang="ja"&gt;
&lt;head&gt;
&nbsp;&nbsp;&lt;meta charset="utf-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&nbsp;&nbsp;&lt;div id="draw_area"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;canvas id="draw_area_canvas" width="800" height="600" style="background-color: #bbbbbb;"&gt;&lt;/canvas&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div id="config_area"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="config_area_ring_buffer_size"&gt; データの最初と最後を繋げる配列の数&lt;br&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="config_area_minimum_radian"&gt; 最小角度係数（π／n） の n に使用されます&lt;br&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="config_area_maximum_radian"&gt; 最大角度係数（π／n） の n に使用されます&lt;br&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="config_area_sensitivity"&gt; 座標サンプリング係数、大きいと荒く、小さいと細かく座標を検査するようになります&lt;br&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type="button" id="config_area_reset_button"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Reset
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/button&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;br&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div id="log_area"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea id="log_arrea_view" style="width: 200px; height: 600px; background-color: #DDDDDD;"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/textarea&gt;
&nbsp;&nbsp;&lt;/div&gt;

&nbsp;&nbsp;&lt;script type="text/javascript"&gt;

function prt() {
&nbsp;&nbsp;console.log.apply(null, arguments);
}

function Number1D() {
&nbsp;&nbsp;var self = this;
&nbsp;&nbsp;self.allEqual = function(x, n) {
&nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0; i &lt; x.length; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(x[i] != n) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;return true;
&nbsp;&nbsp;}
&nbsp;&nbsp;self.skipSampling = function(x, n) {
&nbsp;&nbsp;&nbsp;&nbsp;var y = [];
&nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0; i &lt; x.length; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(i % n == 0) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y.push(x[i]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;return y;
&nbsp;&nbsp;}
}
var n1d = new Number1D();

function Number2D() {
&nbsp;&nbsp;var self = this;
&nbsp;&nbsp;self.dot = function(a, b) {
&nbsp;&nbsp;&nbsp;&nbsp;var dot = 0;
&nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0; i &lt; 2; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dot += a[i] * b[i];
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;return dot;
&nbsp;&nbsp;}
}
var n2d = new Number2D();

////////////////////////////////////////
// 点A→B→Cの順番に描画した場合にその描画が右回りか左回りかの判定
// 右回り = 0
// 左回り = 1
////////////////////////////////////////
function rotateDirectionOf3Points(a, b, c) {
&nbsp;&nbsp;var dy1 = b.y - a.y;
&nbsp;&nbsp;var dx1 = b.x - a.x;
&nbsp;&nbsp;var dy2 = c.y - a.y;
&nbsp;&nbsp;var dx2 = c.x - a.x;
&nbsp;&nbsp;//var leftN = dy1 / dx1;
&nbsp;&nbsp;//var rightN = dy2 / dx2;
&nbsp;&nbsp;var leftN = dx2 * dy1;
&nbsp;&nbsp;var rightN = dx1 * dy2;
&nbsp;&nbsp;if(leftN &lt; rightN) {
&nbsp;&nbsp;&nbsp;&nbsp;return 0;
&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;return 1;
&nbsp;&nbsp;}
}

function angleOf3Points(a, b, c) {
&nbsp;&nbsp;var vBA = [a.x - b.x, a.y - b.y];
&nbsp;&nbsp;var vBC = [c.x - b.x, c.y - b.y];
&nbsp;&nbsp;var dot = n2d.dot(vBA, vBC);
&nbsp;&nbsp;var normBA = Math.sqrt(Math.pow(vBA[0], 2) + Math.pow(vBA[1], 2));
&nbsp;&nbsp;var normBC = Math.sqrt(Math.pow(vBC[0], 2) + Math.pow(vBC[1], 2));
&nbsp;&nbsp;var cosTheta = dot / (normBA * normBC);
&nbsp;&nbsp;return Math.acos(cosTheta);
}

function trackingIsTriangle(size, minRad, maxRad, x, y) {
&nbsp;&nbsp;// 折返しと認識する「最小角度」「最大角度」を設定する
&nbsp;&nbsp;// 折返しが３個以上ある場合は検査処理を実行
&nbsp;&nbsp;// 発見した折返しの最初の３個について検査処理を実行
&nbsp;&nbsp;// ３箇所全てが同じ方向への回転だった場合は三角形だとする
&nbsp;&nbsp;var dataRotate = [];
&nbsp;&nbsp;var dataRad = [];
&nbsp;&nbsp;var dataX = []
&nbsp;&nbsp;var dataY = [];
&nbsp;&nbsp;var count = 0;
&nbsp;&nbsp;for(var i = 0; i &lt; size - 2; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;var A = {x: x[i + 0], y: y[i + 0]};
&nbsp;&nbsp;&nbsp;&nbsp;var B = {x: x[i + 1], y: y[i + 1]};
&nbsp;&nbsp;&nbsp;&nbsp;var C = {x: x[i + 2], y: y[i + 2]};
&nbsp;&nbsp;&nbsp;&nbsp;var rad = angleOf3Points(A, B, C);
&nbsp;&nbsp;&nbsp;&nbsp;if(rad &gt; minRad &amp;&amp; rad &lt; maxRad) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var rotate = rotateDirectionOf3Points(A, B, C);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataRotate.push(rotate);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataRad.push(rad);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataX.push(B.x);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataY.push(B.y);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count += 1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(count &gt;= 3) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;//prt("dataRotate", dataRotate);
&nbsp;&nbsp;//prt("dataRad", dataRad);
&nbsp;&nbsp;//prt("dataX", dataX);
&nbsp;&nbsp;//prt("dataY", dataY);
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;// 折返しとみなせる物が３箇所あり、３箇所の回転方向が同一であるなら三角形の描画とする
&nbsp;&nbsp;if(count &gt;= 3 &amp;&amp; n1d.allEqual(dataRotate, dataRotate[0])) {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ok: true,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: dataX.length,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: dataX,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: dataY,
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ok: false,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: dataX.length,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: dataX,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: dataY,
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
}

////////////////////////////////////////
// 手書き図形補正機能クラス
////////////////////////////////////////
function HandWriteFigureCorrection() {
&nbsp;&nbsp;var self = this;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;// 定数
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;self.constCanvasId = "draw_area_canvas";
&nbsp;&nbsp;self.constViewLogId = "log_arrea_view";
&nbsp;&nbsp;self.constConfigRingBufferSizeId = "config_area_ring_buffer_size";
&nbsp;&nbsp;self.constConfigMinimumRadianCoeffId = "config_area_minimum_radian";
&nbsp;&nbsp;self.constConfigMaximumRadianCoeffId = "config_area_maximum_radian";
&nbsp;&nbsp;self.constConfigSensitivityId = "config_area_sensitivity";
&nbsp;&nbsp;self.constConfigResetButtonId = "config_area_reset_button";
&nbsp;&nbsp;self.constRingBufferSize = 5;
&nbsp;&nbsp;self.constMinimumRadianCoeff = 9.0;
&nbsp;&nbsp;self.constMaximumRadianCoeff = 1.5;
&nbsp;&nbsp;self.constSensitivity = 22;
&nbsp;&nbsp;self.configRingBufferSize = self.constRingBufferSize;
&nbsp;&nbsp;self.configMinimumRadianCoeff = self.constMinimumRadianCoeff;
&nbsp;&nbsp;self.configMaximumRadianCoeff = self.constMaximumRadianCoeff;
&nbsp;&nbsp;self.configSensitivity = self.constSensitivity;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;// フラグ
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;self.operationMousePress = false;
&nbsp;&nbsp;self.operationMouseRelease = false;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;// その他変数
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;self.mouseTrackingX = [];
&nbsp;&nbsp;self.mouseTrackingY = [];
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;// イベント設定
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;self.setupEvents = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mousedown", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prt("mousedown");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationReset();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingX.push(event.offsetX);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingY.push(event.offsetY);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMousePress = true;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMouseRelease = false;
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mouseup", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prt("mouseup");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMousePress = false;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMouseRelease = true;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.drawEnd();
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mousemove", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(me.operationMousePress === true) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingX.push(event.offsetX);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingY.push(event.offsetY);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var x = me.mouseTrackingX;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var y = me.mouseTrackingY;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var idxA = x.length - 2;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var idxB = x.length - 1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var ctx = canvas.getContext('2d');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.strokeStyle = "rgb(0, 0, 0)";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(x[idxA], y[idxA]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(x[idxB], y[idxB]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(me.constConfigResetButtonId).addEventListener("click", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.initConfigInputs();
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;self.operationReset = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;var ctx = canvas.getContext('2d');
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillStyle = "rgb(187, 187, 187)";
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillRect(0, 0, canvas.width, canvas.height);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;me.operationMousePress = false;
&nbsp;&nbsp;&nbsp;&nbsp;me.operationMouseRelease = false;
&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingX = [];
&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingY = [];
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;self.updateConfigItem = function(id, configName, configType) {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;var elm = document.getElementById(id);
&nbsp;&nbsp;&nbsp;&nbsp;if(configType == "int") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me[configName] = parseInt(elm.value);
&nbsp;&nbsp;&nbsp;&nbsp;} else if(configType == "float") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me[configName] = parseFloat(elm.value);
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;self.updateConfig = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constConfigRingBufferSizeId);
&nbsp;&nbsp;&nbsp;&nbsp;me.updateConfigItem(me.constConfigRingBufferSizeId, "configRingBufferSize", "int");
&nbsp;&nbsp;&nbsp;&nbsp;me.updateConfigItem(me.constConfigMinimumRadianCoeffId, "configMinimumRadianCoeff", "float");
&nbsp;&nbsp;&nbsp;&nbsp;me.updateConfigItem(me.constConfigMaximumRadianCoeffId, "configMaximumRadianCoeff", "float");
&nbsp;&nbsp;&nbsp;&nbsp;me.updateConfigItem(me.constConfigSensitivityId, "configSensitivity", "int");
&nbsp;&nbsp;}
&nbsp;&nbsp;self.initConfigInputs = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(me.constConfigRingBufferSizeId).value = String(me.constRingBufferSize);
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(me.constConfigMinimumRadianCoeffId).value = String(me.constMinimumRadianCoeff);
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(me.constConfigMaximumRadianCoeffId).value = String(me.constMaximumRadianCoeff);
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(me.constConfigSensitivityId).value = String(me.constSensitivity);
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;self.test1 = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;var x = me.mouseTrackingX;
&nbsp;&nbsp;&nbsp;&nbsp;var y = me.mouseTrackingY;
&nbsp;&nbsp;&nbsp;&nbsp;var size = x.length;
&nbsp;&nbsp;&nbsp;&nbsp;var idxA = 0;
&nbsp;&nbsp;&nbsp;&nbsp;var idxB = parseInt(size / 2);
&nbsp;&nbsp;&nbsp;&nbsp;var idxC = size - 1;
&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;var ctx = canvas.getContext('2d');
&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath();
&nbsp;&nbsp;&nbsp;&nbsp;ctx.strokeStyle = "rgb(255, 0, 0)";
&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(x[idxA], y[idxA]);
&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(x[idxB], y[idxB]);
&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(x[idxC], y[idxC]);
&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;var plotX = [x[idxA], x[idxB], x[idxC]];
&nbsp;&nbsp;&nbsp;&nbsp;var plotY = [y[idxA], y[idxB], y[idxC]];
&nbsp;&nbsp;&nbsp;&nbsp;ctx.font = "16px serif";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillStyle = "rgb(0, 0, 0)";
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillText("A(" + String(plotX[0]) + ", " + String(plotY[0]) + ")", plotX[0], plotY[0]);
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillText("B(" + String(plotX[1]) + ", " + String(plotY[1]) + ")", plotX[1], plotY[1]);
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillText("C(" + String(plotX[2]) + ", " + String(plotY[2]) + ")", plotX[2], plotY[2]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;var rotate = rotateDirectionOf3Points({x: plotX[0], y: plotY[0]}, {x: plotX[1], y: plotY[1]}, {x: plotX[2], y: plotY[2]});
&nbsp;&nbsp;&nbsp;&nbsp;var rad = angleOf3Points({x: plotX[0], y: plotY[0]}, {x: plotX[1], y: plotY[1]}, {x: plotX[2], y: plotY[2]});
&nbsp;&nbsp;&nbsp;&nbsp;var degree = rad * (180 / Math.PI);
&nbsp;&nbsp;&nbsp;&nbsp;var lines = ["rad: " + String(rad), "degree: " + String(degree), "rotate: " + String(rotate)];
&nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0; i &lt; plotX.length; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var txt = "X=" + String(plotX[i]) + ", Y=" + String(plotY[i]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lines.push(txt);
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;var logView = document.getElementById(me.constViewLogId);
&nbsp;&nbsp;&nbsp;&nbsp;var logText = lines.join("\n");
&nbsp;&nbsp;&nbsp;&nbsp;logView.value = lines.join("\n");
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;// 描画終了処理
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;self.drawEnd = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;me.updateConfig();
&nbsp;&nbsp;&nbsp;&nbsp;prt("configRingBufferSize", me.configRingBufferSize);
&nbsp;&nbsp;&nbsp;&nbsp;prt("configMinimumRadianCoeff", me.configMinimumRadianCoeff);
&nbsp;&nbsp;&nbsp;&nbsp;prt("configMaximumRadianCoeff", me.configMaximumRadianCoeff);
&nbsp;&nbsp;&nbsp;&nbsp;prt("configSensitivity", me.configSensitivity);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;prt(me.mouseTrackingX);
&nbsp;&nbsp;&nbsp;&nbsp;prt(me.mouseTrackingY);
&nbsp;&nbsp;&nbsp;&nbsp;var skipRate = parseInt(me.mouseTrackingX.length / self.constSensitivity);
&nbsp;&nbsp;&nbsp;&nbsp;prt("skipRate", skipRate);
&nbsp;&nbsp;&nbsp;&nbsp;var x = n1d.skipSampling(me.mouseTrackingX, skipRate);
&nbsp;&nbsp;&nbsp;&nbsp;var y = n1d.skipSampling(me.mouseTrackingY, skipRate);
&nbsp;&nbsp;&nbsp;&nbsp;x = x.concat(x.slice(0, me.constRingBufferSize));
&nbsp;&nbsp;&nbsp;&nbsp;y = y.concat(y.slice(0, me.constRingBufferSize));
&nbsp;&nbsp;&nbsp;&nbsp;var res = trackingIsTriangle(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x.length,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Math.PI / me.constMinimumRadianCoeff,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Math.PI / me.constMaximumRadianCoeff,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;if(0) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.test1();
&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var logView = document.getElementById(me.constViewLogId);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var lines = ["三角形: " + String(res.ok ? "true": "false")];
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0; i &lt; res.size; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lines.push("座標 " + String(i + 1) + ": " + String(res.x[i]) + ", " + String(res.y[i]));
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var logText = lines.join("\n");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logView.value = lines.join("\n");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(res.ok === true) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var ctx = canvas.getContext('2d');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.strokeStyle = "rgb(255, 0, 255)";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(res.x[0], res.y[0]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(res.x[1], res.y[1]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(res.x[2], res.y[2]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(res.x[0], res.y[0]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;self.start = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;me.initConfigInputs();
&nbsp;&nbsp;&nbsp;&nbsp;me.setupEvents();
&nbsp;&nbsp;}
}

window.addEventListener('load', function(){
&nbsp;&nbsp;var x = new HandWriteFigureCorrection();
&nbsp;&nbsp;x.start();
});
&nbsp;&nbsp;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>

HTML+JavaScript（適当なWEBサーバに設置して試験してください）

アプリケーションの中で発生するイベントは、ドメインオブジェクトに対する何らかのアクションに起因すると考えられるため、イベント自体はアクションに紐付けたいです。現状はというと、アプリケーションサービス内でアクションの「直後に」発生する形になっています。<pre><code> val meeting = // アクション(ミーティングを作成する)
 Meeting(
 organizerId,
 participantIds,
 startAt,
 endAt,
 title,
 detail
 )
 meetingRepository.save(meeting)
 val users = userRepsitory.getByIds(organizerId :: participantIds)
 publisher.publish(
 MeetingCreated(meeting.id, users, title, detail, startAt, endAt) // イベント発生(ミーティングが作成された)
 )</code></pre> 上記の場合、<code>Meeting</code>のインスタンス生成時にイベントが生成されるようにしたいです。しかし、ここで鬼門なのは、<code>MeetingCreated</code>は<code>users</code>を受け取る必要があるということです。逆にそれ以外のパラメータに関しては、<code>Meeting</code>インスタンス化の引数で受け取るため問題ないです。どうしたらいいでしょうか？ 以下に思いつく限り対応案を書き出してみます。<ol><li><code>userRepository.getByIds</code>を先に実行してからインスタンス化の引数として渡す</li><li>インスタンス化処理の中で<code>userRepository.getByIds</code>を実行する</li><li>そもそも<code>MeetingCreated</code>が<code>users</code>を受け取るのをやめる。その代わり通知処理で必要になるため各<code>Observer</code>内で<code>userRepository.getByIds</code>を実行する</li><li>そもそも<code>Observer</code>がメールアドレスを必要としない形にする</li></ol>1は手頃ですが、インスタンス化に関係のないものをパラメータに追加したくないです。2はドメイン層をクリーンな状態にしておきたいので却下です。インスタンス化の引数にrepositoryを渡さないのであればテストが極端に難しくなります。3はうまくやればいい感じの実装になりそうな気がします。4については考えがあるので後で説明することになると思います。というわけで一旦3の方針で実装してみます。

方針検討

<pre><code>@@ -58,6 +58,7 @@ trait UserRepository:
&nbsp;class MeetingId(val value: Int) extends AnyVal
&nbsp;
&nbsp;class Meeting(
+&nbsp; &nbsp; val id: MeetingId,
&nbsp; &nbsp; &nbsp;val organizerId: UserId,
&nbsp; &nbsp; &nbsp;val participantIds: List[UserId],
&nbsp; &nbsp; &nbsp;val startAt: LocalDateTime,
@@ -65,19 +66,44 @@ class Meeting(
&nbsp; &nbsp; &nbsp;val title: String,
&nbsp; &nbsp; &nbsp;val detail: String
&nbsp;):
-&nbsp; val id = MeetingId(1)
+&nbsp; def delete: MeetingDeleted =
+&nbsp; &nbsp; MeetingDeleted(id, organizerId, participantIds)
+
+object Meeting:
+&nbsp; def create(
+&nbsp; &nbsp; &nbsp; organizerId: UserId,
+&nbsp; &nbsp; &nbsp; participantIds: List[UserId],
+&nbsp; &nbsp; &nbsp; startAt: LocalDateTime,
+&nbsp; &nbsp; &nbsp; endAt: LocalDateTime,
+&nbsp; &nbsp; &nbsp; title: String,
+&nbsp; &nbsp; &nbsp; detail: String
+&nbsp; ): (Meeting, MeetingCreated) =
+&nbsp; &nbsp; val id = MeetingId(1)
+&nbsp; &nbsp; val meeting =
+&nbsp; &nbsp; &nbsp; Meeting(id, organizerId, participantIds, startAt, endAt, title, detail)
+&nbsp; &nbsp; val event = MeetingCreated(
+&nbsp; &nbsp; &nbsp; id,
+&nbsp; &nbsp; &nbsp; organizerId,
+&nbsp; &nbsp; &nbsp; participantIds,
+&nbsp; &nbsp; &nbsp; title,
+&nbsp; &nbsp; &nbsp; detail,
+&nbsp; &nbsp; &nbsp; startAt,
+&nbsp; &nbsp; &nbsp; endAt
+&nbsp; &nbsp; )
+&nbsp; &nbsp; (meeting, event)
&nbsp;
&nbsp;trait MeetingRepository:
&nbsp; &nbsp;def save(meeting: Meeting): Unit
&nbsp; &nbsp;def get(meetingId: MeetingId): Meeting
-&nbsp; def delete(meetingId: MeetingId): Unit
+&nbsp; def delete(meetingId: MeetingId, event: MeetingDeleted): Unit
&nbsp;
&nbsp;trait DomainEvent:
&nbsp; &nbsp;val occuredOn = LocalDateTime.now()
&nbsp;
&nbsp;class MeetingCreated(
&nbsp; &nbsp; &nbsp;val meetingId: MeetingId,
-&nbsp; &nbsp; val users: List[User],
+&nbsp; &nbsp; val organizerId: UserId,
+&nbsp; &nbsp; val participantIds: List[UserId],
&nbsp; &nbsp; &nbsp;val title: String,
&nbsp; &nbsp; &nbsp;val detail: String,
&nbsp; &nbsp; &nbsp;val startAt: LocalDateTime,
@@ -86,7 +112,8 @@ class MeetingCreated(
&nbsp;
&nbsp;class MeetingDeleted(
&nbsp; &nbsp; &nbsp;val meetingId: MeetingId,
-&nbsp; &nbsp; val users: List[User]
+&nbsp; &nbsp; val organizerId: UserId,
+&nbsp; &nbsp; val participantIds: List[UserId]
&nbsp;) extends DomainEvent
&nbsp;
&nbsp;trait DomainEventObserver:
@@ -97,22 +124,32 @@ class DomainEventPublisher(obs: DomainEventObserver*):
&nbsp; &nbsp; &nbsp;obs.foreach(_.respondTo(event))
&nbsp;
&nbsp;// インフラストラクチャ層
-class EmailSender extends DomainEventObserver:
+class EmailSender(
+&nbsp; &nbsp; userRepsitory: UserRepository
+) extends DomainEventObserver:
&nbsp; &nbsp;override def respondTo[T &lt;: DomainEvent](event: T): Unit =
&nbsp; &nbsp; &nbsp;event match
&nbsp; &nbsp; &nbsp; &nbsp;case e: MeetingCreated =&gt;
-&nbsp; &nbsp; &nbsp; &nbsp; e.users.foreach(u =&gt; send(u.email, e.title, e.detail))
+&nbsp; &nbsp; &nbsp; &nbsp; val users =
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; userRepsitory.getByIds(e.organizerId :: e.participantIds)
+&nbsp; &nbsp; &nbsp; &nbsp; users.foreach(u =&gt; send(u.email, e.title, e.detail))
&nbsp; &nbsp; &nbsp; &nbsp;case e: MeetingDeleted =&gt;
-&nbsp; &nbsp; &nbsp; &nbsp; e.users.foreach(u =&gt; send(u.email, "ミーティング削除のお知らせ", "ミーティングが削除されました"))
+&nbsp; &nbsp; &nbsp; &nbsp; val users =
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; userRepsitory.getByIds(e.organizerId :: e.participantIds)
+&nbsp; &nbsp; &nbsp; &nbsp; users.foreach(u =&gt; send(u.email, "ミーティング削除のお知らせ", "ミーティングが削除されました"))
&nbsp;
&nbsp; &nbsp;def send(to: Email, subject: String, body: String): Unit =
&nbsp; &nbsp; &nbsp;println(s"email send to $to")
&nbsp;
-class EmailReserver extends DomainEventObserver:
+class EmailReserver(
+&nbsp; &nbsp; userRepsitory: UserRepository
+) extends DomainEventObserver:
&nbsp; &nbsp;override def respondTo[T &lt;: DomainEvent](event: T): Unit =
&nbsp; &nbsp; &nbsp;event match
&nbsp; &nbsp; &nbsp; &nbsp;case e: MeetingCreated =&gt;
-&nbsp; &nbsp; &nbsp; &nbsp; e.users.foreach(u =&gt; {
+&nbsp; &nbsp; &nbsp; &nbsp; val users =
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; userRepsitory.getByIds(e.organizerId :: e.participantIds)
+&nbsp; &nbsp; &nbsp; &nbsp; users.foreach(u =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;reserve(u.email, e.title, e.detail, e.startAt)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;reserve(u.email, e.title, e.detail, e.endAt)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;})
@@ -130,7 +167,10 @@ class MeetingService(
&nbsp; &nbsp; &nbsp;meetingRepository: MeetingRepository,
&nbsp; &nbsp; &nbsp;userRepsitory: UserRepository
&nbsp;):
-&nbsp; private val publisher = DomainEventPublisher(EmailSender(), EmailReserver())
+&nbsp; private val publisher = DomainEventPublisher(
+&nbsp; &nbsp; EmailSender(userRepsitory),
+&nbsp; &nbsp; EmailReserver(userRepsitory)
+&nbsp; )
&nbsp;
&nbsp; &nbsp;def reserve(
&nbsp; &nbsp; &nbsp; &nbsp;organizerId: UserId,
@@ -140,8 +180,8 @@ class MeetingService(
&nbsp; &nbsp; &nbsp; &nbsp;title: String,
&nbsp; &nbsp; &nbsp; &nbsp;detail: String
&nbsp; &nbsp;): Unit =
-&nbsp; &nbsp; val meeting =
-&nbsp; &nbsp; &nbsp; Meeting(
+&nbsp; &nbsp; val (meeting, event) =
+&nbsp; &nbsp; &nbsp; Meeting.create(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;organizerId,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;participantIds,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;startAt,
@@ -151,9 +191,7 @@ class MeetingService(
&nbsp; &nbsp; &nbsp; &nbsp;)
&nbsp; &nbsp; &nbsp;meetingRepository.save(meeting)
&nbsp; &nbsp; &nbsp;val users = userRepsitory.getByIds(organizerId :: participantIds)
-&nbsp; &nbsp; publisher.publish(
-&nbsp; &nbsp; &nbsp; MeetingCreated(meeting.id, users, title, detail, startAt, endAt)
-&nbsp; &nbsp; )
+&nbsp; &nbsp; publisher.publish(event)
&nbsp;
&nbsp; &nbsp;def reserveWithFollowed(
&nbsp; &nbsp; &nbsp; &nbsp;organizerId: UserId,
@@ -164,8 +202,8 @@ class MeetingService(
&nbsp; &nbsp;): Unit =
&nbsp; &nbsp; &nbsp;val organizer = userRepsitory.get(organizerId)
&nbsp; &nbsp; &nbsp;val followers = organizer.followed
-&nbsp; &nbsp; val meeting =
-&nbsp; &nbsp; &nbsp; Meeting(
+&nbsp; &nbsp; val (meeting, event) =
+&nbsp; &nbsp; &nbsp; Meeting.create(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;organizerId,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;followers.map(_.id),
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;startAt,
@@ -175,13 +213,12 @@ class MeetingService(
&nbsp; &nbsp; &nbsp; &nbsp;)
&nbsp; &nbsp; &nbsp;meetingRepository.save(meeting)
- &nbsp; &nbsp;val users = userRepsitory.getByIds(organizerId :: followers.map(_.id))
-&nbsp; &nbsp; publisher.publish(
-&nbsp; &nbsp; &nbsp; MeetingCreated(meeting.id, users, title, detail, startAt, endAt)
-&nbsp; &nbsp; )
+&nbsp; &nbsp; publisher.publish(event)
&nbsp;
&nbsp; &nbsp;def remove(meetingId: MeetingId): Unit =
&nbsp; &nbsp; &nbsp;val meeting = meetingRepository.get(meetingId)
-&nbsp; &nbsp; meetingRepository.delete(meetingId)
+&nbsp; &nbsp; val event = meeting.delete
+&nbsp; &nbsp; meetingRepository.delete(meetingId, event)
- &nbsp; &nbsp;val users =
- &nbsp; &nbsp; &nbsp;userRepsitory.getByIds(meeting.organizerId :: meeting.participantIds)
-&nbsp; &nbsp; publisher.publish(MeetingDeleted(meeting.id, users))
+&nbsp; &nbsp; publisher.publish(event)</code></pre> <code>Meeting</code>のコンストラクタの中でイベントも生成するのは違和感があったため、コンパニオンオブジェクトのメソッド呼び出しにしました。ドメインオブジェクト潔癖症なので副作用を持ち込まないようタプルでイベントも返すようにしています。<code>users</code>の代わりに<code>Meeting</code>オブジェクト自体が持っている<code>organizerId</code>と<code>participantIds</code>をイベントの属性に含めるようにしました。後は<code>Observer</code>が<code>UserRepository</code>を持って<code>users</code>にマッピングするようにしています。 この実装には少々問題点がありまして、それは、イベントの生成自体は約束されるのですが、イベントを発行するのを忘れていたとしてもエラーにならないということです。Golangであれば未使用変数があればエラーになるのですが、Scalaも取り入れてくれませんかね。とはいえ普通の人であればまあ気づくと思うので、これはこれで良しとしましょう。あともう一つ、ミーティングの削除に関してはドメイン側に削除イベント生成メソッドを実装してもそもそも呼び出す必然性がなかったため、<code>meetingRepository.delete()</code>の引数にイベントを追加しました。（本来全く必要ないのですが・・・。この辺もっといい実装があれば教えてほしいです。）

Observer内でRepositoryにアクセスする実装

さて、一応ドメインイベントをドメインオブジェクトが生成するようにする実装は一通り完了したのですが、個人的に気に食わないポイントが一つあります。<pre><code> override def respondTo[T &lt;: DomainEvent](event: T): Unit =
 event match
 case e: MeetingCreated =&gt;
 val users =
 userRepsitory.getByIds(e.organizerId :: e.participantIds)
 users.foreach(u =&gt; send(u.email, e.title, e.detail))
 case e: MeetingDeleted =&gt;
 val users =
 userRepsitory.getByIds(e.organizerId :: e.participantIds)
 users.foreach(u =&gt; send(u.email, "ミーティング削除のお知らせ", "ミーティングが削除されました"))</code></pre> このあたりです。なんというか全然インフラ層っぽくないです。もともとインフラ層とは技術的な込み入ったコードを書く場所だったはずです。なのにこれは、「ミーティングが作成されたら、主催者と参加者全員に対してメールを送信する(etc)」と読めて、ゴリゴリに業務ロジックっぽい感じがします。では、これはどこに実装すればいいでしょうか、ドメイン知識というよりアプリケーションに対する要求って感じな気がするので、一旦アプリケーションサービスに実装します。<pre><code>@@ -124,25 +124,40 @@ class DomainEventPublisher(obs: DomainEventObserver*):
&nbsp; &nbsp; &nbsp;obs.foreach(_.respondTo(event))
&nbsp;
&nbsp;// インフラストラクチャ層
-class EmailSender(
-&nbsp; &nbsp; userRepsitory: UserRepository
+class EmailSender:
+&nbsp; def send(to: Email, subject: String, body: String): Unit =
+&nbsp; &nbsp; println(s"email send to $to")
+
+class EmailReserver:
+&nbsp; def reserve(
+&nbsp; &nbsp; &nbsp; to: Email,
+&nbsp; &nbsp; &nbsp; subject: String,
+&nbsp; &nbsp; &nbsp; body: String,
+&nbsp; &nbsp; &nbsp; when: LocalDateTime
+&nbsp; ): Unit =
+&nbsp; &nbsp; println(s"email reserved sending to $to when $when")
+
+// アプリケーション層
+class EmailSendService(
+&nbsp; &nbsp; userRepsitory: UserRepository,
+&nbsp; &nbsp; sender: EmailSender
&nbsp;) extends DomainEventObserver:
&nbsp; &nbsp;override def respondTo[T &lt;: DomainEvent](event: T): Unit =
&nbsp; &nbsp; &nbsp;event match
&nbsp; &nbsp; &nbsp; &nbsp;case e: MeetingCreated =&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;val users =
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;userRepsitory.getByIds(e.organizerId :: e.participantIds)
-&nbsp; &nbsp; &nbsp; &nbsp; users.foreach(u =&gt; send(u.email, e.title, e.detail))
+&nbsp; &nbsp; &nbsp; &nbsp; users.foreach(u =&gt; sender.send(u.email, e.title, e.detail))
&nbsp; &nbsp; &nbsp; &nbsp;case e: MeetingDeleted =&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;val users =
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;userRepsitory.getByIds(e.organizerId :: e.participantIds)
-&nbsp; &nbsp; &nbsp; &nbsp; users.foreach(u =&gt; send(u.email, "ミーティング削除のお知らせ", "ミーティングが削除されました"))
+&nbsp; &nbsp; &nbsp; &nbsp; users.foreach(u =&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sender.send(u.email, "ミーティング削除のお知らせ", "ミーティングが削除されました")
+&nbsp; &nbsp; &nbsp; &nbsp; )
&nbsp;
-&nbsp; def send(to: Email, subject: String, body: String): Unit =
-&nbsp; &nbsp; println(s"email send to $to")
-
-class EmailReserver(
-&nbsp; &nbsp; userRepsitory: UserRepository
+class EmailReserveService(
+&nbsp; &nbsp; userRepsitory: UserRepository,
+&nbsp; &nbsp; reserver: EmailReserver
&nbsp;) extends DomainEventObserver:
&nbsp; &nbsp;override def respondTo[T &lt;: DomainEvent](event: T): Unit =
&nbsp; &nbsp; &nbsp;event match
@@ -150,26 +165,17 @@ class EmailReserver(
 &nbsp; &nbsp; &nbsp; &nbsp;val users =
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;userRepsitory.getByIds(e.organizerId :: e.participantIds)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;users.foreach(u =&gt; {
-&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reserve(u.email, e.title, e.detail, e.startAt)
-&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reserve(u.email, e.title, e.detail, e.endAt)
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reserver.reserve(u.email, e.title, e.detail, e.startAt)
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reserver.reserve(u.email, e.title, e.detail, e.endAt)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;})
&nbsp;
-&nbsp; def reserve(
-&nbsp; &nbsp; &nbsp; to: Email,
-&nbsp; &nbsp; &nbsp; subject: String,
-&nbsp; &nbsp; &nbsp; body: String,
-&nbsp; &nbsp; &nbsp; when: LocalDateTime
-&nbsp; ): Unit =
-&nbsp; &nbsp; println(s"email reserved sending to $to when $when")
-
-// アプリケーション層
&nbsp;class MeetingService(
&nbsp; &nbsp; &nbsp;meetingRepository: MeetingRepository,
&nbsp; &nbsp; &nbsp;userRepsitory: UserRepository
&nbsp;):
&nbsp; &nbsp;private val publisher = DomainEventPublisher(
-&nbsp; &nbsp; EmailSender(userRepsitory),
-&nbsp; &nbsp; EmailReserver(userRepsitory)
+&nbsp; &nbsp; EmailSendService(userRepsitory, EmailSender()),
+&nbsp; &nbsp; EmailReserveService(userRepsitory, EmailReserver())
&nbsp; &nbsp;)
&nbsp;
&nbsp; &nbsp;def reserve(</code></pre> すっきりしました。責任範囲がちゃんと分離できた気がします。依存関係に関してはアプリケーションサービスがインフラを参照してしまっていますが、些細な問題なので今日のところはここまでにしておきます。

インフラ層からアプリケーションロジックを分離する

今回はドメインイベントの発行主体をドメインオブジェクトにする修正と、インフラ層からアプリケーションロジックを切り離すリファクタを行いました。 現時点でのコード全容を添付しておきます。<pre><code>// ドメイン層
class UserId(val value: Int) extends AnyVal
class Email(val value: String) extends AnyVal

class User(val id: UserId, val email: Email):
 def followed: List[User] =
 List(
 User(UserId(1), Email("hoge1@example.com")),
 User(UserId(2), Email("hoge2@example.com"))
 )

trait UserRepository:
 def get(id: UserId) =
 User(id, Email("hoge@example.com"))

 def getByIds(ids: List[UserId]) =
 ids.map(User(_, Email("hoge@example.com")))

class MeetingId(val value: Int) extends AnyVal

class Meeting(
 val id: MeetingId,
 val organizerId: UserId,
 val participantIds: List[UserId],
 val startAt: LocalDateTime,
 val endAt: LocalDateTime,
 val title: String,
 val detail: String
):
 def delete: MeetingDeleted =
 MeetingDeleted(id, organizerId, participantIds)

object Meeting:
 def create(
 organizerId: UserId,
 participantIds: List[UserId],
 startAt: LocalDateTime,
 endAt: LocalDateTime,
 title: String,
 detail: String
 ): (Meeting, MeetingCreated) =
 val id = MeetingId(1)
 val meeting =
 Meeting(id, organizerId, participantIds, startAt, endAt, title, detail)
 val event = MeetingCreated(
 id,
 organizerId,
 participantIds,
 title,
 detail,
 startAt,
 endAt
 )
 (meeting, event)

trait MeetingRepository:
 def save(meeting: Meeting): Unit
 def get(meetingId: MeetingId): Meeting
 def delete(meetingId: MeetingId, event: MeetingDeleted): Unit

trait DomainEvent:
 val occuredOn = LocalDateTime.now()

class MeetingCreated(
 val meetingId: MeetingId,
 val organizerId: UserId,
 val participantIds: List[UserId],
 val title: String,
 val detail: String,
 val startAt: LocalDateTime,
 val endAt: LocalDateTime
) extends DomainEvent

class MeetingDeleted(
 val meetingId: MeetingId,
 val organizerId: UserId,
 val participantIds: List[UserId]
) extends DomainEvent

trait DomainEventObserver:
 def respondTo[T &lt;: DomainEvent](event: T): Unit

class DomainEventPublisher(obs: DomainEventObserver*):
 def publish[T &lt;: DomainEvent](event: T): Unit =
 obs.foreach(_.respondTo(event))

// インフラストラクチャ層
class EmailSender:
 def send(to: Email, subject: String, body: String): Unit =
 println(s"email send to $to")

class EmailReserver:
 def reserve(
 to: Email,
 subject: String,
 body: String,
 when: LocalDateTime
 ): Unit =
 println(s"email reserved sending to $to when $when")

// アプリケーション層
class EmailSendService(
 userRepsitory: UserRepository,
 sender: EmailSender
) extends DomainEventObserver:
 override def respondTo[T &lt;: DomainEvent](event: T): Unit =
 event match
 case e: MeetingCreated =&gt;
 val users =
 userRepsitory.getByIds(e.organizerId :: e.participantIds)
 users.foreach(u =&gt; sender.send(u.email, e.title, e.detail))
 case e: MeetingDeleted =&gt;
 val users =
 userRepsitory.getByIds(e.organizerId :: e.participantIds)
 users.foreach(u =&gt;
 sender.send(u.email, "ミーティング削除のお知らせ", "ミーティングが削除されました")
 )

class EmailReserveService(
 userRepsitory: UserRepository,
 reserver: EmailReserver
) extends DomainEventObserver:
 override def respondTo[T &lt;: DomainEvent](event: T): Unit =
 event match
 case e: MeetingCreated =&gt;
 val users =
 userRepsitory.getByIds(e.organizerId :: e.participantIds)
 users.foreach(u =&gt; {
 reserver.reserve(u.email, e.title, e.detail, e.startAt)
 reserver.reserve(u.email, e.title, e.detail, e.endAt)
 })

class MeetingService(
 meetingRepository: MeetingRepository,
 userRepsitory: UserRepository
):
 private val publisher = DomainEventPublisher(
 EmailSendService(userRepsitory, EmailSender()),
 EmailReserveService(userRepsitory, EmailReserver())
 )

 def reserve(
 organizerId: UserId,
 participantIds: List[UserId],
 startAt: LocalDateTime,
 endAt: LocalDateTime,
 title: String,
 detail: String
 ): Unit =
 val (meeting, event) =
 Meeting.create(
 organizerId,
 participantIds,
 startAt,
 endAt,
 title,
 detail
 )
 meetingRepository.save(meeting)
 publisher.publish(event)

 def reserveWithFollowed(
 organizerId: UserId,
 startAt: LocalDateTime,
 endAt: LocalDateTime,
 title: String,
 detail: String
 ): Unit =
 val organizer = userRepsitory.get(organizerId)
 val followers = organizer.followed
 val (meeting, event) =
 Meeting.create(
 organizerId,
 followers.map(_.id),
 startAt,
 endAt,
 title,
 detail
 )
 meetingRepository.save(meeting)
 publisher.publish(event)

 def remove(meetingId: MeetingId): Unit =
 val meeting = meetingRepository.get(meetingId)
 val event = meeting.delete
 meetingRepository.delete(meetingId, event)
 publisher.publish(event)</code></pre>

BuildersIO produced by YOKU