連載
» 2014年02月27日 18時00分 公開

HTML5アプリ作ろうぜ!(9):CSS3で簡単! スマホ向けWebページのスクロールを激派手にできるstroll.jsとは (2/2)

[山崎 大助,INOP/U-SYS/デジタルハリウッド講師]
前のページへ 1|2       

stroll.jsのソースコードを確認

 動作が確認できたら、今度はソースコードを見ていきましょう。

 下記のように、GitHubからソースコードをダウンロードできます。「Download ZIP」をクリックしてソースコードをダウンロードしましょう。

 次に、ダウンロードしたZIPファイルを解凍します。

 「index.html」を開くと、以下のようなソースコードが表示されます。

 主に、ulタグが勘所です。ulに付けられている「class名」でエフェクトを指定してます。

stroll.jsには4種類のエフェクトが隠されている

 またソースコードには、DEMOページで見たエフェクト以外も隠されています。以下ソースコードを確認して「コメント」タグを削除します(※コメントのエンドタグ「-->」も忘れず削除してください。)。

 コメントタグ削除後に保存し、ブラウザーで確認してみましょう。「Skew」「Tilt」「Zipper」「Fade」の4種類のエフェクトが新たに画面の下部に追加表示されます。

 こちらもスクロール確認してください。これで全ての表示ができました。

stroll.jsの使い方

 本稿では、stroll.jsの「index.html」をサンプルに使います。

CSSファイルの読み込み

 下記の17行目で「example.css」ファイルを、18行目で「stroll.css」ファイルを読み込んでいるように、それぞれこの2ファイルは読み込んでおきましょう。

JavaScriptファイルの読み込み

 下記の101行目のように「stroll.min.js」ライブラリを読み込みます。必要なスクリプトの埋め込みは、この個所だけです。他のスクリプトは動作に必須ではありません。

 103行目ではスクロール処理メソッドを設定しています。この「stroll.bind('#main ul')」でスクロールを可能にします。

スクロール個所の指定方法

stroll.bind( '#main ul' );

 こちらのセレクター指定の場合、下記のようにid="main"要素内のulタグのid名に対してスクロールを設定します。

 また、上記のようなセレクター指定とは別に要素(id名)指定も可能です。要素指定の場合には、“ulタグのid名”で指定します(※特定のid名、単体の指定となります)。そのため、id名を付ける必要があります。

stroll.bind( document.getElementById( 'some-list' ) );

 こちらの要素指定の場合、下記のように設定します。

エフェクトの指定方法

 ulタグのclass名が重要です。「index.html」に記載されている「ulタグのclass名(複数あります)」を参照してください。

 また、CSSファイル「stroll.css」を参照してください。このCSSファイルに各エフェクトが記載されています。

 なお余裕があれば、このCSSに自分が作ったものを追加するのもいいでしょう。

注意事項

 ulタグ内のliタグに対してエフェクトが掛かるので、「ul>li」で作成する必要があることを理解しておいてください。

 また、ソースコードに変更を入れた場合は、必ずブラウザー上で動作確認してみてください。変更によって動作しなくなっていることもあります。

サンプルをいじり倒そう

 stroll.jsはいかがでしたでしょうか。使い方が分かるまで、サンプルをうまく使っていきましょう。サンプルをうまく利用して、皆さんのWebサイト/アプリ開発に生かしていただければ幸いです。

 stroll.jsは、とても簡単に使える分、利用個所が限られています。実際に今後使っていただくライブラリになるか、皆さんでご判断いただければと思います。

 どんなライブラリにも長所・短所があります。ライブラリの短所だけを挙げようと思えば、どのライブラリも出てくるものです。そうではなく短所を理解し、長所を生かすことを考えていくのもいいのではないでしょうか。

 または、自分自身で別のライブラリを作成することも一つの方法です。時間がかかり、無駄になるかもしれません。しかし、必ず自分の経験として生きてきますので、「ライブラリを作成しようかな」と思ったら、ぜひチャレンジしてみてください。作成した人にしか見えない何か!? が見えてくるはずです。

 CSS3やHTML5(+JavaScript)などは今後どのような形で定着していくかは分かりませんが、自分のアイデアや構想にいつでも使える技術を知っておくために、常にアンテナを張っておくことは大事なスキルの一つといえます。

著者紹介

山崎大助 (INOP/U-SYS/デジタルハリウッド講師)

著書『レスポンシブWebデザイン「超」実践デザイン集中講義』(ソフトバンククリエイティブ)

受賞歴:Microsoft MVP

デジタルハリウッド講師を務めるほか@IT、日経ソフトウエア、SoftwareDesign、ITProなどへ寄稿。HTML5ビギナーズ(html5jビギナー部)で勉強会を毎月or隔月開催中。ヒカ☆ラボなどのセミナーやイベントにも登壇中。本サイトで「HTML5アプリ作ろうぜ!」の記事連載中。


前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。