冬休みに読み返そう！2016年の年間読まれた記事ランキングTOP20
HTML5 Experts.jp編集部の仲です。 HTML5 Experts.jpも開設から3年5カ月が経ちました。2016年もエキスパートやコントリビューターの皆様のご協力のお陰で、様々な技術トレンドをタイムリーに記事として取り上げることができました。また、白石編集長と豪華なパネリストによる対談企画や、実際に企業にお邪魔し、開発スタイルについてエンジニアの方々に直接話を聞いちゃうインタビュー企画にも挑戦しました。皆様、お楽しみいいただけましたでしょうか？ 今年最後の記事は、恒例の「2016年の年間読まれた記事ランキングTOP20！」をお届けします。このランキングは、記事公開後１週間の閲覧数を元に作成しております。冬休みに気になる記事を読み返してみてはいかがでしょうか。 ＜1位＞ モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Perfor
HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする | unitopi - ユニトピ -
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする こんにちは。 pushStateやpopStateというHTML5 HISTORY APIをご存知でしょうか。 もともとhistory APIは前からあり、history.back();などでブラウザの戻ると同じ挙動をさせることができます。 今回はHTML5で追加されたpushStateとpopStateに注目していきましょう。 よくAjaxなど、画面遷移を伴わずコンテンツなどの入れ替えを行う際に活用されています。 Facebookの例 ※個人情報の観点からスクリーンショットがご用意できずすみません。 メッセージページでは左側にメッセージのやり取り相手の写真が並びます。 それらをクリックすることによってメインのやり取りが表示されていく
Legco Matrix Brief (English)
We have promised you an English version of our video about the voting patterns of Hong Kong Legislative Council. And here it is. The video is also available on YouTube and Youku. We also translated the sections of news reports explaining the mysteries mentioned in the video, as follows. Why Starry Lee voted against herselfThe diagonal shows how each legislator support their own motions. The more s
Takazudolog - 地獄のvideo／audio要素
video／audioにハマりまくったメモ。作ってたのは、Flashでやってたような、複数の動画ファイルを、途中の選択肢によって色々変えながら見せるというようなインタラクティブムービーみたいなの。なので、ハードにvideoを使いまくるという意味で、普通に一本動画を見せるという用途よりももっと色々する必要があったわけだけれども、そうでない場合でも、videoが色々厄介であるということは知っておく必要があると思う。 とりあえず、videoやaudioを使いたい人は、以下の2ページを熟読せよ。 プラグインは要らない！音声／動画対応したHTML5 - audio／video要素 | Think IT Video - Dive Into HTML5 videoのイベントは HTML5 Video を眺めてるとなんとなく分かる。 audioライブラリ試してうまくいったやつはこれ。 SoundJS vi
WebGL 総本山
あらゆる技術をトリッキーかつポップに使いこなす ikeryou さんの devdev Inc. がウェブサイトをリニューアル WebGL GLSL demo 楽しいギミックが満載 今回ご紹介するのは、devdev Inc. のコーポレートサイトです。 こちらは @ikeryou さんが代表を務めてらっしゃる法人のウェブサイトで、今回はリニューアルされたということだったので、ご紹介しようと思います。 WebGL を始めとした様々な技術を組み合わせた、ギミ... もはやこれは恒例行事！？ unshift の年賀コンテンツは音も楽しいインタラクティブコンテンツ WebGL GLSL demo ぜひともサウンド有効で楽しみたい 今回ご紹介するのは、WebGL 事例でもよく知られている unshift さんが公開されている年賀コンテンツです。 当サイトでは年始に世界各国の年賀コンテンツを紹介すること
HTML5の技術だけで実装！「YouTubeみたいなWebGLプレーヤー」とは？
HTML5の技術だけで実装！「YouTubeみたいなWebGLプレーヤー」とは？ 松田光秀（jThree合同会社） この記事では、HTML5 Japan Cup 2014で優秀賞を頂いた「YouTubeみたいなWebGLプレーヤー」で利用されている技術を解説します。 はじめに 「YouTubeみたいなWebGLプレーヤー」はコンテンツそのものとは分離された、オープンソースJavaScriptライブラリ「jThree」のプラグインです。オープンソースとして公開していますので、誰でも自身の作品に差し替えてブログなどに掲載することができます。WebGLの描画部分は全てjThreeで管理しています。この記事では、プレーヤーで採用している2つのHTML5 APIとjThreeの概要をご紹介します。 プレーヤーの機能 このプレーヤーは、まるで動画のごとくWebGLコンテンツを楽曲付きで再生できます。動
モバイル時代のWebパフォーマンス
2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」のセッション資料です。Read less
HTML5のvideoタグでMP4の動画を再生する方法 | StrawberryShortCakes
JSライブラリを使用する HTML5非対応ブラウザに対応する方法として、JSライブラリがあります。※MP4に絞って検証。 VIDEO.js 最初に試したのはVIDEO.jsです。 このJSライブラリを使用すると、HTML5に対応しているブラウザではvideoタグで再生し、対応していないブラウザではFlashプレーヤーで再生されます。プレイヤーはオリジナルのものでしたが、IE8以下で確認したところ、IE6・7でコントローラーの表示が崩れていました。 html5media.js 次に試したのはhtml5media.jsです。 こちらもHTML5に対応しているブラウザはvideoタグ、対応していないブラウザではFlashプレーヤーのflowplayerで再生されるというものです。一点気になったのはこのflowplayer。確認してみると有償（1ドメイン$95〜）で提供されているプレイヤーのようで
『video要素』超基本を知る!! | HTML5でサイトをつくろう
video要素について 今回はHTML5新要素の中でも注目度が高い｢video要素｣の基本的な記述方法をご紹介します。 video要素はFlashなどのプラグインを使用することなく動画をウェブ・ページに表示することができます。ですが、IEが8まで対応していないことなどから動画コンテンツはまだまだFlashを使ったものが多いように感じます。今後ブラウザの対応が進めば、video要素を使った面白い動画コンテンツがドンドン出てくると思いますので、その時にコンテンツ制作に関わったりアイデアを出せるように今から少しずつ学んでいこうと思います。 video要素の再生とブラウザ表示 video要素をただ再生するにはsrc属性に再生する動画ファイルを指定するだけです。試しにsrc属性にMP4形式のファイルを指定しブラウザでの表示確認をしてみます。また、controls属性を指定することで再生・停止ボタンな
ニュース記事を活かした、20代、30代向けモバイルゲーム | HTML5 Japan Cup 2014
ニュース記事を活用して、毎日遊びたくなるゲームを制作してください。ゲームといっても、色々あります。例えば、育成ゲーム、対戦ゲーム、ＲＰＧ、パズルゲーム、アクションゲーム、など。ジャンルは問いません。自由な発想で、楽しくニュースが読めるゲームを期待しています。 素材は、２パターン用意しました。 (1) 2004年1月1日から、10年間の朝日新聞紙面に掲載された記事約150万件（写真なし） ファイル命名規則 dnaYYYYMM.csv（例：dna200401.csv＝2004年１月の１ヵ月分） 文字コード＝SJIS 下記の項目をタブ区切りで記載 記事ID 発行日 紙誌名 刊種別 ページ 面名 写真図表 文字数 著作権クラス 分類 見出し 記事本文（※記事本文の改行は<CR>に変換） (2) 2013年11月1日から半年間、朝日新聞デジタルに掲載された記事約2万件（写真ＵＲＬつき） ファイル命名
HTML5 Japan Cup 2014 by html5j
HTML5 Japan Cup とは？ HTML5 Japan Cup（5jCup）とは、WebデザイナーやWebエンジニアのためのクリエイティブ・アワード（コンテスト）です。運営委員や審査員、はたまたボランティアに至るまでが、同じくWebに関わる人たちで構成されています。そんな私たち（皆さん）が自分たちのために作り、盛り上げていくのが、このアワードです！ 超豪華なスポンサー陣が提供する様々な賞に応募することができますので、複数の賞を同時に受賞することも夢ではありません。まずはテーマを選び、動作するプラットフォームを選び、そしてその他の特別賞などを目指して応募作品を作りましょう！また、5jCupを盛り上げるための公式ハッカソンや準公式イベントなど、さまざまなイベントを企画していますので、皆さん楽しみにしていてください。 :)
HTML5 + WAI-ARIA: 入門篇
このサイトを HTML5 でリニューアルした際に保留としたまますっかり忘れかけていましたが、ようやく WAI-ARIA を導入してみました。 WAI-ARIA は W3C の Web Accessibility Initiative (WAI) が公開している技術仕様で、Web コンテントや Web アプリケーションのアクセシビリティを強化することを目的としています。具体的には、Web ブラウザや支援技術 (AT) がコンテントのセマンティクスをより適切に認識できるよう、HTML ドキュメントに要素の「役割」や「状態」といった詳細な情報を付与するものです。名称に RIA とあるように、Ajax などによるリッチ・インターネット・アプリケーションをおもな対象とした仕様ですが、HTML5 によるシンプルな Web ページに取り入れることもできます。ここでは WAI-ARIA の HTML5 へ
Microdata を使ってみよう。サンプルソースで学ぶ Microdata
HTML5 Advent Calendar 2012、7日目の記事として、Microdata （マイクロデータ） に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。 HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね… さて、タイトルの通りなのですが、HTML Microdata （マイクロデータ） について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく （文末にまとめてあります） として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Lab
the new code – not found – blog / 777
DeNA Engineering - DeNAエンジニアのポータルサイト
html5j パフォーマンス部 第一回勉強会
第二回全国統一 HTML5実力テスト - jsdo.it - Share JavaScript, HTML5 and CSS
いま使われているHTML5と、これからのHTML5
