javascript Archive

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

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

■いろんなサイトに落書きするブックマークレット – 素人がプログラミングを勉強するブログを見て最初に思ったのはでもべつにマウスで落書きしたくないしなーということで、じゃあiPhoneで使えると便利かもと次に思ってkuさんがあっという間につくった落書きをしたページをTumblrとかに投稿できるブックマークレット javascriper.jsにmobileSafariのタッチイベントを追加しただけの修正を加えてみました。

実際問題としてはもうちょっと処理が早くないとまともに落書きできない感じですが、なんかに使えるかもしれません。

■お試し、登録、forkはひとまず以下からどうぞ。

• http://dl.getdropbox.com/u/103615/bookmarklet.html
• http://github.com/dotimpact/javascripter.js/tree/master

しかしこのiPhone(iPod touch）へのbookmarklet登録の煩雑さはなんとかならんもんでしょうかねー。Safariに追加して同期するのがいいんでしょうけど、bookmarkletなんてそんなたいそうなもんでもないんでもっと簡単につけたりはずしたりできるといいんですが。

• まるごとJavaScript & Ajax! Vol.1
  • 天野 仁史 (著), 舘野 祐一 (著), 川崎 有亮 (著), 小飼 弾 (著), arton (著), 田中 孝太郎 (著), 国分 裕 (著), 山本 有悟 (著), 海野 裕也 (著), nanto_vi (著)
  • ￥ 1,995 （税込）
  • インプレスジャパン

■遅ればせながらではありますが。

インプレスのムック「まるごとJavaScript & Ajax! Vol.1」に記事を書きました。JavaScript関係の錚々たる顔ぶれが記事を寄せるなか、わたくしは例によって飛び道具的なIllustratorのスクリプト関係の記事を書かせていただきました。

ていうか、このネタもずいぶん出涸らしなんですけども…せっかくなのでこのサイトでのJavaScript/Illustratorスクリプト/JScript関係の記事をまとめておきます。

• JavaScript
  • よく考えたらわりと偏在するJavaScript
  • 弾幕WebブラウザBulletSurf
  • 画像くっつきWebブラウザStickyWeb
  • webページの数字をルーズソックス数字に変換するbookmarklet
  • Create Your Own DragonQuest Spell
  • Webページでダイスを振るbookmarklet
  • ニコニコ動画開発者ブログのコメントをニコ動コメント風に流すbookmarklet
• Illustratorスクリプト
  • 「イラレでJavaScript」（Shibuya.js TT#02 LightningTalk)
  • GenekistiScope（Genetic Algorithmで驚き盤の絵を生成進化させるIllustratorスクリプト）
• JScript/iTunesCOM/WSH
  • Recommuni Hacks
  • Amazonからアートワークを追加.js
  • その日聞いたPodcastのログを出力する

■あと身近なところでいうと、最近Z社が制作したNHKアーカイブスのFlashコンテンツ巡　meguruが公開されましたが、これで使われている放送年表の文字データは、元の放送年表テキストに独自のマークアップを施したデータファイルを元に、Illustratorで自動レイアウトしてPNGファイルに書き出すスクリプトを使って作られています（この制作自体には僕は関わっていないですけども）。膨大な文字データが綺麗な書体できちんとレイアウトして表示できているのは、Illustratorスクリプトのおかげというわけです（CS2でのスクリプトのバグっぽい動作のおかげで弊社バイトのアオキ君がうなっていた気もしますが）。

■ RecommuniHacks の続きで、 Recommuniでダウンロードした曲にアートワークを追加 なんてのを作って遊んでいたんですが、これがけっこう楽しくてふつうの曲でもやりたくなったので、Amazonから（アーティスト名とアルバム名で該当すれば）アートワークを追加できるスクリプトを書きました。

blog.bulknews.net で宮川さんがつくってた「 iTunes のアートワークを Amazon Web Services からとってくる 」とおんなじですが、まあActivePerlとモジュールがインストールされてなくても使える、というのが利点かなと。AWSのディベロッパトークン（というのですか）は必要です。 Amazon Web サービス登録ページ で登録すればもらえます。ぼくもさっきもらいました。

だいたいもともとCDDBのアーティスト名／アルバム名だろうからAmazonで引っかからないのも多いし、てきとうに書いてるのでうまくいかないかもしれませんが、とりあえず。

• http://processing.dotimpac.to/index.php?sample%2FJavaScript%2FAddArtworkfromAmazon