Google I/O 2014 ── ServiceWorker でネイティブアプリとの差を縮めよう
Google I/O 2014 ── ServiceWorker でネイティブアプリとの差を縮めよう 矢倉 眞隆（myakura） 今回お届けするのは、Jake Archibald氏とAlex Russell氏によるServiceWorkerのセッション「Appy Times with ServiceWorker – Bridging the gap between the web and apps」です。 Alex氏はService Workers仕様のEditorで、古くはDojoやChrome Frameに携わっています。TC39やW3CのTAGのメンバーとしても活動し、Extensible Web構想を推し進める一人です。 Jake氏はService Workers仕様の「ゴーストオーサー」だそうです。とても面白い人で、今回も彼のユーモアが炸裂、笑いに包まれた楽しいセッションとなり
Web Componentsが変えるWeb開発の未来
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
モバイル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
キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！
キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！ 金井 健一（フリーランス） ionic 概要 ionicはそのサイトのデザインからも見てわかるとおり、シンプルかつ美しいUIを取り揃えたコンポーネント群で、Apache Cordova を拡張して作られているフレームワークです。 また、動的なUIコンポーネントを実装するために、 AngularJS を採用してる点もその特徴の1つです。 ionicがサポートしているプラットフォームは、iOS 6+とAndroid 4+です。（ただしAndroidについては、2.3+でもいくつかの機能を提供してるとのこと） 現状ではこの2つのプラットフォームのみですが、Windows PhoneとFirefoxOSについても今後対応を進めていくようです。 特徴 Apache Cordovaを拡張して作られている、モバ
Web技術者も知るべきデモ・プレゼンの極意（西脇資哲氏）「Microsoft de:code」イベントレポート
Web技術者も知るべきデモ・プレゼンの極意（西脇資哲氏）「Microsoft de:code」イベントレポート 岩瀬 義昌（HTML5 Experts.jp編集部） 5月29日、30日にかけてMicrosoftの開発者向けイベントである「de:code」が開催された。本記事では、Microsoftのエバンジェリストである西脇資哲氏のセッション「de:code参加者に捧げる最新Microsoftデモ・プレゼンの極意」について紹介する。 プレゼンテーション・デモとは プレゼンテーションでは相手に、話をする、画像・動画・デモを見せる等を行う。このプレゼンテーションにおいて、重要なことはまず相手に伝わること、そして相手に伝わった結果、さらに重要なのが相手が動いてくれることだ。相手が動いてくれるとは、例えばプロジェクトについて説明した結果、相手が人・お金のリソースを出してくれる、ということだ。 この
知らないと損する？Webページを検証できる無償の「modern.IE」「F12開発者ツール」を徹底紹介！
知らないと損する？Webページを検証できる無償の「modern.IE」「F12開発者ツール」を徹底紹介！ 馬場 美由紀（HTML5 Experts.jp編集部） Microsoftは無償で、Webページを検証するためのツールとサービスを多数出している。それらをどのように使えば便利なのか。日本マイクロソフトがエンタープライズのパートナーに向けて開催した「Internet Explorer 11と最新Web技術動向のご紹介セミナー」から、「modern.IE」「F12開発者ツール」を抜粋して紹介する。 講演者は、日本マイクロソフトのテクニカルエバンジェリストであり、本サイトのエキスパートでもある物江修氏。当日は簡単な機能紹介とデモを交えながらのセッションが繰り広げられた。 Internet Explorerの開発者ツールとその新機能 Internet Explorer 8（以下、IE8）から、
進化するWebプラットフォーム！Chrome OSとFirefox OSが変えるWebの未来
近年、ネイティブのアプリをHTML5だけで開発できるOSが、注目を集めています。本記事では、2014年内に日本での製品発売が期待されるGoogleのChrome OSとMozillaのFirefox OSの概要を紹介します。 PCの利用時間の大半をWebに費やしている人や、Webブラウザ以外のアプリは使用しないという人は少なくありません。Chrome OSはこのように、WebのためにPCを利用するユーザーにとって、最適なブラウズ環境を提供することを目的として開発されたOSです。米NPDの調査によれば、Chrome OSを搭載したノートPCであるChromebookは、2013年内に米国で販売されたノートPCの21％を占め、着実にシェアを伸ばしています。 Chrome OSのアーキテクチャ Chrome OSは、Chromium OSというオープンソースのOSを、Chromebookに最適化
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう
こんにちは！がねこまさしです。前回は複数人の同時通話まで実現しました。社内で使うには十分なレベルです。 しかし本格的な企業ユースとなると、まだまだ障害があります。会社と家、自社と別の会社さんなど、実際に通信しようとするとNATやFirewallといった壁が立ちはだかります。 NATを越えよう NATの役割は NAT(+IPマスカレード)は企業だけでなく、一般家庭でも使われています。ブロードバンドルーターやWiFiルーターでは、1つのグローバルIPアドレスを、複数のPCやデバイスで共有することができます。このとき、NATには2つの役割があります。 インターネットにつながったグローバルなIPアドレスと、家庭内/社内のローカルなネットワークでのIPアドレスの変換 複数のPC/デバイスが同時に通信できるように、ポートマッピングによるポート変換 WebRTCでNAT越しに通信すること考えてみましょう
WebRTC初心者でも簡単にできる！Node.jsで仲介（シグナリング）を作ってみよう
WebRTC初心者でも簡単にできる！Node.jsで仲介（シグナリング）を作ってみよう がねこまさし（インフォコム株式会社） こんにちは！ がねこまさしです。前回はWebRTCの通信を手動でつなぎましたが、今回は仲介役のサーバーを作ってみましょう。 ※今回の内容は、Node学園祭2013で発表した内容(の一部)とほぼ同じです。その時の資料もご参照ください。 ※こちらの記事は2014年に書かれました。2016年7月のアップデート記事がありますので、そちらもご参照ください。 シグナリングサーバーを立てよう 前回は手動でコピー＆ペーストしてシグナリングを実現しました。今回はそれを楽にしましょう。 シグナリングサーバーはどうして必要なの？ シグナリングの過程では、お互いのIPアドレスやポート番号を渡す必要があります。この段階ではお互いIPアドレスを知らないので直接やりとりできません。そこで、仲介役
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(アプリ起動編)
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(アプリ起動編) 高橋 登史朗（牛久大仏システム担当（ただし、牛久大仏の...） 前回まででNUCのハードを組み立てて、OSやJavaScript実行環境Node.jsなど、基本的なソフトのインストールを準備しました。 今回はいよいよWebSocketサーバーを立ち上げ、アプリを動かします。 WebSocketサーバーといっても、今回はWebSocketサーバーそのものを作るわけではありません。サーバーにはNode.jsのnpmパッケージからwsというWebSocket用モジュールを利用します。 このモジュールはあの有名なSocket.IOで、WebSocketのコアの部分にも使われている高速なWebSocketサーバーを持っています。アイディア次第で、たとえば、チャットサーバーにでも、ゲームデータサーバーにでも、あるいは、
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(OSインストール編)
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(OSインストール編) 高橋 登史朗（牛久大仏システム担当（ただし、牛久大仏の...） 前回は、NUCのハードを組み立ててましたが、次は、ソフトのインストールです。慣れてる方には無用な講義ですが、一応ざっくりとした手順をメモしてみました。 もちろん、必ずしもこの手順通りである必要はありません。また、目安の時間を入れてありますが、あくまでも目安であって、休憩時間も含みません(笑)。 焦らずに、もしわからないところがあればネットなどで調べながらでも着実にやっていきましょう。 【30分】OSダウンロード OSは最近人気のLinuxディストリビューションUbuntuサーバーでバージョン13.10を入れました。下記でダウンロードしてDVDに焼いて準備します。 Ubuntu入手先 http://www.ubuntu.com/downlo
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編)
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編) 高橋 登史朗（牛久大仏システム担当（ただし、牛久大仏の...） 2012年11月からインテルが出荷をはじめたNUC (Next Unit of Computing)という製品群が自作系PCながら意外にひそかな(?)注目を集めています。※1 今回はこのNUCを使って、手のひらサイズの格安 WebSocket サーバーを立ち上げ、それで動くアプリを作ってみました。 NUCって何？ NUCは、本体にメモリやストレージなどを追加して自分で組み立てる、いわゆる自作パソコンの仲間ですが、その特徴は、10com四方の超小型でありながら、最新性能で格安ということです。 それは、こんな外観です。 手のひらサイズで総額3～7万円程度で仕上がるにも関わらず、ストレージはminiSSD、CPUはCore i5も選べて無線 LAN・
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
OSの種別を問わず、無償でできる！modern.IE「4つ+1つ」のWebページ検証方法 | HTML5Experts.jp
OSの種別を問わず、無償でできる！modern.IE「4つ+1つ」のWebページ検証方法 物江 修（日本マイクロソフト株式会社 Webエバン...） 2013年11月、Windows 8.1と同時にInternet Explorer 11がリリースされました。 新しくメジャーなWebブラウザーがリリースされると、それまでのWebサイトや、あるいはこれからリリースするWebサイトについても検証を行う必要が出てきます。しかしながら、Internet Explorerはその性質上、異なるバージョンを単一のWindows上にインストールすることはできません。 modern.IEでは、この問題に対処するためWindowsとMac、Linuxで動作する検証用の仮想マシン、イメージの提供、Webサイトの解析と各メジャー Webブラウザーでの画面ショットの取得、リモートデスクトップサービスなど、Webペー
HTTP/2.0がもたらすWebサービスの進化「HTML5 Conference 2013」
HTTP/2.0がもたらすWebサービスの進化「HTML5 Conference 2013」 馬場 美由紀（HTML5 Experts.jp編集部） GoogleやTwitterが大規模に導入しているSPDYをベースとして、HTTP/2.0の標準化作業が現在急ピッチで進められている。十数年ぶりに改訂されるこの新プロトコルによってWebサービスが今後どう変わるのか。「HTML5 Conference 2013」では、株式会社インターネットイニシアティブの大津繁樹氏、株式会社林達也 (@lef)氏、W3C中島博敬氏が、レピダムデモを交えてHTTP/2.0の概要について解説した。 14年ぶりに改訂されるHTTP/2.0標準化作業 現在、IETF（Internet Engineering Task Force）にて標準化作業が急ピッチで進められているHTTP/2.0。1999年にHTTP 1.1が
現場の実例から学ぶ、最新鋭のWebアプリケーション開発フローとアーキテクチャ「HTML5 Conference 2013」
現場の実例から学ぶ、最新鋭のWebアプリケーション開発フローとアーキテクチャ「HTML5 Conference 2013」 馬場 美由紀（HTML5 Experts.jp編集部） 「HTML Conference 2013」で行われたセッションから、株式会社サイバーエージェント大谷剛氏と船ヶ山慶氏による「現場の実例から学ぶ、最新鋭のWebアプリケーション開発フローとアーキテクチャ」の模様をお伝えします。 「なぞってピグキッチン」とは 今回作ったWebアプリケーションは、「なぞってピグキッチン」に使っている基本的な技術は、HTML、CSS、JavaScript。これにCanvasなど、他のフレームワークを組み合わせていますが、基本は前者の3つです。これをスマートフォンのブラウザ上で動かし、ネイティブのアプリと近い状態を作り上げたサービスです。 基本的な流れは、例えば（画面上の）ボタンをタップ
iOS7におけるMobile Safariの主な変更点
iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏（@firt）がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者／開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。 元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。 ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」（this is the buggiest Safari version since 1.0）だそうです… UIが大幅に変更、フルスクリーン（に近いサイズ）がデフォルトに Webブラウジングをしている
いつかきっと日の目を見る！？非モテ系マニアックAPIを紹介！「HTML5 Conference 2013」
いつかきっと日の目を見る！？非モテ系マニアックAPIを紹介！「HTML5 Conference 2013」 馬場 美由紀（HTML5 Experts.jp編集部） 「今日は面白いのに話題になっていないよね、というHTML5のマニアックなAPIを紹介しようと思う」。冒頭でこう切り出して始まった羽田野太巳氏のセッション。テーマは「ようこそ、HTML裏APIの世界へ」。 HTML5のAPIはモテ系だけじゃない。非モテ系にも注目！ 現在、HTML5の世界で世間の注目を集めているのはCanvasやWebGL、WebRTCなどのモテ系APIである。五感に訴えられる、派手で華やかなデモが作れるので仕事に結びつきやすい技術だ。「仕事に結びつきやすい」ことからモテ系と呼ばれているが、羽田野氏が紹介するのは非モテ系のAPI。 「語れる開発者仲間が少ないし、使ってもすごさがわからない。仕事になるかわからない。未
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 佐川 夫美雄（Ashiras, inc.） フロント開発の現場では、Java中心の開発から、HTML、CSS、JavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。 はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLやCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTML、CSS、JavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
