超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleでChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近（ここ1年くらい）の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず本題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker
プログレッシブウェブアプリ詳解 ─ 過去・現在・未来
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
PolymerでMaterial Designなチャットアプリを作ろう
今年注目のオープンWebテクノロジーのひとつに、Web Componentsが挙げられると思います。HTML5Experts.jpでも今まで幾度も関連記事、Polymer.jsについての記事が紹介されてきました。今回は実際に、PolymerとMaterial Designのデザインコンセプトを用いて、視覚的にもユーザエクスペリエンスにも優れたチャットアプリを実際に作ってみましょう。 まず始める前にこのライブデモ、Kitteh Anonymousをデスクトップまたはモバイルのモダンブラウザで実際に試してみてください。ここでは、このデモの簡略版であるLiteバージョンを実際に作成する方法をステップ・バイ・ステップで紹介したいと思います。 必要な知識 Polymerの基礎知識 パッケージマネージャ、Bowerの基本的な使い方（Polymerと依存するファイルをインストール、アップデートするのに使
HTML Imports: ウェブのための #include - HTML5 Rocks
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
HTML5 input type のブラウザ対応について検証してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
search、tel、url、email以外は対応状況が微妙です。 week、colorのみiPhone・Androidに対応していませんでした。 numberはFirefoxは対応していませんが、iPhoneでキー配列が数字になるため、適宜使用したいところです。 フォームの見た目 各typeを対応ブラウザで見た時の見た目の参考です。 今回はMac Chromeのキャプチャですが、各ブラウザによって多少デザインや仕様が変わります。 対応していないブラウザはどうなる？ 各ブラウザで対応していないtypeはtype=”text”で生成されます。 rangeとcolor以外はなんとかなりますね。 バリデートの実用性は？ Safariはバリデートが機能していないようでしたし、仕様も不親切な点が見受けられました。 各ブラウザのバラバラな対応状況を考えると、実用出来るのはまだ先のように思います。 バリ
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
業務で使えるオープンソース（113）·Webファイルアップロード MOONGIFT
HTML5によってファイルのマルチ選択およびドラッグ&ドロップでのファイルアップロードが使えるようになりました。これによりそれまで感じていたストレスから解放されるようになったという方は多いと思います。 とはいえデフォルトの機能をそのまま使っているのではユーザビリティは高くありません。そこで使ってみたいのがJavaScriptベースのライブラリです。 主な機能 画像サムネイル表示 HTML5のFile APIを使って読み込み、canvas上にサムネイル表示を行うのが一般的です。アップロードしようとしているファイルを見せることでヒューマンエラーを防げます。 複数ファイル指定 HTML5ではinput type="file" に対してmultipleをつけることで複数ファイルアップロードがサポートされています。ただしこの場合、2ファイルと表示されるだけで具体的な内容が分かりづらいこと、一部のファ
Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
25. CSSアニメーションを使う 25 ‣ アニメーションにCSS Transitionを使う ‣ JavaScriptで直接やるよりはるかに速い ‣ setIntervalでアニメーションするのを置き換える 26. すぐわかるCSS Transition 26 .foobar { background-color: white; } .foobar:hover { -webkit-transition: background-color 1s linear; background-color: red; } .foobarクラスの要素 .foobarクラスの要素
HTML5/CSS3の情報をクリップ！ :: dotHTML5
新刊 書籍：これからのJavaScriptの教科書 - モダンJavaScriptを基礎から実用レベルまで (アマゾン) / グーグルがrobots.txtでサポートするフィールドは4つだけ、それ以外は無視 (海外SEO情報ブログ) / UIデザインにアクセントを加える37の簡単なテクニック、完全版 (PhotoshopVIP) / マッチングアプリ個人開発したら逮捕されかけた話 (しょーへー | Zenn) / グーグル、Web Vitals拡張機能を廃止へ - DevToolsへの移行を (窓の杜) / JavaScriptランタイムのBun、C言語のコンパイルとJavaScriptプログラムからの実行をサポート (Publickey) / 任意の画像内から被写体を自動検出し、背後にテキストを挿入できる「Text Behind Image」 (かちびと) ... 続きを読む 新刊 書籍
米Telerik、HTML5ベースのWeb/モバイルアプリ向けUIライブラリ「Kendo UI」をオープンソース化 | OSDN Magazine
Kendo UIは2011年夏にパブリックベータが公開されていたHTMLアプリ構築のためのライブラリ。jQueryをベースとし、HTML5やCSS3、JavaScriptといった技術を使って構築されたもので、モダンなWebおよびモバイルに対応するアプリケーションを開発できる。70以上のjQueryベースのウィジェット、MVVMフレームワーク、カスタマイズ可能なテーマ、テンプレートなどを含み、BootstrapやAngularJSなどのライブラリとの統合も可能。 今回TelerikはKendo UIをApache License 2.0の下で公開する。オープンソース版は「Kendo UI Core」という名称となり、約40種類のUIウィジェットやWebとモバイル開発で利用できるフレームーワークといった基本機能で構成される。UIウィジェットではAutoComplete、DatePicker、T
アップルに追いついたHTML5 | readwrite.jp
アップルのiOSのマーケット・シェアがグーグルのAndroidに押されている状況の中、iOSとAndroidの両プラットフォームに対応する手段として、開発者のHTML5への興味も徐々に高まってきている。 Vision Mobileによる最新のデベロパー・エコノミックス・レポートによれば、開発者におけるAppleのマインドシェアは2013年1月の56％から52％へと減少している。その一方でHTML5は、1年前から2％ほど増加し52％という結果になった。 これによって我々が学ぶべきなのは、今や時代はマルチデバイスであり、開発者は自分の好みのプラットフォームだけに専念してはいられないということだ。 先進国では未だにiOSが君臨アップルのiOSが完全に勢いを失ったわけではない。iOSには忠実な開発者達が多く、59%もの開発者がiOSを優先プラットフォームとして位置づけている。 HTML5はどうだろ
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5, きちんと。
http://hensachi35.com/html-imports-02
DeNA Engineering - DeNAエンジニアのポータルサイト
iPhone＋GPS＋HTML5が支えたトライアスロン大会
無料でLINEやSkypeのようなリアルタイムアプリが簡単に作れるSkyWay
HTML5 Boilerplate: The web’s most popular front-end template
「HTML5でiOSアプリAndroidアプリを作ろう! 〜HTML5ハイブリッドアプリ開発入門〜」話しました
