jQuery Mobileを使った国内スマホサイトまとめ (1/3)
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201
jQuery Mobileによる問い合わせフォームの作成 (1/5)
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に続き、簡単な会社案内サイトを作成ながらjQuery Mobileの基本を学びましょう。今回は、jQuery MobileのフォームUIを使って、以下のような「お問い合わせ」ページ（#contact）を作成し、会社案内サイトを完成させます。 フォームUIの課題とjQuery Mobileによる解決 スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適しません。スマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要です。 以下は、jQuery Mobileを使わずに作成したお問い合わせページをiPhone/Androidで表示したものです。
いまから始める、jQuery Mobileの基本 (1/4)
jQuery Mobileを利用すると、簡単なHTMLを用意するだけでスマートフォンサイトを作成できます。今回はシンプルな会社案内サイトを実際に作りながら、jQuery Mobileの基本的な使い方を学習しましょう。 以下のような会社案内サイトを作成します。 トップページのメニューをタップすると各ページへスライドして移動するシンプルなスマートフォンサイトです。まずはトップページ部分から作ってみましょう。 jQuery MobileとHTML5 jQuery MobileはHTML5のカスタムデータ属性でさまざまな設定を定義するので、jQuery Mobileを利用するWebページはHTML5で記述します。HTML5と聞くとハードルが高そうですが、最低限の約束ごとさえ守れば決して難しくありません。 次のようなHTMLを雛形として用意します。 <!DOCTYPE html> <html> <h
スマホサイトを作る前に見たい国内38社の実例 (1/7)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 好評だった前編に引き続き、Web制作者が見ておきたいスマートフォンサイト（日本語／企業サイト限定）を業種別に分類して紹介する。スマートフォンサイトの制作に入る前にチェックしておこう。
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
実は重要！ よくわかる電子書籍フォーマット規格!! (1/4)
一口に「電子書籍」といっても、実はそのフォーマット（データ形式）によってさまざまな種類が存在する。そのため、気に入った電子書籍を読む前に、その本がどのフォーマットのものなのか把握して、サポートしている閲覧用ソフト（あるいはハードウェア）を手に入れなければならない。いわば、VHS対ベータ、Blu-ray対HD DVDのような規格争いが電子書籍においても繰り返されており、主流となりそうなフォーマットはどれか、ある程度気に留めておく必要があるのだ。 ユーザーとしては悩ましいところだが、閲覧用端末を数多く売りたいメーカーの思惑、不正コピーは避けたいがより多く流通させたい出版社の本音、場所や時間を気にせず紙同様に楽しみたい消費者の心情、その狭間で落とし所を見つけようという努力の結果が、フォーマットとしての電子書籍だといえる。 電子書籍フォーマットは、いくつかの基準により分類できる。その分類を把握した
JavaScriptでEPUBビューアーを自作してみた (1/7)
iPadのiBooksやSONY Reader、Nookなど、多くの電子書籍リーダーがサポートしているEPUB形式はXHTML+CSSがベースになっているので、誰でも自由にビューアーを作成できます。今回のJavaScriptラボは、Webブラウザー上でEPUBデータを表示するオリジナルのビューアーアプリを作ってみましょう。 ビューアーといっても、EPUB形式をきちんと解析して処理するには手間がかかりますので、今回はEPUBに含まれるXHTMLを表示するだけのシンプルなアプリです。それでも、著作権保護機能がかかっている場合を除けばほとんどのEPUBデータを表示できます。 今回のサンプルはHTML5 File APIを使っているので、Firefox 3.6以降でのみ動作します（一部をのぞく）。また、FirefoxのデバッガーであるFirebugを利用しますので、事前にインストールしておいてくだ
iWork '09の新機能「EPUB書き出し」を速攻テスト (1/2)
本連載「Apple Geeks」は、Apple製ハードウェア／ソフトウェア、またこれらの中核をなすOS X／iOSに関する解説をあますことなくお贈りする連載です（連載目次はこちら）。 UNIX使い向けをはじめ、Apple関連テクノロジー情報を知りつくしたいユーザーに役立つ情報を提供します。 MPEG-LAが、ネット上で無償公開されるものに限り、H.264/AVCのライセンス料を恒久的に免除すると発表しました。これまでも2015年末までは無償で提供されてきましたが、それ以降の対応は明らかにされず、YouTubeなどの動画サイトの懸念材料とされてきました。HTML5のムービーフォーマットの件もあるため即断はできませんが、1ユーザーとしては歓迎したいですね。 さて、今回は「ワープロソフト『Pages '09』でのEPUB書き出し」について。8月27日配布の「iWork アップデート 9.0.4」
Androidの開発の手順を実際に追ってみる (1/5)
今回は、SDKを使って開発の手順を見ていくことにしよう。なお、GoogleのAndroidサイトには、開発関連のドキュメントなどがあり、一部は日本語化されている。なので、ここをまず見ておくべきだろう。特に、基本的な開発手順などについてはチュートリアルが用意されている。 Androidの開発者向けページにアクセスして、SDKをダウンロードする。前回からSDKも1.5 r3にバージョンアップした。日本語変換プログラムが標準同梱されるようになったので、新バージョンを入手しておいてほしい Androidの一般的なアプリはJavaで作る Androidの一般的なアプリケーションはJavaで作成する。このため、以前解説したようにEclipseなどの統合開発環境内で、プログラムを作成する。作成したソフトウェアから、インストール用のパッケージを作成、これをエミュレーターまたは実機へ転送する。 Androi
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
速いぞSSD！ MacBook ProのHDDを交換した (1/3)
13インチMacBook Proといえば、均整なアルミのボディーに、デジタルライフを楽しむための機能をギュっと詰め込んだプロダクト。国内でも人気が高くて、「初めてのMac」として選ぶ人も多いです（Apple Storeで見る）。 本連載「目指せ快適！ MacBook Pro長期レビュー」では、本体の見所や併せて使うと便利な周辺機器、覚えておくと便利なソフトの設定方法など、MacBook Proをより楽しく使うための情報を提供していきます（第1回、第2回）。 毎回、周辺機器という名のゲストを迎え、MacBook Pro 13インチの活用を図るという長期レビューもこれで3回目。今回のテーマは、内蔵HDDをフラッシュメモリの「Solid State Drive」（SSD）に交換するというもの。作業手順やパフォーマンスの変化についてお伝えしよう。 MacBook ProをSSD化するメリットとは？
jQueryで見栄えのいいグラフが描ける「jqPlot」 (1/3)
証券会社のサイトの株式相場グラフ、ショッピングサイトの価格変動グラフなど、Webサイト上に変動するデータをもとに、動的にグラフを表示したいことがあります。従来は、Flashを使うことが多かったですが、最近はAjax/JavaScript人気もあって、「JavaScriptでグラフも作成したい」というニーズも強くなっています。 以前、本誌では、HTML5のCanvasを使った図形のサンプルとして、グラフの描画方法を紹介しましたが（関連記事）、今回はグラフ描画に特化した専用ライブラリ「jqPlot」を使って、もっと簡単に見栄えのいいグラフを作成する手順を紹介します。 グラフに特化したjQueryプラグイン「jqPlot」 「jqPlot」はクリス・レオネロ氏が開発しているJavaScriptライブラリで、jQueryのプラグインとして動作します。HTML5のCanvasを応用してグラフを描く仕
jQueryとAjaxで作るスムーズページング (1/3)
Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
CMSを超快適にするFirefoxアドオン3選 (1/2)
WordPressやMovable Type（MT）など、無料あるいは低価格なブログ／CMSが急速に広まったおかげで、Webサイトの維持・更新はずいぶん楽になった。以前はスタティックなHTMLの個人サイトを日々更新していたが、今ではすっかりそれらのブログ／CMSに移行した、という人は多いだろう。 ところが、始めのうちは便利に感じたツールでも、使い続けていると、「編集画面が狭い」「画像の登録が意外に面倒」といった、使い勝手に不満を感じることがある。 今回は、そうした不満をクライアント側の工夫で解消し、ブログ／CMSをさらに快適に利用できるようにするFirefoxのアドオンを3つ紹介しよう。どれもシンプルな機能を追加するものだが、痒いところに手が届き、一度使ったら二度と手放せなくなるものばかりだ。 ドラッグ＆ドロップでファイルをアップロード 「dragdropupload」 多くのブログ／CM
ASCII.jp：大人が聞くべき「初音ミク」最強20曲
天使でも美少女でもない、ただひたすら「音源」なのだ ニコニコ動画の音楽ジャンルを独占しつづける「初音ミク」。人気曲を収録したCDも次々リリースされ、オリコンチャートにランクインしても驚かなくなってきた。だが、オリコンチャートでもそうだが、ランキング上位のヒット曲だけを聴いていると「ポップなキャラクターソングしか存在しないのでは」という先入観を抱いてしまいがちだ。 そのとき「いい年した大人が聴くものじゃないでしょ？」とすまし顔で済ませてしまうのは簡単だが、それはそのつど流行のものを聞き流しているという残念な事実を証明しただけだ。実際にニコニコ動画の中を探してみれば、初音ミクを「美少女」や「歌姫」ではなく、1つの「音源」としてとらえ、面白い音楽を作っている作家が山ほどいる。 そこで今回はASCII.jp編集部が独断と偏見により、「いい大人」が聞くべきと思われる初音ミクサウンド20曲を選んできた
最強タッグだ!! iPod touch ＆ 公衆無線LANを使おう (4/4)
ほとんどのアクセスポイントが無料で使える公衆無線LAN。アクセスポイントの暗号化、サービスへのログインを必要としないため、iPod touchで使うのにお勧めだ。サービスは、ホテル、喫茶店、居酒屋、公共施設、交通機関など幅広いエリアで提供されており、小規模な店舗/施設も多い。 提供元
ついに上陸解禁！ 日本一有名な廃墟、軍艦島に行ってきた！【前編】 (1/3)
廃墟マニアもそうじゃない人も、軍艦島という名前を耳にしたことのある人は多いはずだ。ちなみに軍艦島と呼ばれる島は国内にいくつかあるのだが、一般的に軍艦島といわれて思い浮かべるのは、世界文化遺産の暫定リストに登録された、長崎半島の西4.5kmの沖合いに位置する端島(はしま）のことだろう。 この島は1810年に石炭が発見され、1870年（明治3年）に炭鉱として開発開始、三菱石炭鉱業が閉山する1974年（昭和49年）までの104年に渡り、炭鉱として日本経済の発展に貢献してきた。現在もその名をとどろかせているのは、炭鉱閉山後に無人島となり、数十年の時の流れに身を任せて巨大な廃墟島となったためだ。 そんな廃墟の島“軍艦島”だが、今年の4月末より一般観光客の上陸が許可されることになった。その情報をキャッチしたASCII.jpチームは、上陸解禁に先立ち長崎市の協力を得て、軍艦島に上陸してきた。 現在の軍艦
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
現場でプロが培ったGoogle Analyticsの使い方
box-shadowを極めて「Mac風UI」を作る！ (1/6)
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門