このREADMEは東京都立大学情報科学科ウェブサイトの管理者向けのドキュメントです。サイトの構造、開発環境のセットアップ方法、コンテンツの追加・編集方法、多言語対応の管理方法、およびデプロイ手順について説明します。
このウェブサイトはJekyllを使用して構築されています。Jekyllは静的サイトジェネレーターであり、Markdownファイルからウェブサイトを生成します。このサイトは日本語と英語の両方のコンテンツを提供しており、多言語対応（i18n）が実装されています。
サイトは以下のディレクトリ構造で構成されています：
/
├── _config.yml # Jekyllの設定ファイル
├── Gemfile # Rubyの依存関係
├── index.md # トップページ（日本語）
├── _data/ # サイトデータ
│ ├── staff/ # 教員情報
│ │ ├── ja.yml # 日本語版教員情報
│ │ └── en.yml # 英語版教員情報
│ └── i18n/ # 多言語翻訳データ
│ ├── ja.yml # 日本語翻訳
│ └── en.yml # 英語翻訳
├── _docs/ # ドキュメント
│ ├── news-management.md # News & Topics管理ガイド（日本語）
│ └── news-management-en.md # News & Topics管理ガイド（英語）
├── _includes/ # 再利用可能なコンポーネント
│ ├── header.html # ヘッダー
│ ├── footer.html # フッター
│ ├── navigation.html # ナビゲーション
│ └── ...
├── _layouts/ # レイアウトテンプレート
│ ├── default.html # デフォルトレイアウト
│ └── staff_member.html # 教員ページレイアウト
├── _news/ # 日本語ニュースアイテム
│ ├── 2025-04-20-new-sample.md # サンプルニュース
│ └── ...
├── _en_news/ # 英語ニュースアイテム
│ ├── 2025-04-20-new-sample.md # サンプルニュース（英語）
│ └── ...
├── _pages/ # 日本語ページ
│ ├── about.md # 情報科学科とは
│ ├── staff.md # 教員紹介
│ └── ...
├── _en_pages/ # 英語ページ
│ ├── about.md # About
│ ├── staff.md # Faculty
│ └── ...
├── _staff/ # 日本語教員ページ
│ ├── ono.md # 小野教授のページ
│ └── ...
├── _en_staff/ # 英語教員ページ
│ ├── ono.md # Professor Ono's page
│ └── ...
├── assets/ # アセット（CSS、JS、画像など）
│ └── css/
├── _sass/ # Sassスタイルシート
└── image/ # 画像ファイル
- Ruby 2.5.0以上
- RubyGems
-
Rubyをインストールします（まだインストールされていない場合）
# macOSの場合（Homebrewを使用） brew install ruby # Ubuntuの場合 sudo apt-get install ruby-full build-essential
-
Bundlerをインストールします
gem install bundler
-
プロジェクトディレクトリに移動し、依存関係をインストールします
cd /path/to/tmu-sd-cs.github.io bundle install -
ローカルサーバーを起動します
bundle exec jekyll serve -
ブラウザで
http://localhost:4000にアクセスして、サイトを確認します
_pages/（日本語）または_en_pages/（英語）ディレクトリ内の対応するMarkdownファイルを開きます- フロントマター（YAMLヘッダー）と本文を編集します
- 変更を保存し、ローカルサーバーで確認します
-
_pages/（日本語）または_en_pages/（英語）ディレクトリに新しいMarkdownファイルを作成します -
以下のようなフロントマターを追加します：
--- layout: default title: "ページタイトル" copyright_year: 2025 lang: "ja" # または "en"（英語の場合） ref: "unique-reference-id" # 日英ページを関連付けるための一意のID ---
-
ページコンテンツを追加します
-
変更を保存し、ローカルサーバーで確認します
News & Topicsセクションは、個別のマークダウンファイルとして管理されています。これにより、各ニュースアイテムを簡単に追加、編集、削除することができます。
詳細なガイドは以下のドキュメントを参照してください：
-
_news/（日本語）または_en_news/（英語）ディレクトリに新しいMarkdownファイルを作成します- ファイル名は
YYYY-MM-DD-title-slug.mdの形式にします - 例:
2025-04-20-open-campus.md
- ファイル名は
-
以下のようなフロントマターを追加します：
--- title: "ニュースのタイトル" date: YYYY-MM-DD ---
-
ニュースの内容を本文に追加します
-
8000
重要なニュースの場合は、日本語版と英語版の両方を作成します
- 編集: 該当するマークダウンファイルを開いて内容を変更します
- 削除: 該当するマークダウンファイルを削除します
_staff/（日本語）または_en_staff/（英語）ディレクトリ内の対応するMarkdownファイルを開きます- フロントマターと本文を編集します
- 変更を保存し、ローカルサーバーで確認します
-
_staff/（日本語）ディレクトリに新しいMarkdownファイルを作成します（例：lastname.md） -
以下のようなフロントマターを追加します：
--- layout: staff_member title: "氏名 研究室" copyright_year: 2025 staff_id: lastname staff_name: "氏名" staff_title: "役職" staff_image: "lastname_prof.webp" lang: "ja" ref: "staff-lastname" # 日英ページを関連付けるための一意のID specialties: - "専門分野1" - "専門分野2" description: "研究室の説明文" links: - title: "研究室website" url: "http://example.com" ---
-
研究内容などの本文を追加します
-
同様に、
_en_staff/ディレクトリに英語版のファイルを作成します -
教員情報を言語ごとのファイルに追加します：
# _data/staff/ja.yml に日本語情報を追加 - id: lastname name: 氏名 title: 役職 image: lastname_prof.jpg en_page: staff_lastname.html specialties: - 専門分野1 - 専門分野2 description: "" links: [] # _data/staff/en.yml に英語情報を追加 - id: lastname name: Name in English title: Position in English image: lastname_prof.jpg en_page: staff_lastname.html specialties: - Specialty 1 in English - Specialty 2 in English description: "" links: []
-
変更を保存し、ローカルサーバーで確認します
このサイトは日本語と英語の両方のコンテンツを提供しています。多言語コンテンツは以下のように管理されています：
-
ページの関連付け：日本語と英語のページは
ref属性で関連付けられています。同じref値を持つページは同じコンテンツの異なる言語バージョンとして扱われます。 -
翻訳データ：共通の翻訳テキスト（ナビゲーションメニュー、フッターなど）は
_data/i18n/ディレクトリ内のYAMLファイルで管理されています：_data/i18n/ja.yml：日本語翻訳_data/i18n/en.yml：英語翻訳
-
新しい翻訳の追加：新しい共通テキストを追加する場合は、両方の言語ファイルに同じキーで追加します。例えば：
# _data/i18n/ja.yml new_section: title: "新しいセクション" description: "説明文"
# _data/i18n/en.yml new_section: title: "New Section" description: "Description"
-
テンプレート内での使用：翻訳テキストはテンプレート内で以下のように使用します：
{{ site.data.i18n[page.lang].new_section.title }}
このサイトはGitHub Actionsを使用した継続的インテグレーション/継続的デリバリー（CI/CD）パイプラインを実装しています。mainブランチへのプッシュまたはプルリクエストが作成されると、以下の自動チェックが実行されます：
-
ビルド: Jekyllを使用してサイトをビルドします。
--strict_front_matterオプションを使用して、フロントマターの構文エラーを厳格にチェックします。 -
HTML検証:
- html-proofer: リンク切れ、画像の存在確認、HTML構文などをチェックします。
- htmlhint: HTML構文とベストプラクティスをチェックします。
.htmlhintrcファイルで定義されたルールに基づいて検証します。- 画像には
alt属性が必要 - 安全でない文字を含む属性をチェック
- 画像には
src属性が必要
- 画像には
-
デプロイ: 上記のすべてのチェックが成功し、変更がmainブランチにマージされると、サイトは自動的にGitHub Pagesにデプロイされます。
これらのチェックにより、サイトの品質と整合性が保たれ、問題のある変更がデプロイされることを防ぎます。
このサイトはGitHub Pagesを使用してデプロイされています。 mainブランチにマージされた内容は上記のCI/CDパイプラインを通じて自動でデプロイされます。