■依頼いただく縁がありまして、第22回 HTML5とか勉強会で「Processing.jsってなんだ？」というタイトルで発表をしました。こういった発表はひさしぶりだったり準備不足だったのもあり個人的には反省しきりで見ていただいたかたがた（USTやってたのもあとから知りました）にお楽しみいただけか心配なのですが…ひとまず資料を公開しておきます。

• 第22回 HTML5とか勉強会発表「Processing.jsってなんだ？」発表資料
  • ChromeまたはSafariでご覧ください（bccks readerと同じものです）
  • キー(カーゾル←→/jk/np/スペース）でページが進んだり戻ったりします
  • processing.jsのまざったページは最後のとこにあります
  • 宮沢賢治「雨ニモマケズ」のテキストは青空文庫から転載させていただきました

発表内でこのプレゼンシートもBCCKSでつくってます、というようなことを言ったのでやや誤解されてしまったようですが、BCCKSのサービスでプレゼン資料に向いたデータ作れたりするという意味ではないです。Keynoteでつくったページを画像に書きだして、見開きの画像として貼り付けただけですのであしからず（もちろんそういったスタイルをつくることもできそうですが、BCCKSはそういうサービスはしないかな…）。

あと発表の最後におまけで見せたProcessing.jsをページに埋め込むものも僕が勝手に実験としてつくったものなのでBCCKSでそういった機能ができるというわけはない、ということを念を押しておきます。

■ようやく、というほかないのですがようやく、長らく開発していたあたらしいBCCKSで本を編集・出版するためのブラウザ上エディタを一般リリースしました。6月の発表会でのロードマップからはやや遅れつつも、無料ユーザーがだれでも本を編集・発行でき、そうして出版された本をだれでも好きな方法で快適に読むことができる、というあたらしいBCCKSのサービスのコアが立ち上がったことになります。今後も有料出版機能とかプリントオンデマンド機能とか進めていて間に合ってない機能はたくさんあるのですが、ひとまずいろんなかたに本を出版してみていただければと思います。

• http://bccks.jp/
  • BCCKSのサービス概要はこちらのFacebookページがわかりやすいです
• 本づくりの参考書
  • BCCKSエディタで作れる本のフォーマットの紹介や、編集のヒントをまとめた本です。
  • BCCKSエディタをはじめて使うさいに参考になるように、この本は自分の書斎でコピーして編集データをのぞけるようになっています。発行された本と見比べて参考にしてみてください。
• BCCKSでの本の作り方ムービー
  • BCCKSエディタの使いかたをまとめた動画です。やや長いですが、エントリ単位の文章の編集やジャケットの作りかた、発行までの操作を順を追って紹介しているので、エディタの使いかたがよくわからないときは観てみてください。

■僕はWeb用リーダーに引き続きエディタのJavaScriptによるUI一式と編集関連のバックエンドの開発を担当しております。いま世の中にある電子書籍出版Webサービスの多くは（たぶん）ブログエンジンベースで、各ページの編集はいわゆるブログエントリーを執筆するのとほぼ同じUIが採用されていますが、BCCKSではより「編集」という作業にフォーカスするために、むしろTogetterやStorifyの編集画面に近いアプローチで、テキストや画像のエレメントを並び替えたりスタイルを変えたりしながらプレビューページを自分の意に沿うよう変化させていく編集作業ができるエディタUIを果敢にもゼロから構築しました。エディタ画面をみてただけるとわかるのですが、今後エディタ右端に検索ペインが追加され、twitter、facebookほか自分の他サービスコンテンツや、転載許諾されたBCCKS内のエントリを本に自由に取りこめるような仕組みを導入してく予定です。

これまでのBCCKSには直感的に操作できるという意味では非常に優れたエディタがあり、それと比較して今回のエディタに違和感がある方は多いでしょうし、通常のブログエディタのようにテキスト修飾や画像挿入が自由に出来たほうが楽だという意見もありそうで、もちろんBCCKSとしてもこれ以外ないと考えてるわけでもないのですが、縦書きベースのリフローコンテンツをWeb技術で直感的に編集するUI、というのは世の中的にもかなり前人未到で、すぐにでき上がったりしないだろうなとも思っており（最終的にはInDesign on Webでいいのかもしれませんが、縦書きのインライン変換をはじめとする技術的な難関もふくめ開発パワー的に無理なので、今回はとにかくInDesingを目指したら負け、というスタンスで進めております）、ひとまず形になってある程度快適に使えるエディタを仕上げたのでいろんな人に触れていただいて意見をいただければなーと。個人的には先行モニターとしてつかっていただいた suge™ さんの「はじめてHTML覚えて、emacsで書いてはブラウザで確認って繰り返してwebのレイアウトをちまちまいじってた頃の楽しさがある。」という意見に共感しつつ、やや手間はあっても手をかけたデータが「発行」される小気味よさを伸ばしていけたらいいなと思っています。

ちなみにjs的にもDnD API / File API / FormData Post / textareaダイナミックハイライトなどなど、できそうなことはなるべくつっこんだ感じのつくりになっておりますので、試しにでも触っていただけるとうれしいです。

■なんどか版を変えつつご愛顧いただいているtakachin君との共著『Built with Processing』（BNN新社）につづいて、こんどは技術評論社からProcessingの本を出させていただくことになりました。今回も「プログラミングはしらない、むしろ苦手、でもプログラムでできる表現は興味あるし、むしろやりたい」といったかたに向けた入門書となっています。7月15日（あたり）発売です。

• Processing アニメーションプログラミング入門

  • 240ページ 単行本（ソフトカバー） ISBN: 477414715X / 978-4774147154
  • 著者: 田中孝太郎
  • 出版社: 技術評論社
  • 価格: ￥ 3,360
  • Amazonの情報
  • 技術評論社の情報（目次、ページサンプルがあります）
  • Facebookページ
    

Processingの入門書というどうにも狭いジャンルで同じ著者がなんさつも本を出すのにはわりと抵抗感があったのですが、編集さんからのすすめもあり、BwPではできなかったことをふくめ、スタンスや打ち出しを変えた別のかたちの入門書にできないかなというのが個人的なチャレンジでした。具体的には、つぎのような方針を立てました。

• CD-ROMにサンプルプログラムを付属し、未完成のひな形プログラムを読者が修正・追加してサンプルを完成させながらプログラムを学んでいくレッスン形式の構成にする（これは編集さんのオファー）
• 本の最後の段階で、あるていどの規模からなる完結した（「作品」と呼べるくらいの）プログラム作品が完成する
• 各ステップでのサンプルプログラムは、最終的にできあがるプログラム作品の途中段階としてそれぞれで完結したプログラムにする
• プログラムの説明をするためだけの便宜的な章やサンプルプログラムを〔極力）用意せず、すべてのサンプルや解説を最終的なプログラム作品の部分として機能するものとして構成する
• オブジェクト指向を実践的に盛り込んだ内容にする
• 個性的なイラストレーターを起用して、本文図版やサンプルプログラムの素材をたくさん用意して楽しい紙面にする

みたいな感じです。

ゲームプログラム本などではサンプルのゲーム作品をひな形サンプルから完成させていくような内容の入門書がよくありますけども、だいたいは序盤でプログラムの座学をへて、（それとは分離された）実践編にうつる感じの構成のものが多いみたいでした（ちがうのもあったらすいません。教えてください）。そうじゃなくて、「ゼロからプログラムを学びつつサンプルを打ち込んでいると、いつのまにか作品が完成する」みたいな本ができないかなーというのが考えていたところでした。いやそれはさすがにムリなんですけども、ひとつのパターンとしてゼロからはじめてあるていどの規模のプログラム作品を完成させるプロセスが疑似体験できるような内容にはできたかなと思っています。

で、どんな感じのサンプルを作る本かというと、こんな感じです。

• 完成プログラム作品（java applet) – java appletに書き出しているため、OSや環境によっては重かったりするかもしれません

ご覧いただいて明らかなとおりで、今回はサンプルプログラムのキャラクターデザインや本文図版制作などを土壁綾さんに全面的にご協力いただきました。　土壁さんの不思議ビビッドイラストがサンプルや本文に満載なのでこれだけでも新鮮で楽しい本になっております。内容的にもBwPではあまり盛り込めなかった図解を多くしてとっつきやすくしたつもりです。

冒頭の方針を満たすステップの構成とサンプルの内容のすり合わせがかなり大変で、サンプルを修正するとその後のすべてのサンプルに影響するあたりが地獄だったりして（震災の影響も多少あり）、当初去年の夏に出すはずが一年遅れてしまいましたがようやく刊行にたどりつきました。書店でぜひ手にとってみてください！

あと今回実験的にFacebookページを設置してみたので情報共有や質問などにお使いくださいませ（本内の誤記や不具合がもしあったらこちらにお知らせください）。

• 『Processing アニメーションプログラミング入門』Facebookページ

■もう一週間経ってしまいましたが、６月２日におこなわれた「あたらしいBCCKS」記者発表会にご参加いただいたみなさま、UstreamやTwitterでご高覧いただいたみなさまありがとうございました。前回のエントリを書いた時点ではあんまりそういう予定ではなかったんですが、発表会第二部では僕が開発担当している部分（bxmlというフォーマットの中身、BCCKSリーダーの機能などについて）をわりと詳細に紹介しつつ、BCCKSのCTO（今後は共同代表となることも発表されました）たけなかさんとEPUB(3.0)との関係や今後の電子書籍技術の共存のありかたなどについてこうしたい、こうなってほしいという話をしました。当日の発表資料、Ustreamのアーカイブ、Togetterや、いくつかの媒体での記事もまとまっているのであらためてどうぞ。

• 当日の発表資料
  • 第一部、第二部ともに発表資料自体がbxmlのコンテンツになっていて、PCのBCCKSリーダーで見る形になっております
• 「第一部　あたらしいブックスについて」Ustreamアーカイブ
  • 松本弦人さんによるあたらしいBCCKSの概要説明（27分あたり）
  • 開発版iPad/Androidアプリの実動デモ（50分あたり）
  • 開発版エディタによるブック編集、発行、デバイスリーダー同期の実演（1:05分あたり）
  • なぜかメイドコスプレの司会進行（なぜか快快主宰のYONちゃん）

• 「第二部　bxmlフォーマットの互換性と拡張性について」Ustreamアーカイブ

• あたらしいBCCKS発表会まとめ（Togetter）

• 「美しいレイアウトで良い読書体験を」オンライン出版サイト『BCCKS』が新リーダー等を発表（ガジェット通信）
• 電子書籍作成「BCCKS」新サービス、EPUB拡張仕様でページレイアウトを実現（Internet Watch)
• TRANSIT : BCCKS発表会　新しい出版のかたち

■さて、あまりそういう予定ではなかったのに第二部でフォーマットとリーダーの特徴や仕様の話をくわしくしたのは、EPUB3.0の仕様確定が間近なのもあって、電子書籍において「独自フォーマット」「独自拡張」「専用リーダー」といった言葉がそれだけでもういわゆるガラパゴス行きの船のように聞こえてしまうのではないか、と思ったためです（発表そのものも「この発表は『いま、独自規格ってどうなの？』がテーマです」というとこから始めました）。

というわけで、あたらしいBCCKSがイメージする電子書籍を実現するためにつくっている「bxml」というフォーマットが、とくに事実上デファクトとすべきEPUBとどういう関係にあり、どう拡張していて、それはEPUBユーザーにとってどう見えるのかという話が第二部の発表だったのですが、やはりまだ心配なのでここでも説明したいなーと思った次第です。要点でいうと３つになります。

---

（現状の）EPUBの仕様では満足できる組版、ページレイアウトが実現できなそう

■EPUB3.0の中身はHTML + CSS(2.1 + 3.0少々)なので、Webページでなんでもデザインできるという意味ではなんでもデザイン可能なのですけど、「ページネートする」「リフローする」「組版のルールを（最低限）守る」という３つの条件をのせると途端にむずかしくなり、仕様が足りていないのかなというのが実情だと思っています。でしかも、むしろ一般にはこの３条件を満たすもののことを「電子書籍」と呼びたく、商品価値を感じるのではないかというのが前のエントリに書いた僕個人の問題意識です。

もちろんCSSで組版やページレイアウトを実現する仕様はたくさん提案、議論されてるようですし（ページネートについてはどうなんだろう？　印刷CSS系の仕様？　あまり知らないので知ってたら教えてください）、EPUBにもいずれ採択され、リーダーにも実装されていくのは間違いないと思ってるんですけど、現状でどうにかするには拡張するしかないかなと思いました。

なので、EPUB3.0の仕様の枠内でページレイアウトの情報を付加する独自仕様を埋め込む

■bxmlがEPUBの仕様とどこを共有し、どこに独特の仕様をいれているのかについては発表で触れているので発表資料とかUSTアーカイブを見ていただけるとうれしいです。簡単にいうと、

• bxmlでは、コンテンツHTMLがsectionタグ（html5で導入されるドキュメントのセクショニングをおこなうためのタグ名ですな）で文節され、それぞれのsectionに「ページレイアウトスタイル」が指定されていることを前提とする
• 「ページレイアウトスタイル」は、「ページレイアウトCSS」と呼んでいる独自のスタイルシートに指定されていて、BCCKS readerはこのページレイアウトCSSでのレイアウトをもとに、section単位のコンテンツをページネート、リフローしながらレンダリングする

という感じです。現状マークアップの指定やページレイアウトCSSの仕様については固まっていない部分もあるのですが、仕様拡張の方針はこんな感じでいけるのかなと思っています。

なので、bxmlはEPUBとしても読める（予定）

■ここ重要なとこです（というか、「そこ重要なとこなんだからもっと強調したほうがよかったのでは」と発表後に言われました）。bxmlとわれわれが呼んでいるものはコンテナの構造とコンテンツのフォーマット(HTML5)においてEPUB3.0と同一なので、bxml用のページレイアウトCSSと別に、EPUBリーダーでのスタイリングを行うためのCSSを同梱すれば、うまくすればたとえば拡張子を変えればEPUBリーダーでも読めるデータになりうるだろうと考えています。ただ、EPUB3.0の仕様は完全に決まっていないので決まったらあらためて（今後のバージョンアップに関する議論も参考にしながら）すり合わせないといけないのと、実際に読めるかどうかはEPUB（3.0の、しかも挙動が微妙に違うさまざまな）リーダーでの実証を経なければならないですね。なので、現状だと「互換」とは言えないし言わないようにしよう、と思っています。

---

■発表の締めの言葉は「だから…仲良くしていきましょう！」としていたんですけど、bxmlはEPUBが推進しているような電子書籍フォーマットの標準化、ユニバーサル化、オープン化とかを無視するつもりはさらさらない一方、いまの日本語の紙の書籍文化がつちかった組版やレイアウトルール、本を本たらしめるデザインをスポイルしたくないという気持ちが強いというかなり変な独自フォーマットだと言えると思います。世の中には「紙の本のデザインや体験に縛られすぎるのはどうか」的な先進的な意見もすくなからずあるので、ここまで独自wwwな試みがうまくいくのかよくわかりませんし、もっと普通にPDFが勝利、とかWebで無料で広告が勝利、みたいなシナリオもいぜん可能性高いわけですけど、そのへんも含めて仲良くしていけるとよいと思ってます。仲良くしていきましょう！！

■去年の夏ごろから開発スタッフとして参加しているBCCKSのマルチデバイス対応リニューアルプロジェクトでつくっているものが、なんとかようやく発表できる段階となり、6/2の発表会をひかえてそのあたらしいBCCKSでつくられた「本」をPCリーダーで読めるサンプルが公開されました。田中はこのPCリーダーの縦書組版をふくむレイアウトエンジンの実装や、新しいブックデータのフォーマット検討作業、あとサービス側のエディタなどもろもろを担当しております。ていうかまだ終わってないんですけどね。

• あたらしいBCCKSリーダー
  • ※ちなみにWindows環境のかたはできればSafariで、フォント表示設定を「Wndows標準」から変更したうえで見ていただけるとベターです。
  • さらにIPAフォントをインストールしておいたりするとモアベターです。こんな感じになります

計画とサービスの全容については発表会でみっちり発表されるはずなので6/2をお待ちいただければと思うんですけども、僕が担当してる電子書籍リーダーの技術方面については実際に開発にかかわってみて個人的に考えたところもあるので勝手に書きつけておこうと思います。

■電子書籍というものがすでにある音楽や映像の電子流通とやや事情がことなるところに、一般に「書籍」というものに、たんなるデータではなく「データを表象するデザイン」が期待されているという点があります。本質的にはデータストリームである音声や映像などとことなり、書籍はデータとしての内容が必要なのは当然ながらも、その可読性や内容の価値を説得するデザインやパッケージングがしつらえられて初めてそれなりの商品価値が生まれるのであり、もっというと商品価値に相応するデザインやパッケージングがなされた状態のもののことをわれわれは「書籍」と呼ぶことが多いはずです。

この「書籍」なるものにたいする期待に応えるべくいわゆる電子書籍やそのリーダーアプリケーションは提供されなければならないわけですけども、さらに困難なことに「書籍のデザイン」とされるものはそう単純なものではなく、いくつものレイヤーでのデザインが集約されていなければなりません。その最たるものが書籍における「ページ単位のデザイン」と「ドキュメント単位のデザイン」の関係です。このうち「ドキュメント単位のデザイン」については、htmlのマークアップとcssによるスタイリングというある程度枯れたWeb技術があり、現在本命といわれているリフロー型電子書籍フォーマットとされているものはどれもhtml+cssを採用してドキュメントをデザインしていますが、このドキュメント単位でデザインされたコンテンツにどうやって「ページ単位のデザイン」を定義すべきか、という問題については、現状の電子書籍技術およびWeb技術はミドルウェアどころかノウハウも蓄積されていないんじゃないだろうか、ということを僕は今回電子書籍リーダーを作りながら考えていました。Webの世界ではスクロールバーがあれば解決できていたことだからです。

電子書籍にスクロールバーがあったらいけないか、ということについては議論の余地がありますが、すくなくとも現状の「書籍」にたいする期待に添うものとは言えないでしょう。そして、立体物、物質としての魅力をもたない電子書籍にとって、唯一「書籍」としての商品性を主張できるのが「ページ単位でのデザイン」になるはずです。またそれは読書のインターフェイスとしての機能性（どんなデバイスでも最適に読めるとか、文字の大きさが変えられるだとか）もあわせもつ必要があり、しかもレンダリングをWebコンポーネントにおまかせできずドキュメントのパースから画像や文字のプロット、レンダリングまでをすべて面倒見る必要があるため技術的な難易度も高い〔面倒くさい）。電子書籍とそのリーダーにおけるページデザイン／レンダリングはおそらく最も重要な技術になりますが、たとえば現在策定中のEPUB3.0のドラフトを見ても、ページ単位でのデザイン、スタイリングに対する仕様や議論はほとんど出てこないように見えます（そこまで精読してるわけじゃないのであったら教えてください。あるいはEPUBは汎用の刊行物コンテナの仕様なので特定のビューに対する議論はしないみたいな方針なんでしょうか）。

というわけで、あたらしいBCCKSでは、リフローときれいなページレイアウトを両立させるべく、htmlの特定のマークアップパターンで分割されたテキストブロックごとに、版面設定、エレメントのページへの配置スタイルなどのページレイアウトスタイルを定義する独自仕様のスタイルシートを用意する、独自フォーマットを使用することにしました。独自フォーマットといってもコンテナの仕様はEPUB互換なので、EPUBリーダーむけスタイルシートを用意することでEPUBリーダーでも読むことができるものになる予定です。もちろん各デバイススクリーンの寸法や解像度に合わせたページレイアウトを多重定義して、それぞれに最適なページデザインでのレンダリングを行うiPhone/iPad/Androidアプリも開発中です（こっちは僕の担当ではないですが）。

今回開発にたずさわって書籍デザインのキモについてはじめて知ったり実感したことも多いのですけど、本のページデザインというのは、版面（はんづら：ページの中で組版を行う矩形領域）とそこに流れる本文サイズと行間というものをかなり固いルールとしてさまざまな条件を考慮して設計し、文字や写真をこの版面の矩形をなるべく満たすように配置しながら時にはずしたりすることで基調を保ちながら本としてのリズムをつくるところにあるのだそうです。こういうことはできるようにしてほしい、という条件を組み込んでようやくスタイルをテストできるようにしたリーダーをつい先日ご存知スタジオボイスを廃刊に追い込んだ前科二犯のグラフィックデザイナーこと松本弦人さんに渡したところあっというまにできてきたのが公開されてるサンプルブックです。

これを最初に見せてもらったときはテキストが「本」にデザインされるこういうことかーと思いました。この仕組みでの他のデザイナーの「本」がどうなるのかも見てみたいですなー。

まだサービスとして一般公開するには開発の難関をいく山か越えねばならないのですが、ひとまず6/2の発表会をご期待くださいませ！