PROGRAMMING

お知らせ機能を簡単に実装できるHeadway changelogの導入方法

PROGRAMMING 公開日:2019年08月08日 更新日:2019年08月08日

はじめに

Headway社が提供している、changelogを導入してみました。
ちょっとした更新のお知らせや、アップデート・改善状況などを閲覧者に伝えたい時に有効かもしれません。

提供元サイト

導入方法

まずは公式サイトからアカウント登録をしましょう。

FreeプランとProプランがありますが、今回はFreeプランで導入してみます(Proプランと比べるといくらか機能は制限されてしまいますが)。

Create your changelogボタンをクリックし、必要情報を入力しましょう。

登録内容を送信完了すると、登録したメールアドレスに認証メールが届きますので、そこから詳細なアカウント情報を登録していきます。

さて、アカウント情報の登録は比較的簡単なものばかりなので、省きますが重要なのはWidgetのcodeです。

※ACCOUNT_IDの箇所は登録者によって変わりますので、ご自身のアカウントIDを記入してください。

<script>
  var HW_config = {
    selector: ".CHANGE_THIS", // CSS selector where to inject the badge
    account: "ACCOUNT_ID" // your account ID, you can find it in Settings->Widget
  };
</script>
<script async src="//cdn.headwayapp.co/widget.js"></script>

スクリプトの読み込みが完了したら、changelogを表示したい箇所にHTMLコードを設置します。

<div class="CHANGE_THIS"></div>

リリースノートを投稿していないと、なにも表示されませんが、記事が投稿されているとアクティブ表示されます。記事を投稿する際には必ずPublishedにチェックを入れましょう。


下記の例はベルのアイコンを表示していますが、デフォルトはサークル(丸)型の通知のみです。
自身のサイトに合わせて、アイコンと組み合わせるなどカスタマイズして使用してみてください。

お知らせがある時

クリックするとリストが表示されます

更にクリックすると、詳細が表示されます

URLなどを貼って、誘導できることも可能ですし、工夫次第で色々活用できそうです。