2012年10月開催の WordBench 神戸での発表資料です。シェアするにあたって、発表時とはタイトルのみ変更させて頂いています。

1. Infinite Scroll を試してみた
オートページローディング

2. 自己紹介
‣ ノジマユウジ ‣ プログラムが好き
@yuka2py
‣ PythonとJavascriptが
‣ 株式会社フォーエンキー 大好き♪
代表
‣ おしゃれも大好き☆
‣ システム開発、
グラフィックデザイン、 ‣ リボンやお花が好き☆
DTPや印刷など

3. 自己紹介
‣ ノジマユウジ ‣ プログラムが好き
@yuka2py
‣ PythonとJavascriptが
‣ 株式会社フォーエンキー 大好き♪
代表
‣ おしゃれも大好き☆
‣ システム開発、
グラフィックデザイン、 ‣ リボンやお花が好き☆
DTPや印刷など

4. 自己紹介
‣ ノジマユウジ ‣ プログラムが好き
@yuka2py
‣ PythonとJavascriptが
‣ 株式会社フォーエンキー 大好き♪
代表
‣ おしゃれも大好き☆
‣ システム開発、
グラフィックデザイン、 ‣ リボンやお花が好き☆
DTPや印刷など
(´∀`〃)ゝ

5. 最近のオレ
Py
2%
GraphicDesign
iOS 14%
お嫁 3%
Windows(C#) Android お嫁
We b ( P H P / J S ) 7%
Android 46%
iOS Web(PHP/JS)
GraphicDesign
Py
9%
Windows(C#)
19%
2012年10月13日
株式会社フォーエンキー調べ

6. オートページローディングとは？

7. オートページローディングとは？
‣ スマートフォンとかで、よくあるUI

8. オートページローディングとは？
‣ スマートフォンとかで、よくあるUI
‣ 下の方までスクロールしたら、

9. オートページローディングとは？
‣ スマートフォンとかで、よくあるUI
‣ 下の方までスクロールしたら、
‣ 自動で次のページのロードが開始され、

10. オートページローディングとは？
‣ スマートフォンとかで、よくあるUI
‣ 下の方までスクロールしたら、
‣ 自動で次のページのロードが開始され、
‣ ぐるぐるぐるーっと回ったりして、

11. オートページローディングとは？
‣ スマートフォンとかで、よくあるUI
‣ 下の方までスクロールしたら、
‣ 自動で次のページのロードが開始され、
‣ ぐるぐるぐるーっと回ったりして、
‣ 現在のページに追加して表示されるやつ。

12. オートページローディングとは？
ページの一番下でこんなんなって

13. オートページローディングとは？
続き記事が追加されるアレです

14. 実現する方法

15. 実現する方法
‣ WordPressのプラグインでやっちゃう (́ `〃)ゝｷｬﾊ

16. 実現する方法
‣ WordPressのプラグインでやっちゃう (́ `〃)ゝｷｬﾊ
●
WP-AutoPager
http://wppluginsj.sourceforge.jp/wp-autopager/

17. 実現する方法
‣ WordPressのプラグインでやっちゃう (́ `〃)ゝｷｬﾊ
●
WP-AutoPager
http://wppluginsj.sourceforge.jp/wp-autopager/
●
Infinite Scroll
http://www.infinite-scroll.com/

18. 実現する方法
‣ WordPressのプラグインでやっちゃう (́ `〃)ゝｷｬﾊ
●
WP-AutoPager
http://wppluginsj.sourceforge.jp/wp-autopager/
●
Infinite Scroll
http://www.infinite-scroll.com/
‣ jQueryのプラグインでやっちゃう (｀･ω･́)ﾉ

19. 実現する方法
‣ WordPressのプラグインでやっちゃう (́ `〃)ゝｷｬﾊ
●
WP-AutoPager
http://wppluginsj.sourceforge.jp/wp-autopager/
●
Infinite Scroll
http://www.infinite-scroll.com/
‣ jQueryのプラグインでやっちゃう (｀･ω･́)ﾉ
●
jQuery.autopager
http://lagoscript.org/jquery/autopager

20. 実現する方法
‣ WordPressのプラグインでやっちゃう (́ `〃)ゝｷｬﾊ
●
WP-AutoPager
http://wppluginsj.sourceforge.jp/wp-autopager/
●
Infinite Scroll
http://www.infinite-scroll.com/
‣ jQueryのプラグインでやっちゃう (｀･ω･́)ﾉ
●
jQuery.autopager
http://lagoscript.org/jquery/autopager
‣ 修行だと思って全部自分で作ってみる (,,･`_́･)、ｷﾘｯ

21. 実現する方法
‣ WordPressのプラグインでやっちゃう (́ `〃)ゝｷｬﾊ
●
WP-AutoPager
http://wppluginsj.sourceforge.jp/wp-autopager/
●
Infinite Scroll
http://www.infinite-scroll.com/
今回はコチラ
‣ jQueryのプラグインでやっちゃう (｀･ω･́)ﾉ
●
jQuery.autopager
http://lagoscript.org/jquery/autopager
‣ 修行だと思って全部自分で作ってみる (,,･`_́･)、ｷﾘｯ

22. Infinite Scroll を試した理由
‣ WordPress なので、プラグイン使いたい
‣ WP-AutoPager は、プラグインディレク
トリに無かった（たぶん）
‣ Infinite Scroll の方が高機能っぽかった

23. インストール
1. 管理画面から、
[プラグイン] > [新規追加]

24. インストール
1. 管理画面から、
[プラグイン] > [新規追加]
2. 検索結果から、
[いますぐインストール]

25. 設定画面
• 管理画面から
[設定] > [Infinite Scroll]
で設定画面へ

26. 設定画面
• 管理画面から
[設定] > [Infinite Scroll]
で設定画面へ

27. 全般設定(1)

28. 全般設定(1)
タブが２つ

29. 全般設定(1)
全般的な設定

30. 全般設定(2)

31. 全般設定(2)
プラグインの有効範囲
OFF
管理者以外ON
管理者のみON
全員ON

32. 全般設定(2)
プラグインの有効範囲
OFF
管理者以外ON
管理者のみON
全員ON
デバッグモードのON/OFF
Javascript Console にログが出る。便利

33. 全般設定(3)

34. 全般設定(3)
続きのページを<自動>で読み込むか
続きのページを<手動>で読み込むか

35. 全般設定(4)

36. 全般設定(4)
続きの記事を読み込んだ後に、
実行したい Javascript を書く

37. 全般設定(4)
続きの記事を読み込んだ後に、
実行したい Javascript を書く
ページ読み込み完了後の
フラッシュとか？

38. 全般設定(5)

39. 全般設定(5)
ローディング中に表示する画像を変更できる

40. 全般設定(5)
ローディング中に表示する画像を変更できる
デフォルトはこんな画像

41. 全般設定(6)

42. 全般設定(6)
ローディング画像の位置

43. 全般設定(7)

44. 全般設定(7)
ローディング中のテキスト

45. 全般設定(7)
ローディング中のテキスト
もう記事が無い時のテキスト

46. 全般設定(7)
ローディング中のテキスト
編集出来ます
もう記事が無い時のテキスト
編集出来ます

47. セレクタの設定(1)

48. セレクタの設定(1)

49. セレクタの設定(1)
セレクタ設定

50. セレクタの設定(1)
実は
セレクタ設定 こちらが
重要

51. セレクタの設定(1)
実は
セレクタ設定 こちらが
重要
テーマのHTML構造に合わせて、
うまく設定しないとちゃんと動かない！

52. セレクタの設定(2)

53. セレクタの設定(2)
記事全体を囲むブロックを特定するCSSセレクタ

54. セレクタの設定(2)
記事全体を囲むブロックを特定するCSSセレクタ
個別の記事ブロックを特定するCSSセレクタ

55. セレクタの設定(3)

56. セレクタの設定(3)
ナビゲーションブロックを特定するセレクタ

57. セレクタの設定(3)
ナビゲーションブロックを特定するセレクタ
次ページへのリンク（aタグ）を特定するCSSセレクタ

58. 実際にやってみます
（実演）

59. カスタマイズのヒント

60. カスタマイズのヒント
‣ 特定のページに適用するには？

61. カスタマイズのヒント
‣ 特定のページに適用するには？
●
Navigation Selector を工夫する

62. カスタマイズのヒント
‣ 特定のページに適用するには？
●
Navigation Selector を工夫する
●
例) body.category-A #navigation-block

63. カスタマイズのヒント
‣ 特定のページに適用するには？
●
Navigation Selector を工夫する
●
例) body.category-A #navigation-block
‣ カテゴリやページ毎に異なる読み込み方をさせたい

64. カスタマイズのヒント
‣ 特定のページに適用するには？
●
Navigation Selector を工夫する
●
例) body.category-A #navigation-block
‣ カテゴリやページ毎に異なる読み込み方をさせたい
●
それはHTMLとCSSで出来る

65. カスタマイズのヒント
‣ 特定のページに適用するには？
●
Navigation Selector を工夫する
●
例) body.category-A #navigation-block
‣ カテゴリやページ毎に異なる読み込み方をさせたい
●
それはHTMLとCSSで出来る
●
Infinite Scroll はあくまでも、Ajaxで次の記事を読
み込んで、DOMに追加しているだけ

66. カスタマイズのヒント
‣ 特定のページに適用するには？
●
Navigation Selector を工夫する
●
例) body.category-A #navigation-block
‣ カテゴリやページ毎に異なる読み込み方をさせたい
●
それはHTMLとCSSで出来る
●
Infinite Scroll はあくまでも、Ajaxで次の記事を読
み込んで、DOMに追加しているだけ ここ
重要

67. カスタマイズのヒント
結構
いろいろ
‣ 特定のページに適用するには？
出来る!!
●
Navigation Selector を工夫する
●
例) body.category-A #navigation-block
‣ カテゴリやページ毎に異なる読み込み方をさせたい
●
それはHTMLとCSSで出来る
●
Infinite Scroll はあくまでも、Ajaxで次の記事を読
み込んで、DOMに追加しているだけ ここ
重要

68. 最後
に アイデア次第で色々と

69. 最後
に アイデア次第で色々と
‣ 画像をたくさん並べたら

70. 最後
に アイデア次第で色々と
‣ 画像をたくさん並べたら
●
グーグルの画像検索結果ページみたいな感じに

71. 最後
に アイデア次第で色々と
‣ 画像をたくさん並べたら
●
グーグルの画像検索結果ページみたいな感じに
‣ Scrolling Behavior の切り替えで、自動ロードを
オフにできることも忘れずに

72. 最後
に アイデア次第で色々と
‣ 画像をたくさん並べたら
●
グーグルの画像検索結果ページみたいな感じに
‣ Scrolling Behavior の切り替えで、自動ロードを
オフにできることも忘れずに
●
つまりユーザーアクションで次の記事を読み込める。
（[もっと●●を表示] ボタン的なやつ）

73. 最後
に アイデア次第で色々と
‣ 画像をたくさん並べたら
●
グーグルの画像検索結果ページみたいな感じに
‣ Scrolling Behavior の切り替えで、自動ロードを
オフにできることも忘れずに
●
つまりユーザーアクションで次の記事を読み込める。
（[もっと●●を表示] ボタン的なやつ）
●
読込ボタンに onclick を仕込み、 Javascript to be
called after... と組合せれば、記事の入れ替えも可能

74. 最後
に アイデア次第で色々と
楽しい
こと考え
‣ 画像をたくさん並べたら よう☆
●
グーグルの画像検索結果ページみたいな感じに
‣ Scrolling Behavior の切り替えで、自動ロードを
オフにできることも忘れずに
●
つまりユーザーアクションで次の記事を読み込める。
（[もっと●●を表示] ボタン的なやつ）
●
読込ボタンに onclick を仕込み、 Javascript to be
called after... と組合せれば、記事の入れ替えも可能

75. ありがとうございました！
©copyright 2012 Foreignkey, inc. All right reserved.

76. ©copyright 2012 Foreignkey, inc. All right reserved.