Accessibility

Adobe ケーススタディー

Flash Player10とText Layout FrameworkがBCCKSにもたらす可能性

株式会社BCCKS

デベロッパー名:

使用製品

Adoeb Creative Suite 4
体験版 | 購入

つぎの条件に合致する他の事例を検索する


製品を指定して検索

プロジェクトの詳細

いつでも自分が著者になれる無料のオンラインサービス「BCCKS」
 

BCCKS(ブックス)とは、株式会社BCCKSが運営している、ネット上に本が作れる利用者参加型のオンラインサービスです。現実社会で本を作るとなるとクリアしなければならない高いハードルがいくつもありますが、「BCCKS」に会員登録すれば、雑誌、日記、コレクト本、写真集、BBS、絵本、書籍など、あらかじめ用意された豊富なフォーマットをもとに、誰でもネット上に無料でクオリティの高いデザインの本(以下、ブック)を作ることができます。見開きで計8ページ単位に広告が入りますが、スタイリッシュなデザインのため、違和感がないどころか、まるでファッション雑誌を見るような感覚を味わえます。

作成した「ブック」はインターネットを通じて誰でも読める点も特徴の1つです。書評の書き込みも可能なので、ただ見るだけとは違うユーザ同士のコミュニケーションが可能になっています。また、ブログから「ブック」にダイレクトにアクセスできる専用のブログパーツも提供されています。

現在はアルファ版ですが、2008年2月末のオープン以来すでに多くのユーザを獲得しており、これまでに作成されたブックの総数は、公開されているブックで約3,000冊、ユーザーが編集中のブックも含めると10,000冊にのぼります。フォトアルバム的なものから、日記、小説まで個性的で多彩なジャンルのブックが作成され、人気のブックがメディアに紹介されたり、書籍化されるなど注目を集めています。他のサービスとのコラボレーションも積極的に行なわれており、リトルモアと共催の「写真公募展」や、フォントでおなじみのモリサワとも「字組広告公募展」を行っています(2009年6月18日~9月18日)


ジャンル毎に好きな本が探せる。企業や出版社によるオフィシャルブックも読める

アクセスされた方は、BCCKSがFlashコンテンツではないかと錯覚するかもしれません。実は現在のBCCKSはHTMLベースで構築されているのです。 そのBCCKSが、Flash Player 10 とText Layout Frameworkの機能を駆使し、より高い表現力と可能性を秘めた媒体への変貌を模索し始めました。

今回はFlash Player 10 とText Layout FrameworkがBCCKSにもたらすであろうさまざまなメリットについて、代表取締役の山本祐子氏をはじめとして、BCCKSに参加するプロジェクトマネージャの高橋真希子氏ならびにマークアップエンジニアの廣岡孝弥氏、チーフプログラマーの廣田幸将氏、プログラマーの吉川佳一氏らに伺いました。


山本祐子氏

高橋真希子氏

廣岡孝弥氏


廣田幸将氏

吉川佳一氏
 

HTML、CSS、JavaScriptからFlashへ

――今回「Flashになる」というお話なんですが、そもそもFlashではなかったのですね
 

廣岡氏
実はCSSやJavaScriptなどを駆使しつつ、ずっとHTMLベースで作って来たんです。それが、HTML版はいろいろコストがかかって大変なんですよ(苦笑)

――どんな部分で苦労されたんでしょうか
 

廣岡氏
デザインはCSSで制御しているのですが、BCCKSがサポート対象にしている4種類のブラウザに対応しなければいけないため、ブラウザに応じてCSSを切り替えています。CSSの“クセ”みたいなものも結構あるので調整には苦労します。また、BCCKSはWebのメディアとしては珍しくフォーマットによって1ページあたりの文字量が決まっているので、どの環境でも1ページに表示する文字数を同じにするための配慮など、細かいところにすごく気を遣うんです。


HTML版では4種類のブラウザにあわせて4種類のCSSを用意している

吉川氏
そうなんですよね。普通のサイトならモダンブラウザは差がでないという認識だと思うんですが、BCCKSが特殊なのは、文字のピクセル単位のそろえまで、全ブラウザで一致してないといけないことなんです。そこで字間や行間、上下左右のマージンなどを4種類のCSSで分けて、ブラウザごとに振り分けることで、フォントが違っても、レンダリングエンジンが違っても、極力同じ文字のあふれ方をするように調整してました。それがまずひとつ大変なところですね。

今回開発したFlashビューアはまだ正式にリリースしているものではないのですが、Flashのテキスト機能と、Flash Player 10の機能アップのおかげで、従来のHTMLでレンダリングするのと同じようにちゃんと写真が読み込めて、文字のハンドリングも可能になっています。

そこで、BCCKSが抱えていた問題の解決と、新たなサービスの可能性を探るために、Flashによる新しいブックビューア「BCCK Viewer」を開発しつつ、複数の参加者の投稿で作り上げる「BBSブック」、挿絵や注釈が共同編集できる「文芸書タイプ」のブック、ユニークなフォントが利用できる「漫画タイプ」のブック、新しい表現方法を追求した「GMemo」 の焼き直し版の4種類のブックを試作してみました。今、Adobe LabsでBeta提供しているText Layout Frameworkを活用して、文字のハンドリングの大半を行っています。


Text Layout Frameworkの編集画面


Text Layout Frameworkの編集画面


ビューアをFlash CS4で開発中の様子

――具体的にはどんなことが可能になったのですか
 

吉川氏
今回、文字のレンダリングには、Text Layout Frameworkごしにflash.txt.engineを使っています。Flash Player 9以前のプレーヤーのテキストレンダリング機能ですと、HTMLとCSSをそのまま置き換えるには少々機能が足らず、なかなか思ったようなレイアウトの実現が難しかったんです。しかし、今回のバージョンアップで相当パワーアップしましたので、CSSでのレイアウトをそのまま置き換えるだけでなく、それ以上のこと、例えば、縦書き、マルチカラム、縦中横といった複雑な文字組みをWeb上で表現することが可能になりました。おかげで新規開発にかかる負担を減らすことに成功しています。

テキストのフォーマット情報ですが、今までCSSで持っていたフォーマット情報は、Text Layout FrameworkのXMLマークアップをそのまま使っています。それをBCCKSのデータベースにそのまま格納したり、ブックを読み込むときのXML中にそのまま埋め込んだりしているので、ただ単にサーバのデータベース上にXMLを流すだけで、すぐにリッチな見せ方ができるようになっています。さらにLinked Container機能により、複数のボックスをつなげて一つのボックスのように扱えるようになった点も新しいです。エディタが整い次第リリースしてゆきたいと考えています。


Text Layout FrameworkのLinked Container機能によるレイアウトの1例


テキストを流しこむだけでユニークなレイアウトが実現する

縦書きと共同編集を実現する「文芸書タイプ」のブックフォーマット

――Flash Playerが10になったために可能になったわけですね。ではバージョンアップ予定のサンプルブックでどんなことが可能になるのか教えてください
 

廣岡氏
例えば「文芸書タイプ」のブックは、小説やエッセイを書くのに適した、縦書きの文庫本タイプのブックフォーマットです。見開きをまたいでテキストが左右に分かれているのですが、Text Layout FrameworkのLinked Container機能を使ってつなげているため、テキストをまとめて流し込んだり、選択、コピーなどが可能です。


文芸書タイプのブックフォーマット


文庫本を開いたようなリアルなデザインを再現


注釈や挿絵を共同編集することも可能になる

吉川氏
以前は一つのボックス内に一つのテキストが対応して流し込まれるというスタイルでしたが、今回は複数のボックスをグルーピングして連結させ、連結したいそれぞれのボックスに同じ番号を割り振ることで、まるでひとつのボックスに流し込んでいるかのようにテキストが流れ込む仕組みにしました。特にこのような文芸書タイプのブックの場合、文字を入れて、あふれたら自動的に左のページへということができるので、編集が非常に楽になります。

今までは「このフォーマットは文字数がこれくらいだから、1ページ中で語る内容もこれくらいかな」と内容を制限してしまったり、フォーマットを変えると見栄えが悪くなるなど、既存のフォーマットにしばられた編集をしなくてはいけませんでした。しかしLinked Container機能によって、ボックスの数による制限やしばりがなくなり、ボックスがひとつしかないフォーマットとの互換性も生まれました。将来的にはブック同士に限らず、他のウェブサービスとの連携の可能性もあると思います。フォーマットがあるというのがBCCKSの良さであると同時に制限のひとつでもあったのですが、その制限だけ取ることができたと感じています。

廣岡氏
ちなみに現在は一つのブックは一人でしか編集できませんが、将来的には共同編集ということで、1ページ内で挿絵や注釈をなどをエレメント単位で解放し、他のユーザと共同編集できるようにする予定です。画像にしても、従来は画像を配置するための専用のボックスが用意されている必要がありましたが、Text Layout Frameworkではインライン画像が使えるため、文字ボックス内に画像を配置することも可能になりますね。

将来的には携帯からの投稿も想定した「BBSタイプ」のブックフォーマット

廣岡氏
コラボレーションできるブックも計画中です。例えば次にご紹介するのは「近所のお店で働くかわいい看板娘の募集をするマガジンブック」という形態を想定したBBSタイプのブックで、見開きページが複数のユーザの投稿によって構成されるスタイルです。


bbsタイプのブックフォーマット例


空いているスペースに投稿してもらう


完成した状態


バラエティに富んだフォントが利用できる

廣岡氏
画像と文章が入る場所は決まっていて、情報を募集し、誰かが投稿する。するとどんどんエリアが埋まり、全部埋まったら完成です。Flashの機能を使って図形などで画像をマスキングして形を変えたり、文字の切り崩しが可能なテキストエリアを用意して見せ方に変化をつけられます。今までのBCCKSのフォーマットは、写真1点とキャプションという組み合わせで非常にシンプルな構成が多かったんですが、雑誌のように多彩なエレメントで構成できます。

吉川氏
テキストがシェイプに回り込んでいるように見えますが、これもLinked Container機能で、実際は細かいテキストボックスがたくさん用意されていて、リンクすることで回り込みを実現しています。

高橋氏
将来的には、ケータイで写真を撮って、メール本文にテキスト打って送信すると、あるエレメントに写真やテキストが流し込まれて、みんなでページを作るみたいなものが考えられるようになりますね。

――すると、さらにこれをプリントして、紙物にするみたいなことも可能になりますね
 

廣田氏
今までのWeb版ですと、画像の解像度がどうしても出版物にするには足りないんですが、Web版とは別に印刷用に新たにリデザインされたフォーマットを用意することで、印刷に最適なフォーマットで出力するというようなことは計画中です。

「漫画タイプ」のブックフォーマット

高橋氏
漫画のような表現が可能なブックフォーマットも計画中です。漫画ではよく擬音が登場しますが、通常のフォントでは表せないようなデザインですよね。Flash化することによってこのような擬音の文章を自由度高く組んでいくことも可能になるのではと考えています。


漫画家気分が味わえる「漫画タイプ」のブックフォーマット


「文芸書タイプ」同様、リアリティが追求されたデザイン


擬音は将来、Flashベースのエディターで作ることを想定している

ユーザが自由にレイアウトできる新しいスタイルのブックへの展開も

廣岡氏
さらに、日記タイプのブックフォーマットを用いて現在公開中の「GMemo」のデザインを再構成し、かなりデザインの自由度を高めたバージョンも用意してみました。


現在公開されているGMemoのレイアウト


テキストに自由度をお持たせた焼き直し版GMemoの例


エリア全体を使った焼き直し版GMemoの例

吉川氏
今回、Text Layout Frameworkの機能を手で打ち込んで、文字ごとの色、書体、サイズ調整やベースラインシフトを駆使してレイアウトをつけて、再構成しています。日記の内容は同じですが、これまでにない新しい表現を実現しています。

廣岡氏
あくまでもサンプルなのでどのように実装するかという現実的な部分まではまだ落とし込めていないのですが、このようなデザインが初期設定されたフォーマットを用意し、それをユーザが選択した1部分だけフォントを変えるとか、好き勝手に見栄えを変えられるフォーマットが考えられます。

廣田氏
今後はユーザが自分自身の感覚でデザインすることも夢ではないかもしれません。

Flash化すると、ブログパーツも変わる

廣岡氏
以上が新しいブックフォーマットですが、Flash化によってブログパーツも新しくしてみました。これまでのブログパーツは表紙の画像1枚で、クリックするとBCCKS内のブックビュワーにジャンプするというものでしたが、新しいブログパーツはスクリプトを埋め込めばそのままその場でブックが表示できます。ちっちゃな本がブログの中にあるような感じですね。

吉川氏
しかもマウスオーバーで全ページがめくれて、文字は小さいけれども、そのままブックが見えちゃうんです。Flashだから単にスケールを小さくすることでできているわけですが(笑)

――ということは、今後ケータイからブックが丸ごと見られることも考えられるわけですね!
 

高橋氏
ケータイにFlash Player 10が実装されれば(笑)

すばやく写真をアップロードできるAirアプリ「BCCONDER」も開発

吉川氏
HTMLからの乗り換えという流れの中で、もうひとつ開発したものがあります。それがAirアプリの「BCCONDER(ブッコンダー)」です。これまでのBCCKSのビューアでは写真のアップロードもHTMLのフォームから行っていたので、レイアウトと構成を考えながら1ページずつ調整できるというメリットがある一方で、大量に一度に作りたい人にとっては、選択操作を何度もすることになるという声もありまして。それを解決するために、写真を簡単に読み込んで、まとめてアップロードできるアプリを開発したというわけです。アップロードが簡単であればあるほど、いろんな人が参加しやすくなりますし。

――「ブッコンダー」というネーミングはもしかして……
 

吉川氏
「このブックにぶっこむかー」という(笑)

廣岡氏
自分のブックのリストから写真を追加するブック・ページフォーマットを選び、自分のPCのフォルダから写真を読み込んで送信すると、BCCKS上のブックに写真が配置された状態になります。ローカルのテキストファイルをドラッグ&ドロップで入れることもできるので、画像とテキストを同時にアップロードすることもできます。

――アルバム作りには最適なツールかもしれないですね
 

高橋氏
どんな人でも手元にある写真とテキストを入れて簡単にブックが作れるツールです。将来的にはローカルの環境でもう少しハードな本の編集自体ができるよなAirアプリや、Webブラウザ上でも今の編集モードに代わる、Flashベースの編集モードなどをを開発する予定があります。


「BCCONDER」のアップロード画面。MY bcckからアップロードしたいブックを選択し、希望するフォーマットめがけてファイルをドロップする


「BCCONDER」でアップロードしたブックの例

スタイルの変換部分は独自に策定・開発

――制作にあたり、BCCKS独自といえるような活用方法があったらご紹介ください
 

吉川氏
Flashビューアへの移行にあたり、HTMLとCSSで構築された既存サービスと、新しいサービスの両方を一定期間平行して提供できないといけないのですが、flash.txt.engineはCSSをそのまま解釈することはできないようでした。にも関わらず、今なんとなく両方ちゃんと見えるようにしています(笑) これはどういうことかというと、CSSでスタイルされたテキストをパースして、Text Layout Frameworkのマークアップに変換するという仕組みを新たにPHPで書いたからです。

具体的には、PostageSQL上にブックのCSSクラス名を要素ごとに格納し、そのクラスの定義を単一のCSSファイルとして保存し、そのCSSファイルをパースして、クラス名に対応するCSSコードを得て、flash.txt.engineのXMLマークアップに変換するという流れです。

ビューア自体は非常に単純な構造なので難しい点はなかったのですが、この既存サービスの移行をどうするかが最大の難関であり、今回時間かけたところです。なお、ビューアの開発にはFlex Builder 3を使っています。

――なるほど。InDesignを活用されているとも聞きましたが、どういう形でデータを渡しているのですか
 

廣岡氏
実はBCCKSはInDesignでデザインされてるんです。InDesign用に用意したJavaScriptを使って、エレメントの情報を書きだしてシステムに取り込んでます。(「Adobe InDesign CS3がつなぐバーチャルとリアルの世界」参照)


InDesignを使ってデザインし、データをインポートするときの様子

――あらためてFlash Player 10とText Layout Frameworkの導入効果をお伺いします
 

吉川氏
ブラウザごとにCSSをチューニングするなど、多様なブラウザへの対応コストの削減が可能になったことや、ビューロジックを明確に切り離すことができるようになったため、設計の簡略化が見込めたことですね。さらにflash.txt.engineの表現力により、従来のWebページでは実現が難しかったテキスト表現の可能性も見えてきました。これは「ブック」を作る上で大きなメリットだなと。また、Flash化によりブログパーツにも幅が出せるという利点もあります。

――Flashビューアに置き換えた場合、開発およびメンテナンスにかかるコストはどの程度削減されると思われますか?
 

吉川氏
今回はある程度仕様を決めてからスタートしたということもありますが、Flash版ビューアの開発は数日で終わりました。これからFlashにすることでできる機能と、これまでの構造や良さをどうあわせていくかという企画と検証作業に入りますが、開発にかかるコストは大きく削減されていくだろうと考えています。

これまではブラウザ固有の問題(特にIE6)に悩まされていましたが、これも解消されます。OSの違いに基づくフォントの違いという問題が残りますが、これはフォントの埋め込みで解決できると考えていますので、これまで感じていたストレスを10段階の「イライラ指数」にすると、“8”から“2”まで下がりそうです。

――新しいビューアのリリースはいつ頃になりそうですか?
 

高橋氏
「BCCONDER」は24日にリリースしていますが、その他については、さらにブラッシュアップを重ねてからのリリースとなります。公開が決まりましたら改めてアナウンス致しますので、もうしばらくお待ちください。

――ちなみに、スキルアップや情報共有はどうされているのですか
 

廣田氏
みんなそれぞれ違う会社に勤めているので、週に2日集まる日を決めて、その日は丸1日中顔をつきあわせて開発するんですね。その際にあーだこーだ言ってますね。

吉川氏
動かない、わかんないっていうのを自分の担当かどうかわからない状態で投げたりすると、誰かが答えてくれます。僕がFlashの質問をすると廣田さんが教えてくれたりするんです(笑) あとはお互いの「tumbler」をチェックして、何に興味を示しているのか把握したりしてます。

――ということは、開発のみなさんはBCCKSの社員というわけではないのですね
 

山本氏
違いますね。現在Webサービスを取り巻く現状を踏まえ、まずはできるだけミニマムな形から始めたいと考えました。そこで、はじめに賛同者を募り、みなさん手弁当で参加していただくかたちでスタートしています。企画、デザインスタッフは常駐していますが、それ以外の人たちは本業もありますので、週に2日ここに集合して、顔をつきあわせて開発しています。それ以外はメールを使いながら情報共有しています。

――つまりバーチャルなスタイルということでしょうか
 

山本氏
そうですね。バーチャルな形に近いです。メールで打ち合わせをして、 会議をしたら非公開なBCCKSにまとめて共有しています。イベントが近くなってきて、詰めなきゃ行けないみたいなときには、みんなで時間をやりくりしながら集まってくるという感じですね。

――お忙しいところありがとうございました

 



ご自身の体験談を紹介してください。 アドビカスタマーサクセスプログラムに参加.