Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーasm.jsを高速に動作させる新しいコンパイラーターゲットWASMとは？ | HTML5Experts.jp
現在はその仕様策定が固まり、ブラウザへの実装も済み、リリースを待つばかりです。またコンパイラへの実装も進んでいます。特にBinaryen（後述します）への最適化処理の実装のおかげで、asm.jsより高速に実行できるようになりました。 下記のグラフ（MozillaのHacksブログより引用）はasm.jsとWASMの速度を比較したものです。値はネイティブの実行スピードに対する相対的な速度を表していて、1に近づけは近づくほどネイティブに近いスピードで動いていることを表しています。Bulletを除く全てのベンチマークでasm.jsより高速に動いています。これはコンパイラの行う最適化処理のおかげです。 この評価は2016年10月末の時点に、Intel Core i7-2600 @ 3.40GHzで動作するLinux版 64-bit Firefox 52 (Nightly)で計測されました。現在は最
Microsoftの本気をみた！新しいWebブラウザ「Microsoft Edge」にかける思いとは？
Microsoftの本気をみた！新しいWebブラウザ「Microsoft Edge」にかける思いとは？ 仲 裕介（HTML5 Experts.jp副編集長） みなさん、昨日公開の、de:code2015 キーノートレポート（前編／後編）はご覧いただけましたか？ ２日目の今日は、HTML5Experts.jpオススメセッションのレポートを速報でお届けします！ マイクロソフトのWebブラウザのいままでとこれから HTML5 Experts.jpのエキスパートであり、日本マイクロソフトのエバンジェリストである春日井さんのセッションです。 IE9は大きなターニングポイントだった マイクロソフトはブラウザをレガシーブラウザとモダンブラウザに分類しています。Windows8までは、以下のように、IE8以前はレガシーブラウザ、IE9からはモダンブラウザという括りになります。 IE9からモダンブラウザと言
WebRTCでキャスしよう！片方向リアルタイム映像配信を作ろう
こんにちは！がねこまさしです。「WebRTCを使ってみよう」シリーズの最新話をお送りします。今回は、簡易的な放送局を作ってみましょう。 片方向配信の特徴 WebRTCを使った音声通話、ビデオチャットのサンプルには、双方向のものが多く見られます。ライブラリもそれを前提とした作りのモノが多いようです。なので今回は、片方向配信を実際に動かしてみましょう。 片方向配信には、双方向通信とは異なる特徴があります。 視聴側はカメラやマイクといった機器が不要なので、参加のハードルが下がる Peer-to-Peerでもフルメッシュ構造にはならないので、より多くの人が同時に利用できる 特に同時接続数はは双方向では4～5人が実用範囲なのに対し、片方向では10～30人程度に対して1つのPCから配信できます。ちょっとした仲間内のイベントや、社内イベントであれば、十分にカバーできるのではないでしょうか？（社内で動かせ
進化するWebプラットフォーム！Chrome OSとFirefox OSが変えるWebの未来
近年、ネイティブのアプリをHTML5だけで開発できるOSが、注目を集めています。本記事では、2014年内に日本での製品発売が期待されるGoogleのChrome OSとMozillaのFirefox OSの概要を紹介します。 PCの利用時間の大半をWebに費やしている人や、Webブラウザ以外のアプリは使用しないという人は少なくありません。Chrome OSはこのように、WebのためにPCを利用するユーザーにとって、最適なブラウズ環境を提供することを目的として開発されたOSです。米NPDの調査によれば、Chrome OSを搭載したノートPCであるChromebookは、2013年内に米国で販売されたノートPCの21％を占め、着実にシェアを伸ばしています。 Chrome OSのアーキテクチャ Chrome OSは、Chromium OSというオープンソースのOSを、Chromebookに最適化
モダンな言語でHTML5を開発しよう！ 俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)
※いずれの言語もマルチプラットフォームであり、Windows, Mac OS Xともにどちらでも利用することができます。 比較対象のサンプル サンプルとしてシンプルなスライドショーのWebコンテンツを用意しています。それぞれの言語でどのように記述して実装するのか、また生成されたJavaScriptがどのようなものであるか確認していきましょう。このサンプルでは言語の特性を紹介するために、実用的な要素として「クラス構造の利用」「既存JSライブラリの利用」「ユーザー操作」を含めています。 デモを開く 「Change Photo」ボタンをクリックすると写真が切り替わります。CSS3の3D TransformsをjQueryを用いて制御します（確認の際には、CSS3の3D Transformsが利用できるブラウザをご利用下さい） 概要 TypeScriptはマイクロソフトが開発するオープンソースの言
Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！
Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ 白石 俊平（HTML5 Experts.jp編集長） 人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ！ Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。 例えば以下は、Bootstrap3のボタングループです。 レスポンシブWebデザインの全面採用 以前までのBootstrapは、レスポンシブWebデザイン
壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう
こんにちは！がねこまさしです。前回は複数人の同時通話まで実現しました。社内で使うには十分なレベルです。 しかし本格的な企業ユースとなると、まだまだ障害があります。会社と家、自社と別の会社さんなど、実際に通信しようとするとNATやFirewallといった壁が立ちはだかります。 NATを越えよう NATの役割は NAT(+IPマスカレード)は企業だけでなく、一般家庭でも使われています。ブロードバンドルーターやWiFiルーターでは、1つのグローバルIPアドレスを、複数のPCやデバイスで共有することができます。このとき、NATには2つの役割があります。 インターネットにつながったグローバルなIPアドレスと、家庭内/社内のローカルなネットワークでのIPアドレスの変換 複数のPC/デバイスが同時に通信できるように、ポートマッピングによるポート変換 WebRTCでNAT越しに通信すること考えてみましょう
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
FirefoxにCSS Variables機能拡張etc.──2013年12月のブラウザ動向
FirefoxにCSS Variables機能拡張etc.──2013年12月のブラウザ動向 矢倉 眞隆（myakura） 今月より、ブラウザ関連のニュース、とりわけレンダリングエンジンに実装されたWebプラットフォーム機能について取り上げる月一の連載を開始したいと思います。1月も後半ですが、2013年12月の話題を取り上げます。 注：MozillaやChromeのコミットログを主な情報元としているため、ここで紹介する機能がすぐに使えるとは限りません。 Firefox ― CSS Variablesをはじめ、機能拡張いろいろ 12月に「おおっ」と思ったのは、Firefoxでした。CSS Variablesなど目を引く機能が追加されました。Multiline Flexboxや開発者ツールのCSS Source Mapsなど、これが入ってくれたら助かると思った機能もサポートされました。 CSS
「WebSocket, WebRTC, Socket API, … 最新Webプロトコルの傾向と対策」HTML5 Conference 2013 セッションレポート
「WebSocket, WebRTC, Socket API, … 最新Webプロトコルの傾向と対策」HTML5 Conference 2013 セッションレポート 吉田 啓二 2013年11月30日（土）に開催された「HTML5 Conference 2013」の、エヌ・ティ・ティ・コミュニケーションズ株式会社・小松健作さんによるセッション「WebSocket, WebRTC, Socket API,…最新Webプロトコルの傾向と対策」の内容をご紹介します。 最新のWebプロトコルが続々と誕生 1990年から10年間ほどは、HTTPというたった一つのプロトコルが、Web通信用のプロトコルとして使われていました。その後、HTML5という言葉が出てきてから、WebSocketやSPDY、HTTP/2.0、WebRTC、Raw Socket API、SCTP over UDP、QUICといった
「進化を続ける JavaScript ～次世代言語のステキな機能と高速化の行方～」HTML5 Conference 2013 セッションレポート
「進化を続ける JavaScript ～次世代言語のステキな機能と高速化の行方～」HTML5 Conference 2013 セッションレポート 吉田 啓二 2013年11月30日（土）に開催された「HTML5 Conference 2013」の、Mozilla Japan浅井智也さんによるセッション「進化を続ける JavaScript ～次世代言語のステキな機能と高速化の行方～」のセッション内容をご紹介します。 JavaScriptの課題と改良への動き 現在のJavaScriptには、次のような課題があります。 高速化がなかなかできない クラス、モジュールがない プロトタイプベースであるため、普段Javaなどでクラスを使っている人にとって、メソッド定義や継承がわかりにくい メソッドとして呼び出したときはthisがそのメソッドのオブジェクトになるが、間違って関数として呼び出すとthisがw
「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート
「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート 出口 達也 2013年11月30日（土）に開催された「HTML5 Conference 2013」の、株式会社サイバーエージェント・石本光司さんによるセッション「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」の内容をご紹介します。 なお、セッションのターゲットはGruntを使ったことのないHTML/CSSコーダーやWebデザイナーさんです。 なぜGruntを使うのか Gruntとは、JavaScriptで書いたタスクを実行してくれるアプリケーション（JavaScript Task Runner）です。 Webアプリケーションの開発が複雑になってきて、CoffeeScript、Sassなどのコンパイルが必要な技術を使うことが多くなってきた
初心者でも絶対わかる、WebGLプログラミング＜基礎知識編＞
HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって？ WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング（アニメーション）など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対
よくある3つのデザインから考える、マークアップの最適解
Web制作においてHTMLのマークアップには絶対の正解というものがありません。ページを制作しているとき、特にセマンティクスを意識したとき「このマークアップで正しいのだろうか」と悩むことがあると思います。 そんなマークアップについて考えるイベント「MarkupCafe」がhtml5jマークアップ部の主催のもと開催されました。「MarkupCafe」では参加者同士がチームに分かれ、お題となるデザインに対して議論し、自分たちならこうマークアップするといった考えを発表し合いました。 本記事では「MarkupCafe」で出された”フッター”、”パンくずリスト”、”求人情報”の3つのお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについて考え、マークアップの最適解を探ります。 ※html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わる
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
ユーザーの体感速度を高めるためのJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという
変わるWebプロトコルの常識（SPDY, HTTP2.0編）
最新の各種通信プロトコルにより、Webの可能性は大きく広ろうとしています。今回は、それらの中から Web をより高速かつスケーラブルなものに変えていくプロトコル、SPDYとHTTP2.0 について解説します。 HTML5の登場により、Webで使われるプロトコルは、 HTTP1.1 から大きく変わろうとしています。具体的には、SPDY, HTTP2.0, WebSocket, WebRTC といったプロトコルがそれにあたります。これらは、現状のHTTPが抱える各種問題点を解決するものです。 しかしながら、これらのプロトコルについて、 いったい何であるのか 今のWebの何を解決してくれるのか は、あまり知られていません。そこで数回に分けて、これらのプロトコルがいったい何であるのか、今のWebの何を解決してくれるのかを解説したいと思います。[1] 今回は、SPDY, HTTP2.0について取り上
wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）
エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ連載、今回は wri.peです。 難しい機能の実装や、先進的なAPIの利用を通じて、執筆者が得たノウハウを余すところなく紹介していきます。 HTML5を活用したメモ帳アプリ [wri.pe] 最近、仕事で作っているミイルが忙しかったり、趣味で作っているMobiRubyがなかなか進まなかったりして、個人でWebサービス的なモノを作っていない事が自分としてちょっと気になっていました。 そこで息抜きとして、ゴールデンウイークに集中してWebサービスを一つ作ろう！と思い立ち、wri.peというWebサービスの開発に着手しました。 wri.peは自分が使いたいと思えるメモ帳を作ったので、下記の様な特徴を持っています。 Markdownフォーマットをサポート Gmailの様なアーカイブ機能 全文検索 カレンダーへのマッピング iP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
連載 | 初心者から中級者まで、今注目のAngularJS徹底解説 | HTML5Experts.jp
リダイレクト中...