voting-badge

以前作ったTravis CIライクな投票ボタンのサービスで、以下で詳しく説明しています。

• GitHubなどで使えるするバッジサービスを作った | Web Scratch

説明の中でも書いてありますがこのウェブアプリはHeroku(node.js)で動いています。

Heroku Button

Heroku ButtonとはHerokuで公開されているウェブアプリをGitHubのforkボタンのように一発でforkして使えるようにする機能のことです。

• Heroku | Introducing Heroku Button

Heroku Buttonへの対応

Herokuですでに公開してて、GitHubにソースをおいてある場合はとても簡単にHeroku Buttonへ対応出来ます。

1. app.jsonを配置する
2. READMEにHeroku Buttonを置く

たったこれだけで、Herokuのforkボタンがつけられます。

azu/voting-badge のケース

azu/voting-badge の場合は先ほど解説したように、 app.jsonを追加してHeroku Buttonを追加しただけです。

1. add app.json
2. アドオンなどを使ってる場合はapp.jsonに その情報を追加
3. add deploy button

最終的な app.json は以下のような感じで、アプリのメタ情報が入ったnpmのpackage.jsonみたいなものであることが分かります。

{
    "name": "voting-badge",
    "description": "Voting badge like Travis CI",
    "website": "https://github.com/azu/voting-badge",
    "repository": "https://github.com/azu/voting-badge",
    "keywords": ["node", "badge", "canvas", "node-canvas", "GitHub"],
    "env": {
        "BUILDPACK_URL": "https://github.com/mojodna/heroku-buildpack-multi.git#build-env"
    },
    "addons": ["redistogo:nano"]
}

これで以下のようにボタンが追加できて、ボタンを押すとHerokuにforkすることが出来ます。

実際に動くボタンは以下のような感じです

細かいはまりどころ

BUILDPACK_URL やaddonなどを使ってる場合はapp.jsonにもその情報を書く必要があることに注意してください。 詳しくは以下で解説されています。(書かないとforkしたときにエラーがでる)

• app.json Schema | Heroku Dev Center

また、app.jsonがjsonとして問題がある場合、 https://dashboard-next.heroku.com/new が何もいわなくなるという状態になったりしました。

注意

Heroku Buttonはリファラーをみて、どのアプリかを判断してるのでGitHubのREADMEに貼ったときのみ、 以下のようにパラメータがないボタンを貼ることで動作します。

[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)

もちろん、パラメータをつけたボタンも作ることができるため、GitHub以外から動くボタンも作れます。

以下のようにtemplateのパラメータを付け加えるだけで問題ありません。

<a href="https://heroku.com/deploy?template=https://github.com/azu/voting-badge">
  <img src="https://www.herokucdn.com/deploy/button.png" alt="Deploy">
</a>

• Creating a 'Deploy to Heroku' Button | Heroku Dev Center

GitHubからでもリファラーを無効にしてるブラウザだと動かなくなるので、通常はパラメータを入れてたほうが安全そうな気がします。

おわりに

Herokuに追加されたHeroku Buttonについて解説しました。

Herokuで公開してるアプリを簡単に試せるのでとても便利だと思います。

• Heroku | Introducing Heroku Button
• Creating a 'Deploy to Heroku' Button | Heroku Dev Center