先ほど（2013/02/26）、PictTweet / PictTweet Plus!（v5.1）をリリースしました。今回のアップデートは、3/5 に切り替えられる新 Twitter API への対応です。旧バージョンは 3/5 で利用できなくなるため、お早めにアップデートしてください！

このアプリ、最初のバージョンは 2009年で、当時はまだ Twitter もこれほどまで流行っていなかったのと、Twitter アプリもそれほど無かったので斬新だったと思いますが、今となってはアプリの１機能ぐらいのものになってしまいました。新 API への対応も簡単ではなかったので AppStore から取り下げようとも思ったのですが、それでも、このアプリからツイートしてくれているユーザーが毎日何人かいらっしゃったので、なんとか対応してみました。ぜひお試しください！

パララック・ススクロールとは？

2012 年の Web デザインで流行ったのは、「パララックス（視差）スクロール」（Parallax Scrolling）たったと思います。企業のイベントページなどで積極的に使われていました。パララックス・スクロールがどんなものかは文章で説明するよりも実際に見てもらえばすぐにわかるかと思います。

ただし、それは PC のサイトばかりで、スマートフォンではあまり無かったと思います。海外では Nike、日本では CA モバイルのページぐらいでしょうか。ちゃんと動くライブラリもなく、CA モバイルのページを手がけられた html5j.org 主宰の白石さんは 独自のライブラリを開発されてました。

なぜスマートフォンだと難しいのか？

パララックス・スクロールは、ページのスクロール量に応じて各部品のパラメータを変化させてアニメーションを実現するのですが、タッチデバイスの場合、指を離してから一定時間スクロールが継続する「慣性スクロール」の間、スクロール量を取得できるイベント（’onscroll’）が発行されず、その間、部品のパラメータを変化させることができません。

前述のサイトでは自前で慣性スクロールを実装し、その間のスクロール量を取得できるようにして、パララックス・スクロールを実現しています。

iScroll とは？

iScroll は、CSS の position: fixed; が使えないスマートフォンのためのライブラリで、ヘッダ／フッタを固定してスクロールできるようにします。このライブラリも、ブラウザが持つ慣性スクロールではなく、独自に慣性スクロールを実装しています。

仕事でスマートフォン向けページを制作する際に iScroll を使うことになりコードを見ていたら、慣性スクロール中にスクロールバーの描画をしており、そこで座標を取得できそうだったので、試してみたところ意外と簡単にできてしまいました。

iScroll の修正

iScroll からページのスクロール量（座標）を取得するために、独自のイベントを発行する処理を追加して座標を渡すようにしました。その処理で jQuery を使っているため、iscroll.js の読み込み前に jQuery を読み込んでおく必要があります。

次に座標の取得ですが、iScroll のソースコードの下記の箇所に、独自のイベントを発行する処理を追加します（iScroll v4.2.5 の 287行目〜312行目）。

iscroll/src/iscroll.js

_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 を実現できることと、基本的な考え方は示せたのかなと思います。参考になれば幸いです。

リンク

• iScroll
• ogaoga / iScroll [GitHub]
• スマートフォンで Parallax Scrolling するやーつ（iScroll を使って） [jsdo.it]

思い起こせば３年前、@nobi さんの このブログ がきっかけで、ツイートをブログに転載するツールを作ったのが始まりでした。Twitter が流行りはじめの頃だったと思います。

その後メールでの配信に対応し、自分のツイートをブログに載せる「ライフログ」のツールとして多くの方に使っていただくようになりました。しかも、勝間和代さんに紹介いただいたり、ホリエモンに使ってもらったりと、有名になっていくことにとても驚きました（ホリエモンはこのブログでどんだけ儲けたんだろう…）。

その後 Evernote が流行りだしてきたので、直接投稿できるように対応。ライフハッカー系の方に支持いただき、有名なブログや書籍等で紹介いただいたり、Evernote の日本語版公式ブログでも紹介していただきました。

そんなこんなで気づいたら、配信ユーザーが 10000 人を超え、はてブも 1000 を超えるようなサービスに成長していました。その頃から、配信遅延の対応や Twitter API 制限の回避、サーバ負荷の分散などに追われてしんどい時期もありました。

しかし、多くの方から寄付を頂き、サーバの増強だけでなく、モチベーションを維持することができました。寄付いただいた皆様には、改めてお礼申し上げます。

しかし、プログラムがユーザー数増大に対してスケールしない構造で、チューニングもやりつくし、個人が片手間にサービスするものとしては限界に達してしまい、新規ユーザー受付を中止することにしました。そして、Twitter API の変更がアナウンスされ、サービス終了の決断を下しました。

終了のお知らせをしてから多くの方に感謝のツイートを頂き、大変ありがたく思っています。これまでご利用、ご支援いただきありがとうございました。この場を借りてお礼申し上げます。

ogaoga.org では、icotile や PictTweet といった Twitter 連携サービス／アプリをリリースしていますが、新 API の対応についてはまだ未定です。ただ、この２つについては継続してサポートしたいと思っています。

また、現在、iPhone アプリを開発中です。来年の春ぐらいにはリリースできるかなと思っています。このブログやツイッターアカウントでお知らせしますので、ご利用いただければ幸いです。引き続き ogaoga.org をよろしくお願いします。

このたび、twtr2src のサービスを終了することにしました。

Twitter が日本で流行しはじめた 2009年にスタートし、これまで延べ 15000人の方に毎日ツイートをお届けしてまいりました。

今回、Twitter の API 変更により大きな修正が必要であることがわかり、対応すべきか検討しましたが、金銭面やモチベーション維持の点で継続は困難であると判断しました。これまでご利用いただいた方、ご支援いただいた方には大変申し訳ないのですが、ご理解いただければ幸いです。

今後のスケジュールですが、

• 11/21（水）配信停止、ログイン停止。
• 11/30（金）までに、DB に登録された会員情報を削除。
• 以降、順次 Web ページの内容を停止。

となります。

同様のサービスを利用したい方は、下記のサービスがあります。

• ツイエバ
• はてなダイアリー
• Twilog

また、ogaoga.org でリリースしている下記の Twitter 関連アプリ／サービスについては、別途このブログ、Twitter アカウントにてお知らせします。

• PictTweet / PictTweet Plus! （@PictTweet）
• icotile （@icotile）

これまでご利用いただいた方、またご支援いただいた方、この場を借りてお礼申し上げます。ありがとうございました。

iOS アプリの紹介 Web ページにたった１行追加するだけで、ページの上部にアプリのバナーが表示されます。

設置方法は、表示したいページ内に、下記の一行を追加するだけです。

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

<meta> タグなので、<head> 内に記述しないといけないかと思ったのですが、本文内でも表示されました。WordPress などの CMS でコンテンツを編集している場合で、特定のページのみ表示したい場合は、その本文に記述すれば OK です。

“myAppStoreID” にはアプリの ID を入力するのですが、”Link Maker” というページでアプリを検索して、結果の右側に表示されるリンクの URL に含まれる “id” 以降の９桁の数字を入力します。それ以外のパラメータは任意で、詳しくはドキュメントを参照してください。

バナーのボタンをタップすると、そのアプリがインストールされている場合はそのアプリを起動して、インストールされていない場合は、AppStore アプリを起動し、そのアプリのページを表示します。

ちなみに、自分がリリースしているアプリのページに設置してみました。iOS6 で表示すると上部にバナーが表示されます。

iOS6 の Safari だけでしか表示されませんが、設置が簡単で、他のブラウザで表示する場合にもコンテンツに影響を与えないので、手軽にアプリをダウンロードしてもらいたい場合に便利かなと思います（ちょっと読み込みに時間がかかるので、気づかないことも多そうですが…）。

• Promoting Apps with Smart App Banners (Safari Developer Library)
• Link Maker
• PictTweet / PictTweet Plus! （設置したページ）

ダウンロード

無料版の PictTweet (iPhone/iPod touch)

画像を取り込める PictTweet Plus! (iPhone/iPad/iPod touch)

iOS5 になったぐらいから画像がアップロードできないという問題が発生していて、そのバグフィックスがメインですが、Twitter 自身が画像のアップロードに対応したこともあり、アップロード先の変更も行いました。多少、アップロード時間が早くなったかと思います。

また、マルチタスク対応にして、それにあわせて UI もシンプルにしました。以前よりもお手軽にお絵描きをツイートできます。ぜひお試しください。

１年半ぶりにソースコードを見て理解に時間かかったり、Xcode の進化に追いつけなかったり大変でしたが、やっぱり iOS アプリを開発するのは楽しいです。早く、次のアプリをリリースできるようにしたいなーと。

Listed link on twitter.com

新しい Twitter UI に変わってから、自分や他のユーザーがどれぐらいリストに登録されているのかがわからなくなったので作ってみました。まだ、表示されないタイミングとかありますが、ひとまず公開という事で。

ソースコードは GitHub で公開していますので、ご自由にご利用ください。

icotile と Web Storage

icotile は、Twitter のフォロワーを iTunes のような UI で管理するための Web アプリケーションです。画面中央部にフォロワーのアイコンをすべて並べて、選択するとそのユーザーの詳細情報が表示されたり、ドラッグ＆ドロップでリスト編集ができます。（Twitter を使っている方はぜひお試しください。）

icotile のメイン画面

今回 icotile の開発では「デスクトップアプリケーションのような操作感」を目指しました。そのためには、ユーザーの操作に対して素早く反応することが重要です。これまでの Web アプリケーションの様に、操作の度にサーバにデータを取りにいくようだと、どうしてもユーザーを待たせてしまいます。 このような場合にはよく「キャッシュ」という手法を使うのですが、HTML5 以前にはブラウザ側でキャッシュするための保存領域がありませんでした。HTML5 になってからは、ブラウザにデータを保存する仕組みがいくつかあり、icotile では「Web Storage」という仕組みを使って、ユーザーの情報をキャッシュしています。これにより、起動後すぐにアイコンが表示されたり、アイコンをクリックしてすぐに詳細情報が表示されたりと、レスポンスの早い UI を実現しています。 ちなみに、Web Storage の他にも Web SQL Database や Indexed Databaseという技術もありますが、手軽に実装でき、幅広いブラウザに対応している Web Storage を採用しました。

Web Storage の使い方

Web Storage は key と value という組み合わせを１レコードとするストレージで、下記のような JavaScript のコードでデータの保存、取得が可能です。

// 保存と取得
// この例では、twitterUserId が key で、userDataJson が value

// 保存
localStorage.setItem(twitterUserId, userDataJson);
// 取得
var userDataJson = localStorage.getItem(twitterUserId);

icotile では、Twitter の API で取得できるユーザーの情報を localStorage にキャッシュとして格納しています（Web Storage には２種類のストレージがあり、localStorage は永続的にデータを保存できる領域です）。 key にはユーザーを一意に示すユーザーの id、value には Twitter API で取得したユーザーの情報を、JSON 形式そのままで格納しています。 ユーザーの情報を利用する際、最初に localStorage を参照して、データが存在していたときにはそのデータを利用します。初回起動時など、localStorage にデータがない場合にはサーバからユーザーの情報を取得します。取得したデータは localStorage に保存します。いわゆる一般的なキャッシュの仕組みと同じです。 icotile では、ユーザーがアイコンをクリックすると、そのアイコンのユーザーの詳細情報が右側に表示されますが、このときに下記のような処理を行っています。

// 最初にキャッシュ（localStorage）にアクセス
var userDataJson = localStorage.getItem(twitterUserId);

// JSON をオブジェクトに変換
var userData = JSON.parse(userDataJson);

if ( userData ) {
  // データが存在しているので、詳細を表示。
  drawUserDetail(userData);
}
else {
  // データが存在していなかったので、サーバから取得
  // 第２引数は、取得後に呼び出されるコールバック関数
  requestUserDataFromTwitter(twitterUserId, function(userDataJson) {
    // JSON をオブジェクトに変換
    var userData = JSON.parse(userDataJson);

    // サーバから取得したデータを表示。
    drawUserDetail(userData);

    // キャッシュに保存
    localStorage.setItem(userData.id, userDataJson);
  });
}

容量の上限

Web Storage は記録できる容量に上限があります。ブラウザの実装にもよりますが、Chrome の場合、ドメインあたり 5MB です。Twitter のユーザーのデータ（JSON）は、人にもよりますがだいたい 2KB 程度なので、2500 人分ぐらいは localStorage に保存することが可能です。データにはアイコン画像そのものは含まれていないので、アイコンの表示のスピードはブラウザのキャッシュに依存します。 キャッシュが上限に達した場合には、localStorage.setItem() 実行時に例外が発生します。この場合には、新しい情報を追加できるように古い情報を削除します。icotile では、上限に達した場合には 100件削除した後に保存しています。本来なら保存した日時を記録して古い順から削除するのがよいのですが、Web Storage は日時情報を保存したり、その値でソートすることが出来ないので、単純に取得した 100件を削除しています。

try {
  // データの保存。上限に達している場合には例外が発生する。
  localStorage.setItem(twitterUserId, userDataJson);
} catch (e) {
  if ( e == QUOTA_EXCEEDED_ERR ) { // 上限に達していた場合
    var i = 0;
    for ( var key in localStorage ) {
      // データの削除
      localStorage.removeItem(key);
      if ( i++ > 100 ) {
        break;
      }
    }
    // データの保存
    localStorage.setItem(twitterUserId, userDataJson);
  }
}

プライバシーの考慮

localStorage のデータは明示的に削除しない限り保存されたままになるため、ブラウザを終了して再度アクセスしたときにも、残っているデータは素早く表示することが出来ます。そのため、プライバシー保護の観点でキャッシュを全クリアする機能をユーザー提供した方がよいでしょう。また icotile ではログイン時にユーザーをチェックして、違うユーザーでログインした場合にはキャッシュをクリアしています。データが永続的に残るので、うっかりアクセスできてしまうことも考慮に入れる必要があります。 また、localStorage の中身はブラウザの機能で見ることが可能です。開発時はデバッグ等で使えますが、ユーザーが除き見ることも出来るため、パスワードのような情報を保存することは避けた方が無難です。

Chrome のローカルストレージのブラウザ

応答性能と情報の鮮度

このように、Web Storage を使ってデータをキャッシュして、ユーザーの操作に対して素早く情報を提供することが出来ますが、キャッシュをするということは情報の鮮度が劣化している可能性があります。ユーザーのプロフィールのように頻繁に更新されない場合にはあまり影響はありませんが、リアルタイムに更新される情報を扱う場合にはキャッシュしない、もしくは定期的に更新したほうがよいかもしれません。応答性能と情報の鮮度のバランスをどう取るかは、ユーザビリティ上重要で、かつ難しいポイントかと思います。この辺りは、実際にコーディングしていいバランスポイントを見つけ出すしかないかなと思います。

と、簡単ですが Web Storage の使い方と考慮のポイントをまとめてみました。「データベース」というとちょっと身構えてしまいますが、キーバリュー型で簡単に扱うことができるため、いろいろ場面で活用することが出来ると思います（ちょっと容量が少ないですが…）。ぜひお試しくださいませ。

参考文献

• W3C – Web Storage
• W3C – 『Web Storage』日本語訳
• Web Storage / HTML クイックリファレンス
• Web Storage について – へっぽこプログラマーの日記
• icotile のどのあたりが HTML5 なのか？

このところ、配信遅延や配信エラーが多く発生している状況でご迷惑おかけしております。というのも、Twitter API のエラーレートが非常に高い状況が続いているためです。原因はわからないのですが、こちら側ではどうにも対処できないため、困っている状況です。近いうちに、今後のサービスをどうしていくか決断を下そうと思っています。決まり次第、改めて報告したいと思います。

さて、Evernote への直接投稿機能をリリースしてからもうすぐ１年が経ちます。１年も前なので既に覚えていないと思いますが、設定時に Evernote で認証をしたときに、認証の期限が 365日と表示されたかと思います。すなわち、１年前に設定された方はもうすぐ期限が切れて、自動投稿が出来なくなってしまいます。

サービスが不安定な状況ですが、もし継続してご利用いただけるのでしたら、下記の手順で再認証を行っていただく必要があります。（メール投稿の方はこれらの作業は不要です。）

• http://twtr2src.ogaoga.org/ にアクセスして、右上の「Sign in with Twitter」からサインイン。
• サインイン後、右上の「設定」をクリックし、「自動投稿」タブを選択。
• 「1. 認証」の「サインアウト」をクリック。
• 「Evernote にサインイン」のフォームで Evernote のアカウントでサインイン。
• 「承認する」ボタンを押す。

お手数おかけしますが、よろしくお願いします。

さて、先日「twtr2src 自動投稿の新規登録終了と開発縮小のお知らせ」にてお伝えしたとおり、twtr2src の積極的な開発は中止しております。また冒頭でも書いたとおり、サービスは不安定な状況が続いております。なので、他のサービスに乗り換えていただきたく、「twtr2src からの乗り換えのご案内」にて、同様のサービスをご紹介していますので、ぜひ乗り換えもご検討ください。

ツイエバ

ツイートだけでなく、ダイレクトメッセージ、お気に入り、リツイートなどをまとめて Evernote に配送してくれるサービスです。メールを使用しているため、上記のような再認証も不要です。私も利用していますが、安定して配信されています。投稿も見やすく、フォロワー数の増減などの情報もありオススメのサービスです。

ツイートメール

自分だけではなく、他の人のツイートもメールで配信してくれるサービスです。また、キーワードウォッチ、人気つぶやきウォッチなどの機能もあるようです。実際に使った事は無いので、安定度などはわかりません。

twilog

ご存知 twilog ですが、実はツイートを RSS でも出力しているため、RSS リーダーが保存機能を持っていれば、そこで保存することが可能です。

URL は http://twilog.org/rss-feed/<twitterユーザー名> になります。

ブログ系サービス

いくつかのブログ系のサービスが、同等の機能を提供しています。どれも実際に使った事はありません。

はてなダイアリー

→ はてなダイアリーとTwitterを連携する

goo ブログ

→ Twitter（ツイッター）連携

livedoor ブログ

→ Twitterのつぶやきをブログでまとめる機能を実装しました

yaplog

→ ブログをTwitter（ツイッター）とつなげよう！（Twitter連携）

FC2 ブログ

→ 【ブログ】Twitter連携を強化！ ツイートをブログに自動投稿

と、以前よりも選択肢が増えていますので、twtr2src 以外のサービスもご利用いただければと思います。