2024年の記事

我が家の家族構成は私を含め2名と1羽だった。今年の1月12日金曜の早朝、家族の一員だったシナモン文鳥が亡くなった。「ティピ」という名の男の子だった。昨年の10月に体調をくずし、以後3か月余りの戦いのすえ、旅立っていった。もう2か月以上が経過したがその間の記憶ははっきりしない。

本記事の概要 このブログ（Google Blogger）にCloudflareを導入しようと設定を進めていたところ、かつてカスタムドメインを設定した際に発行されたCNAMEが分からず困っていた。Bloggerのカスタムドメイン設定で使用するCNAMEを、再度確認する方法の備忘録。

記事概要 これまで、すべての投稿を一覧表示するページを都度feedを数回取得するJavaScriptで行っていた。表示速度が遅いうえ、記事増加に合わせてfeedを呼びだすスクリプトを追加する必要がありメンテもめんどい。スマートな方法がないかと思っていたところ、とても美しい仕事をされている記事を発見。

記事概要 Ubuntu22.04LTS on WSL2の環境に、Node.js、npmをインストールする。UbuntuリポジトリのNode.jsはバージョンが古い。latestバージョンをインストールする手順をまとめる。最後に、個人的な当初のNode.jsインストールの目的、PurgeCSS導入手順を備忘録として残す。

前回作業でインストールしたPurgeCssを実際に使ってみたので手順をまとめる。PurgeCssを使用するにはnode.js、npmが必要となる。これが今回やりたかったこと。rootディレクトリ内にあるすべてのhtml、cssを対象にまとめて処理を行う。

本ブログはGoogleが提供する「Blogger」をカスタムドメインで運用している。この度、サイトのパフォーマンス向上を目的に「cloudflare」のキャッシュサービスを利用することとした。結果、Bloggerが生成するsitemap、feed（rss、atom）において、URLがすべて「http」となる問題が発生

Azure DevOpsで管理しているリポジトリをgithub側で使いたいと思い、マイグレーション、クローンなどで手段を探してた。Azure DevOps側で一時的なクレデンシャルを発行し、github側からインポートするやり方を見つけた。

記事概要 AzureDevOpsのPipelinesにおいて、Github Organizationsのリポジトリを参照する設定作業の備忘録。

本記事のゴール 拡張機能を使用し、VSCodeでJoplinのノートを管理できるようにする。 本記事の対象者 *Joplinユーザでエディタに不満がある人 *VSCodeの環境でJoplinを使いたい人 *VScodeユーザでVScodeと親和性の高いノートアプリを検討している方

本記事の概要 Googleスプレッドシートの関数のひとつ、「IMPORTXML関数」についての備忘録。HTMLファイルのスクレイピングの記事はたくさん見つかるが、XMLファイルをターゲットにした情報が少なかったのでメモを残す。

Windowsで作成したファイルの改行コードはCR＋LFだ。これに対して、Linuxの改行コードはLFだけなので、ファイルの転送方法によってはWindowsで作成したテキストファイルをviで開くと、すべての行末に「^M」が表示される場合がある。

本記事の概要 PageSpeed Insightsのスコアでオール100を達成した。対象はこのブログ。Googleの提供するBloggerを使用しているため、独自の仕様にずいぶん苦しめられた。行った施策全体を概観するのが主な内容で、部分的に詳細の手順を記載した。

最近の心境を綴った日記。命ある者たちより、いなくなってしまった者たちを思う時間が長い。網戸越しに風を浴び、気持ちよさそうにするシナモン文鳥の姿を思い出す。かつてケージがあったその場所に、無意識に名前を呼びかける。生前、毎日声をかけていたけれど、いなくなった今もその習慣は変わらない。

本記事の目的 Ubuntuに最新バージョンのNeovimをsnapでインストールする手順をまとめる。経緯 *Ubuntuのパッケージリポジトリに登録されているNeovimはバージョンが古い。 *前回公式から.debパッケージをダウンロードできたが現在は不可。 *次回以降の更新を考慮し、snapを使用することにした。

最近の思考メモ たまたま見ていた朝の情報番組をキッカケに考え事が始まった。過去に大きな影響を受けた「これは水です。」というスピーチ、最近読みはじめたベンジャミン・リベットの『マインド・タイム』が頭の中を駆け巡る。

先日このブログのアプリ開発情報をAstroとTailwindによる静的サイトへ移動した。（正しくはAstro & Tailwindで作成されたテンプレートを使用） これまでブログのカスタマイズ目的でHTML/CSS/JavaScriptの使用機会はあったがフレームワークは今回が初。色々と気づきがあったので備忘録を残す。

個人開発によるアプリの紹介。買い物メモやTodoリストをカメラで撮影し、簡単にチェックリストへ変換するスマホアプリ。スマホに保存した画像も対象。開発・運用のモチベーション維持のため「自分が使うモノ」をコンセプトに開発。使用シーンを考慮し、機能を最小限に、起動と操作の速度パフォーマンスを重視した。

10年以上の期間お世話になったGoogle Bloggerに別れを告げ、この度AstroでBlogサイトを構築し移行した。Astroは静的サイトを手軽に開発できる軽量フレームワーク。無料のテンプレートをベースにカスタマイズを行った。それなりの作業ボリュームとなったので、詳細は別記事に分け、今回は移行作業全体をまとめる。

このBlogの記事を書く目的でHeadless CMSの「Front Matter」を使ってみた。VSCodeの拡張機能として追加するだけで利用できる。markdownはもちろん、mdxにも対応している。スニペット機能で簡単にコンポーネントを埋め込むことが可能。jsonファイルで設定をカスタマイズでき自由度が高い。

AstroプロジェクトのユニットテストをJestで行いたい。Astroはv3.0以降ESMがデフォルトで有効。他のパッケージ同様、import文のエラーに対処が必要。既存のtsconfigに手を加えずに別途テスト用のtsconfigを作成しこれを回避する。一連の手順を備忘録としてまとめる。

VSCodeの拡張機能「vscode-textlint」をインストールし、4種類のファイル（.mdx / .md / .txt / .html）でtextlintによる日本語の文章校正を自動化する。mdxは設定が複雑のため詳しい手順をまとめる。校正ルールはJTF日本語標準スタイルのルールセットを用いる。

「@astrojs/rss」によるrss.xmlにBlog記事の本文を追加する。MDXファイルを対象に、markdownのパース、埋め込んだcomponentタグやcode blockのサニタイズ処理を行う。一連の手順を備忘録としてまとめる。

AstroのmarkdwonまたはMDXで記述したコードブロックについて、ファイル名やコードのdiffを表示できるようにする。シンタックスハイライターはShikiを使用。remarkのpluginとコードブロックのcomponentを追加する。一連の実装手順をまとめた。

AstroのBlog記事に関連する記事の一覧を表示できるようにする。関連度合いを一致するタグの数で決定する。

Astroで構築したBlogサイトにモバイル表示用のTabBar（タブバー）を実装する。今回は次の3つのボタンを配置する「ホームへ戻る」「Topへ戻る」「目次を表示する」。一連の実装手順についてまとめる。

Blogでシンプルなブログカードを使いたい。Astroで構築したBlogサイトを例に、ブログカードのcomponent、追加したいサイトのmeta情報をブラウザ上でコピーできるブックマークレットを作成する。サンプルコードはこのBlogで実際に使用しているものを掲示する。

Astroで構築したブログサイトの記事にキャプション付きの画像を掲載できるようにする。2つの実装例をまとめる。1つ目はremarkプラグインによる実装。2つ目はAstroの画像最適化とキャプションをWrapperするcomponentを作成する。1つ目はmarkdown・MDX共通で使用できるが、2つ目はMDXのみ。

Astroで構築したBlogの記事にYouTube動画を埋め込む。パフォーマンスの影響を避けるため、astro-embedというパッケージを使用し、動画をlazy loadingする。