UIUXをやるならデザイナーも知っておくべき!アラートやタグ選択など、Webアプリ系開発で使えそうなJS&CSSライブラリ

こんにちはナガタです。

今日は少々趣向を変えて、Webアプリ系で使えそうなライブラリのご紹介です。
ユニトピの読者にはバリバリのフロントエンドの方もいらっしゃるのですが、コーディング専門・またデザイン専門の方も少なくありません。システムのプログラミングは別の人とはいっても「そういうのがあるんだ」というのは是非知っておいてほしいですし、アプリのUI・UXをされるデザイナーさんであれば実装方法は知らずとも、UXの知識として必須だと思います。

それではいきましょう!
あぁ、そういうのあるよね。という基本的なのを揃えました。

overhang.js

overhang.js Demo

こちらはディスプレイ通知(上部)できるライブラリです。簡単な通知はもちろんのこと、成功メッセージからアラート、またボタンを押さないと消えないものなんかも設定できます。

Screen Shot 2016-08-23 at 15.08.02

特徴的なのはPrompt Alert形式もあることでしょうか。入力を受けることもできます。
もちろんコールバック等用意されているため、その入力値を使ってごにょごにょすることも簡単そうです。

Screen Shot 2016-08-23 at 15.07.45

Choices.js

Choices

複数入力する項目にバッチリの選択ライブラリです。各種サービスでは、よくタグの指定部分で使われているようなやつです。メールソフトによっては、宛先で使われているものも見かけますね。

Screen Shot 2016-08-23 at 15.05.29

選択は文字入力だけでなく候補を出すこともできるので、なかなか使いやすいです。

Screen Shot 2016-08-23 at 15.07.06

Flatpicker

flatpickr – lightweight datetimepicker & calendar

軽く動くDateTimePickerです。
data形式のinputタグで動くもので、文字入力ではなくポップアップでカレンダーが開き選択できます。

Screen Shot 2016-08-23 at 15.04.20

変に装飾がないので非常に使いやすいですよね。

Push.js

Push.js

Facebookなどで利用されているので、実際体験したことがあるかたも多いかもしれません。ブラウザで通知するだけでなく、デスクトップ通知をするJSライブラリです。

Screen Shot 2016-08-23 at 15.04.39

FOR EVERY BROWSERと表記がありますが、実際には以下です。

  • “Every browser” being Firefox 22+, Chrome 5+, Safari 6+, Opera 25+, Android Browser 4.4+, Blackberry Browser 10+, Opera Mobile 37+, Firefox Android 47+, and Samsung Internet. Trying to get IE included on the list 🙂

Offline.js

Offline.js – Handle your users losing their internet connection like a pro

Offline.jsはユーザーの接続状況に応じて「Online」「Offline」と表示してくれるライブラリです。たまにありますよね「インターネット接続がありません」って出てくるサービス。あぁいうやつです。

Screen Shot 2016-08-23 at 15.00.49

Your device lost its internet connection.
Attempting to reconnect…
Your device is connected to the internet.

という感じでバナーであったり、下部からひょこっと出たりして知らせてくれます。

まとめ

いかがでしたか?
今回はデモサイトも各サイトあるので実装はノータッチでご紹介だけ致しました。
なかなかエンジニア、コーダー、デザイナーと分かれていたスキルセットもUI・UXに注目が集まる今日、どの立場の方にもウォッチしたい情報です。また近々まとめられればと思います!

フォローして続編をチェック

@universionsをフォロー