Skip to content

カレンダー表示を行うカレンダーコンポーネント(その5)「マーカーを付ける」

カレンダーコンポーネントの使い方、第五弾です。今回はカレンダーの日付にマーキングをします。デモはこちらにあります。実際に動いているところは下記の画像で確認できます。

日付を指定しておいて、マーカーを付けるボタンをクリックすると日付のところにマークが付きます。

HTMLの形

HTMLは次のようになります。マーカーをつけるためのボタンを設置します。

JavaScript側の処理

そしてJavaScritp側ではカレンダーコンポーネントの読み込みと、ボタンを押した時の処理を実装します。

ボタンを押した時の処理は次のようになります。calendarController.setMarkerに日付と、マーカーをつけるか否かを二つ目の引数で指定します。日付の選択は複数可能なので、配列を順番に処理しています。


今回のデモはこちらで確認できます。カレンダーの中で特別な日付にマーカーを付けたり、データの有無をフラグで示したいと言った時に使えるでしょう。

CalendarController

HTML5によるタイマー実装&アプリ×7選

タイマーや時計といったソフトウェアは昔から存在します。ポモドーロテクニック(キッチンタイマーを使って25分間集中して作業する)が流行ると、キッチンタイマー風アプリが多数作られるなど、常に新しいタイマーが様々なプラットフォームで作られています。

今回はそうしたタイマーアプリケーションの中でもWebブラウザ上で動作するものを紹介します。

hoto17296/TopicTimer

ミーティングやプレゼンテーションで使えるタイムキーピングアプリケーションです。トピックと時間を決めたら、後はクリックでタイマーがカウントダウン開始します。

hoto17296/TopicTimer

builderscon/session-timer: [WIP] The Official? builderscon Session Timer

Buildersconのセッションタイマーです。デフォルトで60分のタイマーとなっています。スタートボタンを押すとカウントダウンが開始します。60分の設定であれば、30分/45分50分の3回ベルが鳴る仕組みになっています。

builderscon/session-timer: [WIP] The Official? builderscon Session Timer

objectivehtml/FlipClock

フリップ形式のタイマーを作成できるライブラリです。カウントアップもカウントダウンもサポートされています。ティザーサイトなどで後何日で公開すると言った時に使えそうです。

objectivehtml/FlipClock

Frerit/epiclock: Automatically exported from code.google.com/p/epiclock

jQueryプラグインとして作られているタイマーです。カウントアップ、カウントダウン両方に対応しています。AM/PM表示や24時間表示など細かい表示設定にも対応しています。

Frerit/epiclock: Automatically exported from code.google.com/p/epiclock

nhat-nguyen/sereny: a material-design-inspired countdown timer

マテリアルデザインなカウントダウンタイマーです。デザイン自体の格好良さもありますが、カウントダウンが完了すると数字の部分がバウンドするようなアニメーションがおきます。

nhat-nguyen/sereny: a material-design-inspired countdown timer

maruta/timekeeper: HTML5 and JavaScript based timer with notification chime for academic conference

数字がとても大きく見やすいタイマーです。直感的な操作が可能で、カスタマイズも難しくありません。最大3回までベルを鳴らすタイミングを設定できます。

maruta/timekeeper: HTML5 and JavaScript based timer with notification chime for academic conference

sanographix/css3-countdown: Flip style CSS3 countdown timer

CSS3で実装されたフリップタイプのタイマーです。なお、フリップするようなアニメーションはありません。カウントダウンタイマーになるので、ティザーサイトなどで利用するのが良さそうです。

sanographix/css3-countdown: Flip style CSS3 countdown timer


いかがでしょうか。こうしたUIを実現するにはCSS3で実装したり、JavaScriptで定期的に画面を更新してあげる必要があります。また、サウンドを鳴らす仕組みはaudioクラスを利用します。こうした技術の組み合わせによってタイマーが実現できるようになっています。

とは言え仕組みはシンプルなので、HTML5の体験としてぴったりな素材ではないでしょうか。

カレンダー表示を行うカレンダーコンポーネント(その4)「日付を選択できない状態にする」

カレンダーコンポーネントの使い方、第四弾です。今回はカレンダーの日付を選択できない状態に変更します。

実際に動いているデモはこちらにあります。

使い方

HTMLは次のようになります。ステータスを変更するためのボタンを追加しています。

JavaScriptは次のようになります。選択されている日付を取得し、それを setSelectable に渡しています。

解除する場合には、予め無効にした日付を変数に入れておき、それを setSelectable(dates, true) とすればOKです。


予約の埋まった日付をサーバから取得したり、動的に変更したい場合に便利です。お店のお休みであったり、営業外の日を設定するなど様々な使い方が考えられるでしょう。

2017年、最新のグリッドライブラリ×7選

データの一覧表示はWebシステムの基本と言えます。そうした機能を作ると、どんどん要望が上がってくるのが常です。データを並べ替えたい、件数を絞りたい、チェックボックスをつけて一括更新したいなどなどです。そうした要望にすべて応えるのはリソースがいくらあっても足りません。

そこで多機能なグリッドを実現できるライブラリをまとめて紹介します。

ceolter/ag-grid: Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components

高機能なグリッドライブラリです。セルの中に画像を表示したり、レーティング表示もできます。表示項目をチェックボックスを使って絞り込んだり、ソート、カラムの入れ替えもできます。インラインでの編集もサポートされています。カラーテーマをサポートしているので自分たちのシステムに合わせたカラーリングが指定できます。

ceolter/ag-grid: Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components

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

大型なグリッドではなく、ページ内に埋め込める表計算といった体のライブラリです。ドロップダウンでの入力もサポートされています。行の削除やカラムの非表示指定も可能です。

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

Swirrl/grrid: Javascript grid control using Prototype.js

表計算風のUIを実現するライブラリです。セルの移動は矢印キーやエンターキーで行えます。表計算機能は提供されていないので注意してください。

Swirrl/grrid: Javascript grid control using Prototype.js

nnajm/orb: Pivot table javascript library

Web上でピボットテーブルが作れるライブラリです。カラムをドロップするとダイナミックに内容が変化します。さらにカラムを入れ子にでき、ドリルダウンしながら値の確認もできるようになっています。

nnajm/orb: Pivot table javascript library

rstaib/jquery-bootgrid: Nice, sleek and intuitive. A grid control especially designed for bootstrap.

Bootstrapの標準機能として提供されているテーブルをパワーアップしてくれるライブラリです。検索、フィルタリング、ページネーション、カラムの表示/非表示切り替えといった機能が提供されています。

rstaib/jquery-bootgrid: Nice, sleek and intuitive. A grid control especially designed for bootstrap.

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:

jExcelは編集もサポートしたWeb上に埋め込める表計算ライブラリです。入力フォーマットを指定したり、カレンダーを使った入力もサポートしています。データはCSVやJSONで出力できるようになっています。

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:

mindmup/editable-table: tiny jQuery/Bootstrap widget that makes a HTML table editable

Editable TableもBootstrapのテーブルを強化します。機能としてはインラインでの編集機能を追加しますが、フッターなどの数字を編集に合わせてリアルタイムにアップデートしてくれます。

mindmup/editable-table: tiny jQuery/Bootstrap widget that makes a HTML table editable


いかがでしょうか。Bootstrapのテーブルを強化してくれるライブラリは手軽に使い始められそうです。それ以上の要望になってきたら、専用のライブラリに切り替えるのも良いでしょう。多くの要望はライブラリによって解決できるはずです。

これらのライブラリはWebブラウザ側だけで行っているのが特徴です。実際のデータ更新処理などは自分たちで実装する必要がありますので注意してください。

カレンダー表示を行うカレンダーコンポーネント(その3)「日付の選択モードを変更する」

カレンダーコンポーネントの使い方、第三弾です。今回はカレンダーの日付選択方式を変更します。

実際に動いているデモはこちらにあります。

使い方

HTMLは次のようになります。選択方式の3パターンを設定できるようにしただけです。

JavaScriptは次のようになります。ラジオボタンの選択した値をそのまま適用しています。

選択モード

選択モードは全部で3つあります。まずデフォルトの1日選択モードです。

次に2回クリックすると、その間の日付をすべて選択状態にするモードです。

最後に複数の日付を選択できるモードです。

それぞれ必要に応じて使い分けられます。


ホテルや旅行の場合、一気に複数の日付を選択できるのが便利です。複数日付の選択もよく使われる方法です。業務要件に合わせて最適なものを設定してください。

カレンダー表示を行うカレンダーコンポーネント(その2)「特定の年月にジャンプする」

カレンダーコンポーネントの使い方、第二弾です。今回は特定の年月を指定して、その月のカレンダーを表示する方法です。

実際に動いているデモはこちらにあります。また、動いている際には次のようになります。

使い方

HTMLは年月を指定するタグを追加しただけです。

JavaScriptは次のようになります。入力したタイミングでsetYear/setMonthを呼び出すだけです。


カレンダーの移動は元々表示されている三角マークで行うか、来月または先月の日付を選択する、JavaScript側で行うかの3種類になります。JavaScriptから制御できるので、自由にカスタマイズできるでしょう。

PDFをコントロールするJavaScriptライブラリ×4選

PDFはビジネスの基本フォーマットになっています。閲覧するだけという方が多いかと思いますが、もっと活用できます。PDFから必要な情報を抜き出したり、システムから出力したりできれば、業務がもっと改善できるはずです。

そこで今回はPDFをWebブラウザ上で扱えるライブラリを紹介します。

paperai/pdfanno: Linguistic Annotation and Visualization Tool for PDF Documents

PDFに注釈を入れられます。表示されている文字列を選択して注釈を入れられるようになっています。他にも四角で囲んだり、注釈同士をリンクさせることもできます。

paperai/pdfanno: Linguistic Annotation and Visualization Tool for PDF Documents

instructure/pdf-annotate.js: Annotation layer for pdf.js

PDFはPDF.jsというJavaScriptライブラリで表示されており、そのPDF上で文字を書いたり、マウスで自由線を引いたりできます。PDFファイルの回転表示もサポートしています。表示を変更するのではなく、コメントを付けることもできます。

instructure/pdf-annotate.js: Annotation layer for pdf.js

azu/pdf.js-controller: Provide presentation interface using pdf.js

PDFを読み込み、プレゼンテーションとして表示するライブラリです。こちらもまた、PDF.jsを使っています。アウトラインを出したり、ツリービューのような表示も行えます。PDFの資料をそのままプレゼンするのに便利そうです。

azu/pdf.js-controller: Provide presentation interface using pdf.js

manuels/texlive.js: Compiling LaTeX (TeX live) in your browser

論文などを書くのに向いたフォーマットのLaTeXをPDFに変換します。もちろんWebブラウザだけで実現します。画像、リスト、式などLaTeXの文法がそのまま使えます。動作は重たいですが、サーバサイドやローカルに変換環境を用意しないでも良いのは便利そうです。

manuels/texlive.js: Compiling LaTeX (TeX live) in your browser


いかがでしょうか。クライアントサイドだけでもPDFに対して様々な操作ができるのが分かるでしょうか。特にMozillaの開発したPDF.jsによってPDFファイルをJavaScriptで操作しやすくなりました。その結果、PDFファイルを読み込んで、そこから必要な情報を手軽に得られるようになっています。

ぜひ閲覧だけでなく、PDFファイルを業務システムで活用してください。