なんでもノート

なんでも書くノートみたいなブログ

GitHub Pagesにはてなブログの最新記事を表示する

技術記事

https://azujuuuuuun.github.ioにブログの最新記事を出した。

実装方法

  1. はてなブログの更新フィードを取得する
    • Atomフォーマットを取得する
  2. 1の更新フィードをJSONに変換する
    • XMLより扱いに慣れているのでJSONに変換した
  3. 2のJSONをGoogle Cloud Storage（以下、GCS）にアップロードする
    • 無料枠があるのでGCSを選択した
  4. Next.jsのgetStaticPropsでGCSからJSONを取得する

当初の目的はブログを更新したらazujuuuuuun.github.ioを更新することだった。それを踏まえた実装方法になっている。今後、以下の日時の定期実行処理を別コンポーネントに実装する。

  1. GCSから更新フィードJSONを取得する
  2. はてなブログの更新フィードAtomを取得する
  3. 1と2のJSONとAtomの最終更新日時が同じ場合は処理を終了する
  4. 異なる場合
    1. 2のAtomからJSONを生成し、GCSにアップロードする
    2. GitHub Actionsのrepository dispatchを利用してGitHub Pagesのデプロイ処理を走らせる

困ったこと

GCSのバケット名

https://cloud.google.com/storage/docs/naming-buckets

バケット名は一般公開されます。 ユーザー ID、メールアドレス、プロジェクト名、プロジェクト番号、個人を特定可能な情報（PII）をバケット名に使用しないでください。バケットの存在を誰でも調べることができます。

この考慮事項に悩まされた。良い命名規則が未だにわからない。当たり障りのないバケット名をつけた。

Google Cloudはリソースに名前とIDを求められるのでその度に悩んでいる。

GCSの無料枠を超えないか

GCSの無料枠は2022/09/03現在以下の条件。

  • 5 GB 月の Regional Storage（米国リージョンのみ）
  • 5,000 回のクラス A オペレーション（1 か月あたり）
  • 50,000 回のクラス B オペレーション（1 か月あたり）
  • 1 GB の北米から全リージョン宛ての下りネットワーク（1 か月あたり、中国とオーストラリアを除く）

https://cloud.google.com/free/docs/free-cloud-features?hl=ja

クラスAオペレーションとクラスBオペレーションはhttps://cloud.google.com/storage/pricing?hl=jaの説明を参照。更新系やバケット内のオブジェクト一覧取得などのやや重い処理がクラスA、比較的軽めの参照系がクラスB。

ローカルで開発中にビルドの度にファイル取得が走るので無料枠を超えないか心配だった。とりあえず、開発中は環境変数でローカルのファイルを参照するようにした。ただ、開発中のソースコードと本番のソースコードが異なるので、GCS互換のオブジェクトストレージをローカルに立てられないか検討中。

GitHub ActionsからGCSへの認証方法

長くなりそうなので別の記事に書く。

感想

Google Cloudを初めて触るので読むドキュメントが多い。実装よりGoogle Cloudの設定、Google Cloudの設定よりリソースの命名に時間を使ってる気がする。

VSCodeのデバッガーでTypeScriptのスクリプトをデバッグをする

技術記事

恥ずかしながらこれまでJavaScriptの開発にデバッガーを使ってこなかった。ひたすらconsole.logを仕込みデバッグしていた。VSCodeでTypeScriptのデバッグをする方法を調べた。

とりあえずデバッガーを起動できるようになった設定ファイルはこちら。

  • type
    • デバッガーの種類
    • node は組み込みのNode Debugger
  • request
    • 起動設定のリクエストの種類
  • name
    • 名前
  • skipFiles
    • （雑な説明）デバッグ中にスキップするファイル一覧
    • <node_internals> はNode.jsの組み込みのコアモジュール
  • program
    • デバッガー起動時に実行するもの
  • preLaunchTask
    • デバッグセッションを始める前に実行するタスク
    • TypeScriptをJavaScriptにトランスパイルするためにnpm Scriptのbuildを指定している
  • outFiles
  • envFile
    • .envファイルのパス
    • ローカル環境ではdotenvで環境変数を読み込んでいるので

画像の左のペインの「Launch Program」（launch.jsonのnameに設定した値）をクリックすると、プログラムとデバッガーが実行される。元のTSファイルにブレークポイントを設定すれば、そこで処理が止まり、ローカル変数やグローバル変数の値を見ることができる。

今回はTypeScriptのシンプルなスクリプトのデバッグをした。デバッガーを起動できるようになったので一歩前進。より実践的にWebブラウザで動くJavaScriptやアプリケーションサーバーをデバッグできるようにしていきたい。

新型コロナウイルス新規感染者数をSlackに通知する

技術記事

いつからかコロナの感染者数の推移を見なくなった。メディアの公式LINEから速報で来なくなったし、自分から調べる回数も減った。7月から新型コロナウイルス新規感染者数が増えている。早く落ち着いてほしいと願っている。在宅勤務でテレビでもネットでもニュースを見ていないので世の中の情報がなかなか入ってこない。積極的に情報を取りに行くのはなかなかハードルが高いが、受動的に受け取ることはできる。コロナの感染者数をSlackに通知できないかと考えた。

やりたいこと

  • 毎日1回東京都の新型コロナウィルス感染者数をSlackに通知する

実現方法

ツール・データ

フロー

  1. データを取得する
  2. 最新のデータを取り出す
  3. Slackに通知する

技術スタック

作ったもの

リポジトリ：https://github.com/azujuuuuuun/newly-cases-slack-notification

8/17・18分の通知

終わりに

これを作る前に「LINE新型コロナ情報」というLINE公式アカウントを友だち追加していた。今朝、国内感染者数の推移と都道府県別感染状況が来ていた。これで十分だったのでSlack通知は止めることにした。

linecorp.com

依存パッケージを更新することなくpackage.jsonとpackage-lock.jsonのversionを上げる

技術記事

依存パッケージを更新することなくpackage.jsonとpackage-lock.jsonのversionを上げる方法をまとめる。

$ npm version patch

このコマンドでセマンティックバージョニングのパッチバージョンを上げることができる。versionが 1.0.0 だった場合、1.0.1 になる。1.0.1 というメッセージでgitのコミットが作成され、v1.0.1 というgitのタグが作成される。マイナーバージョンを上げたい場合はpatchをminorに、メジャーバージョンを上げたい場合はpatchをmajorにすればよい。コミットメッセージを指定したい場合は -m もしくは --message オプションをつければよい。

$ npm version patch -m "Upgrade to %s"

%s は該当バージョンに置き換えられる。

gitのタグを打ちたくない場合は、以下のように --no-git-tag-version をつける。

$ npm --no-git-tag-version patch

もしくは npm config コマンドでgit-tag-versionをfalseに設定して、npm version コマンドを実行する。

$ npm config set git-tag-version false

$ npm version patch

いずれの場合もpackage.jsonファイルとpackage-lock.jsonファイルのversionは変更されるが、コミットとタグは作成されない。

参考リンク：https://docs.npmjs.com/cli/v8/commands/npm-version

GitHub ActionsでNotionの日記ページを毎日作成する

技術記事

タイトルにある通り、1日1ページNotionに日記を書いている。「YYYY/MM/DD(ddd)」というタイトルをつけているのだが、この入力が地味にめんどくさかった。「きょう」→変換→ 「(」→「つき」→変換→「)」という手順で入力していた。Notion APIを使ってみた - なんでもノート でNotion APIの使い方がわかったので、このページ作成を自動化することにした。

要件

  • 毎日NotionのDiaryデータベースにページを自動で作成する
  • タイトルは「YYYY/MM/DD(ddd)」
  • ページが既に作成済みであれば作成しない
    • 自分が翌日分を手動で作成することもあるため

開発

定期実行に今回はGitHub Actionsを利用することにした。リポジトリはこちら。

やったこと

感想

  • 自動化便利
  • Notion APIは前回以上のことをしていないのでコメントなし
  • GitHub Actionsは環境ごとにシークレットを作成できて便利
  • ワークフローのファイル名とnameをどんな風につければいいかまだわかってない

Notion APIを使ってみた

技術記事

Notionでネットの記事の積読を管理している。積読の数が1000を超え、ノイズになっていたので一度全て断捨離することにした。

状況・やりたかったこと

  • Articleというデータベースで積読を管理
  • Read StatusというSelectカラムでステータス管理
    • 未設定：積読
    • Read：読んだ
    • Trash：やっぱ読むのをやめた、読まない
  • → Read Statusが未設定のページのRead StatusをTrashにする

1000以上のページを手動で変更するのはできなくはなかったが、せっかくなのでNotion APIを使ってみた。

developers.notion.com

やったこと

バッチ処理スクリプトの詳細

実行結果

以下、試しに2件更新してみたときのRTT。

Update took 684.6306619644165ms.
Update took 283.28467202186584ms.

以下、全件更新結果。

$ npm run start

> notion-article-batch@1.0.0 start
> node -r dotenv/config index.js

Sun Aug 14 2022 hh:mm:ss GMT+0900 (日本標準時) Update started.
Sun Aug 14 2022 hh:mm:ss GMT+0900 (日本標準時) 1055 pages updated. Update took 694149.2413560152ms.

特にエラーが出ることなく無事に全件更新された。

所感

  • ドキュメントが充実していてスムーズに開発できた
  • 深く考えていないが、ドキュメント、SDK、APIのI/F、API利用体験がよかったので好印象
  • もう1個Notion APIを使ったコードを書いたのでブログを書く

.gitconfigを整備した

技術記事

git config --global コマンドで各種設定値を設定できる ~/.gitconfig ファイルを整備した。整備した .gitconfig ファイルは https://github.com/azujuuuuuun/dotfiles/blob/master/.gitconfig にpushした。変更前のファイルをコミットしていなかったので差分をこのブログに記録する。

変更前はuser, core, alias, credential, merge, pullを設定していた。mergeとpullはよく理解せずにその場しのぎで設定していた。

今回、Git - git-config Documentation を参照しつつ、設定を追加した。量が膨大だったのでよく使うコマンドを検索して、目についたものを設定した。fetchのpruneオプションが綺麗になったのがお気に入り。

変更前

[alias]
  fe = fetch -p

変更後

[alias]
  fe = fetch
[fetch]
  prune = true