はじめての Vue.js で好きなものリストを作ってみたよ

どうも Reo です。

はじめに、今回はコードを記載したりやり方を紹介したりの記事ではありません。Vue.js の初心者がこんなもの作ってみたぜイェイイェイっていう記事です。

制作物の出来はかなり中途半端なんですが、その辺はちゃんと勉強をしてから改造していこうと思っています。

今回は Vue.js のことは何もわからんけど、勉強するモチベがないからとりあえず先に手探りで作ってみようと思って作りました。

つくったもの

今回作ったものは、私の好きなものリストです。好きだーと思ったら何でもぶち込んでいます。

Firebase Hosting を使って公開しています。

https://uruoifavoritelist-da5b3.firebaseapp.com/

いずれはこのブログドメインに組み込む予定です。

おおまかな仕様

iOSアプリ or ShareExtension でリンクを Firestore に保存
Webページで保存したデータの表示

ザックリですがこれだけ。

iOSアプリ

画面はここだけしか作ってないです。わりと無駄に RxSwift 使ってます。

iOS側に編集・削除機能を付けないといけないんですが、とりあえず後回しにしています。削除するときは Firestore 開いて削除してます（YABAI）

ShareExtension

これも iOS側のやつです。

各アプリから共有することで投稿することができます。（これはInstagramからの共有）

基本的にはこちらを用いて、好きと思ったら保存しています。

web側

Vue.js の勉強のために作り始めたので、Vue.js を使っています。

Firestore からURL等のデータを取得
URLからコンテンツを取得して表示

1 は本当にサクッとできたんですが、問題は2ですよね。

少し詳しく書いていこうと思います。

URLからデータを取得

先ほどのWeb側の2のURLからコンテンツを取得する所で、まず思いついた方法がOGPのデータを取得して表示させる方法でした。

SNS等シェアされた時に画像やタイトル、概要等を伝えるためのもののはずなので、OGPを使おうという考えはあってると思うんですよ。

ただこれが結構問題で、フロント側だけで実装しようと思うと CORS（Cross-Origin Resource Sharing）で取得ができないんですよね。

なので個々に対応することにしました。

Instagram

Instagram に関しては、クロスドメインダメだよとか言われずにOGPが取得できたのでOGPからデータを取得しています。

OGPの取得方法にはこちらを参考にさせていただきました。

JavaScriptでURLからOGP取得する - Qiita

Twitter

Twitter の OGP を見てみると、og:title Twitter になっていて、そもそもOGPからの取得が無意味なんですよね。

でも、普段使っている WordPress （ここも）ではリンクを貼るだけで以下のように表示ができるんですよね。

https://twitter.com/uruly\_xyz/status/1155817595422908416

これの仕組みを少し見て、ウィジェットを表示すればいいことがわかりました。Vue.js Twitter で調べると良いものがすぐでてきました。

Vue.jsでTwitter, Facebookのウィジェットを表示する - Qiita

NuxtとFirebaseでTwitterまとめサイトを作る！ (ツイートを表示する前編) - Qiita

上記を参考に vue-tweet-embed を利用して実装しました。

YouTube

YouTubeは通常のリンクはこんな感じです。 https://www.youtube.com/watch?v=uUvthLpSHrQ これをそのまま貼っても埋め込みができないんですよね。

なので、埋め込める形にしていきます。 https://www.youtube.com/embed/uUvthLpSHrQ

embed がついたものになります。

通常のリンクを投稿した場合も、埋め込める形に成型してから iframe にのせています。

https://www.youtube.com/embed/uUvthLpSHrQ

WordPressではどっちを貼っても埋め込みができますね。こういうのを個別に実装する手間がないと思うと楽だなぁと思ったり。

一週間くらいやってみて

iOS側はちょっとハマってしまったりブログを書きながら実装したりしていたので、2〜3日くらいで実装しました。

それから Vue.js の本を一章読んだくらいの知識（お堅い文章を読んだだけ）で、Vue.js を触ってみました。いや、だいぶ前に Nuxt.js を一瞬やろうとしたことがあるので、完全に知識ゼロってわけでもなかったんですが。

実際に作ってみると、わからないところがいっぱい。

でも、HTML/CSS の知識はあるし、コンポーネントに分ける感じも少し WordPress のテーマ作ってる時と似たような感じだなーと思いながらやっていたので、まぁまぁまぁ出来るようになる素質はありそうです。

わからないところがいっぱい出てきて、何がわからないかが少しわかりました。やっと勉強しようというモチベを得た気がします。

わからないところ

これから勉強します。

ページング
ルーターの使い方
なんで /# に飛ばされるの？
デプロイするとスタイルシートが死ぬ
CORS の壁（Vue.js関係ないけどネ）
OGPの設定
独自ドメインへのデプロイ

下2つ以外は一度はやろうとしたけど今回は諦めました。

ページングが本当にワケワカメ。現状では全取得しているので結構まずい。

あとは何で https://uruoifavoritelist-da5b3.firebaseapp.com/#/ にリダイレクトされるんや？ってことと、デプロイするとスタイルシートが死んでしまうところを諦めていますね。

1度目のデプロイではちゃんと css 効いてたのに、何で効かなくなったのかが本当にわからん。更新されない...なんで...。

反映ができないので、フォントの設定が効いてなかったりちょっとスタイルが崩れてたりします。でも、原因を探るだけの時間と気力が今は.......

また、どこのリンクからでもOGPを取得できるようにもしたいです。このブログのリンクとかを貼るとCORSで怒られちゃうので、iOS側で取得してDBにぶち込んでおいたほうがいいのか...。でもDBにはURLだけを保持していたいんですよね色んな意味で。

おわりに

とりあえず一旦放置します。手持ちの Vue.js の本を読んでから改良していこうと思っています。

仕事としてできるぐらいのレベルにちゃんとなれるだろうか、心配ですね...。

実際に運用するには、iOS側にも編集・削除機能を追加しないといけないので、かなりシンプルなものですが意外とやることが多いです。

でも Vue.js をやるモチベは得た気がするので、頑張って勉強しようと思います。勉強した後に見たら、ひっどいコードだなって思うんかなー。

とりあえずはこんな感じで、仕事もせずに一週間を過ごしましたっていうブログでした。来週からは仕事ができそうなので、Vue.js を勉強して改良し始められるのは3月以降になるかなぁと思います。

今回、Firestore を使うのも初めてだし Firebase Hosting を使うのも初めてでした。できないことって本当にいっぱいあるなぁと実感します。

最近は、ちゃんと勉強してから物作らないと後からリファクタリングで死ぬぞということを学んでしまって、勉強してから作らないとって思っていました。

でも、一度作ってみることでわかることって沢山あるので、こういう方法も悪くはないんじゃないかなぁ。

やっぱり作ることが好きなので、フレームワークを使うことが目的になってしまうと勉強したくなくなっちゃうんですよね。自分にとってコードを書くことは、あくまで作りたい物を作るための方法であってほしい。そういう風に向き合うほうが自分にはあってるなーと思いました。

勉強するのも勿論大事だけど、それでも今後もフットワーク軽く作っていきたいです。

ではでは！