jQuery mobile 取扱いの注意点

 

jQuery mobileを扱う際に注意したこと

 

・javascriptの登録順序

jquery mobileのjavascript外部ファイルは、javascriptの一番最後に登録した方がいい

変数やcssをjavascriptでカスタマイズする事が多いので、

変数が初期化できていないと、ajaxの動作がおかしくなったり、cssが意図しない表示になる

・overflow処理

text-overflowは、word-wrapではなくword-breakを指定したほうが見栄えがいい

デフォルトではellipsisが指定されている場合があるが、文章が殆ど表示できないので、

あまりカッコよくない

画像のoverflowはhiddenを指定して、画面幅を超えたら表示しないようにする

画像が横に並んだ時に、画面横幅を超えると、

スマートフォンの画面がスクロールしてしまうので、これも見栄えがカッコ悪い。

部分的な横スクロールもUIが扱いづらい。

画像はセンタリングして、適切に改行させるのが見栄えがよかった。

 

・Ajaxを安定して利用するのは手間がかかる

画面遷移でajaxを使うのはリスクがある。

多少テストして大丈夫だったとしても、

下記のような状況が含まれている場合はajaxをdisableにしたほうがいい。

1.  cssに手を加えている場合

2. campasを利用して描画している場合

3. サーバー処理(perl, php, java等)でjavascriptを管理している場合

(動的にインクルード/ ハンドルしている、等)

4. pageのIDが重複する可能性がある場合

描画やスライドのタイミングがずれて綺麗に表示できない場合は、

該当するページに遷移する場合だけ、

「link=_blank」で別窓にしてしまうことで回避する方法がある。

(_blinkの場合はBackできなくなるが)

根本的な解決はBeta版のバージョンアップで様子を見ながら手を付けた方がいいと思う。

 

・clickイベント → tapイベントで実装

デザインをカスタマイズして、cssを独自に組んでしまうと、

標準で反応するエフェクトが使えなくなる場合がある。

それで、clickイベントも自前でbindしてclickのエフェクトを実装したのだけど、

iPhoneだとちゃんと反応するイベントが、

Androidだと全く反応がない場合がある。

jQuery mobileでは、tapイベントで実装するのが正解らしい

 

・list型の項目のテーブル記述

リスト型項目で、画像を含めたテーブルセルのような記述をしようとすると、

cssの記述でハマる事があった。

対策としては、

A.  画像サイズをスクウェア(正方形)にして、標準のリストでデザインする

B. cssをカスタマイズしてリスト項目のテーブルブロックを組む

C.  画像は可変にして、spanタグの要領で横に並べる

いずれかの対応が必要になる

画像をスクウェアに揃える手間を我慢できるなら、”A”の対応がオススメできる

“B”の対応はかなり難しい。cssに自身がある人でないとハマる

“C”の対応はあまりデザイン的には調整が難しいが、

ガラケーのサイトをデザインした事があれば、

意外に現実的なソリューションになる。

実際のところは、

「jQuery mobileのバージョンアップを待ってcssが改善されるのを待つ」

とか、

「簡単に使えるプラグインを待つ」

他力本願に構えてもいいと思う。

 

 

jQuery mobile beta1リリース

 

スマートフォン開発で注目されている「jQuery mobile」

 

ソーシャルゲームでは開発プロセスに取り入れられていたり、注目度が高いのですが。

jQuery mobileの開発バージョンは、今週6/20 Mon にbeta1リリースが発表されたばかりで、

ようやく仕様Fixという状況です。

 

自分もあるサイト開発でAlpha4からBeta1へ移行を実施したので、
注意点等、備忘録として下記します。

 

  • jQuery mobile 1.0.a4.1から 1.0.b1へのアップデート注意点
  1. デフォルトでスマートフォン表示に最適化されない
  2. 以下のmetaタグを加えると解決(alpha版まではjsで生成されていたらしい)

    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

  3. ajax遷移のフラグがalpha版の仕様から変更
  4. alpha 1.0.a4.1 では、以下2つの変数を無効にすればよかったのですが

    $.mobile.ajaxLinksEnabled=false;
    $.mobile.ajaxFormsEnabled=false;

    beta 1  からはajaxEnabledという変数をfalseにする必要があります。
    $.mobile.ajaxEnabled=false;

    下記のように、mobileinit関数にバインドする事で、ajax遷移(画面遷移時のスライド等)が無効化されます。

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

  5. backボタン
  6. alphaではデフォルトで「back」ボタンが有効でしたが、betaからデフォルトが無効になりました。addBackBtn変数を”true”にする事で、デフォルトでbackボタンが表示されるようになります。
    $(document).bind(“mobileinit”,function(){
    addBackBtn=true;
    });

  7. cssの変更
  8. cssの構造も若干変更されているので、cssグラデーション等でカスタマイズしているサイトも影響があるようです。

  9. clickイベント
    jQuery mobileのフレームワーク内でjsのclickイベントをバインドするようになったので、サイト側でclickイベントのバインドを利用している場合、alpha版と動作が異なる場合があるらしいです。
  10. その他、機能改善
  11. ・ブラウザのアドレスバーが自動的に隠れるようになった
    ・画面遷移のajaxアニメーションがかなり改善された

  12. XSS脆弱性のセキュリティアップデート
  13. githubで指摘されていたXSS脆弱性がFixされたそうです
    https://github.com/jquery/jquery-mobile/pull/1789
    この指摘は笑えないので、alpha版を利用しているサイトは早急にBetaへアップデートした方がいいですね・・・

    ※まとめ

    ・XSS脆弱性対策としてalphaからBetaへのアップデートは必須
    ・ajax関連はかなり改善されたが、画面遷移のajaxを使うのはリスク大
    ・今後のアップデートでajaxやレンダリングの安定が見込めるので、Betaリリースを機会に手を出してみるといいかもしれない

     

    ※出典:

    解決策など、こちらのブログが参考になりました

    「jquery mobile beta1でハマった点まとめ」

    http://yslibrary.wordpress.com/2011/06/21/jquery-mobile-beta-1-tips/

     

wordpressのエディタが重い

Pretty Awesome 3D Metal WordPress Logo
Creative Commons License photo credit: bobbigmac
Wordpressを1週間利用してみましたが、
機能的には非常に満足ながら、標準のエディタは使い勝手が最悪です

1.エディタが重い
2.ワードラップが崩れる
3.インデントが壊れる
4.htmlタグが制限される

対策として、
「TinyMCE Advanced」
というプラグインをインストールすることで

1(重い→普通)
3(インデント不可→可能)
4(タグ制限→緩和)

かなり改善されました

ただ、根本的にワードラップが英文仕様なので、
改行の融通悪さは避けられないようです

まだまだカスタマイズできるみたいなので、
引き続きWordpressの機能を試しながら運用してみます。

mixiのデータ

mixiの新オフィスにお邪魔しました
Creative Commons License photo credit: norio.nakayama

mixiの日記を抜き出して、このブログに移行しようと思ったのだけど、

日記のデータを抜き出すツール(mixi_backupとか)が、

今のmixiでは使えなくなっていた。。。

 

mixiも初期のサービスから随分と変わってしまって、

「日記」が埋もれてしまったり、データも自由に使えないし、「足あと」廃止とか、

何となく寂しい

 

wordpress メニューの整理とか

wordpressのインストール後、

デフォルトの状態では、
「リンク」だとか「メタ」だとか、
不要なメニューが表示されてしまう。

・リンク
wordpressへログインして、
「ダッシュボード」から「リンク」の項目を削除すればOK

・メタ (Meta)
これはダッシュボードでは削除できず、
Googleの検索では、phpのソースコードを編集して云々と多数表示されるのだけど。
資料やコードを読んでみると自分の状況には合致しない。

解決方法は、wordpress公式の掲示板にあった。

http://wordpress.org/support/topic/how-to-remove-meta-items-in-my-blog

「右メニューにWidgetを追加すれば消えた」らしい。
そのようにしたら、Metaのリンクが消えた。(wordpressの仕様?)

とりあえず、メニュー表示について問題が解決した。