YouTubeのショートURLを取得するブックマークレットを作りました

  • URLをコピーしました!

記事のタイトル通り、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);};

Short YouTube URL取得

上のリンクをブックマークバーにドラッグすると、簡単に登録できるようにしておきます。

簡単にコードの内容を解説しますと、このコードでは大まかに以下の要素で構成されています。

  • (javascript) prompt文 … alert文のようなポップアップとテキストボックス
  • (javascript) replaceメソッド … 文字列の置換処理を行う(正規表現で文字列検索が可能)
  • (javascript) if文
  • (Web API) document.titleプロパティ
  • (Web API) location.href プロパティ

はじめにpromptで表示する内容を指定し、テキストボックス内に表示
表示内容を
 Webページの要素から取得
 replace等で取得内容を整形

のような感じになっています。細かいところはご自身で調べてみてください。

使い方は、YouTubeの動画(配信)を開いている場合に、このブックマークレットを実行するといった形になります。

以上!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次