[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

[Tips]ブラウザへのレスポンス改善Tips

How To.

Javascriptの読み込みをタグ直前に行う。

最初に読み込んでいるサンプル

中央区ホームページ
くらしに便利な情報の「一覧はこちら」の画像をマウスオーバーしたときのハイライト等の処理が含まれたJavascriptをheadタグ内で読み込んでいます。ブラウザからアクセスする人はhtml画面と同時にマウスオーバーすることがほとんど考えられないので、これらの読み込みは後でいいはず。(このスクリプト自体が軽いからあんまり影響ないんじゃんっていうのはいったんおいておいて)

<head>
.
.
.
(省)
.
.
.
<script type="text/javascript" src="/js/mause_over.js"></script>
</head>
<body>
.
.
.

最後に読み込んでいるサンプル

面白法人カヤックのホームページ
Google analyticsのアクセス解析用Javascirptはお作法てきな感じで最後に記述されることがおおいようです。

.
.
.
<body>
.
.
.
(省)
.
.
.
<!-- [ ANALYSIS ] -->
<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script> 
<script type="text/javascript"> 
try {
var pageTracker = _gat._getTracker("UA-53432-5");
pageTracker._trackPageview();
} catch(err) {}</script>
<!-- / [ ANALYSIS ] -->

</body>