<p>Flutterでtodoアプリを作ってみましたー</p><p>当初はローカルにのみ記録するつもりだったのですが、</p><p>最近Firebase+Flutterの組み合わせをいろんなアプリで試しているのでfirebase経由でのタスク同期やサインイン機能を実装しました。</p><p>便利だけど無料枠の上限に達しないか心配...</p><pre><code>http: ^1.2.1 # Add http package  firebase_core: ^3.1.1
firebase_auth: ^5.1.1
google_sign_in: ^6.2.1
cupertino_icons: ^1.0.8
shared_preferences: ^2.5.3
change_app_package_name: ^1.5.0
intl: ^0.20.2 
cloud_firestore: ^5.6.9　// firebase
flutter_dotenv: ^5.2.1 // envの管理に必要</code></pre><figure><img src="https://images.microcms-assets.io/assets/a2939c8d25434ae5a1f853f2dc239a0f/fa0449b11fc7453ebdc6ac50a1f8b857/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-07-02%20151717.png" alt="todo画面" width="1266" height="713"></figure><figure><img src="https://images.microcms-assets.io/assets/a2939c8d25434ae5a1f853f2dc239a0f/cf23b7fcc73e4a5e9e1196cbd5088234/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-07-02%20151411.png" alt="サインイン画面" width="1266" height="713"></figure><h2 id="h88876ec3b5">リポジトリ</h2><p><a href="https://github.com/nknighta/mobile-app-practice.git">nknighta/mobile-app-practice</a></p>

todo アプリでFlutterの開発練習

<p>We have now released a trial version of the VX package on github.</p><p><a href="https://github.com/nknighta/vx/pkgs/npm/vx">https://github.com/nknighta/vx/pkgs/npm/vx</a></p><p>To install the script, click below (requires npm installation):</p><pre><code class="language-shell">npm install @nknighta/vx@0.0.12</code></pre><p><strong>Note:</strong></p><p>The current version is for testing purposes only and is not fully functional.</p><p>Do not use in real applications.</p>

VX package released on a trial basis

<h2 id="h250913c1dc">やりかったこと</h2><p>私が開発しているWeb3 SDKであるVXのダッシュボードやドキュメントで使うアカウント連携機能用に認証アプリケーションを作る。</p><h2 id="h0c8fa4812e">処理の流れ</h2><p>ドキュメントサイトなどでログインボタン押下 =&gt; 認証ページに遷移 =&gt; Google又はGitHubで認証 =&gt; 元のページに戻る</p><p>コールバックで元のページに戻った段階で裏で認証情報を読み取ります</p><h2 id="hc167090f26">APIキーで詰んだ</h2><h3 id="h5dcd5df243">エラーコード</h3><div data-filename="firebase-faild.ts"><pre><code class="language-typescript">// うごかねぇ
import { initializeApp } from &quot;firebase/app&quot;;
import { getAuth } from &quot;firebase/auth&quot;;
//import { getAnalytics } from &quot;firebase/analytics&quot;;
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app&apos;s Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,　// process.envではよめない
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
//const analytics = getAnalytics(app);
const auth = getAuth(app);

export { auth };</code></pre></div><h3 id="h04757ee1c0">修正済コード</h3><div data-filename="firebase.ts"><pre><code class="language-typescript">// Import the functions you need from the SDKs you need
import { initializeApp } from &quot;firebase/app&quot;;
import { getAuth } from &quot;firebase/auth&quot;;
//import { getAnalytics } from &quot;firebase/analytics&quot;;
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app&apos;s Firebase configuration
const firebaseConfig = {
  apiKey: import.meta.env.VITE_REACT_APP_API_KEY,
  authDomain: import.meta.env.VITE_REACT_APP_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_REACT_APP_PROJECT_ID,
  storageBucket: import.meta.env.VITE_REACT_APP_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_REACT_APP_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_REACT_APP_APP_ID,
  measurementId: import.meta.env.VITE_REACT_APP_MEASUREMENT_ID
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
//const analytics = getAnalytics(app);
const auth = getAuth(app);

export { auth };</code></pre></div><h3 id="h41e3733aef">動かなかった原因</h3><p>認証用サイトは裏でViteを使っていたのですが、Vitejsはほかのフロントエンドフレームワークとは環境変数の読み込み方が違っており、それが原因でローカルでもデプロイ先でも画面がブラックアウトしたまま固まってしまってましたw</p><p>エラーの解消に数時間かかった...</p><h2 id="h2437a71527">認証サイト</h2><p><a href="https://auth.varius.technology/">https://auth.varius.technology/</a></p><h2 id="h3de35099b3">参考</h2><p><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener noreferrer nofollow">https://dash.cloudflare.com/</a></p><p><a href="https://qiita.com/bisketoriba/items/0b70fd5e130e8eabeeb1" target="_blank" rel="noopener noreferrer nofollow">https://qiita.com/bisketoriba/items/0b70fd5e130e8eabeeb1</a></p>

【Firebase】React Router+Firebase+Cloudflareで認証サイトを作った(2025-06-12時点)

<p>VXのリポジトリ名を入れ替えました</p><p>vx =&gt; vx-home</p><p>vx-sdk =&gt; vx</p><p></p><p>URL:</p><p>VX</p><p><a href="https://github.com/nknighta/vx">https://github.com/nknighta/vx</a></p><p>vx ホームページ</p><p><a href="https://github.com/nknighta/vx-home">https://github.com/nknighta/vx-home</a></p><p></p><p>個人でWeb3ライブラリ作ってます</p>

【VX】リポジトリ名の変更

<p><a href="https://nknighta.github.io/apps/ytimage-dl" target="_blank" rel="noopener noreferrer">ytimage-dl</a></p><p>以前htmlで書いていた自作アプリをNextjsに移植しました</p><p>まだ完ぺきに動作するわけではないので、不具合が出たら直します</p><p>不具合は以下から報告できます(要GitHubアカウント)</p><p><a href="https://github.com/nknighta/ytimage-dl/issues">https://github.com/nknighta/ytimage-dl/issues</a></p>

ytimage-dlアプリをNextjsに移植しました

<p>自作言語でwasmとかRustを使っていろいろテストしてます</p><p>Indexlanguageという名前は本の目次のように可読性の高い言語をめざしてるって感じです。</p><p>今日のコミット(2025/04/05)↓</p><p><a href="https://github.com/nknighta/IndexLanguage/commit/f81d2ca69cf789b0c6c56802c8dc8f0e618529fc">https://github.com/nknighta/IndexLanguage/commit/f81d2ca69cf789b0c6c56802c8dc8f0e618529fc</a></p>

IndexLang commit (f81d2ca....)

<p>ここにSNSとかいろんなリンク追加していきます</p><p>ytimage-dl</p><p><a href="https://nknighta.github.io/ytimage-dl/">https://nknighta.github.io/ytimage-dl/</a></p><p>IndexLanguage (自作言語・Web向け)</p><p>repo : <a href="https://github.com/nknighta/IndexLanguage">https://github.com/nknighta/IndexLanguage</a></p><p>Web上での実行(仮) : <a href="https://nknighta.github.io/IndexLanguage/examples/">https://nknighta.github.io/IndexLanguage/examples/</a></p>

SNSたち

<p>ブログ機能リリースしました</p><p>大変...</p><p><a href="https://nknighta.github.io/blog">https://nknighta.github.io/blog</a></p>

ブログ機能リリース

<h1 id="hf28e2a1430"><strong>テストです</strong></h1><p>これは テストです</p>