エキスパートたちが語る、Webパフォーマンス最新テクニック
こんにちは、編集長の白石です。 今回は、HTML5 Experts.jpでWebパフォーマンスに関する特集を行うにあたって、エキスパートの皆様による誌上座談会を開催してみました。 通常であれば数時間語っても尽きないような話を、1時間強でみっちり聞いてきました。 Webパフォーマンスの改善について、初心者から上級者まで楽しめる、有用な記事になっているかと思いますのでどうぞお楽しみください。 エキスパート紹介 白石 皆様、本日はお集まりいただいてありがとうございました！まずは簡単に自己紹介をお願いできますでしょうか？ 竹洞 株式会社SpellDataのCEOを務めている、竹洞です。Webパフォーマンスには10年間くらい関わっており、年間200サイトくらいの計測に携わっています。 今度から、Instart Logicのエヴァンジェリストも務めることになりました。Instart Logicは、Ap
Reactの最新動向とベストプラクティス ── HTML5 Conference 2016セッションレポート
Reactの最新動向とベストプラクティス ── HTML5 Conference 2016セッションレポート 小林徹 2016年9月3日に東京電機大学で開催された「HTML5 Conference 2016」のセッションを特集する第二弾は筆者である私、小林徹が登壇した「 Reactの最新動向とベストプラクティス 」の内容を解説します。 Reactの現状 Reactは、2013年にFacebookが公開した、Viewを作るためのJavaScriptのライブラリーです。 https://facebook.github.io/react/ 現在のバージョンはv15.3.2です。 v1.0.0からv14.0.0までのバージョンはありません。 「すでに安定していてプロダクションでも利用できる」ことや「セマンティック・バージョニング（パッチ.マイナー.メジャー）に準拠している」ことを示すために、v0.
Electronプログラミング入門 — インストールからミニブラウザ構築まで
Electronプログラミング入門 — インストールからミニブラウザ構築まで 古川陽介 Electronとは、デスクトップクライアントを作るためのフレームワークです。クロスプラットフォームで動作することをサポートしているため、Electronで作ったアプリケーションはMac、Windows、Linuxの環境でも動作します。Atomと呼ばれる GitHub社製のエディタがあります。 ElectronはAtomを作る際にフレームワークとして作られました。以前はAtomShellと呼ばれていましたが、Electronとして名前を変更し、2016年にはversion 1.0がリリースされるまでに成長しました。 ElectronはJavaScript / HTML / CSSを使ってクライアントアプリケーションを作成します。中のアーキテクチャはChromiumとNode.jsで作られており、Web開
プログレッシブウェブアプリ詳解 ─ 過去・現在・未来
Web技術でアプリ開発2016特集・第5弾は、プログレッシブウェブアプリ (Progressive Web Apps)をご紹介させていただきます。 はじめに プログレッシブウェブアプリ(Progressive Web Apps)という言葉が初めて登場したのは2015年8月のAlex Russellによる記事Progressive Web Apps: Escaping Tabs Without Losing Our Soulです。当時オフラインやプッシュ通知など、モバイルウェブを飛躍的に進化させる画期的な機能が次々と追加されていた状況において、このムーブメントを呼称するための言葉が求められていました。Google社内でいくつもの候補が挙げられましたが、Service Workerの発案者としてAlex Russellが推したのが、この「プログレッシブウェブアプリ」でした。 また、当初Goog
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
FirebaseとAngular2を使ってリアルタイムでデータのやり取り【導入編】
FirebaseとAngular2を使ってリアルタイムでデータのやり取り【導入編】 林 優一 Firebaseはリアルタイム同期なデータベースを中心に、Auth認証やPushNotificationやユーザーの行動分析といったアプリケーションに最適な機能を提供するBasSです。先月行われたGoogle IOにて、PushNotificationや行動分析機能が追加されるなど話題となりました。 今回はFirebaseのリアルタイムベースとAngular2を用いて、リアルタイムにデータをやり取りする方法について解説します。 Firebaseのリアルタイムデータベース Firebaseのリアルタイムデータベースはクラウドホスト型のNoSQLデータベースです。JSONの形式でデータは保存されます。 APIはもちろん、iOS/Android/Web用のSDKが提供されているので、非常に簡単に導入する
ECMAScript 2015(ES6)の概要と次世代JavaScriptの新たな機能
ECMAScript 2015(ES6)の概要と次世代JavaScriptの新たな機能 泉水翔吾 この記事は「ECMAScript2015/ES6特集」の第1回目です。この特集ではJavaScriptの次世代仕様であるECMAScript 2015（ECMAScript 6）を取り上げ、歴史や経緯から追加された機能や文法の詳細など複数回に渡って解説していきます。 ECMAScriptとJavaScript そもそもECMAScriptとはなんでしょうか？JavaScriptとは一体何が違うのでしょうか？ECMAScriptとJavaScriptの関係は、JavaScriptが生まれた1995年まで遡ります。 JavaScriptは1995年、当時Netscape CommunicationsにいたBrendan Eich氏がWebで実行できるスクリプト言語として開発しました。その後Inte
【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった（後編）
【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった（後編） 白石 俊平（HTML5 Experts.jp編集長） スゴい人たちに集まってもらって、「Webは死ぬか」について語り合っていただいたスペシャル企画。前半は「Webメディア・コンテンツ」について、それぞれのご意見を伺いました。 メディアビジネスからCookie、ディープラーニングまで──ビジネス面に注目した 前半とは異なり、後半はWebのテクノロジー面にフォーカスして、「死ぬか？」を論じていただきたいと思います。今回は、（含蓄を多量に含んだ）脱線多めで失礼します！ 「ブラウザ」の存在感が薄れていく時代 白石 前半はビジネス面に注目してお話いただいたので、後半はテクノロジー面にフォーカスしていきたいと思います。いわば、「Webテクノロジーは死ぬか？」というお話になるかと思います。
これからのモバイル向けWeb制作──The Next Generation Mobile Web
これからのモバイル向けWeb制作──The Next Generation Mobile Web 川田寛（ピクシブ株式会社） 最近、モバイルではネイティブ一強という状況にみえます。Webはあまり注目されません。今後も同じ状況が続くのでしょうか？そのことについて、Google I/O 2015のセッション「The Next Generation Mobile Web」が参考になります。補足を加えつつ翻訳してみましたので、どうぞご覧ください。 But What About Mobile Webはパワフルな技術だ！これからも、ビジネスをもっと盛り上げていく。2014年、Eコマースは低く見積もっても1.5兆ドルの規模になった。そんな中、モバイルは何を変えたのか？ユーザにどんなインパクトを与えたのか？ モバイルは経済のシフト、デスクトップが担っていた領域の変化だ。パフォーマンスが求められるような動作
すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった-前編- | HTML5Experts.jp
【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった（前編） 白石 俊平（HTML5 Experts.jp編集長） 今また、「Webの死」を予言する論調をそこここに見かけます。モバイルやウェアラブルといった新たなコンテキストが、プラットフォームネイティブな技術の優位性を後押ししているだけではなく、Webコンテンツの消費の仕方を大きく変え、Web上で成り立っていたビジネスモデルをも脅かしつつあります。 本当にWebはヤバいのか、気になってしょうがないので、スゴい人たちに集まってもらって、「Webは死ぬか」について語り合っていただきました。Webを取り巻く様々な論点を包括的に議論でき、貴重な場になったのではないかと自負しております。 Webに関わる人にとっては必読の対談だと思います！でもこの記事、長くて濃いので、心してかかってくださいね:-
今話題のマイクロサービス・アーキテクチャについて、本格的に実践中のビズリーチさんに聞いてみた！
今話題のマイクロサービス・アーキテクチャについて、本格的に実践中のビズリーチさんに聞いてみた！ 馬場 美由紀（HTML5 Experts.jp編集部） 巨大化・複雑化したモノリシックなアプリケーション開発から、サービスを小さい単位に分割し、開発のスピードを上げようとするマイクロサービスが注目されています。アプリ開発のアーキテクチャとして関心はあるのものの、実際にはどのようなメリット・デメリットがあるのかは気になるところ。 そこで、マイクロサービスアーキテクチャを採用して新サービスをリリースしたという株式会社ビズリーチ・CTO室チーフアーキテクトの竹添直樹さんに、お話を伺ってきました。 聞き手は、HTML5 Experts.jp編集部・岩瀬義昌（@iwashi86）さん、HTML5 Experts.jp編集長・白石俊平さんです。 そもそもマイクロサービスって何ですか？ 岩瀬：そもそもマイクロ
JJUGのエキスパートが語るエンタープライズ・アーキテクチャの過去、現在、未来──SOAP・RESTからIoT・ウェアラブルまで
JJUGのエキスパートが語るエンタープライズ・アーキテクチャの過去、現在、未来──SOAP・RESTからIoT・ウェアラブルまで 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、エンタープライズ・アーキテクチャについて取り上げます。 HTML5・モバイル・IoT・ウェアラブルなどビジネス環境が激変する中、エンタープライズ・アーキテクチャはどういう課題を抱えていて、どうあるべきなのか。今回は、JJUG (日本Javaユーザーグループ）でご活躍中のお二人に話を伺うことにしました。 アーキテクチャを主軸に第一線で活躍しているグロースエクスパートナーズ株式会社 執行役員の鈴木雄介さんと、「流しのアーキテクト」を自称する株式会社アーキテクタス 代表取締役の細川努さんを交えて、エンタープライ
フレームワーク対決！Angular VS React仮想パネルディスカッション
フレームワーク対決！Angular VS React仮想パネルディスカッション 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、今話題のAngularJSなどのJavaScript MVCフレームワークの台頭と進化、そして新しいアーキテクチャであるFluxとそのフレームワークであるReactなどについて、既に先行して学んでいるエキスパートたちにその知見を聞いてみました。 今回はフレームワーク対決ということで、エキスパートたちがAngularとReactという陣営に分かれ、それぞれのフレームワークについて疑問点をぶつけたり、議論したりする仮想パネルディスカッションという形式でお伝えします。単なるパネルディスカッションとは違って、キーワードは「プロレス」です。まさかりの投げ合い、di
ユーザーの期待に応えるクックパッドのUI/UXーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」
ユーザーの期待に応えるクックパッドのUI/UXーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」 仲 裕介（HTML5 Experts.jp副編集長） 3月14日に特定非営利活動法人Web Directors Forum（以下、WDF）とHTML5 Experts.jpの共催企画として、WDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」が金沢にて開催されました。この記事では、その勉強会のセッションの模様をレポートします。 ユーザーの期待に応えるクックパッドのUI/UXー元山 和之 イベント最後のセッションは、クックパッドでデザイナーをされている元山和之さんです。今回のセッションでは、クックパッドが実践するユーザーファーストなサービス開発の様子を紹介していただきました。 余談ですが、クックパッドさんのプレゼンテ
アクセシビリティについて最近考えていることをざっくばらんに話すよーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」
アクセシビリティについて最近考えていることをざっくばらんに話すよーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」 仲 裕介（HTML5 Experts.jp副編集長） 3月14日に特定非営利活動法人Web Directors Forum（以下、WDF）とHTML5 Experts.jpの共催企画として、WDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」が金沢にて開催されました。この記事では、その勉強会のセッションの模様をレポートします。 アクセシビリティについて最近考えていることをざっくばらんに話すよー村岡 正和 イベント2つ目のセッションはエキスパートの村岡 正和さんです。村岡さんといえばIoTという方も多いと思います。HTML5 Experts.jpでも記事を執筆されています。 今回のセッションでは、タ
これからのWebデザインに求められるアクセシビリティとの向き合い方ーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」
これからのWebデザインに求められるアクセシビリティとの向き合い方ーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」 仲 裕介（HTML5 Experts.jp副編集長） 3月14日に特定非営利活動法人Web Directors Forum（以下、WDF）とHTML5 Experts.jpの共催企画として、WDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」が金沢にて開催されました。この記事では、その勉強会のセッションの模様をレポートします。 これからのWebデザインに求められるアクセシビリティとの向き合い方ー木達一仁 最初は、株式会社ミツエーリンクスのCTOでありエキスパートの一人でもある、木達一仁さんによるセッションです。木達さんはWebアクセシビリティに関して、様々な取り組みをされている方です。別の企画で
HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか…全てお見せします！ーWebパフォーマンス改善企画（解析編）
ちなみに後日談…計測対象の個別記事ですが、計測のためのアクセスがかなりの頻度あるため、PVランキングでは常に1位を独占していました（笑）。また、Google Analyticsについても、計測開始前に除外設定しておかないと、正確なデータが得られなくなりますので、ご注意下さい。 計測して問題点を洗い出す ファーストバイトダウンロードタイムの遅延問題 ということで、竹洞さんに一定期間サイトのパフォーマンスデータを計測してもらいました。その結果を見ながら、早速現在のHTML5 Experts.jpの問題点を洗い出します。 竹洞：これがある日の、ブロードバンド回線でChromeを用いてアクセスした時の計測結果です。 見ての通り、ID1のhtmlの取得にすごく時間がかかっていることがわかります。この水色は、ファーストバイトダウンロードタイム（Time To First Byte、以下、TTFB）とい
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015 佐川 夫美雄（Ashiras, inc.） この記事は、Angularをテーマとした日本初のカンファレンス 「ng-japan」のイベントレポート（第2回目）です。 はじめに HTML5ハイブリッドアプリケーションとは、内部の実装にHTML5が利用されているモバイルアプリケーションです。アプリの内部実装にHTML5を使うことでクロスプラットフォーム対応が可能になりますが、その代わり問題となるのがUIとパフォーマンスです。このセッションでは、Angularの上に構築されたUIフレームワークであるOnsen UIを紹介しながら、Angularでどうすれば高速かつ快適なUIを持つモバイルアプリを作れるかについて話します。 AngularとOnsen UIで作る最高のHTML5ハイブリッドアプ
悩める組み込み機器向けWebコンテンツのパフォーマンス
近年、ブラウザやブラウザランタイムは、PCやスマートフォンのみならず、テレビ、コンソールゲーム機などの組み込み機器にも導入されるようになりました。また、Raspberry Piに代表されるシングルボードコンピュータも流行り出し、ロースペックな環境で動作しなければならないWebアプリケーション開発の需要が高まろうとしています。 多くの組み込み機器に搭載されたブラウザは、近年よく使われるAPIやCSSをサポートしています。しかし、そのパフォーマンスはスマートフォンと比べて非常に貧弱です。スマートフォンでは当たり前のパフォーマンスが得られることはありません。 本記事では、組込機器のブラウザ事情を紹介し、その上で動作するWebアプリケーションの開発の課題、私の経験での苦労話、そして、それに立ち向かうためのTipsを紹介します。 組込機器とブラウザ 組込機器でWebアプリケーションを開発すると言われ
キーワードは「CARE」！実践的なフロントエンドエンジニアを目指せ！─Frontrend Conference the Final基調講演レポート
キーワードは「CARE」！実践的なフロントエンドエンジニアを目指せ！─Frontrend Conference the Final基調講演レポート 白石 俊平（HTML5 Experts.jp編集長） この記事は、「Frontrend Conference The Final」の基調講演「Pragmatic Front-end Developer: From Artisan to Expert」についてのレポートです。 登壇されていたのはリッチメディアの斉藤祐也さん。HTML5 Experts.jpでも、No.10のエキスパートとして何度もご執筆いただいているので、ご存じの方も多いかと思います。 この講演タイトルは、アンドリュー・ハント氏の著作「The Pragmatic Programmer」をオマージュしたとのこと。「Pragmatic」というのは「実践的」という意味の単語で、フロント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
