Skip to content

HTML5のドラッグ&ドロップを便利にしてくれるライブラリまとめ

HTML5にはドラッグ&ドロップAPIが追加されました。これによってローカルファイルをドラッグ&ドロップでアップロードしたり、DOM同士をドラッグ&ドロップできるようになりました。

このAPIも素のままでは使いづらいところがあります。そこで今回は利便性を高めてくれるライブラリを紹介します。

Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.

Shopifyが開発しているドラッグ&ドロップライブラリです。DOM向けのライブラリで、ドラッグするオブジェクトごとにドロップできる場所を定義できます。スワップのようなオブジェクト同士を入れ替える機能もあります。

さらにドロップした後のソートであったり、ドロップできない場所に持っていくと震えるといったイベントの設定もできます。

Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.

feross/drag-drop: HTML5 drag & drop for humans

onDrop/onDropTextといったイベントを購読できるようになります。ファイルをドラッグしてきたら特定のDOMを変化させたり、ドロップしたファイルを受け取れます。また、テキストのドラッグ&ドロップも可能です。

feross/drag-drop: HTML5 drag & drop for humans

bevacqua/dragula: Drag and drop so simple it hurts

DOM同士のドラッグ&ドロップに対応したライブラリです。DOM全体をドラッグ可能にすることも、ハンドルをつけてその部分だけをドラッグ可能に指定することもできます。

bevacqua/dragula: Drag and drop so simple it hurts


ドラッグ&ドロップができるとアプリケーション感が強くなります。ローカルファイルはもちろんのこと、Gmailのように別なボックスに振り分けるのも直感的になります。使いこなすのは難しいですが、今回紹介したライブラリを使えば大幅に工数が削減されるはずです。

ダッシュボードを作るのに便利なライブラリまとめ

業務に必要なデータは幾つかのシステムにまたがっていることは少なくありません。そうした時に、それぞれのシステムにログインしてステータスをチェックするのは面倒です。そこで便利なのがダッシュボードです。

ダッシュボードは必要なデータをまとめてチェックするのに適しています。今回はそうしたダッシュボードを作るのに最適なライブラリを紹介します。

codaxy/dashboards: Drag & drop dashboard builder!

あらかじめ用意されたウィジェットをドラッグ&ドロップで配置してダッシュボードを作成するソフトウェアです。配置はとても柔軟で、ウィジェット同士を重ねて配置することもできます。

背景色やダッシュボード全体のサイズを変更することもできます。

codaxy/dashboards: Drag & drop dashboard builder!

gridstack/gridstack.js: gridstack.js is a jQuery plugin for widget layout

あらかじめ決められたグリッドに沿ってウィジェットを配置します。グリッドは複数の枠にまたがって配置することも可能です。配置データはJSONになっているので、それを使って配置の再現も可能です。

gridstack/gridstack.js: gridstack.js is a jQuery plugin for widget layout

jerrywham/SonarRSS: Netvibes minimalist alternative

フィードを配置するのに特化したダッシュボードです。最初はタイトルだけですが、クリックすると本文も表示されます。情報のビジュアル化には向きませんが、一覧でまとめて新着情報をチェックしたいといったニーズに使えそうです。

jerrywham/SonarRSS: Netvibes minimalist alternative

oazabir/Droptiles: Droptiles is a “Windows 8 Start” like Metro-style Web 2.0 Dashboard. It compromises of Live Tiles. Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full application.

Windows8 Style UIに近いダッシュボードです。パネルの配置は自分で変更できます。基本的に横スクロール型のUIとなっています。テーマごとにブロックを分けられるので、グルーピングにも向いています。

oazabir/Droptiles: Droptiles is a “Windows 8 Start” like Metro-style Web 2.0 Dashboard. It compromises of Live Tiles. Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full application.

Shopify/dashing: The exceptionally handsome dashboard framework in Ruby and Coffeescript.

デザインがすっきりとした、モダンなUIのダッシュボードです。グラフを描画することも可能です。グリッド型になっているので、配置はそれに沿って変更できるようになっています。

Shopify/dashing: The exceptionally handsome dashboard framework in Ruby and Coffeescript.

ducksboard/gridster.js: gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns

Pinterestライクにグリッドが重なったUIになっています。利用する最小のカラム数、行数が指定できます。グリットに沿った形で配置を自由に変更できます。

ducksboard/gridster.js: gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns


ダッシュボードは特に並び替え、配置換えが必要です。それによって担当者一人一人に最適化されたUIが実現できます。作業効率も変わってくるでしょう。どこまで自由にカスタマイズできるかはライブラリ次第です。

開発者は個々のウィジェットを開発します。Web APIをうまく使えば多数のシステムからまとめてデータを収集して表示できるようになるでしょう。

hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する(ビュー)

Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。

そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回はejsと組み合わせた表示更新について紹介します。

利用するソフトウェア/ライブラリ

  • Bower
  • hifive
  • Onsen UI
  • jQuery

インストール

まず各ライブラリをインストールします。インストールはBowerを使って行います。

今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。

index.htmlの作成

次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。

Onsen UIの記述

bodyタグ内に次のように記述します。これはOnsen UIの画面遷移を管理するナビゲーターのタグです。IDをnavとし、最初に読み込むページをpage要素で定義します。

app.htmlの作成

そしてapp.htmlを作成します。#appを忘れずに付けておきます。時刻を表示する部分はejsの埋め込みになっています。

この状態でページを読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。

hifiveの作成

次にhifiveの処理です。まず画面を読み込んだ時のイベント document.addEventListener init 時において、コントローラ化とデータを渡します。渡すデータとして、ページ情報と画面に適用される変数を渡します。

そしてコントローラの初期化時において、テンプレートをダイナミックに定義します。 page.id は app になりますので、テンプレート名は app となります。そして、 #app に対してテンプレートID app の内容を反映します。

後はボタンを押したタイミングなどでも同様に画面に反映できます。

こうすることでボタンを押すと時間が更新される仕組みができあがります。


このようにテンプレートを使うことで画面の細かい表示を気にすることなくデータの変更と反映ができるようになります。なお、hifiveではデータバインディングによって変数を変更するだけで画面を更新する仕組みもあります(若干処理が複雑になるので今回は止めました)。

デモコードはhifiveWithOnsenUI/view at master · hifivemania/hifiveWithOnsenUIにアップロードしてあります。実装時の参考にしてください。

Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。

hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する(タブバー)

Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。

そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回はタブバーを使った処理について紹介します。

利用するソフトウェア/ライブラリ

  • Bower
  • hifive
  • Onsen UI
  • jQuery

インストール

まず各ライブラリをインストールします。インストールはBowerを使って行います。

今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。

index.htmlの作成

次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。

Onsen UIの記述

bodyタグ内に次のように記述します。これはOnsen UIでタブバーを表示するタグです。詳しくはons-tabbar – Onsen UIをご覧ください。tab1.htmlとtab2.htmlは後で作成します。

tab1.htmlの作成

今回は簡単に次のようなページを作成します。html、head、bodyタグなどは不要です。

tab2.htmlの作成

tab1.htmlと同様に簡易的な内容で作成します。

hifiveの実装

今回、コントローラは最低限としています。

そしてコントローラ化するのは document.addEventListenerinit イベントになります。引数の event.target でどのページが読み込まれたか分かりますので、そのIDによって初期化するコントローラを分けています。

これだけで画面遷移と、それぞれのコントローラによるイベント管理が実現できます。


デモコードはhifiveWithOnsenUI/tabbar at master · hifivemania/hifiveWithOnsenUIにアップロードしてあります。実装時の参考にしてください。

Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。

hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する(画面遷移)

Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。

そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回は

利用するソフトウェア/ライブラリ

  • Bower
  • hifive
  • Onsen UI
  • jQuery

インストール

まず各ライブラリをインストールします。インストールはBowerを使って行います。

今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。

index.htmlの作成

次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。

Onsen UIの記述

bodyタグ内に次のように記述します。これはOnsen UIの画面遷移を管理するナビゲーターのタグです。IDをnavとし、最初に読み込むページをpage要素で定義します。

app.htmlの作成

そしてapp.htmlを作成します。#appを忘れずに付けておきます。

この状態でページを読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。

画面遷移の作成

ではJavaScriptファイルを js/app.js として作成します。まず最初の画面用のコントローラーを定義します。

ここで注意する点として、index.htmlがapp.htmlを読み込んでいるということが挙げられます。そのため、 $(function() {}) のようなイベント時においてコントローラ化を行うとまだページ内容が存在しない状態になります。また、SPAとしての画面遷移も考慮する必要があります。

そこで document.addEventListenerinit イベントを使います。ここでは各画面が初期化される際に呼ばれますので、最初の画面を初期化する際にbodyに対してコントローラ化します。これはナビゲーションタグが #app 内にはないためです。

ボタンを押した際のイベント

そしてボタンを押した際のイベントを作ります。コントローラ管理化の #nav を見つけ、そのpushPageメソッドをコールします。第一引数にページ名、オプションとしてdataというキーで次の画面に引き継ぐ情報が送れます。

ページ遷移の処理

ページ遷移のアニメーションはOnsen UIが自動で行ってくれますが、コントローラ化は自分で実装します。すでにあるdocument.addEventListenerinit イベントを使います。先に設定したdataはpage.dataで取れますので、それをコントローラ化する際のオプションとして渡します。

ページの表示

newControllerは次のようになります。準備ができた時 __ready が呼ばれますので、そこで画面表示を更新します。

こうすることで画面遷移したタイミングで画面が書き換わります。イベントのハンドリングはhifiveのコントローラで変わらず行えます。


デモコードはhifiveWithOnsenUI/navigation at master · hifivemania/hifiveWithOnsenUIにアップロードしてあります。実装時の参考にしてください。

Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。

hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する(基本編)

Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。

今回はそんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。

利用するソフトウェア/ライブラリ

  • Bower
  • hifive
  • Onsen UI
  • jQuery

インストール

まず各ライブラリをインストールします。インストールはBowerを使って行います。

今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。

index.htmlの作成

次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。

Onsen UIの記述

bodyタグ内に次のように記述します。これはOnsen UIの記述に沿っています。詳しくはjQuery – Onsen UIをご覧ください。

この状態で読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。

イベントハンドリング

次にボタンを押した時の処理を作ります。ここはhifiveを使います。 js/app.js に次のように記述します。

通常とほとんど変わりませんが、jQueryでよく使う $(function() {}) ではなく、ons.ready を使います。これは $(function() {}) とほとんど変わりませんが、Onsen UIの画面構築まで終わったタイミングで呼ばれるメソッドになります。

ボタンを押した時のイベント処理も通常と変わりません。Onsen UIらしいアラートを出すために ons.notification.alert に置き換えているだけです。

これでボタンを押すとちゃんとアラートが表示されます。

今回のデモはGlitchにて試せます。


Onsen UIとhifiveの基本的な組み合わせは以上になります。Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。

次はもう少し複雑な画面遷移の方法について紹介します。

縦長のWebサイトに。ヘッダー固定化ライブラリ

スマートフォンなど画面が小さい場合、Webサイトはどうしても縦長になりがちです。そしてスクロールを下まで行い、別なページに移ろうと思うと今度は上までスクロールし続けないといけません。これは非常にストレスです。

そこで使ってみたいのがヘッダー部分を固定表示してくれるライブラリです。ヘッダー情報へのアクセスがしやすくなるのでユーザビリティが高くなるでしょう。

simple-sticky-header

以下のようなシンプルなコードでヘッダー固定化を実現します。デザインがスクロール時には変更されます。

cara-tm/simple-sticky-header: Very simple javascript & CSS fixed header on scroll down based on an element’s height.

AnimatedHeader

スクロールするとヘッダーが小さくなるアニメーションとともに固定化されます。若干実装が複雑になっています。

codrops/AnimatedHeader: A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

partly-fixed-header

ヘッダーではなく広告を常時表示するのを想定して作られています。とは言えメニューなどに変更して使うこともできるはずです。

skimmet/header: A head that is only fixed when scrolled past the banner.

aheader

上にスクロールする際にヘッダーを表示するというタイプのライブラリです。ユーザが下までコンテンツを見た後、上に戻る操作をしたタイミングでヘッダー情報が出せます。

Peleg/aheader: Fixed header on scrolling up


こうしたライブラリを使うと画面上の一部分は常に情報が表示され、そこを使えなくなってしまいます。画面が十分に大きい場合はいいですが、4インチくらいの画面サイズであまり大きなヘッダーは却って邪魔になってしまう可能性があります。小さくユーザビリティを損なわないライブラリを選ぶか、二段階くらいのサイズ変化に対応しているものを選ぶと良いでしょう。