hiroaki

The Twelve Factors | Twelve-Factor Appの原則​

備忘録として、Twelve-Factor App 12の原則 をメモしておく。

Google Colabで作成したPythonコードを、MacBookのVSCodeとGitHubを使って本格的な開発フローに移行するための実践的な手順を解説します。これまでColab上でのみ開発を行っていた方が、GitHubでのバージョン管理とローカルVSCodeでの快適な編集環境を構築し、より効率的な開発体制を整えるための具体的なステップを紹介します。

• リポジトリの準備: GitHub上での受け入れ環境の構築
• 初回連携: ColabからGitHubへの安全なコード移行
• ローカル環境: VSCodeでの編集環境セットアップ
• 運用ワークフロー: 日常的な開発サイクルの確立

以前の記事で、DocusaurusサイトにDecap CMSを導入した方法について解説しました。導入によってコンテンツ更新の基盤は整いましたが、実際に日々利用する中で、特にモバイル環境での使い勝手や定型入力の効率化に改善の余地があると感じていました。

この記事では、それらの課題を解決するためにstatic/admin/config.ymlとstatic/admin/index.htmlに施した、より実践的なカスタマイズの内容を紹介します。

• config.ymlの最適化: 入力の手間を減らし、ミスを防ぐための設定
• index.htmlの改造: モバイルでの操作性を向上させるCSSとJavaScriptの追加

これらのチューニングによって、PCはもちろん、スマートフォンからでも快適に記事を更新できる環境を構築しました。GitベースのCMSが持つカスタマイズ性の高さを活かした一例として、参考になれば幸いです。

このサイトのコンテンツ管理を効率化するため、ヘッドレスCMSであるDecap CMS（旧Netlify CMS）を導入しました。この記事では、その導入プロセスと技術的な判断、そして遭遇した問題の解決策について記録します。

最終的に、CMSの管理画面はNetlifyで、公開サイトはGoogle Cloud Runで運用する、という少し特殊なハイブリッド構成に落ち着きました。

• CMS管理環境 (Netlify)

  • URL: https://[your-site].netlify.app/admin/
  • 役割: Decap CMSの管理画面を提供し、Netlify Identityで認証を行います。

• 公開サイト環境 (Google Cloud Run)

  • URL: https://[your-custom-domain].com/
  • 役割: 静的サイトをホストします。既存のCI/CDパイプラインは維持されます。

この記事が、同様の構成を検討している方の参考になれば幸いです。

シェアボタンを実装する​

このサイトの各記事に、SNSで共有するためのシェアボタンを設置しました。この記事では、その実装プロセスと、背景にある技術的な判断などについて記録します。

完成したコンポーネントの特長は、ページのタイトルとURLを自動で取得する点です。これにより、一度設置すれば、記事ごとに特別な設定を追加する必要がなく、メンテナンスの手間がかかりません。

この記事では、Docusaurusサイト内に、国内外のニュースサイトを一覧できる「ニュースページ」を実装した際の整理をします。

1. ページの目的と主要機能​

個人的な情報収集の起点として、信頼できるニュースソースへ素早くアクセスできるページの構築が目的。すべて静的ページとしてビルドし、高速な表示や利便性、メンテナンス性を重視しました。。

Artifact Registryで膨らむストレージ料金への対策​

GitHub ActionsなどでCI/CDを組み、Google Cloud Runへデプロイする運用。その実行のたびに、新しいDockerイメージがArtifact Registryにプッシュされていく。これは非常に便利な仕組みである一方、何もしなければ古いイメージは溜まる一方。「気づいたらストレージ料金が想定より高い…」そんな経験はありませんか？

本記事では、この問題を解決するため、Artifact Registryの「クリーンアップポリシー」機能の活用法の紹介。不要になった古いDockerイメージを自動で削除し、ストレージコストを継続的に最適化する手順の、備忘録としての整理します。

本記事は、Google Cloud Consoleの2025年7月時点のUIを元に解説。

ブラウザメモ機能：URL共有とUI/UX改善の実装記録​

はじめに​

以前に実装した ブラウザメモ 機能 について

これまでの使用感や競合サービスの調査の結果、大幅な機能改善を実施。

本記事では、URLによるメモ共有機能の実装と、その過程で行ったUI/UX改善の技術的ポイントを整理します。

Macで快適な文字入力を取り戻す​

Macで文章を作成したり、コードを書いたりしている時、aキーを長押ししたらaaaaa...と連続で入力されてほしいのに、以下のようなアクセント記号（例：à）付き文字の選択メニュー（アクセントメニュー）が表示されて困った経験はありませんか？

これはmacOSの「プレスアンドホールド」という便利な機能ですが、特にプログラミングや文章作成でキーを連続入力したい場合には、かえって作業の妨げになることがあります。

本記事では、このアクセントメニューを無効化し、従来のキーリピート（連続入力）を有効にする方法を、Macに不慣れの方にも分かりやすく解説します。

本記事は以下の環境で動作確認済みです。

• Mac: M1, 2020
• macOS: Sonoma 15.1 (24B83)

Docusaurusで構築した多言語（i18n）サイトへのAlgolia DocSearch導入時、検索結果に複数言語が混在するという課題への直面。日本語での検索時に英語ページがヒットするなど、ユーザー体験を損なう事態が発生しがちです。

本記事では、この問題を解決し、サイトの表示言語と連動した最適な検索体験を実現するための具体的な設定手順を備忘録として整理します。