GitHubアクション「user-statistician」にハロウィンテーマを追加

ハロウィンとHacktoberfestに間に合うように、最近、user-statistician GitHubアクションに数種類のハロウィンテーマを追加しました。以前からこのGitHubアクションについて投稿していますが、GitHub上での活動を詳細にまとめたSVGを作成し、GitHubプロフィールのREADMEや個人のウェブサイトに掲載することができます。GitHubプロフィールリポジトリ内でスケジュール通りに動作するGitHubワークフローを通じて実行することを目的としています(ユーザー名と同じ名前のリポジトリ)。Pythonでコンテナアクションとして実装されており、GitHub GraphQL APIをクエリするためにGitHub CLIを使用しています。より詳しい機能については、以前のDEVの投稿や、このシリーズの他の投稿をご覧ください。

user-statistician GitHubアクションには、いくつかのビルトインカラーテーマが含まれています。これまでは、すべてのビルトインカラーテーマはGitHubのPrimerドキュメントで説明されているGitHubの様々なテーマに基づいていました。最近、halloweenhalloween-lightbattyの3つの新しいハロウィン関連テーマを追加しました。既存のGitHubインスパイアされたテーマを使いたいけれど、オクトキャットの代わりにかぼちゃ(新しいhalloweenhalloween-lightテーマから)やコウモリ(新しいbattyテーマから)を使いたい場合は、それもサポートされています。

この記事の残りの部分では、新しいテーマの例と、新しいテーマの設定方法を説明する例のワークフローを示しています。

目次:

ダークハロウィンテーマ

まず新しいhalloweenテーマを使ったGitHubワークフローですが、デフォルトの入力をすべて使用します。以下のワークフローをリポジトリの.github/workflowsディレクトリ内の.ymlファイルに置くと、毎日午前3時(cronを参照)に実行され、workflow_dispatchイベントを通じて手動でも実行されます。テーマはアクションへのcolors入力で設定されます。GitHub GraphQL APIをクエリするためにGITHUB_TOKENを環境変数として必要とします。GITHUB_TOKENに自動的に付与されるデフォルトの権限で十分です。

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: halloween
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

フルスクリーンモードから出る

上記ワークフローはデフォルトの場所を使用するので、生成されたSVGはimages/userstats.svgにコミットされます。SVGファイルの場所や名前を変更するために使用できる入力がアクションにあります。デフォルトを維持する場合は、以下のMarkdownを使用してリポジトリのREADMEに画像を挿入できます。

私のGitHub活動


フルスクリーンモードから出る

`halloween`テーマは次のサンプルのようになります:

[![ダークハロウィンテーマの例](https://res.cloudinary.com/practicaldev/image/fetch/s--UJKJZVzq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/cicirello/user-statistician/samples/images/halloween.svg)](https://res.cloudinary.com/practicaldev/image/fetch/s--UJKJZVzq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/cicirello/user-statistician/samples/images/halloween.svg)

[](#light-halloween-theme)ライトハロウィンテーマ
---------------------------------------------------

2つ目の新しいテーマは`halloween-light`で、ハロウィンカラーを使用したライトテーマです。以下がサンプルワークフローです:

```yaml
name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: halloween-light
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

フルスクリーンモードから出る

halloween-lightテーマは次のサンプルのようになります:

ライトハロウィンテーマの例

コウモリテーマ

3つ目の新しいテーマはbattyで、トップにコウモリがあるライトテーマです。以下がサンプルワークフローです:

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: batty
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

フルスクリーンモードから出る

battyテーマは次のサンプルのようになります:

コウモリテーマの例

他のテーマでかぼちゃやコウモリを使う方法

GitHubからインスパイアされた既存のテーマを使いたいけれど、デフォルトのオクトキャットの代わりにかぼちゃやコウモリを使いたい場合は、top-icon入力を使用することで実現できます。例えば、top-icon: pumpkintop-icon: batなどです。以下はdarkテーマでかぼちゃを使う方法を示す例のワークフローです。

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: dark
        top-icon: pumpkin
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

フルスクリーンモードから出る

ライトテーマでもかぼちゃが良く見えるはずです。それには、colors: lightを明示的に設定するか、またはcolors入力を省略します(指定しない場合はデフォルトでライトテーマになります):

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        top-icon: pumpkin
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

フルスクリーンモードから出る

デフォルトのlightテーマでコウモリを上に配置するワークフローは次の通りです:

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        top-icon: bat
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

フルスクリーンモードから出る

注意してください。たとえばtop-icon: batをダークテーマと一緒に使うと、コウモリは背景に溶け込んでしまうので試さないでください。

カスタムカラーでかぼちゃやコウモリを使う方法

ビルトインのテーマが気に入らない場合は、カスタムカラーを指定できます。以下はカスタムカラーを指定した例のワークフローで、デフォルトのオクトキャットの代わりにtop-icon: pumpkinでかぼちゃを使ったものです:

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: '#ffffff #368cf9 #0349b4 #0349b4 #0E1116'
        top-icon: pumpkin
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

フルスクリーンモードから出る

colors入力のドキュメントをご覧ください。完全な詳細についてはこの入力の動作方法をご覧ください。前の例のように、この入力にテーマ名をシンプルに渡すこともできます。しかし、SVGの色名で指定された、またはこの例のように16進数で指定された5色のシーケンスも渡すことができます(16進数の6桁と3桁の色がサポートされています)。この例での色はlight-high-contrastテーマのもので、背景色、境界色、アイコン色、タイトル色、テキスト色の順に指定されています。アイコン色は、様々な統計のアイコンにだけ影響を及ぼし、上部の角(例:オクトキャット、かぼちゃ、コウモリ)にあるアイコンには使用されません。デフォルトのオクトキャットを使用する場合(例えば、top-iconを指定しない)、オクトキャットの色は選択した背景色とのコントラストを最大化するように設定されています。上部に何のアイコンも欲しくない場合は、top-icon: noneと渡すことができます。

私を探せる場所

ウェブ上で:

ビンセント・A・シシレロ - コンピュータサイエンスの教授

ビンセント・A・シシレロ - ストックトン大学のコンピュータサイエンス教授 - は、カーネギーメロン大学でロボティクスの博士号を取得し、人工知能、進化計算、スウォームインテリジェンス、計算知能の分野の研究者です。ACMシニアメンバー、IEEEシニアメンバー、AAAIライフメンバー、EAI名誉メンバー、SIAMメンバーです。

![favicon](https://res.cloudinary.com/practicaldev/image/fetch/s--qKMtrxV8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.cicirello.org/images/favicon

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/cicirello/halloween-themes-for-the-user-statistician-github-action-4do6