FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog
You can read this post in English. みなさんこんにちは、FRESH! でフロントエンドの開発している鈴木(sutiwo)です。 前回は、FRESH!におけるPCブラウザのFlash脱却という HLS の Web プレイヤーについて記事を書きました。 今回はスマートフォン・ PC でのブラウザに関するパフォーマンス改善の取り組みとその結果についてお知らせします。 まずクライアントサイドのパフォーマンス改善を行うにあたり、弊社の Web Initiative Center* から 1000ch 氏に加わっていただきどのようなことを目標とするか議論しました。 * Web プロダクトの品質向上とWeb技術を使ったチャレンジを目的に設立された弊社の組織 議論の様子 議論を行った後、今回の改善で以下のことに取り組むことが決まりました。 Service Worker で
お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ本体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し
SPAがネイティブアプリをぶっ壊す：HTML5/Javascriptが変えるWebの未来 - Qiita
はじめに タイトルは半分釣りですが、半分本気で考えてもいます。 近い将来、Webアプリが今のネイティブアプリの市場を超えてくる、と仮説を立てています。 ぜひ、先人のみなさんのご意見やお考えを教えてください。 SPAについて SPAとはなにか（What） 歴史 佐川夫美雄さんのイベントレポートの一部が、非常にまとまっていてわかりやすい部分でしたので、まず引用させていただくこととします。 RIAはアプリケーション利用者に対し高い評価を得ましたが、2010年のAppleショックにより衰退の方向へ向かいます。具体的には2010年にSteve JobsがFlashを激しく批判したことに端を発します。プロプライエタリ(Proprietary Software)なFlashよりオープン性のあるHTML5を推進するようになりました。2011年にはMicrosoftがWeb開発者に対してSilverligh
Twine – ストーリーを整理するノートアプリ
プレゼンテーションは単純にスライドを並べてたんたんと説明していけば良いわけではありません。全体を通して一つのストーリーが必要です。ストーリーが一貫して提供されてこそ、聞き手は納得し、理解を深めることができます。 そんな納得感あるストーリーを作るのに適したソフトウェアがTwineです。Wikiっぽさのある面白いソフトウェアです。 Twineの使い方 Twineは元々Windows、Mac OSX用のソフトウェアでしたが、2.0からWebベースになったようです。プレゼンテーションのスライドや小説、マインドマップの代わりに使うのも良さそうです。 TwineはHTML5/JavaScript製のオープンソース・ソフトウェア（GPL v3）です。 Twine / An open-source tool for telling interactive, nonlinear stories tweeco
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
KineticJS
KineticJS is a fast, robust, HTML5 Canvas Library that is no longer maintained. The last stable version is v5.1.0, and it's pretty darn solid. You can find the github project here. I am also no longer maintaining the CDN which hosted KineticJS files. If your site was using KineticJS hosted on Amazon's S3 CDN services, I'm very sorry for having to pull the plug, but it was getting very costly. For
Cookieを使わずにユーザーを追跡する仕組みが普及しつつある | スラド IT
Canvas機能を使った文字やグラフィックス描画の際の挙動の違いでWebブラウザの違いを識別する「Canvas Fingerprinting」という技術が開発され、すでにトップ10万のサイト中5.5%がこれを使ったユーザー追跡を利用しているという。 また、ユーザがCookieをこまめに削除しても、サイト側が同じデータをFlashのローカル共有オブジェクト（LSO、Flash Cookie）などに保存しておいて回復させれば、実質的にCookieを不滅化することができる。このEvercookieを実現する手段の一つである「Respawning by Flash cookie」sは、人気上位200サイトのうち10サイトで検出されたそうだ。 Cookieを無効にしていても、適切な対処をしない限り、閲覧者の行動はかなりの割合で漏洩している可能性があるようだ。 Canvas Fingerprintin
今年からジワジワくる【秘伝】のJavaScript - {ライブラリ系}初回編 - Qiita
と私が勝手に思っているだけですが 早速それを紹介？ではなくメモります。 理由 誰かが、情報発信をしないとダメかなと思い、気づいたメモとして残します。 ちょっと変わり種を紹介したかった 将来的に流行ったりした時に少しうれしいからです。 JS 正確には、JavaScriptです そして、私はJSエンジニアではありませんが、初めてJSに触れたのは小学生の頃初めて買ってもらったWindows98のPCです。あの頃は意味もなく動いたりすることが面白くて仕方なかったのです。 今回は、そんな幼少の気持ちを奮い起こしたものを紹介します。 それでは紹介 順番は適当です。見た方が面白いと感じたものを使っていただければという感じです。そして、一介のエンジニアたる私の独断と偏見でメモしてるだけですので、あまり内容は気にしないでください。ああ、JSも知らない残念なやつだと罵ってくださっても構いません、実際そのとおり
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの？
27. CSSの中身を覗いてみる .modal-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; }
TechCrunch | Startup and Technology News
Welcome to Startups Weekly — Haje‘s weekly recap of everything you can’t miss from the world of startups. Sign up here to get it in your inbox every Friday. In…
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの？ Gruntの使
Developer's Guide - Google Chart API - Google Code
Discover the resources for adding interactive charts for browsers and mobile devices.
cocos2d-html5エンジンが凄い件 - tsuge development page
cocos2dっていうiPhoneでは有名なゲームエンジンがあるんだけど、それのHTML5版でcocos2d-html5ってのがある。 http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d-html5 これ、ちょっとまともに調べてみたけどかなり凄い。 凄いんだけどいまいちZyngaの日本での頑張りが足らないのか記事が少ないので、ちょっと紹介する。 ダウンロードとか とりあえず自分で触ってみるわって人は、上のリンクからCocos2d-html5-v何がしの最新版リンクをクリックしてダウンロードすればいい。 この記事時点ではCocos2d-html5-v2.1.4が最新。 サンプルゲームはpixi.js辺りに比べるといまいちだけど、個別の機能を確認するのはcocos2d-html5のテストプログラムが使える。 http://www.c
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
intel XDK - HTML5 Development Environment
Write Your App If you can write it for the web using HTML/HTML5, CSS3 and Javascript*, you can use the Intel® XDK to build it as an HTML5 web app or as a native app for all of the major App Stores. Emulate & Test The Intel XDK makes it easy for developers to check look and feel of their apps with on-screen emulation on a wide variety of devices. The App Tester allows you to test on a physical devi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/hp0me/items/1c8d099bacbb5e068081
Fabric.js Javascript Canvas Library
http://breach.cc/
TechCrunch | Startup and Technology News
GitHub - hakimel/reveal.js: The HTML Presentation Framework
