どうも、まさとらん(@0310lan)です!
今回は、Webアプリやサイト/ブログなどにおいて、機能改善や内容の変更などを記録した「更新履歴」を超シンプルに作成できるサービスのご紹介です!
生成されたコードを貼り付けるだけで、ブログ感覚で書いた「更新履歴」が自動的にWebページに反映されるようになるので便利ですよ。
【 Barelog 】
「Barelog」の使い方!
それでは、実際に「Barelog」を使いながらどのようなサービスなのかを見ていきましょう!
まずは、サイトのトップページにあるボタンをクリックして無料の「ユーザー登録」をサクッと済ませておきます。
メルアドがあれば、誰でも簡単に登録を済ませることができます。
すると、自分の「管理画面」が表示されます。
この画面上で、更新履歴をブログのように記録していくことが出来るのが面白いところです。
デフォルトでは、英語の履歴が1つ用意されているので、コレを編集してみましょう!
画面右側にある「EDIT」ボタンをクリックします。
すると、更新履歴の中身を編集できるようになります!
編集できる項目は以下のとおり!
①履歴のタイトル
②履歴のカテゴリ(Bug Fix, New, Upcomingなど)
③更新内容
④公開・非公開の設定
上記内容を踏まえて、履歴を更新できたら「Update」ボタンをクリックしておきましょう!
しっかりと反映されたのが分かりますね。
このように、簡単な操作で初めての「更新履歴」を1つ作成することができました。
次に、作成した更新履歴を自分のWebアプリやサイトに組み込んでみましょう!
「更新履歴」をWebページ組み込もう!
今度は、自分のWebサイトに作成した更新履歴が表示されるようにしてみましょう。
画面上部のタブから「Setup」を選択しプレビューを表示します。
画面右側に、「更新履歴」がWebに表示された時のプレビューが表示されているのが分かります。
画面左側で、タイトルの変更やスタイルなどをカスタマイズできるので、好みのデザインにしてみましょう。
そして、さらに画面を下方向へ移動するとソースコードが表示されているのが分かります。
この2つのコードをコピーしておきましょう。
そして、自分のWebサイトのHTMLに、先ほどコピーしたコードを貼り付けます!
このコード例では、「aタグ」のリンクをクリックすると更新履歴が表示される仕組みになっています。
実際にブラウザで表示してみるとこうなります!
見事に、作成した履歴が表示できているのが分かりますね。
ポイントは、「aタグ」の「id属性名」とscript内のオプションにある「trigger名」を一致させることです。
これさえクリアしていればどのHTML要素でも利用できるので、例えばメニューに組み込んでクリックすると「更新履歴」が表示されるような使い方も出来ますね!
さらに、オプションも豊富に揃っており、タイムライン形式にして任意のカラースタイルで表示するとこんな感じになります!
JavaScriptのオプションに関しては、他にもポップアップ表示のアニメーションを変更したり、幅や高さの調整やオフセット位置なども細かく設定できるようになっているので便利です。
まとめ
今回ご紹介した「Barelog」は、まだベータ版なので今後さらに機能追加などが行われる予定です。
導入もコードをコピペするだけなので非常に簡単なうえ、履歴の更新作業もエディタ上で文章を書くだけで済むのは便利です。
今なら無料で利用できるので、気になった方はぜひ一度トライしてみてください!
<参考>
・「Barelog」公式サイト
written by まさとらん(@0310lan)