jQuery MobileでETサイトをスマートフォン対応させてみた

割とこれまでってガラケータイプのスマートフォン対応をしてきたのですが、ちょっと気になっていたので、ETのサイトはjQuery Mobileでスマートフォン対応させることにしました。

Experience Transporters : Branding, Direction, Planning & Design.

基本的にはドキュメントが大変充実しているので、それ見ながら組んでいけばいいだけなんですけど、きちんとマークアップすれば、そんなにWordPressをjQuery Mobileでスマートフォン対応させるのも難しくないなあという感じがしました。一点引っかかったのが、Ajaxによるページ遷移で、多分、WordPressだと絶対パスでリンク貼るからかなあと思いますが、リンク部分のAjax切ってます。

<a href="hoge.html" data-ajax="false">hoge</a>

こんな感じ。昨日移動中にドキュメントはざーっと目を通しておいたので、朝起き抜けに3時間くらい頑張ったらできました。年の瀬にまた一つ習得した。えかったえかった。

追記：
Facebookで中に入った時のリンクが壊れてるとご指摘いただきまして。そうですよね、上の方法だと記事内リンクの面倒まで見れないので、全体でAjaxオフにする設定が必要。

jquery mobile で ajax をオフにする記述が a4.1 の次から変わったみたい。 – モーリスのシステム開発日記

$(document).bind("mobileinit", function(){
  $.mobile.ajaxEnabled = false;
});

をjQueryとjQuery Mobileの間に入れてあげて解決。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください！
Twitter / Instagram

『ひとり仕事: フリーランスという働き方』 加藤 康祐

posted with amazlet at 15.09.10

(2012-10-5)
売り上げランキング: 14,705
100円

Amazon.co.jpで詳細を見る

フリーランスとして働き始めるってどういうことだったのか？フリーランスとして働くってどういうことなのか？フリーランスが目指すことってなんなのか？5年間の自分の経験から書きました。（2010年執筆）