フロントエンドを開発するときにバックエンドサーバ―の用意ができていない時がよくある。 今までは側だけ作って待機していたが、せっかくなのでモックサーバーを立ち上げ、バックエンドができ次第、URLの向きを変え、完成！ という風に出来ればと思いモックサーバーの立ち上げを調べてみた。 json-server まずはjson-serverを使おうと思ったけど、同じエンドポイントでGet、Postが分けられなさそうということで不採用にした。けど、よくよく落ち着いて調べてみるとできるかもしれない。 いつか機をみて使ってみたい。 が、今回は上記の通り不採用した。 app/api 次に、そもそもnextjsにはAPIを作る機能があるじゃないかと思いだし、それを活用することにした。 ついでにAPI仕様書も作れればなおいいということで調べてみると、next-swagger-docというものがあった。 これでAPIを作成し、しかもSwaggerを作成できると舞い上がり実装してみた。 実装 npm i next-swagger-doc npm i swagger-ui-react まずはインストールする。 ちなみにバージョンは下記の通り。 "next": "14.2.3", "next-swagger-doc": "^0.4.0", "react": "^18", "swagger-ui-react": "^5.17.14" lib/swagger.tsに下記をコピペする。 import { createSwaggerSpec } from "next-swagger-doc"; export const getApiDocs = async () => { const spec = createSwaggerSpec({ apiFolder: "app/api", // define api folder under app folder definition: { openapi: "3.0.0", info: { title: "Next Swagger API Example", version: "1.0", }, components: { securitySchemes: { BearerAuth: { type: "http", scheme: "bearer", bearerFormat: "JWT", }, }, }, security: [], }, }); return spec; }; ※以降先頭行がファイル名になっている。...

最適なドメイン管理プラットフォームを探して 今までいくつかのドメイン管理プラットフォームを利用してきた。 エックスドメイン お名前ドットコム Google domains エックスドメインは特に不満がない。 Google domainsはよかったけど、サービス終了したので今後は使えない。 で、問題はお名前ドットコム。 ここ１年、メインのドメインを取得したんだけど、毎日のように膨大なメールが送られてくる。 設定でオフにできるかもだけれど、そもそもこんなにメールを送ってくるのはどうなのだろうかということで乗り換えることにした。 せっかくだし自身のドメインを新しくしようと思う。 今までnove-web.comというドメインだったけど、nove-bというドメインにしたい。 そしてトップドメインは開発者らしくdevにしたいということで、まずはなんら不満がないエックスドメインで探したが、どうやらdevドメインを扱っていないということ。 Cloudflare Registrarでドメインを登録する じゃあ、どこで購入しようと調べてみるとCloudflare Registrarの評判が良さげだった。 料金も、同様にdevドメインを扱っているお名前ドットコムと比べると 登録 更新 お名前ドットコム 2,178円 2,178円 Cloudflare Registrar $10.18（1,603.63 円） $10.18（1,603.63 円） Cloudflare Registrarの安い。 どうやら卸売価格で提供されているのが強みらしい。 登録料と更新料は卸売価格で提供 ドメイン名の登録市場は、初回のドメイン名購入時には大幅割引価格を提供するものの、じょじょに追加料金を加算し、更新料も膨れ上がるような企業で占められています。 Cloudflare Registrarの場合、お客様に請求するのは弊社が支払うドメイン登録料のみで、その他の料金はかかりません。 値上げや想定外の料金は生じません。 Cloudflareのニ要素認証、マルチユーザーサポート、セキュリティ重視のカスタマーサポートチームといったセキュリティ機能でドメインの安全を確保し、安心してお使いいただけます。 ありがたい。 そういうわけで登録していくけど、特に難しいことはなかったので省略する。 Netlifyにで動くブログにサブドメインを当てる Cloudflare Registrarでの作業 次にNetlifyにアップしているこのブログにサブドメインを当てていく。 DNS > Records > DNS management for nove-b.dev > Add Record の順にページを移動し、 タイプ 名前 コンテンツ プロキシ ステータス TTL CNAME blog nove-b.netlify.app DNS のみ 自動 のように登録した。...

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インスタンスへの接続が許可された。...