Flash→HTML5移植は本当か？ ハンゲームの事例
「HTML5でFlashが不要になる」――。次世代Web標準規格「HTML5」でよく聞くのがこんなフレーズだ。ところが、実際にFlashで作ったコンテンツをHTML5（+JavaScript）で置き換えた、なんて話は（少なくとも日本では）ほとんど聞かない。本当にFlashコンテンツをHTML5で（しかも商用レベルで）置き換えられるのだろうか？ そう思っていたら、あの「ハンゲーム」を手掛けるNHN JapanがモバイルゲームのHTML5化を着々と進めていると聞き、同社の「HTML5勉強会」（2月25日開催）に行ってみた。勉強会では同社のエンジニアが、HTML5/CSS3によるオンラインゲームの開発事例について語った。
無料で使えるHTML5 JavaScriptゲームエンジンまとめ
HTML5とJavaScriptによるインタラクティブなWebアプリケーションの開発が注目される中、ゲーム分野では数多くのHTML5 JavaScriptゲームエンジン（ゲーム開発用のフレームワーク）が登場している。JavaScriptのライブラリーや情報をまとめているJSwikiによると、その数は70以上に上り、開発者はどのゲームエンジンを選べばいいのか判断が難しい状況だ。 本記事では、数多くあるJavaScriptゲームエンジンの中から、筆者がおすすめするライブラリーを紹介しよう。紹介するゲームエンジンはすべてMIT Licenseで提供されているので、個人はもちろん、商用でも利用できる。 Cocos2D JavaScript (http://cocos2d-javascript.org/) Crafty (http://craftyjs.com/) enchant.js (http:
レスポンシブWebデザインとは (1/5)
スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）
厳選！ロゴデザインに使えるフォント収集術
Webサイトのロゴをカッコよく作りたい。そんなときにはやはり、ロゴデザインのベースとなるフォントが重要だ。個性豊かな質の高いフォントを使えば、その分、ロゴやWebサイトのクオリティも大きくアップする。ただひとつ困るのは、星の数ほどあるフォントをどう選べばいいか、ということだろう。そこで今回は、“ロゴに使えるフォント”をテーマに、効率よくフォントを探せるツールやサイトをまとめて紹介しよう。 約1万種類のフォントをダウンロードできる「FontSpace」 とにかく1ヵ所でなるべくたくさんのフォントを見てみたいときには、フォント制作者のコミュニティサイト「FontSpace」がオススメだ。フリーフォントを中心に、約1万種類の欧文フォントが公開されている。登録数は毎日どんどん増加しており、訪れてみるたびに新しいフォントとの出会いが期待できる。
XHTML1.0とHTML5の違いをスタバのページで紹介 (1/6)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のサイトをHTML5化してみると理解しやすいでしょう。今回は、実在するWebサイトをHTML5に（勝手に）リニューアルしながら、HTML 4.01やXHTML 1.0との違いを解説します。ソースコードだけをリニューアルすることは実務ではあまりないと思い
Kindle/iPad対応！電子書籍の作り方 (1/7)
iPadの上陸、Googleの参入などで盛り上がる電子書籍市場。「Webに近い」性質を持つ電子書籍は、Web制作の世界とも決して無縁ではありません。本連載では、「JavaScriptラボ」でおなじみの古籏一浩氏が、主な電子書籍フォーマットのデータの作成方法を解説します。（編集部） 電子書籍にはPDF、EPUB、.book、AZW/MOBI、Topaz、XMDFなどさまざまなフォーマットがありますが、どのフォーマットがどんなコンテンツに適しているのか、どのような方法でデータを作成できるのか、電子書籍の課題や現実のワークフローは実際にデータの作成を体験することで見えてきます。そこで、本連載では現時点で広く使われている（もしくは仕様が公開されている）4つの電子書籍フォーマットについて、データの作り方を解説します。
Google Analyticsの「ユーザー」レポート (1/5)
Google Analyticsには、63種類以上のレポートがあります。それぞれのレポートには、テーブル、割合、掲載結果、比較、ピボットなどの表示形式があり、標準の表示形式であるテーブル形式よりも、他の表示形式の方が指標をより理解しやすい場合も多くあります。今回から3回にわたって、「ユーザー」、「トラフィック」、「コンテンツ」の各メニューについて、レポートの基本的な見方を紹介します。 地図上のデータ表示 「地図上のデータ表示」レポートでは、Webサイト全体のセッション数、平均ページビュー、平均サイト滞在時間、新規セッション率、直帰率を「都市」、「国/地域」、「亜大陸」、「大陸」別に確認できます。Webサイトが各国語で利用できる場合は、それぞれの国や都市別に指標を比較できて便利です。 この連載を読んでいる人にとってのユーザーは大半が日本人のはずです。「Japan」からのセッション数が多いのは
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
参照トラフィックのユーザーを常連化するには？ (1/4)
「サイト全体でセッション数が0.72％減りましたが平均ページビューが若干増えたので、ページビューが1.08％伸びました。もっともセッション数が減ったのはノーリファラーで、2.53％減り、検索エンジンからも1.36％減りました。何ですかコレは！ ほとんど同じじゃないですか！」――そうですね。実際にアクセスを解析すると分かりますが、Webサイトの指標はつねに変動しているわけではありません。しかし、変動していなくてもアクセスを解析する必要があるのです。特に、参照トラフィックは誰かが外部でリンクを張ることで発生しますので、同じような数値だから同じようなユーザーが、同じようなサイトから訪れた、と理解するのは大間違いです。ユーザーの嗜好は季節変動や世相の変化などによって移り変わっていきますので、指標がほぼ同じ値でも、中身は大きく変化している可能性があるのです。 以下は、「トラフィック」→「参照サイト」
カテゴリ設計は楽天と独自ドメイン店で使い分け！ (1/2)
商品の魅力を伝えるカテゴリ分けが顧客獲得のカギ 検索エンジンなどにキーワードを入力してネットショップを訪れたユーザーは、自分の求める商品がないと判断すればすぐに別なお店に移動してしまいます。少しでもお店に興味を持ってもらうには、初めて訪れた人でもざっと見ただけでどんな商品があるのか把握できるようにしなければなりません。 そこで工夫したいのが「カテゴリの分け方」。商品カテゴリはトップページ、商品ページなどサイト内の全ページにナビゲーションとして共通で表示されるため、ユーザーが求める情報を的確に、分かりやすく伝えられるように整理されている必要があります。魅力的な商品カテゴリ作りこそ、売り上げ向上に結びつく重要なポイントなのです。 初めて訪れた人がどんなお店か瞬時に分かるように 『枕ぐっすりショップ！ 本店』 『抱き枕.com』 など10サイトものネットショップを運営している「まくら株式会社」の
jQueryでロールオーバー！プリロード対応版 (1/3)
ロールオーバー効果付きメニューバーの完成画面。メニューボタンにマウスカーソルが重なると別の画像を表示する。画像がクリックできることをユーザーに視覚的に伝えられるメリットがある（画像クリックでサンプルページを表示します） ロールオーバーの基本的な仕組みを作ろう 最初に、もっとも単純な方法でロールオーバー効果を作成してみましょう。画像（img要素）の上にマウスカーソルが重なると、スクリプトで指定した別の画像に差し替えるロールオーバーです。 メニューバーのHTML／XHTML（以下、HTML）は以下のように記述しています。メニュー部分はul/li要素で作成し、li要素の内側にa要素を、その内側にimg要素を記述しています。li要素の後とその次のli要素の間を<!-- と -->でコメントアウトしているのは、CSSでli要素を横並びにしたときに発生する余分な空白（すき間）を防ぐためです。コメントを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
