Cacooの図の一覧画面をAutoPagerize対応しましたよ
【2010/11/11 追記】特定の端末で、Cacooのサムネイル図一覧ページを更新するたびにページがずれるという現象が判明しました。対応できるまで、Wedataを削除しておきます。ご迷惑をおかけして申し訳ありません。
目立つのは嫌いじゃないけど、悲しいくらいに本番とプレッシャーに弱いikikkoです、こんばんは。
今日は、CacooをAutoPagerize化したので、それにまつわるお話をしようと思います。
今回は、技術的なことと精神的なことに分けて話をしようかと。
技術的なこと
背景
AutoPagerizeとはご存知の方も多いかとは思いますが、ブラウザ上で画面下部までスクロールすると自動的に次のページを読み込んでくれるアドオン機能です。Googleの画像検索ではGoogleサーバ側で対応されてますが、あれをブラウザの拡張機能で実現するやつですね。
で、Cacooのお話なんですが、ちょっと前に共有フォルダ機能が追加されました。
共有フォルダは設定したメンバー間でフォルダを共有できるフォルダです。共有フォルダを使うと図に対して個別にメンバーを招待する必要がなくなります。
Cacoo - Create diagrams online Real time collaboration - Pricing
共有フォルダ内に作成した図は、共有メンバーは誰でも閲覧/編集可能です。
この共有フォルダ機能、すごく便利なのですが図が爆発的に増えるという問題がありました。で、お目当ての図が見つかるまで地道に「次のページ」のリンクをクリックするのも空しい作業なので、AutoPagerize化しようと考えました。
対応内容
各サイトをAutoPagerize対応することは、実のところそんなに難しいものではありません。AutoPagerize対応サイトはWedataというWebデータベースで管理されているので、こちらに追加するだけです。
ただ、画像を遅延ロードしているところがあって、（クライアント側で）単純にAutoPagerで読み込んだだけでは遅延ローディングが有効になりませんでした。なので、サーバ側でAutoPagerで読み込んだ際のイベントリスナーを追加。
AutoPagerizeで継ぎ足された部分に自分のスクリプトを適用する方法あれこれ - 0xFFAutoPagerize Event APIの AutoPagerize_DOMNodeInserted を使う
AutoPagerize_DOMNodeInserted イベントは、名前の通りAutoPagerize独自のDOMNodeInsertedイベントで、追加された要素をtargetとしたイベントが発火される。
あとは、アイテム: Cacoo - 図の一覧 - データベース: AutoPagerize - wedataでWedataに追加。最終的に下記のような感じに、スクロールして一番下までくると次の画面（『page: 2』以降）が読み込まれているのが分かります。
精神的なこと
で、ここで言いたいのは、技術的なことよりもむしろこっちの方。
エンジニアをしていて楽しいことに、↓のようなものがあると考えています。
- 知らないことを学んでいって知識が増える
- 自分が書いたコードが他の人の役に立ってる（と実感できる）
ただ、前者はともかく後者はなかなか一足飛びにはできないですよね。最近はフリーのソフト・サービスでもすごく使い勝手がいいものも多く、ちょっとしたアイデアやスキルではなかなか他人の役に立つようなものは生み出しにくくなってると感じています。
そんなときには、自分がよく訪れるサイトをAutoPagerize化するのはどうでしょうか？必要な知識もそれほど多くなく、それでいて多数の人の役に立てる可能性がある、おいしい作業だと思います。実際、今回始めてAutoPagerize化をやったのですが、それなりにあっさり設定できてちゃんとAutoPagerされたときは面白いと思いましたね。
今まで参考書を読んだり写経とかしてインプットにいそしんできた方も、たまにはこういったお手軽なところからアウトプットしていくと幅が広がるんじゃないですかね。
というところで、締めさせていただきます。
