Firebase＋Vueを使用したブログアプリ

Kobayashi Satoshi
Webエンジニア


2020年夏頃にVueを用いて制作した、初のアプリです。 研究室のホームページを新しくしたいと頼まれましたが、今後自分が卒業しても皆が簡単に更新できるようにという思いで制作しました。

サンプルアプリ：

メールアドレス：[email protected]

パスワード：password

でログインできます。


コード：


当時使える技術がHTML & CSS、JavaScriptのフロントエンドのみであったこと、

また、大学で使えるサーバー環境が不明であったため、バックエンドはサーバーレスのサービスであるFirebaseを使い、ただサーバーにファイルを置くだけ、という仕様にしております。

また、サクサク動くようにSPA仕様です。

使用した技術：

  • HTML & CSS
  • mdb bootstrap（bootstrapをマテリアルデザインにしたパッケージです）
  • Vue.js（Vue CLI、Vue Routerも使用）
  • Firebase（realtime database, cloud storage, auth等）

機能：

  • トップページ

    • 画像を添付してスライドショーになるように
    • 新着情報を書く機能（簡易的ですが、ページネーション付き）
    • 画像の上に本文が書けます

  • メンバー機能

    • メンバーを役職別で登録でき、プロフィールや研究内容や、写真が添付可能です。
    • シャイな方のために、添付しない場合も考え、その場合は表示方法を変えています

  • 研究紹介

    • 研究を一覧で表示して詳細を見られるようにしております。
    • リッチテキストエディタを導入して非開発者にも自由に表現できる仕様にしました。
    • 文章中に画像の添付も可能です。

  • 研究実績

    • 年代別にこれまでの経歴を書く欄です。

  • 連絡先

    • 電話番号、メールアドレス、住所が書けます。

工夫した点、こだわった点

複雑な処理は少なかったですが、とにかく分量が多く、このアプリ制作でプログラミングへの基礎体力がつきました。

非開発者の方でも簡単に更新できるよう、極力シンプルなUIを心がけました。

Vue editorというリッチテキストエディタを使用して、非開発者でも自由に文字を大きくしたり、文字色をつけたり、画像を添付したりできる機能を実装しました。

特に文章中の画像添付は、 画像の選択→アップロードしてURL取得→img挿入という処理があり、当時は相当苦労しました。

反省点

サーバー側の知識不足

やはり当時はサーバー側の動きが全く分かっていなかったため、フロントエンドでできることだけを使ってかなり無理矢理実装した部分があります。

アーキテクチャの問題

これもまだ未熟だったのもありますが、表示部分で共通する部分もあったにもかかわらずコンポーネントの再利用が行われておらず、Vueの良さが活かし切れていない部分があります。 また当時Vuexの理解が追いついておらず、使用していないため、コンポーネント間のデータの受け渡しが多く、煩雑になっている部分があります。

まとめ

色々と問題はありますが、プログラミングのきっかけになり、いい勉強になったアプリでした。 大学のサーバーが整い次第、皆に使ってもらって改善していこうと思います。