Googleが新たに提唱するProgressive Web Appsの新たな開発パターン「PRPL」とは？
Googleが新たに提唱するProgressive Web Appsの新たな開発パターン「PRPL」とは？ 小松 健作（NTTコミュニケーションズ） 「Google I/O 2016」では、これからのWebアプリ開発パターンとして提唱しているPWApps(Progressive Web Apps）について多くのプレゼンテーションがなされました。 PWAppsとは、最新のWeb技術を有効に活用し、漸進的（Progressive）に高度なユーザー体験を提供しようとする概念です。このPWAppsの概念を具体化する一つの手法として、「PRPL」（パープル）と名付けられた開発・提供パターンが提案されました。本稿ではこのPRPLを解説するとともに、その有効性や課題点を考察します。 本稿は、Google I/O 2016の二つのセッションに関する、解説記事です。 Polymer and Progress
HTML6 でも CSS4 でもない Web 技術のゆくえ - WCAN 2015 Winter に登壇してきました
@kazumich さんにお声がけいただき、WCAN 2015 Winter でおよそ 60 分ほどのセッションを登壇してきました。32:9 のスクリーンがあるという、TED でもやるんかオイという特殊な環境でした。普段はプロジェクター的な投影なので、スクリーンの前に立つのが微妙なんですが、ここはディスプレイが壁面に大量に並んでいて自ら発光するので、部屋を暗くしなくてもテレビのように十分に見えますし前に立っても平気です。 一緒に登壇したのが @yhassy さんと @Hidehisa さんということもあり、近年まれに見る胃痛を伴う緊張を味わいながらお話させていだきました。（リアルにセッション終了後、1時間くらい胃痛がズキズキしてました） 技術的なお話でした 参加されたみなさま、メインセッションや LT に登壇された各位、ならびに運営されたスタッフの方々、ひとまずお疲れさまでございました。貴
HTML5オールスターズ勉強会 資料まとめ - dackdive's blog
6/13 (土) は htmlday ということで、こちらのイベントに参加してきました。 HTML5オールスターズ勉強会｜IT勉強会ならTECH PLAY［テックプレイ］ 第58回 HTML5とか勉強会 - HTML5最新情報@Google I/O, de:code 2015｜IT勉強会ならTECH PLAY［テックプレイ］ とりあえず今の時点で公開されてるスライド資料やらキーワードやらをまとめ。 （随時更新します） Twitter でのハッシュタグは #dotshtml5 , #htmlday , #html5j などなど。 （2015/06/15追記） 若狭さんの『ハードウェアこわい』、川田さんの『The next generation mobile web!』 のスライドを追加しました。 （2015/06/19追記） 『Edge だけじゃない! Build 2015 で発表されたそれ
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
normalize.cssで使用されている各スタイルがどのように機能しているか解説
先日紹介した「sanitize.css（紹介記事）」や「Marx（紹介記事）」などリセット用CSSの新しいアプローチが増える中、ブラウザごとの要素の相違を吸収するのに人気なのはまだまだ「normalize.css」でしょう。 そのnormalize.cssも細かい改良が重ねられ、最新のバージョンは3.0.3になっています。 normalize.cssで使用されている各スタイルが、どのように機能しているか確認してみましょう。 normalize.css normalize.css -GitHub ※3.0.3はGitHubからダウンロードできます。 normalize.cssの特徴 html, body, :rootなどの全体系の定義 HTML5の新要素用の定義 リンク系の定義 テキスト系の定義 埋め込みコンテンツ系の定義 グルーピングコンテンツ系の定義 フォーム系の定義 テーブル系の定義
Service Worker で進化する Cache - GMOインターネットグループ グループ研究開発本部
フロントエンド大好き D.M. です。最近ようやく Chrome で使えるようになってきた Service Worker について紹介します。 Service Worker とは？ Service Worker はブラウザ内でバックグラウンドで動作する Web プロキシです。これまでブラウザが内部でやっていたことをもっと低レベルなAPIで操作できるようになります。 基本情報を要点だけ書いていきます。 できること ・リクエストを横取りできる。 ・リクエスト：レスポンスをキー：バリューでキャッシュできる。 ・オフラインで動作できる。 ・サーバから PUSH 通知を受信できる。 ・バックグラウンドでコンテンツを同期できる。 できないこと ・ HTTP 通信ができない。（通信を横取する仕組みのためHTTPS限定。HTTPの場合、通信を他人にハイジャックされると改ざんされてしまうリスクがある。） ・
Service worker が拓く mobile web の新しいかたち
1. ServiceWorker が拓く Mobile Web の新しいかたち HTML5とか勉強会 02/25/2015 Kinuko Yasuda (@kinu) kinuko@chromium.org HTML5とか勉強会 02/25/2015 Kinuko Yasuda (@kinu) kinuko@chromium.org ServiceWorker が拓く Mobile Web の新しいかたち 2. 自己紹介： Kinuko Yasuda @kinu / kinuko@chromium.org Chrome エンジニア 5年目くらい ￭ ストレージ、ネットワーク、Worker系など裏方っぽい API をよくいじっています ￭ File/Blob, FileSystem, Quota, XHR, Web Workers, ServiceWorker などなど ￭ 2013年秋頃か
キーワードは「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」というのは「実践的」という意味の単語で、フロント
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オブジェクト）は従
WebRTCにやってくる「次の波」とは？─WebRTC Conference Japan基調講演
WebRTCにやってくる「次の波」とは？─WebRTC Conference Japan基調講演 白石 俊平（HTML5 Experts.jp編集長） 2月5日、6日にかけて「WebRTC」をテーマとした、日本初のカンファレンスであるWebRTC Conference Japanで開催されました。 本記事では、その中の基調講演の1つである、「The WebRTC Continuum」の内容について紹介します。プレゼンターはOracleのダグラス・タイト氏です。 ▲Oracleの通信マーケティング担当ディレクターであり、通信業界のビジネスと技術のエキスパート Douglas Tait（ダグラス・タイト）氏 WebRTCの第一の波は終わった。次の波に備えよう WebRTCが本格的に議論され始めたのは、ここ3年ほどのことです。Oracleも、WebRTCが議論され始めた当初から、通信分野の大手企
10 Japanese websites with beautiful video | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
A video tells more than a thousand words. With HTML5 / embedded video as feature content or as a background effect there is no need to rely only on still images and text to tell your story. In Japan the use of video in web design has become popular and in 2015 the trend will continue to gain pace. Here are some of my best picks for websites from Japan that you may not have seen, all of them share
Extensible Web を支える低レベル API 群 - Block Rockin’ Codes
Intro 最近 Extensible Web の話がたまに出るようになりましたが、なんというかレイヤの高い概念(ポエム)的な話が多い気がしてます。 もう少し具体的な API とか、「それコード書く上で何が変わるの？」って話があまりないので、今日はそこにフォーカスして、 Extensible Web 的な流れの中で整理された API の話をします。 しかし、実際には API が 「Extensible Web という理念で生まれたかどうか」は自明ではないので、 今標準化されている低レベルな API を拾い、それを整理するというエントリだと思ってもらと良いかもしれません。 あまり知られてない API もあると思うので、これを期に「これがあれば、今までできなかったアレが、標準化や実装を待たなくても、できるようになるな」と思ったら是非書いてみると良いと思います。 実際はそれこそが Extensi
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
role属性を実装しよう
各キーワードの意味については、割愛するので、詳細はリンク先の原文を参照してください。 何故、ランドマークロールばかり取り沙汰されるのか これは振り返りでみた通りXHTML2.0第7次案の2005年に提唱されていたころから考えられていた使い方であるということ、我々制作者にとってもナビゲーションの目印として機能することを目的にしたものは魅力的かつ実用的なので先攻して実装を試みる制作者が決して少なくないこと、そして現にこれを実装するソフトウェアも既にいくつかでてきていることから、ランドマークロールが圧倒的に取り沙汰されることになっているのだと思われます。一番は何と言っても制作者側が現実的に実装するための労力と時間をかけるには、ランドマークロール8個までが取り入れられる限界だとも考えられます。 ランドマークロールに対応している音声読み上げソフト Windows 用スクリーンリーダー NVDA 日本
sectioning-flowchart12.ja.graffle
<article> <aside> <figure> <div> <section> … → html5doctor.com/aside <figcaption>… → html5doctor.com/figure <article> … → html5doctor.com/section <p> <address>, <blockquote>, <pre>… → html5doctor.com/semantics … → html5doctor.com/article … → html5doctor.com/div By @riddle & @boblet www.html5doctor.com <nav> … → html5doctor.com/nav HTML5 Element Flowchart 2011-07-22 v1.5-ja Translation by @mlhshino
PolymerでMaterial Designなチャットアプリを作ろう
今年注目のオープンWebテクノロジーのひとつに、Web Componentsが挙げられると思います。HTML5Experts.jpでも今まで幾度も関連記事、Polymer.jsについての記事が紹介されてきました。今回は実際に、PolymerとMaterial Designのデザインコンセプトを用いて、視覚的にもユーザエクスペリエンスにも優れたチャットアプリを実際に作ってみましょう。 まず始める前にこのライブデモ、Kitteh Anonymousをデスクトップまたはモバイルのモダンブラウザで実際に試してみてください。ここでは、このデモの簡略版であるLiteバージョンを実際に作成する方法をステップ・バイ・ステップで紹介したいと思います。 必要な知識 Polymerの基礎知識 パッケージマネージャ、Bowerの基本的な使い方（Polymerと依存するファイルをインストール、アップデートするのに使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブパフォーマンスの基礎とこれから
http://fontdragr.com/
http://2ndidea.com/html5/html5-coding-without-html5shiv/
HTML5 Conference 2015 講演資料まとめ #html5j
