Skip to content

カレンダーコンポーネントで特定の曜日を色分けする

hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の曜日に対して色を付ける方法です。

動作しているところは下記の画像で確認できます。実際に動いているデモはこちらになります。

HTMLの記述

HTMLは通常のカレンダーに加えて、曜日とカラーリング設定(スタイルシートのクラス)を指定できるドロップダウンを設定します。

スタイルシートは次のようになります。

JavaScriptの記述

ボタンを押した時に this.calendarController.setCssClassForDow を呼び出します。曜日とクラス名を指定します。

全体のコードは次のようになります。


実際に動いているデモはこちらになります。曜日毎に色を変えたい(休日など)時にご利用ください。

絵文字入力/表示ライブラリまとめ

業務システムにおいても絵文字が使われるようになっています。報告書などはとても無理ですが、従業員同士のコミュニケーションにおいて絵文字を使うことで感情を上手に表現できるようになります。

自社システムに絵文字機能を組み込む際には次のようなライブラリを使うと良いでしょう。

EmojiPanel

スマートフォンやデスクトップで使える絵文字入力によく似た絵文字ピッカーです。絵文字自体は派手すぎないデザインになっているので、多くの場面で利用できそうです。絵文字自体はアイコンで、肌の色などには対応していないようです。

EmojiPanel

mervick/emojionearea: WYSIWYG-like EmojiOne Converter / Picker Plugin for jQuery

テキストエリア、テキストボックスで使える絵文字ピッカーです。jQueryプラグインで、多くのオプションを提供しています。自動補完機能もありますが、設定でオフにすることもできます。

mervick/emojionearea: WYSIWYG-like EmojiOne Converter / Picker Plugin for jQuery

Textcomplete

入力補完の際には絵文字がでていますが、テキストエリアやテキストボックスには文字列として絵文字が追加されます。見た目と異なるので、一般ユーザよりも開発者向けに使えるのではないでしょうか。

Textcomplete

wdt-emoji-bundle – Demo

テキストを解析して絵文字にしてくれます。デザインをシステムに合わせて変更可能で、Apple/Google/Twitter/Facebook/Emojioneといったサービスごとに若干異なるアイコンデザインになります。

wdt-emoji-bundle – Demo

iamcal/js-emoji: A JS Emoji conversion library

Webブラウザ毎に異なる絵文字のデザインを吸収してくれるライブラリです。テキストを解析し、それぞれの環境に合わせた絵文字を表示してくれます。jQueryと組み合わせた使い方もできます。

iamcal/js-emoji: A JS Emoji conversion library

emojione/emojify.js: A Javascript module to convert Emoji keywords to images

テキストを解析して絵文字に変換します。絵文字自体は500種類以上用意されています。すでに入力されたテキストに対して適用される仕組みです。

emojione/emojify.js: A Javascript module to convert Emoji keywords to images

diy/jquery-emojiarea: A rich textarea control that supports emojis, WYSIWYG-style.

WYSIWYGで使える絵文字ピッカーです。絵文字は自分で用意しなければならないですが、入力できる文字を自由に制御できるとも言えます。jQueryプラグインなのでカスタマイズも容易でしょう。

diy/jquery-emojiarea: A rich textarea control that supports emojis, WYSIWYG-style.


絵文字は感情表現を和らげたり、手軽に反応を返せるようになります。あまり多用するとカジュアルになりすぎたり、ビジネスには向かないかも知れません。あくまでもスムーズなコミュニケーションを実現するために使うのが良いでしょう。

カレンダーコンポーネントで特定の日付にラベルを追加する

hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の日付に対してラベルをつける方法です。

動作している様子は次のようになります。また、こちらでデモを確認できます

作り方

HTMLの記述

HTML側ではラベルに使う文字列と、イベントを実行するボタンを配置します。

JavaScriptの実装

JavaScript側の実装です。this.calendarController.setTooltip を使って、日付と表示するラベルを指定します。

全体のJavaScriptは次のようになります。


覚えておくべき日付を説明とともに表示したり、データベースから日付データをカレンダーに載せるような使い方が考えられます。カレンダーは業務システムでもよく使われますのでhifiveのカレンダーコンポーネントを使いこなしてください。

Webベースのファイルマネージャライブラリまとめ

Webアプリケーションにおいて、ファイルを操作したいというニーズが発生するのは少なくありません。ローカルで扱うようにWebサーバ上にあるファイルを扱えると便利です。

今回はそんな時に使えるライブラリを紹介します。ユーザ体験を向上させるのに使えるでしょう。

File Manager

ファイル検索機能、ファイルの新規作成/コピー/移動/削除、GitやSubversionなどのコマンドを実行できます。依存性がなく、単体で動作します。ユーザ管理機能を備えていますので、ユーザ毎のフォルダを作成することもできます。

File Manager

jQuery File Browser demo

jQueryプラグインとして作られています。フォルダやファイルによってアイコンが違うようになっています。ファイルが実際に存在しなくとも、Web上で仮想的にフォルダ/ファイル表示を行うのに使えます。

jQuery File Browser demo

Cloud Commander

Webベースとしては珍しい二画面ファイラーとなっています。キーボードショートカットも多数用意されていますので、プログラマなどがファイルを素早く操作するのに向いています。

Cloud Commander

tshannon / freehold — Bitbucket

ファイルサーバをWeb化するソフトウェアです。ファイル管理だけでなく、マインドマップ機能もあります。また、Dropbox風のクライアントソフトウェアがあり、それを使うことでファイルの同期も可能です。

tshannon / freehold — Bitbucket

AJAX File Browser Demo

Ajaxによるファイルブラウザです。UIはエクスプローラーライクになっています。ダブルクリックすると関連するアプリケーションで開きます。コンテクストメニューも実装されており、本格的なファイル管理が可能です。

AJAX File Browser Demo

ebidel/filer.js: A wrapper library for the HTML5 Filesystem API what reuses UNIX commands (cp, mv, ls) for its API.

アイコンとリスト表示がサポートされています。画像やHTMLであればプレビュー機能が実装されています。HTML5のFile APIを体験できるソフトウェアになっています。

ebidel/filer.js: A wrapper library for the HTML5 Filesystem API what reuses UNIX commands (cp, mv, ls) for its API.


フォルダやファイル操作を実装するのは大変ですが、ライブラリを使うことでUIを簡単に実現できます。後はAjaxなどでデータをサーバに送り、実際にそのようにファイルを動かせば良いでしょう。もちろんデータベースを仮想的にファイルシステム風に見せるのも良さそうです。

JavaScriptで画像を比較できるライブラリ

Pitaliumはスクリーンショットを比較することでデザインの乱れや予期せぬ表示になるのを発見できます。肝になるのは画像の比較になるでしょう。

今回はPitalium同様に画像比較を行うライブラリを紹介します。

jQuery Images Compare

二つの画像を重ねて表示し、スライダを使って表示範囲を変更できるライブラリです。色が変わっていたり、加工前/加工後の画像を並べて比較する際に利用できます。

sylvaincombes/jquery-images-compare: A jquery plugin for comparing two images

jQuery CompareWYW

jQuery CompareWYWも二つの画像を重ねて表示するタイプのライブラリです。jQueryプラグインなので利用できる場面が多いかと思います。この手のライブラリの肝としては、画像サイズが全く同じであるという点が挙げられます。

jQuery CompareWYW

CSS and jQuery Image Comparison Slider | CodyHouse

モバイルにも対応したスライダーです。スライダーのツマミが大きいためか、片方に寄せきることはできません。使い方に関する解説記事もあります。

CSS and jQuery Image Comparison Slider | CodyHouse

reg-cli

node.jsで動きます。二つの画像の差分となる画像を生成します。見た目では殆ど分からないような違いを発見するのに役立つでしょう。

reg-viz/reg-cli: 📷 Visual regression test tool.

Resemble.js

Webブラウザ上で二つの画像の比較ができます。どこが異なっているのか、差分となる画像が生成されるのですぐに分かるでしょう。

Huddle/Resemble.js: Image analysis and comparison

js-imagediff

二つの画像を比較して差分になる画像を生成します。違う部分だけを抽出したり、背景の透明部分を無視する、画像サイズの違う場合も比較できるといった特徴があります。

HumbleSoftware/js-imagediff: JavaScript / Canvas based image diff utility with Jasmine matchers for testing canvas.


一言で画像比較といっても様々なやり方があります。見いだしたい情報によって最適な比較方法があるでしょう。Pitaliumにおいても様々な比較を通じてスクリーンショットが異なる部分を抽出できます。

ぜひこれらのライブラリを使って最適な画像比較方法を用意してください。

Pitalium(hifiveリグレッションテストライブラリ) – hifive

Webで使えるカルーセルライブラリまとめ

画像の切り替え処理によく使われるのがカルーセルです。横並べにした画像を差し替えながら表示したり、ユーザのクリック操作で切り替えられるものもあります。スマートフォン対応のものはタッチ操作で動かせるようになっています。

今回はそんなカルーセルライブラリをまとめて紹介します。

左右のDOMが若干斜めになっているのが特徴的です。切り替わる際には斜めのままスライドして中央で水平な向きに変わるアニメーションとなっています。ここは好き嫌いが分かれそうです。レスポンシブ対応になっています。

Glide.js | Simple, responsive and fast jquery carousel slider

とてもシンプルなカルーセルです。imgタグを並べておいて、それをJavaScriptのイベントで差し替えます。スライドを動的に追加したり、削除もできるようになっています。依存ライブラリがないのが大きなポイントです。

Siema – Lightweight and simple carousel with no dependencies

横向きの切り替えだけでなく、縦にも切り替えられるようになっています。さらにスライドの切り替え時に縦横に動くだけでなく、フェードイン/アウトさせることもできます。ループする、しないなど細かく制御できます。

Unslider, the simplest carousel slider for jQuery

jCarousel – Riding carousels with jQuery

jQueryプラグインのカルーセルです。JavaScriptでのスライド切り替えだけでなく、CSS3を使うこともできます。コンテンツはあらかじめ用意する他、Ajaxで取得も可能です。デザインはレスポンシブです。

jCarousel – Riding carousels with jQuery

Swiper – Most Modern Mobile Touch Slider

モバイル対応が特徴となっていますが、スライドの切り替わるアニメーションにも注目して欲しいソフトウェアです。エフェクトが3Dで切り替わるのが格好良いです。前後のスライドは斜めになっていますが、中央へ移動する際のアニメーションも滑らかです。

Swiper – Most Modern Mobile Touch Slider

一つ一つ切り替える他、まとめて複数のスライドを切り替える機能もあります。さらに幅や高さが異なるスライドが混在する場合にも利用できます。中央にあるスライドだけ若干大きく表示することもできます。画像の遅延読み込みもできるなど、とても多機能なカルーセルです。

slick – the last carousel you’ll ever need

Smoothslides Demo

現在のスライドが若干動きながら表示されるのが効果的なカルーセルです。スライドよりも写真を表示するのに向いているでしょう。どのようにアニメーションするか(ズームや右への動きなど)指定できます。

Smoothslides Demo

Sly

横または縦方向のカルーセルが作れます。パララックスにも対応しており、スライドと背景の動きをずらしながら表示するという効果的な表現もできます。

Sly


カルーセルは製品の説明であったり、チュートリアルなど様々な場面で利用できます。ライブラリによって特徴が異なるので、それぞれ把握しておくとぴったり利用できる場面が見つかるでしょう。

ぜひ皆さんのプロジェクトでお役立てください。

Selenium IDEの代替を目指すソフトウェアまとめ

Seleniumがこれだけ使われているのはSelenium IDEの存在がとても大きかったと言えます。普通にブラウザを操作するだけでコードが生成でき、それを編集することで様々に値を変更したテストが実現できます。

そんなSelenium IDEは最新版のFirefoxではAPIの互換性がなく、動かなくなっています。そんな中、幾つかのソフトウェアが代替を目指して開発されています。

SideeX (An Extended Version of Selenium IDE)

最も有力と思われる代替ソフトウェアです。Firefoxの他、Google Chromeでも動作します。複数のテストを一つのウィンドウの中でまとめて管理できるようになっています。現在はテストコードの出力機能がないなど、まだ足りない機能も多いですが、開発が活発に行われています。

SideeX (An Extended Version of Selenium IDE)

Selenium Code Builder

Seleniumのテストコード(Ruby/Python)を出力できるレコーダーです。表示値の検証もできます。If/Whileといった構文を入れることもできますが、再生機能はないようです。

arakawamoriyuki/selenium-code-builder: chrome extension

UI Recorder

Node.jsベースになっており、実行するとGoogle Chromeが立ち上がります。そして、操作を行って終了するとmochaベースのテストコードが生成されます。操作中にJavaScriptを実行できるなど、カスタマイズ性は高いです。

UI Recorder | UI Recorder is a UI test case recorder like Selenium IDE.

Kantu Browser Automation

Google Chrome用の機能拡張です。操作を記録して再生できます。テストコードの出力はできませんが、JSON/XMLによるエクスポートに対応しています。JSONからテストを自動生成するのであればKantu Browser Automationがベースにできそうです。

Kantu Browser Automation – Chrome ウェブストア

Selenium IDE

元祖のSelenium IDEです。最新版のFirefoxでは動作しませんが、Firefox ESR版を使えば2018年06月26日までサポートされることになります。それまでにSideeXがSelenium IDEレベルの機能を実装してくれるのがベストでしょう。

Selenium IDE :: Firefox 向けアドオン


Selenium IDEがなくなったことで、類似ソフトウェアが続々と出てきています。まだSelenium IDEをまるっと置き換えることはできませんが、幾つかのニーズには応えられるレベルかと思います。ぜひ試してみてください。