タグ

ブックマーク / html5experts.jp (12)

  • Firebaseで作る簡単リアルタイムウェブアプリケーション(前編 補)

    前回の記事は前編と称してFirebaseの機能を簡単に紹介しました。その続きである今回の記事は後編として何かアプリケーションを作りながら個々の機能を詳細に説明するはずでした。 しかし、前編からすでに10ヶ月が過ぎ、途中にGoogle I/Oを挟んだこともあって、すでに全体像が大幅に変更されています。そこで今回は「前編 補」として、いまさらではありますがGoogle I/O前後でFirebaseがどのように変わったのかをざっくりと説明します。 新旧Firebaseの違い 2016年5月のGoolge I/Oのキーノート、そしてそれに続く各セッションでFirebaseの大幅な拡張が発表されました。いったいどのような拡張が行われたのか、それはその発表前後のトップページの文言を比較すると分かりやすいでしょう。 旧Firebase どうでしょう。新旧の立ち位置の違いが明確に表れていると思いませんか。

    Firebaseで作る簡単リアルタイムウェブアプリケーション(前編 補)
  • 進化するWeb ~Progressive Web Appsの実装と応用~(de:code2018より)

    2018年5月に開催された日マイクロソフト主催のイベントde:code 2018で「進化するWeb ~Progressive Web Appsの実装と応用~」というセッションを担当しました。 イベントに参加できなかった方に向けてセッションの内容を記事にまとめましたので、ぜひご覧ください。 進化する Web ~ Progressive Web Apps の実装と応用 ~ from Osamu Monoe この記事では、昨今話題に上ることが多いPWAことProgressive Webアプリケーションについて、実際の作り方を解説しながら、それがいったいどういったものであるかを詳(つまび)らかに紹介することを目的としています。 Webでは、「ネイティブアプリと同じことができる」「ネイティブアプリを置き換える」など、期待に胸を膨らませずにいられない浪漫に満ちた噂がありますが、それが当かどうか記事

    進化するWeb ~Progressive Web Appsの実装と応用~(de:code2018より)
  • 実は世界を変えるWeb Paymentsについて、グーグルのえーじさんに聞いてきた!

    連載: HTML5 Conference 2017特集 (16) こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に、様々なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、Googleのえーじさんです。 えーじさんのセッションは「ウェブのための次世代決済法」でした。 スライド資料はこちらで公開されています。 Web Paymentsは(モバイル)Webの決済体験を変える 白石: 日は、Web Paymentsについてお聞かせください。 Web Paymentsというのは、その名の通りWeb上での支払い体験を改善するものだと思いますが、そもそもなぜWe

    実は世界を変えるWeb Paymentsについて、グーグルのえーじさんに聞いてきた!
  • AMPの気になること全部、Googleの山口さんに聞いてきました!

    連載: HTML5 Conference 2017特集 (15)こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に、様々なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、Googleの山口能迪(やまぐち・よしふみ)さんです。 山口さんのセッションは「AMPで加速するモバイルウェブアプリケーション」でした。 スライド資料はこちらで公開されています。 https://docs.google.com/presentation/d/1ZYyHFRMZnD6bfi6fl9yh9G_TIs3roSxvp-Goa1JZv_c/htmlpresent AMPとは何か?

    AMPの気になること全部、Googleの山口さんに聞いてきました!
  • 「最近のWebパフォーマンス改善について知っておきたいコト」についてあほむに聞いてきた

    「最近のWebパフォーマンス改善について知っておきたいコト」についてあほむに聞いてきた 白石 俊平(HTML5 Experts.jp編集長) こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、いろいろ伺ったものです。セッションの内容をより深く理解する手助けになるだけでなく、記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、株式会社サイバーエージェントにお勤めの佐藤歩さんです(ネット上では「あほむ」「ahomu」のIDで有名)。 (プロフィールはこちら) あほむさんのセッションは「最近のWebパフォーマンス改善について知っておきたいコト」(ホール 13:20-14:00)です。 (現在HTML5 Conference 2017は定員オー

    「最近のWebパフォーマンス改善について知っておきたいコト」についてあほむに聞いてきた
  • エキスパートたちが語る、Webパフォーマンス最新テクニック

    こんにちは、編集長の白石です。 今回は、HTML5 Experts.jpでWebパフォーマンスに関する特集を行うにあたって、エキスパートの皆様による誌上座談会を開催してみました。 通常であれば数時間語っても尽きないような話を、1時間強でみっちり聞いてきました。 Webパフォーマンスの改善について、初心者から上級者まで楽しめる、有用な記事になっているかと思いますのでどうぞお楽しみください。 エキスパート紹介 白石 皆様、日はお集まりいただいてありがとうございました!まずは簡単に自己紹介をお願いできますでしょうか? 竹洞 株式会社SpellDataのCEOを務めている、竹洞です。Webパフォーマンスには10年間くらい関わっており、年間200サイトくらいの計測に携わっています。 今度から、Instart Logicのエヴァンジェリストも務めることになりました。Instart Logicは、Ap

    エキスパートたちが語る、Webパフォーマンス最新テクニック
    kangaetemita
    kangaetemita 2016/12/31
    衝撃!「遅延原因の80%がサードパーティ」というのは、そこにCDNも含まれるんです。自前で配信するのが結局一番速い
  • この1年、Webのパフォーマンスで変わったことは?──HTML5 Conference 2016

    この1年、Webのパフォーマンスで変わったことは?──HTML5 Conference 2016 川田寛(ピクシブ株式会社) こんにちは、ふろしきです。HTML5 Conference 2016の当日は、38度近くの熱があり、発表時はろれつが回ってませんでした。しかし、伝えたいことは伝えられたと思っています。その内容とは… 「この1年でWebのパフォーマンスの技術にどんな動きがあったのか」 というダイジェスト。ここで話した3つのテーマについて、記事でもご紹介。 1. レイアウト処理を減らす HTML5がバスワードするよりもずっと前から、CSSでアニメーションさせることはごくごくあたりまえ。JSが扱えないデザイナーであっても手軽にアニメーションできる良い世界になりました。しかしそこに、モバイルが出現したことで、JSだけで満足という人たちもCSSの機能を活用しなくてはいけなくなりました。 モ

    この1年、Webのパフォーマンスで変わったことは?──HTML5 Conference 2016
  • 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

    Googleが新たに提唱するProgressive Web Appsの新たな開発パターン「PRPL」とは?
  • HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか…全てお見せします!ーWebパフォーマンス改善企画(改善編)

    HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか…全てお見せします!ーWebパフォーマンス改善企画(改善編) 吉川 徹 Webパフォーマンス改善企画(改善編)は、実際の改善内容とその結果をお伝えします!パフォーマンス分析を行った解析編は、こちらからご覧ください。記事はHTML5 Experts.jpがいかにして速くなったのかを包み隠さずお伝えします! 今回の前提条件と改善ポイント 実際の改善を行う前にいくつか前提条件を説明しなければいけません。まず動作環境ですが、HTML5 Experts.jpは、WordPress上で動作しており、改善内容はプラグインの導入やPHPのコード修正が主になっています。ただ、そういったWordPressの泥臭いチューニングは題ではないので、細かく解説するのではなく大まかな改善内容とその方針を説明したいと思います。また、改善内容に関して

    HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか…全てお見せします!ーWebパフォーマンス改善企画(改善編)
  • HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか…全てお見せします!ーWebパフォーマンス改善企画(解析編)

    ちなみに後日談…計測対象の個別記事ですが、計測のためのアクセスがかなりの頻度あるため、PVランキングでは常に1位を独占していました(笑)。また、Google Analyticsについても、計測開始前に除外設定しておかないと、正確なデータが得られなくなりますので、ご注意下さい。 計測して問題点を洗い出す ファーストバイトダウンロードタイムの遅延問題 ということで、竹洞さんに一定期間サイトのパフォーマンスデータを計測してもらいました。その結果を見ながら、早速現在のHTML5 Experts.jpの問題点を洗い出します。 竹洞:これがある日の、ブロードバンド回線でChromeを用いてアクセスした時の計測結果です。 見ての通り、ID1のhtmlの取得にすごく時間がかかっていることがわかります。この水色は、ファーストバイトダウンロードタイム(Time To First Byte、以下、TTFB)とい

    HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか…全てお見せします!ーWebパフォーマンス改善企画(解析編)
  • 今からでも間に合う!Node.js v4&v5は何が変わったか?

    Node.js v4リリースに向けて とうとうメジャーバージョンアップにされたNode.jsである、Node.js v4がリリースされました。今回はこのNode.js v4がこれまでのNode.js v0.12やv0.10と比較してどう違うのかを解説します。また、最新ではv5もリリースされていますので、合わせてお伝えしていきます。 なんでいきなりv4なのか おそらく一番最初に抱く感想は、v0.10とかv0.12みたいな数字からv1.0を飛ばして、なんでいきなりv4.0がリリースされたのかという疑問だと思います。これにはio.jsというプロダクトが関係しています。 2014年の年末、io.jsというプロダクトが発表され、2015年の初めにv1.0がリリースされました。io.jsというのは Node.js のforkで別リポジトリによって実装されたプロダクトです。io.jsの詳細は筆者のブログ

    今からでも間に合う!Node.js v4&v5は何が変わったか?
  • JavaScriptエンジニアへのIoTのすすめ:Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう

    JavaScriptエンジニアへのIoTのすすめ:Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう Tomomi Imura(Slack) ここ、HTML5Experts.jpでも今年になって IoTやWoT関連の話題がことかかず、みさなんも関心を持ち始めていることかと思われます。 私もフロントエンドエンジニアではありますが、もともと関心があったことと、去年からデータ・ストリームのPaaS (platform as a service) 会社であるPubNubで働いていることもあって、IoTを避けずには通れなくなり、電子工作を始めるようになりました。 そこで、最近東京・渋谷で行われた、東京Node学園で登壇した際に話したテーマ、Hardware Hacking for JavaScript Developers から、ArduinoとNode.jsを使ってプロト

    JavaScriptエンジニアへのIoTのすすめ:Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう
  • 1