• こんにちは

  • 東京から参りました

  • (一方的)に語るLT大会とのことなので
    (一方的)に語りに来ました

  • 今日話す内容

    英語の勉強をしたいので
    WEB サービスをつくった

  • 作ったもの

    Flash Cards

    単語帳

  • 使った技術

    • Firebase Authentication
    • Clould Firestore
    • Nuxt.js(SPA mode)
    • Bulma
    • vue-carousel
    • Vue.Draggable
    • contenteditable
  • どんなサービスなのか?

    多分説明しなくても大体伝わってると思いますので
    細かいことは一方的に割愛します。

    Demo

  • Firebase Authentication

    説明しなくてもみんな知っている気がするので割愛します

  • Clould Firestore

    説明するほどの知見がないので割愛します

  • Nuxt.js

    SSR ではなくて SPA を使ってます


    • deploy するときに hosting だけで済むので反映が早い
    • 無課金だと nuxtServerInit で cloud function 呼べない?
  • Bulma

    JavaScript は自分で書いてね、という辺りが時代にマッチしているコンセプトだと思います。

  • vue-carousel

    • 単語帳をめくる時のアニメーションで使っている
    • でも設定方法がカオスだった
    • 自分が必要な機能だけ選りすぐって再開発した
    • いい感じのライブラリをご存知の方は Twitter で是非つぶやいてください

  • Vue.Draggable

    Cards の並び替えで使っています。便利です。

  • contenteditable

    html 要素をクリックしたら編集ができるようになる属性。JavaScript のイベントと組み合わせると色々できます。
    @blur と使うとたぶんいい感じにできると思います。

  • 一方的なお願い

    作ったばかりで誰もまだ使ってくれないのでよかったらログインして遊んでみてください

    https://flash-cards-marvelous.firebaseapp.com

  • ご静聴ありがとうございました

Item 1 of 17
[ja]Creating Flash Cards with Firebase + Nuxt