アニメの名言を返すbotを作って、LINEの会話がもっと伝わるようにしてみた件について（DB内に登録されている名言の一覧表示）

#はじめに
アニメの名言を返すbotを作って、LINEの会話がもっと伝わるようにしてみた件についてでLINE botは実装されていたが、DB内に登録されている名言の一覧表示がなかったので実装したお話。

アニメの名言を返すbotを作って、LINEの会話がもっと伝わるようにしてみた件についてを制作した@tiwasaさんに無理を言って携わらせて頂きました。

こちらからanimergenに登録されている名言の一覧が見れます。

#モチベーション
1.DB内に登録されている名言の一覧表示を表示したい（中の人の欲望）
2.予想していたものが出てこない、何が登録されているのか知りたい（ユーザーフィードバック）
需要と供給の一致？
#使ったもの
大まかにはこの三つ
Python, Vue.js, Bootstrap
元々Flaskで実装されていたので、使ったのはほとんどVue.js, Bootstrapだけ。
#作ったもの
animergenに登録されている名言の一覧
クリックすると登録されている画像が表示される。

#少しだけ技術的なお話
pyhtonからVue.jsにデータを渡そうとすると、FlaskとVue.jsのdelimiters同じものを使用していて上手く動かない。
今回はVue.js側でdelimitersを変更。

var app = new Vue({
  el: "#app",
  delimiters: ["[[", "]]"],
  data: {
    message: "Hello Vue!"
  }
})

そのへんのことはこちらの方が分かりやすく書いて頂いている。先人の知恵に感謝。

データを受け取ってしまえばこっちのもの。bootstrap-vueでガシガシ実装。
1.table
2.pagination
3.input-group
4.modal

#さいごに
つたない文章に最後までお付き合いいただきありがとうございました。

アニメの名言を返すbotを作って、LINEの会話がもっと伝わるようにしてみた件について
animergenに登録されている名言の一覧