Flash→HTML5移植は本当か？ ハンゲームの事例
「HTML5でFlashが不要になる」――。次世代Web標準規格「HTML5」でよく聞くのがこんなフレーズだ。ところが、実際にFlashで作ったコンテンツをHTML5（+JavaScript）で置き換えた、なんて話は（少なくとも日本では）ほとんど聞かない。本当にFlashコンテンツをHTML5で（しかも商用レベルで）置き換えられるのだろうか？ そう思っていたら、あの「ハンゲーム」を手掛けるNHN JapanがモバイルゲームのHTML5化を着々と進めていると聞き、同社の「HTML5勉強会」（2月25日開催）に行ってみた。勉強会では同社のエンジニアが、HTML5/CSS3によるオンラインゲームの開発事例について語った。
リバースエンジニアリングしたくなるHTML5サイト (1/4)
Webメディアをはじめ“HTML5”をキーワードとした話題になることが多く、大げさではなくHTML5という文字を見ない日はない。 HTML5は2011年5月中の予定で最終草案をW3Cで策定中だ。HTML5を最終草案を待って実装をするのもいいだろう。しかし、世界ではHTML5を使ってサービスを始めているサイトもある。以下に、それらのサービスを紹介しよう。 進むCanvasの実装 欧米ではたいへん人気のあるパーソナルバンキングサービスのBank Simple。このサイトはJavaScriptでビットマップ画像を描ける「cavas要素」を利用して、紺色の背景模様を変更している。Canvasをデザインとして利用するサービスは非常に面白いし、挑戦的な試みだ。 このJavaScriptはgithubでも共有されているので、誰でも利用して自身のWebサイトに実装できる。 Bank Simpleは、ページ
CSS3を駆使してTwitter風のふきだしを作る (1/3)
「スピーチ・バブル」（ふきだし）は、Webページでコメントを表示するときに効果的なデザインテクニックだ。たとえば、Twitterのトップページのデザインでもふきだしが採用されている。 ふきだしのデザインは従来、Photoshopなどで三角形や角丸の画像を作成し、CSSで位置を調整するといった手間がかかり、作成が非常に面倒だった。だが、 CSS3なら画像を一切用意することなく、スタイルシートの記述だけで作れる。また、文書構造上不必要なdiv要素などを記述する必要もなく、シンプルに記述できるのもポイントだ。 今回のCSS3道場では、CSS3を使った「ふきだし」のデザインテクニックを紹介しよう。 基本的なふきだしをデザインする もっとも基本的なふきだしを作ってみよう。実装のポイントは、三角形で表現される「しっぽ」の部分だ。この三角形は、前回の「ドッグイヤーデザイン」と同じ手法を使う。 ■HTML
iOS 4.2の新機能で作るHTML5+JSアプリ (1/4)
iPhone/iPad用OSの新バージョン「iOS 4.2.1」が11月22日にリリースされました。すでにインストールした方も多いでしょう。目玉はiPadのマルチタスク対応などの新機能ですが、今回のバージョンアップはiPhone/iPad向けのWebアプリケーション開発者にもうれしい新機能が追加されています。ブラウザー周りで追加または強化された機能を以下にリストアップします。 加速度センサー／傾きセンサーのサポート Web Sockets (ソケット通信)のサポート HTML5 Formsのサポート XMLHttp Request Levle 2 (一部) のサポート 印刷のサポート Int32やFloat32Arrayなどの配列のサポート イベントの追加 Canvas/SVGの機能追加 その他 新機能に関するリファレンスは米アップルのサイトに用意されています（11/15日付の情報）。 今
「ヤフーとグーグル提携はネット独占」、楽天が公取委に申告書
WebPro ウェブサイトが遅く感じる時間は5秒未満が最多 BIGLOBE調べ BIGLOBEは「インターネット利用に関する意識調査」結果の第3弾を発表した。「ウェブサイトの表示が遅く、ストレスを感じる時間」の質問では、5秒未満と回答した人の割合は4割弱という。 0 0 WebPro Shopify利用ECサイトにて最短配送日表示やコンビニ受取などが可能に Shopify Japanはとヤマト運輸は3月下旬より、荷物の円滑な配送や受け取りを実現する新サービスの提供を開始する。 0 0
JavaScriptで振り分けてスマホサイト完成！ (1/5)
スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。 ページ内リンクを張る 今回制作しているスマートフォンサイトは、ページ内の各コーナーに移動できるナビゲーション（ジャンプボタン）を設置しています。まずはジャンプボタンにページ内リンクを設定しましょう。ページ内リンクは、PCサイトと同様、リンク先の要素にID属性を振り、a要素を次のように記述します。 <ul class="clearfix"> <li><a href="#access">アクセス</a></li> <li><a href="#tel">電話</a></li> <li><a href="#mail">メール</a></li> </ul> ボタン全体にリンクを貼る ページ内リンクを設定したサ
ASCII.jp：Mac mini Server
連載「Mac mini de 家鯖」では、「Mac OS X Server v10.6 Snow Leopard」（Snow Leopard Server）をバンドルしたIntel Core 2 Duo（2.66GHz）搭載モデルを対象に、ホームサーバーの役割を担う「もう1台のMac」としての活用方法を紹介していく。 2010年10月26日 20時00分 iPhone 第12回 Mac miniをWiki&ブログサーバーとして使う サービスの管理だけではSnow Leopard Serverの全貌が見えてこない。クライアントソフトを通じたサーバー機能の活用も検討してみよう。 2010年10月20日 21時00分 iPhone 第11回 「Admin Tools」でMac miniを遠隔管理 サーバーOSであるSnow Leopard Serverには、リモートから管理するためのツールが揃っ
HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
誰も教えてくれない「コンセプト」の作り方 (1/3)
商品のコンセプト、例えば商品の魅力は、モニター上で素敵な言葉をいくら羅列してもなかなか伝わりません。コンセプトは商品や作品の本質そのものなので、言葉にするのは難しいのです。だから私はコンセプトを伝えるシンプルな一言を探します。それが「コンセプトキーワード」です。コンセプトキーワードは特別なものではなく、製品の開発や企画書のタイトルなどさまざまな場面でよく使われる言葉ですが、ここでは「商品の魅力を表現する」キーワードのことを指します。コンセプトキーワードを制作の柱としてコンテンツを作ることで、魅力の本質がユーザーの心に届くようになります。コンセプトキーワードを決めなければ広告作りは先に進まないので、いわば魅力を伝える力の源泉、ご本尊と言えるものです。 前回、サイトマスターはコンセプトをまとめる前に情報収集をすることを書きました。その上で魅力、ターゲット、タイミングを考えるわけですが、今回は魅
Mac mini通常版とServer版の違いとは何か？ (1/2)
Mac miniといえば、アルミ製薄型ボディーにMacらしさをギュッと詰め込んだマシン。コンパクトなデスクトップ機を好む層だけでなく、Macの中でもっとも低価格なために入門機として選ぶ人も多いようです（Apple Storeで見る）。 本連載「Mac mini de 家鯖」では、「Mac OS X Server v10.6 Snow Leopard」（Snow Leopard Server）をバンドルしたIntel Core 2 Duo（2.66GHz）搭載モデルを対象に、ホームサーバーの役割を担う「もう1台のMac」としての活用方法を紹介していきます（連載目次はこちら）。 「Mac mini Server」はココが違う 6月に発表された新Mac miniは、アルミニウム一体形成の「ユニボディ」を採用、筐体デザインが一新された。サイズは一回り大きくなったものの、電源を内蔵したことにより、マ
辛くないトウガラシビスケット、ベルメゾンマンスリークラブで発売
千趣会は7月1日、同社が運営する「ベルメゾンマンスリークラブ」において、7月の新製品として、味の素の辛くないトウガラシ成分“カプシエイト”を配合したビスケット「カプケット」を発売した。 「カプケット」は、“カプシエイト”のほかにこんにゃく粉を配合。「小腹を満たして 燃えろ ダイエット！！」をキャッチコピーに掲げ、トウガラシ成分で新陳代謝を高め、水を吸ってふくらむこんにゃく粉で満腹感を得ることができる。 “カプシエイト”は、味の素の辛くない新種のトウガラシ「CH-19甘」から抽出された希少な成分。トウガラシの成分はそのまま維持し、辛さは約1／1000。今回発売される「カプケット」2枚（1枚当たり7グラム）にトウガラシ3のカプシエイト類が配合されている。 食感もドライフルーツやナッツなど素材感を大切にしており、かみごたえのある仕上がりとなっている。さらに、1枚あたり約30kcalと低カロリー。
Bing日本版、UIを変更、クイックタブが消滅？
マイクロソフトの検索エンジン・Bing（ビング）の検索結果画面に、数日前から一部変更が行われている。米国ではBingのアップデートが行われて、UIの改良や数々の新機能が追加されているが、その影響もあるようだ。 米国では、ユーザが簡単に検索対象の絞込みが行えるように、よく検索される分野をあらかじめカテゴリで表す「クイックタブ」が、従来の左上から画面上部の検索窓直下に変更された。この変更にあわせてBing日本版でも検索窓直下に新たな絞込みナビゲーションが表示されたが、この仕様が異なっている。 たとえば、「新垣結衣」と検索した時、従来であれば「赤い糸」「写真」など、新垣結衣という女優名と関連づけられる言葉がクイックタブとして表示されたが、検索窓直下は「ウェブ」「画像」「ニュース」「動画」と、いわゆる検索タブと同様の汎用的なものに変更されている。これは「沖縄」（地域ワード）や「ハイキング」「潮干狩
iPad対応！HTML5 Audioで作るブラウザーピアノ (1/6)
HTML5で作ったピアノ演奏ページ。iPadでも制限付きで動作する。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） 前回の記事ではHTML5 Audioを使ってサウンドプレイヤーを作りましたが、HTML5 Audioで再生できるのは音楽だけではありません。ブラウザーだけで音声ファイルを再生できるということは、発想を変えるとおもしろい使い方ができます。 今回は、HTML5 Audioを使ってブラウザー上で演奏できる鍵盤楽器を作ります。画面上に表示した鍵盤がクリックされたらあらかじめ用意しておいたピアノの音声ファイルを再生し、あたかもピアノ演奏の気分を味わえるようにします。ピアノだけでは少々物足りないので、おまけとしてオルガン、木琴、PSG音源の音色も用意しました。 また、今回のサンプルはアップルのiPad/iPhone（iOS4以
IE9がHTML5 Canvasに対応、VideoやWebフォントも
米マイクロソフトが開発中の「Internet Explorer 9」（IE9）で、HTML5のCanvas/Video/AudioおよびWebフォントがサポートされることが分かった。同社が米国現地時間23日に公開した「Platform Preview 3」（PP3）で実装された。 HTML5 Canvas/Video/Audioは一部で「Flashの代替技術」と表現されることもあるHTML5の目玉機能だ。CanvasはJavaScriptを使って図形を描く機能で、VideoとAudioはプラグインを使わずに動画や音声を再生できる。PP3の時点でIE9がサポートする動画・音声フォーマットと他のブラウザーの対応状況は以下のとおり。 Video Audio
JSONで管理するHTML5音楽プレイヤーを作ってみた (1/4)
HTML5サウンドプレイヤーのサンプル。マウスで選択した曲（音声ファイル）を再生し、ラインアートを表示する。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5 Audioを使ってブラウザー上で動くサウンドプレイヤーを作る記事の続き。前回は、再生リストから選択した音楽（音声ファイル）を再生する基本機能を作りました。このままでも十分と言えば十分ですが、今回はビジュアルエフェクトと操作ボタンを追加して、より充実した機能のプレイヤーに仕上げていきます。 ビジュアルエフェクトを追加する まずビジュアルエフェクトを追加します。今回は、サウンドプレイヤーの背景いっぱいにcanvas要素を配置し、canvas上にランダムな色の線を描画していくラインアートのプログラムを用意しました。 HTML5 Canvasの基本的な使い方については本連
iMacのメモリー／HDD換装 (1/3)
iMacに限らず、Macは全般的にメモリーとハードディスクの交換が難しい──そんなイメージを抱きがちだ。果たして実際はどうなのか? 今回は新iMac 3.06GHzモデルのメモリーとハードディスクの換装にチャレンジしてみた。メモリー、ハードディスクの増設を考えているユーザーだけでなく、これからiMacを買おうとしているユーザーにも参考にしてほしい。 iMacのメモリーを増設しよう iMacのメモリー交換は簡単だ。本体底面のカバーをプラスドライバーでネジを外して、プラスチック製のテープを強く弾けば取り出せる。スタンド裏面に、その方法が解説されている点も安心。ただし、メモリーの規格が従来の「PC2-5300」から最大6.4GB/秒の転送速度を備えた「PC2-6400」へと切り変わっている。購入する際には注意しよう。 (1) 底面のカバーを外す
HTML5 videoでニコニコ動画風プレーヤーを作ろう (1/7)
HTML5テロッパーのサンプル。テキストエリアの文字がテロップとして動画の上に表示される画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） 動画投稿サイト「ニコニコ動画」が人気です。ニコニコ動画はユーザーのコメントを再生中の動画にテロップのように表示する機能が特徴で、多くのユーザーがコメントを書き込んで楽しんでいます。 ニコニコ動画のようにブラウザー上で動画を再生しながらテロップを表示するには、従来、Flashが必要でした。Flash（Action Script）に習熟している開発者でなければ、ニコニコ動画のようなWebサービスは作れなかったのです。ところが現在、モダンブラウザーへの実装が進んでいるHTML5 videoなら、JavaScriptを使って簡単に文字や画像を動画に重ねられます。 今回はHTML5 videoとJavaS
ASCII.jp：Twitter APIとGAEでおもしろWebサービスを作ろう！ ｜Twitter＆Google App Engineで始めるWebプログラミング入門
みなさんこんにちは。ふむふむソフトの飯島です。 さっそくですが、みなさんはTwitter APIを使ってプログラミングしていますか？ すでに星の数ほどTwitterアプリやWebサービスはありますし、バリバリ使っている方も多いと思いますが、「知っているけれど、なかなか触るチャンスがなくて……」という方もたくさんいるのではないでしょうか？ そこで今回から5回にわたって、Twitter APIを使ったWebサービスのプログラミングについて解説したいと思います。ただAPIの使い方を解説するだけでは面白くないですから、Webサービスを公開するサーバーとしてグーグルのクラウドサービス「Google App Engine（以下GAE）」を使い、自分でサーバーを用意することなく全部無料で遊んでみましょう。 本連載では、サンプルコードのダウンロードはもちろん、Twitter APIの準備からGAEの準備、
カワイイ子ブタを触って楽しむiPhoneの写真集
「touch!できる写真集」と銘打つ、魚眼レンズで撮影された子ブタの写真集アプリ。子ブタ達の鼻や耳をつっついたり、こすったりすることで、子ブタ達のやわらかな触り心地を疑似体験できる「touch!」モードと、多数収録された子ブタたちの写真を、拡大／縮小を自由に操作しながら閲覧できる「view!」モードを備えている。
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
