この記事は CAMPHOR- Advent Calendar 2022 の18日目の記事です。
2017年に「買ってよかったもの」というウェブサイトをリリースし運営していますが、リリースから5年経った今 PaaS 移行のため技術スタックも一新しフルスクラッチで書き直したのでその話をします。
ソースも公開しています。
この記事で言いたいことは2つあって、
です。
これらの技術要素を使って https://github.com/morishin/azure-static-web-apps-template というサンプルアプリを作成したので、その紹介をします。
上記の要素に加え、ビルドツールとして Vite、ルーティングに React Router、UI フレームワークに Chakra UI を利用しています。
続きを読むこの記事は CAMPHOR- Advent Calendar 2021 の5日目の記事です。
CAMPHOR- Advent Calendar には初回の2014年から参加していて8度目の参加になります。老ですね。
今回は私生活でしばしば必要になって作っている家庭内タスクのリマインダーのお手軽構築スタイルを紹介します。
さて、僕は家庭内のコミュニケーションツールとして主に Slack と Snapchat を利用しています。日常会話は Slack で、子ども・猫の様子やその他日常の風景を動画で共有するのに Snapchat を使います。Snapchat は大好きなのですが今はその話は置いておいて、家庭内タスクのリマインド通知先としても Slack が最適なので色々な通知を Slack に流しています。
この記事では毎週決まった時刻に締め切りのある、生協のネット注文のリマインダーを例にして構築手順を説明します。
Firebase Hosting にはリライトという機能があって、設定ファイル(firebase.json)を書くことで例えば
morishin
/index.html へ向ける (SPA などで使う)/items/1234 へのリクエストを /items/id.html へ向ける/api/get_item へのリクエストを Cloud Functions の get_item 関数の HTTP トリガへ向けるといったことが実現できます。
また cleanUrls 属性を使用することで URL から .html 拡張子を取り除くことができます。/page へのアクセスは Hosting にアップロードされた /page.html のファイルを取得するようになり、/page.html へのアクセスは /page へ 301 リダイレクトされるようになります。
これらの挙動はシュッとしたウェブアプリを作るためには大変便利でよく利用しますが、Firebase 本番環境へデプロイされたアプリケーションでしか効きません。本番環境では /items/1234 は /item/id.html を返してくれるけど開発環境では /item/1234 は 404 になるといったつらみが生じます。
firebase hosting の rewrite を開発環境でもやってくれるプロキシ君が要るな...
— morishin (@morishin127) November 22, 2020
そこで開発環境でもリライトと cleanUrls の挙動を再現してくれるプロキシを作りました。お手元の firebase.json を読み込んで動作します。
リポジトリはこちら。
続きを読むこの記事は CAMPHOR- Advent Calendar 2020 の23日目の記事です。22日目は れおまる さんの「ニキシー管の魅力 」でした。ニッチ！！！！(賞賛)
CAMPHOR- Advent Calendar には初回の2014年から参加していて7度目の参加になります。
今回は普段の開発で便利に使っている周辺ツールを紹介します。他人の開発風景を見ていると色んな発見があって面白いので、自分の環境もコンテンツになるかもと思って書きました。他の人の記事も見てみたいのでよかったらみんな書いて。
※macOS を普段使いしているので macOS 用のアプリケーションも多く含みます。