CMS Designer - CMSを顧客のwebに簡単導入!
デザイン自由&シンプル設計。RSS対応。
デザイナー向け低価格web更新ツール。
TOPへ製品についてご購入ダウンロード導入事例よくあるご質問ユーザーフォーラム
TOP > CMS活用講座 > 設置・インストール編

CMS Designer活用講座


動画風スライドショー・ブログパーツ

難易度 ★★★☆☆
 CMS Designerからアップロードした写真を、動画風に表示するFlashブログパーツを作成しました。
 静止画の写真を、ズームやパン(移動)、フェード・エフェクトなどを駆使してまるで動画のように印象的に表示します。
 このブログパーツはCMS Designerと組み合わせた場合のみ無償でご利用頂けます。
 
 サンプルはこちらです。(「石窯ぱん工房 野の花」様にご協力頂きました。この場を借りてお礼を申し上げます)
石窯ぱん工房 野の花
 写真や説明文をクリックすると、関連ページへジャンプさせることができます。
 これらの写真、説明文、クリック時のジャンプ先は、全てCMS Designerから管理できます。
 写真の大きさは、幅480px~640pxぐらいにして下さい(スキーマ側でwidth/heightを指定しておくと自動的に縮小されるので便利です)。
 
 そのコンテンツを表示する詳細ページを別途CMS Designerで構築している場合、URLをわざわざ指定せずとも、自動的にeidを付与して詳細ページへジャンプさせる事も可能です。

ブログパーツ本体のダウンロード


●ブログパーツ本体:cmsdslide_20070705a.zip

 ブログパーツ本体は、次のファイルにより構成されます。

cmsdslide_myphoto.php(データ取得用PHP。各自で作成。ファイル名は任意)
cmsdslide_logo.gif(ロゴ画像。各自で作成。ファイル名は任意。jpg/png等でも可。)
cmsdslide.config.xml(各自で作成。名前変更不可)
cmsdslide.js(Flash表示用のJavaScript)
cmsdslide.swf(スライドショーのFlash swfファイル)
slideshow.schema.xml(サンプル・スキーマ)
sample.html(HTMLへの貼り付け例)

利用シーン

  • イベントサイトや販売サイトなどで、動きのあるコンテンツとしてちょっとしたアクセントに利用することができます。
  • 宝石やアクセサリー、観光写真など、一般のお客様が「自分のブログに貼りたい!」と思うような写真をブログパーツにして配布することができます。口コミ的な集客効果が見込めます。
  • 例)「○○町 観光名所ブログパーツ」
  • 例)「イタリアン○○ 季節の料理ブログパーツ」
  • 例)「○○宝石店 今月のハッピージュエリー・ブログパーツ」

ブログパーツの貼り付け方法(例)


 このブログパーツは、scriptタグが利用可能なブログサービスや、通常のホームページ上などに簡単に貼り付けて貰うことができます。

 例えば上記「石窯工房 野の花」様のサンプルの場合、次のコードを貼り付けるだけでOKです。
<div style="margin-bottom:25px; width : 170px; text-align : center;"><a href="http://cms.al-design.jp/" style="text-decoration  : none; color : orange; font-size : small; display : block;">あなたのサイト名</a><script type="text/javascript">var cmsdSlideShow={ 'background':'display', 'swfurl':'http://cms.al-design.jp/cmsdslide.swf' };</script><script type="text/javascript" src="http://cms.al-design.jp/cmsdslide.js"></script></div>
 ブログパーツを配布する場合は、「このブログパーツを自分のブログに貼るには」のようなページを作成し、そこで上記コードを配布するようにします。
 尚、これはブログパーツを貼り付ける側の話で、ウェブサイト制作者がこのブログパーツを配布可能にするには次の設置作業が必要となります。

設置方法


 設置の前に、表示対象となる画像項目や説明文などを含むスキーマ、エントリフォルダを作成します。
 例として、次のようなシンプルなスキーマから生成されたエントリフォルダを想定します。

◎slideshow.schema.xml
<?xml version="1.0" encoding="UTF-8"?>
<schema name="slideshow" caption="スライドショー" title="title" >
    <data type="text" name="title" caption="写真タイトル" output="text2" />
    <data type="img" name="image" caption="写真" width="480" height="480" />
    <data name="url" type="text" caption="クリック時のジャンプ先URL" output="text1" />
</schema>
 エントリフォルダ名をここでは cmsdslide_myphoto とします。
 
◎site.config.xml (の一部)
<entry name="cmsdslide_myphoto" schema="slideshow" caption="スライドショー(写真集)" />
 もし、既に写真付きのエントリフォルダがあるならば、それをそのまま流用可能です。
 
 写真をいくつか登録してみて下さい。
 
 これでコンテンツの準備はできました。次にブログパーツ本体を設置します。
 ブログパーツの各種ファイルを次のようにアップロードして下さい。

yourdomain.com/
 cmsdslide_myphoto.php(データ取得用PHP。各自で作成。ファイル名は任意)
 cmsdslide_logo.gif(ロゴ画像。各自で作成。ファイル名は任意。jpg/png等でも可。)
 cmsdslide.config.xml(各自で作成。名前変更不可)
 cmsdslide.js(Flash表示用のJavaScript)
 cmsdslide.swf(スライドショーのFlash swfファイル)

 各種ファイルの設定方法は次の通りです。

◎cmsdslide_logo.gif
 ダウンロードできるサンプルでは、CMS Designerのロゴマークが入っていますので、必ず差し替えて下さい。
 サンプルの例のように、そのサイトのロゴマークを使うのが手っ取り早いと思います。
 大きさは160×120ドットぐらいが良いと思います。
 ファイル形式はgif以外でもpngやjpgなどでも構いません。

◎cmsdslide_myphoto.php
<?php require( "cmsdesigner/include/view.php.inc" ); ?><cmsd:entrylist name="cmsdslide_myphoto" output="xml" rows="999" ></cmsd:entrylist><?php cmsd_end_template(); ?>
 中身は、単にcmsd:entrylistがあるだけのシンプルなソースです。output="xml"と指定することで、デザイン定義を介さずにXMLデータがそのまま出力されます。
 name属性を、各自に合わせて編集して下さい。ファイル名は任意で構いません。
 
 次に、このブログパーツの設定ファイルを作成します。

◎cmsdslide.config.xml(最小の設定)(※UTF-8で保存して下さい)
<?xml version="1.0" encoding="UTF-8"?>
<cmsdslideconfig
    serverUrl="http://yourdomain.com/"
    xmlFilename="cmsdslide_myphoto.php"
    imageLogoFilename="cmsdslide_logo.gif"
    websiteName = "私の写真集"
/>

  • serverUrl : ブログパーツ本体が置いてあるサーバURL。例) http://cms.al-design.jp/
  • xmlFilename : XMLデータ取得用phpファイル名。例) cmsdslide_myphoto.php
  • imageLogoFilename : イメージロゴのファイル名。例) cmsdslide_logo.jpg
  • webSiteName : サイト名。例) 私の写真集
 上記は最低限の設定で、細かい設定が必要な場合は「補足事項1」をご覧下さい。
 このファイルを文字コードUTF-8で保存します。

 最後に、このブログパーツを埋め込む為のコードを用意します。
<div style="margin-bottom:25px; width : 170px; text-align : center;"><a href="http://yourdomain.jp/toppage.html" style="text-decoration  : none; color : orange; font-size : small; display : block;">あなたのサイト名</a><script type="text/javascript">var cmsdSlideShow={ 'background':'display', 'swfurl':'http://yourdomain.com/cmsdslide.swf' };</script><script type="text/javascript" src="http://yourdomain.com/cmsdslide.js"></script></div>
 上記の内容のうち、下記の部分を各自のドメインに合わせて変更して下さい。
 
 (1)「http://yourdomain.jp/toppage.html」の部分。
 (2)「あなたのサイト名」の部分。
 (3)「http://yourdomain.com/cmsdslide.swf」の部分。
 (4)「http://yourdomain.com/cmsdslide.js」の部分。
 
 ファイルを全てアップロード後、上記コードをブログ等に貼り付ければ、ブログパーツが表示されます。
 
 下記の行の、'display'を'none'に変えると、ブログパーツの背景に表示されるグレーのパネルを非表示にすることができます。
 var cmsdSlideShow={ 'background':'display', 'swfurl':'http://yourdomain.com/cmsdslide.swf' };
 デザイン上、パネルが不要な場合に指定して下さい。 
 style属性の値などは自由に変更して構いません。

補足事項1:cmsdslide.config.xmlの詳細設定


 cmsdslide.config.xml のその他の詳細設定一覧です。

◎cmsdslide.config.xml(全ての設定)
<?xml version="1.0" encoding="UTF-8"?>
<cmsdslideconfig
    serverUrl="http://yourdomain.com/"
    xmlFilename="cmsdslide_myphoto.php"
    imageLogoFilename="cmsdslide_logo.gif"
    websiteName = "石窯ぱん工房 野の花"

    websiteUrl="http://ishigama.shop-pro.jp/"
    detailFilename=""
    imageWidthMax="480"
    imageHeightMax="480"
    itemNameImage="image"
    itemNameTitle="title"
    itemNameUrl="url"
/>
 通常は、タイトルロゴ表示中に画面をクリックすると、serverUrlへジャンプしますが、websiteUrlに別のURLを指定することもできます。
 
 各エントリの詳細情報表示用のページが存在する場合、detailFilenameを設定すると、各写真をクリックした際にそのページへジャンプさせることができます。detailFilename="detail_myphoto.php"のように指定して下さい。
 
 サンプルのスキーマでは、image項目にwidthとheightが指定されており、大きすぎる画像は自動的に縮小されますが、既存のエントリを流用する場合などに、元画像が大きすぎることがあります。
 この場合には、imageWidthMax、imageHeightMaxを480ぐらいに設定して下さい。
 
 規定値ではスキーマ上の画像用項目名はimage、タイトル用項目名はtitle、URLはurl、と決められていますが、既存のスキーマを流用する場合など、他の項目を使用することもできます。
 この場合には、以下の設定値を指定します。

 itemNameImage : スキーマの画像項目名。例) image
 itemNameTitle : スキーマのタイトル項目名。例) title
 itemNameUrl : スキーマのURL項目名。例) url

分からない事があったら・・・


 ご不明な点がございましたら、ユーザーズフォーラムまでお気軽にご質問下さい。
 いつでもお待ちしております。