独自開発WEB制作技術：スライダーシステム（クラウドシステム対応）

　＠PAGE／＠WEB等の弊社＠シリーズには、スライドアニメーションシステムがありますが、当システムはこのシステムとは異なり、一度に複数の写真やイラスト画像を横に並べ、順に表示させることができるシステムです。
本システムも、スライドアニメーション（スライドショー）と同様に、本来、JavaScriptというプログラムによってプログラマーが作成するものです。弊社のスライダーシステムは、ホームページに簡単に設定できるようにクラウドシステムとしてサーバー上にシステムを構築しているため、複数の画像を用意できれば誰でも簡単に設定が可能となっています。
なお、クラウドシステムは、サーバ上にシステムを設置しインターネットを介してパソコンのブラウザ上の表示画面にシステムの操作画面を表示して作業を行えるシステムのことをいいます。
スライダーは、大手企業の表紙にメインコンテンツ技術としても利用されていますが主に商品の紹介や掲載中のイベント情報等を紹介することに向いています。

○デモサイト：URL http://demo.apos.jp
　※スライダーシステムの以降の説明は、本デモサイトの事例に基づいて説明していますので必ずご確認ください。

本採用事例は、農業者のホームページにスライダーを採用した事例です。本ホームページは、弊社＠シリーズの@WEBシステムを利用して、作成・運営管理を行っています。スライダーの画像は、弊社で作成していますがスライダーの作成・設定は、弊社指導の下、運営者である農業者が行っています。

表紙へのスライダー採用事例
http://www.sanroku-kajuen.jp/　
実際の生産物の６つのメインカテゴリを表示枠４件で設定しています。

内部メニューへのスライダー採用事例
http://www.sanroku-kajuen.jp/kudamonogari.htm　
６つのカテゴリにおけるすべてのページのメニューとして表示枠５件で設定しています。
内部のメニューとして表示しているため、スピードを若干遅くしています。

表示枠の幅や、スライドする画像数、スライド時間は自由に設定できますので、例えば、表紙の左メニューに１件表示として数枚の画像をスライドさせるスライダーも可能となります。
また、事例ページの表紙のメインコンテンツとして、弊社スライドアニメーションが利用されていますがこの部分にスライダーを採用することも可能です。

スライダーシステムは、クラウドシステムとして開発されているため画像サイズ調整等簡単な画像処理が可能であれば、誰でも容易にスライダーを作成しホームページに設定することが可能です。

表示したいスライダーのカラー等レイアウト設定と切替時間を設定後、画像を数枚入力し、リンクの設定をすればスライダー作成作業は完了します。

作業が完了するとスライダーのソースコードが自動的に出力されるので、そのソースコードを別途動作させたいメニューのテキスト入力枠（HTMLモード）に貼り付けるだけで完成します。

以下のイメージがスライダーの表示イメージです。
この事例では、一度に表示される枠数が3に設定されており、①～③までのスライド画像が3件と次に表示される画像1件の合計4件が入力されており、1件ずつ順にスライドしていきます。スライド画像は、20件まで入力可能です。

以下は、弊社が独自に開発したスライダーシステムにおけるスライダー作成作業の概略です。
詳細の設定画面は、ページ表示スペースの都合上表示できませんので詳細な説明をご希望の場合には、お問合せをお願いいたします。

1. スライダー管理用題名
   スライダーは、@PAGEや@WEBにおいて複数利用できるため、どのページにどのようなスライダーを利用しているか管理するためにスライダーの項目と題名を設定します。
   
   
2. スライダーの説明文
   スライダーの説明文は、入力枠に記入します。
   デモ版では、「レインボウブリッジ、東京スカイツリー、皇居、浅草寺、東京タワー等東京名所観光案内」と入力しています。
   
   
3. スライダーの背景設定
   スライダーの背景は、背景色を選択するか、作成した壁紙画像をアップロードして設定します。
   
   
4. ナビゲーションの背景設定
   ここでは、ナビゲーションの背景色を設定します。
   ナビゲーションとは、スライダーの表示内容の切替を行う為の機能で、一つ前を示す「＜」、一つ次を示す「＞」をクリックすることで、スライダー内の画像を一つ戻したり進めることが可能となります。
   
   
5. スライダーの切替時間設定
   （１）切替時間の設定
   スライダーで画像の切替を開始する時間を入力します。
   入力する際の数値は、１秒を１０００で表しています。
   
   （２）切替速度の設定
   スライダーで画像の切替にかかる時間を設定します。
   入力する際の数値は、１秒を１０００で表します。
   
   
6. スライダーのレイアウト設定
   スライダーを表示する際のレイアウトに関する設定をします。
   （１）スライダー全体枠の横幅入力
   （２）スライダー全体枠の縦幅入力
   （３）ナビゲーションの横幅入力
   （４）スライダー内の余白入力
   （５）表示枠数入力。
   （６）画像表示幅
   
   
7. スライド画像設定
   （１）スライド画像設定番号の選択
   スライド画像設定番号は、スライド画像の設定をするための設定作業番号です。
   
   （２）スライド画像設定
   スライド画像設定では、スライド画像上文字、スライド画像上文字サイズ、スライド画像上文字の色と背景色、スライド画像上文字の位置、スライド画像の説明文、スライド画像、リンク先アドレスを入力します。
   
   

弊社の＠シリーズにおけるテキスト入力は、リッチテキストエディターが採用されており、簡単に文字の編集や入力ができるようになっています。スライダーシステムで作成作業が完了すると完成したスライダーのプログラムコードが出力されます。
そのプログラムコードをスライダーを設置したいページのテキストエディターの入力画面に貼り付けて登録ボタンを押すとインターネット上に正式発信されます。