web Archive

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

■9月末から10月にかけて、女子美の一年生後期授業「コンピュータ実習B」を担当しておりました。学生は2組80名超、週4日なんで講師も4人2日づつというハードな授業が先日なんとか終了したところですが、この授業のなかで、現在BCCKSがクローズドベータで運営しているオンデマンド出版サービス「bccksBunko（ブックス文庫）」を使った作品集を使う課題をしましたのでせっかくなのでレポートしておきます。

ブックス文庫についてはサイトのほうを見てもらえればわかりますが、「文庫サイズモノクロ48ページ、1冊525円から出版可能！！」という、いわゆってしまえばいわゆるオンデマンド出版サービスですね。電書だ自炊だとやたらと「紙の本」がおとしめられがちな世の中ではありますが、BCCKSの場合は「もともとオンラインでコンテンツをつくれるサービスだったのに、いまから紙をはじめる」という、時流の逆行ぶりがただごとではないサービスとして提供されようとしているわけです。ちなみにクローズドベータは第一期モニターが受付完了していて、今後も時期をみて増員されたりするみたいです。今回はBCCKSさんに授業課題での使用をご理解いただいて特別にモニター参加させていただいています。

ブックス文庫むけの課題としては今回、学生全員に「Looking Into a Drawing」というタイトルで、「ある風景の写真と、その風景の一部をその場でドローイングしてその絵と風景がつながるようにかざしながら撮った写真とを並べる」というルールの写真を制作してもらいました。これは講師の一人である西本太郎さんがアイデアとして紹介してくれたflickrグループの「Looking Into the Past」（昔の写真と同じ地点で撮った写真を公開するグループ）をアレンジしたものです。学生には各自テーマを決めてこのルールの写真を連作してもらい、BCCKSの本として編集してもらってもいますが、ブックス文庫には各自そのなかから1枚づつ提出してもらって、それぞれを見開き裁ち落としのレイアウトで配置した写真集になっております。BCCKS側での編集、出版の作業は助手やら講師やらでおこない、バグに遭遇したりしてバタバタしつつも10/10に出版完了し、10/16には無事に届いて10/18の授業最終日に学生に配布することができました。ちなみに今回160pまでのプランでカラー/カバーありで95冊発注したので、1冊1,922円になりました。

オンラインのブックはこちらで見られます。出版したブックはそのまま販売もできるんですが、授業の本は印税が誰に入るべきか微妙なんで販売はしておりません。

実際に使ってみて、こうした授業だとかワークショップのたぐいなどで、ブックス文庫をアウトプットにするのはかなり使えるんではないかなーと思いました。ブックス文庫の印刷や製本、レイアウトの「本物の本」感については天然文庫を購入するなりして実際に手で確かめてみていただきたいですけど、たとえば１日くらいでBCCKSで作成したポートフォリオやプロジェクトドキュメントが、１週間そこそこ後にこの形ででてくるというスピード感までふくめたコストパフォーマンスは驚異的だなと。授業を構成するうえで課題の最終的な落としどころというのは結構迷ったり困ったりするものなのですが（やりすぎると授業時間内に終わらずそのために出校したりとか大変だったりする…）、その意味でブックス文庫のまとめやすさと仕上がりの充実感はすばらしいものがあります。そのあたりお悩みのかたがいたら検討してみたらいかがでしょうか。

ちなみに今（というか今日まで）開催中の女子美祭の授業課題展示にて、このブックス文庫も展示されているのでお寄りのさいはお手に取ってみてくださいませ。

■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アニメーションに戻したほうがいいかも。
• 動作、アニメーションがぎこちない

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

■iCookpad、なんか思いがけないほど好評のようで、やっぱiPhone / iPod touchで見れてうれしい人がいるんだなーと思ったいっぽう、いろいろ不具合ほったらかしで申し訳ないです。

とりあえず以下を修正しました。

• レシピ詳細ページ
  • コツ・ポイントを表示するようにした
  • つくれぽの数を表示するようにした
  • 手順リストに番号を振り、不要な欄は表示しないようにした

■ちなみにこのブログ関連の情報をアナウンスしたり受け付けたりするtwitterアカウントを作ってみました。なんかありましたらお気軽にどうぞです（ご期待に添えるとも限りませんけども）。

• http://twitter.com/doppac_cc

あとgithubにてソース一式も公開しております。

• http://github.com/dotimpact/iCookpad/tree/master