2011/12/29

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の間に入れてあげて解決。

ひとり仕事: フリーランスという働き方
(2012-10-5)
売り上げランキング: 14,705
100円
WordPressデザインレシピ集
狩野 祐東
技術評論社
売り上げランキング: 197,569
WordPress 高速化&スマート運用必携ガイド
こもりまさあき 岡本渉
エムディエヌコーポレーション
売り上げランキング: 435,263

加藤 康祐 / 企画・設計

1980年1月12日生まれ。フリーランス歴15年。プランナー、デザイナー。加藤康祐企画設計代表。学生時代にデザイン会社でWebデザインを経験。2005年よりフリーランスとしてキャリアスタート。これまでに個人から上場企業まで、100以上のクライアントとのプロジェクトを経験。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの編集・運営、社会的養護の子どもたちの自立を支援するNPOのサポート等。趣味はラグビーと料理。Keep the head up, Bind tight & Stay low.

加藤康祐企画設計

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