― Web Technology and Life ―

JSのUI系ライブラリのオレオレメモ

2014-05-03
JavaScriptってあまり使わないので、最近触ったライブラリをメモっておく。

Twitter Bootstrapがフルスタック気味

言わずもがなんだけど、JSのUI連携的にはかなり偉大。

まぁスマホでやりたいUIっぽいことはだいたいできて、Bootstrapのデザインを問題にしなければなんでもこれでよいと思う。X-editableっていうライブラリと連携すると、さらに、DatePickerとか簡単な編集UIを実装で来て、いうことなし。最近は、スプレッドシート的なJSライブラリもあるから、もうなんか管理画面なのってホントゆるふわで作れてありがたいっす。

BootstrapはWebサービスには使えない?

class名とか衝突しなければ、Bootstrapをベースに導入できると思うけど、既存のサービスに突っ込むのはかなり難しいと思う。alertとかbtnとか一般的なワードが連発なので、class名の衝突が避けられない。

というわけで、Webアプリケーションベースの新しいサイトをゆるふわで作ろうと思と、結局JQueryのプラグインを探すことになる。今回、ECサイトのスマホビューがちょっと気に入らなくていろいろ直した。特に、以下のパーツというかUIを実装したくて、いろいろ探したのでそのメモ。

  • 隠しメニュー系(ドロワーメニュー、ドロップダウンメニュー、など)
  • スクロールスパイ
  • 検索サジェスト

隠しメニュー系

スマホサイトだと、画面小さいからナビゲーション系は一つの場所に隠しておきたいですね。そういうわけで、隠しリンクとか検索エンジンとかいうやつのせいで地下に潜っていたこういうUIが日の目をみにきた野だと思うのですが、いろいろありすぎてよくわかりません。

で、検討したライブラリは以下の通り。

JQuery MOBILE

某ECパッケージのデフォルトでくつっていている。全般的にかっこいいことがさくっとできるんだけど、隠しメニューみたいなやつ(公式サイトみてもドキュメントが見当たらないのでリンクできませんが)は、動きが個人的に微妙なので却下。

あと、バージョンが古いのかページのロードがおわると、スクロールしていても、ページの一番上に戻ってしまうのがきもいし、うざいし、最悪だった。

Sidr

メニューボダンを右側したいっていうのがよくわからないライブラリ多いですね。そんな中で、これは右寄せが簡単で、ペコペコとコピペすればいいので楽ちん。

ただ、アンドロイド2.4系?だったかな?ドコモギャラクシーS2のデフォルトブラウザではうまくうごきませんでした。。。

あと、下のDrawer Slide Menuとちがって、開いた先からメイン画面タップしても、表示戻らなくて、表示戻すのにはメニューボタンを再タップしないといけないんですね。ちょっとわかりづらい。

Drawer Slide Menu

全般的にいい感じなんですが、メニューを右から開かせたいときがいまいちよくわからず、実装をあきらめた。あと、アンドロイド2.4系で動くのかなぞい。そういえば、シャープとかそういうガラケーアンドロイドはもう無視ですね。

JQuery slim menu

レスポンシブに実装できる。このパターン問題は、もともとのHTMLで、左にサイトのロゴ、右にメニューボタン(なんかJSで開く)、という感じにしていると、リプレイス用には使えないということですね。しかし、ブラウザのバージョンとかあまりに気にしなくていいので、最初からこういうので対応できる画面設計にして、意味不明なHTML/CSSコーディングをしないのが、無難ですね。

スクロールスパイ

スマホで長いページ作っていると今どこにいるのかよくわからなくなるので、スクロールスパイはとても重宝しますね。で、だいたいグロナビとは別に設置したいので、途中から固定されたり表示されるタイプがいいですね。途中から変化するやつでよくできているなって思ったのが、価格コムのクレジットカードのプロモーションページのナビゲーションですね。

なので、以下の二つを参考に実装しました。

結構ごねごねしないとうまくできないので、わりと手間がかかりますね、、、。

検索サジェスト

これだけど、どこからとってきたか忘れてしまった。。。なんかどっかのサイトでしょうかいされていたけど、ライブラリのページいったらなくなっていたから、そのページのデモかなんかをパクって実装した気がする。

いいのあったら、教えてください。

スワイプしてスライドする感じのタッチUI

flipsnap.jsというのを書いたという記事で紹介されている、flipsnapがいい感じ。別、JQuery依存してないっぽいし、ただのスライドショーみたいに画像だけじゃなくて、オブジェクト(テキストとか画像のブロック)も詰め込めるし、ポインターとか次へスライドボタンとか、AJAXで次のオブジェクトをロードする感じもあるし、かなり柔軟。

見出し

JSじゃないけど、HTML5時代はPhotoShopなしでもカッコイいい見出しが作れてマジ感動。あと、この記事じゃないけど、アンダーラインをグラデーションさせるとかいけている方法もあったりするから、マジ最高

  • H1一つでここまで出来るCSS見出しデザインのアイデア9個:メタルプレートがかなりヤバイ。画像でなくてココまでいくとかなりやばい。
  • 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応):オビのやつがカッコイいい
  • 見出し生成ツール
    • グラデーションジェネレータ

      グラデーションを自分で書くのはムリポなので、ジェネレータ任せが一番

      • いい素材のそろっていてカスタム可能なグラデーション生成ツール
      • 神的なグラデーション生成ツール
        • もろもろ

          ひさびさに書くと、$(function());って書くの忘れたり、PerlのJSONモジュールでJSONエンコードしたら数値にダブルクォーテーションがついていてつらまったりして+0すればよかったんだとか思い出したり、小数点が地獄のように伸びてFixedつければいいんだってまかまかさんに教えてもらったこと思い出したり(Amon2にくっついてくるsprintf.jsとか便利なんですが)、なんかたまに使うと毎回同じところではまってつらいですね。。。

          AngularJSとフルスタックに使いたいところですが、そういうの使う機会ってあまり巡り会わず、大きなプロジェクトとかじっくりできるスタートアップなプロジェクトやりたいですわ。

          まぁ、小規模だといかにさくっと楽に、安く、という感じになるので、Bootstrapがよりフルスタックになるのを願うばかりですね。

フロントエンド update_at : 2015-02-03T00:57:46
hirobanex.netの更新情報の取得
 RSSリーダーで購読する   
blog comments powered by Disqus