MBP(はてな)

MacBook Pro,iPhone Xs,React

Youtube APIを使って検索+再生

APIキーを取得
Youtube Data API で取得したデータをPython(Pandas/matplotlib)で可視化する。 - Qiita
Google Cloud Platform


Youtube APIを使って検索+再生をやってみた(React+Typescript) - Qiita

Youtube Data API で取得したデータをPython(Pandas/matplotlib)で可視化する。 - Qiita


Youtube Embeded 開始時間指定 180秒から開始の時 src=動画URL?start=180
YouTube 埋め込みプレイヤーを指定時間から開始するためのパラメータ | PLUS1WORLD

指定時間から開始させるリンク
Youtubeの埋め込み動画を指定時間から再生させるリンクタグの書き方 - アフィリエイト&ウェブ制作のtips

.envファイルを追加、GitHubにログインして、リポジトリを開き、Settings - Secrets - Actionsにキーとバリューを追加
React(create_react_app)の場合は、必ずキーをREACT_APP_から始める。読み込むときは、process.env.キー
Vercelの場合は、ログインしてプロジェクトを開き、Settings - Environment VariablesにNAMEとVALUEを追加
ViteとVue(Vite)の場合は、必ずキー名をVITE_から始める。読み込むときは、import.meta.env.キー
Nextの場合は、必ずキー名をNEXT_PUBLIC_から始める。読み込むときは、process.env.キー
Nuxt2の場合は、キー名は任意。読み込むときは、process.env.キー。privateRuntimeConfig では読み込めなかったので、publicRuntimeConfigにした。ローカルでは検索して表示できたが、Vercelでは検索しても表示されなかった。
Reactで環境変数を読み込む【開発・本番で切り替え可能】
https://github.com/hiroyuki12/react-pages/settings/secrets/actions
create-react-app で作成したアプリを Vite に移行する
Next.js における環境変数 (env) の基本的な設定方法 | fwywd(フュード)powered by キカガク
Nuxt3で.envを使う方法 - ポッポプログラミング


Vue.jsでYouTube APIを使って検索
Vue.jsでyoutube検索 | 大津真 Web


Vue3でYouTube再生(YouTube API未使用)
vue3-youtube - npm