vue.jsとOnsen UIでPWAのモックアプリを作成してみた

概要

• 会社の新人研修では、社内の書籍管理システムの構築を課題としている
• 研修課題のシステムは、LAMP環境で構築する一般的なWebシステム
• スマホアプリみたいなものを作って書籍管理システムにアクセスできると面白そう
• 社内用アプリのため審査などを通すのは避けたい
• PWA作ってみよう！
• ひとまずはサンプル版ということで、まずは動くものを優先する
• サーバ側のAPIはまだ未実装のため、PWAとしてはモックデータの仮で作成

作成したもの

PWAのモック

ソース

github.com

機能

• 書籍一覧
  • すべての書籍をリスト表示（モックは固定データ、将来的にAPI接続）
  • 検索テキストフィールドの入力でリストのフィルタ処理
  • リストをタップして書籍詳細へ遷移
  • 書籍詳細ページで、「借りる」と「返却」を実装
• レンタル中の書籍
  • レンタル中の書籍をカードレイアウトでリスト表示
• 期限切れの書籍
  • 返却予定日が過ぎている書籍をカードレイアウトでリスト表示

使用した技術

• Onsen UI
  • Onsen UIのPWAプロジェクトをベースとして、アプリ部分はkitchensinkのソースを参考に作成 ja.onsen.io

Vue Onsen UI Kitchen Sink * vue.js（2.5.16）

今後

• APIができ次第、接続する実装
• Service Workerを使ったPush Notificationの実装