これからのスマホサイトは、jQueryMobileで作成しよう！
最近は、スマートフォン対応のサイトが結構増えてきて HTML5/CSS3などで作ろうとか、流行ってきています。 みなさんは、「jQueryMobile」って聞いたことありますか？ jQueryMobileは、スマートフォンやタブレット向けのプラットフォームで 簡単にiPhoneアプリのような、インターフェイスがWebで実現できる技術です。 先日リリースをした、スマホ向け安否確認「Mobile Perfect SP」でも jQueryMobileのフレームワークを活用しています。 http://jquerymobile.com/ 簡単なHTMLを記述するだけで、タッチパネル向けの インターフェイスが作れます！ jQueryMobileのサイトには、分かりやすいドキュメントも サンプル付きであるので、HTMLがかける知識があれば すぐに始めることが出来ます。 http://jquerymobi
【Javascript】【API/マッシュアップ】Geolocation APIとぐるなびAPIを使って近くの飯屋を探すWebアプリの実装例 | Wood-Roots:blog
携帯やスマートフォンでは標準搭載と言ってもいいGPS機能ですが、最近はブラウザからJavascript位置情報を取得することができるGeolocation APIというものがあるようなので試してみました。 最近の悩みである昼食問題解決への挑戦でもあります。 Geolocation APIとは 簡単に言うとJavascriptから位置情報（経度・緯度）を取得することができる仕組みです。W3Cが仕様策定を進めている規格ですので、将来多くのブラウザやデバイスで利用できるようになることが予想されます。 詳しくはHTMLクイックリファレンスのGeolocation APIのページなどが詳しいです。 現時点では、光ファイバーやADSLなどの固定回線で位置情報を取得しようとしても市・区レベルまでしか取得できないケースがほとんどのようです（技術的な問題よりセキュリティ上の仕様かもしれません）。ですので現実
jQuery Mobileで地図（Google Maps V3 ルート情報を取得）
地図（Google Maps V3）を表示し、２点間のルートの情報を取得します。 ここでは、２地点のマーカーを表示したあと、カスタムコントロールの[ルート取得]ボタンをタップして、ルートを表示。 ルートの情報というのは、「左折する」とか「直進する」、「横断歩道を渡る」....とかの情報のことです。 ルートサンプルとコード 【index.html】 <!DOCTYPE HTML> <html> <head> <title>compass</title> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1"> <meta charset="UTF-8"> <link rel="stylesheet" href="http://code.jquery
listviewを動的に操作してみた - kurukuru-papaのブログ
Androidで、PhoneGapとjQuery Mobileを勉強しています。jQuery Mobileのリストビューを動的に生成し、リストビューの選択項目を取得する処理を作成しましたので、メモしておきます。 概要 次のように、リストビューの画面と、リストビューで選択された項目を表示する画面を用意しました。 プログラム HTMLファイル（抜粋） <div data-role="page" id="jslistview"> <div data-role="header"> <a href="#index" data-icon="arrow-l" data-direction="reverse">TOP</a> <h1>動的なlistview</h1> </div> <div data-role="content"> <ul data-role="listview" id="jslistvi
50行で作るFacebook友達リストデモ w/ JQuery Mobile - jsdo.it - Share JavaScript, HTML5 and CSS
Facebook にログインして、自分と友達の情報を表示する。 Getting Started with Facebook Login for Web - Facebook Developers https://developers.facebook.com/docs/facebook-login/getting-started-web/ channel.htmlを準備しなくても大丈夫。 jsdo.itで動作させるために、Facebook の App Dashboardで、 a. App Domains に jsrun.it を追加 b. (Mobile) Site URL に https//jsrun.it/takatama/を追加 window.fbAsyncInit = function() { FB.init({ appId : '353965548071471', // App
jQuery Mobileページでヘッダー／フッターの表示をカスタマイズするには？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。 jQuery Mobileでは、ページ要素の配下にdata-role属性がheader／footerである要素を配置することで、定型的なヘッダー／フッターを作成できます。別稿「jQuery Mobileで基本的なページを定義するには？」ではまず、テキストを配置しただけでしたが、一般的なヘッダー／フッターではアプリでよく使うボタン／リンクなどを配置するツールバーとしての役割を担います。 本稿でも、最
[jQuery Mobile]初期化イベントメモ|WEBプログラム覚書
HOME>WEBプログラム覚書>[jQuery Mobile]初期化イベントメモ [jQuery Mobile]初期化イベントメモ jQuery Mobileは読み込まれてから mobileinit -> pagebeforecreate -> pagecreate -> pageinit の順番でイベントが発生する。 mobileinit jQuery Mobileがロードされた時に真っ先に発生するイベント。jQuery Mobileを読み込む前に記述しておくか読み込む。 主にjQuery Mobileの各種設定を変更したりする場所。 jQuery.ready()よりも前なのでDOMの操作はおこなえないっぽい。
AJAXの無効化 - jQuery Mobile メモ - オレスタ
jQuery Mobileに待ちに待ったベータ版が登場しました。ここでは自分でも後から使えるjQuery Mobileの設定・構築メモをエントリしていこうと思っています。 最初はAJAXの無効化について。あちこちのサイトでjQeury MobileではじめにやることにAJAXの無効化が挙げられています。デフォルトで有効になっているjQuery MobileのAJAX機能は、リンクやフォームサブミットのアクションで対象のページを現在のページ内に読み込みます。一見便利そうでスマートフォンらしく見えますが、読み込んだページのURLは#で繋がれ実際にはページ遷移しないため、画像パスの設計やPHPなどの動的サイト作成時は煩雑になりがちです。 <script language="JavaScript"> // ajax の無効化 $.mobile.ajaxEnabled = false; </scri
jQuery Mobileのイベント処理(1/6):jQuery Mobileによるスマートフォン用Webサイト作成入門 - libro
jQuery Mobileは、HTMLのタグを独自のUIでラップすることでスマートフォンらしいGUIを構築しています。このことは、言い換えれば「画面に表示されているGUIは、HTMLのタグを使って作られていない」ということになります。 複数のタグを組み合わせることでGUIを構築するため、こうして作られたGUIをスクリプトから利用する場合、一体どうすればいいのかわからなくなってしまいます。今回は、「イベントに関する処理」について、いろいろと見ていくことにしましょう。 まずは、「イベントのバインド」からです。ここまで、例えばボタンをクリックして表示ページを変更するようなことは行って来ましたが、こうした場合、onclick属性をそのまま使ってきました。このように静的にイベントを設定するのでなく、スクリプトを使ってGUIにイベントを動的にバインドするようことも、jQuery Mobileでは簡単に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jquery-ui-map - Project Hosting on Google Code
ASCII.jp：西畑一馬のjQuery Mobileデザイン入門
百姓快三-中国有限公司