neputa note

VSCode on Ubuntu & .NET MAUIでAdnroidアプリ開発環境を構築する

Ubuntu on WSL2でリモート実行しているVSCodeに、.NET MAUIアプリの開発環境を構築する。テンプレートからプロジェクトを新規作成し、Android emulatorでAndroidアプリをデバッグできるようにする。一連の設定手順をまとめる。

2024/07/28 13:17

【Astro】Contact FormにValidationとreCAPTCHA v3を追加する

Astroで構築したWebサイトに、Validation（入力チェック）とreCAPTCHA v3を設置したContact Formを実装する。Validationは「React Hook Form」というパッケージを使用する。また、reCAPTCHAのサーバサイドでの検証をNewtのForm Appで行う。

2024/07/23 07:03

Astroにパンくずリスト（breadcrumb list）を追加する

Astroで構築したWebサイトにパンくずリストを追加する。プラグインを追加すれば簡単に実装できる。しかしURLに日本語が含まれる場合（タグやカテゴリ）、URLエンコードされた表記となってしまう。プラグインのリポジトリをForkし、デコードした値を表示できるようにする

2024/07/22 00:54

AstroのサイトでGoogle Adsenseを遅延読み込みする

Astroで構築したサイトでGoogle Adsenseを遅延読み込みする実装方法についてまとめる。AdsenseはPartytownで動作させることができなかった。よってobserverを使用し、広告エリアの表示を起点にロードする実装を行う。

2024/07/21 02:02

Astro Googleアナリティクス（GA4）のJavaScriptを遅延読み込みする

Astroで構築したWebサイトにGoogleアナリティクスのJavaScriptを遅延読み込みする実装を行う。partytownというパッケージを使用する。

2024/07/20 12:00

Astroのブログ記事にYouTubeをlazy loadingで埋め込む

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

2024/07/19 13:45

Astro Blog記事の画像にキャプションを付ける

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

2024/07/19 12:00

シンプルなブログカードとブックマークレットを作る【Astro】

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

2024/07/18 12:00

AstroのBlogにモバイル表示用のタブバー（TabBar）を追加する

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

2024/07/17 12:00

Astro 一致するタグ数で関連記事を表示する

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

2024/07/15 12:00

今日のモヤモヤ【日記】

2024/07/14 22:30

【Astro/Shiki】markdownのコードブロックにファイル名とdiffを追加する

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

2024/07/14 01:38

Astroのrssフィードに記事の本文を追加する

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

2024/07/12 23:17

vscode-textlintで日本語の文章校正をしよう【mdx / md / html / txt】

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

2024/07/07 23:47

AstroのユニットテストをJestで行う【ESモジュール対処法】

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

2024/07/05 22:23

Headless CMS「Front Matter CMS」を使う【VSCode拡張機能】

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

2024/07/03 23:23

BlogをBloggerからAstroへ移行した

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

2024/07/01 12:51