Vue.jsでスライドショーを作成したお話

結論

• Vue.js上にスライドショーを実装するフレームワークeagle.jsを使うだけでそれっぽいスライドショーができる
• ホスティングはFirebaseで爆速アップロード
• 出来上がったサイトは これ ※レスポンシブ対応していません
• ソースはここ

発端

弊社では新入社員のサポートとして、一年間先輩社員のメンターがアサインされ、月次で状況把握（カフェーで雑談）を行っている。
年末に新入社員の親御さんに向けてお宅のお子さんこんなことやってるんすよ。という先輩からのメッセージを載せた色紙を送り付けるサプライズイベントが行われる。
これが原因で転職する人がいそう
ただメッセージを書くのはナンセンスなのでどうせならウェブアプリの形で公開してやろうと思いつき実装。
結果として謎のQRコードとここにアクセスしろというメッセージが親御さんに届いた。

技術セット

• Vue.js
• eagle.js
• Firebase

eagle.jsのポイント

タグで区切るだけで1ページ作成できる

  <slide :steps="1" enter="slideInDown">
    <eg-transition enter="fadeInDown" leave="fadeOut">
      <div v-if="step >= 1">
       スライドだよ！
      </div>
    </eg-transition>
  </slide>

ページめくりのアニメーションも柔軟に設定可能

感想

それなりに好評でした。どうせなら文字じゃなくて成果物で語りたいよね。
コンポーネントとして分離できるしちょっとした動きをつけたい時に使えそう。