Node.js のセットアップ

まず、パッケージシステムを更新し、ベースとなる Node.js と npm をインストールします。

sudo apt-get update
sudo apt install -y nodejs npm

Debian 標準の Node.js はバージョンが古い場合があるため、バージョン管理ツール n を使って安定版（Stable）を導入します。

# n をインストールして安定版 Node.js を導入
sudo npm install -g n
sudo n stable

node --version
# v22.x.x などの安定版が表示されればOK

Gemini CLI のインストール

環境によってはプロキシの設定が必要です。

export https_proxy=http://ユーザー名:パスワード@プロキシアドレス:ポート番号

npm を使ってグローバルにインストールします。

npm install -g @google/gemini-cli

初回起動と設定

インストールが完了したら、gemini コマンドで起動します。

gemini

無事に起動すると、以下のようなウェルカムメッセージが表示されます。

  ▝▜▄     Gemini CLI v0.35.0
    ▝▜▄
   ▗▟▀
  ▝▀

Tips for getting started:
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results

表示されている 4 つのポイントを要約すると以下の通りです。

1. GEMINI.md ファイルを作って動作をカスタマイズできる
2. /help で詳細な情報を確認できる
3. コーディングの質問、コード編集、コマンド実行ができる
4. 具体的に指示を出すと最良の結果が得られる

フォルダの信頼設定

起動すると、まず現在のフォルダを信頼するか聞かれます。

Do you trust the files in this folder?

● 1. Trust folder (btakeshi)
  2. Trust parent folder (home)
  3. Don't trust

通常は 1. Trust folder を選択して Enter で進みます。

認証（ログイン）の設定

次に、認証方法を選択します。

? Get started

  How would you like to authenticate for this project?

  ● 1. Sign in with Google
    2. Use Gemini API Key
    3. Vertex AI

今回は 1. Sign in with Google を選択しました。そのまま進めるとブラウザを起動するか確認されます。

 Opening authentication page in your browser.

 Do you want to continue?

 ● 1. Yes
   2. No

1. Yes を選択するとブラウザが立ち上がり、Google アカウントの選択画面になります。ログインが完了すると、ブラウザに「認証成功」と表示されます。

ターミナルに戻ると、再起動を促すメッセージが出ています。

You've successfully signed in with Google. Gemini CLI needs to be restarted. Press R to restart, or Esc to choose a different authentication method.

R キーを押して再起動すれば、準備完了です！

もし設定を最初からやり直したい場合は、ホームディレクトリの .gemini フォルダを削除すれば OK です。 これで Gemini CLI が自由に使えるようになりました！

最新バージョンへのアップデート方法

Gemini CLI を常に最新の状態で利用するために、システム環境を含めた更新手順をまとめました。

1. OS とパッケージの更新

Debian のパッケージマネージャーを最新の状態にし、システム全体を安定させます。

sudo apt update && sudo apt upgrade -y
sudo apt full-upgrade -y
sudo apt autoremove -y

2. Node.js と npm の更新

前述の n を使って Node.js を最新の安定版に、npm 自身も最新版に更新します。

# Node.js を最新の安定版(stable)に更新
sudo n stable
# npm 自体を最新版に更新
sudo npm install -g npm@latest

3. Gemini CLI の更新

最後に Gemini CLI 本体を最新バージョンに更新します。

npm install -g @google/gemini-cli@latest

💡 アドバイス：起動時に「アップデート失敗」と表示される場合

すべて正常に完了したはずなのに、gemini 起動時に「Update failed」と表示される場合は、以下の点を確認してみてください。

1. 古い実体の残留: 以前のインストール方法やパスの関係で、古いバージョンの gemini が優先的に実行されている可能性があります。which gemini で実行ファイルのパスを確認し、重複していないかチェックしましょう。
2. ハッシュのクリア: ターミナルが古い実行パスを記憶している場合があります。hash -r を実行してから再度 gemini を起動してみてください。
3. 権限の問題: グローバルインストールの際に sudo が必要な環境（/usr/local/bin などに書き込む場合）では、sudo npm install -g @google/gemini-cli@latest を試してみてください。
4. 強制再インストール: 一度アンインストールしてから入れ直すのが確実な場合もあります。

   npm uninstall -g @google/gemini-cli
   npm install -g @google/gemini-cli@latest
   

2026-03-25

このブログの土台を徹底的に作り込みました。 何度もやり直していて、ここまで３か月ぐらいかかったかも。 これが最後にと単なるデザインの修正に留まらず、Jekyll の機能を活かした効率的な運用体制を整えたつもり。

1. UI/UX の刷新：温かみのある「付箋」デザイン

「ワンカラムで読みやすく、オレンジを基調とした淡いデザイン」をテーマに、以下の調整を行いました。

• レスポンシブ・ワンカラム: デスクトップでは読みやすい幅に制限（max-w-3xl）し、中央寄せ。スマートフォンでも最適な余白を確保しました。
• 付箋風リスト: 記事一覧を白いカード形式にし、左側にアクセントのオレンジ線を配置。ホバー時に少し浮かび上がる演出を加え、クリックしやすさを向上させています。
• テーマカラーの統一: Tailwind CSS のカスタム設定を導入。primary カラーとしてオレンジを定義し、ヘッダー、リンク、枠線などを一貫したトーンで統一しました。

2. Jekyll アーキテクチャの最適化

メンテナンス性を高めるため、ファイル構造とロジックを整理しました。

• カテゴリ名の日本語管理: _data/categories.yml を作成。URL用の英語スラッグ（tech）と、表示用の日本語名（技術）をマッピングすることで、クリーンなURLと親しみやすい表示を両立しました。
• レイアウトの完全分離: 記事（post）とカテゴリ（category）のレイアウトを独立。各ページファイルは Frontmatter を最小限書くだけで、タイトルやURLが自動生成される仕組みに。
• URLの自動生成: _config.yml を調整し、記事のURLを /:categories/:title/ の形式に固定。ファイル名から日付とタイトルを自動で引き継ぎます。

3. 技術ブログとしての機能強化

読み手にとっても、書き手にとっても嬉しい機能をいくつか追加しました。

• シンタックスハイライト: Highlight.js（intellij-light テーマ）を導入。コードブロックの背景を極薄のオレンジ、枠線を濃いオレンジにカスタマイズし、サイトの雰囲気に溶け込ませました。
• SNS 連携 & OGP: 記事末尾に X, Facebook, LINE, URLコピーのボタンを設置。SNS 投稿時に画像や説明文が綺麗に出るよう、OGP メタタグの自動生成にも対応しました。
• アイキャッチ画像: Frontmatter で image を指定するだけで、タイトル下に角の丸い美しいアイキャッチ画像が表示されるようにしました。

4. 実践：Gemini CLI on Debian のセットアップ

実際に Gemini CLI を Debian 環境で動かすまでの技術メモを執筆。AI と協力して、Node.js の最新版導入手順や認証フローを分かりやすく整理しました。

まとめ

AI との対話を通じて、「こういう風にしたい」という曖昧なイメージを、具体的なコードと堅牢なフォルダ構造に落とし込んでいく過程は非常に効率的でした。

2026-03-26

ブログの利便性とデザインをさらに一歩進めました。

1. タグシステムの構築

これまで「ただの文字列」だったタグを、機能的なインデックスとして活用できるようにしました。

• タグ一覧ページの新設: 全記事からタグを抽出し、カテゴリ別に整理した /tags/ ページを作成。
• 記事内リンクの設置: 記事上部のタグをクリックすると、そのタグが含まれる記事一覧へジャンプするようにし、関連トピックを探しやすくしました。

2. 「最新の記事」セクションの追加

記事を読み終えた後に他の記事へ誘導できるよう、末尾に最新5件のリストを配置しました。

• デザインの統一: トップページと同じ「白いカード ＋ 左側のオレンジ線」を採用。
• ホバーエフェクト: カードにカーソルを合わせると少し浮き上がる演出を加え、クリックしやすさを高めています。

3. Google Analytics (GA4) の導入

サイトの成長を数字で見守るために、GA4 を設定しました。

• 部品化による管理: トラッキングコードを _includes に分け、ID は _config.yml で管理。将来のコード変更にも柔軟に対応できるようにしています。

4. リーダビリティ（可読性）の追求

文章がスッと頭に入るよう、見出し（H2, H3）のデザインを徹底的に調整しました。

• 色のバランス: オレンジ一色にならないよう、境界線に薄いグレーを混ぜて視覚的な「区切り」を明確に。
• 空間のデザイン: 前の段落との「余白」を多めに取り、話題が切り替わったことを直感的に理解できるようにしました。

まとめ

「情報を探しやすい」「読んでいて疲れない」というブログの基本機能を、AI との対話で一気に形にすることができました。デザインと機能が噛み合っていく過程は非常に心地よいものです。

2026-03-29

ブログを「読むもの」から「解くもの」へ。数学コンテンツを核とした「オンライン問題集」のシステムを Gemini と共に一気に構築しました。

1. 数式表示の最適化（KaTeX の導入）

数学ブログには欠かせない数式表示を、MathJax よりも軽量・高速な KaTeX で実装しました。

• kramdown との競合回避: Jekyll 標準の Markdown プロセッサが $$ を勝手に変換しないよう、_config.yml で math_engine: nil を設定。
• レイアウトの統一感: 独自の CSS でブロック数式を「左寄せ＋インデント（fleqn 風）」に設定。文章の流れを止めない、自然な数式配置を実現しました。

2. 「動く問題集」システムの構築（Jekyll Collection）

単なるブログ記事ではなく、繰り返し学習できる「ドリル」として管理するために Jekyll の Collection（コレクション）機能 を導入しました。

• 専用ディレクトリ _drills/: ブログ記事（_posts）とは別に教材を管理。ファイル名に sec1- などの接頭辞を付けることで、自動的にセクション分けされる仕組みを作りました。
• ポータルページの自動生成: フォルダ構造やファイル名から、日本語の見出し（数学I、二次関数など）を自動で判別して一覧表示するインデックスページを作成しました。

3. デジタルならではの学習体験（LocalStorage & Shuffle）

紙の問題集にはできない「オンラインならでは」の機能を JavaScript で盛り込みました。

• 進捗の保存: 「完了」「復習」「未挑戦」のステータスをブラウザの LocalStorage に保存。再訪したときに「どこまでやったか」がひと目で分かります。
• 問題のシャッフル: ボタン一つで問題の順番をランダムに入れ替え。解答の「順番」を覚えてしまうのを防ぎ、真の実力を試せます。
• 段階的な解説: <details> タグを活用し、「正解」→「手書きの思考プロセス（画像）」→「動画解説」と、段階的にヒントを開示できる UI を設計しました。

4. 視覚的な「モード切り替え」

学習に集中できるよう、ドリルセクション（/drills/）にアクセスした際、サイト全体のテーマカラーが温かみのあるオレンジから、爽やかな 「黄緑色（Lime）」 へと動的に切り替わる仕掛けを導入しました。

• CSS 変数の活用: Tailwind CSS のカラー設定を変数化し、ページの種類に応じて一括で色味を制御。ヘッダーやボタン、進捗バーまで、違和感なく色が切り替わります。

まとめ

「静的な Jekyll サイト」に「動的な JavaScript のギミック」を組み合わせることで、非常に実用的でメンテナンス性の高いオンライン学習プラットフォームの土台が完成しました。AI との対話により、技術的なハマりどころ（YAML の解析エラーや CDN の整合性チェックなど）を迅速に突破できたのが大きな収穫です。