YoutubeList - Youtube動画閲覧の有無を記録するウェブページ

目次

• 概要
• デモ
• 設置手順
  1. ダウンロード
  2. パスワード入力画面の設定
  3. パスワード設定の練習
  4. 一覧表示画面の設定
  5. パスワードの設定
• 注意事項
  • 動画閲覧ページの最大数について
  • パスワードの保護について
• 更新履歴

概要

Youtube動画を閲覧したか否かをウェブブラウザの利用者が自分で記録するためのウェブページです。
閲覧したかどうかは、一覧表示ページ内の「見る」というリンクの左側の丸いアイコンで確認できます。
まだ閲覧していない動画には灰色の「未」のアイコンが、閲覧した動画には赤色の「済」のアイコンが付きます。

「見る」のリンクを押すと、以下のようなYoutubeの動画閲覧ページが表示されます。
動画をフレーム内で閲覧できますが、Youtubeページを開いて閲覧することもできます。

ページの左上に以下のような「まだ見終わってない」か「最後まで見た」かを選択するボタンが表示されます。
このボタンを押すと、それがブラウザーに保存されます。
どちらのボタンを押したかによって一覧表示ページの「未」か「済」のアイコン表示が変わります。

すべての記録はブラウザ内に記録されます。（Cookieとして保存されます。)
ブラウザごとに記録されるので、他のブラウザから記録を見たり変更することはできません。
見終わったか、まだ見ていないかを自分で記録して確認するためのものになります。

[ページの先頭に戻る]

デモ

YoutubeListの動作をデモページで確認することができます。
デモページの操作方法は、以下のとおりです。

デモページを開きます。

• デモページ

「himitsu」を入力して、「登録」ボタンを押します。

一覧表が表示されます。
このページを「一覧表示ページ」と呼びます。

一覧表示ページでは、Youtubeを閲覧するためのページへのリンクには「見る」が、それ以外のページへのリンクには「開く」が表示されます。
「見る」のリンクの左横には、灰色の「未」のアイコンが付いています。これは、閲覧がまだ（未了）であることを示しています。
「動画閲覧」の欄にある「見る」をクリックします。

Youtubeの動画再生フレームを含むページが表示されます。
このページを「動画閲覧ページ」と呼びます。

動画を閲覧したら、動画閲覧ページの左上にあるボタンのいずれかを押します。

「最後まで見た」を押してみます。

一覧表示ページに戻ります。「見る」の左横のアイコンが、閲覧済であることを示す赤色の「済」になります。

同様に他のYoutubeの閲覧結果を記録することができます。

ブラウザを閉じたりなどしてから、再び、デモページを開くと、記録した閲覧結果が再び表示されます。

デモは以上です。

[ページの先頭に戻る]

設置手順

1.ダウンロード

以下のzipファイルをダウンロードして展開（解凍）します。

• youtubelist.zip

以下のファイルが展開されますので、すべてのファイルをウェブサーバに置いてください。

フォルダ（ディレクトリ）には、youtubelist.htmlとyoutubelist.jsという2つのファイルと、dataとyoutubelistという2つのフォルダが展開されます。
dataフォルダには、上記のとおり3つのファイルが、 youtubelistフォルダには、上記のとおり5つのファイルが展開されていれば、正しく展開されています。

ウェブサーバに上記のファイルを置いたら、まず最初に、ブラウザでyoutubelist.htmlにアクセスしてください。

example.comというウェブサーバのトップディレクトリにファイルを展開した場合には、http: 又は https://example.com/youtubelist.htmlをブラウザで開いてください。

※YoutubeListはウェブサーバにファイルを置いてネットワーク経由でアクセスしないと利用できません。 ローカルのディスクに置いたファイルをブラウザで開いても、パスワード入力から先の画面に進むことはできません。

[ページの先頭に戻る]

2.パスワード入力画面の設定

下図の赤枠内のテキストを自由に設定することができます。

youtubelist.js ファイルをテキスト編集ツール（Windowsの「メモ帳」アプリなど）で開いて、以下の部分を確認します。
青色マーカーや青色点線は、実際のファイルにはありません。
変更するのは、青色点線の部分だけです。それ以外の文字を変更すると、何も表示されなくなりますので、ご注意ください。

上記の変数passwordHintTextに、表示したいテキストを設定することができます。
たとえば、「メールでお伝えしたパスワードを入力してください。」に変更するために、以下のように編集してみてください。

編集したファイルを、ウェブサーバにアップロードしてから、ブラウザでyoutubelist.htmlにアクセスしてください。
編集したとおりに、画面の表示が変わったはずです。
表示が変わらない場合は、アップロードが正しくできていませんので、確認してください。
もしも、画面に何も表示されなくなった場合は、青色点線以外の箇所を誤って編集してしまったためです。ダウンロードした、youtubelist.jsに戻してから編集作業をやりなおしてください。

3.パスワード設定の練習

data フォルダに置くファイル名がパスワードになります。
ダウンロードファイルでは、himitsu.jsになっているので、パスワードは himitsu になります。
このファイルを、パスワードファイルと呼ぶことにします。
もしも、パスワードを hogehoge に設定するなら、パスワードファイルのファイル名は、hogehoge.js になります。
ここでは、いったん、dataフォルダ内で、himitsu.jsをhogehoge.jsに（変更ではなく）コピーしてください。

ブラウザでyoutubelist.htmlにアクセスしてください。
パスワードに「hogehoge」を入力して、デモと同じ画面が表示されるか確認してください。
「hogehoge」を入力しても、「正しいパスワードを入力してください」と表示される場合は、ファイル名が、hogehoge.jsになっていないことが考えられます。 ファイル名を確認してください。それでも、動作しない場合は、「1.ダウンロード」に戻ってやりなおしてください。

4.一覧表示画面の設定

下図の赤枠内のテキストを自由に設定することができます。

dataフォルダにあるhogehoge.jsファイルをテキスト編集ツールで開いて、以下の記述がある箇所（行）を探してください。
※hogehoge.jsではなく、himitsu.jsを開かないように注意してください。
青色マーカーや青色点線は、実際のファイルにはありません。

これらの設定方法を一つずつ順番に説明します。

4.1 タイトルの設定

上記の変数indexBannerに、タイトルとして表示したいテキストを設定することができます。
HTMLを使って複数行で設定することもできます。

上記の「佐藤の講演録」を適用なタイトルに変更してください。

変更したらファイルを保存して、保存したファイルをウェブサーバにアップロードしてから、ブラウザでyoutubelist.htmlにアクセスしてください。
ブラウザでYoutubelist.htmlを開いたままだった場合は、ブラウザでリロード（再読み込み）をしてください。
編集したとおりに、画面の表示が変わったことを確認してください。
何も表示されないか、表示が正しくない場合は、青色点線部分以外を誤って編集してしまったためです。
誤りを修正するか、himitsu.jsを再びhogehoge.jsにコピー（先ほどやった「3.パスワード設定の練習」を参照）してから、編集を最初からやりなおしてください。

4.2 更新日の設定

上記の変数indexRevisionDateに、「更新日：」に続いて表示したいテキストを設定することができます。

上記の「2020年5月28日」を今日の日付に変更してください。

変更したらファイルを保存して、保存したファイルをウェブサーバにアップロードしてから、ブラウザでyoutubelist.htmlにアクセスしてください。
ブラウザでYoutubelist.htmlを開いたままだった場合は、ブラウザでリロード（再読み込み）をしてください。
編集したとおりに、画面の表示が変わったことを確認してください。
何も表示されないか、表示が正しくない場合は、青色点線部分以外を誤って編集してしまったためです。
誤りを修正するか、himitsu.jsを再びhogehoge.jsにコピー（先ほどやった「3.パスワード設定の練習」を参照）してから、編集を最初からやりなおしてください。

4.3 表の設定

上記の配列変数indexTableDataに、表の中に表示したいテキストを設定することができます。
1行目は、表の見出しになります。

上記の場合には、1列目の見出しに「種別」を、 2列目の見出しに「タイトル」を、 3列目の見出しに「動画閲覧」を、 4列目の見出しに「参考リンク」を設定しています。

練習として、上記の「種別」を「分野」に、「動画閲覧」を「Youtueb」に変更してください。
青色点線部以外の「,」や「'」などの記号文字を誤って変更しないように十分注意しながら、以下のように編集してください。

2行目以後が、表の内容になります。

上記の場合には、1列目に「規格」を、 2列目に「ISO/IEC 27701国際規格の概要」を、 3列目に「AkpIRdIGEeo」を、 4列目に「https://yosihiro.com/speech/tag/2020-04-03.html」を設定しています。
これらの設定によって、以下のように表示されます。

練習として、上記の「規格」を「標準」に、タイトルを「国際規格の紹介」に変更して、以下のように編集してください。
先ほどと同様に青色点線部以外を変更しないように注意してください。

変更したらファイルを保存して、保存したファイルをウェブサーバにアップロードしてから、ブラウザでyoutubelist.htmlにアクセスしてください。
ブラウザでYoutubelist.htmlを開いたままだった場合は、ブラウザでリロード（再読み込み）をしてください。
編集したとおりに、画面の表示が変わったことを確認してください。
何も表示されないか、表示が正しくない場合は、青色点線部分以外を誤って編集してしまったためです。
誤りを修正するか、himitsu.jsを再びhogehoge.jsにコピー（先ほどやった「3.パスワード設定の練習」を参照）してから、編集を最初からやりなおしてください。

表示したときに、いま変更した「標準　国際規格の紹介」の行の背景色が灰色になっていることを確認してください。
この行の背景色は、もともとは薄い緑色でした。背景色の設定については、次の手順で説明します。

3列目と4列目は、リンクの設定になっています。
「http」から始まる値を設定すると、その値をリンク先にした「開く」というテキストを貼ります。
上記の4列目は、https://yosihiro.com/speech/tag/2020-04-03.htmlへのリンクになり、「開く」を選択するとブラウザの別タブを開いてリンク先を表示します。
それ以外の場合は、「見る」という動画閲覧ページを開くテキストを表示します。
上記の3列目は、Youtube IDがAkpIRdIGEeoのための動画閲覧ページを表示します。
Youtube IDとは、Youtubeのリンクの中にある動画を指定するためのIDです。
たとえば、Youtubeリンクが、
https://www.youtube.com/watch?v=AkpIRdIGEeo&feature=emb_logo
又は、
https://youtu.be/AkpIRdIGEeo
の場合のYoutube IDは、青色点線部分の AkpIRdIGEeo になります。

ここでは、リンク先の変更は、いったんしないで先に進みます。

4.4 表の背景色の設定

上記の配列変数indexTableColorに、表内の各行の背景色を設定することができます。
上記の例では、1列目の値に「規格」を含む行の背景色を「#CCFFCC」に設定しています。

色は16進数などのカラーコードで指定します。色見本の参考例は、こちら

先ほどの練習で、「規格」を「標準」に変更したので、ここでも同様に「規格」を「標準」に変更してください。

変更したらファイルを保存して、保存したファイルをウェブサーバにアップロードしてから、ブラウザでyoutubelist.htmlにアクセスしてください。
ブラウザでYoutubelist.htmlを開いたままだった場合は、ブラウザでリロード（再読み込み）をしてください。
編集したとおりに、画面の表示が変わったことを確認してください。
何も表示されないか、表示が正しくない場合は、青色点線部分以外を誤って編集してしまったためです。
誤りを修正するか、himitsu.jsを再びhogehoge.jsにコピー（先ほどやった「3.パスワード設定の練習」を参照）してから、編集を最初からやりなおしてください。

先ほど、「標準　国際規格の紹介」の行の背景色は灰色でしたが、薄い緑色に変わったことを確認してください。

以上で、表の設定は終了です。

[ページの先頭に戻る]

5.パスワードの設定

以上の手順の結果、いまのパスワードは「hogehoge」になっています。
パスワードを決めて、dataフォルダにある、hogehoge.jsを、パスワードのファイル名に変更してください。
たとえば、パスワードを「naisho」にするなら、ファイル名は、naisho.jsになります。

パスワードファイルのファイル名には、以下の文字を含めずに決めてください。

いまは、ダウンロードした himitsu.jsが残っているので、パスワードにhimitsuを入力すると、そちらの一覧表示ページが表示されます。
このように、dataフォルダ内に複数のパスワードファイルを置いて、一覧表示ページを切り替えることもできます。
himitsu.jsファイルについては、削除するか、動作確認用にそのままにしておいても構いません。

以上で、YoutubeListの設置は終了です。
「4.3 表の設定」と「4.4 表の背景色の設定」を参考に、自分用に表とリンク先を変更してからお使いください。

[ページの先頭に戻る]

注意事項

動画閲覧ページの最大数について

YoutubeListは、閲覧記録をブラウザーのWebStorageに保存します。しかし、WebStorageが使えないブラウザではCookieに保存します。
WebStorageとCookieのどちらも使えないブラウザでは、YoutubeListを利用することはできません。
Cookieで保存する場合には、Cookieの最大サイズは4Kバイトくらいで、1ページに約20バイトを使いますので、 動画閲覧ページの記録は、最大で約200ページくらいに制限されます。
WebStorageの最大サイズは4Mバイトですので、約20,000ページを記録できますので気にせずお使いいただけると思います。

パスワードの保護について

パスワードは、一般的なパスワード保護と同様に、総当たり攻撃（a,b,c..aa,bb,cc..zzzzと順番にすべての文字を試す攻撃）を受けると、 パスワードを知らせていない人に、パスワードを見破られてしまうことがあり得ます。

パスワードは、パスワードファイルのファイル名によって決まっています。
JavaScriptでパスワードファイルを格納しているフォルダー名を指定しています。このフォルダー名を隠すことはできません。
そのフォルダ内のファイル名が一覧表示されると、ファイル名がわかることによって、パスワードがわかってしまうことになります。
そのフォルダの一覧表示ができないようにウェブサーバの設定をしてください。
ダウンロードファイルでは、一覧表示がされにくいように、.htaccessとindex.htmlというファイルを含めてありますが、YoutubeListを置くウェブサーバの設定手順を確認して正しく設定してください。

[ページの先頭に戻る]

更新履歴

[ページの先頭に戻る]