メニュー

つくばマルチメディアのホームページ作成(WEB制作)におけるCMS機能:スライドショーシステムの案内

文字サイズの変更
標準
背景色の変更
標準
音声読上げ版

スライドショーシステム案内


スライドショーとは

 本来、スライド(*1)ショーは、写真を順送りで動かす映写方法のことをいい、結婚式の披露宴においてカップル紹介や研究のプレゼンテーションなどに利用する技法でした。

 本システムでは、ホームページ上で写真やイラスト画像、テキストを複雑・高度な仕組みで動かすシステムとしてシステム化している点においてスライドショーと区別してスライドアニメーションという言葉を使用しています。

 従来、ホームページの作成において、写真やイラストやテキストをホームページ上でアニメーション(*2)させるFlash(*3:フラッシュ)という技法が多く利用されていました。Flashが利用されているかどうかでデザイン性も判断されるほどで、最近まで大手企業においても表紙がすべてFlashで作成されている事例もありました。このFlashによるコンテンツを作成するためには、Adobe Flash(アドビ・フラッシュ)というソフトとそのソフトの習熟が必要でありウェブデザイナー等専門的な知識・技術を持つスタッフしか作成できませんでした。

 しかしながら、Flashはアップル社のiPhoneやiPadでは動作しないということで、現在、利用する機種やOSに制限されないJavaスクリプト(プログラム言語)によってアニメーションさせる技法が主流となってきています。
 このJavaスクリプトによるアニメーション技術は、既に多くの政府省庁をはじめとした公共機関や大手企業において利用されていますが、本来この機能を利用するためには、プログラマーによる都度のプログラム作成が必要となり、Flashによるコンテンツ作成と同様に費用がかかってしまうものです。

 ・首相官邸:URL http://www.kantei.go.jp/
 ・経済産業省:URL http://www.meti.go.jp/ 

 そこで、@PAGE及び@WEBシステムにおいては、専門的なプログラムの知識がない事業者様でも容易に効果的なアニメーションを作成できるようにクラウドシステム(インターネット上でサーバ上のプログラムを利用する仕組み)で、「スライドアニメーション」のシステムを開発しました。


(*1) スライド:

本来、右の画像の様なポジティヴフィルム(現像済みのリバーサルフィルム)を映写機に充填し、スクリーンに向けて拡大像を投影すること、または、ポジティヴフィルム(概ね写真)そのものを指す語。

(*2) アニメーション:

コマ撮りなどによって、複数の静止画像により動きを作る技術。
パワーポイント等ソフトウェアにおけるアニメーション機能とは、ワイプやフェード等の効果をいう。

(*3) Flash(フラッシュ):

米国アドビシステムズが開発している動画やゲームなどを扱うための規格及びそれを制作する同社のソフトウェアの名称。


スライドショーシステム

スライドショーシステムは、画像サイズ調整等簡単な画像処理が可能であれば、誰でも容易にスライドアニメーションを作成できるつくばマルチメディアが独自に開発したシステムです。

アニメーションさせる画像を数枚入力し、リンクの設定、スタート時間と動作時間の設定、アニメーションの種類を選択すればスライドアニメーション作成が完了します。
作業が完了するとスライドアニメーションのプログラムが自動的に出力され、そのソースコードを別途動作させたいメニューのテキスト入力枠(HTMLモード)に貼り付けるだけで完了します。
以下の【簡易版】の事例では、スライド画像が6件入力されており順にスライドしていきます。スライド画像は、12件まで入力可能です。


スライドアニメーション簡易版の作成例です。


スライドショーシステムの主なアニメーションの種類

ベースとなる画像のアニメーションは、フェード、ズーム、縦カーテン、横カーテン、シャッフル、ワイプ、カバー、左スクロール、右スクロール、上スクロール、下スクロール、トス、ランダムの13種類があります。選択したアニメーションは、入力したスライド画像すべてに適用されますので、色々なアニメーションを使用したい場合は、ランダムを選択してください。

スライドショーシステムの主な機能

ページャの種類

ページャとは、スライドアニメーションで表示されるスライド画像の表示の切替を行う機能です。
デモ版では、スライドアニメーションの下の部分にサムネイルで表示されており、いずれかのサムネイルをクリックすると該当するスライド画像を表示することができます。
ページャの種類には、サムネイル画像、丸マーク、四角マーク、表示しないの4種類あり、表示位置を枠内あるいは枠外の左寄せ、中央、右寄せから選択できるようになっています。
また、ページャマークの色も自由に設定することが可能です。
サムネイル画像を選択した場合は、列数を4列、5列、6列から選択でき、スライド画像の大きさに合わせて、自動調整して表示されるようになっています。

ページャ設定例

ナビゲーション

ナビゲーションとは、スライド画像上にマウスカーソルを乗せた際に表示される「戻る」と「次へ」を示す矢印マークです。「戻る」を示す矢印マークが押された場合は、1枚前のスライド画像に切り替わり、「次へ」を示す矢印マークが押された場合は、1枚先のスライド画像に切り替わります。
非表示、表示を選択できます。

時間設定

ベースとなるスライド画像1枚毎の表示時間と、次のスライド画像に切り替わるまでの開始から停止までの時間をミリ秒(1/1000秒)単位で設定することが可能です。