Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」
Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。 動作環境の構築 Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。 Node.js (v0.10.x以上) Ruby (1.8.7以上) これに加えて、以下のツールのインストールが必要になります。 Nore.js上で動くタスクランナーのgulp (3.5.x以上) Sassのコンパイルを行うRubyのgem (3.3.x以上) それぞれのインストール方法について、簡単に紹介し
IDE完備！日本語の情報豊富！MonacaとOnsen UIで楽々ハイブリッドアプリ開発！
IDE完備！日本語の情報豊富！MonacaとOnsen UIで楽々ハイブリッドアプリ開発！ 大塔 中（アシアル株式会社） はじめに HTML5でのモバイルアプリ開発という手法が登場して以来、HTML5でモバイルアプリを開発する様々なツールやプラットフォームが登場しています。この記事ではそうしたHTML5でのモバイルアプリ開発ツールとして、Monacaおよび、Onsen UIを紹介させていただきます。 必要なもの WindowsもしくはMac 最新版のGoogle ChromeもしくはSafari Monacaとは? MonacaはHTML5でモバイルアプリを開発するためのツールです。このMonacaを使って開発されたアプリがGoogle PlayやApp Storeに2000以上登録されています。Monacaの事例ページにはMonacaで開発されたいろいろなアプリが掲載されています。登録
初めての方必見！TypeScriptでモダンなWebアプリケーション開発を始めよう | HTML5Experts.jp
初めての方必見！TypeScriptでモダンなWebアプリケーション開発を始めよう 谷口慈行（Microsoft Student Pa...） Webページで補助的に使用する用途で開発されたJavaScriptも、今ではWebになくてはならない重要な技術の一つです。特にSingle-page ApplicationなどのモダンなWebアプリケーションではそのコード量も多くなります。JavaScriptの負担する領域が日々大きくなる中、様々なフレームワークやライブラリが日夜生まれ続けており、また、JavaScript自体を代替する言語、altJSが注目を集めています。 altJSの一つであるTypeScriptが4月2日にめでたくTypeScript 1.0となりリリースされました。今回は、このTypeScriptの特徴を絞って紹介し、実際にTypeScriptで開発できる環境を構築します。
Firebugだけじゃないぞ、Firefoxの開発ツール入門
上記の機能の中から、今回は代表的なもの4つを取り上げ、簡単にご紹介します。 ページインスペクタ 開発ツールで必要とされる機能といえば、まずDOMのインスペクタです。「インスペクタ」と書かれたタブをクリックすることで、表示できます。 DOMツリーの表示、適用されているCSSの表示、計算済みの値の一覧といった基本的なことはもちろんできます。ボックスの幅や高さ、マージンといったサイズに関する情報は「ボックスモデル」として確認できます。ボックスモデルは開発ツールの中で見ることもできます。また描画されたページにオーバレイする形でも表示されます（2014年5月の時点ではベータ版で利用可能）。 使用されているフォントや、色が実際に目で見て確認できるというのも、細かいことながら便利な機能です。色サンプルをクリックすることで、カラーピッカーが表示されます。カラーピッカーで選んだ色が、ページの描画結果へ動的に
HTML5でネイティブアプリを作ろう！「Windowsストアアプリ」開発入門
HTML5でネイティブアプリを作ろう！「Windowsストアアプリ」開発入門 物江 修（日本マイクロソフト株式会社 Webエバン...） これまでのHTMLはオンライン上のドキュメントを記述する目的に設計され、発展してきましたが、HTML5ではそれに加え、アプリケーションのプラットフォームとしての仕様も盛り込まれています。 HTML5のマークアップや API、CSS3、SVGなどの関連技術を使用すれば、Webブラウザの独自の拡張機能に頼らずとも、Web標準から外れることなく、高機能なWebアプリケーションを開発することができるようになりました。また、HTML5とその関連技術が提供するさまざまな標準化された仕様は、Webブラウザ内で動作するコンテンツにとどまらず、クロスプラットフォーム開発が必要とされるネイティブアプリの開発でも使用されるようになっています。 こういったクロスプラットフォーム
知らないと損する？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）から、
初心者でも絶対わかる、WebGLプログラミング＜基礎知識編＞
HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって？ WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング（アニメーション）など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対
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ペー
続・よくある3つのデザインから考える、マークアップの最適解
マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初
Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 –
Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 – Jxck Googleは、よく使われるJavaScriptのライブラリなどをGoogleのインフラを使って配布しています。 これを Google Hosted Library と呼びます。 この、Hosted Libraryの導入を単純に「自分で配布しない分が楽になるだけ」、くらいな感覚で使っている方も多いと思います。しかし、実はこれはみんなが使えば使うほど、得をする仕組みになっていることを見落としてはいないでしょうか？ 今回はそんな、Google Hosted Libraryについて、その仕組となるCDNやキャッシュの技術などについて解説します。 よくある Web ページ 例えば自分が配信するindex.html内でjquery.2.0.3
斉藤祐也の海外WEBテク定点観測＜Issue.6: 2013/09/14-2013/09/28＞
斉藤祐也の海外WEBテク定点観測＜Issue.6: 2013/09/14-2013/09/28＞ 斉藤 祐也（株式会社リッチメディア） Colt McAnlis氏による画像圧縮にまつわる詳細な解説、Peter-Paul Koch氏のmodern.IEレビュー、Alla Kholmatova氏によるUIアイコンの認知速度の最適化、Chris Coyier氏のいまさら聞けないTableタグの使い方など、14日間のWeb開発最新ニュース合計20件を紹介します！ 注目ニュースピックアップ Webデベロッパのための画像圧縮 – HTML5 Rocks 原題: Image Compression for Web Developers CSSやJavaScriptのファイルサイズをいかに減らす事ができるか。それにともなう自動化処理などのセットアップ。それらの努力を無駄だとは思わないが、ウェブページ内の画
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の概要と使い方、注意点を取り上げます。 画像圧縮とは？ ここで対象としているのはピクセル形式
iOS7におけるMobile Safariの主な変更点
iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏（@firt）がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者／開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。 元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。 ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」（this is the buggiest Safari version since 1.0）だそうです… UIが大幅に変更、フルスクリーン（に近いサイズ）がデフォルトに Webブラウジングをしている
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
モダンな言語でHTML5を開発しよう！ 俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)
※いずれの言語もマルチプラットフォームであり、Windows, Mac OS Xともにどちらでも利用することができます。 比較対象のサンプル サンプルとしてシンプルなスライドショーのWebコンテンツを用意しています。それぞれの言語でどのように記述して実装するのか、また生成されたJavaScriptがどのようなものであるか確認していきましょう。このサンプルでは言語の特性を紹介するために、実用的な要素として「クラス構造の利用」「既存JSライブラリの利用」「ユーザー操作」を含めています。 デモを開く 「Change Photo」ボタンをクリックすると写真が切り替わります。CSS3の3D TransformsをjQueryを用いて制御します（確認の際には、CSS3の3D Transformsが利用できるブラウザをご利用下さい） 概要 TypeScriptはマイクロソフトが開発するオープンソースの言
新たな技術仕様・要素とは？HTTP/2.0相互接続試験参加レポート（技術解説編）
新たな技術仕様・要素とは？HTTP/2.0相互接続試験参加レポート（技術解説編） 大津 繁樹（株式会社インターネットイニシアティブ） 前回のHTTP/2.0接続試験参加（標準化作業編）に続き、今回お届けするのは技術解説編。既存のSPDYでは使われていないようなHTTP/2.0で新しく議論された技術仕様、相互接続試験のポイントとなった技術要素などを中心にレポートします。 HTTP/2.0相互接続試験で重要な技術要素の概要 SPDYを技術ベースにして検討されているHTTP/2.0仕様は、現在60ページ弱の分量です。従来のHTTP/1.1と異なりバイナリー通信を基本とするため、その多くはフレームフォーマットの説明に割かれています。HTTP/2.0で新しく導入されたヘッダ圧縮の仕様(HPACK)は、現在HTTP/2.0の仕様と分離されていますが、将来的には統合することも検討されています。 HTTP
次世代プロトコルはどう作られる？HTTP/2.0相互接続試験参加レポート（標準化作業編）
次世代プロトコルはどう作られる？HTTP/2.0相互接続試験参加レポート（標準化作業編） 大津 繁樹（株式会社インターネットイニシアティブ） 先日私はドイツで行われた第1回目のHTTP/2.0接続試験に参加してきました。今回、この接続試験を通じて次世代プロトコルがどのように作られていくのか、HTTP/2.0の仕様策定作業の最前線の様子を少しご紹介したいと思います。 はじめに 先日公開された小松健作さんの記事「変わるWebプロトコルの常識（SPDY, HTTP2.0編）」で解説されている通り、Webを支えるプロトコルHTTPをバージョン1.1から2.0に大幅に改訂する作業が、現在急ピッチで進められています。10数年ぶりに改訂されるHTTPの仕様は、現状のインターネット環境に適応できるよう、これまで以上にWeb表示の高速化・効率化が実現できることを目的としています。 HTTP/2.0標準化作業
斉藤祐也の海外WEBテク定点観測＜Issue.2 2013/07/20-2013/08/02＞
斉藤祐也の海外WEBテク定点観測＜Issue.2 2013/07/20-2013/08/02＞ 斉藤 祐也（株式会社リッチメディア） 二週に一度、月曜日にお届けする海外のWeb開発に関する最新ニュースを厳選。今回は、開発リーダーであるPamela FoxによるBackbone.jsを使ったアプリケーションガイド記事をはじめ、21本のニュースを紹介。HTML5 Experts.jpのエキスパートの皆さんの協力を得て、キュレータは私、斉藤祐也がお届けします！ 注目ニュースピックアップ 実践! Backboje.jsを使ったアプリケーションガイド – pamela fox’s blog 原題: A Guide to Writing Backbone Apps at Coursera オンライン学習サービスを提供しているCourseraでBackbone.jsを使ったアプリケーションをどのように構
RAIZIN Coolで学ぶ、イマドキのWebサイトの作りかた
HTML5 Canvasを利用した冷気の演出が話題となった「RAIZIN JAPAN」のデモサイト。エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ第二弾は、RAIZIN Coolの実装を徹底解説します。 HTML5 Canvasを利用した簡易的な冷気の演出 最近の仕事で実装したものが海外の、しかも米シリコンバレーで話題になりました。 社内でもそうした簡単にできる（けど簡単そうに見えない）簡易的な実装に注目が集まり、ちょっとした話題になったので解説しつつ紹介したいと思います。 ※今回の解説用に、jsdo.itに実際に動くサンプルをアップしました。 さらに今回の解説用に特別に動作が分かりやすくなるオプションも追加しています。↓ (invalid jsdo.it code) 今回紹介するのはRAIZINというエナジードリンクの新バージョン「Cool」のLPです。 当初は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
