[B! mobile][jquery] goto553のブックマーク

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

goto553 2012/03/09

リンク

jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説

jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。このエントリーで紹介する情報は2011年12月のものです。１．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ

goto553 2011/12/16

リンク

jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ - かちびと.net

jQuery Mobileに関して少し整理したいのでまとめました。JQMを使うときに知っておくと便利そうなTipsとか情報とか。いくつか自分の記事も含まれているのが若干アレなんですが、ご了承ください。内容はコードのみ、ではなく、参考サイトなど一貫性無い感じですが。整理するのが下手なもので一貫性に欠ける内容で申し訳ないですけど、jQuery Mibileを使ったWebサイト構築時のちょっとしたTipsや役に立つ情報などのまとめです。ページ移動にAjaxを使わないようにするプラグインの前に記述。リンク単位でならマークアップでrel=”external”を、フォームはdata-ajax=”false”を加える。 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text

goto553 2011/07/28

リンク

iPhone/Android/PC 対応。jQuery で書くタッチイベント

こんにちは！プロダクト企画担当の林です。今回は、前回予告していた通り、タッチイベントについて書かせていただきます。他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。タッチできない PC の場合、マウスで動く。この３点です。こちらを実際に動作するコードにて解説します。動作確認環境タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについてタッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。イベントの種類 touchstart : タッチし

goto553 2011/06/10

リンク

1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering

初めての投稿となります。エンジニアのmatsuです。携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。このチュートリアルを行うと以下のようになります。実装全部で8ステップあります。このチュートリアルではブログのトップページを例にとって説明します。前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初

goto553 2011/04/25

リンク

jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。

Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w