Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

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

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

モチベーション

1.DB内に登録されている名言の一覧表示を表示したい(中の人の欲望)
2.予想していたものが出てこない、何が登録されているのか知りたい(ユーザーフィードバック)
需要と供給の一致?

使ったもの

大まかにはこの三つ
Python, Vue.js, Bootstrap
元々Flaskで実装されていたので、使ったのはほとんどVue.js, Bootstrapだけ。

作ったもの

animergenに登録されている名言の一覧
クリックすると登録されている画像が表示される。
image.png

少しだけ技術的なお話

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に登録されている名言の一覧

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away