31. 7月 2012 · [jQM] jQuery Mobile で入力できなくなった時 はコメントを受け付けていません。 · Categories: WEB制作 · Tags:

入力欄が結構多いフォームで、なぜか3項目めくらいから入力できなくなってしまっていた。何が原因かよくわからず、でも、jQMのフォームデモでは問題ない・・・

ということでレッツ部分コピー。

どうやらヘッダに問題があることが判明。そして消去法で確認していくと、独自に設定したCSSに問題があった。これも消去法で確認していったら、判明。

html { overflow-y:scroll; }

・・・これが原因だった。しかしなんぞこれ。どうやらPC用に作っていた時のよくわからん名残みたい。

jQMでは独自のCSSで動きがおかしくなるということを肝に銘じて、メモ。

26. 7月 2012 · [jQuery] jQuery-Mobile-DateBoxを日本語化して少しカスタマイズ はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

First Day: calendar

スマートフォン用画面を作るのに便利なjQuery Mobile。日付選択用のプラグインがリニューアルしたようで、現在稼働するのはこっちの方。

jQueryMobile – DateBox Demos

カレンダー形式を使用したい場合は、jQuery、jQM(1.0.1以上)、あとはコアファイルと使いたいモードのjsを読み込む。CSSも必須です。

jqm-datebox.ja.js は日本語に変換したもの。(後述)
あとは下記のように設定してあげれば動きます。

type=”date” と data-role=”datebox” と data-options=’{“mode”:”calbox”}’ は必須。(data-optionsを入れないとエラーが出て怒られました)

valueには初期値を入れてあげれば良いのですが、dateFormat で設定した型に沿うように指定する必要があります。

日本語用ファイルは個人的に設定したかったので、諸々参考にしつつ下記のようにしました。

これで万事解決~♪と思いきや、日付選択用カレンダーのヘッダは headerFormat が無視されます。それもそのはず、日付選択の場合、ヘッダに日付が入っていたら変だから。

ここまできて「7月 2012」とかいう文字が許せなかったので、headerFormatCal: “%Y年%B”, というのを追加して、jqm-datebox.mode.calbox.min.js の該当箇所をカスタマイズしました。

旧)

新)

これで 2012年7月 という表記になりました。めでたしめでたし。

(以下追記)

1.タップエリアを広げたい

ボタンをタップしないとカレンダーが開かないので、入力欄(readonly 設定してあるので入力できないけど)を全体をタップすると開くようにする。

data-options に “useFocus”:true を追加設定すればOK。イベントのトリガーはタップ(クリック)というよりフォーカスなんだね。

2.テーマを変えたい

日本語化ファイルで適用できなかったので、アレー?と思っていたら、これも data-options での設定でした。

“themeDate”:”b” などと追加設定すればOK。ただ、幾つかに項目が分かれているので、それぞれ設定してあげる必要があります。詳細はjQueryMobile – DateBox Options を参照。

02. 7月 2012 · [開発日記]2日目:Kitchen Sinkを動かす はコメントを受け付けていません。 · Categories: アプリ開発 · Tags:

Kitchen Sink

・・・さて、1日目にして挫折しかけていたTitanium Mobileですが。セミナーに出席した際に、「インストールするのが一番の壁」ってホントそうです。

Kitchen Sinkを動かすことにしてみましたが、如何せん、説明しているブログを探しても細かい手順は省かれていたり、メニューの名称が違っていたりと、自分にとっちゃ手探り状態。

しかもAppceraratorのDashboardの、Importing Sample Projectsを見ようとしてもerrorとか。?

まあ、それで数日間ほっといたわけですが。気を取り直して、片っ端から色々やってみることにした。

githubからKitchen Sinkのzipはダウンロードできたので、それを解凍してアプリケーション>Titanium Studio内に移動。

Tiのメニューで、File>Import…を選択。そしてここで悩む。何を選んだらいいのかわからない!
すでにある程度完成されてるProjectだろう…ってことで、下記を選んでみた。(Skitchすげー!)

次にBrowse…でさっき解凍したzipデータのフォルダを選択。
Use imported project name にチェックが入っていればProject nameは自動で入る。?

したら Finish!数秒で入りました。これでKitchen Sinkのインストールは完了…の、はず。

次に、インストールしたものをどうやって動かすのかがわからない。本読めば解決できることでしたらゴメンナサイ。(バージョンの違いに泣きそうなので買ってない)(異端であることは認めよう)(だからこうやって苦労している)

プロジェクトを選んで、Runのアイコンからエミュレータを選べば動きました。色々エラーっぽいの出るけど、動いているので気にしない。ちなみにAndroidは起動完了までにある程度時間かかります。

最初に出てくるnoticeは「商品としてそのまま使うのはやめてね」ってことだったかと。詳しい内容はVisit docで確認できますが…英語…

ひとまず、動くところまではいきました。よし!