ITエンジニア/デザイナ向けにオープンソースを毎日紹介

iscroll-jsはコンテンツを引く動作をMobile Safariであってもネイティブアプリに近い動作にする。

MOONGIFTはこう見る

様々なライブラリ、ソフトウェアによってネイティブアプリとWebアプリの境が低くなっている。これはiPhoneに限らず、PCでも同様だ。だが、HTML5を積極的に使えたり、ネットワークがすぐに使えたりとスマートフォンの方がより実用的になっている。

iscroll-jsのようなライブラリが増えていけばさらにネイティブアプリからWebアプリを押し進める流れができてくるはずだ。この動きには今後注目しなければならない。

[/s2If]

iscroll-jsはJavaScript製のオープンソース・ソフトウェア。iPhoneアプリで人気のある機能の一つで、リストを引っ張って離すとデータ更新を行うというものがある。同様のアクションをiPhone最適化サイトでも提供したいと思わないだろうか。


101022-0002.png

デフォルトの動作。Safariの裏側(?)が表示される

 

実際に試してみると分かるが、Mobile Safariのウィンドウが引っ張られてしまって同様の操作にはならないはずだ。これではWebアプリがいかに進化しようとも違和感が残ってしまう。そこで使ってみるのがiscroll-jsだ。

iscroll-jsを組み込むと、リスト部を引っ張った時にWebブラウザ自体はそのままでコンテンツだけが引っ張られるようになる。後は指を離した時のアクションとして再読み込み等のアクションを指定すれば良いだけだ。さらにネイティブアプリ風になるはずだ。


101022-0003.png

それがこのようになる!

 

リストは上、下どちらでも動作し、さらにリストの数は可変に対応している。ホームボタンに追加するとさらにネイティブアプリに近づく。非常に面白いライブラリだ。

 

デモ

 http://cubiq.org/dropbox/iscroll/index.html?v=3.7.1

[/s2If]

iscroll-js - Project Hosting on Google Code

 http://code.google.com/p/iscroll-js/

 

MOONGIFTの関連記事

  • DevRel
  • Com2