Qiitaのスライドモードは、mizchiが勝手に作った！？─Incrementsの縛られない開発スタイルを聞いてみた
Qiitaのスライドモードは、mizchiが勝手に作った！？─Incrementsの縛られない開発スタイルを聞いてみた 馬場 美由紀（HTML5 Experts.jp編集部） 及川卓也さんや田中洋一郎さんをはじめ、著名なエンジニアが次々と入社していることで話題のIncrements。8月にはさらにCSSのコードフォーマッターであるStylefmtの作者・morishitterこと森下雅章さんを迎えるなど、さらに開発陣営を強化しています。 今回はさっそく森下さんにも加わっていただき、白石俊平編集長を聞き手に、CTOの髙橋侑久さん、フロントエンドエンジニアmizchiさん、デザイナーの東峰裕之さんに、「Qiita」の開発環境や開発スタイルなどについて聞いてみました。 特定領域でとんがってるスペシャリストが増えてきた 白石：まずは、自己紹介とQiitaの開発チームでの役割についてお聞かせください
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
【Service Worker最前線】仕様策定の現場で何が議論されているのか？
【Service Worker最前線】仕様策定の現場で何が議論されているのか？ 安田 絹子 昨年末頃からホットなトピックになりつつある「Service Worker[1]」ですが、その先行実装が落ち着いてきた今夏、仕様に対する提案や今後の方向性などについて話し合うF2F（Face-to-Face）ミーティングがサンフランシスコで開かれました。本稿では、このミーティングの様子を中心に、Service Workerの最近、そしてこれからの論点をいくつか解説してみたいと思います。 Service Workerは昨年5月に最初のドラフトが公開されたばかりの新しいAPIですが、Webの前提を変える可能性を持った基盤APIとして注目されています。Service WorkerはあくまでWebの1つのAPIにすぎませんが、このミーティングではWebのこれからの方向性を考える上でも興味深い議論がいくつかなさ
乗るしかない！Reactのビッグウェーブに！─isomorphic tokyo meetupに参加してきた
乗るしかない！Reactのビッグウェーブに！─isomorphic tokyo meetupに参加してきた 白石 俊平（HTML5 Experts.jp編集長） おはようございます。編集長の白石です。 昨日（2015年4月30日）、isomorphic tokyo meetupに参加してきました。 というのも実は近々、HTML5 Experts.jpでは「Webアプリケーション・アーキテクチャ」に関する特集を行う予定なのですが、そこでキーワードとして挙げられていたのがisomorphic。 サーバサイドとクライアントサイドでコードの共有を促進するのが主な目的の一つ、というところまでは理解できたのですが、実際のところ、アーキテクチャはどう変わるのか？ それを探りたいと思っていたところ、ちょうどよくイベントの開催がアナウンスされていたので、急遽取材させていただきました。 取材を快く受け入れてく
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」
モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」 Tomomi Imura（Slack） 今回のGoogle I/OはAndroidに特化していた傾向が強く、WebテクノロジーやChromeの扱いが比較的小さかったせいもあり、多くのWebフロントエンドディベロッパーは不満を感じた部分もありました。 そこでその中の数少ないChromeのセッションの中から、私が興味深く感じたクロスデバイス開発にはこの先欠かせなくなると思われる Chrome DevToolsの新機能についてレポートします。 このセッションを行ったPaul Bakaus氏（以下、ポール氏）は、かつてjQuery UIやAvesゲームエンジンを開発したことでも知られています。一時期日本に在住していたこともあるので、この記事を読んでいる皆さんには既になじみのある方かもしれません。現在はGoogle
攻撃シナリオを使って解説するApplicationCacheのキャッシュポイズニング
攻撃シナリオを使って解説するApplicationCacheのキャッシュポイズニング 吾郷 協 最近ウィンナーと燻製の自作にはまっています。@kyo_agoです。 この記事は1/28に行われた、第44回HTML5とか勉強会（HTML5とセキュリティ編）で発表した内容を元に書いています。 今回はApplicationCacheのキャッシュポイズニングに関してお話したいと思います。 最初に用語について説明します。 キャッシュポイズニングとは、キャッシュに対して攻撃コードを送り込み、そのキャッシュ経由で攻撃コードを実行させる攻撃手法です。 Googleで「キャッシュポイズニングを検索」した場合、検索結果の上位はDNSのキャッシュポイズニングに関する内容がほとんどですが、最近はクライアントサイドのキャッシュポイズニングも話題に上がるようになっています。 「クライアントサイドのキャッシュポイズニング
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
WebP – Webを速くするためにGoogleがやっていること Make the Web Faster 01 –
WebP – Webを速くするためにGoogleがやっていること Make the Web Faster 01 – Jxck 画像は、サイズが大きい（大きくなりがちな）コンテンツの一つです。 最近は画像を使わないページはほとんどなく、むしろ使う量はどんどん増えているんじゃないでしょうか。また、HiDPI対応などでサイズも増えつつあるでしょう。 Googleの調査では、現在Web上のトラフィックの65%を画像が占めているそうです。Introで解説したように、パフォーマンスを考えるとファイルサイズは「なるべく小さく」が望ましいため、画像は通常圧縮された形式で使用されます。 WebPは、Googleが開発した圧縮形式で、従来の形式よりもファイルサイズを小さくすることを目的としています。今回はそんなWebPの概要と使い方、注意点を取り上げます。 画像圧縮とは？ ここで対象としているのはピクセル形式
リアルタイムにライブ映像をマンガ化「マンガテレビ」アーキテクチャ編
リアルタイムにライブ映像をマンガ化「マンガテレビ」アーキテクチャ編 小松 健作（NTTコミュニケーションズ） 「漫画家の先生をゲストに迎えた対談イベントで、“マンガ”をフィーチャーしたエンターテインメントを最新のWeb技術で作れないだろうか？」そんな思いから生まれた「マンガテレビ」。映像をリアルタイムで“マンガ化”するだけでなく、イベントをもり上げる各種機能が盛りだくさん。今回は、そのアーキテクチャを紹介します。 マンガテレビの紹介 「マンガテレビ」は最新のWeb技術をふんだんに活用し、イベント映像を“リアルタイムでマンガ化”するエンターテイメントツール。俗にいう「技術の無駄遣い」Webアプリケーションです。我らが、HTML5 Experts.jpの編集長「白石俊平」氏が開催している「（白石俊平と）カッコいいやつら」のイベント用ツールとして開発しました。 「マンガテレビ」を説明するのに言葉
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた（後編）
HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた（後編） 増井 雄一郎（FrogApps, Inc.） 前回の記事では、 wri.peの紹介と、HTML5のApplication Cacheを使ったHTMLや画像などの読み込み高速化の話をしました。今回は、Web StorageのlocalStorage/sessionStorageを使い、Ajax通信部分と表示の高速化を行う手法を説明しましょう。 localStorageを用いた通信と表示の高速化 前回のApplication Cacheで、HTMLの読み込みが高速化されました。これでも十分速くはなったのですが、画面に全ての情報が表示されるまでには、ちょっと時間がかかります。 wri.peではメモの一覧や、メモ本体の読み込み・保存はXHR(XMLHttpRequestの略。Ajax通信で使うモジュール名)を
HTML5Experts.jp
進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より) 物江 修 2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった...
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
