全研究者に役立つAIエージェントの用途
1. まえがき
これは 総研大アドベントカレンダー 2025 3日目の記事です． 企画していただいた とりさん をはじめ，総研大アドベントカレンダーに関わってくださった皆さんに感謝します．
こんにちは，総研大 統計科学コースで博士後期課程に在籍している KeishiS です． 今回，ML系の研究の話は他の方が書いてくれそうなので，全領域の研究者に有用なネタはないものかと考えた結果， AIエージェントで個人ページを作成しよう というテーマにたどり着きました．
2. 背景
昨今AI技術の進展が目覚ましいですが，世の中でガッツリ使っているのはエンジニアがメインな印象を受けます． 研究者の皆さんにもその能力を知っていただきたいと思う反面，研究者倫理的にどこまで使ってよいか判断が難しいため研究活動には導入しにくいです． 色々応用先を考えた結果， 個人ページの作成 であれば問題は生じないだろうと考えました．
- 個人ページの利点
-
ページに載せる情報はすべて公開情報になるため，AIエージェントに読み込ませても問題がない．
- 個人ページの必要性
-
皆さん researchmap や Google Sites などで持ってますよね？はい．
この記事自体も私の個人ページ上で公開されており， AIエージェントとの合作 です． 完璧とまではいきませんが，動くものを作るには十分な能力を既にAIエージェントは持っており，特にデザインに関しては私より優れています．
この記事でははじめに 研究者の個人ページに必要な機能やコンテンツ を整理した後， AIエージェントの導入説明 を簡単に行い，最後に 個人ページ作成 の例を紹介します． 非エンジニア向けに書こうとは頑張りましたが，環境構築はプログラミングで最も難しい部分なのである程度はご容赦ください．
|
Caution
|
この記事ではなるべくプログラミング的な編集操作は避けていますが，それゆえに生成物の品質は保証できません．こうやればそれっぽいことが簡単にできるよという紹介として捉えていただければ幸いです． |
3. 個人ページの要件定義
研究者のための個人ページに必要な機能，必須のコンテンツを洗い出した結果，以下のようなものがあれば良さそうという結論に至りました．
-
機能
-
コンテンツ作成に手間がかからない
-
多言語対応
-
レスポンシブデザイン（画面サイズに応じて崩れることなくレイアウトできる機能のこと）
-
-
コンテンツ
-
差別化できるプロフィール紹介
-
見やすい研究業績，経歴紹介
-
関連する外部ページ（ORCiDやGoogle Scholar，大学の研究室ページ，etc…）へのリンク
-
-
オプション要件
-
研究紹介の記事が書きやすい（相互参照が使える，bibファイルが使い回せる，コード表示がキレイ，etc…）
-
特に 多言語対応 は海外研究者からの閲覧を考慮した際に重要となりますし， 近年はPCではなくスマホでの閲覧が主流のため レスポンシブデザイン は必須です． それらを踏まえた具体的な技術選定は Section 5 で説明します．
4. AIエージェントの導入
Gemini(Gemini CLI) や Claude(Claude Code)， ChatGPT(Codex) の名前を 聞いたことがない人はいないでしょうが，今回やる作業においてはどれを使っても問題なく実行できます． 恐らく一番難しいのが， これらの実行環境を準備したうえでAIエージェントをインストールすること です．具体的には以下の事をやる必要があります．
-
Node.js のインストール: その際に
npm/Yarn/pnpmの選択画面が出てくるかもしれません．どれでも良いですがこの記事ではpnpmを前提に記載します． -
Gemini / Claude Code / Codex のいずれかをリンク先の情報をもとにインストール
残念ながら各用語の説明を行うには時間的な余白がないため各ページのインストール手順を参考に，ブラウザ上のChatGPTへ聞きながら頑張って進めてください． Windowsの方は 管理者権限で実行したPowerShell（図 1） 上でインストールを行う必要があったり， 環境変数へパスを通したり する必要があるかもしれません． 詳細はChatGPTが知っています．残念ながらMacPCを私は持っていないので何もアドバイスできません．Linux distroを使っている方は自力でできるでしょう． 無事インストールできれば図 2のような画面のいずれかが表示されると思います．
5. 個人ページの技術的な導入
さて本題である個人ページの作成ですが，さすがにHTML/JavaScript/CSSを一から書くのは面倒すぎます． 本件のように「コンテンツ作成に注力し，webページとしての機能は汎用的なツールに委ねたい」場合， 静的サイトジェネレータ（Static Site Generator, SSG） と呼ばれるツールを使うのが一般的です．
-
多言語対応が容易
-
近年流行りのMarkdown形式 [1] で記事を書くことができ，またリッチなページを作りたいときは Astroコンポーネント でHTML風にページを構成できる
-
特定のディレクトリに配置した記事を（または記事に付与したタグ毎に）収集し，リスト化したページを自動的に生成できる（私の個人ページの これ みたいな感じ）
5.1. テンプレートページの作成
さて早速個人ページ作成に着手しましょう．WindowsであればPowerShell，Mac/Linuxの方は適当なターミナルソフトを起動して pnpm create astro@latest --template blog を実行してみましょう．すると Where should we create your new project? と聞かれるので適当なプロジェクト名（ディレクトリ名，ここでは personal-page ）を入れてください．
> pnpm create astro@latest --template blog
astro Launch sequence initiated.
dir Where should we create your new project?
./personal-page
◼ tmpl Using blog as project template
deps Install dependencies?
Yes
git Initialize a new git repository?
No
◼ Sounds good! You can always run git init manually.
✔ Project initialized!
■ Template copied
■ Dependencies installed
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./personal-page
Run pnpm dev to start the dev server. CTRL+C to stop.
Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chat
╭─────╮ Houston:
│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀
╰─────╯ちなみに --template blog の部分はテンプレートを変更することもできます．例えば以下のように利用できます．
コミュニティ公開のテンプレートはライセンスをよく確認しましょう．
-
公式が提供するサンプルテンプレート ではリンク先のうち，使いたいもののディレクトリ名を指定
-
コミュニティが公開するテンプレート では一覧から気に入ったものを探し，GitHubのユーザ名/リポジトリ名を
--template <username>/<repository name>の形で指定
次に作成されたディレクトリへ cd personal-page などで移動し pnpm dev を実行すると，
┃ Local http://localhost:4322/
┃ Network use --host to expose
17:41:36 watching for file changes...と表示されるのでブラウザで http://localhost:4322 へアクセスすると，雛形のwebページが表示されます．
5.2. コンテンツの編集
このままでは雛形そのものなのでコンテンツを自分のものに差し替えましょう． どこに手を加えるべきかはテンプレートに依存しますが，blogテンプレートの場合はひとまず
-
src/consts.ts: ページ名(SITE_TITLE)と簡単な説明文(SITE_DESCRIPTION) -
src/pages/{index.astro,about.astro}: トップページと自己紹介ページ -
src/content/blog/以下のMarkdownファイル群の編集・削除 -
src/assets/以下の画像ファイルの削除 -
public/favicon.svgの削除
5.3. AIエージェントでカスタマイズ
さて，ここからが本題のAIエージェントの出番です．blogテンプレートだと英語のみのため，
日本語と英語の両方を表示できるようにカスタマイズしてもらいましょう．作業ディレクトリを ./personal-page/ へ移動した状態でAIエージェントを起動して，
例えば以下のようなプロンプトを与えてみましょう．
> Astro v5に準拠して，本ページを日本語/英語対応にしてください．なお日本語のページが存在しない場合，英語の記事を日本語に翻訳して生成し，不要なファイルや記述は削除してください．するとディレクトリ以下の色々なファイルを読み込んだうえで「 astro.config.mjs へ i18n に関する記述を追加する」的な修正案を提示してくれるはずです．
単発のファイル修正では失敗することはありますが，勝手に修正サイクルを回してくれるのでしばし待ちましょう．その結果，自分の場合は以下のようなファイル構成になりました．
.
├── astro.config.mjs
├── package.json
├── pnpm-lock.yaml
├── public
│ └── fonts
│ ├── atkinson-bold.woff
│ └── atkinson-regular.woff
├── README.md
├── src
│ ├── assets
│ ├── components
│ │ ├── BaseHead.astro
│ │ ├── Footer.astro
│ │ ├── FormattedDate.astro
│ │ ├── Header.astro
│ │ └── HeaderLink.astro
│ ├── consts.ts
│ ├── content
│ │ └── blog
│ │ ├── en
│ │ │ ├── first-post.md
│ │ │ ├── markdown-style-guide.md
│ │ │ ├── second-post.md
│ │ │ └── third-post.md
│ │ └── ja
│ │ ├── first-post.md
│ │ ├── markdown-style-guide.md
│ │ ├── second-post.md
│ │ └── third-post.md
│ ├── content.config.ts
│ ├── i18n
│ │ ├── ui.ts
│ │ └── utils.ts
│ ├── layouts
│ │ └── BlogPost.astro
│ ├── pages
│ │ ├── en
│ │ │ ├── about.astro
│ │ │ ├── blog
│ │ │ │ ├── index.astro
│ │ │ │ └── [...slug].astro
│ │ │ └── index.astro
│ │ ├── index.astro
│ │ ├── ja
│ │ │ ├── about.astro
│ │ │ ├── blog
│ │ │ │ ├── index.astro
│ │ │ │ └── [...slug].astro
│ │ │ └── index.astro
│ │ └── rss.xml.js
│ └── styles
│ └── global.css
└── tsconfig.json人によっては構成が違うかもしれませんがおおよそこんな感じになっているはずです．
最終的に pnpm build を実行してエラーが出ておらず， pnpm dev で見た時，
日本語/英語両方のページが正しく表示されていればOKです．
5.4. 一般公開のための手順
pnpm dev を実行してブラウザから閲覧できているのは，手元のPCがサーバの役割を担い，
ブラウザは手元のPCで立ち上がっているサーバへアクセスしているためです．
http://localhost:4322/ における localhost とは手元のPCを指しています．
したがって誰もが閲覧できる状態にするには，インターネットに公開されているサーバへ
dist/ 以下のファイルをアップロードする必要があります．やり方は複数ありますが，
せっかくですので GitHub を使う方法を紹介します．
- GitHub
-
一般にはプログラムのソースコードを管理するためのサービスとして知られますが，テキストデータであれば大抵のものをアップロードでき，webページを公開する機能である GitHub Pages も提供しています．
ちゃんと真面目にwebページを公開したい方は 公式ドキュメント を読んでいただくのが良いのですが， とりあえず試してみたいという方は以下の手順で十分です．
5.4.1. GitHubアカウント作成
はじめての方は GitHub へアクセスし，右上の Sign up からアカウントを作成しましょう． GoogleやAppleのアカウントと紐づけて登録すれば，入力項目が少なくて済みます．
5.4.2. リポジトリの作成
GitHubでは リポジトリ と呼ばれるまとまりの単位で1つのプロジェクトを管理します． それではリポジトリ作成のページに飛びましょう．
-
ページ右上のアカウントアイコンをクリックし，
Repositoriesを押下 -
ページの右上にある New ボタンを押下（図 3）
-
Create a new repositoryページに遷移しますが，ここで入力するのは1箇所，確認するのは1箇所です-
Repository name欄にリポジトリ名を入力します．基本的には<username>.github.ioとしてください．例えばアカウント名がnobuta05であればnobuta05.github.ioとします -
確認項目として
Choose visibilityの値がPublicになっていることを確認してください．これはリポジトリの内容を誰でも閲覧できるようにする設定ですが，元々個人ページは公開前提で作成するものなので問題はありません．
-
-
残りの項目をいじる必要はありません．ページ下部の Create repository ボタンを押下
すると図 4のようなページに遷移され，色々な指示が書かれていますが，ほとんど無視して大丈夫です．
今回はGUIでアップロードの操作をするため，ページ中央付近にある uploading an existing file リンクを押下してください．
すると図 5の左半分のような画面に遷移しますので， Drag files here to add them to your repository という部分へ テンプレートで作成した+編集したファイルをドラッグアンドドロップします．その際，画像のように node_modules/ 以外 をアップロードしてください．
コメント部分は空欄のままで構わないので， Commit changes ボタンを押下してください．
5.4.3. GitHub Pagesのためのリポジトリ設定の変更
次にGitHub Pagesの設定を有効化するために，リポジトリの設定を1箇所変更します．
設定項目から変更すべき項目は以上です．上部に並ぶタブの一番左にある Code タブを押してトップページに戻りましょう．
5.4.4. GitHub Actions 設定ファイルの生成
ここでまたAIエージェントに戻って，必要な設定ファイルを生成してもらいます．以下のようなプロンプトを与えましょう．
> `pnpm build` による生成物をgithub actions経由でgithub pagesとしてデプロイするための設定を追加してください．するとファイル名やその中身は若干異なるかもしれませんが， .github/workflows/deploy.yml というファイルが生成され，
何らかの手順を教えてくれると思います．私の場合は コード 1 のような内容でした．
デプロイ手順
1. astro.config.mjs を更新
// ユーザー/組織ページ (username.github.io) の場合:
site: 'https://username.github.io'
// リポジトリページ (username.github.io/repo-name) の場合:
site: 'https://username.github.io/repository-name'
base: '/repository-name' // この行も追加
2. GitHub リポジトリ設定
- Settings → Pages → Source を "GitHub Actions" に変更name: Deploy to GitHub Pages
on:
# mainブランチへのpush時にトリガー
push:
branches: [main]
# GitHub UIから手動実行も可能
workflow_dispatch:
# GitHub Pagesへのデプロイを許可
permissions:
contents: read
pages: write
id-token: write
# 同時実行を1つに制限（進行中のデプロイをキャンセルしない）
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
version: 9
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
cache: 'pnpm'
- name: Setup Pages
id: pages
uses: actions/configure-pages@v5
- name: Install dependencies
run: pnpm install
- name: Build with Astro
run: pnpm build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./dist
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
needs: build
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v45.4.5. GitHub Actions 設定ファイルのアップロード
最後に，生成された .github/workflows/deploy.yml をリポジトリへアップロードしましょう．
-
図 8のように，リポジトリトップページにある Add file ボタンを押下
-
出てくる Create new file ボタンを押下
-
図 9 にある上部のボックスに
.github/workflows/deploy.ymlを入力．-
deploy.ymlの部分は，AIエージェントが生成したファイル名と異なる可能性があります．どんなファイル名でも動作するのでdeploy.ymlで問題ありません．
-
-
大きいテキストエリアに，生成されたファイルの中身をコピーアンドペースト
-
右端にある Commit changes… ボタンを押下
-
テキストボックスがポップアップしますが，特に変更せずに Commit changes ボタンを押下
完了したら上部タブにある Code を押してリポジトリのトップページに戻りましょう．
5.4.6. GitHub Actions の動作確認
あとは待つだけです．図 10のように，黄色い丸アイコンが表示されていれば，処理が実行されていることを意味します． しばらく待ってページリロードすると緑色のチェックマークに変わるか，赤色のバツ印が表示されます．
5.4.7. 緑色のチェックマークが表示された場合
おめでとうございます．処理が成功しましたので， https://<username>.github.io にアクセス（ <username> は自身のアカウント名に置換）してみてください．
pnpm dev で見ていたのと同じページが表示されるはずです．
6. まとめ
こんな感じにAIエージェントを使うことで，直接コードを書かずともwebページを公開できるレベルにまで到達していることを紹介しました． もちろん完璧なものができるわけではなく，生成物の品質を高めるにはプログラミング的な能力があるに越したことはありませんが， 日常的にプログラミングをしない方が Git/GitHub や AIエージェント に慣れ親しむきっかけとして， 個人ページ作成は良い題材になるのではないかと思います．
正直に振り返ると，非エンジニア向けにはセットアップの箇所がきちんと噛み砕けてませんし， エンジニア向けには Astro良いよ という情報提供しかできていないので中途半端な記事になってしまった感は否めませんが， この記事によって皆さんの活動の幅が少しでも広がれば幸いです．