22. srt.js

srt.js: YouTubeの字幕情報として埋め込まれる映像拡張Javascriptフレームワーク

開発者向けドキュメントはこちらです。

簡単には、以下の手順ですぐお試しいただけます。

ご自身が管理されている動画で、すでにYouTubeに字幕ファイルとしてsrt.jsをアップロードしてある場合は、

http://srtjs.azurewebsites.net/?v=XXXXXXXXXXX

↑XXXXXXXXXXXのところにYouTubeの11桁の動画IDを入れればすぐ使えます。

人様の動画に自作のsrt.jsを加えてMashupしたい場合は、

https://srtjs.azurewebsites.net/?v=XXXXXXXXXXX&surl=https://dl.dropboxusercontent.com/u/9999999/example.srt.js

のように、URL参照できるsrt.jsファイルをDropboxやGoogleDrive, github等で公開すれば、それを使用できます。

使用例

上記デモ映像で紹介しているもの、および紹介できなかったものを実際にお試しいただけます。インストール等は不要です。ブラウザだけでお楽しみいただけます。最初に「本当に続けますか？」のようなことを聞かれるものもありますが、OKと答えてください。うまく動かない場合はブラウザを変えてみてください。PCならChrome、スマートフォンならFireFoxが一番動作しやすいと思います。

映像と連動した表現の拡張

• あなたの名前でHappy Birthday!
  • テキストボックスに自分の名前を入れると、Happy birth day dear XXXのところであなたの名前が音声合成されます。PC chromeで動作確認。
• ワッキーさんのお笑い映像で笑顔になった瞬間写真撮影
  • 子供向け、BeforeとAfterで２枚撮影します。PC chromeで動作確認。
  • 塚田浩二さんのEyeCathcherですね。
• スパイ大作戦！「なおこのブラウザは自動的に消滅する」
  • 注意！2:50のあたりでブラウザ（のタブ）が強制終了します！PC、iPhoneで動作確認。
• いないいないばあ
  • webmo連動例。スマートフォンをwebmoに繋いでお試しください。iPhoneで動作確認。
• Diverse技研で作られたDating Agentサンプル
  • webmo連動例。スマートフォンをwebmoに繋いでお試しください。iPhoneで動作確認。

ユーザの入力による映像の再生制御

• シェイクするとヘッドラインからニュース本体にナビゲート
  • スマートフォンでお試しください。スマートフォンを振るとヘッドラインと詳細ニュースを行ったり来たりできます。iPhoneで動作確認。
• シェイクするとビブリオバトルで紹介している本をアマゾンで買える
  • スマートフォンでお試しください。本の紹介中にスマートフォンを振るとアマゾンサイトにジャンプします。最初の１冊のみ対応。iPhoneで動作確認。
• マーハッカソンでの参加者作品、津田梅子墓所探訪
  • 独自のGUIを設置して動画再生制御。PC Chromeで動作確認。
• 顔認識を用いた、「見ている時だけ動画再生」
  • あまり作りこんでないので不安定ですみません。PC Chromeで動作確認。
• GPSと地図APIを用いた映像道案内
  • 西武線鷹の台駅でスマートフォンからお使いいただく想定です。URLのclose=100のところを小さくすると、「実際にチェックポイントに行ったかどうか」の判定をメートル単位で厳密にできます。iPhoneだと映像が強制的に全画面になってしまうので不適です。

歴史的経緯についての考察

こういう「時刻にもとづいてプログラムを実行する」というのは昔からAdobe Flash (+ActionScript)で実現されていたことでした。srt.jsは、Adobe Flashの素晴らしい思想を現代的に焼き直しただけにすぎないと言うこともできるかもしれません。でもいまこそそれをやるべきだと思うのです。それについて少し考察します。

Adobe Flashが普及した当時、時系列コンテンツにインタラクティブ性を加えられる！と、もてはやされましたが、

• コンテンツがインタラクティブになればなるほどタイムライン通りに進行しない
• タイムラインから「実行の順と時刻を保証するもの」という意味合いが失われる
• どのプログラム要素も便宜的にどこかの時刻に割り当てなければならないのは直感に反する

ことにより、どんどんタイムラインの良さが失われ、結局タイムラインのないAdobe Flex (現Apache Flex)へと推移してしまいました。

しかし、時代の変遷により、再考の余地ができました。

【人々の意識が変わった】

• タブレット・スマートフォンなどが普及しました。
• 人々がエンタテインメントコンテンツに接する際の態度がより受動的なものになりました。
• コンテンツに要求されるインタラクションの強度が必ずしも高くないものが認知されるようになってきました。
• 現代はコンテンツがユーザの時間を奪う時代であり、ユーザは奪われる時間に敏感です。
• インタラクティブ性の少ない時系列コンテンツは，インフォームドコンセント（楽しむのにどのくらい時間がかかるかを事前に示せる）の観点から優れているのです。

【プログラミングの質が変わった】

• 既存のサービスに「少しだけ」独自要素を追加するプログラミングが受け入れられるようになってきました。Mashup文化, IFTTT, myThings…
• 時系列コンテンツへの「少しだけ」の独自要素の追加であれば、タイムライン上に疎にプログラムが埋め込まれる程度であるため、タイムラインというメタファーは破綻しません。

【いろいろおもしろい世界になった】

• IoTデバイスやWebサービスの普及により、繋いだら面白いモノやサービスが増えました。

さあ、今こそ、下火になった「時系列指向プログラミング」を再興すべき時です！

srt.jsはその手段の一つです！

活動履歴

2016/08/07 SIGPX2＠品川マイクロソフト でちょっと内々にもんでいただきました。

2016/12/17 MashupAwards 2016で最優秀賞を受賞しました！