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 スマートフォンサイト デザイン入門
ASCII様よりご献本頂きました。書評を 持って御礼とさせていただきます。よ うやく正式版がリリースされたjQuery Mobileですが、まだまだ実践向けの 情報の書かれたブログ記事なども少な いですが、こちらはかなり実践向けです。 jQuery Mobileを使ったWebデザイン入門書です。高評価のドーナツ本シリーズですねー。著者の西畑氏(To-R)は僕がjQueryに興味を抱くきっかけを与えてくれた方なので嬉しいご献本でした。早速レビューさせて頂きます。 例によって一眼不調なのでiPhoneで・・スマフォ向けサイト構築の選択肢の一つとして筆頭とも言えるjQuery Mobile本。ASCIIさんで連載中の「西畑一馬のjQuery Mobileデザイン入門」をより詳しく解説、書籍化した感じです。 実践向けでした一応基本から書かれていますが半分以上は応用的な内容で、あまりWeb制作の知識
![[書評]jQuery Mobile スマートフォンサイト デザイン入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9661988f5ce037db2de9c50b19774b4a06a64c0/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2012%2F01%2Fjqm.jpg)
Announcing jQuery Mobile 1.0 | jQuery Mobile
That’s right, version 1.0 is out! After more than a year of refinements, we now have a rock solid release. When we first launched this site back in the summer of 2010, we had a few concept sketches and some very ambitions goals: to create an elegant HTML5-based user interface library for the jQuery community designed to work on all popular mobile platforms. We are built on the strengths of jQuery
jQuery Mobileのビジュアルデザインが自由に！ Theme Rollerついにリリース
Announcing ThemeRoller for jQuery Mobile! Learn more: http://t.co/LvFkbfwp or try it now: http://t.co/AeDhxKnbFri Oct 28 12:29:55 via Twitter for Macjquerymobile jquerymobile 正直なところ，正式版のリリースまで出る出る詐欺で進行するかと思っていたのですが，jQuery MobileのTheme Rollerがついにリリースされました． ThemeRoller | jQuery Mobile Announcing ThemeRoller for Mobile (beta) | jQuery Mobile 普通にカスタマイズしようと思うと，何かと面倒くさいオリジナルのカラーテーマの作成を，Webインターフェースで簡単に作れ
Dreamweaver CS5.5 マスターシリーズ第2回 jQuery Mobile Widgetでスマートフォン対応サイトを作ろう その1 | デベロッパーセンター
このマスターシリーズでは、Dreamweaver CS5.5の新機能の中からモバイル開発機能を中心に解説します。 DreamweaverはCS5.5になり、今までよりも楽にスマートフォン対応サイトを制作できるツールとして進化しています。CS5.5で新たに導入されたのが「jQuery Mobile Widget」という機能です。このjQuery Mobile Widgetを利用することで、jQuery Mobileの知識が無くとも、直感的にスマートフォン対応サイトを作成することができます。本記事では、サンプルサイトを作成しながら、jQuery Mobile Widgetの使い方を解説します。 サンプル：：Dreamweaver55_002_sample 必要なもの 体験版 今すぐ購入 jQuery Mobileとは 「jQuery Mobile」は、スマートフォン向けサイトを作成するため
jQuery Mobileのよく使うスニペット3種
先日行われたSwapSkillsFreeEvent(3)「Dreamweaver CS5.5で作るjQuery Mobileを組み込んだスマートフォンサイト制作」で講演した際に要望の多かったスニペットを＋αして公開します。 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script> // 初期設定 $(document).bind('mobileinit', function(){ // 日本語化 $.mobile.loadingMessage = '読み込み中'; $.mobile.pageLoad
DW CS5.5＋jQuery Mobileを使いこなすための心得10項目
Dreamweaver CS5.5とjQueryMobileを使えばスマートフォンサイトは簡単に作成できますが、やはり使いこなすためには、CS5.5だけでは不足な部分や注意点を知っていなければなりません。 ここであげた点について自信を持って大丈夫と言える人はDW CS5.5＋jQuery Mobileマスターといえるのではないでしょうか。 1. jQuery Mobileの要素を簡単に作成することはできますが、オプションは基本的な項目のみです。また、いったん出力した要素のオプションは変更できません。 →手動で属性を追加したり変更したりする必要がでてきます。 2. コードの自動補完は属性名の候補などは出ますが、そもそもどの要素にどの属性を付けられるかなどには対応していません。 →属性の内容や効果については知っておく必要があります。属性名がうろ覚えでも指定できたり、タイプミスを防ぐものになりま
jQuery Mobile リファレンス的なもの - へっぽこプログラマーの日記
jQuery Mobile のリファレンス的なものを作りました。 取り敢えず叩き台で、ツッコミなどあればコメントください！ ※RC2版に対応しました Page 要素 属性 値 概要 div data-role page ページ 設定 値 既定 備考 data-fullscreen boolean false フルスクリーン表示（ヘッダーとフッターでdata-position="fixed"を指定する必要がある） data-add-back-btn boolean false 戻るボタンの自動生成 data-back-btn-text 任意 "Back" 自動生成された戻るボタンのテキスト data-keep-native 任意 ネイティブで利用するUIをセレクターで指定する data-dom-cache boolean false ページをキャッシュする data-theme 任意 c テ
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
[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使用時によく使うマークアップで日本語サンプルを作ったので配布します
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
jQuery mobile cheat sheet | brooky's blog
上一篇文章介紹了如何用 jQuery Mobile 快速開發 mobile 網站，但 jQuery Mobile 提供的元件實在是不少，這篇文章主要是整理一個簡單的 cheat sheet, 讓使用 jQuery Mobile 開發的人可以方便地使用。（This article is greatly inspired by the great jQuery Mobile tutorial by C. Enrique Ortiz） jQuery Mobile UI Cheat Sheet jQuery Mobile Basic Syntax Component Sample HTML5 data-* attribute Empty page (mhtml) code <!DOCTYPE html> <html> <head> <title>title</title> <link rel="s
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] ヘッダーにボタンをつける | H2O Blog.
jQuery Mobileのヘッダには、左右にボタンを付加することができます。こうすることで、iPhoneの設定画面などでよくある「戻る」ボタンや「保存」ボタンなどを画面上部に配置できます。 data-role属性が「header」となっているエリアに、次のように組み込みます。 [xml] <div data-role="header"> <a href="index.html" data-icon="delete">キャンセル</a> <h1>ツールバー</h1> <a href="index.html" data-icon="check">OK</a> </div> [/xml] 「data-icon」属性の中は、次のような種類があり、それぞれのアイコンが表示されます。 alert arrow-d arrow-l arrow-r arrow-u back check del
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script type="text/javascript" src="h
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
404