おもこん

おもこんは「思いつくままにコンピュターの話し」の省略形です

Jekyll初級編(2)GitHubへの問い合わせ

GitHubへの問い合わせ機能を使う

JekyllとGitHub Pagesを連携させるとします。 GitHubに情報を問い合わせ、GitHubのレポジトリの一覧を表示する方法について書こうと思います。 ポイントは2点あって、

  • jekyll-github-metadata gemを使う
  • データ(_dataディレクトリ以下のファイル)を使う

です。

jekyll-github-metadata gem

GitHubとローカルの環境を一致させるためにgithub-pages gemをGemfileに記述します。 これについて良くわからない場合ははじめてのJekyll + GitHub Pagesを参照してください。

github-pagesによって、jekyll-github-metadata gemも使えるようになります。 このgemによって「ローカルからGItHubに問い合わせて情報を得る」ことができるようになります。 この機能はあくまでローカルでJekyllを動かす時に役に立つ機能です。 GitHubにアップロードされたデータでは、GitHub内のJekyllがHTMLの生成をしますので、このgemを使う必要はない(と思います)。

この機能を使うときには、PATをセットしてすべてのデータが問い合わせできるようにしてください。 このことについては、jekyll-github-metadataのレポジトリの説明を見てください。 また、「はじめてのJekyll + GitHub Pages」の第4章の最後の節も参考になります。

この機能を使うとレポジトリの一覧、GitHub Pagesのアドレスなどを問い合わせることができます。

変数 変数の指すオブジェクト
site.github.public_repositories レポジトリのリスト(※)
site.github.url GitHub PagesのルートURL
site.github.owner_name レポジトリ所有者名

(※)各レポジトリのプロパティの一例

プロパティ 内容
name レポジトリ名
html_url レポジトリのURL
descriptopn レポジトリのディスクリプション

他にも多くの情報がありますが、詳細はjekyll-github-metadata gemのGitHubレポジトリをご覧ください。

この機能を使うと、「レポジトリ名の一覧表を表示する」などができます。

データ

_dataディレクトリにyamlcsvデータを置いてLiquidで参照することができます。 例えば_data/gh_pages.ymlは、私のレポジトリのうちGitHub PagesのHTMLページを持っているもののリストです。

- Gobject-tutorial
- Gtk4-tutorial
- jekyll-tutorial-for-beginners
- Rake-tutorial-for-beginners-en
- Rake-tutorial-for-beginners-jp
- ToshioCP.github.io

これをLiquidで取り込むには次のようにします。

{% assign gh_page_repos = site.data.gh_pages %}

変数gh_page_reposにはデータディレクトリのgh_pages.ymlyamlデータが代入されます。 上記の通り、yamlデータはリストなので、変数には配列が代入されます。 今回の例では配列しか扱いませんが、ハッシュを扱う場合はドット記法で値を取得することができます。

実例(レポジトリの一覧表示)

実例として、jekyll-github-metadataを使ってレポジトリ名とURLを取得し、かつyamlデータに含まれるレポジトリのHTMLページへのリンクを表示します。

---
layout: page
title: Repositories
description: The list of the repositories
lang: en
---
{% assign gh_page_repos = site.data.gh_pages %}
| Repository | GitHub Page (Document) |
|:-----------|:------------|
{%- for repository in site.github.public_repositories -%}
  {%- if repository.name == "ToshioCP.github.io" %}
    | [{{ repository.name }}]({{ repository.html_url }}) | <{{site.github.url}}> |
  {%- elsif gh_page_repos contains repository.name %}
    | [{{ repository.name }}]({{ repository.html_url }}) | <{{site.github.url}}/{{repository.name}}/> |
  {%- else %}
    | [{{ repository.name }}]({{ repository.html_url }}) | |
  {%- endif -%}
{%- endfor -%}

マークダウンで表を出力するために縦棒|と区切り|:---|:---|を使っています。

  • for文を使い、site.github.public_repositories(レポジトリの配列)からレポジトリを一つずつ取り出して変数repositoryに代入し、ループする
  • repository変数にはレポジトリのオブジェクトが代入されている。 そのプロパティは多数あるが、そのうちname(レポジトリ名)とhtml_url(レポジトリのURL)を使う この2つから、レポジトリへのリンクを作成する
  • レポジトリ名がToshioCP.github.ioであれば、GitHub Pagesのルートから展開されるHTMLページがあるので、site.github.urlへのリンクを表示する
  • レポジトリ名がgh_page_reposに含まれていれば、HTMLページがあるので、site.github.urlにrepository.name(これがBase URLになる)をつけたアドレスへのリンクを表示する
  • それ以外はHTMLページを持たないのでそこは空欄にする

このページを表示すると次のようになります。

repositoriesページ

まとめ

GitHubの情報で最も使いそうなのがレポジトリの情報だと思います。 それ以外の情報も問い合わせできますが、あまり使い方が思いつきませんでした。 今回は名前とURLを使いましたが、他にもZIPやTAR.GZのダウンロードのURLなども役立ちそうです。

データの使い方は様々です。 今回はHTMLページのあるレポジトリ名のデータを使いましたが、応用範囲はとても広いです。 例えば気象データを表形式で表示する場合、HTMLページと気象データを分離できますから、データのみ更新すれば良いことになります。 そのため、更新が非常に楽になります。

その他にも様々なことにデータが使えます。 ぜひ、データの有効活用について研究してみてください。