the blog

カテゴリー: Development

  • 猫猫猫.tokyo on Raspberry Pi 4

    —

    by

    the 猫
    in

    Raspberry Pi Zero 2 W

    https://猫猫猫.tokyo/ のブログをRaspberry Pi 4に移行した。

    Raspberry Pi 4

    https://kozawa.tokyo/
    https://猫猫猫.tokyo/

    バーチャルホストの定義ファイルを作成して、SSL証明書を再設定して、追加でWordpressをインストールして、Wordpressの設定して、コンテンツを移行して・・・

    匿名でも実名でも変わらんなぁ 🤔

  • Raspberry Pi Zero 2 W

    —

    by

    the 猫
    in

    Wi-Fi（無線LAN）IEEE 802.11 b/g/n 2.4GHz

    遅すぎるの直ったかもー！？

    Wi-Fiの設定変更

    1. iwconfigコマンド で「Power Management」を確認する。
      wlan0
      Power Management:on
    2. 以下のコマンドで「Power Management」を off に変更する。
      sudo /sbin/iw dev wlan0 set power_save off
    3. iwconfigコマンド で「Power Management」を確認する。
      wlan0
      Power Management:off
    4. /etc/rc.local に 以下を追記する。
      sudo /sbin/iw dev wlan0 set power_save off
    5. OS再起動後にも「Power Management」が off となっていることを確認する。

    日本語ドメイン

    猫猫猫.tokyo → Punycode変換 → xn--z7xaa.tokyo

    Punycode
    https://ja.wikipedia.org/wiki/Punycode

    サーバ側のOSの設定(hostsファイル)、Nginxの定義ファイル、サーバ証明書の取得では、xn--z7xaa.tokyoを使用する。

    WordPressの設定画面では、猫猫猫.tokyoを使用する。

    以上

    Wi-Fi をエコじゃない設定に変更しないと接続時に待たされる。日本語ドメインの設定／名前解決まわりは、Punycode変換したドメインを使用すること。ぐらいか？合ってるのか分からんけど動いてるからしばらく運用してみる。

  • 「Trending」「Birthday」差し替え ⤴️

    —

    by

    the 猫
    in

    WordPressの固定ページに埋め込んでいたJSをVueのアプリにコピペして差し替えた。「Trending」はほぼ修正していない。「Birthday」のページは、バックエンド側にデータを用意してボタン押下のタイミングで動的にデータ取得する今風の作りに改修した。Wordpressの管理ページではなくなりフィッシングサイト的な別ページに遷移する手法のテスト。

    備忘・メモ書き：

    フロント

    • Vue 3
    • Vue Router 4
    • Pinia

    バックエンド

    • Nginx
    • PostgREST
    • PostgreSQL

    データ

    • Wikipedia
      https://ja.wikipedia.org/wiki/mm月dd日 の「誕生日」リストをスクレイピング

    Webサーバ

    Nginxのroot：https://kozawa.tokyo/
    アプリの設置：https://kozawa.tokyo/apps/27/
    Trendingページ：https://kozawa.tokyo/apps/27/trending
    Birthdayページ：https://kozawa.tokyo/apps/27/birthday

    アプリの設置先がサブディレクトリとなっており、URLとルーターのマッピングができずファイルが見つからないエラーが発生した。URLの指定のディレクトリ配下にindex.htmlが存在しない場合、1つづつ遡って上位ディレクトリのindex.htmlを探しに行くと思っていたが、そんなことはないw

    nginx.conf

        location /apps/27/ {
            try_files $uri $uri/ /apps/27/index.html /index.html;
    }

    この3行の追加・修正に一番時間がかかった。分かってしまえば何ということもないのだけれど、アプリの範囲で調べていても気づけない。アプリのサブディレクトリの設定についてはググれば対処できるけれど、以下の修正だけしてもNginxの環境ではindex.htmlファイルが見つからなくてエラーになる。

    router/index.js

    const router = createRouter({
  base: '/apps/27/', ※この行を追加
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'App',
      component: App,
      children: [
        {
          path: '/trending',
          name: 'Trending',
          component: () => import('../views/Trending.vue')
        },
        {
          path: '/birthday',
          name: 'Birthday',
          component: () => import('../views/Birthday.vue')
        }
      ]
    }
  ]
})

    vite.config.js

    export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base: '/apps/27', ※この行を追加
})

    Vue.jsの情報を検索しても、複数の書き方があってそのまま使えない情報が混在していて分かりづらい進めづらい状況になっている。（Vue 2、Vue 3.2未満、Vue 3.2以降、Options API、Composition API、 Vue Router 3系、4系、Vite、Pinia などなど）

    あとは、PostgRESTのURLパラメタでdata型のカラムをフィルタできなかった。date型の yyyy-mm-dd を 文字列型の mm-dd でフィルタできずに挫折。data型をvarchar型に変更したViewを作成して文字列としてフィルタしている。

    また、日付の期間を指定した検索については、ストアドプロシージャを作成してGETリクエストからストアドプロシージャを実行している。PostgRESTすげえ。

    Vueの状態管理／Piniaは使う必要はなかったが動作検証のため使ってみた。ボタン押下でストアを更新してリストがリアクティブに更新される動作となっている。

    Webアプリ開発の入門レベルで難しいことは何もやっていないけれど、実際にやってみるとハマる… ひと通り骨組みができるまでが大変でやり方が確立できてしまえば1からNにスケールするのは簡単なはずだけど… 🙄

  • Raspberry Pi Zero 2 W [RASPIZ2SC0510]

    —

    by

    the 猫
    in ,

    https://raspberry-pi.ksyic.com/main/index/pdp.id/849/pdp.open/849

    税込価格: 2,915円
    在庫数: 77

    ずーっと品切れだったけど入荷した模様。ぽちった！

  • Quickstart: Deploy RESTful API application to Azure Spring Apps

    —

    by

    the 猫
    in ,

    https://learn.microsoft.com/ja-jp/azure/spring-apps/quickstart-deploy-restful-api-app

    テスト

    実際にデプロイしたURLがこれ。
    https://deploy-test-simple-todo-api.azuremicroservices.io/swagger-ui/index.html （※削除済）

    便利なようで便利じゃないやつ多すぎて草。

    Raspberry Pi がいいね。

  • クイックスタート: 初めての Web アプリケーションを Azure Spring Apps にデプロイする

    —

    by

    the 猫
    in ,

    https://learn.microsoft.com/ja-jp/azure/spring-apps/quickstart-deploy-web-app

    テスト

    実際にデプロイしたURLがこれ。
    https://deploy-test-simple-todo-web.azuremicroservices.io/ （※削除済）

    サンプルアプリひどい。リロードすると画面がw

    Azure Spring Apps と Azure Database for PostgreSQL が高すぎて草。期間限定の無料クレジット200ドルがなければやってみることもしないだろうなぁ…

    Raspberry Pi がいいね。

  • 「Emoji kitchen」

    —

    by

    the 猫
    in ,

    曇りの日は手抜きアイコンが多い。

    ・・・省略・・・

    機械的に自動生成してますねこれは。お仕事ください。🙇‍♂️

    追記：
    雨の日も同じようなアイコンばかりなので天気に依存しないように修正した。

  • ひげおやじ物語

    —

    by

    the 猫
    in ,

    Azure Static Web Apps

    ひげおやじ物語
    https://static-web.kozawa.tokyo/ ※削除済

    無料枠でAzure DevOpsのパイプラインからAzure Static Web Appsにデプロイしようとすると以下のエラーとなる。

    [error]No hosted parallelism has been purchased or granted. To request a free parallelism grant, please fill out the following form https://aka.ms/azpipelines-parallelism-request

    エラーメッセージのURLからリクエストを投げても音沙汰なし。

    「Please consider that it could take 2-3 business days to proceed the request. We are working on improving this process at the moment. Sorry for the inconvenience.」

    と書かれているけれど1週間経過しても権限付与してもらえない。

    Azure DevOpsは諦めてGitHubのリポジトリからデプロイした。SSHキーの生成や設定が必要になった。

    Azure Blob Storage

    ひげおやじ物語
    https://blob-storage.kozawa.tokyo/ ※削除済

    Azure Blob Storageの静的Webサイトでカスタムドメインを使用する場合は、「Front Door と CDN」でドメインを認証してプライベートエンドポイント接続してやらないとhttpsでアクセスができない。めんどくさい作業が発生した。

    カスタム ドメインを Azure Blob Storage エンドポイントにマップする
    https://learn.microsoft.com/ja-jp/azure/storage/blobs/storage-custom-domain-name

    ホスティング環境

    Static Web Apps、Blob Storage、どちらも画面ポチポチでサーバ証明書を生成してくれるのは便利だけど、初めてやってみると何かしら引っかかるやん。しかも、Front Door、Storage、Networkで課金が発生している。Front Door高いな。結局、無料枠だけでは難しい気がする。

    Raspberry Pi がいいね。

  • 「Emoji kitchen」→

    —

    by

    the 猫
    in ,

    できた。しばらくこれでー

    備忘：
    絵文字の組み合わせとして存在しないパターンがあって読み込んでエラーになったらリトライみたいなところから試行錯誤して最終的には以下を利用させていただくことで落ち着いた。
    https://github.com/xsalazar/emoji-kitchen
    スクレイピング用のソースとともに事前にスクレイピングした結果が「emojiOutput.json」に吐かれていて最近の絵文字まで対応している。約6.3MB、約8万5000パターン。お天気アイコンとの組み合わせだけ切り出すと数百キロにできるけど、お天気以外のアイコンも他で使いたいのでフロントのソースにベタ書きせずにバックエンド側にREST APIを作成した。クリックイベントも実装済み。

    絵文字を機械的に生成できるとは思えないので1つ1つ手作業で作っているのではなかろうか。約8万5000個、おつおつです。

  • SVGファイルで「🌀」テキストを回転させたい

    —

    by

    the 猫
    in ,

    備忘：

    SVGファイルでテキスト1文字を綺麗に回転させることはできない。Androidで描画が欠落することを確認した。Windowsは知らん。テキストだけで完結したいけど無理そう…

    <svg version="1.1"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	height="50px"
	width="50px"
	viewBox="0 0 50 50">
	<style>
		#typhoon {
			dominant-baseline: text-before-edge;
			font-size: xxx-large;
		}
	</style>
	<animateTransform
		xlink:href="#typhoon"
		attributeName="transform"
		type="rotate"
		from="0 25 25"
		to="360 25 25"
		dur="5s"
		repeatCount="indefinite"
	/>
	<text id="typhoon">🌀</text>
</svg>
    ChatGPT

    「🌀」という1文字の回転中心座標を正確に指定することは、環境やフォントによって異なるため、困難です。JSを使用するとSVGファイルをimgタグで埋め込むことができなくなります。さらに、SVGファイル内ではCSS／@keyframesが正常に動作しないことがあります。

    この問題に対する直接的な解決策は限られているようですが、一般的なアプローチとしては、素直に画像を回転させる方法が考えられます。回転したいテキストやシンボルを画像として作成し、必要な角度で回転させることで、一貫した表示が可能です。

    また、回転が必要なテキストやシンボルを固定された角度で使用する場合、事前に回転済みの画像を用意しておくことも考えられます。

    状況によって最適な方法が異なるかもしれませんが、回転の正確さやクロスブラウザの互換性を考慮しながら、適切な方法を選択することが重要です。

    	<text
		id="typhoon"
		x="50%"
		y="50%"
		text-anchor="middle"
		dominant-baseline="central"
	>🌀</text>

    テキストの中心座標を求めるのではなく、テキストを上下左右中央に揃えても、結局固定値のハードコーディングが残存してしまい、フォントサイズが変わると描画が欠落する可能性が考えられます。

    むずかしいなあ…