Unityのcourseware(2015ver)の字幕を見やすくする ひとりぷちアドベントカレンダー2017 03日目
なにやらUnityのcourseware(2015ver)が利用できるらしいのでやってみよう、というお話です。 そのなかで動画の字幕が読みにくい、という事でスタイルを弄ったりしてみました。
ご案内
数日前にUnityからメールが来ていました。
An important message about your courseware access.
内容は多分こんなやつです。(すごく適当翻訳)
- コースウェアの2015verがもうすぐ終わるよ。
- 利用権利が残っているよ。
- 気になったら期限までに利用してね。
何で貰った権利か謎ですが利用してみる事にします。
#おそらくOculusの時のオマケ?
#あるいは先日のPlus分?? (オマケ付きで半額かー、ということでポチった!)
コースウェア
内容としては、ブラウザで動画を見ながらひとつのゲームを作ってみよう、というものらしいです。 残念ながら音声は英語ですが、日本語を含むいくつかの言語の字幕を表示する事ができます。 公開の期限は2018/03/01まで、そして1or3ヶ月分のアクセス権もってるよ、とのこと。 3ヶ月の人がフルに活用できるように、というタイミングでのお知らせぽいですね。 私の場合は1ヶ月分でした。
はじめてみる
!注意! 同じように権利を持っていて、まだ開始しない場合はご注意ください。どのタイミングでカウントスタートするのか微妙なので...
下記のコースウェアページの右上からログインをすると開始できます。 Unity Certification - Courseware
トップのページはこんな感じ。 コース状況等の確認は左上のメニュー、My Activitiesの各項目で確認できます。
字幕が読みにくいので対策する
ぽちぽちクリックして動画を開始するまでは良いのですが、字幕が読みにくいです... でも安心、字幕表示はhtmlなのでどうにでもなるのです。
下の画像はChromeのディベロッパツール(Ctrl+Shift+I
)を利用してスタイルを上書きしたものです。htmlの場合はこのようにユーザ側から介入する事ができるので良いですね。
スタイルはこんなやつです。敵(?)はインラインスタイルのため、!important
を指定して強制的に上書きしています。
/* 字幕部分 */ span.ttmlStyled { /* 文字 */ color: #002835!important; font-size: 2em!important; /* 背景 */ background-color: #62ff00bf!important; border-radius: 0.2em; }
Stylusを利用して自動適応
毎回面倒、という場合は拡張機能を利用して自動適応しましょう。
今回はStylusというページ毎に追加CSSを適応してくれる拡張を使います。
で、こんな設定をすると自動で字幕スタイルを適応できます。 urlを2つ指定しています。これは動画部分がiframeな事への簡易な対策です。
https://unity3d.docebosaas.com/learn/course/ https://cdnapisec.kaltura.com/html5
おわりに
字幕表示も快適になったのでちまちま読み進めていこうと思います。
ぷちアドベントカレンダーのはずなのにお手軽度が不足してる......。 さて、いつまで継続できるのか。