創報堂ブログ

2018.09.29 oku

vue.jsでYoutubeの動画をリスト化するサイトを作る

おくです。

先日はCDNのvue.jsでメモ帳を作りました。パソコン上の付箋代わりに自分で使ってます。

 

今回は、vue-cli(webpack)でYoutubeの気に入った動画をローカルストレージに保存して、

iframeでリスト化(メモ同様単純に羅列されるだけ)できるものです。

今回はgitlabでプライベートリポジトリを作り、サーバーはメモ帳同様netlifyです。

 

https://myfav-utube.netlify.com

 

ページ上部のタイトル下に説明を書いていますが、

動画のURL(https://www.youtube.com/watch?v=*****)をテキストボックスにコピペして、「追加」を押せば勝手に増えます。

いらなくなったら、追加された動画の右上の「×」を押せば消えます。

以下に説明の動画GIFも置いておきます。

こんな感じでズンズン追加・削除可能です。

自分が使いたかったので作りました。

 

現在はnuxt.jsでSSRサイトを制作中です。

お問い合わせ

ご相談や制作についてのご質問、その他ご不明な点などございましたら どうぞお気軽にお問い合わせくださいませ。

  • TEL:079-284-9304 受付時間 平日9:00~18:00
  • お問い合わせフォーム
有限会社創報堂

兵庫県姫路市にあるホームページ制作・システム開発の総合クリエイティブ会社
有限会社創報堂

〒670-0932 兵庫県姫路市下寺町129 Nビル2F
TEL 079-284-9304 FAX 079-284-9305

© 2005 SOUHOUDOU