2013年5月31日金曜日

JavaScriptライブラリ作ってみました

無料です

nolib.jp

こんなライブラリを置いてあります。

・Goround
ドラッグやスワイプ操作で画像を切り替えていきます。インデックスとかも取れますので入力としても使えます。

・Roller
横に並んだ要素をドラッグやスワイプで動かします。設定次第でいわゆるカルーセルにしたりできます。

・Scope
俯瞰画像と部分拡大を同時に見せるようなライブラリです。スワイプやドラッグでカーソル位置を動かします。

・Scroller
overflow-y: scroll;をエミュレートしたようなライブラリです。スクロールバーのスタイルをcssで完全に作れます。

・Cycleimage
一定間隔で画像を切り替えるライブラリです。アニメーションGIFの代わりのようなイメージです。


人からの要望だったり、こんなのあったら良いかなぁ?と思ったものたちです。どんなもんでしょうね。

どれも基本的にnewしてオブジェクト型の引数に省略可能な設定値を渡してあげることで使うことができます。メソッドやコールバックは自分なりに考えて用意してみました。


動作に関しては

・Android 2.2
・Android 2.3
・Android 3.0
・Android 4.1
・Android 4.2 Chrome
・iOS 6.1.3
・Windows 7 64bit IE9、Chrome、Firefox、Safari、Opera
・Mac book Air Safari

で確認しました。
Android ChromeのRollerの動作が設定で微妙だったりします。アニメーションが連続すると速度劣化を起こすのかな?
Android 3はアニメーションに関して期待しちゃダメですね。2.x系よりひどい。ハードが悪いんだとは思いますが。


サイトも改善していこうと思っています。

サンプルのコピーはhtml, css, javascript分離して、テキストエリアを卒業したいです(笑)


まぁまだまだな感じはありますがとりあえず出そろったので公開です!

2013年5月29日水曜日

viewport数値指定とブロック要素の100%時の幅

技術メモ

Android 4.x系でviewportを800とか指定すると、background-colorを指定しないとblock要素のデフォルト幅がdevice-widthくらいになる現象あり