LoginSignup
13

More than 3 years have passed since last update.

360°写真が楽しすぎるので、360°用SNSを作ってみた話

Last updated at Posted at 2019-03-31

要約

Nuxt.js x Firebaseで360°写真共有SNSを作りました。
360GRAMはこちら

作ったサービス

いいね、コメントなど基本機能あるよ
360gif4.gif

なぜ作ったか

  • 360°写真は普通の写真と違った面白さがあって好き
  • Instagramが360°写真に対応していない→360°写真の共有場所がない
  • Nuxt.js x Firebaseでなにか作りたい→作った

使った技術

まぁみんなもはや知ってるよね。いわゆるMbaaSとかというやつです。
今回は、Firebaseの中の
・認証
・storage
・Firestore(DB)
・Hosting
を使っています。

パノラマ写真ビューワーライブラリです。こういう系のライブラリは結構あって、いろいろ見比べてみて、今回はPannellumを使いました。

クライアントサイドで画像を圧縮したりするライブラリです。

苦労したところ

iPhoneは4096pxの大きさの写真までしか表示できない問題

これ、実際に動作確認してて気づきました…
360°写真は基本横にめちゃ長いわけです。

取り急ぎjimpで、画像が4096pxより大きい場合は、2000pxまで圧縮しています。

cors問題

corsについてはこちらを。

先程書いたように、Pannellumを使ってパノラマを表示しています。そして、Pannellumはブラウザ上(360gram.me)で動きます。
一方画像自体のドメインはfirebasestorage.googleapis.comであり、360gram.meと異なるので、設定でリソースへのアクセスを許可してあげなければなりません。
この問題に関しては、以下の記事で解決できました。
Firebase StorageにCORSの設定をする - Qiita

もっとユーザーが増えたら実装したい機能

  • フォロー
    • ほしい
  • ハッシュタグ
    • ほしい
  • 検索機能
    • 大変そう
  • 位置情報タグ付け

感想

いままでゴミみたいなサービスを割と作ってきて、今回でやっと、Nuxtスキルも少し上がったかな、と思えました。
Nuxt.js x Firebaseも自分に染み付いてきて、昔と比べると結構モダーンになったな、と(昔はCakePHP x さくらインターネットの月500円サーバ)。

あと、今まで自分はサービス作ってて途中で飽きてしまうことも多かったのですが、今回はほんとに自分がユーザーになれるものを作ってて飽きずにやれたので、やはりそこら辺の、そもそも何を作るのかを決めるあたりから大事だな、と実感できました。

終わりに

まだまだ360°写真を撮ってる方は少ないと思いますが、今回360GRAMという置き場所を作りましたので、theta等デバイスを持っている方は、ぜひぜひ360GRAMでシェアしてみてください:camera:

ワイキキにて
Waikiki 2019-03-31 16.14.10.png

ではでは

English: https://medium.com/@taishi.k/360gram-my-nuxt-js-app-with-firebase-for-sharing-360-pictures-ba4c487b77bc

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13