TIESのブログ

前から少しずつ進めていたワークショップのチラシ作成ですが
少しレイアウトを調整して、当日の実習内容を書いておき、
裏面に昔使っていたCHiLO Bookの説明用チラシのデータを使用することにしました。

表と裏で色合いが変わってしまいますが、
下手にいじってもおかしくなりそうなので、このまま使用します。

前回に引き続き、CHiLO Producerにも不具合が見つかりましたので、CHiLO Producer 3.0.2をリリースしました。

修正された不具合のうち、

• [book-list]で指定した内表紙が表示されない

については、CHiLO Producer 2.x系から3.0に更新したときに、ソースが一部昔のものに戻っていたのが原因でした。
原因がソースということで、もう少しGithubをうまく活用して防ぎたいところです。。

なお、昨日の記事で、TIESのブログの投稿1000本目でした。これからも（できるだけ）毎日更新がんばります。

次回のワークショップで使用するチラシを作成中です。
あまり時間を掛けないよう適当に…サラッと作成中。

作成中なので、今後大きく変更があるかもしれませんが、大体のイメージは固まってきました。

このまま仕上げて問題なければ使用します。

昨日書いたように現在CHiLOライブラリのCHiLO Bookを更新していますが、先ほどTIESのシンポジウムの更新が完了しました。

テンプレートをlistviewに変更して、CHiLO Producer v3の動画自動再生に対応しています。

目次がこのような見た目になります

解説ページを開くと、動画が自動再生されます

次はNihongo Starter 更新します。

少しずつ進めていました、新規ページが出来てきました。

出来た内容は CHiLO Bookに関するページをいくつかです。
一先ず日本語版のページだけですが完成したページを公開しておきます。

CHiLO Bookとは
http://www.cccties.org/activities/chilo/
CHiLO Bookの詳細
http://www.cccties.org/activities/chilo-detail/
CHiLO Bookの利用とサービス
http://www.cccties.org/activities/chilo-use/

残りのページや英語版は後ほど。

現在TIESのページを作成中です。
そんな中で出てきた気になる点があります。

同じサイト内のページへのリンクはそのまま飛ぶように、
別のサイトへのリンクは新しいタブで開くように設定しているのですが、
選択する側からすると開いてみないとどちらか不明で不安になりますよね。

そう思い、現在作成中のページでは事前にどちらのリンクか分かるよう区別してみました。

同じサイト内のものはページ分岐のようなアイコンに、～のページを読むという表記に、
別のサイトへのリンクの場合は地球儀のようなアイコンに、～のサイトに行くという表記にしてみました。

画像で作っているので、少し手間が掛かりますがこれで試してみます。

先日のの記事の問題が解決したので、CHiLO Producer ver.3.0.0をリリースしました。

ちなみに、先日の問題は1.のControlsList APIを使う方法を採用しました。調べる中で進展や内容に誤りが見つかったので、記事を適宜修正しています。

CHiLO Bookは通常、ビデオをvideoタグで埋め込んでいますが、Chromeで見た場合、右下にはダウンロードボタンが表示されます。

普通のウェブサイトならばあっても問題ないかもしれませんが、マイクロレクチャーの電子書籍という特性上、あまりダウンロードはさせたくありません。

じゃあどうしよう。そうだこのボタンを消してしまおう、ということになりました。

やり方は、今のところ2通りあります。

1. ControlsList APIを使う

この機能は最新版のChrome58で実装された機能で、videoタグのオプションを指定することで、VideoタグのUIの一部を消してしまえるものです。
例えば、ダウンロードボタンのみを消したい場合は、以下のようにします。

<video controls="controls" controlslist="nodownload">

サンプルはこちらにあります。自分の環境では、Chrome58でリンク先を見ると、UIの一部が消えているのを確認できました。一方、Vivaldi正式版のように、Chromiumエンジンを使っているけれども、バージョンが古い（Chrome57系）ものでは、再現できませんでした。2017-04-28: Vivaldiのアップデートでブラウザエンジンが更新され、再現するようになりました。

また、CHiLO Bookにおいては中身がXHTMLであるためか、同じオプションを挿入してもcontrolsListのように大文字を含む指定をすると、再現することができませんでした。2017-04-28: 一部誤りがあったので訂正しました。

2. CSSで消してしまう

こちらは所謂CSSハックで、UIを隠してしまいます。この問題について報告されているChromiumのissueではdirty workaroundであり、他のWebkitベースのブラウザで機能が損なわれる可能性があると指摘されています。

方法はCSSに以下を追記します。

video::-internal-media-controls-download-button {
 display:none;
}

video::-webkit-media-controls-enclosure {
 overflow:hidden;
}

video::-webkit-media-controls-panel {
 width: calc(100% + 30px); /* Adjust as needed */
}

古いバージョンのChromeで編み出された方法なので、現在も有効かどうか怪しくなっています。
また、videoタグのコントロールパネルのwidthをいじってやろうという中々に強引な方法なので、スマホのChromeやSafariでは、隣のボリュームバーが途切れたりします。

どちらの方法も問題がありますが、何とか影響の少ない範囲で着地点を見つけようと思います。
この作業が終わったら俺、新バージョンのCHiLO Producerをリリースするんだ……。

TIES新規ページの進捗-2の続きです。

これまでCHiLOとはのページを中心に書いてましたが、
英語版のページも大体出来てきました。

もう１つ作っている技術資料のページもほぼ出来てきたため、

全部仕上がったらあとは問題ないか内容の確認をおこない、
レイアウトの微調整さえすれば公開できるかと思います。

昨日の続きです。

細かなレイアウト調整も終わったのですが、スライドの所に変な黒ぽちが残っていました。

確認した所、全体のcss設定で li タグに対して表示するようにしていました。
流石に全体の所を変更するのは怖いので、スライド内の li に対しては表示しないよう追加することで対応しました。

追加プラグインに書かれたclassに対しての対応なので、アップデート時に変わった場合とか考えると少し怖いですが、
逆に何かあっても影響受けるのもスライドの所だけなので大丈夫ですね！きっと！