2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t html5j 代表／html5jビギナー部 (副部⻑⾧長) Google Developer Experts (Chrome) HTML5 Experts.jp エキスパート Web先端技術味⾒見見部 (顧問)／⽇日本jQuery Mobileユーザー会 (管理理⼈人)／Sublime Text 2 Japan Users Group (管理理⼈人)など など Blog: http://d.hatena.ne.jp/pikotea/ 3. PR: HTML教科書 HTML5レベル1 書きました 「HTML教科書 HTML5レベル 1」9/17発売！ LPIの資格試験「HTML5プロフェッ ショナル試験 レベル1」対策本です 執筆陣: 吉川 徹、秋葉葉 秀樹、窪⽥田 則⼦子、⽩白⽯石 俊平 http://
There’s a tonne of options to customize the date and time pickers, such as month/year selectors, time intervals, etc. There’s also a rich API to extend the functionality of the picker. Some examples are displayed on Codepen. When using the “classic” theme, it is important to have a wrapper div with position: relative around the source input to ensure the picker is sized according to the input elem
タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox();使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a>マークアップもclassを振るだけ。 詳細は以下で確認できます Swipebox
連載：jQuery Mobile入門（最終回） 第6回 jQuery Mobile APIでもっとJavaScriptプログラミング 山田 祥寛 2012/06/14 ■jQuery Mobile APIでカンタン・アプリ開発 後半では、$.mobileオブジェクトで提供されるメソッド／プロパティを利用して、カンタンなスマホ・アプリを作成していく。$.mobileオブジェクトはjQuery Mobileのコアともいうべきオブジェクトのこと。個別のウィジェットだけでなく、$.mobileオブジェクトを理解することで、より細かなページ遷移やエフェクト、スクロールなどの制御が、アプリから可能になるだろう。 ●ページの先頭に戻るためのボタンを設置する ― silentScrollメソッド 一般的なページでは、<a href="#">要素は、ページ先頭へのリンクを意味する。だが、jQuery Mob
1. jQuery Mobileバレしない モバイルサイトの作り方 2012/10/20 ICT ERA + ABC 2012 東北 Toru Yoshikawa ( @yoshikawa_t) 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t C.A.Mobile Web先端技術フェロー html5j.org/HTML5とか勉強会スタッフ Google API Expert ( Chrome ) 日本jQuery Mobileユーザー会 Sublime Text 2 Japan Users Group allWebクリエイター塾/jQuery Mobile担当講師 Blog: http://d.hatena.ne.jp/pikotea/ 3. 著書 「jQuery Mobile パーフェクトガイド」 「HTML5ガイドブック 増補改訂版」（共
jQuery Mobileもβ版になって触る人が増えてきました。jQuery MobileでGoogle Analyticsを使ったお話もちらほらでてきたようなので、私のやり方もひとつ紹介してみようと思います。 jQuery Mobileでは、普通にGoogle Analyticsのコードをコピペしても最初のページしかトラッキングしてくれません。ひとつのファイルにすべてのページをまとめている場合は当然としても、複数のページに分割している場合でも正しくトラッキングできません。 jQuery MobileでGoogle Analyticsがうまく動かない理由jQuery Mobileでページ遷移する場合、ajaxで遷移先のページのHTMLを読み取って取り込んでいます。そのため、遷移先のdata-role="page"で指定された要素以外の部分はまったく読み込まれません。文字だけだとよくわからな
jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。 しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにajaxを無効にする方法というのは、以下のようなものを指します。 a要素やform要素に data-ajax="false" を指定する。 グローバル設定で $.mobile.ajaxEnabled = false; を設定する。 もちろん、このajaxの挙動を理解した上で、ajaxを無効にするという方法を取ることは何ら問題ないのですが、とにかく困ったらajaxを無効にするということが多いようです。 具体的には以下のようなケースが挙げられるで
リキッドデザインとかレスポンシブウェブデザイン流行ってるけどやっぱりPC,スマートフォン,携帯(ガラケー)は別に別にコンテンツ用意したほうが良い時もありますよね。 でも「SEOとか考えると…」「URLがばらばらになっちゃって…」なんてお客様のお悩みを解決する為にいまさら感がすごいですが魔法の設定をご用意いたしました！ apacheの設定を書き換えよう httpd.confで以下を書くだけでOKです。 virtualhostとかしてるときは適切に気書き換えてね。 ##################################################################### #(C)makoto@2ch.to LoadModule rewrite_module modules/mod_rewrite.so LoadModule setenvif_module mod
jquerymobilejQueryMobile Alpha 4.1 を使っているが、listviewを使ってナビを作ると、画面上をタップでスクロール（なんか呼び方ある？）しようとすると、mouseover的なイベントが発生してカクカクになった。（色が変わる奴） 軽量化の為に本体に手を入れる（参考：http://twitter.com/#!/ymst0801/status/77184796803080193）というのは嫌だったので、このイベントをデタッチしてやることにした。 初期化コード中に $("div[data-role='page']").live("pageshow", function(e, ui) { $(".ui-btn:not(.ui-disabled)").die('vmousedown vmousecancel vmouseup vmouseover focus vmo
軽量高速のjQ.Mobiを試してみる
かるい、はやい、ものすご〜いフレームワーク「jQ.Mobi」をさっそく試してみようと思う。 前にjQuryMobileでやった簡単なオークション検索を書き換えて使いやすさとか見てみる。ajaxでapi叩いてリストを表示するだけのシンプルなやつ。なので記事タイトルだとちょっと広過ぎで、内容としては『jQ.Mobiのajax関数を使ってみた』がいいところ。 .ajax { type:'POST', //defaults to GET url:'/api/getinfo', //defaults to window.location contentType:'application/json', //defaults to application/x-www-form-urlencoded headers:{}, dataType:'application/json', //defaults t
こんにちは、2011年度新卒エンジニアの夏目です！突然ですがみなさんJavaScript書いてますか？ 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
『Windows Phone 7』スタイルのフリーのピクトアイコンセット WP7 Icons Windows Phone 7のUIに使用されているアイコンのスタイルを模したフリーのアイコンセット。 150種類のアイコンがPNGとDESIGN(MSのExpression Design用ファイル)の形式で利用できます。 なお、こちらのアイコンセットは今後も増量していくそうなので、興味のある方はチェックしておくとよいでしょう。 こちらのアイコンのほとんどはフリーのピクトアイコン・プロジェクト『The Noun Project』の画像素材を利用して作られたそうで、適当なサイズにして◯を追加してやればそれだけでそれっぽくなるのでオリジナルを作りたい人は自作してみてはいかがでしょうか。
先日日本でも発売された、Windows Phone。Web制作に携わる人間としては、今後無視できない存在になる可能性は出てきます。 そこで、サイトの確認を手軽にできるエミュレータをインストールしておくと便利でしょう。ダウンロードはこちらから。 Windows Phone SDK 7.1 RC (リリース候補) ダウンロードしてセットアップを始めると、700MB近いファイルをダウンロードし始めるので気長に待ちましょう。 再起動してさらにセットアップを進めると、ようやく完了画面が表示されます。 ここで、「製品を今すぐ実行」を選んでしまうとVisualStudioが起動してしまうので、キャンセルしてスタートボタンから「Windows Phone Emulator」を選びます。これでようやく起動。 インターネットにも接続でき、表示はしっかり確認することができそうです。しかし、Windows P
ウェブページにスマートフォンでアクセスされたら自動検出し、そのページのレイアウトを変更・タッチデバイス対応にするjQuery Mobileを使用したHTML5ベースのフレームワークを紹介します。 Mobilize.jsでスマートフォン対応にするイメージ 見出し、ナビゲーション、コンテンツはそれぞれ細かく指定することができます。 Mobilize.jsの主な特徴 Mobilize.jsは、クライアントサイトでウェブサイトをスマートフォン対応にするHTML5のフレームワークです。 インターフェイスはjQuery Mobileベースでタッチデバイスに最適化。 自動的にモバイル用ブラウザを検出。 インテグレートが容易 -サーバーサイドの変更は必要ありません。 オープンソース -高価な費用は必要ありません。 Mobilize.jsの対応デバイス Mobilize.jsは、以下のモバイル用のブラウザを
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
jQuery mobileで画面を実装したところ、headerに自動挿入されるBackボタンを押すと、前のページに戻るものの、レイアウト崩れが発生してしまうバグに悩まされました。解決方法を探すのにやたらと苦労したので、検索に引っかかるソースを増やす目的でここにも解決方法をメモしておきます。 レイアウト崩れの具体的な症状は、下記の症状です。 headerが表示されない 前のページで押したボタンが、本来は下にスクロールしなければ見えない位置にあるはずにも関わらず、ビューの下部にくっつく形で強引に表示される おまけにスクロールまでできなくなる どうもこの症状は、「戻るボタンを押すと、前のページで表示していたところまで自動的にスクロールする」という親切機能がうまく動いてないために発生する問題のようです。 なので、下記のコードをHTMLの
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
