GitHub Sponsors と npm fund を設定してみた

GitHub 上でスポンサーを募れる GitHub Sponsors というサービスと、npm で資金提供を呼びかけられる npm fund コマンドがそれぞれ提供開始されたので、セットで作ってみた。

目次

• GitHub Sponsors の登録方法
• GitHub リポジトリごとに Sponsor ボタンを付ける
• npm fund を始めてみる
• 僕の投げ銭アカウント一覧

GitHub Sponsors の登録方法

GitHub Sponsors を始めるには以下のページから。

• GitHub Sponsors · GitHub

まずは GitHub Sponsors 用のプロフィールと、提供してもらいたい金額の設定を行う。

次に Stripe というサービスのアカウントを連動させて作り、そこで本人確認と銀行口座情報を登録する。

本人確認は、自分は最初パスポートを使った。Stripe の画面上では正常に本人確認できた風に見えていたのだが、10日放置しても GitHub Sponsors 側のステータスが進まなかったので、Stripe のサポートにメールしてみた。Stripe のサポートは日本語で返事をくれて、本人確認書類を上げ直してみてくれということだった。

次は運転免許証の表面を撮影した写真を再提出して、ようやく正常に登録できた。ちなみに GitHub サポートにもメールしてみたが、GitHub は「日本語のメールは受け取れん」と言われてしまった。その間に正常に登録できたのでおけおけ。

ココまでが済んだら GitHub Sponsors Dashboard から改めて「Submit」(申請) を行うことで、ようやく GitHub Sponsors のプロフィールが有効になった。

例えば自分の Sponsors プロフィールは以下。

• Sponsor @Neos21 on GitHub Sponsors · GitHub

全体で3・4日ぐらいで申請は終わるかな。自分みたいに変なトラブルに引っかかった場合でも、なんとか2週間ぐらいで登録にこぎつけた。

• 参考 : GitHub Sponsorsに登録する方法 | Masamichi Ueta

GitHub リポジトリごとに Sponsor ボタンを付ける

以上の手順は GitHub アカウント単位での Sponsors ボタンを表示するまでの手順。この他に、リポジトリの画面の丈夫に「Sponsor」ボタンを表示することもできる。

例えば自分のリポジトリ画面の上部を見てもらえば、どんなボタンかは分かってもらえるだろう。

• GitHub - Neos21/about: Neo : Web Engineer. Hire Me!

コレを表示するには、リポジトリの Settings に飛び、「Sponsorships」にチェックを入れる。

続いて、リポジトリ内に .github/FUNDING.yml というファイルを作成する。

内容はこんな風に、GitHub アカウントや Patreon アカウント名を入力したり、任意のリンクを書いたりするだけ。

github: Neos21
patreon: Neos21
custom:
  - 'http://neo.s21.xrea.com/'
  - 'http://neos21.hatenablog.com/'
  - 'https://neos21.github.io/'

このファイルを Push すると「Sponsor」ボタンが表示される。

なお、リポジトリの URL の末尾に ?sponsor=1 と付与すると、この「Sponsor」ボタンを押下して出てくるダイアログを初期表示できる。

• https://github.com/Neos21/Neos21?sponsor=1

既存の GitHub リポジトリに対して一括設定するには、azu さんの以下の記事が参考になる。

• 参考 : 複数のGitHubリポジトリにまとめてGitHub Sponsorsボタン(FUNDING.yml)を設定する方法 | Web Scratch

github-funding-yml-updater コマンドは、当方環境では何故か Windows の GitSDK 上だと正常に動かなかったのだが、MacOS の標準ターミナルなら無事動いた。

あと、Fork したリポジトリも含めて取得したいなら以下の API を使うと良い。

$ curl -s https://api.github.com/users/Neos21/repos?per_page=100 | jq -r '. | map(.full_name)[]' | sort

npm fund を始めてみる

npm fund コマンドは、npm v6.13.0 から搭載されたコマンド。

まず、package.json に funding プロパティが書けるようになった。書式はこんな感じ。

{
  // …中略…
  "funding": {
    "type": "github",
    "url": "https://github.com/sponsors/Neos21"
  }
}

type は patreon とかでも良い。url に、資金提供を受け付ける URL を貼っておく感じ。type を書かず url プロパティだけ書いたり、

{
  "funding": "https://github.com/sponsors/Neos21"
}

このように URL だけを直接 funding プロパティの値として書いてもよい。

このような package.json を作って npm publish しておく。そしてそのパッケージを誰かが npm install した後に npm fund コマンドを叩いてみると、次のように内容が確認できる。

$ npm fund

test-package@1.0.0
├─┬ neos21-test1@0.0.1
│ ├── type: github
│ └── url: https://github.com/sponsors/Neos21
└─┬ neos21-test2@0.0.2
  └── url: https://www.patreon.com/Neos21

npm fund コマンドがやっていることは node_modules/ 配下の package.json から funding プロパティをかき集めて表示しているだけ。

コレを見て、「このパッケージの開発者に寄付しよう〜」みたいになるのを待つワケだ。

• 参考 : npm@6.13.0 - DEV Community 👩‍💻👨‍💻
• 参考 : npm fundとは何か - Qiita

僕の投げ銭アカウント一覧

というワケで、GitHub Sponsors を始め、僕が作った投げ銭アカウントは以下。

• GitHub Sponsors
• Patreon
• Fantia
• Enty

• Patreon・Fantia・Enty アカウントを作ってみた

どのサービスもとりあえずアカウントを作っただけで、$1 ないしは100円のプランしか用意していない。自分に何ができるか分からないのでプロフィールも雑なのだが、何か指摘やアドバイスなどあればおなしゃす。

初めてスポンサードいただけた人には何か特別にしてあげたいと思っているので、1ドルからよろしくおなしゃす！

あと投げ銭ではないけどココナラも始めてみた。自分のスキル磨きのため。サービスの勝手が分かっていないが、初めて連絡いただけた人にはサービスしたいと思うので、コチラもどうかよろしくおなしゃす！

• ココナラ

以上。