new wings

プログラミングを始めたので、感想を書いてくと思います

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

stackoverflow.com

詳細

ライブ配信の固定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に付加できるクエリパラメータには様々な種類がある。下記リンク先参照。

developers.google.com

チャンネル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がこの形式とは異なることがある。詳細は下記リンク先参照。

support.google.com

URLからチャンネルIDを特定できない場合にはYoutubeチャンネルのトップページのHTMLを見ることでチャンネルIDを手に入れることができる。scriptタグ内に ytInitialData 変数が宣言・定義されており、たいていは次のような形でこの変数内にチャンネルIDが多数書かれている。HTMLをパースして抜き出すか、単に文字列検索で UCxxxxx の部分を取り出す。

browseId: "UCxxxxx"

または

{key: "browseId", value: "UCxxxxx"}

ポケモンずかんのapi

ポケモン

公式のポケモンずかんのapiがあった。どんなデータ構造？スキーマ？でポケモンのデータを保存しているかがわかって面白い。 ゲンシカイキとメガシンカは別カウントだった。

その昔ポケモンのホームページは右クリ禁止でポケモンの画像が（表向きは）保存できなかったりした。 今はそんなことないし、大っぴらになったなあと思う。

ポケモンずかん https://zukan.pokemon.co.jp

/zukan-api/api/<いろいろ>

型遊び

TypeScript

型遊び

/********************************************/

// 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無視されて認証情報漏れる恐れあり。

medium.com

npmの動作はもう少し公式ドキュメント読んで理解したほうがよさそう。

何らかのライブラリを作りたい。 typescriptでソースを書きtscでCommonJSとESモジュールの二つをビルドする。 それぞれのモジュールの出力先フォルダがdist-cjs, dist-esmだとする。

それについては下記を参考にした。

future-architect.github.io

このとき、ビルド生成物を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フォルダしか作られていない。

stackoverflow.com

なんで片方だけ残るのか理由はさっぱりわからないが上記リンク先に従って.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 に書かれる。

デバッガーか何かですか？