[Mashup]jQueryプラグインで無限スクロールページをつくる(NAVERまとめのマッシュアップ)

今回使うjQueryプラグイン

Wookmark

使用方法はこちらです。

このプラグインを利用することでグリッドレイアウトをベースとした、無限スクロールのページが作成できます。

スクリーンショット 2013-05-30 23.57.07

サンプル

サンプルはこちら

NAVERまとめのページから、画像とタイトルとURLをスクレイピングで取得。

スクロールに応じて、非同期に画像ファイル等を取得して、どんどん表示してきます。

ページングがだるい、一つのページでより多くのコンテンツをみたいという方は是非。

実行環境/言語

実装には以下のものを利用しました。

言語:PHP
フレームワーク:Symfony , jQuery, Wookmark, htmlSQL, Snoopy

htmlSQL

htmlSQLはSQLベースでHTMLの要素を取得できるライブラリです。スクレイピングをするさいに利用しました。
慣れ親しんだSQLベースで要素の取得ができる便利なライブラリです。

GitHub htmlSQL

以下のような記法で配列形式のデータが取得可能となります。

SELECT (取得したい属性) FROM (タグ) WHERE $(属性) == (属性の値);

[株]HumbleFinanceを使ってみた

作ったもの

Go To Chart Navi

Humble Finance

チャートをHTML5で描画してくれるJavascriptフレームワークです。これを使ってWEBページを作ってみます。

Humble Software Development

他に使ったライブラリとか

CHAPI! – 株価API
株価を検索するためのフリーAPIです。IKACHI Projectなる団体が管理しているらいです。
ここが提供する四本値データと銘柄データを利用してチャート描画に必要なデータを収集しています。

IKACHI Project

Prototype
Humble Financeの動作条件として必須なJavascriptフレームワーク。

Prototype

JQuery
Javascriptフレームワーク。Prototypeと文法上競合するので記述方法に気をつけます。

JQuery

KickStart
cssフレームワーク。

KickStart

さあ、どうぞ

PHP & Symfonyで実装しました。

Go To Chart Navi