最新情報2
2014年07月22日 (火) 18:22

スライダーを簡単に作成できるスライダーシステムをCMSとして開発

スライダーとCMSとして開発したスライダーシステムの説明

スライダーは、本来MJavaScriptというプログラム言語によってプログラマーが作成するもので、一度に複数の写真やイラスト画像を横に並べ、順に表示させることができるコンテンツ表示技術です。
このスライダーを、パソコン等のブラウザ上で簡単に作成できるようにシステム化し、WEBサーバー上でCMSの機能として稼動するようにしたシステムがスライダーシステムです。
以下のイメージは、デモサイトに表示されているスライダーのイメージで、① ② ③の表示枠が漸次右から左に動きます。表示では3つの画像ですが4つの画像がスライドします。常時、1つの画像が見えない状態になります。画像プレートには、リンクを貼ることも可能となっています。

デモサイトURL http://demo.apos.jp の上から4番目の表示がスライダーシステムで作成したスライダーのイメージです。


スライダーシステム(クラウドシステム)の概略説明

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

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

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

上記のスライダーシステムのでもサイトの事例では、一度に表示される枠数が3に設定されており、までのスライド画像が3件と次に表示される画像1件の合計4件が入力されており、1件ずつ順にスライドしていきます。スライド画像は、20件まで入力可能です。
以下は、弊社が独自に開発したスライダーシステムにおけるスライダー作成作業の概略です。
詳細の設定画面は、ページ表示スペースの都合上表示できませんので詳細な説明をご希望の場合には、お問合せをお願いいたします。


  1. スライダー管理用題名
    スライダーは、@PAGEや@WEBにおいて複数利用できるため、どのページにどのようなスライダーを利用しているか管理するためにスライダーの項目と題名を設定します。

  2. スライダーの説明文
    スライダーの説明文は、入力枠に記入します。
    デモ版では、「レインボウブリッジ、東京スカイツリー、皇居、浅草寺、東京タワー等東京名所観光案内」と入力しています。

  3. スライダーの背景設定
    スライダーの背景は、背景色を選択するか、作成した壁紙画像をアップロードして設定します。

  4. ナビゲーションの背景設定
    ここでは、ナビゲーションの背景色を設定します。
    ナビゲーションとは、スライダーの表示内容の切替を行う為の機能で、一つ前を示す「<」、一つ次を示す「>」をクリックすることで、スライダー内の画像を一つ戻したり進めることが可能となります。

  5. スライダーの切替時間設定
    (1)切替時間の設定
    スライダーで画像の切替を開始する時間を入力します。
    入力する際の数値は、1秒を1000で表しています。

    (2)切替速度の設定
    スライダーで画像の切替にかかる時間を設定します。
    入力する際の数値は、1秒を1000で表します。

  6. スライダーのレイアウト設定
    スライダーを表示する際のレイアウトに関する設定をします。
    (1)スライダー全体枠の横幅入力
    (2)スライダー全体枠の縦幅入力
    (3)ナビゲーションの横幅入力
    (4)スライダー内の余白入力
    (5)表示枠数入力。
    (6)画像表示幅

  7. スライド画像設定
    (1)スライド画像設定番号の選択
    スライド画像設定番号は、スライド画像の設定をするための設定作業番号です。

    (2)スライド画像設定
    スライド画像設定では、スライド画像上文字、スライド画像上文字サイズ、スライド画像上文字の色と背景色、スライド画像上文字の位置、スライド画像の説明文、スライド画像、リンク先アドレスを入力します。