hifive開発者ブログ

日本は世界でも珍しくiOSとAndroidが同じくらいのシェアになっています。また、企業の現場ではiPadが多数使われています。そのため、iOSのSafariにおけるAPI実装によって、本腰を入れてそのAPIを使った機能開発ができるかどうかが決まってきます。

iOS11がリリースされたことで、多数のAPIが追加されました。今回はそれらについて紹介します。

WebRTC

P2Pの通信技術であるWebRTCがiOS11にも実装されました。元々Androidにはありましたので、これでWebブラウザベースの動画チャットなどの実装が現実的になります。

H.264のハードウェアアクセラレーションなので動画の動きはとてもスムーズです。

WebRTC Home | WebRTC

Media Capture API

Webカメラやマイクへのアクセスができるようになりました。Videoタグの中に描けますので、Canvasの中に取り出したりするのも難しくないでしょう。その画像を分析すれば、QRコードリーダーなども実装できるはずです。

これに伴うものか分かりませんが、iPhoneにおいても動画が埋め込み表示のままできるようになっています。これにより、動画とテキストを合わせたコンテンツなども表現しやすくなっています。

Media Capture and Streams API (Media Streams) – Web API インターフェイス | MDN

WebAssembly

すべての実装ができている訳ではなさそうですが、WebAssemblyも実装されています。Rustなどで書いたコードをWebAssemblyに変換し、Webブラウザ上で実行できるようになっています。

今後、Webアプリケーションのニーズが伸びていく中で大事な機能になっていくことでしょう。

WebAssembly

WebCrypto API

MD5、SHA1、RSAなどの暗号化技術を提供するAPIです。Promiseオブジェクトになっており、非同期で結果が返ってきます。これまでも暗号化ライブラリは幾つかありましたが、標準で提供される点が大きいと言えるでしょう。

Web Crypto API – Web API インターフェイス | MDN

ドラッグ&ドロップAPI

筆者の環境では確認できなかったのですが、iOS11 Safariにおいてondragstartなどのイベントが使えるようになっているようです。本格的なWebアプリケーションを作っていく上で必要な機能なので、使いどころも多そうです。

WebKit DOM Programming Topics: Dragging and Dropping

もちろんiOS10以下で使っている環境もあるので、すべてのAPIがそのまますぐに使える訳ではありません。また、WebAssemblyのように実装がまだ完了していないものもあります。しかし、今後のWebアプリケーション開発時において必要となるAPIが実装されているのは間違いないでしょう。

Safari 11.0

Web APIを用いた開発が増えていく中でJSONフォーマットがとても良く用いられるようになっています。XMLほど冗長的ではありませんが、テキストでしかないので構造の確認がしづらいのが難点です。

そうした時に使えるのがJSONビューワーおよびエディタです。今回はデスクトップ、Web、CLIなど各種環境で使えるJSONビューワー/エディタを紹介します。

JSON-Splora

JSONファイルを指定して起動します。フィルタリングしたり、折りたたみもできます。Electronで作られているので、マルチプラットフォームで動作するのが利点です。

wellsjo/JSON-Splora: GUI for editing, visualizing, and manipulating JSON

jsonsmash

CLIツールですが、JSONをファイルシステムに見立てたかのように内容の閲覧できます。cat/cd/echo/ls/pwdといったコマンドを使ってブラウジングできるのが特徴です。

tedivm/jsonsmash: a shell for browsing json files

fmt-obj

JSONオブジェクトを見やすく整形してくれるCLIツールです。複雑な階層構造になっているJSONデータもfmt-objを通すことで見間違えたり、理解しづらさを解消できます。

queckezz/fmt-obj: Prettifies any javascript object in your console. Make it look awesome!

json.browse

JSONを貼り付けると開発者ツールの中でそのJSONを扱えるようにしてくれます。開発者ツールであれば自動補完なども使えますので、開発者にとって使い慣れたツール上で便利に扱えるでしょう。

json.browse

jd

ハイライト処理があり、インタラクティブにJSONを絞り込んでデータの編集を行えます。構造の理解はもちろん、データの編集においても役立つソフトウェアです。

tidwall/jd: Interactive JSON Editor

gron

JSONをコードに変換することで、grepしやすくしてくれます。gron自体はJSONの変換ツールでしかなく、その後のgrepは通常のLinuxなどで使われるgrepコマンドを利用します。

tomnomnom/gron: Make JSON greppable!

jo

CLIでJSONを生成できるソフトウェアです。配列を渡したり、オブジェクトを渡したりするとJSON形式に変換してくれます。JSONの検証を行ったりするのに便利です。

jpmens/jo: JSON output from a shell

WithSchemaEditor

JSONを見やすい構造に変換して閲覧、編集できるようにするソフトウェアです。JSONだけでなくYAMLにも対応しています。設定ファイルで使われるJSONの編集などに便利そうです。

Narazaka/WithSchemaEditor: JSON/YAML Editor with schemas

JSONMate

オープンソースのJSONエディタです。JSONの内容をツリービュー形式で確認できます。一部を折りたたんだり、広げられるので構造の確認がしやすくなっています。

JSONMate – JSON editor, inspector and beautifier

開発時のお供に一つあると、JSON構造を素早く確認したり、ミスを減らせるようになります。配列だったのを文字列と間違えてしまったり、構造のネストを間違える可能性は多々あります。JSONビューワーを使って開発時のミスを防ぎましょう。

JavaScriptは柔軟な言語仕様になっているので任意のオブジェクトをPrototypeで拡張できます。hifiveで同じような機能を提供するのがMixinになります。

Mixinを使うことで、継承関係にはないようなオブジェクト同士に同じ機能を追加できるようになります。

Mininの使い方

Mixinは h5.mixin.createMixin を使って作成します。

今回は適当なオブジェクトを作ります。このオブジェクト自体にはメソッドは特にありません。

そしてmixinを実行します。

これでtargetオブジェクトにメソッドが追加されました。

このようにMixinを使うことでオブジェクトの拡張が容易になります。すでにインスタンスが作られた後でも使えるので、特定のインスタンスにだけメソッドを追加することもできるでしょう。

今回のコードはJSFiddleで試せます。Mixinを使いこなすとコードが分かりやすくなりますので、ぜひ使いこなしてください。

JSDoc: Class: Mixin

ESLintはCLIツールですが、プログラミングエディタと組み合わせることでリアルタイムに問題箇所を指摘してくれるようになります。後でまとめて指摘されるよりも適宜チェックしてくれる方がスムーズに開発できるはずです。

そこで今回は人気のプログラミングエディタ、AtomとESLintを組み合わせた使い方について紹介します。

プラグインについて

Atomでは多数のプラグインを提供しています。その中でもESLintで使うのはAtomLinter/linter-eslint: ESLint plugin for Atom Linterになります。これをAtomのプラグインインストーラーからインストールします。

ESLintについて

このプラグインはESLintは含まれていません。そのため npm を使ってインストールする必要があります。グローバルにインストールする場合は次のようにコマンドを打ちます。

https://gist.github.com/goofmint/19ef24c514edbebadb1102d2e504818a

プロジェクト以下でだけ使う場合には次のようになるでしょう。

https://gist.github.com/goofmint/85654f507bb376f67e46e6655c6c0f36

Linter ESLintの設定

多数の設定がありますので、今回は幾つか設定を紹介します。

Disable when no ESLint config is found (in package.json or .eslintrc)
設定が見つからない時にはESLintのチェックを行わなくする設定です。通常は無効にしておいて良いかと思います。
Fix errors on save
保存時に自動的にエラーを修正します。有効で良いでしょう。
Use global ESLint installation
システム全体にインストールしたESLintを使うかどうかです。好みに合わせて選択しましょう。

ファイルを開く

後は .eslintrc を配置したJavaScriptプロジェクトを開くと自動的にESLintによるチェックが行われます。赤い印があるところがチェックに引っかかった部分になります。

マウスオーバーで指摘事項が表示されます。

Fix errors on saveが有効になっていると保存時、自動的にエラーを修正してくれます（修正できないエラーもあります）。

基本的には指摘事項に合わせて修正を行っていくだけです。指摘のメッセージの最後にはリンクがあり、それをクリックするとより詳細にエラーメッセージを学べるようになっています。

JavaScriptのコードをより高品質にしていくためにもLintツールの力を借りるのは良いことです。Atomを使っている方はぜひLinter ESLintを使ってみましょう。

ES7ではPromise処理を簡素化できるawait/asyncが追加されています。これによってコールバック地獄からPromiseによって抜け出せたとの同様に、Promiseによる then/catch 地獄から抜け出せるようになります。

サンプルコード

例えば処理を2秒間遅らせて、その結果を取得すると言った処理を考えてみます。ES5で書くと次のようになるでしょう。

さらにdelayを2回呼び出すと次のようになります。ネストが一つ深くなります。

Promiseの場合

Promiseを使った場合は次のようになります。ネストが深くならず、thenを使ったメソッドチェーンが可能になります。

awaitを使った場合

さらにawaitを使った場合です。ネストが一段減りますが、処理を行う関数を async で囲む必要があるので、最低一つの関数の中で処理する必要があります。Promiseだけの場合は必ずしもmain関数は必要ではありません。

awaitのコードをES5に変換する

ではこのawaitのコードをBabelを使ってES2015のコードに変換した場合、どのようなコードになるのでしょうか。以下のコードはそのままnodeで動くわけではありませんが、次のようなコードが生成されます。

await的な機能を実現するために while ループを続けているのが分かります。ちなみにこれは delay を一回しか使っていない場合です。

delay を2回実行すると次のようになります。 context.next/context.prevを使ってステータスを管理することで、ネストが深くなるのを防いでいます。ですが、switchで使っている数字は非同期処理が追加されるごとに数字が増えていきます。Babelの生成したコードを読み取るのは大変になっていくことでしょう。

なお、Promiseの場合はrejectを使いますが、awaitを使った場合はtry/catchでエラー処理を行います。

非同期処理はJavaScriptに付きもので、一番厄介な存在でしょう。しかしES7のawaitによってネストがなくなったり、変数を同じスコープで扱えるようになります。現在、デスクトップやスマートフォンのほとんどのブラウザでサポートされていますので（IE系は未サポート）、HTML5を活用する際にはぜひ使ってみてください。

SVGはドロー系描画機能として今後、ますます高画素化の進むディスプレイに対するリソースの肥大化問題の解決策として注目が集まっていくでしょう。PNGやJPEG画像ではキャンバスサイズが大きくなるにつれてファイルサイズが肥大化しますが、SVGはベクターデータなのでファイルサイズは変わりません。

しかしSVGの魅力は静的な表示を行うだけに限りません。JavaScriptで内容を変えたり、動かしたりできます。今回はそうしたSVGアニメーションを助ける各種ライブラリを紹介します。

flubber

特定の形から別な形へ自然にモーフィングできるライブラリです。一つから一つの場合、一つから複数（またはその逆）とアニメーションが可能です。

veltman/flubber: Tools for smoother shape animations.

Shape Shifter

二つのSVGファイルを指定して、アニメーションを生成してくれるライブラリです。Web上でファイルを指定できるので、プレビューを見ながら細かく調整ができます。

Shape Shifter

zPath.js

一つのSVGファイルを描画するアニメーションを生成します。描画の方法についても数パターン用意されています。

ZetCoby/zPath.js: A jquery plugin that will animate/draw SVG

mo · js

SVGベースのモーションアニメーションを生成するライブラリです。派手なアニメーションもできますが、クリック時に光らせたり跳ねるような、ちょっとしたアニメーションも可能です。

mo · js – Motion Graphics For The Web

Primitive

指定した写真を幾何学模様で描くソフトウェアです。その描画されていく過程をSVGファイルで保存できます。

fogleman/primitive: Reproducing images with geometric primitives.

Yarrow

矢印をアニメーションで表示したり、ツールチップを表示したりします。グラフなどと連携することによって見た目にインパクトのあるプレゼンテーションが実現できます。

Yarrow — svg animated arrow pointer and tooltip

jQuery DrawSVG

jQueryのプラグインとして提供されています。SVGの内容をアニメーションしながら描画するライブラリです。

jQuery DrawSVG

Animate Plus

CSS3またはSVGでアニメーションを実現します。イージングが用意されているので、細かい動きを実装することなくアニメーションが実現できます。

bendc/animateplus: CSS and SVG animation library

SVG Morpheus

指定したアイコンが別なアイコンに変化するアニメーションを生成します。アイコンとイージング、遅延、回転などの設定だけなのですぐに使いこなせるでしょう。

alexk111/SVG-Morpheus: JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design’s Delightful Details transitions. (THIS PROJECT IS NOT MAINTAINED ANYMORE)

vivus

SVGファイルを解析し、その描画をアニメーションしながら順番に行っていきます。

maxwellito/vivus: JavaScript library to make drawing animation on SVG

Walkway

基本的に一筆書きの容量で既存のSVGファイルからアニメーションを生成します。

ConnorAtherton/walkway: An easy way to animate SVG elements.

Letterbolt

SVGで文字を描くライブラリです。スクロールなどのイベントに合わせてスムーズに文字が描かれます。

buseca/letterbolt

Loading…

SVGでローディング表示を行います。ドットやラジオなど、8種類のアニメーションが用意されています。

jxnblk/loading: This could take a while

Animated SVG Icons

20種類を超えるアニメーションするSVGアイコンを提供しています。Snap.svgというライブラリを用いています。

codrops/AnimatedSVGIcons: Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.

Lazy Line Painter

一筆書きでアニメーションするライブラリです。SVGファイルは先頭と終端がなければならず、後はファイルを指定するだけでアニメーションしながら描画していきます。jQuery/Raphaëlが必要です。

camoconnell/lazy-line-painter: A jQuery plugin for path animation using the CSS –

SVGはマウスイベントなどが利用でき、形や色を変えたりできます。ユーザイベントに反応することでユーザビリティを高めたり、注目して欲しい情報を目立たせる効果が期待できるでしょう。

SVGはHTML5になって標準化された画像フォーマットです。バイナリではなくベクターなので、拡大縮小に強いのが特徴です。しかしXMLベースなので手書きで作るのは難しく、専用のソフトウェアを使ってSVG出力するのが一般的です。

今回はそうした専用ソフトウェアを用意することなくSVGを作成できる、WebブラウザベースのSVGエディタを紹介します。

Mondrian

簡単なドロー機能を備えています。出力はPNGまたはSVGで可能です。レイヤー機能はありませんが、色や線の太さを変えるといった操作は可能です。テキストも利用できます。生成したコンテンツをWebサイトに埋め込むためのコードを出力させる機能もあります。

artursapek/mondrian: Web-based vector graphics editor

Curve App

Webベースではありませんが、Electron向けなのでHTML5/JavaScript/CSSで作られています。円や多角形、ベジュ曲線を使ったドローにも対応しています。テキストは用意されていませんが、ごく簡単なドローであれば十分でしょう。

benogle/curve-app: Vector drawing desktop application

SVG-Floorplan-Editor

HTML5製のフロアマップエディタです。ドアを追加したり、壁を描けるようになっています。フロアマップに特化しているので会社の図面を作ったりするのが簡単です。

oodavid/SVG-Floorplan-Editor: Simple SVG Floorplan Editor for a client

jsvectoreditor

本格的に使えるSVGエディタです。直線、四角、円、曲線、文字、画像、連続線、テキストなどが用意されています。もちろん配置したオブジェクトの移動や回転もできます。保存機能はなく、XML（SVG）が表示されます。これをコピーしておけばまた再現も可能です。

Google Code Archive – Long-term storage for Google Code Project Hosting.

SVG-edit

ツールバーの並びなどがローカルアプリケーション風になっており、使い勝手の良いSVGエディタです。文字や円、四角、直線、ベジュ曲線、自由線が描けます。描画後、オブジェクトの移動や色の変更などもサポートされています。レイヤーにも対応しています。

SVG-Edit/svgedit: Powerful SVG-Editor on your browser

Webブラウザベースなので、作成したSVGがそのまま表示できると考えて良いでしょう。機能はエディタによって異なるので、目的にあったものを選ぶ必要があります。

画面の高画質化が進むのに合わせて、画像などのバイナリではサイズの肥大化が大きな問題になっています。SVGは拡大表示しても綺麗なまま、ファイルも1ファイルで済みますので今後SVGがメインフォーマットとして活用されていくのではないでしょうか。

HTML5になって進化しきった訳でも、進化しなくなる訳でもありません。新しい仕様がさらに進められています。それらはHTML5.1として策定されています。

今回はそのHTML5.1の中の入力チェック機能、HTMLInputElement.reportValidityについて紹介します。

HTMLInputElement.reportValidityとは？

仕様はHTMLFormElement.reportValidity() – Web APIs | MDNにまとめられています。まだ実装されているブラウザはGoogle ChromeやFirefoxくらいになります。HTML5で新しく追加された入力属性を使って入力値の検証を行えるAPIになります。

主な入力チェック

よく使われるものとしては以下があります。

必須チェック

required 属性で指定します。

パターン

正規表現を使って入力パターンを指定します。この場合、title属性も使ってエラー時のメッセージを指定するのが良いようです。以下はごく簡単な電話番号チェック（国際電話には対応していません）です。

確認入力

メールアドレスやパスワードなど、確認入力を行う場合のチェックは以下のように実装します。まずHTMLにはメールアドレス入力欄が二つあったとします。

そして確認入力のメールアドレスに対する入力イベントを使って検証を行います。エラーになる場合は該当要素の setCustomValidity メソッドに対してメッセージを適用します。

入力チェック

入力チェックは任意のタイミング（フォーカスが外れた時、フォーム送信時など）で可能ですが、例えばフォーム送信時であれば次のように実装します。

elem.reportValidity() が true（エラーがない）場合はフォーム送信されます。エラーがあれば送信は行われず、処理が終了します。

イベント

エラーがあった場合には該当フォームの invalid イベントが呼ばれます。

実装デモをJSFiddleにアップしてあります。実際のコード、操作について確認してください。

まだ先進的なAPIだけに、EdgeやSafariでは実装されていません。とは言え、今後サポートするブラウザが増えてくれば利用できる場面が多そうなAPIです。

HTMLFormElement.reportValidity() – Web APIs | MDN

HTML5 APIで追加されつつも、あまり使われている雰囲気がないのがWeb Workerではないでしょうか。使い方はそれほど難しい訳ではないですが、別途JavaScriptファイルを用意したりするのが面倒に感じられるのかも知れません。JavaScriptではできない、並列処理を行うためには必須のAPIです。

そこで手軽に使えるようにインラインのちょっとしたコードをWeb Worker化してみたいと思います。

サンプルのコード

例えば次のようなコードをWeb Worker化します。 e はメインスレッドから渡されるイベントで、 e.data でメッセージを受け取れます。メインスレッドからは onmessage が呼ばれますので、処理を行った上で postMessage で返せばOKです。

このコードを文字列にします。

Blob化する

次にこの文字列をBlobにします。

ワーカーにする

後はこのblobURLをワーカーとして指定するだけです。

これで準備完了です。

実行する

後はメインスレッドからpostMessageを使ってWeb Workerを呼び出します。

逆にワーカー側からメッセージが来た時にはonmessageが呼ばれます。

このようにメインのJavaScriptファイルの中からWeb Workerを動的に作れるなら使い道があるかも知れません。なおWeb WorkerはDOM操作やwindow/documentオブジェクトへのアクセスができないので注意してください。ネットワークへのアクセスはできるので、バックグラウンドで通信を行うと言った時には良さそうです。

デモをJSFiddleにアップしてありますので参考にしてください。

ウェブワーカーの基本 – HTML5 Rocks

フォーム入力というのはユーザにとってストレスの大きい仕組みです。やたらと項目が多かったり、選択肢が多数あると途中で適当な入力になってしまうかも知れません。それは業務システムでも言えます。

そこでなるべくユーザストレスを減らせるようなライブラリを紹介します。これらを使えばフォーム入力の手間や煩雑さが改善されるはずです。

floatlabels.js

スマートフォンでは入力項目のところにあらかじめ何を入力すれば良いかプレースホルダーという仕組みで文字が表示されていますが、ユーザが入力を開始すると消えてしまって不便です。floatlabels.jsではプレースホルダーを別な場所にアニメーションしながら移動してくれるので忘れてしまったりすることなく入力が続けられるようになります。

probots-io/floatlabels.js: Follows the famous Float Label Pattern. Built on jQuery.

fontIconPicker

Web Fontを使った入力補完ライブラリです。絵文字入力とはまた違った使い勝手になります。ユーザにアイコンを選択して欲しい時に使うと便利そうです。

micc83/fontIconPicker: jQuery fontIconPicker v2 is a small (3.22kb gzipped) jQuery plugin which allows you to include a simple icon picker with search and pagination inside your administration forms.

paperstencil

PDF並の細かな表示にこだわったフォームが生成できます。作成ツールも用意されていますので、文章を書いたり入力欄を作ったりするのも簡単にできます。表を使った段組にも対応しています。

bitstat/paperstencil: A cross between word processor and web form. Paperstencil helps enterprises to roll-out data collection solutions, contracts, signatures, payment related solutions of their business needs in few minutes.

Garlic.js

入力内容をlocalStorageに保存しておき、再読込時に入力を再現してくれるライブラリです。入力項目が多い場合など、誤った削除でせっかくの入力内容がすべてなくなってしまったりするのを防げます。

guillaumepotier/Garlic.js: Automatically persist your forms’ text and select field values locally, until the form is submitted.

formBuilder

ドラッグ&ドロップでフォームを作成できるライブラリです。生成した内容をデータベースなどに保存しておくことで、ユーザが自分自身で自由にフォームを作れるようになります。お問い合わせフォームのような汎用的なフォームで、ユーザがカスタマイズしたいといった時に使えます。

kevinchappell/formBuilder: A jQuery plugin for drag and drop form creation

Multi-Step-Form-Js

フォーム入力を複数の段階に分けたマルチステップにしてくれるライブラリです。本当のフォームは一つしかありませんので、サーバサイドに送られるのはすべて入力した後になります。入力項目が多い場合に使えます。

mgildea/Multi-Step-Form-Js: Multi Step Form with jQuery validation

formbase

フォームの表示をスタイルシートだけで見栄えのいいものにデザインしてくれます。HTMLは標準のままなので、作業不要です。単純なHTMLでデザインが当たっていない状態であれば、formbaseを使って少しでも使い勝手を向上すると良いでしょう。

electerious/formbase: Better default styles for common input elements.

見た目を整えるだけでもフォーム入力はしやすくなります。さらにJavaScriptによって改善できるポイントは多いでしょう。これらのライブラリを使いこなせばユーザにとって使いやすいフォームが簡単に実現できるはずです。

フォーム入力は必要とは言え、ユーザにとってストレスの大きい仕組みです。特にスマートフォンやタブレットで多くの入力項目を埋めるのは苦労が伴うでしょう。それだけにサーバに送って入力エラーがあると、ユーザは修正するのが嫌になってしまうかも知れません。

そこで使ってみたいのが今回紹介するクライアントサイドでの入力チェックライブラリです。リアルタイムに入力チェックを行ったり、そのメンテナンスを簡単にしてくれるライブラリが多数あります。

json-editor

JSONスキーマからフォームを生成します。JSONスキーマでは入力タイプであったり、入力できる文字列長なども指定できます。それらの設定に基づいて自動的にフォームを生成し、入力チェックも行ってくれます。

jdorn/json-editor: JSON Schema Based Editor

Winterfell

独自のJSONフォーマットからフォームを生成し、入力チェックも行うReact用のライブラリになります。独自のJSON記法を覚える必要がありますが、ステップ踏んで進むようなフォームも生成できるようです。

andrewhathaway/Winterfell: Generate complex, validated and extendable JSON-based forms in React.

formAnimation

バリデーションでエラーがあった際にフォーム全体を揺らすライブラリです。バリデーション自体はjQuery Validateを使っています。

nnluukhtn/formAnimation: Form Animation: when form validation <3 animate.css

tlx-editor

入力チェックを兼ね備えたWebコンポーネントライブラリです。一行テキスト、テキストエリア、ラジオ、チェックボックス、セレクト、スターレーティングなど幅広く対応しています。

anywhichway/tlx-editor: A single HTML component supporting all input types, select, textarea, radio groups, and star ratings.

Hyperform

HTML5のバリデーションAPIの完全実装を目指して作られているライブラリです。IE9についても利用できるようになっています。将来的にHTML5のバリデーションが標準化された後もそのまま使い続けられそうです。

hyperform/hyperform: Capture form validation back from the browser

jq-idealforms

基本的なバリデーションに加えて日付ピッカーやステップ、Ajaxによるサーバ側とのデータ検証など幅広い入力チェックに対応しています。ブラウザもIE9以降で利用できます。

elclanrs/jq-idealforms: The ultimate framework for building and validating responsive HTML5 forms.

jquery.formance

入力フォーマット（クレジットカードや電話番号など）を指定することで、入力チェックと必要に応じてハイフン（-）などを自動入力してくれます。

omarshammas/jquery.formance: A jQuery library for formatting and validating form fields, based on Stripe’s jQuery.payment library.

Creditly

クレジットカード番号の入力チェックに特化したライブラリです。カード会社を判別して、それによってセキュリティコードの桁数を変えたり、チェックデジットの検証も行います。

wangjohn/creditly: An intuitive credit card form

入力チェックはサーバ側でも行う必要があるため、クライアントに特化しすぎているとサーバ側でのエラーチェックと差異が発生したり、メンテナンスが煩雑になります。JSONスキーマのような設定ファイルを使うことで、サーバとクライアント両方で共通したバリデーションが可能になるでしょう。

HTML5.1が勧告され、すでにW3Cの活動は5.2策定に向けて動き始めています。コンマ1の違いなので、大幅に変わるわけではありませんが、現状に合わせて多少の変更が行われるようです。

実際の勧告案はHTML 5.2にて確認できます（最終アップデートは2017年12月14日）。具体的なHTML5.1との違いは HTML 5.2: Changes にて確認できますが、今回は簡単にまとめてみました。以下の内容はあくまでも執筆時点のものであり、変わる可能性もあります。

menuタグのtoolbarの廃止

現状、Webブラウザでサポートしているものがないようで、このままいくとHTML5.2ではなくなるようです。

dialog タグの廃止

こちらも実装されているブラウザがない（Operaだけ実装されている模様）ようで、このまま進むと廃止対象になります。

複数のAPIの廃止

以下のAPIが廃止されます。

registerContentHandler
Webサイトを特定のMIMEタイプに関連付ける。
isContentHandlerRegistered
特定のMIMEタイプに関連づけられているかどうか判定する。
isProtocolHandlerRegistered
URLスキームとURLを引数として、そのハンドラー状態を返す。

input type=datetime 、 inputmode の廃止

フォーム入力系としてはこの二つがなくなる可能性があります。

keygenタグの廃止

Web Crypto APIの登場に伴ってGoogle Chromeでは削除されています。他のブラウザではまだ使えるようですが、他も追従していくものと思われます。

基本的には以上のようにタグや要素の廃止が多いようです。Webブラウザで元々実装されていなかったものもあるので、仕様を最適化していると思われます。動作ががらっと変わることはないでしょうが、今後のWeb標準の変化を知るためにもチェックしておきましょう。

HTML 5.2

3月20日にDeviceConnectをhifiveから使うハンズオンを開催しました。

hifive x DeviceConnectによるWoT体験ハンズオン！ – connpass

DeviceConnectというのはスマートフォンアプリで、スマートフォン内にHTTPサーバを立てます。そのHTTPサーバを使って、スマートフォンに繋がっている各種デバイス（THETA、Pebble、Hueなど）をWeb API経由で操作できる技術になります。

Device Connectとは？ – Qiita

今回はデスクトップ側のHTMLファイルからDeviceConnectに接続し、スマートフォンの操作（バイブレーションやライトなど）を行うハンズオンを開催しました。資料はオンラインで公開しています。

hifivemania/deviceconnect-handson

DeviceConnectを使うためにはローカルネットワークが使えないといけないため、ハンズオン会場でルータを設置する必要がありました。また、本来であればデバイスを操作すると楽しいのですが、全員がHueなどを持っている訳ではないので、今回はスマートフォンの機能を操作するだけに留めています。DeviceConnectを知った上で、自分の持っているデバイスを操作してみて欲しいです。

今回のハンズオンではhifiveのコントローラ、並びにロジックを体験してもらいました。ロジックを使うことで非同期処理を分かりやすく、再利用性高く実装できます。hifiveには他にもたくさんの機能がありますので、ぜひ使ってみてください。

約10名の方に参加いただき、皆さんにhifiveはもちろん、DeviceConnectを使ったWoTの実現方法について学んでもらうことができました。hifiveではこれからもハンズオンを開催していきますので、ぜひご参加ください。

hifive – connpass

スマートフォンなど画面が小さい場合、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インチくらいの画面サイズであまり大きなヘッダーは却って邪魔になってしまう可能性があります。小さくユーザビリティを損なわないライブラリを選ぶか、二段階くらいのサイズ変化に対応しているものを選ぶと良いでしょう。

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にて試せます。

https://glitch.com/embed/#!/embed/exclusive-yard?path=script.js

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

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

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

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

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

ページ遷移の処理

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

ページの表示

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

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

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

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

そんな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.addEventListener の init イベントになります。引数の event.target でどのページが読み込まれたか分かりますので、そのIDによって初期化するコントローラを分けています。

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

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

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

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

Bower
hifive
Onsen UI
jQuery

インストール

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

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

index.htmlの作成

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

Onsen UIの記述

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にアップロードしてあります。実装時の参考にしてください。

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

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

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をうまく使えば多数のシステムからまとめてデータを収集して表示できるようになるでしょう。

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のように別なボックスに振り分けるのも直感的になります。使いこなすのは難しいですが、今回紹介したライブラリを使えば大幅に工数が削減されるはずです。