ASIA LUNARウェブサイトを最終リニューアルしました（その2）

f:id:moetsukiro:20180330102337j:plain
http://asialunar.info/

昨日、ASIA LUNARウェブサイトのファイナルエディションを公開しました。
ゲーム音楽アレンジとゲーム音楽風オリジナル曲で21年同人活動してきた私、萌尽狼（もえつきろ）の全作品データを完全網羅しました。
トップページにはpixiv APOLLO同様の15秒試聴を連続再生する機能を実装し、音楽作品140タイトルを35分で一気に聴くことができるようになりました。

その1ではリニューアルの概要についてまとめました。

moetsukiro.hatenablog.jp

その2では、今回の目玉「pixiv APOLLO同様の15秒試聴を連続再生する機能」を、どのように実装したかをまとめます。

Simple Playlist

ASIA LUNARウェブサイトでは、2017年6月のリニューアルから「Simple Playlist」というオープンソースのHTML5 Audioプレーヤーを使用しています。
http://simpleplaylist.zakharday.com/

CSSとJavaScriptを設置したら、あとはこのようにHTMLをコーディングするだけで、<ul>で組んだプレイリスト内のMP3（またはOgg）を連続再生できます。

<ul class="playlist">
  <li>
    <div class="track">
      <span class="controls" id="playToggle"></span>
      <span class="title">曲名</span>
      <span class="minus">-</span>
      <span id="timeleft">0:15</span> <!-- MP3の演奏時間 -->
    </div>
    <audio preload="none">
      <source src="hoge.mp3" type="audio/mp3">
    </audio>
  </li>
  ...
</ul>

複数の<ul>プレイリストをまたいだ連続再生はできませんが、MP3が多重再生されることはありませんのでとても便利です。

難点は、

再生ボタンが小さくスマホで操作しにくい（PNG画像なのでカスタマイズは容易だが、フォントサイズより大きいと面倒）
再生中の<li>の下にプログレスバーが割り込み表示されるため、<li>のheightに余裕がないとレイアウトが崩れる
プログレスバーのクラスがBootstrapと競合するので、適当なクラス名にリネームする必要がある

といったところです。

近年のFlash排除で試聴MP3プレーヤーが動かなくなってお困りの方はぜひおためしください。

Bootstrap3のList groupをThumbnails風にする

さて、BootstrapのThumbnailsコンポーネントはBootstrap2では<ul>でしたがBootstrap3では<div>に変わりました。

<!-- Bootstrap2 (https://getbootstrap.com/2.3.2/components.html#thumbnails) -->
<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <h3>Thumbnail label</h3>
      <p>...</p>
    </div>
  </li>
</ul>

<!-- Bootstrap3 (https://getbootstrap.com/docs/3.3/components/#thumbnails) -->
<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Thumbnailsコンポーネントの中にSimple Playlistを組み込んで連続再生させることを考えると、Bootstrap2は簡単そうですがBootstrap3は難しそうですね。

しかし、Bootstrap3にはList groupコンポーネントがあります。

<ul class="list-group">
  <li class="list-group-item">...</li>
  <li class="list-group-item">...</li>
  <li class="list-group-item">...</li>
</ul>

Simple Playlistは行頭に再生ボタンが表示されるだけでプレーヤーっぽくないので、List groupと組み合わせて使うことが多いのですが、今回はこれをカスタマイズしてカード型にしました。

<style type="text/css">
  .list-group-item {
    width: 20%;
    height: 350px; /* 適宜調整 */
  }
</style>

<ul class="playlist list-group clearfix">
  <li class="list-group-item pull-left">
    <figure>
      <img src="..." alt="..." class="img-responsive">
      <figcaption>タイトル</figcaption>
    </figure>
    <p>
      <div class="btn-group" role="group">
        <a class="btn btn-primary btn-sm" href="..." role="button">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 詳細
        </a>
        <a class="btn btn-success btn-sm" href="..." role="button">
          <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 購入
        </a>
      </div>
    </p>
    <div class="track">
      <span class="controls" id="playToggle"></span>
      <span class="title">曲名</span>
      <span class="minus">-</span>
      <span id="timeleft">0:15</span> <!-- MP3の演奏時間 -->
    </div>
    <audio preload="none">
      <source src="hoge.mp3" type="audio/mp3">
    </audio>
  </li>
  ...
</ul>

<ul>に.clearfix、<li>に.pull-leftを追加し、CSSで.list-group-itemの幅と高さを設定してグリッドレイアウト風にしたわけですね。

f:id:moetsukiro:20180330102330j:plain
http://asialunar.info/#discography