Youtube javascript API iframe版で悩んで、jQueryの動作(IE上)を改めて知った。

Youtubeのapiはこれまで触ったことはあったのですが、iframe版というかiPhone,iPadにも対応したjavascriptのapiを触る機会がありまして色々とその周辺で困ったこと、調べてみてわかったことがあったので、備忘録の意味も込めて、書き込みます。

 

まず、このapiについての情報は以下のURLからアクセスして確認。

 

[YouTube JavaScript Player API リファレンス – YouTube の API とツール – GoogleCode]
http://code.google.com/intl/ja/apis/youtube/js_api_reference.html

[YouTube API Blog: Introducing JavaScript Player API for iframe embeds]
http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

[YouTube Player API Reference for <iframe> Embeds – YouTube APIs and Tools – Google Code]
http://code.google.com/intl/ja/apis/youtube/iframe_api_reference.html

 

まずは設計

これらのサイトを見ながらjQueryとあわせて、こんな処理をしようと思ったわけです。

1.ページ読み込み時は、動画は表示されていない
2.バナーをクリックしたら、メインエリアの画像がフェードアウトして、動画(Youtube)がフェードインしてくる
3.フェードインしたら、自動的に再生され、動画が終了したら自動的にフェードアウトする

ざくっといえば、このような処理内容です。

 

これをjQueryと合わせるためにイメージしたことは、

1.youtube読み込み用のタグを用意しておくけど、そのタグ自体はdisplay:noneや、jQueryのhide()で消しておく
2.その読み込み用のタグをターゲットに、youtubeのapiを使ってYoutube(iframe)を適用させる
3.トリガーとなるボタンをクリック(.click)したら、メインイメージをfadeOutさせ、同時にhide()していたYoutube用タグ(すでにiframe適用)をfadeInさせ、いわゆるディゾルブ効果をつける
4.タイミングにはよるが、読み込みが走りきったらYoutubeのapiを使って、playVideo()を作動
5.再生が終わったら(ステータスで取得)、fadeOutさせながらメインイメージをfadeIn

みたいなことをイメージしてコーディングをはじめたわけですが、いくつか躓きました(初歩的な部分なのかもしれませんが。。。)

続きを読む

inputタグでsubmitをエンターキーで操作させないためには。

基礎的なことかもしれないが、初めてだったので、メモ。
inputタグでsubmit属性を指定したときに、エンターキーをおしたらデータが送信されるので、
どうもユーザビリティ的に気になるところが多々あった。
例えば

色々入力項目があるときに、思わずエンターキーを押してしまった時にいきなり別のページに行ってしかもエラーでてんじゃん!って感じ。

それの解消方法は、

inputタグのtype属性を単純にbutton属性にして、onclickイベントでsubmit();を指定すること。

つまりコードで書くと、

<input type=”button” value=”送信” onclick=”submit();” />

こうすることでエンターキーでのデータ送信を解除でき、実際に送信ボタンをクリックすることでデータ送信が可能という流れを作ることができる。

今更ながら、メモでした。

jQueryでCookieを簡単につかう方法。

ちょっと仕事でクッキーを使うことがあって、いろいろ調べていたら、
javascriptライブラリjQueryでcookieを超簡単に扱う方法 : 4GALAXYのメモ
にであう。

この記載事項に従ってやってみたら、あら不思議。あっという間に出来上がってしまった。

この記事にも書いてあるが、ますますjQueryがいい感じに思えてきた。

ちなみに、他の関連サイトも記載。
JavaScriptでcookieを操作する時はjquery.cookie.jsを使おう – 文殊堂
jQueryとjquery.cookie.jsを使って開閉を保持するメニューを作ってみる|caraldo.net | MT Blog

【追記】
cookieを書き変えるには、一度破棄して再度設定する。
今回はフォントサイズ変更でこの処理を用いたけど、ページ移動の際に、そのまま書きこむ形をとると失敗。一度、null値などで初期化(リセット)してから再度cookieにセットするとうまくいく。
という追記。

今更ながら、jQueryが新しく。。。

jQueryが新しく、1.3シリーズが出てきた。どんな風に改良されたのか、これから勉強とテストを繰り返していくことになるが、参考になるサイトがあったので、メモがてらエントリー。

基本的にこのサイトを参考にさせてもらいながら、色々テストをしてく予定。
できれば、自分のなにかも作りたいけど・・・。そんなところ。

■参考サイト

jQuery 1.3.1 日本語リファレンス

jQueryでpost

先の記事と同じなんだが、プログラムを作っているときに、Ajaxを使って、ページ遷移なくいろいろしたいと思った。
ので、Ajaxの中でもjQueryをこの際使ってみようということで、いろいろ調べたりしたので、メモ。

jQueryでAjax通信をするための方法は、

function Ajax通信をする関数(){$.post(“宛先のファイル”,{送るデータ},コールバック関数);}
function コールバック関数(data){}

でできる。

$.postで通信処理を行うが、
第1引数の部分には、送る先のファイル名を記載する。もちろんこのときはパスを書き込む。

第2引数には、POST送信するデータを記載する。
記載の方法は、
ポスト送信名:その値

たとえば、jQueryで書くと、

<input type=”text” name=”soushin” id=”soushin” value=”hogehoge” />

の値をとりたいのであれば、

soushin:$(“#soushin”).val()

と書けば、
例えば、PHP側で

$postdata = $_POST[‘soushin’];

で受け取ることができる。

コールバック関数には、引数をつけると
その引数には、返ってきた値が入る。

このやり方を使えば、簡単にPOST送信が可能になる。

lightwindowのローカルファイル表示

ちょっと躓いてしまったので、自省も含めてメモ。
lightwindowでローカルファイルを表示したいときには、他サイトを表示するような
<a href=”hogehoge.html” class=”lightwindow”>○○</a>

では動かない。ローカルファイルを指定するときは、paramsの指定が必要。

以下のように書くとうまくいく。

<a href=”hogehoge.html” class=”lightwindow” params=”lightwindow_type=external“>○○</a>
※強調の意味で太字にしてます。

この書き方をするとローカルファイルもlightwindowで表示が可能となります。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
以下お知らせ。

jQuery関連記事まとめ

Cyokodog::Diaryさんのページに大変重宝しそうな、記事が。
その名も「jQuery関連記事まとめ」

ここね↓

http://d.hatena.ne.jp/cyokodog/20081016/jquerylinks01

jQueryは以前は、俺はホッテおいた。あまり興味もなかったし、どっちかというとAjaxライブラリの中では、prototypeのほうをメインに考えていた。
しかし、益子さんの講義にでたときに、jQueryってすげーってことになって、それ以来お世話になりっぱなし。

いろいろできんだなーって思っていたら、思っていたよりもさらにいろいろできることがどんどんわかってくる。しかもセケンの偉い人たちがいろいろと開発してくれてる。XHTML+CSSにおいて、ちょっとしたエフェクトを使いたいときはかなりいい。

でも、あまりひどく使いすぎると、俺の目指す「いろんな人が同じようなレベルで情報を得ることができるサイト」から離れてしまうので、あくまで、「気の利いた」程度に使うよう自粛しながらいかないといけない。

まーとにもかくにも、上記のサイトはかなり重宝しそうだ。