ブログトップ 記事一覧 ログイン 無料ブログ開設

へっぽこプログラマーの日記 RSSフィード Twitter

2013-01-15

jQuery Mobile 1.3.0 Betaがリリース!変更点まとめ

| 03:49 |

先日ついにjQuery Mobile 1.3.0 Betaのリリースがありました!

Announcing jQuery Mobile 1.3.0 Beta

http://jquerymobile.com/blog/2013/01/14/announcing-jquery-mobile-1-3-0-beta/


ここでは、jQuery Mobile 1.3の変更点を簡単にまとめたいと思います。

画面のサンプルやAPIなどについては、本家のBlogポストもしくはDocsを参照してください。


jQuery Mobile 1.3では、従来の予告通りResponsive Web Designにフォーカスしたアップデートになりました。Widgetの大きさにwidth: 100%などの指定をするように変更されており、画面サイズやグリッドなどにフレキシブルになるように設計されています。

これまでは、jQuery MobileかResponsive Web Designかを選択するような形に(結果的に)なっていましたが、1.3からはタブレット、デスクトップでも利用できるように配慮されています。また今後のアップデートでは、jQuery UIとの統合が図られるため、ますますその傾向は強くなります。

1.3で追加されたいくつかの機能は、Responsive Web Designの要であるMedia Queriesを利用する形となっていますが、この設定をスクリプトで記述することは難しいため、デフォルトでは多くのケースで望ましいと思われるサイズを決め打ちしています。そのため、個々のサイトに合わせてブレークポイントをカスタマイズする場合には、ui-responsive関連のCSSスタイルを自分で上書きする必要があります。


以降は、個々の機能について列挙していきます。


  • Panelウィジットの追加

Panelでは、Facebookでつかれているような出し入れ可能なサイドパネルが実装できます。

上下左右からメニューや任意のページなどをアニメーションをつけて表示することができます。


<div data-role="panel">などで作成できます。

Demo&Docs&API

http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html

http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html

http://stage.api.jquerymobile.com/panel/


  • Responsive Tableの追加

画面が小さくなるとテーブルの形を変えるResponsive Tableが追加されました。

Responsive Tableには、以下の2つのモードが用意されています。


  • Reflow mode

横方向に伸びているテーブルを縦方向に伸ばして表示します。

<table data-role="table">などで作成できます。


Docs&API

http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-reflow.html

http://stage.api.jquerymobile.com/table-reflow/


  • Column toggle mode

1度に表示するカラム数を制限し、設定ボタンで任意に表示するカラムを選択することができます。

<table data-role="table" data-mode="columntoggle">などで作成できます。


Docs&API

http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-column-toggle.html

http://stage.api.jquerymobile.com/table-columntoggle/


  • Dual handle range sliderの追加

つまみが2つあるスライダーが追加されました。

開始と終了を設定することができます。

<div data-role="rangeslider">で2つのスライダーを囲むと作成できます。


Demo&API

http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/sliders/rangeslider.html

http://stage.api.jquerymobile.com/rangeslider/


  • Responsive Gridの追加

従来のグリッドレイアウトの仕組みに、Responsiveな設定が追加されました。

画面サイズが小さくなると1カラムになるようになっています。デフォルトの

ブレークポイントは、560px (35em)以下です。次のようにui-grid-*を指定する要素に

併せてui-responsiveクラスを追加するだけです。


<div class="ui-grid-b ui-responsive">


自分でブレークポイントを設定する場合は、Docsにサンプルがあります。


Docs&API

http://jquerymobile.com/demos/1.3.0-beta.1/docs/content/content-grids-responsive.html

http://stage.api.jquerymobile.com/grid-layout/



その他の変更点

  • 新たにhashchangeイベントとpopstateイベントを統合したNavigateイベントが追加されました。

また、history APIを簡単に扱うためのメソッドとして、$.mobile.navigateが追加されています。


http://stage.api.jquerymobile.com/navigate/

http://stage.api.jquerymobile.com/jQuery.mobile.navigate/


  • リストビューのfilter機能をうまく利用したAutocomplete機能が追加されました。

単純にリストを非表示にしておき、フィルターに引っかかったものだけを表示して、あたかもAutocompleteしているかのように見せます。サンプルではAjaxを使った方法も記載されています。リストにdata-filter-reveal="true"の設定を追加します。


http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/listviews/listview-filter-reveal.html

http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/listviews/listview-filter-autocomplete.html


  • ダイアログの閉じるボタンの表示位置をカスタマイズできるようになりました。data-close-btn属性に"right"、"left"、"none"が指定できます。

  • ポップアップウィジットでポップアップの外の部分をタッチした際にポップアップを閉じないようにできるようになりました。data-dismissible="false"で設定できます。

  • テキスト系の入力フォームにデリートボタンを任意に追加することができるようになりました。data-clear-btn="true"で設定できます。

  • fileインプットをサポートしました。

  • カスタムセレクトメニューのoptgroup要素に任意のテーマが指定できるようになりました。また、ヘッダー内に配置した際に左右へ表示できるようになりました。data-divider-themeでテーマを、classにui-btn-right、ui-btn-leftでヘッダー内に配置した際の位置を指定できます。

  • ボタンのテーマをスクリプトから変更できるようになりました。(_setOptionを利用します。)

  • 折りたたみ可能ブロックにdata-corners(角丸の設定)が追加されました。

  • 固定ツールバーは、現在はposition:fixedをサポートしていないブラウザは対象外ですが、Download Builderツールにて、旧ブラウザをサポートするための設定が追加されました。fixedToolbar.workarounds.jsを選択すれば、Android 2.xやiOS 4でも固定ツールバーを利用できます。

  • チェックボックスやラジオボタンに使われるグループ化の機能がウィジット化されました。createイベントなどをトリガーとして生成できるようになります。

  • 新たなアイコンとして、menuとeditが追加されました。

  • Swipeイベントの判定ロジックなどをカスタマイズできるようになりました。($.event.special.swipe.handleSwipeなどのfunctionを上書きする)


  • jQuery 1.9、2.0をサポートしました。

  • ページ遷移のアニメーションがIE10/WP8に対応しました。

2012-12-24

IndexedDBでの検索がちょっと便利になるMultiEntry

| 00:38 |

HTML5 Advent Calendarの24日目です。

残すところあと1日となりました!

他の方々が有用な記事をたくさん書いて頂いているので、そちらも是非チェックしてみてください。

さて、私からはIndexedDBのMultiEntryという仕組みについて少しだけ解説したいと思います。

IndexedDBが題材ということで少しマニアックですが…


IndexedDBの検索方法

IndexedDBの検索方法について簡単に触れておくと、その名前の通り、あらかじめ索引を作成して検索するというものです。つまり、検索に使う可能性があるプロパティやパターンをあらかじめ洗い出しておく必要があります。また、RDBMSのように複合検索というものがないため、複雑な検索を行うためには、データ検索用のプロパティを別途用意しなければなりません。


検索がちょっと便利になるMultiEntry

前述したように、IndexedDBは複合検索が非常に面倒なのですが、MultiEntryという仕組みを利用すれば、ちょっとした複合検索ができます。

MultiEntryとは、索引を作成する際に複数のプロパティを指定する仕組みです。作成方法は簡単で、インデックスを作成する際のプロパティの指定をArrayで渡すだけです。

// インデックスを作成
store.createIndex('composite', ['flag', 'postDate'], { unique: false} );

// データ例:{id: 1, message: 'メッセージ1', flag: 0, postDate: new Date(2012,11,24) }

検索方法は、Rangeオブジェクトを作成する際にupperもしくはlowerなどに、同じようにArrayを渡して指定します。


// 検索条件:flag, postDate
var lower = [ 0, new Date(2012,11,1) ],
      upper = [ 0, new Date(2012,11,25) ] ;

// Rangeオブジェクト作成
var range = IDBKeyRange.bound(lower, upper);

// カーソル取得
var cursorReq = index.openCursor(range);

ここで注意して欲しいのは、例えばプロパティ1の検索条件で絞込み、更にプロパティ2で絞り込むというような形にはならないということです。サンプルの検索条件で言えば、flagで絞り込んだあとに、更にpostDateで絞り込んでいるように見えますが、正確には違います(それができるなら完全な複合検索ですね)。IndexedDBでは、あくまでflag+postDateでソートした結果を範囲検索しているだけです。よくわからないと思いますので、以下の図をみてください。

f:id:pikotea:20121225002607p:image

図: MultiEntryの検索範囲


つまり、flag+postDateでデータをソートし、そのデータの下限と上限をRangeのlowerとupperで指定するというものです。これが例えば、flag>postDateの順番が逆(postDate>flag)だと検索結果が違ってくることがわかるかと思います。


まとめ

今回は、IndexedDBのデータの持ち方を知っていないと、考え方がちょっと面倒なMultiEntryの仕組みを解説しました。MultiEntryは、複合検索する上で万能ではありませんが、ちょっとしたフラグ+プロパティ検索みたいなケースであれば簡単に利用することができるので、おすすめです。IndexedDBで複雑な検索をする場合は、選択肢のひとつとして覚えておくと良いかと思います。

2012-12-04

Sublime Text 2のテーマをカスタマイズできる「Color Scheme Editor for Sublime」

| 18:26 |

Sublime Text 2 Advent Calendarの1日目です。

本当は12/1に書くはずが、風邪でダウンしていて公開が遅れてしまいました。。

気を取り直して、頑張って書きたいと思います。


最初にAdvent Calendarとは何か?という方は、技術評論社さんのこちらの記事が参考になります。

本日12月1日より,プログラマ有志による2012年の技術系Advent Calendarが各所ではじまる


Sublime Text 2 Advent Calendarについては、こちらで他の方のブログポストやエントリーができます。まだ空きがあるようですので、興味のある方は是非!

Sublime Text 2 Advent Calendar


さて今回は、意外とあまり取り上げられないSublime Text 2のテーマについて触れてみたいと思います。デフォルトでも多くのテーマがあり、Soda Themeのように有名なサードパーティ製のテーマもあります。他にもTextMate互換ということで、TextMateのテーマを利用することもできますので、テーマの種類はそれこそ星の数ほどあります。

こういった既存のテーマを利用するのは良いのですが、細部でちょこちょこ変えたいところが出てくると思います。そういった際に、Sublime Text 2のテーマを簡単にカスタマイズできる「Color Scheme Editor for Sublime」がおすすめです。


Color Scheme Editor for Sublime

f:id:pikotea:20121204180737p:image

http://tmtheme-editor.herokuapp.com/


Color Scheme Editor for Sublime*1は、個々のカラーを設定できるのはもちろん、既存のテーマを読み込んで編集することもできます。ダウンロードしたテーマは、PackagesフォルダのUserの下に配置して読み込みましょう。これで、見た目のカスタマイズも楽々ですね!


簡単ですが以上です!良いST2ライフを。 :)

*1:ちなみに、このColor Scheme Editor for SublimeはAngular.jsとHTML5のFile System APIが利用されているそうです。なので、File System APIが利用できるChromeオンリーでの動作になっていますのでご注意ください。