AnTytle Gaming Media[sample url=”2015/video-element-events/loadedmetadata” text=”loadedmetadata.html”]
HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法 [ホームページ作成] All About
HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法HTMLのaudio要素を使って、Webページ上で音楽を再生したり効果音を鳴らしたりする方法を解説。ブラウザ内蔵の音楽再生コントロール（再生ボタンがあるプレーヤー）を表示させてMP3ファイルなどの音楽を流す方法や、JavaScriptを使って音を鳴らすタイミングを制御する方法を解説。autoplay属性で自動再生させたり、source要素で複数のファイル形式に対応させたりできます。 audio要素を使えば、ブラウザ内蔵プレーヤーで音声や音楽を再生できる HTML5で使える要素の一つに、音楽・音声ファイルを再生できるaudio要素があります。短いHTMLソースを記述するだけで、Web上に置いたMP3形式などの音楽ファイルをブラウザ内蔵の機能で再生できます。何らかのプラグインを用意する必要はなく、HTMLの記述だけで下図のようなブラウ
![HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/20994e181d472d8ecf11e07d404af555274d83f1/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F8%2F5%2F1%2F8%2F7%2F201806071155%2Ftopimg_original.png)
HTML5 Conference
ほんの少し前には、次世代Web標準技術と呼ばれた数多くの仕様は、まだまだ実用に耐えうるには時間が掛かるだろうという意味で、ある意味、夢物語のように語られていました。しかしながら、実装当時は実験的な扱いだった仕様が、この短い期間で進化し、既に多くの製品やサービスの事例で活用されるようになりました。これまで、多くのことがWebでできるようになり、これからも多くのことがWebでできるようになるでしょう。もはや、それらは夢ものがりではなく、実際に私たちの製品、サービスにどう活かしていくのかを考え、実践していく時代です。それらの切っ掛けが、本カンファレンスを通じて得られることを願っております。 HTML5 Conferenceは、Web技術に関するノウハウや最新情報の共有、そして交流の場としてありたいという想いがあります。Web技術者同士だけではなく、Webを取り巻く様々な企業や団体と、垣根を超えて
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
Google製ライブラリLiquidFunを使ったHTML5物理演算入門 - ICS MEDIA
物理演算とは物体の運動を物理法則に基づき数値計算することです。Web業界ではゲームやビジュアル表現の分野で利用されています。アクションゲームを例にすると、キャラクターが地面に立つ、ジャンプする、重力落下する、壁とぶつかる、坂道を滑り落ちる、といったことが物理演算の実装範囲になります。 本記事ではGoogleが提供するJavaScriptライブラリ「LiquidFun」を題材にHTML5で利用可能な物理演算シミュレーションの表現を紹介します。 ▲「LiquidFun」の公式サイトではドキュメントやデモが掲載されている 物理演算ライブラリ「LiquidFun.js」とは LiquidFunは2次元の物理演算ライブラリの定番「Box2D」をベースとした拡張ライブラリです。Box2Dが提供する基本的な物理演算機能をはじめ、LiquidFunによるプラスアルファの機能が提供されています。 重力 （B
W3C、「HTML5.1」を今年9月に勧告とする計画。仕様はGitHubで公開
W3CでHTML5仕様の策定を行っているWeb Platform Working Groupは、W3Cのブログにて「WORKING ON HTML5.1」という記事を公開し、2016年9月にHTML5.1仕様を勧告にする計画を明らかにしました。 6月中旬までにHTML5.1の勧告候補を公開し、9月に勧告にするとのこと。 The plan is to ship an HTML5.1 Recommendation in September 2016. This means we will need to have a Candidate Recommendation by the middle of June, following a Call For Consensus based on the most recent Working Draft. 計画ではHTML5.1の勧告を2016年9
ABCドリームベンチャーズ株式会社 -ABC DREAM VENTURES, Inc.-
私たちの考えOUR MISSION 「夢をはぐくむ、夢をひろげる、夢をつなげる」 開局から65年目を迎え、関西から日本中に笑いと感動を届け続けてきたＡＢＣ 積み上げてきた信頼 グループ各社が有するメディアパワー コンテンツを生み出すヒトやモノ これら私たちの持つチカラで「未来の主役たち＝仲間たち（ベンチャー）」を応援します 「はぐくむ」＝ベンチャーの想いに共感し支援し成長させる 「ひろげる」＝ベンチャーの持つ可能性を大きく発展させる 「つなげる」＝ベンチャーと社内外のリソースを連携させる 「夢をはぐくむ、夢をひろげる、夢をつなげる」 メディア・コンテンツ・エンタテインメントはもちろんのこと 未来を切り拓くあらゆる分野での「未来の主役たち」を求めます 豊かな発想力で世界をあっと驚かせる 素敵な夢をともに語りあえる仲間たちを・・・ いま、私たちは旅立ちます夢を追う冒険へ！
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
CreateJS入門サイトを立ち上げました | ClockMaker Blog
こんにちは、池田です。1年半ぶりの更新となります。ご存知の方も多いと思いますが、私の記事執筆の活動はClockMaker BlogからICS MEDIAに舞台を移動していまして、ICS MEDIAで積極的に発信しています。ぜひあちらのサイトをチェックくださいませ。 さて、この度「CreateJS入門サイト」を立ち上げました。 CreateJS入門サイト – ICS MEDIA このサイトの公開に伴い、編集後記を全2回で公開します。 CreateJS入門サイトを作った理由 CreateJSはFlashのようなコンテンツを作ることのできる便利なフレームワークです。Flash経験者であれば少ない学習コストではじめることができ、2012年の登場以来(参照記事「リッチなHTML5コンテンツのためのフレームワーク『CreateJS』が公式サイトを公開」)、多くの元Flashクリエイターに利用されていま
2015年のWebクライアントサイドの温度感 - Tetsuharu OHZEKI - Medium
この3~4年間でJavaScriptとかWebクライアントサイドを取り巻く温度感も大きく変わった。これからはHTML5だぜイエーイと騒いでいたのも随分過去の話になったように思う。だけど、このあたりの温度感はそんなに掴みやすいものでは無い。別に放っておいてもいいんだけど、放っておくと10年20年経たないと誰も書かなんてのも割とよくある話。でも、そこまで待ちたくは無い。なにとなしに説明してみようと思う。 だいたい2011~13年ぐらいはHTML5がバブルっていた。今からすると「バブルだった」というのが一番説明しやすい。Node.jsあたりが世の中に認知を拡大していたのもこの時期だし、スマートフォンのシェアの伸びに合わせて、クロスプラットフォームで出せるWebにみんな夢を見ていた。MVCだの設計だの何だの言い出したのも、だいたいこのくらいの時期だし、Single Page Application
Flash Pro CCがAnimate CCに名称変更！ Flashが終わったと勘違いをする前に知っておきたい8つのこと - ICS MEDIA
Flash Pro CCがAnimate CCに名称変更！ Flashが終わったと勘違いをする前に知っておきたい8つのこと アドビ システムズ株式会社（以下、アドビ）は2015年12月1日、「Adobe Flash Professional」の名称を、2016年初頭より「Adobe Animate CC」に変更すると発表しました。(参照記事「Adobe Flash Professional を Adobe Animate CC に名称変更 | Adobe Creative Station」) このニュースを皆さんはどのように捉えましたか？ 「ついにFlashが終わった」「Flash、いままでありがとう」と思った方はまったくの見当違い。今回のニュースで勘違いしがちなポイントをまとめました。 制作ツールの名称だけが「Flash Professional CC」から「Animate CC」に変更
Adobe、「Flash Professional」の名称を変更 「Animate」に
アドビシステムズは12月1日、Flash制作ソフト「Adobe Flash Professional CC」の名称を「Adobe Animate CC」に変更すると発表した。来年初頭に予定しているアップデートから適用する。 約20年にわたってWebアニメーション制作ツールの標準として利用されてきたが、既にHTML5 CanvasやWebGLのネイティブサポートも果たしている上、SVGなどさまざまな形式への出力にも対応している。同ソフトで作成される3分の1以上がHTML5を使用するなど環境が変化しており、Flashに限らずさまざまなアニメーションを制作するためのツールであることを示すため、名称変更に踏み切る。 HTML5対応の改善を続ける一方、Flash（SWF）やAIR、放送品質のビデオなどのフォーマットへの出力もサポートを続けるとしている。 関連記事 ChromeブラウザでのFlashア
Web Messaging API を使ってみる - Qiita
目的 HTML5 に Web Messaging API というのがある。サーバを介さずブラウザ間で通信ができるインターフェイスが提供されている。 調査がてら把握したことを整理。 概要と用途 Web Messaging API はブラウザの任意のドキュメント間での通信をサポートするインターフェイス。現在、postMessage と MessageChannel という API が用意されている。どちらも任意の window オブジェクト同士で、任意のタイミングでデータの受送信をさせることが可能。 よく使われる用途として、iframe で別ドメインのコンテンツを読み込み、そのドメインと通信させる。 例えば、Facebook のいいねボタンは、 iframe で facebook.com のドメインを埋め込み通信させ、その中の cookie の値を取得してそのブラウザが保持するユーザ情報を表示
[CSS]HTML5 のplaceholder のテキストカラーを変更する方法｜HTML｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
HTML5 で強化されたForm 周りの機能の1つで、input type=”text” などのフォームに初期値としてテキストを入れておくことができる placeholder 属性というものがあります。 今回は、このplaceholder 属性で指定した入力フィールドのテキストカラーを、CSS で変更する方法をご紹介します。 placeholder 属性で指定したテキスト色をCSS で変更する 2013 年11 月現在、Firefox、Google Chrome、Windows のIE の主要ブラウザに対応させるためには「ベンダープレフィックス」を付ける必要がありますので、CSS ファイルには以下のように記述します。 /*Webkit*/ ::-webkit-input-placeholder {color: #222} /*Firefox 19以降*/ ::-moz-placeholde
![[CSS]HTML5 のplaceholder のテキストカラーを変更する方法｜HTML｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/f40a9c657509464563fe67ee1eb2951e5370723e/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2012%2F10%2Fhtml5.png)
<time>－HTML5タグリファレンス
<time>タグは、日付や時刻を表記する際に、グレゴリオ暦による日付や24時間表記の時刻で正確に示す際に使用します。 日時を記述するのに、必ず<time>を使用しなくてはならないわけではなく、コンピュータやブラウザが理解できるように日時を示すことが目的です。 <time>タグは、正確に特定できない日付や時刻に対して使用するべきではありません。 例えば、ビッグバンの1ミリ秒後、ジュラ紀の初期、紀元前約250年の冬、といった時を示すのに、<time>タグを使用するのは不適切です。 現在、一般的に利用されている西暦はグレゴリオ暦ですが、グレゴリオ暦は1582年2月にローマ教皇グレゴリウス13世によって制定されたものです。 <time>タグは、グレゴリオ暦導入以前の日付には使用しないことが推奨されています。 また、日本では明治5年（1872年）にグレゴリオ暦が導入されていますが、国によって16世紀
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パーティクル編集ツール Particle Develop - ICS
The Blog | Welcome to Adobe Blog
| blog.ryow.net