pekolog

Webで「新しい本」が作れるサイト BCCKS にて、Text Layout Frameworkを使ったブックビューアを作ってみました。

BCCKSとは、ユーザが写真や文章を入力してブラウザで読める本（ブック）を作ることができるサイトです。

BCCKSではオープンから今までの間HTMLとCSSを使ったビューアを提供していたのですが、より表現力の高いブックを作れるようにするためのテストとして、Flashを使ったビューアを試作することになりました。

Flashで動的テキストを扱うコンテンツを作る方法は色々ありますが、今回は最もパワフルな環境でどこまでのことができるか挑戦してみるために、Adobe Labsでベータ提供されているText Layout Frameworkを使うことにしました。

Text Layout Framework（以下TLF）についての説明をAdobe 上条さんのブログから引用しますと

Flash Player 10 から新しいテキストエンジン （Flash Text Engine - FTE） とそれを扱うための flash.text.engine という新しいパッケージが追加されていますが、Text Layout Framework はその API 上に構築されたフレームワークです。高度なテキストのレイアウト機能や、テキストの選択、編集機能などが実装されています。また、マークアップ形式のデータを扱うことができます。

というものです。

ここで言うマークアップとは、書式付きテキストを表現するTLF独自のXMLのことです。実際のXMLは、たとえばAdobe Labs - Text Layout Editor Demo Applicationを開いて適当に編集し、最下段のMarkup…ボタンを押してみてください。（ただし、最新のFlex SDKでは若干書式が変わっているようです）

今回の目標は「HTMLを超える表現力」だったわけですが、そういったテキストを記述するためには当然HTMLは使えないので、このマークアップ形式をそのまま使わせてもらうことにしました。

具体的な作業の流れは

1. マークアップエンジニアに上記のページで文字組みをしてもらいます。
2. 得られたTLFマークアップをそのままデータベースに入れてもらいます。
3. BCCKSのブックデータをXMLで出力するアプリケーションを書きます。
4. 上記XMLを読み込み、写真とTLFマークアップを描画するFlashを作ります。

という感じでした。

このようにして作られたFlashビューア対応ブックが以下の4冊です。

従来のWebでは困難だった「美しい縦書き」のデモとして作ったブックです。ページ下段の注釈では、数字を縦中横（＝縦書き中の横書き）にしてみました。

以前からあるブック「GMemo」の焼き直しブックです。Webで見たことが無いテキスト表現が実現できたと思います。もちろんテキストは選択できます。

BCCKSが将来やりたい、漫画タイプフォーマットのテストとして作りました。

こちらも将来やりたい、BBSタイプのテストです。リンクドコンテナと呼ばれる機能を使いまくっています。

フォントを埋め込んであるので、どの環境でも綺麗に表示されます。
（この部分の制作で助言いただきましたAdobe様、ありがとうございました！）

制作の細かい話はここに書ききれないので、別の機会に詳しくしたいと思います。

Adobe ケーススタディー：Flash Player10とText Layout FrameworkがBCCKSにもたらす可能性

タグ: BCCKS, TLF

この投稿は 2009 年 7 月 3 日 金曜日 6:53 PM に dev, flash カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 コメントを残すか、ご自分のサイトからトラックバックすることができます。