curluneの日記

日々試行錯誤。雑多に、気ままに、てきとーに。HoloLens/Oculus Rift,Touchと戯れる日々。

Unityのcourseware(2015ver)の字幕を見やすくする ひとりぷちアドベントカレンダー2017 03日目

なにやらUnityのcourseware(2015ver)が利用できるらしいのでやってみよう、というお話です。 そのなかで動画の字幕が読みにくい、という事でスタイルを弄ったりしてみました。

ご案内

数日前にUnityからメールが来ていました。

An important message about your courseware access.

内容は多分こんなやつです。(すごく適当翻訳)

  • コースウェアの2015verがもうすぐ終わるよ。
  • 利用権利が残っているよ。
  • 気になったら期限までに利用してね。

何で貰った権利か謎ですが利用してみる事にします。

#おそらくOculusの時のオマケ?

#あるいは先日のPlus分?? (オマケ付きで半額かー、ということでポチった!)

コースウェア

内容としては、ブラウザで動画を見ながらひとつのゲームを作ってみよう、というものらしいです。 残念ながら音声は英語ですが、日本語を含むいくつかの言語の字幕を表示する事ができます。 f:id:curlune:20171202215526p:plain 公開の期限は2018/03/01まで、そして1or3ヶ月分のアクセス権もってるよ、とのこと。 3ヶ月の人がフルに活用できるように、というタイミングでのお知らせぽいですね。 私の場合は1ヶ月分でした。

はじめてみる

!注意! 同じように権利を持っていて、まだ開始しない場合はご注意ください。どのタイミングでカウントスタートするのか微妙なので...

下記のコースウェアページの右上からログインをすると開始できます。 f:id:curlune:20171202220509p:plain Unity Certification - Courseware

トップのページはこんな感じ。 f:id:curlune:20171202215812p:plain コース状況等の確認は左上のメニュー、My Activitiesの各項目で確認できます。 f:id:curlune:20171202214605p:plain

字幕が読みにくいので対策する

ぽちぽちクリックして動画を開始するまでは良いのですが、字幕が読みにくいです... f:id:curlune:20171202233057p:plain でも安心、字幕表示はhtmlなのでどうにでもなるのです。

下の画像はChromeディベロッパツール(Ctrl+Shift+I)を利用してスタイルを上書きしたものです。htmlの場合はこのようにユーザ側から介入する事ができるので良いですね。 f:id:curlune:20171202233113p:plain

スタイルはこんなやつです。敵(?)はインラインスタイルのため、!importantを指定して強制的に上書きしています。

/* 字幕部分 */
span.ttmlStyled {
    /* 文字 */
    color: #002835!important;
    font-size: 2em!important;
    /* 背景 */
    background-color: #62ff00bf!important;
    border-radius: 0.2em;
}

Stylusを利用して自動適応

毎回面倒、という場合は拡張機能を利用して自動適応しましょう。

今回はStylusというページ毎に追加CSSを適応してくれる拡張を使います。

github.com

で、こんな設定をすると自動で字幕スタイルを適応できます。 urlを2つ指定しています。これは動画部分がiframeな事への簡易な対策です。 f:id:curlune:20171202235321p:plain

https://unity3d.docebosaas.com/learn/course/
https://cdnapisec.kaltura.com/html5

おわりに

字幕表示も快適になったのでちまちま読み進めていこうと思います。

ぷちアドベントカレンダーのはずなのにお手軽度が不足してる......。 さて、いつまで継続できるのか。