HTML5 Conference 11/25
HTML5 Conference 11/25
CDNのエッジでJavaScriptとServiceWorkerを実行できる「Cloudflare Workers」がWebAssemblyに対応 CDNプロバイダのCloudflareは、3月にリリースした「Cloudflare Workers」を強化し、WebAssemblyの実行に対応したことを発表しました。 Cloudflare Workersは、同社が提供するグローバルなコンテンツデリバリーネットワーク(CDN)のエッジにおいて、開発者がJavaScriptのコードを配置し実行できる機能を提供します。また、HTML5の新機能として策定されたService Workerも利用可能です。 参考:JavaScriptのコードとService Workerをユーザーに近いCDNのエッジで実行可能。Cloudflareが「Cloudflare Workers」を提供開始 Service W
こんにちは、フロントエンドエンジニアの原(@herablog)です。今日はアメーバニュースモバイル版(モバイル端末でご覧ください)のリニューアルをご紹介したいと思います。 労力と効果 Webがサービスとして利用されるようになってから、長い月日を経てさまざまな構成パターンやライブラリ・フレームワークが生み出されました。今では作りたいものはなんでも作れるといっても過言ではないでしょう(いや、やっぱり大げさかもしれません)。そんな中で我々は労力に対して効果がより得られるポイントを探り出す必要があります。今回のアメーバニュースモバイル版のリニューアルでは、そのような考えから始めてみました。 エンジニアを褒めるネコ、いつもありがたく使わせていただいております。 サイトの前提条件 どのような構成のWebサイトにするかを選択する上では、前提条件を確認・定義することが大切です。それによって選択される結果は
Typetalkチームのインフラ担当の二橋 (@futahashi) です。 本稿ではTypetalkでキャッシュしないCDNを用いたAPI高速化を実現しましたので、その技術を紹介したいと思います。 Webアプリケーションに汎用的に使える技術で、簡単に導入できて改善効果も大きいので、興味を持たれた方は是非試してみて下さい! Typetalkが抱えてた課題 Typetalk は世界中にサービス展開しているチャットツールです。 しかし、ユーザがサービスを利用する地域に依存してネットワークの応答時間に差がある問題がありました。 これは、サービスを単一のリージョンで提供しており、リージョンから離れた地域よりアクセスされると応答に時間がかかってしまうためです。 静的なコンテンツ部分はCDNによるキャッシュで高速化できていたのですが、動的な部分は対応ができていなかったため、応答に時間がかかっていました
2018年9月5日、第70回となる「HTML5とか勉強会」が開催されました。今回のテーマは「開発環境」。 Webフロントエンドの開発環境をテーマに、エディタプラクティスやServiceWorkerを開発ツールとして使うアプローチ、長期運用されたサービスのリニューアル方針など、登壇者たちがその知見を語ります。プレゼンテーション「ServiceWorker Side XXX」に登場したのは、mizchi氏。ServiceWorkerを駆使したある取り組みについて紹介します。講演資料はこちら 開発環境のためにServiceWorkerを使う mizchi氏(以下、mizchi):では「ServiceWorker Side XXX」ということで発表させていただきます。mizchiです。よろしくお願いします。 (会場拍手) ちょっと自己紹介とかはする気ないんですけど、最近本を書いたので、その紹介だけ
Vuesax Vuesax は、vuejsに基づいたコンポーネントのフレームワークであり、段階的に採用できるようにゼロから設計されたフレームワークです。 フレームワークは、アプリケーションの開発を容易にし、必要な機能を削除せずにアプリケーションの設計を改善することに重点を置いています。私たちはすべてのコンポーネントが色、形、デザインで独立していて、すべてのフロントエンドが好きですが、作成や制作のスピードを損なうことがないようにします。 インストール このインストレーションチュートリアルでは、vuesaxの使用方法について説明します。 webpack Vue CLI 3 NPM Node.js CDNによってプロジェクトにvuesaxを実装しようとしている場合は、vuejsの後にスクリプトのインポートを置くだけで説明することはあまりありません プロジェクトを作成する まず、偉大なプロジェクト
ブロッキング問題に関する意見書 平成30年8月5日 弁護士 壇 俊 光 弁護士 板 倉 陽一郎 弁護士 唐 澤 貴 洋 弁護士 神 田 知 宏 弁護士 清 水 陽 平 弁護士 中 澤 祐 一 弁護士 山 口 貴 士 弁護士 吉 井 和 明 私達は、日頃、インターネット上の権利侵害に対する被害救済に取り組んでいる弁護士です。 インターネット上の漫画海賊版サイトの問題について,インターネット・サービス・プロ バイダ(ISP)に対して著作権侵害を理由とする「サイトブロッキング」によるアクセス遮断 措置が検討がされていることについて、日々現場に関わっている弁護士の立場から海賊版サイト対策に対して以下のとおり意見するものです。 私達は、インターネット上での著作権侵害を放置することが許されるとは思っていません。ただ、現時点では、海賊版サイトが、本当に日本の著作権法を侵害しているといえるのか不明な点
DNS Queries over HTTPSにおいて、HTTPのキャッシュとDNSのキャッシュの話が面白かったのでメモ DoH IETFで「DNS Queries over HTTPS (DoH)」と呼ばれる、HTTP上でDNS通信を行うプロトコルが議論されている。DoHと呼ばれており、実装もすでに広く行われている。 外とのDNS通信を遮断するようなネットワークでもHTTPSとして出ていくため経路上からは判別することができない。特にHTTP2などで通常のWebサーバとのコネクション上でDNSクエリが送られれば見分けはつかない。 また、CDNからの配信も既存のWebの仕組みに乗っかることができるほか、HTTP/2 ServerPushも行えるなど応用の幅は広い。 例 GETとPOSTに対応しているが、GETでwww.example.comの名前解決を行う例を示す。 このように、HTTPリクエ
こんにちは。 一休.comの開発基盤を担当しています、akasakas です。 今回は、画像最適化配信サービスであるimgixを宿泊・ レストランサイトに導入して、 画像最適化・サイトスピード改善につなげたお話をしたいと思います。 ここでお話しする内容 サイトスピードという観点での一休が抱えていた課題(の一部) imgixの特徴とそこでできる解決策 imgix導入の効果 imgix導入をする上で大変だったこと これから画像最適化を考える人たちへ まとめと感想 おまけ(与太話) 諸注意 imgixを導入して、画像最適化という面でサイトスピード改善につながりましたが、 サイトスピードという観点で一休が抱えている課題はまだまだあります。 imgixを導入すれば、サイトスピードは万事解決!!!という話ではありませんので、悪しからず。 サイトスピードという観点での一休が抱えていた課題(の一部) 画像
正式リリースに向けての開発で表面化した不都合 以前、アーキテクチャ編: SSR と CDN ( Fastly ) とユーザー依存情報の分離(新規開発のメモ書きシリーズ4)で紹介したように、SSR で生成した HTML を CDN ( Fastly ) でキャッシュできるように「ユーザー依存情報はクライアントサイドで非同期に取り扱うというアプローチ」をとっていました。それによって発生していた不都合と解決に関する追加情報です。 ユーザー依存情報が非同期でレイアウトされる問題 ユーザー依存情報が非同期で解決されるということは、そのような情報を扱うコンポーネントの矩形は Web ページが一度レンダリングされたあとにレイアウトされます。つまりこの記事でも紹介されたところの「ガタンッ」的なユーザー体験が生じます。 ログインと非ログインが、全く同じサイズの矩形を確保するようなビジュアルデザインになってい
GraphQLは最近注目されているWeb APIのための問い合わせ言語だ。 現在主流のRESTfulなAPIはURLとmethodでリソースを表現するわけだが、GraphQLは単一エンドポイント(ex: "POST /graphql")だけ存在し、欲しいリソースをHTTP POSTのbodyに明示的に記載してリクエストする。 ↑JSON APIをGraphQLの形式でコールする(引用: how to graphql ) 徐々に実装例が増えてきており、2016年にはGithubがAPIの実装を全面的にGraphQLに移行させたのが注目された。 色々調べていくと、GraphQLは単にRESTの代替ではなく、開発・運用フローを一新させうるほど豊かな思想・機能を含む事が分かって来たので現状の整理をしてみたい。 APIリクエストを束ねて効率化RESTではURLがひとつのリソースを表すため、複数のリソ
Cloudflare Worker使ってみた リリースを見た時「あーすごいなーこの発想」と思って、これは使ってみなきゃということでやってみた。 Cloudflare Workerとは Cloudflare CDNのエッジで動作させるWorkerプログラムで、面白いのはService Worker、つまりJavaScriptで書けること。 そもそもService Worker自体がブラウザのリクエスト・レスポンスをフックして処理するものなので、リクエストとレスポンスが対になるならEdgeサーバで使おうぜっていう発想がすごい。 詳しくは他の人も書いてるのでそっちを参照のこと。 AWS LambdaのGatewayとして使ってみる WorkerをGatewayとして、AWSのLambda Functionをコールしてその出力をレスポンスとして返すGatewayを作ってみた。 Lambdaを使う機
CDN Study (Akamai/Fastly) - connpass 久しぶりにすごい人混みに身をおいたわ・・。 どんな勉強会だったか CDNにもいろんな歴史がある あの頃のCDNといまのCDNでは、世界観も役割も変わってきてる 気がする ので、中の人に聞いてみよう! という主旨の会。 from Akamai 資料は見つけたら CDNの過去と現在 1995年の時点で、中央集権的なWebは破綻するといわれていた 中央集権型ゆえに インターネットの混雑が問題になるだろう from Tim Berners-Lee インターネットは網の目 ただ実際は地震でケーブルが切れて不安定になったり 去年のGoogleの経路のアレとかも 爆発的なトラフィックによる負荷 スターウォーズの新作トレーラーとか インドのプレミアリーグとか CDNってそもそも インターネットの不安定さを避けるためにどうすれば ユー
CDN_Study という勉強にいってきた。 https://http2study.connpass.com/event/81469/ そこで、Akamaiの方が、「個人の意見だけど、アプリケーション側がもっと基礎設計でステートレスでキャッシュフレンドリーな設計になってないといけないよね」という旨の発言をしていて、最近そのことにアプリケーションエンジニアとして同じようなことを考えていたので、書き出してみる。 SPAとかSSRとかフロントの不毛な話は出さないようにしてるが、主にサーバレス環境を意識している。 前提 世の中のアプリケーション内のモジュールは、Statefull or Stateless に分類でき、それをツリー状に表現できれば差分検知できる、という React の仮想 DOM 的な世界観が自分にある 以下の話は、基本的には Fastly のサロゲートペアーとそのためのミドルウェ
本日コーポレートサイトでお知らせした通り、Web版のメルカリにおいて一部のお客さまの個人情報が他者から閲覧できる状態になっていたことが判明しました。原因はすでに判明して修正が完了しております。また、個人情報を閲覧された可能性のあるお客さまには、メルカリ事務局より、メルカリ内の個別メッセージにてご連絡させていただきました。 お客さまの大切な個人情報をお預かりしているにも関わらず、このような事態に至り、深くお詫びを申し上げます。 本エントリでは技術的観点から詳細をお伝えさせていただきます。 2017年6月27日 CDNのキャッシュの動作について、CDNプロバイダと仕様について確認し検証を行いました。その結果一部記述に実際と異なる箇所があり、加筆修正いたしました。 概要 メルカリWeb版のコンテンツキャッシュをしているCDNのプロバイダ切り替えを行いました。 その際本来キャッシュされるべきでない
↓↓↓↓訂正あります。↓↓↓↓ 2018/07/02に株式会社エフコード社内で行われた勉強会のスライドです。 訂正版(随時更新中): https://docs.google.com/presentation/d/15HOMfAbtdWwO48njcB8IdkN3kVAMu3wsmZo0O3S-f_4/edit?usp=sharing 専門家による資料・専門家向けの資料ではありません。自分自身で学習し、論文・文献等を読解してまとめた内容となります。間違い等あるかもしれませんが、あれば是非コメント頂ければと思います。 【訂正事項】 スライド16: 誤:たった一つのプロセスが故障しただけでも有限時間で合意できない 正:たった一つのプロセスが故障しうるだけでも有限時間で合意できない スライド20: 誤: 重要: あるschedule σ1, σ2 がdisjoint (nodeが被ってない) なら
日本経済新聞は国内を代表する経済誌だ。その電子版はwebでの継続課金を大成功させ、いまや50万以上の有料会員を擁するモンスターサイトだ。 その日経電子版が11月6日に全面リニューアルしたのだが、公開後、web業界がにわかにざわついた。表示速度が爆速だったのだ。日経公式もモバイルで2倍の表示速度を達成したと堂々と宣言していた。 webサービスは継続率こそ神KPIで、その継続率には速度が大きく影響する。 これはチェキらないとヤバイと感じ、友人のkitakさんとスピードの秘密を調査してみた。 Fastlyをコンテンツキャッシュに使う殆どのデータはFastlyを経由して取得されていた。Fastlyは最近注目を集めているCDN(世界中にエッジサーバーを配置し、高速にコンテンツを配信するサービス)で、非常に高機能でユニークなサービスだ。 一般に、CDNはいったん世界中にコンテンツをばらまくと、それを無
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く