5509

【必要なかった】動的に読み込んだ画像の高さ・幅が取得できるタイミングでコールバックを実行するm5ImgLoad

追記:うーん、なんか色々あかんっぽい。わかる人以外はとりあえず放置してくださいーそもそも必要なかった感じでした

$("").load(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

とかやると高さと幅を取得できたりできなかったりするので、.load()に置き換わるようなやつ書いといた。単純に置き換えるだけ使えるはずーだめだった

$("").m5ImgLoad(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

結局のところ、.load()メソッドで取れてた

$("").load(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

↑これみたいに、width()、height()メソッドを使うと動的に呼び出した画像に対しては0で返されるので、、、

$("").load(function() {
  alert("width: " + $(this).attr("width") + "\nheight: " + $(this).attr("height"));
});

↑画像の属性から取ればいける感じです。これはどんな場合でもいけるんかなぁー

動作サンプル

サンプル
左のボタンはただの.load()メソッドでこれだと高さと幅が取れないけど、右の.m5ImgLoad()メソッドを使えば高さと幅がとれとりますね

img.completeを使ってみたっすよ。

ダウンロードとか

ダウンロードとかソースコードはgithubからどぞー

https://github.com/5509/m5ImgLoad

対応ブラウザ

クロスブラウザ的なのはどうでしょう。手元のIE6~8、Safari5、Fx3、Chrome9、Opera10は問題なかったけど・・・バグとかあったらフォークして教えてください^ω^

第5回リクリセミナー「明日からjQueryがもっと好きになる。」が開催されます

12月に出版された著書の西畑さん中村さんとセミナーを行います。お二人のお話が同時に聞けるセミナーはなかなかないので関西圏の方はぜひ参加を・・・!(僕のセッションはトイレ休憩に行くとか寝るなど有意義におすごしください)

冗談はさておき、僕のセッションではUIの設計からjQueryでの実装までをフローとコードで解説しようと思っています。対象は中級者くらいになると思いますが、なるべくわかりやすく説明しますので、よろしくお願いします :)

明日からjQueryがもっと好きになる。jQuery セミナー - 第5回リクリセミナー

<イベント名>
第5回リクリセミナー 『明日からjQueryがもっと好きになる。』
<日時>
2/20(日) 15:0018:00
<場所>
デジタルハリウッド大阪校 地下セミナールーム
(大阪市北区西天満6-5-17 デジタルエイトビル地下1F)
<参加費>
一般:4,000円
デジハリ生:無料(※学生証をお持ちください。)

※スポンサーの協賛、参加者の人数に応じてディスカウント予定です。
講師陣の書籍、『jQuery逆引きマニュアル』を持参し、受付で提示していただきますと500円割引をいたします。
※対象は一般の参加者のみとなります。

<定員>
80名
<参加方法>
セミナー特設ページから参加表明して下さい

URL:http://www.re-creators.jp/vol5/

<懇親会>
セミナー終了後、18:30から開催予定。

via: 2/20(日)第5回リクリセミナー「明日からjQueryがもっと好きになる。」参加受付開始!

YouTube(HTML5で表示しているもの)から動画をダウンロードするためのブックマークレット

HTML5(というかvideo要素)で表示されている場合は簡単に閲覧可能な動画をダウンロードすることができます。

この辺Flashだとflvだったりして再生しにくかったりするのが、HTML5だとmp4とか割と再生しやすいファイルになるので便利かも。ChromeとかSafariで実行するのがおすすめです。

ブックマークレット

以下のリンクをブックマークバーにドラッグして、YouTubeのサイトでクリックするだけです。クリックすると動画ファイルそのものが表示されるので、名前を付けて保存的なアクションで保存できます。

動画のファイル名は常に「videoplayback」になるので適当に変更したほうがよさそう。「WEBM」バッジがついている動画は形式がWEBMになっているのですがそのまま拡張子なしでダウンロードすると再生できないので、「.webm」の拡張子をつけるといいみたいです。.webmで保存するとVLCで再生できます。

ブックマークレット:HTML5動画からダウンロード

Read more

jQuery逆引きマニュアルのモニターを募集しています

先日出版された「」ですが、出版元のインプレスジャパンさんで読者モニターを募集しています。
なんと書籍ではなく、PDFの電子書籍です。電子書籍は非売品なので、興味のある方はよければ応募してみてください :)

申し込みページ(申し込みは終了しました)

<モニター応募要項>
●応募受付期間:2010年12月28日(火)~2011年1月11日(火)
●募集予定人数:最大30名(モニター事務局での選考とさせていただきます)
●応募方法:
最下部の「応募する」ボタンよりエントリーください。
モニター当選の方へは、応募受付終了後別途メールにて詳細をご連絡します。
●モニター実施予定期間:2011年1月14日(金)~2011年2月28日(月)(約1ヶ月間半)
●モニター品:『jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践』電子書籍版(PDF形式。本文のテキストコピー不可。サンプルコードはネット上で公開中 http://www.impressjapan.jp/support/aftercare/2961
●モニター期間中のお願い:
ブログやツイッターなどで以下のような感想・コメントを書いていただき、ぜひ読者の皆様でjQueryについての情報を共有しましょう!
◎本書のこの記事は試してみたい!
◎本書の内容をこんな風に試してみた
◎本書のこの記事は役に立ちそう
◎本書の内容をこんな風に応用した!
◎jQueryでこんなことがしたい!
◎jQueryでこんなことができた!
◎jQueryについてこんな新しい発見があった などなど
情報共有がスムーズに行えるように、本書専用のツイッターアカウントを設置しました。
ツイッターをご利用されている方は、ぜひこちらのアカウントのフォローをお願いいたします。
たくさんのご応募をお待ちしております!

動的にvideo要素の動画を入れ替えるときに気をつけること

HTML5ではvideo要素で(手軽に?)動画を再生できますが、枠だけ書き出しておいて(別にHTML直書きでいいですが)、動画を入れ替える場合は少し注意が必要です。たぶん。

現状で動画フォーマットがいくつか存在しますが、複数のフォーマットをサポートしたい場合は以下のように書きます。

動的に書き換えるので、次のような関数用意して再生したい動画のURLを入れればよさげです。

function playMovie(mp4, ogg) {
  $('#videoElm')
    .html([ // ソースファイルをつっこむ
      '',
      ''
    ].join(''));
}

playMovie(piyo.mp4, piyo.ogg);

で結局何に注意しないとあかんかっていうのは、このままだとiOSで再生ができないんですね。iOSはmp4ファイル等で再生す
るんですけど、source要素を動的につっこんでもだめな様子。。

追記:内容が曖昧すぎたので追記します。
iOSで再生ができない

iOSで入れ替えた動画が読み込まれず再生できない

なので以下のようになりました。
source要素を動的につっこむのではなく、素直にsrc属性に入れてるだけです。

function playMovie(mp4, ogg) {
  if ( /AppleWebKit/.test(navigator.userAgent) ) {
  // iOSのとき
    $('#videoElm')
      .attr('src', mp4); // 素直にsrc属性に書く
  } else {
  // iOS以外
    $('#videoElm')
      .html([
        '',
        ''
      ].join(''));
  }
}

※ UA判定はもっと良い方法あったらそっち使ってください。

Author

nori
nori
- UI Engineer
Location
- ,