FluxSliderで簡単アニメーションスライド：HTML5アプリ作ろうぜ！（5）（2/2 ページ）

» 2012年08月23日 13時28分公開

[山崎大助，魚津システム]

「FluxSlider」の使用方法

1．解凍したフォルダ内に“demo.html”というファイルが存在するはずです。

　そのファイルを使って解説しますので、“demo.html”をエディタで開いてください。

2．33行目～38行目

<div id="slider">
	<img src="img/avatar.jpg" alt="" />
	<img src="img/ironman.jpg" alt="" />
	<img src="img/tron.jpg" alt="" />
	<img src="img/greenhornet.jpg" alt="" />
</div>et.jpg,,

3．HTMLコード説明（画像の入れ込み）

　id=“slider”の“div”要素内にimg要素が4行記述してあります。ここに表示させたい画像のimg要素を1行追加するだけで表示されるようになります。また、“demo.html”では最初から4行のimg要素が記述されていますが、削除しても変更しても問題はありません。

　画像が表示される順番ですが、img要素を記述した順番で表示されるようになります。つまりは上から順番に表示されるということになります。画像がスライドだということを認識してください。

※画像を4個作成しストーリーを持たせると、アメコミ風4コママンガのようなものができるかもしれません。

4．23行目～25行目

window.f = new flux.slider('#slider', {
	pagination: true
});

5．プロパティのオプション変更・追加

　前述4の24行目“pagination: true”はページネーションを表示すると意味があり、“pagination: false”と記述するとページネーションが非表示となります。

window.f = new flux.slider('#slider', {
	pagination: true,
	autoplay: false
});

　また、追記でautoplayプロパティを次行に“autoplay: false”と記述追加することで、自動でスライド再生することがなくなります。

　他にもプロパティがあるようですが、“pagination”“autoplay”のみ今回は紹介させていただきます。

サンプルをちょいとアレンジ

　HTMLファイルを毎度編集してスライド（Image）を追加するのはどうなのだろう？と思ったので、スライド表示する画像のPATHは、JSON形式で外部ファイルのようにちょっと工夫してみました。

　JQueryの“$.getJSON”を利用することで簡単に外部ファイルのJSONデータを取得可能です。

　では、実際のサンプルを見た方が早いと思いますので、以下URLよりダウンロードして動作とコードを確認してください。

1．サンプルダウンロード

　[ダウンロード＞＞ samle_json.zip ]samle_json.zip ]

2．ダウンロードしたファイルを解凍すると以下のように展開されます

3．スライド表示したい画像PATHは、“img_list.txt”に記述します

　スライド画像追加は、index.htmlの編集は不要です。必要なのは、“img_list.txt”に画像へのPATHを書くことだけです。

{
	"img" : [
			"img/avatar.jpg",
			"img/ironman.jpg",
			"img/tron.jpg",
			"img/greenhornet.jpg"
		]
}

4．スライド画像を追加したい場合は以下の赤文字の箇所のように追加するだけです。

{
	"img" : [
			"img/avatar.jpg",
			"img/ironman.jpg",
			"img/tron.jpg",
			"img/＊＊＊＊＊＊＊.jpg",
			"img/greenhornet.jpg"
		]
}

　ぜひ、サンプルをうまく利用して、皆さんのアプリ開発に生かしていただければ幸いです。

サンプルコードの利用に関して　サンプルコードの利用に関して

　サンプルコードとファイルは自由にお使いください。

終わりに

　「FluxSlider」ライブラリは、簡単にスライド作成ができるお手軽JSライブラリです。　このライブラリの肝となるのは、実は画像素材だと思います。スライド自体は画像を読み込んで表示しているので、画像の質（デザイン性やクオリティー等）が良い・悪いの判断になると想定できます。画像の質によっては、アメコミのようなマンガのようにもできたり、シックで古い日記のように見せることも可能でしょう。

　別の使い方としては、Webサイトのトップページなどで見られる、フォトスライドでも使えそうです。元のソースコードに手を加えて新しいサービスにするには、容易ではありません。自分の企画に合わせて修正を入れるには手間は掛かるということはある程度、認識する必要があるでしょう。必ずどのような優秀なライブラリでも完璧なものはありません。どうやって付き合っていき、良いアイデアで克服し、よりよいものとして使えるかが大事だと思います。

　「FluxSlider」はJavaScriptライブラリの1つです。HTML5を今後極めるためには、「Javascript」は必要な技術です。現在、スクリプトは苦手と思われている方もぜひ今のうちに習得することをオススメします。

　JavaScriptは今後必ずあなたの強い味方になるはずです！

著者紹介

山崎　大助（魚津システム　所属）現在はデジタルハリウッド講師を務める他、SoftwareDesign、日経ソフトウエア、ITPro、WebCreatorsなどのWeb業界誌での執筆。日経PC21「名作フリーソフトを訪ねて」では自ら開発した「AIRNote！」が選ばれ掲載。impress.jsを簡単に作成する「 Impress.js design 」アプリもGithubにて公開してます。最近ではHTML5やPHP関連のセミナー・勉強会を開催。＠IT「HTML5アプリ作ろうぜ！」の連載記事を執筆。

「HTML5アプリ作ろうぜ！」バックナンバー