EPUB3 コンテスト 第1回 結果発表 *

 zip内にHTMLとCSSが入っており、日本語拡張仕様に対応した、Apple Safari 5.1以降やGoogle Chrome 10(一部13)以降で表示すると、作品を見ることができます。  募集要項 参加作品一覧
 主催:イースト株式会社  協賛:株式会社インプレスR&D OnDeck   協力:一般社団法人 日本電子出版協会(JEPA)
 審査員:村田真、木田泰夫、石井宏治、インプレスR&D OnDeck編集部、イースト加藤一由樹、高瀬拓史

The best four selections out of the "EPUB 3 contest" No.1, which was held since April until July/2011 at epubcafe, have been unveiled. Every works  take advantage of the EPUB 3 features such as SVG, Media Overlay, SMIL, vertical-writing and web fonts and demonstrate that EPUB 3 has rich power of  expression and huge potentials.  

講評:村田真】
EPUB3を活用して魅力的なコンテンツを作りだすための知見を集めること、 EPUB3についての理解を広げることを目的として、このコンテストは開催されました。応募してくださったたくさんの方のおかげで、これらの目的は十分に 達成されたと考えています。
今回は、まだEPUB3の作成環境も閲覧環境も十分には整っていない時点での開催でした。そのため、EPUB出版物を対象にすることはできず、その構成要素であるHTMLまたはSVGコンテンツ文書を対象としました。それでも、応募された方は作品を作り上げるまでに多くの苦労をされたと思います。
応募作品には優秀なもの(私の力量を超えたもの)が多く、審査には相当の時間を必要としました。惜しくも入選しなかった作品にも、見るべきものは多くあります。たとえば、IDPF EPUB WGでの議論で、私は「いつもそばにいる」と「4 コマ漫画」に言及し、単なる固定レイアウトを超えたマンガの可能性を指摘しました。
今回は、特定のWebブラウザや特定のOSでしか動作しない作品も許容しています。EPUB3(及びCSS縦書き拡張)の実装が成熟すれば、多くの環境で動作することは必須要件になっていきます。 
Javascriptを用いた作品については、私の意見により審査基準が厳しくなっています。すなわち、EPUB閲覧環境が整ったときでもHTMLとCSSだけで可能な魅力を提供していることが必要と考えています。Javascriptを多用した応募作品にとっては不利になったかもしれません。
このコンテストは来年にも開催を予定しています。しょせん、応募する側も、審査する側も、EPUB3のための人柱です。EPUB3を進歩させるため、また多くの人が応募してくれることを期待しています。今年は選にもれた方も、落胆せずに捲土重来を期してください。
最後に、このコンテストを主催し、賞品も提供していただいたイースト株式会社にお礼を申し上げて結びとします。

 ↑ iPad2の刻印                            ↑ 受賞者の小川さんとイーストの関係者

epubcafe賞 珈琲新聞 Yuki.Mさん

2011/08/01 4:38 に 下川和男 が投稿   [ 2011/08/08 21:45 に 押山隆 さんが更新しました ]

HTMLとCSSで複雑なレイアウトを持つ新聞の誌面を表現した作品です。固定レイアウトでありEPUBの特徴であるリフローに対応した作りではありませんでしたが、縦書き、段組、ウェブフォント、SVGなどEPUB3の新しい表現を多く用いて作成したデザインは本格的なもので、熱意を感じました。
epubcafe award - "A coffee newspaper " created by Yuki.M
The work explores the newspapers' potentials with various layouts by using HTML and CSS. As the fixed layout is used, one of EPUB advantages is killed. However, the other EPUB 3 features such as vertical-writing, multiple-column, web fonts and SVG are utilized well. This work demonstrates professionalism and passion.
※サイズは新聞原寸大を指定しています。表示の際は23インチワイド以上のモニターの利用をお勧めします。WikiMediaコンテンツを利用しています。

Macで文字が寝ますが、縦書きのテキストでは、フォントが文字の向きやグリフ変換に関する情報を持っていない場合に、横書きのグリフが表示されたり、文字が時計回りに90度回転して表示されたりすることがあります。フォントの持つ情報の利用やブラウザ側での処理については現在CSS WGで議論が行われています [1]

[1] http://dev.w3.org/csswg/css3-writing-modes/#text-orientation

フォント込みで19MB ⇒ http://db.tt/ZDMrY2x からダウンロードしてください。

ユーザ賞 涼州詞 小川真樹さん

2011/08/01 4:37 に 下川和男 が投稿   [ 2011/12/25 17:26 に更新しました ]

漢詩を原文、書き下し文、繁体中国語、簡体中国語など様々な方法で記述した作品です。特にマークアップの確立していない漢文訓読を表現するための試行錯誤を評価します。他にもピンインによるルビ、縦横の混在するテキスト、割注など短い文書の中に様々な試みが詰まっていました。-epub-ruby-position:inter-characterを実装したビューワがあれば、ピンインをbopomofo(中国式のルビ)で表現できたかもしれません。

User award - "Ryosyushi" created by Maki Ogawa
The work explores various ways to express Chinese poetry by the original texts, initially produced work, traditional Chinese and simplified Chinese. Japanese (Kun) reading, which is not supported by regular markups, was explored by try and error, it's a very impressive effort. In addition, several trials such as Pinyin ruby, mixed text of vertical and horizontal writings and let-in note are demonstrated in the short sentence. If there is a browser which enables "-epub-ruby-position:inter-character", Pinyin ruby can be simply represented by bopomofo (Chinese ruby).

※Safari5.1以降またはChrome 13以降で見てください。

※ごんぎつねに用いられた手法を使って、訓点つき漢文の分かりやすい読み上げを、審査員が作りました。 以下をSafari5.1以降またはChrome13以降で開いてください。

http://www.asahi-net.or.jp/~eb2m-mrt/epub/Liangzhouci/reader.html   ← Voice-over version

【作者からのコメント】
ユーザ賞をいただきありがとうございます。イーストさんでのEPUB3の説明の中で割注と漢文の返り点はまだ実現できないとありましたが、それにあえてチャレンジした、という作品に"結果的に"なりました。実際のところは、最初はルビの表現を応用すればちょっとした返り点もできるかなぁ、という遊びから入って、その後いじっているうちに「あ、再読文字もできるかも」「割注もできるかな?」という風に継ぎ足していって、最終提出版に至りました。漢文・漢詩は高校の授業程度ですので不十分なところは多いと思いますが、多少は漢文の文化に貢献できたかな?と思えまして、自己満足ですが、受賞できたことも含めて満足しています。HTMLはTableタグ程度しか知らなかったのですが、今回の応募で、多くの知識を得ることができました。

【EPUB漢詩選(2011.12追加)】 Chrome、Safariで見てください。

OnDeck賞 OnDeckインタビュー記事 大西 隆さん

2011/08/01 4:36 に 下川和男 が投稿   [ 2011/08/08 21:50 に 押山隆 さんが更新しました ]

メディアクエリを利用して、デバイスの縦幅に応じた複数レイアウトを実現した作品です。縦書きで制作された記事と横書きで制作された記事があります。それぞれのレイアウトが読みやすく作られており、雑誌としての表現に可能性を感じました。段組されたコンテンツを書字方向にスクロールさせたり、グラデーションで画像を背景に溶けこませるなど、細やかなデザインテクニックも駆使されています。
OnDeck award - "An OnDeck interview" created by Takashi Ohnishi
The work provides multiple layouts by using "media queries" depending on the various heights of the device viewport. Articles with vertical-writing and horizontal-writing are created respectively. Each layouts can be read easily and shows that EPUB 3 has large potentials for magazines. The work also provides various sophisticated techniques to demonstrate that multiple-column contents can be scrolled toward the writing direction and gradation images can be used as the background.

【作者からのコメント】
EPUB3コンテストOnDeck賞をいただき誠にありがとうございます。今回の作品はInDesignで一度レイアウトをして、それをcssでできるだけ再現するという手順で作ったのですが、InDesignとWebkitでの組版の実装の違いで苦労しました。横組版を完成させた後、縦組版に挑戦する際に「htmlテキストは横組と共通化させる」というルールを自分で設定したのですが、英数字はともかく、引用符や小数点など縦組専用の約物をどう表示させるか相当悩みました(今回の方法が正しいかどうかわかりませんが…)。EPUB3に関してはまだまだ勉強不足なのですが、他の応募作品を拝見しても想像以上に多様な表現が可能だと実感しましたので、今後も何らかの形で関わっていければと思います。

村田真賞 ごんぎつね 川幡太一 さん

2011/08/01 4:33 に 下川和男 が投稿   [ 2011/08/09 0:24 に更新しました ]

朗読とテキストをSMILで連動させ、読み上げ部分が自動ハイライトします。テキストの任意の個所の読上げも可能です。ブラウザで実装されていないインターフェイスはスクリプトで補う形で実現しています。DAISY(視覚障害者向けデジタル録音図書)再生ソフトの持つ典型的な機能をブラウザで実現していることに驚きました。このようなコンテンツが手軽に制作・閲覧できる未来に期待したいです。同氏の「SVG+SMILによる新羅・義湘『華嚴一乘法界圖』の読み上げ対応化」もSVGへの音声同期という新鮮な技術を使っています。

Makoto Murata award - "Gongitsune" created by Taichi Kawabata
Reading and text of this work are synchronized with SMIL and the part of the text in reading is being highlighted simultaneously. Any specific texts can be read. The part where the browser does not support is complementary enabled by JavaScript. The work is impressive because the traditional DAISY functions are now represented by the EPUB 3 enabled regular browsers. Hopefully such rich contents can be created and viewed without large efforts.
In addition, his another work -"Kegon-Ichijyohoukai by Giso, Shiragi" enabled by SVG and SMIL demonstrates synchronized reading with SVG.

制作協力:ATDO 持田怜香(朗読)  濱田麻邑(DAISY版作成)

ごんぎつね ⇒ http://www.meadowy.org/~kawabata/gongitsune/reader.html

華嚴一乘法界圖 Kegon-Ichijyohoukai by Giso, Shiragi ⇒ http://bizpal.jp/epub/contest01/00044
音声付 EPUB3対応 草枕 ⇒ http://www.epubcafe.jp/download/samples/kusa3audio

1-4 of 4