SoundLibraryを作った話

Vue.jsでのSoundLibraryサービスを作ってみました(デプロイはしていません)

サービスの概要

特定の場所の音と写真をマップを管理することができるサイト 昔ながらの写真と音を聞くことによって,普段とは違った体験をすることができます

SoundLibraryとは

その場所の「音」を風景をして扱い,その音の風景を管理するもののこと? サウンドライブラリは音の風景ともいわれる.(サウンドライブラリ ≒ サウンドスケープ

サウンドスケープ

ja.wikipedia.org

サウンドライブラリ日本の音風景100選

www.ince-j.or.jp

サービスの仕組み

f:id:ka1357amnbpdr:20200212100413p:plain

位置情報や登録時間など → firebase 音源や画像データ → fire storage

実際の画面

f:id:ka1357amnbpdr:20200211231501p:plain
一覧画面とマップのプロット
f:id:ka1357amnbpdr:20200211231543p:plain
追加画面

実装内容

使用したもの

  • Vue.js (CDN)
  • Semantic ui(CDN)
  • GCP(realtime database,fire storage)

実装した機能

  • 場所の名前,住所などをDBに追加・削除ができる
  • データベースから,マップにピンをプロットできる
  • オフラインであれば,音源を再生することができる
  • 画像をクリックすることで,拡大してみることができる(オフラインのみ)

コード

SoundLibraryのコード

感想

初めてのVue.jsでのサービス?で想定していたところまでの機能を実装することが極めて困難でした 結構firebaseあたりのドキュメントを読むのに苦労してました笑 今後データベースを使うのであれば,firestoreの方がいいかもしれません

今後の展開(続きをするのなら?)

  • firebase storageに音源ファイル・写真ファイルを上げられるようにする
  • オンラインから音源を再生できるようにする
  • 住所から経緯度を変換する