javascript Archive

■依頼いただく縁がありまして、第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ダイナミックハイライトなどなど、できそうなことはなるべくつっこんだ感じのつくりになっておりますので、試しにでも触っていただけるとうれしいです。

■去年の夏ごろから開発スタッフとして参加している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の発表会をご期待くださいませ！

■iFingerScrollを公開したあと、GmailのiPadビューのペインスクロールが自分のに比べて相当サクサクなのに気付き、どうやってんだろと思ってPCからiPadのUAを送ってソースをちょっと見てみたところ、” -webkit-transform: translate3d “をつかってdivをスクロールさせてるらしいことがわかりました。

ということでiFingerScrollもCSS Transitionでabsoluteの座標を動かすのではなく、translate3dの指定をjavaScript側の制御で動かすように再実装したところ、いい感じになりました。translate系の指定はもともとtransitionやanimation目的でGPUサポートありで実装されてるので、CSS Transition/Animationとして使わなくても速いのかもしれません（憶測）。レガシーCSSのabsolute指定はあくまで指定座標への固定表示用途で考えたほうがよさそうです。

■ついでに前回やってなかったスクロールブロック先頭/末尾でのスプリングアクションというか、ドラッグ中は領域端を超えて引っ張れて放すと戻るアクションも加えてみました。これ単なるよさげエフェクトではなく視覚的に理解しにくいスクロール端（動かないと操作が間違っているのかと思ってしまう）をふるまいで明示するタッチUIの重要な作法になってるのは理解していたんですが、実際にアクションを加えてみてあまりの体験の違いにびっくりしてしまいました。webでiPadUI作るときは必ずこのアクションを入れたほうがよいと思います。

あとtweetie2的なpull reloadコールバックとかもあるとよそうだなと思いつつ、とりあえず現時点で公開しておきます。

• jquery.iFingerScroll-translate.js
• デモ(要iPad,iPhone,Chrome,Safari4)

• つかいかた

   $(document).ready(function() {
    $("#sidebar").iFingerScroll();
    $("#main").iFingerScroll();
  });
  

  など

■先週末会社でiPadで毎日使うWebサービスを想定した1Dayプロトタイピングというのをしていて（そのうちまとめられますがとりあえずYoutubeの動画で様子が見られます）、iPadWebアプリのブラウザモックをつくったのですが、そのとき困ったのが、iPadアプリで見られる左サイドのペインに一覧、右サイドのメインペインに詳細を表示するようなスクローラブルな複数ペインUIをふつうにつくる方法がmobileSafariに用意されてないことでした。そもそもmobileSafariにはスクロールバーがないんですよね。

ブラウザでiPhone風のグラブスクロールを実現するjQueryプラグイン「overscroll」というのを見つけて入れてみたんですがこれでもだめで。調べたところmobileSafariには（スクロールバーがないためか）そもそもscrollTop/Leftプロパティそのものがなかったので、スクロールを実現するにはposition:absoluteでtop/leftを直接いじらないといけないことがわかりました。

先週はモック用にoverscrollベースで全体的にいじってとりあえずしのいだのですが、せっかくなのでまとめなおしたものを公開しておきます。

• jquery.iFingerScroll.js

• デモ(要iPad,iPhone,Chrome,Safari4)

• つかいかた

   $(document).ready(function() {
    $("#sidebar").iFingerScroll();
    $("#main").iFingerScroll();
  });
  

  など

まだネイティブのスクロールUIとはいろいろ違いがあります。

• スクロール端でドラッグを続けた時のラバーバンド的なエフェクトがない
• ドラッグを放したときのアニメーション中に再度クリック、ドラッグしても、アニメーションが終了するまで操作ができない
  • 動作が軽くなるかとアニメーションをCSS Transitionsにしたため、途中で止められなくなっています。jsアニメーションに戻したほうがいいかも。
• 動作、アニメーションがぎこちない

とはいえモックつくったりするには便利なのでつかってみてください。またはもっといいもの教えてください。