先ほど（2013/02/26）、PictTweet / PictTweet Plus!（v5.1）をリリースしました。今回のアップデートは、3/5 に切り替えられる新 Twitter API への対応です。旧バージョンは 3/5 で利用できなくなるため、お早めにアップデートしてください！
このアプリ、最初のバージョンは 2009年で、当時はまだ Twitter もこれほどまで流行っていなかったのと、Twitter アプリもそれほど無かったので斬新だったと思いますが、今となってはアプリの１機能ぐらいのものになってしまいました。新 API への対応も簡単ではなかったので AppStore から取り下げようとも思ったのですが、それでも、このアプリからツイートしてくれているユーザーが毎日何人かいらっしゃったので、なんとか対応してみました。ぜひお試しください！
この記事は HTML5 Advent Calendar 2012 の18日目の記事です。
2012 年の Web デザインで流行ったのは、「パララックス（視差）スクロール」（Parallax Scrolling）たったと思います。企業のイベントページなどで積極的に使われていました。パララックス・スクロールがどんなものかは文章で説明するよりも実際に見てもらえばすぐにわかるかと思います。
ただし、それは PC のサイトばかりで、スマートフォンではあまり無かったと思います。海外では Nike、日本では CA モバイルのページぐらいでしょうか。ちゃんと動くライブラリもなく、CA モバイルのページを手がけられた html5j.org 主宰の白石さんは 独自のライブラリを開発されてました。
パララックス・スクロールは、ページのスクロール量に応じて各部品のパラメータを変化させてアニメーションを実現するのですが、タッチデバイスの場合、指を離してから一定時間スクロールが継続する「慣性スクロール」の間、スクロール量を取得できるイベント（’onscroll’）が発行されず、その間、部品のパラメータを変化させることができません。
前述のサイトでは自前で慣性スクロールを実装し、その間のスクロール量を取得できるようにして、パララックス・スクロールを実現しています。
iScroll は、CSS の position: fixed; が使えないスマートフォンのためのライブラリで、ヘッダ／フッタを固定してスクロールできるようにします。このライブラリも、ブラウザが持つ慣性スクロールではなく、独自に慣性スクロールを実装しています。
仕事でスマートフォン向けページを制作する際に iScroll を使うことになりコードを見ていたら、慣性スクロール中にスクロールバーの描画をしており、そこで座標を取得できそうだったので、試してみたところ意外と簡単にできてしまいました。
iScroll からページのスクロール量（座標）を取得するために、独自のイベントを発行する処理を追加して座標を渡すようにしました。その処理で jQuery を使っているため、iscroll.js の読み込み前に jQuery を読み込んでおく必要があります。
次に座標の取得ですが、iScroll のソースコードの下記の箇所に、独自のイベントを発行する処理を追加します（iScroll v4.2.5 の 287行目〜312行目）。
_pos: function (x, y) {
if (this.zoomed) return;
x = this.hScroll ? x : 0;
y = this.vScroll ? y : 0;
if (this.options.useTransform) {
this.scroller.style[transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')' + translateZ;
} else {
x = m.round(x);
y = m.round(y);
this.scroller.style.left = x + 'px';
this.scroller.style.top = y + 'px';
}
// ================================================
// send event
$(document).trigger('iscroll', {'x':x, 'y':-y});
// ================================================
this.x = x;
this.y = y;
this._scrollbarPos('h');
this._scrollbarPos('v');
},
iScroll 側の修正は、304行目の１行を追加するだけです。
表現したい内容によって実装方法は異なってきますが、基本的にはページのスクロール量をもとに、各種パラメータを変更することになります。
作ったサンプルはこんな感じです。サンプルコードは GitHub で公開しています。（iPhone でしか確認していません。）
まず、先ほど iscroll.js に追加したイベントを、コンテンツ側のスクリプトで捕捉して座標を取得します。 iscroll/examples/parallax/script.js
$(document).bind('iscroll', function(e, pos){
// pos.y にスクロール量が格納されているので、
// その値を使って、各要素のパラメータを変更する。
});
取得した座標をもとに各要素の位置や色を変更しています。詳しくは、GitHub にアップしたサンプルコードをご覧ください。
世にあるパララックス・スクロール用のライブラリでは、もっと簡単に要素を制御できるような仕組みが提供されていますが、今回はそこまでたどり着けませんでした。ただ、スマートフォンでも Parallax Scrolling を実現できることと、基本的な考え方は示せたのかなと思います。参考になれば幸いです。
先日お伝えした通り、twtr2src の配信サービスを終了しました。また先ほど、データベース内のユーザーデータの削除も完了しました。もし念のため twtr2src と Twitter アカウントの連携を解除したい場合は、アプリケーションを取り消すまたは削除する方法 を参照して Twitter で解除を行ってください。
思い起こせば３年前、@nobi さんの このブログ がきっかけで、ツイートをブログに転載するツールを作ったのが始まりでした。Twitter が流行りはじめの頃だったと思います。
その後メールでの配信に対応し、自分のツイートをブログに載せる「ライフログ」のツールとして多くの方に使っていただくようになりました。しかも、勝間和代さんに紹介いただいたり、ホリエモンに使ってもらったりと、有名になっていくことにとても驚きました（ホリエモンはこのブログでどんだけ儲けたんだろう…）。
その後 Evernote が流行りだしてきたので、直接投稿できるように対応。ライフハッカー系の方に支持いただき、有名なブログや書籍等で紹介いただいたり、Evernote の日本語版公式ブログでも紹介していただきました。
そんなこんなで気づいたら、配信ユーザーが 10000 人を超え、はてブも 1000 を超えるようなサービスに成長していました。その頃から、配信遅延の対応や Twitter API 制限の回避、サーバ負荷の分散などに追われてしんどい時期もありました。
しかし、多くの方から寄付を頂き、サーバの増強だけでなく、モチベーションを維持することができました。寄付いただいた皆様には、改めてお礼申し上げます。
しかし、プログラムがユーザー数増大に対してスケールしない構造で、チューニングもやりつくし、個人が片手間にサービスするものとしては限界に達してしまい、新規ユーザー受付を中止することにしました。そして、Twitter API の変更がアナウンスされ、サービス終了の決断を下しました。
終了のお知らせをしてから多くの方に感謝のツイートを頂き、大変ありがたく思っています。これまでご利用、ご支援いただきありがとうございました。この場を借りてお礼申し上げます。
ogaoga.org では、icotile や PictTweet といった Twitter 連携サービス／アプリをリリースしていますが、新 API の対応についてはまだ未定です。ただ、この２つについては継続してサポートしたいと思っています。
また、現在、iPhone アプリを開発中です。来年の春ぐらいにはリリースできるかなと思っています。このブログやツイッターアカウントでお知らせしますので、ご利用いただければ幸いです。引き続き ogaoga.org をよろしくお願いします。