第12回ありがとうございました
お盆の真っただ中無謀にも開催させていただきましたが、途中参加の方も含め11名様のご参加をいただきました。ほんとにありがとうございます。
今回は
●jqueryを使用したプログラミングの基礎
●RSSフィードを取得してのブログ記事のマージサンプル
●大抵必要になるけど、いつもデザイナーは後回しにしてしまうメールフォームを簡単に作成できるプログラムの紹介
●案件を持ち寄っていただいてのブレスト
などを行いました。
----------------------------------------------
■FeedをクライアントでマージするJSについて
・概要およびソースは、以下にまとめました
http://lab.sarusaruworld.com/web_creative/rssjavascript.html
----------------------------------------------
■sarusaurMailFormについて
■特徴
・基本的なメールフォームなら、3分で組み込めるカンタン設計
・HTMLの<input>を置き換えるだけなので、デザインがそのまま
→Dreamweaverのデザインビューで埋め込める
・「電話番号欄追加して」「やっぱやめて」などの項目の増減が、2秒でできる
・ラジオボタン→プルダウンなど、形式の変更が2秒でできる
・<label>タグなども自動で設定される
・ロリポ＆heteml、Xserverなどで動作する
■必要なもの
【同梱ファイル】
・sarusaruMailForm_conf.php ・・・設定ファイル（要編集）
・sarusaruMailForm_bt_edit.gif ・・・「編集する画像」（編集不要）
・sarusaruMailForm_lib.php ・・・ライブラリファイル（編集不要）
【用意いただくファイル】
・フォームHTML ・・・フォーム用HTML
・ThanksHTML ・・・完了画面HTML
■手順
１．フォームHTML用の拡張子を「php」に変更
・htaccessでphpとして動作させる場合は不要
２．お約束の3要素を埋込み（sample.phpのコメントを参照）
１．ファイルの先頭に入っているinclude関数
２．<form>タグ直下に入っているチェック関数
３．<input type="submit">の代わりに置くボタン関数
３．Form関連のタグを、関数に置き換え
・sample.phpに用意された各項目をコピー＆ペースト
（Dreamweaverのデザインビューからのコピー＆ペーストでもOK）
４．差出人アドレス・宛先・ThanksHTMLのURLなどを設定
・sarusaruMailForm_conf.php内を編集
（必要に応じて、送信メールテキスト・自動返信設定・CSV保存・ボタンデザインなども編集できます）
■関連URL
・sarusaruMail説明
http://lab.sarusaruworld.com/web_creative/sarusarumailform_html.html
・最新ソースダウンロード
http://lab.sarusaruworld.com/web_creative/sarusarumailform095.html
----------------------------------------------
■youtubeビデオのデザインカスタマイズについて
colorパラメータなどを設定するとお客さんのコーポレートカラーなどがあってもデザインをあわせられますよ。
■こんなパラメータがあります。
○rel
値: 0 または 1。デフォルトは 1 です。最初の動画の再生が始まった後に、関連する動画を読み込むかどうかを指定します。関連する動画は、[menu] ボタンをクリックするとジニー メニューに表示されます。
○autoplay
値: 0 または 1。デフォルトは 0 です。プレーヤーが読み込まれたときに、最初の動画を自動再生するかどうかを指定します。
○loop
値: 0 または 1。デフォルトは 0 です。1 を設定すると、単独の動画プレーヤーの場合は最初の動画が繰り返し再生されます。再生リスト プレーヤー (またはカスタム プレーヤー) の場合は、再生リスト全体が再生された後で、また最初の動画から再生が始まります。
○enablejsapi
値: 0 または 1。デフォルトは 0 です。これを 1 に設定すると、Javascript API が有効になります。Javascript API とその使い方については、JavaScript API のドキュメントをご覧ください。
○disablekb
値: 0 または 1。デフォルトは 0 です。1 に設定すると、キーボードによるプレーヤーのコントロールが無効になります。キーボードによるコントロールは以下のとおりです。
スペースバー: 再生/一時停止
左矢印: 現在の動画を再生し直す
右矢印: 現在の動画を 10% 先に進める
上矢印: ボリュームを上げる
下矢印: ボリュームを下げる
○egm
値: 0 または 1。デフォルトは 0 です。1 に設定すると、「拡張ジーニー メニュー」が有効になります。この拡張によりジーニー メニューは、[menu] ボタンをクリックしたときではなく、ユーザーのマウス ポインタが動画の表示領域に入ったときに表示されるようになります (ただしジーニー メニューが存在する場合のみ)。
○border
値: 0 または 1。デフォルトは 0 です。1 に設定すると、動画プレーヤーの周りに境界線が表示されます。境界線のメイン カラーは color1 パラメータで、サブ カラーは color2 パラメータで設定できます。
○color1, color2
値: 16 進数形式の RGB 値。color1 は境界線のメイン カラー、color2 はコントロール バーの背景色と境界線のサブ カラーです。
○サンプルソース
<object width="480" height="383">
<param name="movie"
value="http://www.youtube.com/v/(動画のID)&rel=0&color2=0xfcf9e2&color1=0x007236&border=0">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/ (動画のID) & rel=0&color2=0xfcf9e2&color1=0x007236&border=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="383"></embed>
</object>
■サムネイル画像もyoutube側で取得できるのでお手軽です。
http://i1.ytimg.com/vi/ (動画のID) /1.jpg
動画のはじめ
http://i1.ytimg.com/vi/ (動画のID) /1.jpg
動画のまんなか
http://i1.ytimg.com/vi/ (動画のID) /1.jpg
動画の終わり
■FeedをクライアントでマージするJSについて
・概要およびソースは、以下にまとめました
http://lab.sarusaruworld.com/web_creative/rssjavascript.html
----------------------------------------------
■sarusaurMailFormについて
■特徴
・基本的なメールフォームなら、3分で組み込めるカンタン設計
・HTMLの<input>を置き換えるだけなので、デザインがそのまま
→Dreamweaverのデザインビューで埋め込める
・「電話番号欄追加して」「やっぱやめて」などの項目の増減が、2秒でできる
・ラジオボタン→プルダウンなど、形式の変更が2秒でできる
・<label>タグなども自動で設定される
・ロリポ＆heteml、Xserverなどで動作する
■必要なもの
【同梱ファイル】
・sarusaruMailForm_conf.php ・・・設定ファイル（要編集）
・sarusaruMailForm_bt_edit.gif ・・・「編集する画像」（編集不要）
・sarusaruMailForm_lib.php ・・・ライブラリファイル（編集不要）
【用意いただくファイル】
・フォームHTML ・・・フォーム用HTML
・ThanksHTML ・・・完了画面HTML
■手順
１．フォームHTML用の拡張子を「php」に変更
・htaccessでphpとして動作させる場合は不要
２．お約束の3要素を埋込み（sample.phpのコメントを参照）
１．ファイルの先頭に入っているinclude関数
２．<form>タグ直下に入っているチェック関数
３．<input type="submit">の代わりに置くボタン関数
３．Form関連のタグを、関数に置き換え
・sample.phpに用意された各項目をコピー＆ペースト
（Dreamweaverのデザインビューからのコピー＆ペーストでもOK）
４．差出人アドレス・宛先・ThanksHTMLのURLなどを設定
・sarusaruMailForm_conf.php内を編集
（必要に応じて、送信メールテキスト・自動返信設定・CSV保存・ボタンデザインなども編集できます）
■関連URL
・sarusaruMail説明
http://lab.sarusaruworld.com/web_creative/sarusarumailform_html.html
・最新ソースダウンロード
http://lab.sarusaruworld.com/web_creative/sarusarumailform095.html
----------------------------------------------
■youtubeビデオのデザインカスタマイズについて
colorパラメータなどを設定するとお客さんのコーポレートカラーなどがあってもデザインをあわせられますよ。
■こんなパラメータがあります。
○rel
値: 0 または 1。デフォルトは 1 です。最初の動画の再生が始まった後に、関連する動画を読み込むかどうかを指定します。関連する動画は、[menu] ボタンをクリックするとジニー メニューに表示されます。
○autoplay
値: 0 または 1。デフォルトは 0 です。プレーヤーが読み込まれたときに、最初の動画を自動再生するかどうかを指定します。
○loop
値: 0 または 1。デフォルトは 0 です。1 を設定すると、単独の動画プレーヤーの場合は最初の動画が繰り返し再生されます。再生リスト プレーヤー (またはカスタム プレーヤー) の場合は、再生リスト全体が再生された後で、また最初の動画から再生が始まります。
○enablejsapi
値: 0 または 1。デフォルトは 0 です。これを 1 に設定すると、Javascript API が有効になります。Javascript API とその使い方については、JavaScript API のドキュメントをご覧ください。
○disablekb
値: 0 または 1。デフォルトは 0 です。1 に設定すると、キーボードによるプレーヤーのコントロールが無効になります。キーボードによるコントロールは以下のとおりです。
スペースバー: 再生/一時停止
左矢印: 現在の動画を再生し直す
右矢印: 現在の動画を 10% 先に進める
上矢印: ボリュームを上げる
下矢印: ボリュームを下げる
○egm
値: 0 または 1。デフォルトは 0 です。1 に設定すると、「拡張ジーニー メニュー」が有効になります。この拡張によりジーニー メニューは、[menu] ボタンをクリックしたときではなく、ユーザーのマウス ポインタが動画の表示領域に入ったときに表示されるようになります (ただしジーニー メニューが存在する場合のみ)。
○border
値: 0 または 1。デフォルトは 0 です。1 に設定すると、動画プレーヤーの周りに境界線が表示されます。境界線のメイン カラーは color1 パラメータで、サブ カラーは color2 パラメータで設定できます。
○color1, color2
値: 16 進数形式の RGB 値。color1 は境界線のメイン カラー、color2 はコントロール バーの背景色と境界線のサブ カラーです。
○サンプルソース
<object width="480" height="383">
<param name="movie"
value="http://www.youtube.com/v/(動画のID)&rel=0&color2=0xfcf9e2&color1=0x007236&border=0">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/ (動画のID) & rel=0&color2=0xfcf9e2&color1=0x007236&border=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="383"></embed>
</object>
■サムネイル画像もyoutube側で取得できるのでお手軽です。
http://i1.ytimg.com/vi/ (動画のID) /1.jpg
動画のはじめ
http://i1.ytimg.com/vi/ (動画のID) /1.jpg
動画のまんなか
http://i1.ytimg.com/vi/ (動画のID) /1.jpg
動画の終わり
