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 で
第1回 ニコ動／ニコ生 HTML5化への奮闘～ドワンゴ流動画配信サービスのつくりかた～ | gihyo.jp
不動の人気を誇る動画配信サービス「ニコニコ動画」（ニコ動）と「ニコニコ生放送」（ニコ生）において、動画プレーヤのHTML5化、そしてバックエンドシステムの刷新が図られました。このプロジェクトの背景や使われた技術、苦労したポイントなどについて、ドワンゴのエンジニアである七田弘志氏（写真1）、後藤哲志氏（写真2）、三須健太郎氏（写真3）にお話を伺いました。 フロントエンドのみならず、バックエンドシステムも刷新 ──どのようなきっかけから、HTML5化プロジェクトが始まったのでしょうか。 七田：大きな要因となったのは、主要WebブラウザでFlashのサポートを打ち切るという方針が示されたことですね。今までもスマートフォンやテレビデバイスなどではHTML5プレーヤを実現できていたのですが、PC版のページは既存機能が大きく、プレーヤの作り変えが後手に回っていた部分が大きかったんです。そ
マイクロソフト、ネイティブUIをハイブリッドアプリケーションに組み込める「Project Ace」を公開
マイクロソフト、ネイティブUIをハイブリッドアプリケーションに組み込める「Project Ace」を公開 HTML5/JavaScriptなどのWeb標準技術でアプリケーションを開発し、それをラップしてネイティブアプリケーションのように単独で実行可能にしたものが、いわゆる「ハイブリッドアプリケーション」と呼ばれるものです。CordovaやPhoneGapなどを用いて開発することができます。 ハイブリッドアプリケーションはHTML5やCSS、JavaScriptなどで開発するため、iOSやAndroidなどのマルチプラットフォーム展開が容易な一方、ルック＆フィールなどがiOSやAndroidのネイティブUIと異なることも多くあります。 マイクロソフトは、このハイブリッドアプリにネイティブUIのコントロールを統合できるCordovaのプラグイン「Project Ace」をオープンソースで公開し
お疲れさま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
Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの
コマンドラインツール ターミナルからnpmでファイルをさくっとダウンロードしたり、ちょっとした繰り返し作業も一発で実行してくれるツールが色々あって、やっと苦手意識も減ってきました。 まだ全然使いこなせてはいないんですが、前に比べて意味が分からず門前払いを食らっていた便利なツールがちょっとづつ使えるようになってきました。 気になったのでこもりさん（@chiper）が販売しているDevelopment Environments for Web Designersというのを買ってみました。今あまりWebデザイナーではないけどw Brackets メインで使っているエディターです。もともとはエディターの移行を考えていてSublime Textがあまりなじまなかったときに、プラグインが入れられリアルタイムリロードが簡単にできるエディターとして触ってみました。以降ずっと使っています。Advent Ca
TouchstoneJS·ハイブリッドアプリ開発に使いたいUIフレームワーク MOONGIFT
WebブラウザでネイティブライクなUIを作成するフレームワークはデザインのトレンドに合わせて年々変わってきています。テーマで最新のUIに対応できる場合もありますが、HTML5/JavaScript/CSS3の進化も考えると、常にトレンドに乗っておくのが良さそうです。 TouchstoneJSは最新のUIフレームワークで、ハイブリッドアプリを作るのに最適なフレームワークとなっています。ハイブリッドアプリ開発にぜひ使ってください。 TouchstoneJSの使い方 TouchstoneJSはまだベータ版で全機能は提供されていません。なので執筆時点での機能を紹介します。 一覧。グループリストです。 ヘッダーバーの色変更。 検索付きのリスト。 アラートバー。 フッターバー。 シンプルリスト。 詳細表示。 サムネイル付きリスト。 トグル。 フォーム。 パスコード入力。 入力したパスコードが表示できま
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
PhoneGapとは一味違う！純国産ハイブリッドアプリフレームワーク、「アプリカン」事始め
PhoneGapとは一味違う！純国産ハイブリッドアプリフレームワーク、「アプリカン」事始め 畠田 喜丈（株式会社ニューフォリア） アプリカンは、純国産のハイブリッドアプリフレームワークです。いつも使っているエディタだけでアプリが作れるので、開発環境のOSも選びません。 アプリカンは2013年末に公開され、ハイブリッドアプリフレームワークとしては後発ですが、他のフレームワークとは異なるアプローチとして、様々なパートナー企業のサービスのSDKを組み込み、AR機能や、位置情報連動サービスなど複雑なサービスオプション機能を JavaScriptから簡単に呼び出せるようになっています。 基本は無料で利用できますが、前述の高機能なオプションを使ったり、無料ビルドしたアプリに表示される広告バナーを外す場合には有料となります。 アプリカンの開発に必要なもの エディタ 好奇心 アプリカンの開発には、IDEを
HTML5でゲームの仕組みを解説しているサイト「Game Mechanic Explorer」 - 強火で進め
HTML5でゲームの仕組みを解説しているサイトです。 Game Mechanic Explorer http://gamemechanicexplorer.com/ 例えばこの弾を発射する処理の解説の章では最初は「1つだけ発射」、次に「複数発射」、次に「向きを考慮して複数発射」と徐々に機能を増やしていく作りで、とても理解し易いです。また、 HTML5 だというのを活かして同じ画面に実行画面とソースコードの両方が有るのも良いですね。 読み進め方 左側に有るメニューのドロップダウンから章(チャプター)を選択します。 次にその下のリストを順番に選択して節(セクション)を切り替えて読み進めて行きます。
『nodeベースでGUIアプリを開発する「node-webkit」』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。Ameba事業本部の杉本と申します。 業務では「天下統一クロニクル」というチームでフロントエンドのディベロッパをしています。 今回は、「node-webkit」という一風変わったアプリケーションを紹介させていただきます。 私達は普段、gruntといったnode.js製のツールを使ってJavaScriptの結合や圧縮、画像の減色といった処理を自動化していますが、node-webkitはこれらnodeのモジュールを使ってGUIアプリケーションを作れるツールです。nodeの資産をそのまま利用できるので、私のようなディベロッパには嬉しいですね。
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…
インテル、無償のHTML5アプリ開発ツール「Intel XDK」を刷新。ランタイムエンジンにBlinkベースの「Crosswalk」を採用
インテル、無償のHTML5アプリ開発ツール「Intel XDK」を刷新。ランタイムエンジンにBlinkベースの「Crosswalk」を採用 ただし名称に関しては、現バージョンの「Intel XDK」を2月末で提供終了した後には、新バージョンの「Intel XDK NEW」の名称が「Intel XDK」となる方針も合わせて明らかにしました（本記事では分かりやすさのため新バージョンを「XDK NEW」と記します）。 PhoneGapに代わりCrosswalkが採用 Intel XDKはHTML5/CSS/JavaScriptによるアプリケーションの開発環境と、PhoneGapによるビルドシステムを備えており、AndroidやiOSなどのクロスプラットフォームに対応したモバイルアプリケーションを開発することができました。 XDK NEWの最大の変更は、ビルドシステムをPhoneGapから、ランタ
今どきの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.
世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog
2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし
iOS7におけるMobile Safariの主な変更点
iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏（@firt）がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者／開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。 元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。 ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」（this is the buggiest Safari version since 1.0）だそうです… UIが大幅に変更、フルスクリーン（に近いサイズ）がデフォルトに Webブラウジングをしている
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/hp0me/items/1c8d099bacbb5e068081
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
