この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。

一口に「電子書籍」といっても、実はそのフォーマット（データ形式）によってさまざまな種類が存在する。そのため、気に入った電子書籍を読む前に、その本がどのフォーマットのものなのか把握して、サポートしている閲覧用ソフト（あるいはハードウェア）を手に入れなければならない。いわば、VHS対ベータ、Blu-ray対HD DVDのような規格争いが電子書籍においても繰り返されており、主流となりそうなフォーマットはどれか、ある程度気に留めておく必要があるのだ。 ユーザーとしては悩ましいところだが、閲覧用端末を数多く売りたいメーカーの思惑、不正コピーは避けたいがより多く流通させたい出版社の本音、場所や時間を気にせず紙同様に楽しみたい消費者の心情、その狭間で落とし所を見つけようという努力の結果が、フォーマットとしての電子書籍だといえる。 電子書籍フォーマットは、いくつかの基準により分類できる。その分類を把握した

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日付の情報）。 今

JavaScriptをWebデザイナーでも扱える身近な存在に変えた「jQuery」。世界中の有名サイトで使われている人気フレームワークの作者＝ジョン・レッシグ（John Resig）氏が次に注目したのが「モバイル」です。2010年10月に最初のアルファ版がリリースされた「jQuery Mobile」は、モバイルWebアプリケーションフレームワークの本命として、多くの開発者の関心を集めています。 本稿では、11月13日に開幕するWeb Directions East 2010に合わせて来日予定のジョン・レッシグ氏が、jQuery Mobileの魅力（の一部）を紹介します。（編集部） クロスブラウザーやブラウザー固有の問題を避け、高いインタラクションを手軽に組み込むには jQueryのようなJavaScriptライブラリーの利用が欠かせません。jQueryはDOMへアクセスしたり、イベントを付

FM放送局J-WAVEの人気DJ、サッシャさんとDJ TAROさん。その二人がラジオからスピンアウトし、Ustream（UST）の配信を始めて話題となっているのをご存知だろうか。番組名「今日もサッと語っTARO」からとったコンビ名は「さったろ」だ。 ガジェット好きとしても知られる二人が作る番組だけに、トークのうまさや面白みだけでなく、「3D映像でのUst配信」や、二人が別々の場所から番組に参加する「二元中継」など、数多くの実験的な試みも魅力のひとつ。リスナー参加企画の一環として公式サイトも立ち上がり、オフ会などのイベントも企画されている。 今回はそんな二人に、どうしてUstreamを始めたのか、ラジオとUstreamやTwitterとの違いはどこか、さらに配信のノウハウなどについて話を聞いた。ちなみにインタビューの様子はUstreamで配信され、Twitterからの質問にも答えつつの取材と

前回はヤフー！のGoogle検索エンジン採用のニュースを受け、ネットメディア全般の動向を俯瞰したが、今回からしばらくは映像コンテンツとメディアを「アニメ」を題材に考えていきたいと思う。 ジャパニメーションはコンテンツの優良児？ 「クールジャパン」「ジャパニメーション」という言葉を耳にするようになって久しい。海外の動画配信サイトでは、違法・合法を問わず数多くのアニメが投稿され、視聴されている。YouTubeでは日本人よりも、海外ユーザーのほうが活発にコメントでやりとりをしている光景に出くわすこともある。 アニメーションはコンテンツの優良児とされ、その海外展開は国から支援を受けるなど政策とも連動している。（賛否両論あったが）文化庁が設立を計画していた国立メディア芸術総合センター「アニメの殿堂」も記憶に新しい。現在では予算執行が停止しているものの、当時は海外旅行者の利用も見込んでいた。 言語や文

Webサイトをデザインするときは、単なる見た目の美しさだけでなく、情報の見やすさや使いやすさなどの「ユーザビリティ」や、高齢者や障がい者の方も快適に使える「アクセシビリティ」に留意する必要があります。さらに、スマートフォンサイトのデザインでは携帯電話端末ならではの特性も考慮しなければなりません。 デザインに必要な環境を整える WebサイトのデザインではいきなりHTMLを書くのではなく、まずPhotoshopやFireworksなどの画像作成ソフトを使って「デザインカンプ」を作成し、画像パーツを切り出してHTML化していくのが一般的です。こうした流れはスマートフォンサイトの場合でも変わりません。 ブラウザー枠を用意しよう PCサイトを制作するときには、デザインカンプを実際のサイトのイメージに近づけるため、Webブラウザーの枠を含む状態でデザインすることがよくあります。そこで、スマートフォンサ

■iOS（iPhone OS） iOS（3.0以前は「iPhone OS」）は、アップルがiPhoneなどの小型端末用に開発した専用OSです。初代iPhoneに1.0が搭載されたあと、新モデルの発表に合わせてバージョンを重ねています（iPhone 4にはiOS 4が搭載）。iPhone 3G以降はOSのバージョンアップができるようになり、最新版のiOS4にも対応しています。 ■iPhone標準ブラウザー「Safari」 iPhoneには標準ブラウザーとして「Safari」が搭載されています。SafariはもともとアップルがMac OS X向けに開発したWebブラウザーで、Windows版も無償で配布されています。基本的な表示能力はiPhone版もデスクトップ版もほぼ同じですが、iPhone版にはいくつの制限があるため、「Mobile Safari」などと呼んで区別することもあります。 Sa

「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン（iPhone/Android）向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。（編集部） iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。 PCとの連携、

19日、AppBankさんが、この6月から毎月シリーズで展開されるApple Store Ginzaの講演会「iPhoneアプリ勉強会」に行ってきました。楽しかったです……と書いてしまうと終了なのですが、勉強になりました。さすが勉強会。 すでにTwitter上では時間差実況をやってしまいましたが（Twitterで#appbankを検索してみてください）、このつぶやきをベースにして、改めまして講師を務められました南雲さんのお話をアップさせていただきたいと思います。 ちなみにといいますか、今さら御説明の必要はないかもしれませんが、南雲さんはユードーさんの代表取締役にして企画マンであり、サウンドクリエイターでもあります（僕は「7th deadly beats」の音楽が大好きです）。非常に多彩な方なのですが、「これが南雲さんなんだ！」という主張は非常にシンプルに、一本でした。この点はおもしろかった

ウェブサービスに慣れた人なら、グーグルの「Google カレンダー」を活用している人は多いはず。オンラインにデータを置くので、パソコンやスマートフォンなどさまざまな端末から予定の入力や閲覧が可能。ログインさえすれば、その場にある端末で予定を確認できるので非常に便利だ。 そうした使い勝手のいいGoogle カレンダーと組み合わせたい端末のひとつに、iPadがある。カレンダーのように、日付や時間帯ごとに細かく文字が書かれているものをiPhoneで表示しようとすると、割と目を近づけて見ることになる。しかし、9.7インチ／1024×768ドットという液晶ディスプレーを備えたiPadなら、少し離れた場所から見るのもOK。台（Dock）やケースが必要となるが、卓上カレンダーとして最適なのだ。 ただし、iPad標準の「カレンダー」アプリには、Googleカレンダーと連携する設定が用意されていない。という

使い慣れたDreamweaverで、iPhone用のWebサイトを作りたい。そんなWeb制作者の声に応えるエクステンション（拡張機能）「iPhone site extension for Dreamweaver CS4/5」が登場した。利用は無料で、開発元のエイチツーオー・スペースのWebサイトからダウンロードできる。 iPhone site extensionは、アドビ システムズのHTML/CSSオーサリングツール「Dreamweaver」にiPhone用Webサイトの作成支援機能を追加するエクステンション。iPhone site extensionをDreamweaver CS4/CS5にインストールすると、新規作成メニューから「iPhone用ページ」「iPhone用Webアプリ」の2種類のHTML/CSSテンプレートが選択できるようになる。各テンプレートには、アップルのデザインガイ

みなさんこんにちは。ふむふむソフトの飯島です。 全5回の予定で進めてきた本連載も、今回でいよいよ最終回となりました。第1回～第4回ではTwitter APIとGAEを使ったWeb開発の大まかな流れと、サンプルコードによるWebサービスの開発方法について解説しました。今回はより本格的なWeb開発をするとき、知っておくと便利なツールやTipsを紹介します。 Twitter APIを使って、今までこんなものを作りました！ 本連載ではTwitter APIとGAEを使ったサンプルとして、4種類のWebサービスを作りました。これまでに作ったサンプルを振り返ってみましょう。 ■第1回 サンプル 「ついまん。創刊準備号」

いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。

使い始めると手放せなくなる、本気の使いこなし系アドオン Firefoxの魅力は軽快な動作速度と豊富なアドオンにある。特にアドオンはFirefoxでしか使えない便利機能も多く、ユーザーが他のブラウザに乗り換えるのをためらう大きな理由になっている。ASCII.jpでは前回の最強アドオン50選で、初心者にも安心してお勧めできる定番アドオンを紹介した。今回は、少々取っつきにくいが、使い始めれば手放せなくなる、やや「上級者向け」の便利なアドオンを集めてきた。 作業環境を快適にしたい まずはじめに紹介するのは、便利な小技系のアドオン。解説が英語だけだったり、使うのに必要なボタンをツールバーのカスタマイズ機能を使って取り出す必要があったり……といった少々の面倒さはあるものの、分かってしまえば手離せなくなるアドオンを紹介していこう。まずはブラウザー自体の高速化や印刷補助など、ユーティリティー系のアドオンか

「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp

「CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer（IE）を除く主要なWebブラウザー（Safari/Firefox/ Opera/Google Chrome）は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。 Googleの検索ボタンに注目する 「Google？」と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。

Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？　もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう

JavaScriptやPythonなどのスクリプト言語を使ってアプリケーションを制御するのは、いまや珍しいことではありません。本連載の第3回では、Photoshop上で動くJavaScriptについて紹介しましたが、アドビのアプリケーション（旧マクロメディア製品を除く）でもっとも早くJavaScriptに対応したのが「Illustrator」です。Illustratorは2001年に発売されたバージョン10からJavaScriptによる制御に正式に対応し、それまで手作業でしていた面倒な処理を自動化できるようになりました。 今回は、IllustratorをJavaScriptで制御する方法について紹介します。最終的には作例として「百ます計算」の表を完成させます。百ます計算とは、左側と上側にある数値の合計を10×10のマス目に記入していくもので、集中力を高める手法として小学校などで使われていま

コミケのコスプレレポートの途中だが、コミケ開催最終日となった16日には、コミケ会場で臨海地区有明のお隣に位置する青海のTOKYO CULTURE CULTUREにて、ニフティ初のオリジナルオンラインRPG「Noah～LOST HERITAGE～」(以下、Noah）のサービスインを記念して、公認コスプレイヤー・オーディション本選が開催された。 今回のオーディションは本選となっている通り、事前にオンラインで開催された予選オーディションを勝ち残ってきたいずれも劣らぬ美女たち18名。 彼女たちは、Noahに登場するツンデレセーラー服キャラの“カレン”、抜群のスタイルでチャイナ服を着こなす“美麗”、おしとやかな巫女キャラ“ミキ”、大胆かつセクシーなメガネっ娘の“卑弥呼”の4キャラの公式コスプレイヤーの地位を目指して、審査員を前に自己PRとして、それぞれの持ち味を生かしたパフォーマンスや公式レイヤーと