サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
yurubu.org
ちょっと調べる機会あったので、メモ。 ライブ配信ではなく、動画のオンデマンド配信についてが中心になります。 HLS(HTTP Live Streaming)はサーバの特別な設定なしでストリーミングが出来るようです。 ライブ配信する時はリアルタイムで変換する必要があるのでFFMPEGと組み合わせて使用します。 クライアント側でやりくりしている部分があるためAppleのデバイス限定となります。 Appleの公式ドキュメントや参考にしたサイトは下記。 https://developer.apple.com/jp/devcenter/ios/library/documentation/StreamingMediaGuide.pdf (PDF) http://venture-blog.blogspot.jp/2012/05/http-live-streaming.html オンデマンドで動画を配信す
jQueryのcssでプロパティを直接いじるのだが、width, height は 180% とか指定できないのね。 なので、直接画像サイズを指定しました。(画像サイズ 32px × 1.8 ≒ 58px) んで、結局何がやりたかったのかというと、オンマウスでぷるんと出来んかなと。 width / height をいじると画像の左上を原点として拡大するので、同時にtop / left もいじることに。 位置調整用に<span>とか何かしらのタグで囲いつつ、position: relative にしておいてください。 var option = { duration: 'fast', easing: 'easeOutElastic' }; $('#target').hover(function(){ $(this).animate({ top: -13, left: -13 }, option
カスタムポストを利用するとパーマリンクがイマイチな感じになるので、試行錯誤してみました。 WordPress3.5 で、ブログサイトではなくビジネスサイトのCMSとして使用する前提です。 試したのはマルチサイトでしたが、そうでなくても大丈夫と思います、たぶん。 カスタムポストを使用するとパーマリンクは /custom_post_name/slug のようになります。 これだとお客さんとかに使ってもらう時にうっかりタイトル日本語で入れるとイロイロ面倒です。 管理画面からパーマリンクの設定を変更していたりするとスラッグの書き換えもできなくなったりしますし。 これを通常の投稿のように post_id で出来ないかとイロイロ調べていたら下記ページが見つかりました。 http://memocarilog.info/wordpress/theme-custom/3909 http://webpapri
<span id="slide">ここをクリック</span> <p id="target" style="display: none;">なんか表示</p> マウスクリックで閉じたり開いたりします。 jQuery ではアニメーションの速度を “slow”, “normal”, “fast” で指定できます。 $('#slide').click(function(){ if ($('#target').css('display') == 'none') { $('#target').slideDown('slow'); } else { $('#target').slideUp('fast'); } }); $(‘#target’).css(‘display’) でスタイルシートの display の状態を取得して、それにより処理を if 〜 else 文で分岐しています。 サンプル 20
クリックで開いたり閉じたりするのをサクっとつくるのに slideToggle 使うと便利。 slideUp, slideDown 組み合わせてもいいんだけど、こっちのが楽ね。
画像のプリロードは前にもやったんだけど少し小技をはさんでみた。 プリロードしたって間に合わん時は間に合わんので、せめて見栄えが悪くないようにしようかってはなしです。 下記の感じで画像のプリロード時に読み込み完了後の処理を指定しちゃいます。 var imagePath = '/images/'; var preloadImages = [ 'ooo.jpg', 'xxx.jpg', '***.jpg' ]; var images = []; (function($){ for (var i = 0; i < preloadImages.length; i++) { var image = new Image; image.src = imagePath + preloadImages[i]; images.push($(image).hide()); (function(i){ image.
ありがちな画像をフェードインで複数見せるヤツです。 画像をクリックするとリンク先に飛ぶようにします。 下記のようにリンク付き画像をまとめて指定することにします。 <div id="target"> <a href="http://..."><img src="A.png" /></a> <a href="http://..."><img src="B.png" /></a> <a href="http://..."><img src="C.png" /></a> </div> ただ、画像を重ねた状態でのフェードイン・フェードアウトってリンクとか他のタグがあるとうまくいかないので、画像だけになるようにJavaScriptでいったん再構成します。再構成後のHTMLは最大でもフェードインとフェードアウトの画像が2枚ある感じ。 あ、ついでに #target ではこの2枚の画像が重なるように CSS
2012.01.09追記 読み込み後にエフェクト入れたものはこちら JavaScriptで動的にタグを書きだしたりすると、その部分の画像が表示されてから読み込まれるのであらかじめ読み込んでおこうというよくある話。 とりあえず画像を配列とかに指定、パスは /images 配下に固定で。 (function(){…})() に記述するのは、他のJavaScriptとか読み込む時に変数名とか重複しないよう念の為。 (function(){ var preloadImages = [ 'ooo.jpg', 'xxx.jpg', '***.jpg' ]; for (var i = 0; i < preloadImages.length; i++) { (new Image()).src = '/images/' + preloadImages[i]; } })();
前回のスライドショーによくあるナビつけてみることに。 任意の写真をクリックで選べるようにします。 ナビをクリックすると自動再生されてるアニメーション(フェードイン・フェードアウト)を停止して、指定のスライドを表示、しばらく放置すると自動再生再開するようにします。 アニメーションは setInterval で再生しているので、clearInterval にて停止するだけ。アニメーション再開は一定時間操作しない時間帯を持ちたいので setTimeout で待機するようにします。 var interval; // スライド再生 function startSlide(wait){ wait = wait | 0; var intervalTime = 3000; setTimeout(function(){ interval = setInterval(function(){ // アニメーショ
2012.05.31 追記 ブラウザ判定がうまく動かなくなってたので、transform が使用できるかで判定するように変更しました。 機能の判定はブラウザのバージョンアップで変わってくので別の用途には使うべきじゃないね… CSS3どころかCSSも普段あまりいじらないけど、回転・拡大縮小できる transform があるというコトなのでやってみる。 んでも、まだまだブラウザごとに実装が異なるらしく、jquery-css-transform.js と jquery-animate-css-rotate-scale.js っていう jQuery プラグイン使いましょうってのが多かったので、これを参考にしてみた。 CSS3では、transform: rotate(30deg) で要素を時計回りに30度回転、transform: scale(1.5) で要素を1.5倍とかいった指定が可能。んで、こ
WordPressでトップページにお知らせなどヘッドライン表示したい場合のやりくり。 1. まずは自分自身の更新情報取ってくるとき <?php $feed = new WP_Query(array( 'cat' => 1, 'posts_per_page' => 5 )); ?> <div class="feed"> <?php if ($feed->have_posts()): // データあったら表示 ?> <ul> <?php while($feed->have_posts()): ?> <?php $feed->the_post(); ?> <li> <a href="<?php the_permalink() ?>"> <span class="date"><?php the_time('Y.m.d'); ?></span> <span class="title"><?php e
画面下までスクロールすると次のページを読み込んでくれるヤツですね。 イロイロ見てると次のような考え方みたいす。 対象コンテンツの下端の位置座標が表示エリア(ウィンドウ下端)に近づいたら、続きを読み込みます。これを、ウィンドウをスクロールした時にチェック。 まず、コンテンツの下端の位置座標を求める。対象エリアの id 属性が target なら、以下。
var target = $('html, body'); target.animate({ scrollTop: ***, 'slow' }); // *** にスクロールする座標を指定します 追記: 2011/01/31 if (jQuery.support.checkOn) { var target = $(‘html’); } else { var target = $(‘body’); } という書き方を var target = $(‘html, body’) に変更しました。 指定のタグの位置に移動するなどの場合は動的に座標取得したりします。
このページを最初にブックマークしてみませんか?
『https://yurubu.org/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く