タグ

JavaScriptとhtml5に関するPerfektweltのブックマーク (11)

  • はてなブログ | 無料ブログを作成しよう

    台北市立動物園と迪化街めぐり 子連れ台湾#5 年越し台湾旅行5日目、レジャーや友人との事を楽しむ日です。前日の様子はこちら www.oukakreuz.com 台北市立動物園へ パンダ館 パンダが見られるレストラン 迪化街へ 林茂森茶行でお茶を購入 小花園で刺繍グッズを購入 黒武士特色老火鍋で夕 台北市立動物園へ 松…

    はてなブログ | 無料ブログを作成しよう
  • HTML5のvideo/audio+JavaScript APIテクニック

    HTML5の<video>や<audio>タグとJavaScript APIで、自由に動画や音声を楽しもう。カスタムのビデオプレイヤーだって作れる video/audio要素のAPIやイベントを利用する video/audio要素は、JavaScriptを用いた細かい制御を行えるのも特徴の1つです。 カスタムのビデオプレイヤーを作ることも容易ですし、動画からフレームを切り出してCanvasに投影し、グラフィックとして取り扱う、なんてテクニックもあります。 今回は、そうしたJavaScript APIの利用方法について見ていきましょう。なお、この記事は2011年5月25日版の仕様に基づいています。 video/audioに共通のメソッド、プロパティ video要素とaudio要素は、メソッドやプロパティの多くが共通です。そうしたメソッドやプロパティを表すのが以下の一覧です。 MediaErr

    HTML5のvideo/audio+JavaScript APIテクニック
  • html5でアプリの壁を超える方法

    制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか?</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });

  • HTML5 Game Development

    HTML5 Game Development Welcome to your one stop shop for information on HTML5 Game Development, news, tutorials, and information. We cover anything that helps you create dynamic, next-generation interactive Desktop and mobile HTML5 games and websites. New BabylonJS Feature Within Skybox Ground Projection is a handy new BabylonJS feature that allows you to smoothen the transition from the “ground”

  • そろそろ実践投入もありうる?Audio Sprite - komagataのブログ

    ご存知の通りスマホのHTML5 Auidoは現状酷い状態です。 全プラットフォーム共通で再生できるフォーマットが無かったり、iPhoneは独自仕様で自動再生はできず、ユーザー操作由来のアクションからしか再生できなかったり、複数音が再生できなかったり、Androidは2.2までは全然動かなかったり。 対応策として知られているのがCSS SpriteならぬAudio Sprite。複数の音楽ファイルをつなげて一つのファイルにし、シーク位置を制御することで好きな音を鳴らしたりループしたりする姑息なテクです。 そんな面倒なことやってられるかと思ってたんですが、そろそろAudio Sprite用のツールも揃って来ました。 jukebox zynga/jukebox ひとつはAudio Sprite用の再生ライブラリjukebox。Zyngaが作ってるのでちょっとマジっぽいです。 var settin

  • 07. video/audio要素のイベントを捕捉する » HTML5 -

    videoaudio要素は、メディアデータの読み込みや再生中にさまざまなイベントを発生させる。このイベントをJavascriptで捕捉して、処理を行うことが可能である。発生するイベントの種類は非常に多く、これらをきちんと理解して詳細なイベント処理を行うことで、ユーザーフレンドリーで使いやすいメディアプレーヤーを作ることができる。 例えば、再生位置が進ごとに発生する「timeupdate」というイベントがある。このイベントを捕捉して、現在どこまで再生が進んでいるかを表示することができる。 < !DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VideoPlayer</title> <script type="text/javascript"> function playOrPauseVideo() { var videoUr

  • 合コン失敗したら風俗

    女子大生がたくさん働いているデリヘルのサービス。深夜でも使える風俗として、自分の暮らしを豊かにしてくれているデリヘルです。有名大学に通う女性を指名した今回は、思い出しただけでも興奮が甦ってくるほど。素股の気持ち良さは挿入を超えるくらいの感覚でした。その秘密は敏感なクリにあります。素股をするとどんどん刺激されてクリが固くなり、それが亀頭に当たって気持ち良い。相手も擦れて気持ち良いという相乗的な魅力に浸るのが、今までの風俗史上最高の体験になったのです。素股はぎこちなさもあるのですが、それでも密着度が高くてアソコへの刺激は十分すぎるほど。途中で耐えることを諦めていれば、きっとサービスから半分も消化しないうちに果ててしまっていたと思います。しかし、僕は風俗MASTERです。そんなことできません。キスも大好きらしく、クンニをした後でも何度となく「チューしてほしい」とお願いされたので、舌を絡めてじっく

  • Webアプリもオフライン実行? Indexed Databaseを使いこなそう - @IT

    連載目次 従来のWebアプリケーションでのデータ保存には、MySQLOracleSQL Serverなど各データベース製品を利用してサーバサイドでデータをやりとりするのが一般的であった(ActiveXを利用すればJavaScriptコードからデータベース製品を利用することも可能)。 重要なデータを保存する場合には、今後もこの流れは変わることはない。ただ、個人で利用するだけのデータや、インターネットに接続できないオフライン環境でのアプリケーション利用時であればどうだろう。このようなケースでは、(クライアント環境で)ブラウザごとにデータを保存できる仕組みがあれば、非常に有効だ。 そこで登場するのが、今回紹介する「Indexed Database API」(以下、IndexedDB)だ。IndexedDBは、JavaScriptを使用してデータを管理できるキー/バリュー型の簡易データベースで

    Webアプリもオフライン実行? Indexed Databaseを使いこなそう - @IT
  • ブラウザでストレージ? Web Storageを使いこなそう

    連載目次 ■Web Storageの概要と活用例 旧来(=HTML 4.1以前)のWebブラウザでは、eコマース・サイトのカート情報やログイン状態の管理情報などのデータをブラウザに保存する仕組みとして、大半のWebサイトではクッキーを利用していた。しかし、クッキーでは、保存容量が4KBytesまでであることや、すべてのリクエストに対してサーバにデータを自動で送信するため、容量制限やセキュリティ対策に悩まされることも多くあった。 HTML5では、クッキーに代わるデータ保存の仕組みとして、「Web Storage」と呼ばれる機能を利用できる。Web Storageは、ブラウザ側でKey-Value型でデータを保存する機能のことで、現在のインターネットを取り囲む環境に対応した「クッキーの後継技術」ともいえる。 Web Storageとクッキーの機能の差異は、以下の表のとおりだ。

    ブラウザでストレージ? Web Storageを使いこなそう
  • 無職のプログラミング HTML5 Audio オブジェクトを JavaScript で制御する方法

    HTML5 の Audio オブジェクトについて調べたことをまとめる。 なお、エントリでは Audioタグについては記述しない。 <注意>以下で示すソースコードは、Firefox3.6 と GoogleChrome7 でしか検証していません。 目次 1. HTMLAudioElement オブジェクトの作成 2. HTML5 Audio およびコーデックのサポートチェック 3. 再生する Audio ファイルの指定 4. Audio ファイルの再生、一時停止、停止 5. Audio ファイルの音量変更 6. サンプルプログラム 1. HTMLAudioElement オブジェクトの作成 参考ページ: audio 要素 - HTML5 タグリファレンス - HTML5.JP JavaScriptで制御するために、Audio要素のオブジェクトを作成する必用がある。 作成方法は以下の2通り /

  • EclipseのHTMLコーディングをより快適に(Aptana3, zen-codingの導入) | バシャログ。

    こんにちは、inoueです。もう2月も折り返し?!まだお雛様を飾れていないというのに…。 さて、webアプリケーション開発を行っていると、プログラマといえど意外とHTMLを書いていることに気付きます。 特にボリュームのあるフォームのあるページや、別ページの流用で機能追加する場合など、HTMLタグとにらめっこすることも多いです。 ということで、最近あらためてEclipseに導入して便利だなあと思ったAptanaとzen-codingについて紹介します。 HTML5対策 - Aptana3 Eclipseの標準HTMLエディタでHTML5を扱っていると、どうしても<header>やら<nav>やらのタグがwarning扱いになってしまいます。 しょうがない、と見て見ぬふりを続けてもいいのですが、当のエラーを素早くキャッチするためにもできればすっきりさせたいところです。 そこで登場するのがAp

    EclipseのHTMLコーディングをより快適に(Aptana3, zen-codingの導入) | バシャログ。
  • 1