ボタンの構成と作り方

2018/11/04 追記
これはβバージョンの構成について述べています。
γバージョンの構成はそのうち書きますが、contents.jsonについては特に破壊的な変更はありません。


ボタンを作りたいという人に向けた文書です。
「ボタンの構成」で述べるファイルのうち、GitHubで公開しているものに関してはNYSLを適用しますので、改造してボタンを作ってみてください。

ボタンの構成

兎鞠まりボタンは以下のファイルから構成されています。
音声やアイコン以外のものはGitHubのリポジトリに公開しています。
音声ファイルや画像ファイル以外のものはすべてテキストエディタで編集できます。

index.html

ページ本体です。ボタンやプレイヤーのテンプレートが入っています。

index.js

コンテンツを取得してページにボタンを配置するプログラムが入っています。

contents.json

音声データのファイル名とボタン名を対応付けるデータが入っています。 contents.jsonはsoundRootとtracksから構成されています。 下図の薄く黄色にした部分がボタン一つ分に対応します。

soundRoot

音声ファイルのあるディレクトリの位置を指定します。 index.htmlのあるディレクトリからの相対パス、および、絶対パスを使用することができます。

tracks

ボタンごとの、タイトルと音声ファイルのパス、そして、メタデータが含まれています。 各項目とその説明を以下に示します。

項目名 説明
title タイトルです。ボタンに表示されます。
path 音声ファイルのパスです。soundRootからの相対パスを指定します。
actor 誰の声が入っているのかを記述します。現在は使用していません。
tags ボタンに付けられたタグです。 複数のタグを付けられますが、最初のタグはカテゴリになります。 現在はカテゴリの指定のためにのみ用いられています。
source 音声のソースです。 プレイヤーに表示されるタイトルの部分をクリックしたときにどこに飛ぶのかを指定できます。
relatives 関連項目です。現在は使用していません。

favicon.png

Webサイトのアイコンです。「いらすとや」さんの画像を使用しています。 なくてもいいです。

音声ファイル

mp3です。/sound の下に入っています。

ボタンの作り方

音声ファイル(とfavicon.png)を用意し、index.htmlとcontents.jsonを改造することで別のボタンを作ることができます。 あとは改造したindex.htmlとindex.jsとcontents.jsonと音声ファイルをどこかにアップロードすればOKです。

音声ファイル

頑張って用意してください。

index.html

titleタグとh1タグとボタンの説明を行っているdivタグ(下部)の中身を書き換えてください。 twitterの埋め込みウィジェットのscreen_nameの書き換えも忘れずに。

contents.json

soundRoot

音声ファイルの場所に合わせて適切に指定してください。

tracks

必ず埋めないといけないものはtitleとpathとtagsです。 sourceは埋めても埋めなくてもいいですが、埋めるとボタンを押した人が元の動画にたどり着きやすくなります。 actorとrelativesは埋めても現状意味はありません。