落書き帖  古事記  いろは歌  日 記

ツベの手(TUBENOTE)

2016年03月08日
民放のテレビ番組があまりにつまらなくなってきたので、「海外のコンテンツを観たいなぁ」と思うようになりました。

…英語なら中高6年間少しだけ勉強したのでなんとかなるかもしれない。

でも字幕でもなければさっぱりわかりません。
それでもどうせ観るなら、少しでもヒヤリングしたい。
そしてヒヤリング出来る様になるには少しでも興味あるコンテンツを視聴したい。

YOUTUBEには沢山の海外コンテンツがあるのに…、
全てのコンテンツに、こちらが期待する字幕は有るとは限らない…。
字幕のないコンテンツでも視聴しながらメモを取ったり、或いは歌詞カードを見ながら洋楽を聞いたり…、
そんな事がより安易に出来ればいいな…。
YOUTUBEだけでなくローカルの動画ファイルや音声ファイルの再生も出来れば良いな…。
javascriptを弄るので、広い編集領域が欲しいな…。

PCならそれほど操作性を損なわず行えそうですが、スマホの狭い画面だと何かと不便です。

そこでこんな物を作ってみました。

DOWNLOAD つべの手(TUBENOTE)

ダウンロードファイルはHTMLファイルです。
ブラウザで開けば使えます。

「何か良く分から無い物をダウンロードするのは…」、
と言う方は、ページ下部にあるスクリプト全文を確認後そちらをコピペして使って下さい。

☆☆動作確認☆☆
DEVICE:zenfone5
OS:android4.4.2
BROWSER:chrome & firefox

DEVICE:32bitお年寄りPC
OS:debian
BROWSER:iceweasel
☆☆☆☆☆☆☆☆

多分PC(IEは眼中にありません)でも動きますが、縦長のスマホに合わせデザインしてます。
デバイスやブラウザによる癖が多分に出るだろう箇所はあまり調整していません。
(ドツボにはまりそうだったので…)
javascript部分は、ブラウザの違いによる分岐は行っていない(と思う…確認面倒臭い)ので、汎用性はあるかも……と期待。

完成後にはあまりテストしていません。(自分的に使えてるので…)
フルスクリーンでのテキスト編集についてだけfirefoxに若干使いやすい部分があるにはあるかな…。
主にchromeで使う様に調整しています。

  

  

☆☆使い方☆☆
file
ーsave text:ローカルにテキストを保存
ーload text:ローカルからテキスト読み込み
ーload video:ローカルから画像ファイル読み込み
ーload audio:ローカルから音声ファイル読み込み

storage
ーsave storage:設定をブラウザのキャッシュに保存
ーload storage:設定をブラウザのキャッシュから読み込み
ーdelete storage:設定をブラウザのキャッシュから削除

名前の無いボタン
フォーカスを外す為に使って下さい。

option
ーopacity:テキストエリアの透明度変更
ーcolor:テキストエリアの文字色変更
ーfontsize:テキストエリアの文字の大きさ変更
ーkeyboard:キーボードのロックと解除

operate
ーyoutube:youtubeコード又はURLから動画読み込み
ーtube history:一度読み込んだyoutubeコードとURLの履歴から動画読み込み
ーclear player:プレイヤーの削除
ーfull screen:通常画面とフルスクリーンの切り替え(フルスクリーンにしていても、ファイルの読み込みで通常画面に切り替わります。フルスクリーンにするには再度このボタンを押して下さい)
ーtextarea:4つのテキストエリアの切り替え(4つ目のテキストエリアはyoutubeの履歴に使っています。4つ目のテキストエリア・historyで履歴の編集が出来ます。historyに追加されたyoutubeコード又はURLの先頭に文字(改行文字以外)を挿入すると名前を付けることが出来ます。)
ーtext name:表示中のテキストの名前変更(この後save textすれば、ファイル名も変わります。)
ーclear text:表示中のテキスト削除
☆☆☆☆☆☆☆

スクリプト全文
修正前のスクリプト掲載してたので差し替えました。13:13