レスポンシブ・スマホ化対応に使える4つのPlugin「Mobify Open Souce」

レスポンシブ・スマホ化対応によく使われる4つのPlugin「Mobify Open Souce」

先日Phpspot開発日誌でモバイルファーストでレスポンシブなアコーディオン実装「Bellows」という記事が取り上げられていました。
実はこのプラグイン全4種あるんです。
というわけで今回はスマホ化対応によく使われるこの以下UIをご紹介したいと思います。

http://mobify.github.io/

1.Bellows

bellows

Demo

まずはこのアコーディオンのBellowsから。Demoをみていただきたいのですがアイコンのアニメーション変化とレスポンシブに対応しています。(android2.3では画像切り替えのみ)
open,close時、easingやduretion等のオプションも準備されています

Mobifyで使用する場合

Downloadしたファイルの中にpackage.jsonというファイルがありますのでその中のname、versionでkonfに紐づける形となっています。downloadしたファイルをそのままmodifyのバンドルディレクトリに入れ、konfから下記ソースで紐づけます。

'bellows': { 'root': Mobify.config.configDir, 'moduleName': 'bellows', 'version': '4.0.0', 'includeTheme': false },

jQueryで導入する場合は「dist」ディレクトリの中にある該当のcssファイルとjsファイルを利用してください。またアニメーション部分をvelocity.jsで動かしているので別途velocity.jsも読み込みましょう。

2.Magnifik

magnifik

Demo

レスポンシブサイトではPC用の大きな画像をスマホサイズの時に縮小せざるをえない場面が多いですが、このプラグインは画像をタップした位置を中心に拡大してくれます。

※Mobifyで使用する際はGitHubからdownloadするとpackage.jsonがあります。導入方法は上記1.Bellowsを参照してください。

3.Pikabu

pikabu

Demo

スライドナビゲーションです。こちらのページではAndroid2.3対応となっていますが、アニメーション部分transformを使用しているので念のため実機でチェックしてから使用してください。GitHubのissueの確認も一通り見ておくといいと思います。

※Mobifyで使用する際はGitHubからdownloadするとpackage.jsonがあります。導入方法は上記1.Bellowsを参照してください。

4.Scooch

scooch

Demo

こちらはカルーセルです。オプションもnext、prev、動いた数のindexカウントや、bind等のオプションがあります。Demoにカスタマイズされたsampleがありますのでご覧下さい。

※Mobifyで使用する際はGitHubからdownloadするとpackage.jsonがあります。導入方法は上記1.Bellowsを参照してください。

以上4種のプラグインでした。どのプラグインも定期的にバージョンアップされているので今後も改良が図られると思います。mobifyで使用する際は良く使う上記プラグインをバンドル内に入れておくとサクッと使えて便利だと思います。

Share

  • このエントリーをはてなブックマークに追加
  • 28

Follow(SNSで定期購読)

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>