Youtubeライブ配信の固定URLとチャンネルIDの特定について
チャンネルIDとは、個々のYoutubeチャンネルに割り当てられた被りのない一意のIDのこと。UCから始まる。 例:UCfB8TO0f3iIT43myKEqd1JA
ライブ配信の固定URL
結論
Youtubeチャンネルのライブ配信の固定URLは次のようなURLであり、チャンネルIDをクエリパラメータで指定する必要がある。注:そもそもライブ配信の予定がない場合にはエラーのような表示となるが、予定が入り次第このURLを読み込み直し再生ボタンを押せば「xx分後にライブ配信」という表示とともに再生開始待機状態となる。
https://www.youtube.com/embed/live_stream?channel=チャンネルID 例:https://www.youtube.com/embed/live_stream?channel=UCfB8TO0f3iIT43myKEqd1JA
詳細
ライブ配信の固定URLとは、ライブ配信毎のビデオIDを指定しなくても最新のライブ配信へアクセスできるURLのことである。
ライブ配信を含めYoutubeの動画上で右クリックすると「埋め込みコードをコピー」というメニューが表示される。埋め込みコードは次のような内容である。
<iframe width="800" height="640" src="https://www.youtube.com/embed/XXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
src=
の後ろにそのライブ配信(または動画)のURLが書かれている。この場合は https://www.youtube.com/embed/XXXXXXX
である。このURLの embed/
に続く XXXXXXX
の部分がビデオIDである。つまり「埋め込みコードをコピー」して得られるURLは固定URLではなくライブ配信(または動画)毎に固有のURLである。
ライブ配信(または動画)毎に固有のURLの代わりにライブ配信の固定URLを使って埋め込みコードを書き直すと次のようになる。
<iframe width="800" height="640" src="https://www.youtube.com/embed/live_stream?channel=チャンネルID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
この埋め込みコードは常に最新のライブ配信を表示することができる。
固定URLに付加できるクエリパラメータには様々な種類がある。下記リンク先参照。
チャンネルIDの特定
結論
YoutubeチャンネルのトップページのURLが
https://www.youtube.com/channel/UCxxxxx
の場合- 難易度:簡単
- チャンネルIDはURL末尾のUCxxxxx
https://www.youtube.com/c/xxxxx
またはhttps://www.youtube.com/user/xxxxx/featured
の場合- 難易度:ちょっと難しい
- YoutubeチャンネルのトップページのHTML中に書かれたJavaScriptに
ytInitialData
変数がある。この変数内のいたるところにチャンネルIDが書かれているのでそれを文字列検索等で抜き取る。チャンネルIDはUCから始まるので検索は容易。 - Youtubeは度々仕様が変わる。そのため、これから先必ずしもこの方法でチャンネルIDを取得できる保証はない。
詳細
チャンネルIDを特定する最も簡単な方法はYoutubeチャンネルのトップページにアクセスしてそのページのURLを見ることである。URLは通常 https://www.youtube.com/channel/チャンネルID
のような形式である。そのためチャンネルIDは単純に channel/
の後ろに続く文字と同じである。
ところが、まれ?にYoutubeチャンネルのトップページのURLがこの形式とは異なることがある。詳細は下記リンク先参照。
URLからチャンネルIDを特定できない場合にはYoutubeチャンネルのトップページのHTMLを見ることでチャンネルIDを手に入れることができる。scriptタグ内に ytInitialData
変数が宣言・定義されており、たいていは次のような形でこの変数内にチャンネルIDが多数書かれている。HTMLをパースして抜き出すか、単に文字列検索で UCxxxxx
の部分を取り出す。
browseId: "UCxxxxx" または {key: "browseId", value: "UCxxxxx"}
constとポインタ
C言語想定。少し離れるとすぐ忘れるのでconstとポインタの組み合わせと、それらの意味を表にした。
型遊び
型遊び
/********************************************/ // prettier-ignore export const systemModifierList = [ 'STAB', 'Critical', 'MultiTarget', 'NotFullProtect', 'Burn', 'ParentalBond', ] as const; export type systemModifier = typeof systemModifierList[number]; // prettier-ignore export const statStageModifierList = [ 'Plus_1', 'Plus_2', 'Plus_3', 'Plus_4', 'Plus_5', 'Plus_6', 'Minus_1', 'Minus_2', 'Minus_3', 'Minus_4', 'Minus_5', 'Minus_6', ] as const; export type statStageModifier = typeof statStageModifierList[number]; // prettier-ignore type ModifierOfCategory<T extends modifierCategory> = T extends 'System' ? systemModifier : T extends 'StatStage' ? statStageModifier : never; type ModifierOption = { [category in modifierCategory]?: ModifierOfCategory<category>[]; }; /********************************************/ const modifierOption: ModifierOption = { System: ['Burn'], StatStage: ['Plus_6'], };
npm packと.gitignore
有識者によると.npmignoreよりもpakcage.jsonのfilesを使ったほうが良いそう。.gitignore無視されて認証情報漏れる恐れあり。
npmの動作はもう少し公式ドキュメント読んで理解したほうがよさそう。
何らかのライブラリを作りたい。 typescriptでソースを書きtscでCommonJSとESモジュールの二つをビルドする。 それぞれのモジュールの出力先フォルダがdist-cjs, dist-esmだとする。
それについては下記を参考にした。
このとき、ビルド生成物をgit管理下には置かないものとする。.gitignoreに次のように書く。
dist-*
package.jsonのscriptsには次のようにビルドのコマンドを並べる。
"scripts": { "build": "npm-run-all -s build:esm build:cjs", "build:cjs": "tsc --project . --module commonjs --outDir ./dist-cjs", "build:esm": "tsc --project . --module es2015 --outDir ./dist-esm", "prebuild": "rimraf ./dist-*", "prepare": "npm run build" }
ここでnpm pack
するとなぜかbuild-cjsフォルダしか作られていない。
なんで片方だけ残るのか理由はさっぱりわからないが上記リンク先に従って.npmignoreファイルを作り
!dist-*
と書くと、npm packで作った圧縮ファイルの中にdist-esmとdist-cjsの両方ともきちんと入っていた。 あるいはpackage.jsonのfilesにフォルダ名を明記するいいのか?
追記:
やっぱりpackage.jsonのfilesフィールドにフォルダ名を書くとpackされる。このとき.npmignoreは不要。
"files": [ "/dist-cjs", "/dist-esm" ]
ローカルのgitリポジトリからnpmインストールする
とてもニッチなnpm installとyarn add
あまりにも実用性がない
httpsもsshも介さずにgitリポジトリからnpmパッケージをインストールする方法はある。
1. fileスキーム的なあれでgitリポジトリからインストールする
- gitリポジトリからインストールするのでpackage.jsonに書かれたprepareスクリプトが動く。 prepare スクリプトは devDependencies に書かれたモジュールをインストールして動いてくれる。
- git管理下のファイルだけがコピーされる。(node_modules以下が無駄にコピーされないことがえらい。)
- 作業用のリポジトリでも
git init --bare --shared
で作ったリポジトリでもなんでも指定できる。 - ファイルサーバーに置いたリポジトリからインストールできる。
D:\path\to\mylib └.git または D:\path\to\mylib ├hooks ├info ├objects ├refs ├config ├description └HEAD
みたいなところからインストールする。
npm install
# 絶対パス指定 npm install git+file:///D:\path\to\mylib npm install git+file:///D:/path/to/mylib # 相対パス指定...できない? # IPアドレスでUNCパスを指定 npm install git+file:///\\192.168.1.1\path\to\mylib npm install git+file:///\\192.168.1.1/path/to/mylib # ファイルサーバーの名前(例えばserverとする)でUNCパスを指定 npm install git+file:///\\server\path\to\mylib npm install git+file:///\\server/path/to/mylib # いずれの方法も package.json に絶対パスやIPアドレス、ファイルサーバー名などが残ることに注意 # "dependencies": { # "mylib": "git+file:///\\\\192.168.1.1\\path\\to\\mylib" # }
yarn add
npm と違い、 git+file:///
ではなく git+file:
とする。
# 絶対パス指定 yarn add git+file:D:\path\to\mylib yarn add git+file:D:/path/to/mylib # 相対パス指定 yarn add git+file:..\path\to\mylib yarn add git+file:../path/to/mylib # IPアドレスでUNCパスを指定...できない? # ネットワークドライブに割り当てて絶対パス指定すればyarn addできる。 # ファイルサーバーの名前でUNCパスを指定...できない? # ネットワークドライブに割り当てて絶対パス指定すればyarn addできる。
ファイルサーバー補足
ファイルサーバーのIPアドレスが192.168.1.1で名前がserverだとする。通常、エクスプローラー等でファイルサーバーにアクセスするときには\\192.168.1.1\path\to\your\file
だとか\\server\path\to\your\file
のようにUNCパスと呼ばれる方法でパスを書く。ファイルサーバーに置かれたgitのリモートリポジトリからnpm installできる。ただし、ファイルサーバーでユーザー認証の必要がある場合には下記コマンドを打つ前に認証を通しておかなくてはいけない。ファイルサーバーをネットワークドライブに割り当てればUNCパスを使わなくていい。
2. fileスキーム的なあれでpackage.jsonを含むフォルダからインストールする
- ググるとよく見つかる方法。
- package.jsonに書かれたprepareスクリプトが 動かない 。よくない。
- gitリポジトリとは無関係に単純に指定したパスのフォルダをごっそりインストール先のnode_modulesフォルダにコピーしてくる。
- インストール元のnode_modulesフォルダが無駄にコピーされる。よくない。
D:\path\to\mylib ├node_modules ├package.json └index.js
みたいなところからインストールする。
npm install
# 絶対パス指定 npm install file:///D:\path\to\mylib npm install file:///D:/path/to/mylib npm install D:\path\to\mylib npm install D:/path/to/mylib # 相対パス指定 npm install file:///..\path\to\mylib npm install file:///../path/to/mylib npm install ..\path\to\mylib npm install ../path/to/mylib # 絶対パスは相対パスに変換されて package.json に書かれる。
yarn add
npm と違い、 file:///
ではなく file:
とする。
# 絶対パス指定 yarn add file:D:\path\to\mylib yarn add file:D:/path/to/mylib yarn add D:\path\to\mylib yarn add D:/path/to/mylib # 相対パス指定 yarn add file:..\path\to\mylib yarn add file:../path/to/mylib # yarn add ..\path\to\mylib # この指定方法はダメ yarn add ../path/to/mylib # 絶対パスは相対パスに変換されないでそのまま package.json に書かれる。
デバッガーか何かですか?