[JS]既存のサイトをタッチデバイス対応にするスクリプト -Mobilize.js
ウェブページにスマートフォンでアクセスされたら自動検出し、そのページのレイアウトを変更・タッチデバイス対応にするjQuery Mobileを使用したHTML5ベースのフレームワークを紹介します。 Mobilize.jsでスマートフォン対応にするイメージ 見出し、ナビゲーション、コンテンツはそれぞれ細かく指定することができます。 Mobilize.jsの主な特徴 Mobilize.jsは、クライアントサイトでウェブサイトをスマートフォン対応にするHTML5のフレームワークです。 インターフェイスはjQuery Mobileベースでタッチデバイスに最適化。 自動的にモバイル用ブラウザを検出。 インテグレートが容易 -サーバーサイドの変更は必要ありません。 オープンソース -高価な費用は必要ありません。 Mobilize.jsの対応デバイス Mobilize.jsは、以下のモバイル用のブラウザを
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
jQuery Mobileのマークアップの基本とCSSの変更 (1/6)
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に引き続き、簡単な会社案内サイトを作りながら、jQuery Mobileの基本的な使い方を学びましょう。 aboutページの作成とCSS3によるデザインの変更 今回はトップページ以下の詳細ページを順に作成していきます。まずは「to-Rについて」のページ（#about）から取り掛かりましょう。前回作成したindex.htmlに次のようなHTMLを追加します。「data-role="content"」の中にh2要素とp要素を加えただけの簡単なHTMLです。 ■サンプル1[HTML] <div data-role="page" id="about" data-theme="b"> <div data-role="header"> <h1>to-R</h1> </div> <div data-role="conte
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
jQuery Mobileで作成したページをPC向けに表示するためのライブラリ『 jQuery Mobile for PC 』を公開しました | 諸葛亮孔明もびっくりですわ のブログ
2011/04/11 2011/04/11 08:00 jQuery Mobileで作成したページをPC向けに表示するためのライブラリ『 jQuery Mobile for PC 』を公開しました 過去数回に渡って jQuery Mobile の手軽さ・自由度の高さを紹介してきました。 過去のjQuery Mobile関連のエントリ : jQuery Mobileのススメ - 商用利用に耐えうる3つの理由 jQuery Mobile - 標準テーマでらくらくデザイン jQuery Mobile - data-transition属性でアニメーション指定 jQuery Mobile - APIの利用でより細かなカスタマイズ しかしjQuery Mobileは、実は大きな問題を抱えています。 jQuery Mobileの問題点 jQuery Mobileはスマートフォンに最適化されたサイトを作
jQueryMobile - DateBox Demo
jQuery-Mobile-DateBox DateBox is a small, android-esk date picker, using as many of the native jQueryMobile controls as possible. This is based in part on the work of Todd M. Horst, and his Android Like Date Picker 2 DateBox Features Auto-parses text entered into form element on open [any valid date string in your browsers locale, uses javascript:Date()] Input items on DateBox are directly editabl
jQuery Mobile＋PhoneGap連携でDreamweaverはスマホアプリ開発ツールに？
jQuery Mobile＋PhoneGap連携でDreamweaverはスマホアプリ開発ツールに？：D89クリップ（21） jQuery Mobileとの連携機能搭載を宣言したDreamweaver CS5の今後の方向性や便利機能について聞いた。Dreamweaverは「IDE」になってしまうのか？ Webサイトをモバイル端末向けに提供したいというニーズが本格化してきた。いち早くjQuery Mobileとの連携機能搭載を宣言したAdobe MAXからはや4カ月（参考：Adobe Max 2010まとめレポート〜アドビのHTML5・jQueryサポート最新事情）。Dreamweaver CS5がモバイルWeb開発ツールへと成長する日は近いのか？ 米アドビシステムズでWebセグメント グループ プロダクトマネージャーを担当しているデヴィン・フェルナンデス（Devin Fernandez）氏
jQuery Mobile [基礎編]
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
まとめ記事やTipsなど、ひたすらjQueryの情報を配信しているブログ・jQuery4u
jQueryのプラグインのまとめ記事 や、Tipsなど、jQuery関連の情報 のみをひたすら配信しているブログ jQuery4uをご紹介。即効RSS購読 でした。まとめ記事も多数あるので 暇を見て全部見まわっていきたい。 まだ大量の記事数ではありませんが、今後に期待したいところ。以前書いた「jQueryプラグインを探す際にだいたい見て回る巡回サイトまとめ」にも加えています。 jQuery情報のチェック先に。 いくつか良かった記事をご紹介。 フォーム系プラグイン30個 バリデーションとかフォームデザインとかいろいろ jQuery Forms > 30 Examples and Plugins 画像拡大系プラグイン10個 画像を拡大する的なプラグインいろいろ 10 jQuery Image Zoomers jQuery Mobileを使った5つのテクニック jQuery Mobileのテクニ
jQuery Mobileを利用したスマートフォンサイト作成手順 | ユージック
jQuery Mobileを利用したスマートフォンサイト作成手順 2010年11月6日 jQuery Mobileを利用してスマートフォンサイト作成してみたので、手順を覚書として書いておきます。 ちなみにまだ正式版ではなく、アルファ版となります。※2010年11月現在 現在のバージョンなどは下記の本家サイトよりご確認ください。 jQuery Mobile jQuery Mobileを利用したページ作成概要 本家のデモ作成画面を和訳してくれている下記ページがわかりやすいです。 http://dev.screw-axis.com/doc/jquery_mobile/ 読み込みファイル <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://c
jQuery MobileでiPhone対応のサンプルHTMLを作ってみた ::ハブろぐ
気になっていたjQuery Mobileのα2が、jQuery 1.4.4と同時にリリースされたので、この機に試しに使ってみました。a-blog cmsとの組み合わせの実験も兼ねてますが、それは別エントリーで。 jQuery Mobile | jQuery Mobile jQueryおよびjQuery Mobile最新版登場 | エンタープライズ | マイコミジャーナル ASCII.jp：jQuery作者が明かす「jQuery Mobile」の魅力 デモ用のURL サンプルファイルのデモ 上記のURLにサンプルのデモを用意しました。Sencha Touchと違って、Firefoxでもそこそこ見れます。このブログにiPhone（ないしUAをそれに準じて偽装）からアクセスしても同様の表示がされます。 サンプルファイルのDL サンプルファイルのダウンロード(zip) このブログでは、CMSで動的
Jungle Java - Webアプリをラップしてネイティブなモバイルアプリにする PhoneGap
Webアプリをラップしてネイティブなモバイルアプリにする PhoneGap Posted in Ajax (RSS), HTML5 & CSS3 (RSS), モバイル (RSS) 「PhoneGap」 はモバイルアプリケーションの開発フレームワークで、HTML ＋ CSS ＋ JavaScript を用いて、iPhone や Android などの様々なモバイルプラットフォームに対応したアプリケーションを開発することができます。 関連情報 ・InfoQ: PhoneGapがモバイルプラットフォームにクロスプラットフォーム開発をもたらす ・PhoneGapフレームワークを使ったAndroidアプリをXperiaで動かしてみた！ - Web系がおもしろい。 ・【ハウツー】HTML＋CSS＋JavaScriptでiPhone/Androidアプリ開発「PhoneGap」 - PhoneGapと
jQuery Mobileではidが鬼門 - Aerialarts
最近jQuery Mobileを触ることが多く、ちょこちょこハマりどころがあったのでメモしておく。 jQuery Mobileはリンクを遷移したときにハッシュ（URLの#以降の文字列）ごとにdata-role="page"な要素をAjaxで取得して既存のDOMツリーに追加する。 このため検索結果のページを行き来した場合などに、ハッシュが異なるにも関わらず元になるHTMLのテンプレートが同一なためにid属性値が重複してDOMツリー上に出現することがある。 こうなるとid属性値ではユニークな要素を指定することができず、それを前提としたDOM操作がまともに動作しなくなる。 そういうわけで、jQuery Mobileではid属性を使うことが結構鬼門だったりする。 代替手段としては、現在アクティブになっているpageのclass属性にui-page-activeが設定されることを利用して、これとユニ
Keyframe Worldwide | キーフレーム・ワールドワイド株式会社
キーフレーム・ワールドワイド株式会社は、渋谷区にあるシステムインテグレーターの日本法人です。
jQuery Mobile メモ - リンク集 - YOD-Yのへたれ開発日誌
ちょうど、お手軽にサービスをiPhoneを筆頭としたスマートフォン対応する為になにかないかなと探していたら、ちょうどこのライブラリ「jQuery Mobile」を発見しました。 まだ先月中にα版が公開され始めたばかりで挙動にちょっと不審な点もありますが、今年中にはβを、来年1月には1.0を公開する予定らしいので早々に安定することを期待しています。 まだ実装中なのですが、思いついたところからメモっていきます。 まずは、実装時に常に開いているリンク集(?)です。 といってもほとんど公式サイトです。 http://jquerymobile.com/ まずは公式サイトのトップページ。 http://jquerymobile.com/demos/1.0a2/ 公式の「ドキュメントとデモ」、挙動と基本的なコーディングの確認はここでだいたい事足ります。 URLでわかるようにこれはアルファ2版、バージョン
jQuery Mobile メモ - List view の小技 - YOD-Yのへたれ開発日誌
jQuery Mobile のList viewは、iPhoneアプリなどでよく見られる標準的なリスト表示をお手軽に実現することができる便利なコンポーネントです。 そのList viewのデモでは紹介されていないちょっとした小技を。 まず、リンク付きのリストの基本形。 こう記述します。 <ul data-role="listview" data-inset="true"> <li><a href="#">あずま きよひこ</a></li> <li><a href="#">羽海野 チカ</a></li> <li><a href="#">伊坂 幸太郎</a></li> <li><a href="#">荒川 弘</a></li> <li><a href="#">石川 雅之</a></li> </ul> 次に、いろいろとすっとばして左右で別のリンクを設定できる Split button list。
jQuery Mobile の NestedList で JSON データを動的にリスト表示 - なんとなくな Developer のメモ
以前、jQTouch 等で作成したもの（iUI版 id:fits:20100715, jQTouch版 id:fits:20100731, SenchaTouch版 id:fits:20101005）と同様のサンプルを jQuery Mobile で作成してみました。（サーバー側の処理も同じものを使用） jQuery Mobile 1.0 a1 ただし、今回のサンプル（静的HTML版も含む）のようにリストアイテムにアンダースコア "_" を含む名称が使われる場合（例 information_schema）、Firefox では正常に動作しますが、Safari では「Error Loading Page」が表示され次の画面に遷移できなかったので注意。（Android エミュレータでも同じ現象が発生） 原因は調査してませんが、jQuery Mobile が自動生成する ID に問題ありかも。（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Mobile 1.1.0 日本語リファレンス
https://forum.jquery.com/portal/en/community/topic/using-google-maps-with-jquery-mobile
エーアイタコス ブログ