video要素のループを滑らかにする - Qiita
video要素が抱える問題 video要素のloop属性によるループは、動画が最後まで再生し終えてから再開するまでの間に時間差があり、カクついて見えてしまいます。 デバッグのためにローカル環境でページを閲覧している際は時間差が短く、一見問題が無いように見えてしまいます。しかし、同じページをサーバーにアップロードして確認すると、ループのつなぎ目で、明らかに動画が停止した時間が生じていることがわかります。 今後のブラウザのアップデートで改善されるかもしれない問題ですが、当面は解決策が必要です。 JavaScriptでループを「作る」 この問題の解決手段として、「同一のvideo要素を同じ位置に2つ重ね合わせてJavaScriptで交互に再生する」という方法があります（html5 - VideoJS - Seamless Looping Video - Stack Overflow)。 一方のv
レスポンシブのサイトでスマホの時だけtelリンクを有効にする ｜ Tips Note by TAM
PCサイトに電話番号を記載する場合は、テキストか画像で電話番号を表示し、 スマホサイトなら、電話番号にtelリンクを貼って、スマホから 直接電話をかけられるようにすると思います。 PC・スマホ・タブレットと、さまざまなデバイスにワンソースで対応している レスポンシブのサイトの場合はどうでしょうか。 ソースにあらかじめtelリンクを設定しておくと、PCで見た際に 「プロトコルが不明」「開けません」というメッセージが返ってきてしまいます。 （もともとtelリンクは、ガラケーやスマホ向けの機能なので、当然と言えば当然です） telリンクを設定しなければ問題ないのですが、そうすると、スマホで見たときに、 電話番号をタップして電話をかけることができません。 電話をかける機能があるのに直接電話できないのは、ちょっと不親切です。 こういう時は、JS・jQueryを使って、スマホの時だけ電話番号にtelリ
kazunori-lab.com - kazunori lab リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jquery を使わないfix height | devLog
スマホコーディングなど、「軽量化！軽量化！」と叫ばれる中でNo jQueryが求められる事がある。 そんなときには要素の高さをそろえる位は、jquery を使わずにやってしまいたい。 １．javascriptで、getElementsByClassNameが必要。 function myGetElementsByClassName (_class , _tag , _id) { var targetId , elementList , classList , i , j , nodes = []; targetId = document.getElementById(_id); elementList = targetId.getElementsByTagName(_tag); for (i=0; i < elementList.length ; i++ ) { classList = e
連載 | パフォーマンスチューニング | HTML5Experts.jp
Webサイトやモバイルアプリなどのパフォーマンスチューニングについて、豪華エキスパート執筆陣が幅広く解説していきます。
【旧版】正規表現入門 (全14回) - プログラミングならドットインストール
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
【ボイド】JavaScriptとHTML5で『群れ』をシミュレーションしてみよう【プログラミング】 - あのねノート。
2013-09-28 【ボイド】JavaScriptとHTML5で『群れ』をシミュレーションしてみよう【プログラミング】 適当プログラミング解説シリーズ やり方 はじめに。 ボイドを知っていますか？ボイド(Boids)はCraig Raynoldsによって発表された人工生命シミュレーションプログラムです。Boidsとはによると、以下のように記述されています。 Boid（ボイド）とは、1987年にCraig Raynoldsによって発表された理論です。 この理論は、３つのルールを規定するだけで鳥の群れをシミュレーションできるというものです。 ちなみにBoidという名の由来は、鳥もどきという意味の言葉birdoid（バードイド）が短くなりこのように呼ばれるようになりました。 シンプルな3つのルールで生きているかのような群れができるのでとても興味深く、魅力的なゲームです。 ボイドを応用して作られ
javascriptとは？知っておきたい基礎知識 - プログラミング学習の窓口
JavaScriptは、htmlとcssで構成したページの動きを操作出来ます。分かりやすい例としては、ボタンやメニューの動き。こういったものもJavaScriptを活用することで実現が出来ます。 Javascriptは非常に人気の高い言語で、JAVAとにていますが別ものです。 ReactのようなJavascriptを応用した技術も普及が進んでおり、今後当分は主流な言語として活用されるでしょう。 The post javascriptとは？知っておきたい基礎知識 first appeared on プログラミング学習の窓口.
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
Keyframe Worldwide | キーフレーム・ワールドワイド株式会社
キーフレーム・ワールドワイド株式会社は、渋谷区にあるシステムインテグレーターの日本法人です。
JavaScript で画像本来のサイズ(幅, 高さ)を取得する - dogmap.jp
画像や動画を lightbox 風に表示する拙作の jQuery 用プラグイン jQuery.lightpop.js ですが、画像の拡大表示で大きな問題がありました。 以下のようにサムネイル表示されている画像と、リンク先の画像が同一で、サムネイル表示している画像を width, height で小さく表示している場合、画像本来のサイズ(幅, 高さ)が取得できないため、正常に表示できないのです。 <a href="pict01.jpg" rel="lightbox" title="画像１"><img src="pict01.jpg" alt="画像１" width="160" height="120"></a> 困ったなぁと思いつつも、画像本来のサイズを取得する方法について調べずに放置していましたが、以下のエントリを読んで解決したので、久々に jQuery.lightpop.js をバージョ
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法
<div> 画像の実寸を取得するテスト<br> 表示サイズの大きさにかかわらず取得されるサイズが同じとなることが確認できます。 </div> <div id="button1" style="color:blue;cursor:pointer;">実寸表示画像の実寸を取得</div> <div id="button2" style="color:blue;cursor:pointer;">200×160表示画像の実寸を取得</div> <div id="DispSizeArea" style="color:red;border:solid 1px blue;padding:5px;"> 上のボタンを押すと、ここにサイズが表示される。 </div> <div style="height:260px;"> <div style="float:left;width:320px;"> 下の画像の実
Javascript 型判定の方法とその処理速度について
わりといい加減だった型判定について、確認の意味も込めてここに。 今後のためにも、頭の中を整理してみる。 型の判定に良く使用するもの === typeof instanceof constructor それぞれに利点があり、状況によって使い分けることになるが、処理速度は上記の順の通り、『===』が最も速い。 つまり、『===』<『typeof』<『instanceof』<『constructor』 下図はFirebugで計測した結果です。環境によって数値は変わると思われ、参考値としてご覧下さい。 100万回 for loopで回した処理に掛った時間 ※『*constructor』は後に説明します。 一部、扱う型によって処理速度に差が見られた。 その二つの例外を以下に説明します。 存在しない変数を参照した場合の『undefined』についてvar a; alert(typeof a); 通常は
addEventListenerで渡した無名関数の中でremoveEventListenerする - 今日覚えたこと
最近は、onload属性やonclick属性に無名関数を渡すやり方ではなく、なるべくaddEventListenerを使うようにしている。 <script type="text/javascript"> window.addEventListener('load', function(){ document.getElementById('button1').addEventListener('click', function(){ alert('hello, world!'); }, false); }, false); </script> <button type="button" id="button1">hello</button> こんな感じ。 そして、一度セットした関数を削除したいことがある。addEventListenerでセットした関数を削除するには、removeEvent
[JavaScript]addEventListenerを手軽に使おう / LiosK-free Blog
2007-12-05 カテゴリ: Client Side タグ: JavaScript JavaScriptのイベント処理は面倒くさい。 ブラウザごとにaddEventListenerとattachEventを使い分けたり、eventオブジェクトを引数として受け取るかwindow.eventとして受け取るかを考えたり、thisの扱いについて考えたりしなくてはいけないからだ。 ということで、すごく苦手意識を持っていたのだが、↓の関数を書いておくだけでほとんどのケースには対応できるってことに気づいた。 function observe(target, type, listener) { if (target.addEventListener) target.addEventListener(type, listener, false); else target.attachEvent('on'
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
