WordPressから記事をHugoに大体移植したで書いた通り、旧ブロブのアナリティクスをみると想像以上にアクセスがきていたので、このブログにリダイレクトするようにした。 そのうえで、このブログでもPVを確認できるよう、GA4を導入した。 まずはhugo.yamlに下記を追加する。 services: googleAnalytics: id: G-********** 次に/layouts/_internal/google_analytics.htmlを作成してテンプレートを追加する。 {{- with site.Config.Services.GoogleAnalytics.ID }} {{- if hugo.IsProduction }} {{- $ga4 := resources.GetRemote "https://cdn.jsdelivr.net/npm/@minimal-analytics/ga4/dist/index.js" }} {{- $track := resources.Get "js/track.js" }} {{- $opts := dict "params" (dict "trackingId" . ) }} {{- $track = $track | js.Build $opts -}} {{- $stats := slice $track $ga4 | resources.Concat "js/analytics.js" | minify | fingerprint }} <script src="{{ $stats.RelPermalink }}" integrity="{{ $stats.Data.Integrity }}" ></script> {{- end }} {{- end -}} 最後にassets/js/track....

環境 Angular: 15 interactjs: 1.10.27 interactjsとは？ https://github.com/taye/interact.js JavaScriptでドラッグ＆ドロップ、リサイズ、マルチタッチジェスチャー（慣性とスナッピング機能付き）を実装できるライブラリ。 色々なデモ インストール npm install interactjs npm install --save-dev @interactjs/types でインストール。 実装 template <div class="draggable">Draggable Element</div> まずテンプレート側でdivを作成する。 component 次に、 @ViewChild('canvasEl') canvasEl: ElementRef | undefined; コンポーネント側でcanvasを取得し、 ngAfterViewInit() { const position = { x: 0, y: 0 } interact('.draggable').draggable({ listeners: { start (event) { console.log(event.type, event.target) }, move (event) { position.x += event.dx position.y += event.dy event.target.style.transform = `translate(${position.x}px, ${position.y}px)` }, } }) } interactを呼び出す。...

Cloud SQLにデータベースを作成したのでクライアントツールで確認したくなった。 今回はHeidiSQLで接続していく。 Cloud SQL Admin APIを有効にする 1.2 接続設定を確認し、外部からの接続が許可されていることを確認します。これには、Cloud SQL Admin APIを有効にし、インスタンスのファイアウォール設定で必要なIPアドレスからの接続を許可する必要があります 参照元が不明だけど、Cloud SQL Admin APIを有効にする必要がある。 有効にする方法はCloud SQL API を使用するにある通り。 Google Cloud Platform Console で、プロジェクトを選択します。 API Manager コンポーネントで、[Google Cloud SQL API] をクリックします。 Google Cloud SQL API コンポーネントで、[API を有効にする] を選択します。 Google Cloud SQL API コンポーネントと Google Cloud SQL コンポーネントは違うことに注意してください。後者のコンポーネントは、Google Cloud Platform Console と Cloud SDK でインスタンスを管理するために有効にする必要があります。 Cloud SQLインスタンスへの接続を許可する Google Cloud Consoleにログイン。 ナビゲーションメニュー（左上の三本線）をクリックし、「SQL」を選択。 接続したいCloud SQLインスタンスを選択。 「接続」タブを選択。 「公開IP」を設定。この設定がない場合は「公開IPの追加」ボタンをクリック。 「ネットワーク」のセクションにある「承認済みネットワーク」までスクロール。 「ネットワークの追加」ボタンをクリック。 ネットワーク：接続を許可したいIPアドレスまたはIPレンジを入力。例えば、自分のPCのIPアドレスを許可する場合は、「203.0.113.0/32」のように入力（/32は単一のIPアドレスを意味する）。 説明：任意の説明を入力（例：「自宅PC」）。 「完了」ボタンをクリック。 「保存」ボタンをクリックして設定を保存。 これで、指定したIPアドレスからCloud SQLインスタンスへの接続が許可された。...

Cloud RunとCloud SQLの料金が予想を上回った Goの勉強をしたく、WebAPIを作成することにした。特別難しいこともないただのREST API。 せっかくなのでアプリを作成しようということで、側はreact nativeで作成した。 で、結合しているうちに料金が結構請求されていることに気が付いた。 Cloud SQLが大体20日で4000円くらい。 しかもここら辺はよくわからないのだが、インスタンスを停止しているにもかかわらず、料金が発生している気がする。 調査して理解する必要がありそうなので、いつかまとめる。 今は幸い無料期間でクレジットを消費しているだけだが、無料期間終了後は確実に払うことができない。 つまり、現実できじゃない。 ここは仕様検討で気が付くべきだった。 ここまでやったこと Cloud Run & Cloud SQLでどうこうするのはいったん諦める。 でもいつか使うかもしれなので、やったことをまとめておく。 Cloud RunでGoを動かしたい GormでCloud SQLに接続する クライアントツールからCloud SQLのDBに接続したい これしかなかった。 基本的にドキュメントが整備されているので、その通り実行すれば結果を得ることができた。 ただ、料金体系が理解できていなので、そこらへんは整理したい。 AWSも理解できていなので、こちらも理解したい。 fly.io 個人開発だとよく聞くし、ここを使ってみようと思っている。 そのためには料金体系とかしっかり調べる必要がありそうだけど。 Plan Pricing· Fly 料金表見る限り月額5ドルとのこと。 無料プランはなくなったぽい、まあこのご時世だしこんなものか。 本当はGoでの実績を作りたかったけど、firebaseで作成するか。

要はブラウザ委のストレージのような機能をアプリでどう再現するかを調べてみた。 iOSでは KeyChain、Androidでは KeyStoreという安全に重要情報を保存できる場所が用意されているらしい。 Expo Cliではreact-native-keychainが使えない。 で、React Nativeではreact-native-keychainというプラグインで実現できるらしいが、Expo Cliでは使えないらしい。これは落とし穴だった。結構な時間を溶かした。 expo-secure-storeを使用しよう 公式サイト npx expo install expo-secure-store でインストールする。 app.jsonに下記を追加する。 { "expo": { "plugins": [ [ "expo-secure-store", { "faceIDPermission": "Allow $(PRODUCT_NAME) to access your Face ID biometric data." } ] ] } } 実装 ログインボタンを押したときにアクセストークンを保存する。 <Button title="Log in" onPress={async () => { try { // ログイン処理 // トークンを保存してメイン画面に遷移 await SecureStore.setItemAsync("accessToken", "userToken"); navigation.navigate("Main"); } catch (error) { console.error("SecureStore error: ", error); } }} /> 遷移先のページでチェックする。...