🏮 はじめに
OS Yamato は「データの儚さと軽やかさ」をテーマにした、詩的かつ技術的に挑戦的な次世代OS風プラットフォームです。
その中でも、ユーザー体験の統一性を保ちつつ「設定は風のように引き継がれる」ように設計されたのが、Cognito 属性に基づくユーザー設定同期です。
本記事では、Vue + Amplify 環境における vue-i18n、カスタム UI 設定、ローカルストレージとのバランス制御、Cognito 属性の設計・運用まで、技術的に深掘りして解説します。
📦 採用技術スタック
Vue 3 + <script setup>
AWS Amplify（Cognito + GraphQL API + Storage）
vue-i18n（ローカライズ管理）
localStorage（初回のみ参照、以降は Cognito に委ねる）
Cognito User Pool 属性（カスタム）
🎯 なぜ Cognito 属性で設定を管理するのか？
多くのWebアプリでは、ユーザー設定（言語、テーマ、UIエフェクトなど）をローカルストレージに保存しがちです。しかし：
• 端末をまたぐとリセットされる
• プライベートブラウザでは消える
• サインイン時に引き継がれない
OS Yamato は “端末を問わず、軽やかに同じ体験を再現” するために、設定の「唯一の記録者」として Cognito を選びました。
⚙️ 管理している属性（例）
Cognito カスタム属性を使って、次のように定義しています：
custom:language
UI言語
ja, en, fr, …
custom:iconColor
アイコン色
#ff9a9e など
custom:wallpaper
壁紙名
sakura, night, …
custom:message_animation
チャット演出
bubble, wind, …
🚀 実装概要
1 . サインイン直後に属性を取得
import { Auth } from 'aws-amplify'
const user = await Auth.currentAuthenticatedUser()
const attributes = user.attributes
const language = attributes['custom:language'] || 'ja'
const iconColor = attributes['custom:iconColor'] || '#000'
2 . Vue に反映（例：vue-i18n）
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
locale.value = language
language を取得後に vue-i18n に反映することで、初期ロードからローカライズされた UI を提供できます。
3 . 設定変更時は Cognito に即反映
await Auth.updateUserAttributes(user, {
'custom:language': newLang,
'custom:iconColor': newColor,
})
これにより、他の端末でログインしても即座に反映される状態を実現できます。
💡 vue-i18n 採用のポイント
vue-i18n は以下の理由で選定されました：
• 言語コード (ja, en, zh, fr, es) による動的切替が容易
• Vue 3 Composition API に完全対応
• OS Yamatoのような“感情あるOS”のUI文脈に柔軟にフィット
📝 まとめ
Cognito のカスタム属性を使えば、設定を端末間で 自動同期可能。
vue-i18n との組み合わせで スムーズなローカライズ初期表示が可能。
設定変更は Auth.updateUserAttributes() で簡潔に反映。
OS Yamato は「ユーザーの記憶と個性」を クラウドと一体化して保ちます。
⸻
🌸 最後に
設定すら「風に乗って引き継がれる」
— それが OS Yamato の思想です。
ぜひ、あなたの色や言語で、Yamato の世界を旅してください。
🔗 プロジェクト情報
• 試してみる:
https://hanaco875.com
メールアドレスで簡単にサインアップ！！
• ソースコード: GitHub - osyamato/os-yamato
https://github.com/osyamato/os-yamato
🌱 OS Yamato / 花子天気は オープンソース です。
技術や思想に共鳴する方は、気軽に触れてみてください。
PR・Issue・コメントも大歓迎です。