記事のタイトル通り、YouTubeのショートURLを取得するブックマークレットを作りました！
意外とJavaScriptの勉強にもなりましたので、記事として残しておこうと思いました。
コードはけっこうググりながら動作確認してを何回か繰り返して、言い換えると試行錯誤して作り上げました。無駄なコードも省いていくとけっこうシンプルになりますね。
コードはこちらになります。
prompt('Title%20+%20URL',document.title.replace(/^\([0-9]{1,}\)\s/g,'').replace(' - YouTube','')+' '+location.href.replace('https://www.youtube.com/watch?v=','https://youtu.be/'));
if(history.replaceState){history.replaceState({},null,location.href);};
ブックマークレットとして使用するために、「javascript:」を先頭に付けて、ブックマークに登録してください。以下は上記コードから改行コードを削除したものです。
javascript:prompt('Title%20+%20URL',document.title.replace(/^\([0-9]{1,}\)\s/g,'').replace(' - YouTube','')+' '+location.href.replace('https://www.youtube.com/watch?v=','https://youtu.be/'));if(history.replaceState){history.replaceState({},null,location.href);};上のリンクをブックマークバーにドラッグすると、簡単に登録できるようにしておきます。
簡単にコードの内容を解説しますと、このコードでは大まかに以下の要素で構成されています。
- (javascript) prompt文 … alert文のようなポップアップとテキストボックス
- (javascript) replaceメソッド … 文字列の置換処理を行う（正規表現で文字列検索が可能）
- (javascript) if文
- (Web API) document.titleプロパティ
- (Web API) location.href プロパティ
はじめにpromptで表示する内容を指定し、テキストボックス内に表示
表示内容を
Webページの要素から取得
replace等で取得内容を整形
のような感じになっています。細かいところはご自身で調べてみてください。
使い方は、YouTubeの動画（配信）を開いている場合に、このブックマークレットを実行するといった形になります。
以上！
