HTML5で作られたスーパーマリオブラザースを紹介します。 ブラウザはChromeでお楽しみください。 Full Screen Mario 操作はキーボードで行います。 移動 左右の矢印キー or AとD ジャンプ 上の矢印キー or W or スペース ファイア Shift ポーズ P ミュート M 音が気になる人は、「M」で。 キーボード操作なので慣れが必要ですが、けっこう楽しめます。
1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん! デモページ 各デモと共にそのスタイルを紹介します。 まずはHTMLから。基本となるのは、2パターンです。 1つ目は、section要素にclassをつけるだけ。 <section class="ss-style-hogehoge"> コンテンツ </section> 2つ目は、svg要素を使用します。 <section> コンテンツ </section> <svg id="hoge"> SVGの中身 </svg> sctionだけの場合はclass、svgを使用するものはidになっています。 以下、各デモとそのスタイルです。 HTML/C
[読了時間: 2分] 米Adobe社が、Android版「Flash Player」の新規提供を2012年8月て終了してはや1年超。iOSではFlash Playerは提供されていないため、スマホやタブレットのウェブブラウザ上のFlashは事実上の非対応扱いだった。(過去のプラグインを使用するなどの方法はあるけれども) そんな中、「Shumway」という米Mozillaが支援するコミュニティ開発ベースのHTML5 Flash Playerが公開された。 「Shumway」はHTML5周辺の技術だけを使用して、SWFファイルをより忠実に再生させるというもの。 実際、「Shumway」のライブラリをページに埋め込んだサンプル (レーシング、デモ集)を走らせてみると、この程度の内容であればFLASHプラグインでの動作させた時との差は大きくは感じられなかった(PC上での比較)。が、やはり若干もたつ
Live Nation says its Ticketmaster subsidiary was hacked. A hacker claims to be selling 560 million customer records. An autonomous pod. A solid-state battery-powered sports car. An electric pickup truck. A convertible grand tourer EV with up to 600 miles of range. A “fully connected mobility device” for young urban innovators to be built by Foxconn and priced under $30,000. The next Popemobile. Ov
iOS 7へのアップグレードに合わせてさまざまなアプリがインターフェースや機能の変更を行っていますが、これからウェブサイトやアプリをフラットデザインにしよう、という時に便利なUIキットが「Flat Rounded Square UI Kit」です。ブログのデザインや各種ボタン・アイコン・グラフ・テキストボックスなどが統一感のある落ち着いたデザインで作られており、ファイルはPSD形式、JPG形式、ACO形式の3種類、ライセンス・フリーなので商用・非商用を問わず自由に使用することができます。 Flat Rounded Square UI Kit http://www.webappers.com/flat-ui-kit/ まずはウェブサイトやソフトウェアなどで使用するナビゲーション・ボタンいろいろ。紺色を基調としており、効果的に赤や水色が使用されています。 ノーマルのボタンはバリエーションのある
Webアニメーションを高速化するために知っておくべき10のこと(後編) 斉藤 祐也(株式会社リッチメディア) 前編から引き続き、後編でも最適化のために知っておきたいレンダリングプロセス、計測方法、そして最適化を妨げるよくあるアクシデントとその回避方法について紹介していきます。 アニメーションを高速化するために知っておきたいレンダリングプロセス ブラウザがどのようにウェブサイトを表示しているのかを知ることは、アニメーションだけに限らず、Webのパフォーマンス全体の高速化を行うために大切なステップです。 イスラエルの開発者であるTali Garsiel氏が公開した『How Browsers Work』は、HTML5 Rocksに転載され、複数の日本語訳も提供されている、ブラウザの内部動作を学ぶために読んでおきたいリソースの1つです。 そのリソースを参考に、レンダリングエンジンのメインフローにつ
はじめに はじめまして。プログラマ向け情報共有サイトQiitaを開発・運営しているIncrements株式会社の高橋と申します。Qiitaではフロントエンドのアプリケーション開発にBackboneを採用しています。また縁があってBackbone.jsガイドブックという本を執筆させていただきました。本連載では、Backboneを使ったより実践的な話題を紹介していきたいと思います。 初回となる今回は「すでにjQueryを使っているけど最近何かと話題のBackboneも気になる!」という開発者の方がBackboneを試しに使ってみる際の初めの一歩の踏み出し方を紹介することが目的です。そのために今回はjQueryで実装されたサンプルコードをBackboneに移植します。 なぜBackboneを使うの? すでにjQueryがあるのになんでわざわざBackboneを使うのでしょう。jQueryを使えば
2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか?基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし
Web制作においてHTMLのマークアップには絶対の正解というものがありません。ページを制作しているとき、特にセマンティクスを意識したとき「このマークアップで正しいのだろうか」と悩むことがあると思います。 そんなマークアップについて考えるイベント「MarkupCafe」がhtml5jマークアップ部の主催のもと開催されました。「MarkupCafe」では参加者同士がチームに分かれ、お題となるデザインに対して議論し、自分たちならこうマークアップするといった考えを発表し合いました。 本記事では「MarkupCafe」で出された”フッター”、”パンくずリスト”、”求人情報”の3つのお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについて考え、マークアップの最適解を探ります。 ※html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わる
近年、モバイルブラウザ上でアプリケーションを作るにあたり、JavaScriptでも不安定な回線上で動作する設計が求められるようになってきました。 ここでは、「オフラインファースト」をはじめとする、モバイルなどの回線が不安定な状況を想定したWebアプリケーション設計に関して、キャッシュ方法やよく使われるAPIなどを紹介したいと思います。 「オフラインファースト」とは2012年ごろから提唱されていた、「回線がオフラインになることを前提にアプリケーションの設計を行う思想」のことで、オフライン前提に設計することにより回線状況によらないサービス提供や、効率的な通信をベースにした高速な動作を目指すものです。 それではここからはキャッシュ方法とそれぞれ向いているコンテンツの紹介を行います。 読み込みデータのキャッシュ ApplicationCacheやlocalStorage、オンメモリキャッシュなどを
Webアニメーションを高速化するために知っておくべき10のこと(前編) 斉藤 祐也(株式会社リッチメディア) アニメーション/トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション/トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション/トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
HTML5を採用したWebサイト構築をする際に、SEOはどのようなポイントを考慮すべきなのか? HTML5でのマークアップ、リッチ表現、SEO効果のあるh要素の使い方、HTML5で追加・削除・復活された要素などについて解説します。 HTML5化によるSEO効果の影響はあるか WebサイトをHTML5でマークアップをする際、特にHTML4などからHTML5にリニューアルする場合に、それによって検索エンジンによる評価が変化するのかどうかは非常に気になる問題です。 各検索エンジンでは、この疑問について公式に説明しています。GoogleはHTML5化することでプラスにもマイナスにもならないと度々公式に言及していますし、Bingは「List of things you really ought to know as an SEO today(今SEOとして本当に知っておきたいこと)」と題した記事の中
WebページをRetina対応させるテクニック~基礎知識編:jQuery×HTML5×CSS3を真面目に勉強(4)(1/2 ページ) iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応(1920×1080ピクセル)のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう! 白石 俊平(HTML5 Experts.jp編集長) 人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ! Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。 例えば以下は、Bootstrap3のボタングループです。 レスポンシブWebデザインの全面採用 以前までのBootstrapは、レスポンシブWebデザイン
HTMLとCSSのファイルは「page.zip」として一つのファイルで、自動ダウンロードされます。 ファイルの中身は、下記のようになりました。 HTML HTMLのスケルトンです。 必要最小限のもののみの構成です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="generator" content="Responsive Web Css (www.responsivewebcss.com)" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="Stylesheet" href="index.html.css" /> </head> <bod
その広がりと深まりゆえに、現在のウェブは非常に分かりづらいものになっています。そこでこの記事では9つの「○○ウェブ」という切り口から、「今のウェブ技術では何ができるのか」についてにフォーカスして語ってみたいと思います。適宜デモへのリンクを挟みながら、ウェブのポテンシャルを紹介することに注力します。 ここ数年で急速に進化を遂げたHTML5は、ウェブのあり方を大きく変えつつあります。 とはいえ今はまだ、「ウェブが大きく変わった」と言える段階ではないように思います。筆者はちょくちょく、色々な所でHTML5の概要についての講演をさせていただいていますが、そうした経験から言うと、HTML5のポテンシャルはまだ多くの人に知られておらず、十分にその力が活用されていないように思えます。 その理由は、「HTML5の全体像が見えにくい」ことにあるのではないか、と考えています。 HTML5をはじめとしたウェブ標
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く