いまもっとも注目されているモバイルフレームワーク「jQuery Mobile」。jQuery Mobileの基本的な使い方から、実践的なデザインテクニックまで。iPhone/Androidなどのスマートフォンサイト制作にjQuery Mobileを活用する方法を具体的に解説します。<cj:inc template="792" element_id="673471" />
![ASCII.jp:西畑一馬のjQuery Mobileデザイン入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/51ec458e23d8a109507a8c70d05016acd84310e6/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2011%2F05%2F20%2F1576828%2Fl%2F3544361ceecf12d2.jpg)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」(Responsive Web Design)という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか? 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」(Web Professional Books)の著者・西畑一馬さんが解説します。(編集部) 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
「HTML5でFlashが不要になる」――。次世代Web標準規格「HTML5」でよく聞くのがこんなフレーズだ。ところが、実際にFlashで作ったコンテンツをHTML5(+JavaScript)で置き換えた、なんて話は(少なくとも日本では)ほとんど聞かない。本当にFlashコンテンツをHTML5で(しかも商用レベルで)置き換えられるのだろうか? そう思っていたら、あの「ハンゲーム」を手掛けるNHN JapanがモバイルゲームのHTML5化を着々と進めていると聞き、同社の「HTML5勉強会」(2月25日開催)に行ってみた。勉強会では同社のエンジニアが、HTML5/CSS3によるオンラインゲームの開発事例について語った。
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」(スマホサイト)を開設する企業が増えている。当初はiPhone(iOS)の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
今のMacならMac OS X付属のユーティリティ「Book Camp」を使ってWindows 7が動く! ということでMacBook Airにもインストールしてみました 史上最軽量となる11インチモデルが追加されて話題を集めているMacBook Air。既存のMacユーザーだけでなく、現在、Windowsを使っている人でも「欲しい!」と物欲を刺激されている人も多いはず。 そのWindowsからの乗り換えで気になるのが、MacでWindowsを動かす「Boot Camp」の存在だろう。第1弾「11インチに絶賛の嵐 MacBook Airがやってきた!」、第2弾「フラッシュストレージが速い! MacBook Airを徹底ベンチ」に続き、MacBook Airレビューの第3弾では、Windows 7を使う方法をまとめた。 MacでWindows 7を動かすには? 実はMacでWindowsを使
「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン(iPhone/Android)向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。(編集部) iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。 PCとの連携、
みなさんこんにちは。ふむふむソフトの飯島です。 さっそくですが、みなさんはTwitter APIを使ってプログラミングしていますか? すでに星の数ほどTwitterアプリやWebサービスはありますし、バリバリ使っている方も多いと思いますが、「知っているけれど、なかなか触るチャンスがなくて……」という方もたくさんいるのではないでしょうか? そこで今回から5回にわたって、Twitter APIを使ったWebサービスのプログラミングについて解説したいと思います。ただAPIの使い方を解説するだけでは面白くないですから、Webサービスを公開するサーバーとしてグーグルのクラウドサービス「Google App Engine(以下GAE)」を使い、自分でサーバーを用意することなく全部無料で遊んでみましょう。 本連載では、サンプルコードのダウンロードはもちろん、Twitter APIの準備からGAEの準備、
動画や掲示板、オンラインストレージなど、普段から利用しているネットサービスは数多くある。これらのサービスのほとんどはブラウザーから利用でき、専用ソフトがいらないという手軽さが魅力だ。しかしその半面、動画のダウンロードができなかったり、サーバーが混むと接続できなくなったりと、不便に思うことも多々ある。 そこで今回紹介するのが、こういったネットサービスを便利にしてくれるフリーソフト。初心者でも安心して使いこなせるものから、機能を特化した便利ツールにいたるまで、動画、画像、音楽、コミュニケーション、ファイル管理の5つのテーマにわけて紹介していこう。 動画を楽しむ まずは見たい動画の検索やダウンロード、再生ができるソフトが基本。これにプラスして、携帯プレーヤーの形式へと変換してくれるツールを使えば、ダウンロードした画像を活用しやすくなる。また、自分で動画を作るときに便利なデスクトップ録画ソフトも紹
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは? そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目:導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体(JavaScriptファイル)は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL(MITSUE-LINKS JavaScript Library)」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く