TIESのブログ

CHiLO Book Library などで公開している、オンライン版CHiLO Bookのiframe表示最大幅を固定にしてみました。

最初は幅を100%にしていたのですが、広がりすぎると少し間延びした感じになったので、
それならば、最大幅の上限を固定してみてはと、対応してみました。

画面のサイズは横1024pxを最大にしました。
このサイズは、目次を出したときは 目次+片面開き になり、目次を閉じたときは 両開き になるという、ちょうどいい感じに収まるサイズです。

画面のサイズは横1024pxを最大としていますが、それ以下になると従来通り狭まっていくようになっています。
ですので、今の所スマートフォン等の場合はほとんど影響を受けず、前のデザインのままかと思います。

前回、オンライン版CHiLO BookのページにOGPの設定をした後、SNSなどのシェアボタンが欲しくなったので、ナビバーを少し改良しました。

ページのURLを表示するリンクボタン  を、シェアボタン  に変更して、
ボタンを押すと、URLを表示しつつ、シェアボタンも表示するように変更しました。
（あとついでにQRコードも表示）

ただ、QRコードはついでのように作りましたが、実際テストしていると、案外こっちのほうが需要ありそうな気もしますね。
紙媒体とかにも印刷できますし。

Nihongo Starter CLASS 8 の開講もあるので、CHiLO Book Libraryサイトから閲覧できるオンライン版の CHiLO Book のページに対しては、OGPの設定を追加しておきました。

Facebookで投稿するとこんな感じです、OGPの情報は、ePubファイル内にあるメタデータなどを抽出して表示させています。
（description の所には何を入れるか迷いましたが、とりあえず目次をざーっと表示するようにしました。）

OGPの設定をすると、今度はSNSのシェアボタンが欲しくなってきますね。。
4月に用意したページのURLを取得する機能の箇所にボタンを配置するか、または、ナビバーの見せ方を改良するかして、どこかいい感じにボタンがおけないか試そうと思います。

CHiLO Bookはパッケージ化されたマイクロコンテンツですので、どこにでも埋め込めます。

埋め込み用のスクリプトとCHiLO BookのURLを指定すると、このように
サイト上でCHiLO Bookを公開できます。

（今回は日置先生のはじめての情報ネットワークⅠを参考に使用しています。）
Book自体を張り付けると最後に参照したページが記憶され、
再度開いた時には続きから読めます。

また、特定のページを指定して貼り付けることも可能です。
復習のために問題部分を埋め込んでいくなどの使い方が可能になります。

CHiLOのリストのCHiLO Bookを埋め込むと、CHiLOを配信するための、ポータルサイトなんかも必要ありません！

内容に応じてサイズを調整することも可能です。

CHiLO Producer で出力した時のePubファイル名は以前まで、
「シリーズ名-vol-○.epub」 という風にしていたのですが、
これを「○.epub」と、巻数だけ表示するようにしようと思います。

例）
変更前： About CHiLO-vol-1.epub
変更語： 01.epub

一応、出力時にファイル名の先頭に文字を入れるオプション(-f <output name>)があるので、
01.epubだと嫌だなぁって場合は、これを追加することで文字を足せます。(abc01.epub みたいな)

とりあえずこのルールに変更して、次の CHiLO Producer 更新時に反映しておきます。

CHiLO Producer で出力する時、目次と本文の間に、
「はじめにお読みください」ページや「シリーズの紹介」ページがそれぞれ挟まれるのですが、
そんなに書くことなかったり、早く本文を表示したかったりと意見が出たので、
とりあえずページを統合させて、ページ数を減らしてみることにしました。

以前

統合

書く内容が長いと結局めくるページは増えてしまいますが、それは以前と同じ状態ですし、
短い内容の場合は１ページに収まるのですっきりしますね。

問題なさそうであれば次の CHiLO Producer 更新時にこの対応も反映しておく予定です。

Github上で公開しています、CHiLO用のMoodleテーマを更新しました。

https://github.com/cccties/moodle-theme_chilo

今回の更新で、Moodle2.9以降でレイアウトが一部崩れる問題を対応したり、
テーマを反映するのに、moodleのcore部分を変更しなくてはならなかった箇所をしなくていいようにしました。

Moodle3.0でも動くのを確認

他にも、オンライン版のCHiLO Bookから見たときは、強制的に画面をシンプル表示にさせる仕込みを入れるなどしており、
上手く連携できていければなぁと考えています。

CHiLO Book Library で公開しているオンライン版のCHiLO Bookの要望で、
ナビバーに、クイズ合格時の取得バッジページに移動するボタンが欲しい！と言われたので、
とりあえずテスト環境で追加してみました。

　のボタン

ページ移動するだけのボタン追加なので楽かなぁと思っていたのですが、
iPhone5sで確認したらナビバーが2行になっていました。。

これはよくないですね・・
最近出たiPhone SEも5s と同じ大きさらしいですし、折りたたみ的なものを考慮してから設定したほうがよさそうです。

こういうのとか、

こういうのとか。

CHiLO Book Library で公開しているオンライン版のCHiLO Bookを更新しました。

今回は目次欄に表示される項目の色を更新しました。

本を読んでいて、表示しているページが今どこかが目次を見ても分かりにくいとのことでしたので、
現在表示しているページの項目に色をつけるようにしました。

ただ、この機能を有効にするにあたり、各目次項目を囲っているタグに id 情報を加える必要があったので、
CHiLO Book側も修正する必要がありました。。

今後作成していく物に関しては大丈夫ですが、過去の分に関しては、
時間が空いたときに随時更新していくことになりそうです。