スマホ向けサイト制作の実装＆使えるTips10選
スマホ向けサイト制作の実装＆使えるTips10選：jQuery Mobileでスマホ向け企業サイト構築（3）（1/4 ページ） まだjQuery Mobileを触ったことのないWeb制作者向けに、基本的な利用方法を学びながら、jQuery Mobileを使った簡単な企業サイトの構築の仕方を解説していきます。今回は、画面遷移の制御、アイコン表示、ナビゲーションバー、検索フィルタ、基本的なHTMLスタイル、固定ポジションモードなどを紹介します jQuery Mobileでスマホ向けサイト制作は、こんなに簡単にできる 前回の第2回「触りながら覚えるスマホ向け企業サイト設計の基礎知識」では、サイトの基本構造についての説明と、トップページのコーディングに合わせてヘッダ、フッタなどのツールバー、リストビューコンポーネントを紹介しました。 新年1発目となる本連載の第3回はお知らせページの作成を進めつつ、
jQuery Mobileでサクッと作るスマートフォン向けWebアプリの基本 ─ ＠IT
大日本印刷 森川 裕美 2011/9/29 jQueryMobileを使って、スマートフォン向けのWebアプリケーションを手軽に作成する方法をおばかアプリを例に紹介します おばかアプリの開発にjQuery Mobileを使ってみました 先月8月20日に開催されました「第5回おばかアプリ選手権（見よ！ コレジャナーイアプリの数々を！）」にて、jQuery MobileとHTML5の要素を使用した、iPhoneのMobile Safariで動作するミニアプリiBooNを紹介させていただきました。本記事では、jQueryMobileを使って、お手軽にスマートフォン向けのWebアプリケーションを作成する方法をiBooNを例に紹介します。 iBooNは、iPhoneの傾きに応じて車の音が変わるミニアプリです。まず、Color Select画面から好きな色の車を選びます。ミニカーの画像が表示された画面
jQuery Mobile 1.4アルファ版が公開。DOMの削減による性能向上とSVGアイコン採用など
jQuery Mobile 1.4アルファ版が公開。DOMの削減による性能向上とSVGアイコン採用など バージョン1.1ではCSSを活用することで安定動作の充実を、バージョン1.2ではポップアップやフォームなど新しいコントロールを強化、前バージョンの1.3ではレスポンシブデザイン対応をしてきました。今回の1.4では、DOM操作を削減することによる性能向上、SVGアイコンの採用などが行われています。 1.4での主な変更点 現在のjQuery Mobileでは、元になるHTMLに対してjQuery Mobileが装飾や操作のために多数のDIVタグなどを実行時に自動的に追加しています。1.4ではこのDIVタグの追加などが抑えられるとのことです。ブログから引用します。 To improve performance we reduced DOM manipulation. Generation of
10分でわかる！ jQuery Mobileのキホン (1/2)
スマートフォンサイトの制作でいま注目を浴びているのが「jQuery Mobile」です。jQuery Mobileを利用すると、CSSやJavaScriptの知識がない人でも簡単に本格的なスマートフォンサイトを作成できます。そんな“jQuery Mobileのキホン”が10分でわかるように、要点をギュッと絞って解説しましょう。 ※本記事は、jQuery Mobile 1.0をもとに執筆しています。 0分目： jQuery Mobileのダウンロードと利用方法 jQuery Mobileは、HTMLのhead要素で、（1）jQueryのスクリプトファイル、（2）jQuery Mobileのスクリプトファイル、（3）jQuery MobileのCSSファイルを読み込むだけで利用できます。 それぞれのファイルはjQueryのサーバーから呼び出せるようになっているので、わざわざ手元にダウンロードし
いまから始める、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
Dreamweaver CS5.5でスマホアプリ作ってみた (1/3)
たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
[jQuery Mobile]役立つコード集とつまづきやすいポイント | コリ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
jQuery Mobileのモックアップをブラウザ上でさくっと作れる『Codiqa』 | 100SHIKI
ちょっと使ってみたらすごい便利だった・・・。 Codiqaは、jQuery Mobileのモックアップをさくっと作れるツールである。 ユーザー登録が必要ではあるが、ブラウザからさくさく部品を配置してボタン一発でコードが入手できるのは素晴らしい。 それぞれの部品にはもちろんオプションの設定ができるので思い通りのサイトを作ることができるだろう。 30日間無料で、そのあとは有料だが、よく使う人は検討してみてもいいのでは、と思ったり（でもjQuery Mobile、遅いけどね・・・）。
jQuery Mobileでスマホサイトを作ろう！国内外で制作されているサイトやjQuery Mobileについて | jQeryMobileでサイトをつくろう
jQuery Mobileとは？ jQuery Mobileは、jQueryをベースとした、「スマートフォン向けフレームワーク」です。 もっと簡単に言うと、「スマートフォン向けコンテンツ制作の土台を作ってくれるソフトウェア」です。 スマートフォン向けの直観的かつ使いやすい、ネイティブアプリケーションさながらのページやUI※1が、瞬時にしてできあがります。開発者はわずかなHTMLやJavascriptを書くだけです。 「UI」 ※1ユーザーインターフェースの略。jQuery MobileはわずかなHTMLの記述のみで、リストやボタン、ナビゲーションバーなどのスマホ向けUIを自動構築してくれる。 2010 年10 月にアルファ版がリリースされ、2011 年11 月ついにjQuery Mobile 1.0正式版が公開されました。現在も、jQuery の開発者であるJohn Resig 氏（@je
jQuery MobileのテーマにMetroスタイルが登場。Microsoft Open Technologiesが発表
jQuery MobileのテーマにMetroスタイルが登場。Microsoft Open Technologiesが発表 HTML5のタグを記述することで容易にモバイル対応のアプリケーションが開発できるフレームワーク「jQuery Mobile」に、マイクロソフトのタッチインターフェイスである「Metroスタイル」に対応したテーマが追加されたことがブログ「More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile」で明らかにされました。 このブログを投稿したAbu Obeida Bakhach氏は、先月マイクロソフトがオープンソースや標準規格などに対応するために設立した企業Microsoft Open Technologies,Incの一員です。 Metroスタイル
jQuery Mobile 1.1、正式版が早くも登場！
昨年11月にjQuery Mobile 1.0として最初の正式版が登場してからわずか5カ月。最初の大きなバージョンアップとなるjQuery Mobile 1.1.0がリリースされました。 jQuery Mobileは、HTML5のタグを書くだけでプログラミングをせずにモバイルアプリケーションが作れるJavaScriptのフレームワーク。開発されたアプリケーションは、iOS、Android、WebOS、Windows Moblie、Symbianなどさまざまなモバイルプラットフォームで動作します。 jQuery Mobile 1.1では、画面上部もしくは下部につねに表示されるFixed Toolar（固定ツールバー）のちらつきがなくなった点、画面遷移がよりスムーズになった点などの改善が行われています。 固定ツールバーがCSSベースに モバイルデバイスのユーザーインターフェイスとして、画面上部
jQuery mobileはじめの一歩！「jQuery mobileで簡単なページを作成してみる」のまとめ | jQeryMobileでサイトをつくろう
jQuery Mobileの概要 jQuery Mobileは、jQueryをベースとした、スマートフォン向けのフレームワーク※1です。 スマートフォン向けの直観的かつ使いやすいUIを瞬時に作成できます。 ※1フレームワーク：アプリケーション制作の土台を作ってくれるソフトウェアのこと デザイナー好みの「手軽さ」と「自由さ」を兼ね備え、デベロッパーが求める「リッチなヴィジュアル」のスマートフォンUIが作成できます。 指定した形式でHTMLを書くことで、自動的にスマートフォン向けにデザインされたネイティブアプリケーションさながらのページが瞬時にしてできあがります。（jQuery Mobileが作成できるのは、ウェブアプリケーションです。） 2010年10月にアルファ版がリリースされ、2011年11月ついにjQuery Mobile1.0正式版が公開されました。現在も、jQueryの開発者で
jQueryモバイル用のコードをPHPで簡単ジェネレートできる「jqmPhp」:phpspot開発日誌
jqmPhp | HTML Code Generator for jQuery Mobile Framework | jqmPhp jQueryモバイル用のコードをPHPで簡単ジェネレートできる「jqmPhp」。 次のようなコードにより、簡単にjQueryモバイルのページを作れます。 <?php include 'lib/jqmPhp.php'; $j = new jqmPhp(); $j->addBasicPage('', 'Hello World', 'It's works!'); echo $j; ?> addBasicPageメソッドによって、jQueryモバイルでのページを簡単作成可能。 単にページの追加だけではなく、ボタンを追加したり、各種コントロールの追加がPHPで出来るところが特徴です。 以下、jqmPhpで作ったページデモ。実際に動作するデモページはこちら このスマートフ
jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】 | HTML5でサイトをつくろう
jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】 スマートフォン向けフレームワーク注目の「jQuery Mobile」の第2弾の記事です。前回はjavascriptを一行も書かずにjQuery Mobileでページを作成してみましたが、今回はスマホサイトで、google Mapsやお問い合わせフォームの設置など、より実践的に使える内容を作っていきたいと思います。 前回の記事はこちらになりますので見ていない人はこちらから見るとより今回の記事がわかりやすいくなります。 スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】 さて前回もあげましたが、jQuery Mobileのメリットと言えば！ マルチデバイスに対応できる クロスブラウ
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011年12月のものです。 １．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ
［速報］jQuery Mobile 1.0正式版が公開！ モバイルアプリケーション開発の新時代へ
モバイルアプリケーション開発のためのJavaScriptによるフレームワーク「jQuery Mobile 1.0」のFinal Releaseが、今週前半に予告された通り、ついに公開されました（日本時間18日午前3時頃）。 jQuery Mobileはオープンソースとして開発されており、「Download」ページからだれでも無料でダウンロード可能です。jQueryのWebサイトやマイクロソフトのCDN（コンテンツデリバリネットワーク）などでの配布もはじまっています。 HTML5のタグだけでモバイルアプリケーションが作れる jQuery Mobileの大きな特徴は次の3つです。 1）HTMLのタグだけで、プログラミングせずにモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Mobl
知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。 このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ正式版がでる予定です。 jQuery Mobile 1.0b1 日本語リファレンス jQuery Mobile 1.0b1 日本語リファレンス バージョン1までの内容ですがjQuery
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp：西畑一馬のjQuery Mobileデザイン入門