UIZEで高機能スライドショーを作成する
UIZEはスライドショーのほか、高機能のウェジェット実装を可能にするフレームワークです。今回はその目玉のひとつでもある
スライドショーの導入方法を見ていきたいと思います。
また、UIZEを利用する場合、まずここからライブラリをダウンロードしてくる必要があります。
パッケージには多くのフォルダとファイルが入っていますが、今回使用するファイルはJSフォルダとCSSフォルダ、IMAGESフォルダのなかに
あります。なお、REFERENCEフォルダはUIZEクラス群の仕様について、EXPLAINERSフォルダには具体的な使い方が、EXAMPLESフォルダはサンプルが
豊富に用意されているの参考にしてください。
準備すること
JavaScriptファイル
JSファイルを開くと膨大の量のJSファイルが入っていますが、これらを全部アップロードする必要はありません。 まず~experimentalフォルダと~sourceフォルダは不要でしょう。また、UizeDotComで始まるJSファイル群もサンプル用のスクリプトなので アップロードする必要はありません。その他、Uizeフォルダ、Uize_Widget_Bar_Progressフォルダなどにはウィジェットに使用する 画像が入っています。これらはスライドショーでは使いませんが、スライドバーなどUizeの他の機能を利用するときに使うようです。
そしてUize.Color.js⇒Uize.Xml.jsまでがUizeのJSライブラリです。いずれも軽量なので一つのフォルダにまとめてアップロードしておくのがいいと 思います。スライドショーのために最低限必要となるのはUize.jsと、Uize.Widget.Page、Uize.Widget.SlideShowです。 その他に機能拡張のためUize.Data、Uize.Widget.Swap.Image.Cycle、Uize.Widget.Swap.xPresets、 Uize.Widget.ImageWipe.xPresets、SlideShow.Wipesが必要になります。
CSSファイル
次にCSSファイルですが、ウィジェットを自身で一からデザインするつもりであれば必ずしも必要ではありません。ただ、 Uizeが用意しているウィジェット・デザインは十分洗練されているので、そのまま使うのが手っ取り早いでしょう。 スライドショーに使うファイルは基本的に widget.slideshow.css、page.cssの一部だけです。 しかし、ファイル内で画像パスの指定を行っているため、一度ファイルを開いて内容を書き換える必要があります。
まず、widget.slideshow.cssを見ていきますが
上記のように5箇所でbackground-imageプロパティを設定しているので、これらのurlを適切なパスにそれぞれ書き換えます。 各画像の場所ですがIMAGESフォルダを開くと、button-bg.gifがフォルダ内に直置きされており、 残りの矢印画像はnav-arrowsフォルダに入っています。 スライドショーで必要となる画像は次の通りです。
button-bg.gif（縮小表示）⇒ 
nav-arrow-horz-first.gif ⇒ 
nav-arrow-horz-previous.gif ⇒ 
nav-arrow-horz-last.gif ⇒ 
nav-arrow-horz-next.gif ⇒ 
次にpage.cssから次のボタン部分に関するコードを引っ張ってきます。クラス名の重複などに注意。ここにも一箇所だけ背景画像の指定があるので、 パスを適宜書き換えてください。
HTMLに各種ファイルを記述する
HTMLのheadタグに読み込むJSファイルとCSSファイルを記述します。JSファイルに関しては、複数のモジュールをスクリプト内で呼び出す仕組みなので、 ここではUize.jsを一つ置くだけで済みます。 またCSSファイルは先ほどのwidget.slideshow.cssと、page.cssの一部（これはstyleタグ内に 書くか、widget.slideshow.cssにまとめて書き加えてもいいと思います）をリンクします。
3タイプのスライドショー
それでは実際にスライドショーを実装するためのスクリプトを書いていくわけですが、今回紹介するスライドショーは機能ごとに 3つのタイプに分けることにしました。そのうち最初の二つは手動操作（ボタン等で）で画像を切り替えていくタイプであり、もう一つは 自動的に画面が切り替えられていく、いかにもスライドショーという感じのものです。手動操作系については、画面の切り替え時に ワイプエフェクトが機能するタイプと、画面が切り替わるだけのシンプルなタイプに分かれます。 こちらからサンプルが確認できます。
１、ワイプ効果ありのスライドショー
HTMLに記述するタグは上記のようにたった一行で済みます。あとはUizeが要素の追加など勝手に調整してくれるのです。 また、ID属性名にハイフン（-）やアンスコ（_）が付いているのが気になったかと思いますが、これは後ほど説明します。
先にスライドショー用の画像データを編集することにしましょう。以下に記述するのはJavaScriptコードです。 Uize.Widget.SlideShowモジュールを利用する場合、写真画像のデータを下記のようにパッケージ化する必要があります。
ここでは三つの画像データしか入れていませんが、パッケージには好きなだけ画像を追加することができます。 画像のタイトルとURLを設定してください。LightBoxのようにdescription部分を表示したいですが、現段階では 方法が分からず使用していません。
次にスライドショー・ウィジェットのHTML部分を構築をします。これはUizeのデモで使われたコードをそのまま流用する
のがいいでしょう。テンプレートとしてJSフォルダ内にあるUizeDotCom.Templates.SlideShowと
UizeDotCom.Templates.SlideShow.Basicを使います。ただ、ファイル名にUizeDotComというのが
ついていると変なので、それぞれSlideShow、SlideShow.Basicとファイル名と内容の一部を
書き換えることにしました。
こちらからダウンロードして、JavaScriptファイルとして保存・アップロードしてください⇒SlideShow、SlideShow.Basic
そうしたら、最後にウィジェットをページに実装するスクリプトを書きます。すべてのコードはUize.moduleメソッド内に
書かれ、requiredプロパティで使用するUizeクラス・ライブラリや、画像データのパッケージなどを呼び出し、builderメソッド内に
スライドショーのウィジェットを作成する主要コードを書きます。
Uizeではページ自体をウィジェットとして見るため、すべてのウィジェットはUize.Widget.Pageクラスで作成されたページ・ウィジェットの
子要素という形になります。そして作成したウィジェット群を画面に表示させるため、最後に必ずwireUi()メソッドを呼び出さなければなりません。
上記のスクリプトでポイントとなるのは、まずnew Uize.Widget.Page({ idPrefix: 'page' })の部分。 Uize.Widget.Pageクラスをnew演算子で呼び出すことでページ・ウィジェットを作成します。また、引数にオブジェクト形式で ID属性名の接頭語を指定することができ、ここでは"page"としています。UizeではID名に接頭語をつけることで、ドキュメント内の 他の要素からUizeウィジェットの要素を区別しています。また引数については、
このように省略することができます。この場合、接頭語は自動的に"page"に設定されます。つまり、接頭語を変える必要がなければ
{ idPrefix: 'page' }と書く必要もありません。スライドショーなどウィジェットの要素では接頭語付きのID名を要求されるので、
本来つけたいID名に、ページ・ウィジェット作成時に指定した接頭語プラス、ハイフン（-）またはアンスコ（_）をつけます。
（例） 接頭語がデフォルトの"page"の場合： id="page_myid"
接頭語を"mypage"にした場合： id="mypage_myid"
このサンプルではスライドショー・ウィジェットの要素に"slideShow"というID名をつけています。addChild()メソッドで スライドショー・ウィジェットをページ・ウィジェットの子要素に追加するとき、第1引数にID名を渡します。
その他、オブジェクト形式でスライドショーのコンテンツなどを指定します。width、heightプロパティでサイズを指定し、 肝心の画像データはslidesプロパティに入れます。以降はワイプ機能を持たせるためのスクリプトが続き、最後に忘れては ならないwireUi()メソッドで締めくくります。
スライドショーの要素に接頭語が必要と説明しましたが、この方法でウィジェットを使う場合、特別に接尾後も必要になります。 具体的にはID名の後に"-shell"というのを追加します。下に実際のサンプルを表示してみましょう。
※残る2タイプについては後ほど掲載予定です。