Skip to content

電子書籍風Webアプリケーションを作るのに使えるJavaScriptライブラリまとめ

電子書籍コンテンツはここ数年で一気に増えています。Eコマースサイトで販売されるものだけでなく、スマートフォンアプリでも提供されています。さらにコンテンツさえ作れば業務システムのヘルプなどで提供するのも良いでしょう。

今回はそんな電子書籍風のUIを実現できるJavaScriptライブラリを紹介します。

Laker compendium

動画を埋め込んだり、タップアクションなどのイベントも使えるので、かなりインタラクティブな電子書籍が作成できます。単なる書籍の置き換えではなく、電子書籍ならではの価値が提供できそうです。

Laker compendium – Designing digital publications in HTML5

Turn.js

ページをめくったり、拡大/縮小する機能が備わっています。ページの形もカスタマイズできるので、書籍風以外でも使えるようになっています。

blasten/turn.js: The page flip effect for HTML5

Monocle

ePubファイルではなく、HTMLベースの電子書籍を表示するソフトウェアです。ページをめくるようにスライドさせてページを変更できます。特にスマートフォンなどでコンテンツの可読性を上げるのに役立ってくれそうです。

joseph/Monocle: A silky, tactile browser-based ebook JavaScript library.

20thingsilearned

Webブラウザやインターネットの仕組みについて学べる絵本風電子書籍です。中身をカスタマイズすればでオリジナルの絵本を作成することもできるでしょう。ページ送り、目次、ページのサムネイル、共有など機能も十分に備わっています。

20thingsilearned

rePublish

ePubファイルを読み込んで表示するライブラリです。DRMには対応していないので注意してください。閲覧機能はあまりありませんが、Web上でePubファイルを読めるのはメリットが大きいでしょう。

blaine/rePublish: Pure-JavaScript ePub Reader

Treesaver.js

テキスト、画像、動画などを組み込んだ電子雑誌の作成できるフレームワークです。コンテンツは作成後、コンパイルして電子雑誌化するのが特徴となっています。ビューワーとしての機能もソーシャルサービスでの共有やインデックス、印刷など豊富です。

Treesaver/treesaver: JavaScript library for creating column and page-based layouts

Magaka

HTML/JavaScript/CSSを使った電子雑誌を作成するためのフレームワークです。ダブルタップで一覧を表示するという機能があります。テキストの場合はBRHTMLというHTMLの簡易記法を使います。

Magaka – Digital magazines with your face.

Epub.js

ePubファイル(DRMなし)を読み込んで表示します。文字サイズの変更、目次表示などができます。フォントも読み込まれるので表示はePubとさほど変わらないレベルで再現されます。

futurepress/epub.js: Enhanced eBooks in the browser.

BiB/i

電子書籍をWebサイトに埋め込んで表示するのに適したリーダーです。縦書きに対応しているのは貴重でしょう。マンガタイプのリーダーとして利用できます。

satorumurmur/bibi: BiB/i | EPUB Reader on your website.

BookBlock

絵本のような電子書籍向きのJavaScriptライブラリです。フリップ操作が気持ちよく感じられるはずです。電子書籍風に使うこともできますし、カルーセル表示もサポートしています。

codrops/BookBlock: A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages.


電子書籍にすればスマートフォンやタブレットでも可読性の高い形に仕上がります。社内ヘルプであったり、開発標準的なドキュメントもWebブラウザで読むより、電子書籍の形になっている方が扱いやすいのではないでしょうか。ぜひ使ってみてください。

banner_02

hifiveのデータグリッドライブラリを使いこなす(7)「データの表示件数を変更する」

大量のデータを表示する際に要望に上がってくるのがデータの表示件数を変更する機能です。ページネーションと組み合わせて使いますが、今回はまずデータ件数の変更について紹介します。

実際に動いているデモはこちらにあります。また、動いている画像は下記になります。

データの表示件数を指定する

まずHTML側でデータの表示件数を指定できるようにします。今回は次のようなドロップダウンを用意しました。

データサーチャーを用意する

hifiveのグリッドライブラリにおいてデータの表示件数を制御するのは gridController.dataSearcher になります。次のように用意します。

さらに初期化の変数を変更します。pagingをtrueにし、pageSizeが初期化時の表示件数になります。

動的に表示件数を変更する

そしてドロップダウンで件数を指定した際に、動的にグリッドの表示件数を変更します。

このように、件数を数値で渡すのがポイントです。実際の表示はgridControllerが行ってくれます。


データはすでにコントローラ内部にありますので、件数変更は素早く行われます。次回はページネーションの実装を紹介します。

データ件数の変更デモ

banner_02

hifiveのデータグリッドライブラリを使いこなす(6)「グリッドで使える入力フォーマットについて」

グリッドを使ってデータを一覧表示した際に出てくるニーズとして、一覧表の中でデータを修正したいというのがあります。一括修正であったり、インラインで一項目ずつその場で修正できて欲しいと言った要望があるでしょう。

hifiveのデータグリッドでも幾つかのデータ入力に対応していますので、今回はそれを紹介します。

cellFormatterの利用

入力をコントロールに変更する場合は cellFormatter を使います。現在、以下の4つをサポートしています。

テキスト入力

テキスト入力の場合、inputメソッドを使います。引数はtype属性に使われるので、datetimeやpasswordなどを指定することができます。

チェックボックス

チェックボックスはcheckboxメソッドを使います。

ラジオボタン

ラジオボタンはradioメソッドを使います。

ドロップダウン

ドロップダウンリストはselectを使います。引数はオプション項目になります。


デモをJSFiddleに置いてあります。グリッド表示がどのように変わるか、チェックしてください。

banner_02

業務システムに組み込める表計算ライブラリまとめ

業務システムでは一覧表がよく使われます。多くはテーブルタグを使って実現しますが、使っている内により細かな機能が望まれるようになります。例えば表をソートしたり、インラインで編集するような機能です。

今回はそんなユーザニーズに応えられる高機能な表計算ライブラリを紹介します。

Handsontable Community Edition

セルをマージしたり枠の色を変更する、選択行のハイライトなどとても多機能です。ヘッダーや左列の固定もサポートしています。コミュニティエディションはMIT Licenseですが、有償版も用意されています。

handsontable/handsontable: Handsontable Community Edition – a JavaScript/HTML5 Spreadsheet Library for Developers

SlickGrid

 

ヘッダーを固定したスクロール、画像やチェックなどの表示形式に対応、スライダーを使った入力、カレンダー、集計など様々な機能があります。各行にチェックボックスをつけて選択すると言った操作も可能です。ライセンスはMIT Licenseです。

mleibman/SlickGrid: A lightning fast JavaScript grid/spreadsheet

jExcel

ページ内に埋め込んで使うのが前提になっている表計算ライブラリです。入力値のフォーマットを指定したり、チェックボックスやドロップダウン、カレンダーを使った入力も可能です。一つのページ内に複数埋め込むこともできます。

paulhodel/jexcel: jExcel is is a very light jquery plugin to embed a spreadsheet, compatible with Excel, in your browser. You can load data straight to a jExcel table from a JS array, json or even a CSV file. You can copy and paste from or to Excel straight to a jExcel table. For live examples, please visit:

editableTableWidget

Bootstrapに対応した表計算ライブラリです。jQueryと組み合わせられるのでカスタマイズしやすいでしょう。社内の管理画面などでBootstrapを使っている場合、editableTableWidgetを使うと便利そうです。

Tiny editable jQuery Bootstrap spreadsheet from MindMup


ライブラリによってサポートされている機能が異なりますので、自社のニーズに合わせて選定してください。また、扱い勝手もそれぞれのライブラリによって異なりますので、選定されたフレームワークに合わせて選ぶと良いでしょう。

banner_02

チャートライブラリの使い方(7)「グラフを動かす」

hifiveのチャートライブラリの使い方を紹介します。今回はグラフを移動させるデモです。

ベースはチャートライブラリの使い方(1)「基本編」 | hifive開発者ブログのグラフになります。

実行しているところは下記の通りです。こちらのURLにてサンプルを試せます。

HTMLのボタンを追加

HTMLを次のように修正します。進む、戻るのボタンを追加します。

ダミーデータ生成部分を修正

任意のデータ数生成できるように修正します。これは実運用時には不要でしょう。

進むボタンを押した時の処理

進むボタンを押した時には、グラフを1つ進めます。その際、一番右端かどうかの判定を行って、端であればデータを追加します。

戻るボタンを押した時の処理

戻るボタンを押した時にはグラフを一つ戻します。この時、左端であればグラフは動きません。


注意点としてはデータを追加する際にデータ系列名(name)を初期表示時と同じにしておくということです。

例えばこの進むボタンを押した時の処理をsetIntervalで繰り返すようにすると刻々と描画が更新されるグラフができあがります。

ぜひサンプルをお試しください

banner_02

チャートライブラリの使い方(6)「グラフを拡大/縮小する」

hifiveのチャートライブラリの使い方を紹介します。今回はグラフの拡大表示、縮小表示の仕方です。

ベースはチャートライブラリの使い方(1)「基本編」 | hifive開発者ブログのグラフになります。

実行しているところは下記の通りです。こちらのURLにてサンプルを試せます。

幅と高さをコントローラの変数へ移行

チャートの幅と高さを動的に変更するので、設定をコントローラの変数にします。これによりイベントから操作しやすくなります。

HTMLを修正

HTMLを次のように修正します。拡大、および縮小ボタンを追加します。

ボタンを押した時のイベントを追加

ボタンを押した時のイベントを設定します。それぞれチャートコントローラの setChartSetting を実行します。拡大(#expand)の場合はサイズを2倍に、縮小(#shrink)の場合は1/2にして大きさを適用します。


これらの変更によってチャートの拡大/縮小が可能になります。大量のデータがある時に拡大して細かく分析したり、逆に縮小することでトレンドが分かりやすくなります。hifiveのチャートライブラリを使って、分かりやすいグラフを提供してください。

今回のデモ

banner_02

hifiveのUIライブラリ紹介「ドラッグ&ドロップ」

今回はWebのUIで見かけることが多くなってきたドラッグ&ドロップを実装する方法を紹介します。hifiveではなく、jQuery UIと組み合わせた方法になります。

実際に動くデモはこちらになります。

必要なライブラリ

ドラッグ&ドロップを行う際には次のライブラリを利用します。

HTML

HTMLは次のようになります。idをドラッグできるDOM、されるDOMにそれぞれ設定しておきます。

JavaScript

hifiveのコントローラの基本形は次のようになります。

まず初期化処理を行います。

このように記述することでドラッグできるDOMが作られ、マウスでドラッグできます。droppableはドロップできるDOMで、dropされた時にコールバック処理を呼び出します。

最後にドロップされた時のコールバックを記述します。

CSS

CSSは次のように記述しました。これはデザインに応じて変更してください。

これで完成です。


jQueryの記述に従っていますが、hifiveの中でコントロールできます。UIを自由に設定させたり、データを移動したりするような処理を作る際に使ってください。

今回のサンプルはこちらにあります。コードを確認する際に利用してください。

banner_02