最近IoTが話題になっています。マイコンデバイスと言うと、C言語や専用のプログラミング言語で書く必要があるように感じますが、最近ではJavaScriptでも書けるようになっています。そこで今回はIoT用に作られたJavaScriptライブラリを紹介します。
IoT.js

サムスンが開発しているライブラリで、これと合わせたJerryScriptというJavaScriptエンジンも提供されています。特にJerryScriptは64KBのRAM上でも動作するくらい軽量な作りになっており、組み込み系にJavaScriptを活かせるエンジンとなっています。IoT.jsはnode.jsと後方互換性があります。
deviceJS

deviceJSはIoTにおけるjQuery的位置づけを目指しています。他のデバイスを特定する、イベントフックなどが手軽に実装できるようになっています。x86とARM両方に対応し、Raspberry Pi、Cubieboard、Beagle boardsといったデバイス上で動作します。
Cylon.js

Cylon.jsはARDrone、Arduino、Intel Edison、Leap Motion、Pebble、Hue、Raspberry Pi、Rapiroなど多くのデバイス、ガジェットに対応したJavaScriptライブラリです。Cylon.jsを使うことで多くのデバイスと接続し、簡単に扱うことができます。
IoT Device SDK For JavaScript

AWSがリリースしているライブラリで、MQTTを扱うためのラッパーとなっています。また、Thing Shadowsを使ってAWS上でIoTデバイスの状態を管理するのにも使えます。
Smart.js

Smart.jsはcesanta.comと接続するために作られたJavaScriptライブラリのようです。デバイスの状態を発信したり、MQTTやWebSocket、HTTPを使って通信できるようになっています。
DeviceConnect-JS
DeviceConnect-JSはスマートフォンを仮想サーバとするライブラリで、スマートフォンから各種IoTデバイスに接続できるようになっています。Chromecast/Hue/IRKit/Pebble/Thetaなどと接続ができます。
mraa
mraaはIntel Edison/Raspberry Pi上で動作し、入出力系を扱うライブラリです。JavaScriptの他、C++/Java/Pythonが提供されています。アナログやデジタル入力が手軽に扱えるようになります。
JavaScriptはWebブラウザを基本としてサーバサイドでも動作するようになり、さらにマイコンのような小さなデバイスでも活躍するようになっています。JavaScriptを習得することで多くの環境で実行できるようになっていますので、ぜひHTML5ともどもJavaScriptを活用してください。
ブラウザベースでJavascriptのプログラミングができるエディタをまとめて紹介します。何かと話題のES6の対応状況や、コード補完、シンタックスハイライトなどもチェックしてます。
Codiad

Codiadは、ダウンロードしてオンプレミスで利用出来るWebベースのIDEです。PHPで作られていて、データベースも不要ですので導入にあたっての敷居は低いでしょう。高速な開発をサポートする、シンプルなエディタを目指しているとあります。デモで実際に操作できますので、本格的な利用を前に確認して見てはいかがでしょうか。
主な機能
- 40を超える言語のサポート
- シンタックスハイライト
- コード補完
- 複数ユーザーのサポート
- 編集画面の分割
- リアルタイムの共同編集
ES6対応状況
ES6にも対応していて、シンタックスハイライトやコード補完も可能でした。
Codiad Web Based IDE by Fluidbyte
クラウド環境の高機能IDE Cloud9

その名の通り、クラウド上で利用できる高機能IDEです。開発環境も豊富で、例えばnode.js/HTML5/PHPなどに対応しており、それぞれ実行環境も備えています。各実行環境は、プロジェクトをオンラインで確認できますので、Cloud9だけあれば殆どの作業が完了するでしょう。
主な機能
- シンタックスハイライト、コード補完など
- デバッガー
- ターミナル機能
- 編集画面の分割
- VIM、Emacs、Sublimeモードのキーバインディング
- イメージエディタ機能
- 30を超えるテーマ
ES6対応状況
ES6にも対応していてシンタックスハイライト、コード補完も可能でした。
Cloud9 – Your development environment, in the cloud
高機能なJavaScript製エディタ Ace

ブラウザ上でソースコードを表示、編集可能なJavaScript製のテキストエディタです。前出のCloud9やGitHubでも利用されています。
主な機能
- シンタックスハイライトのサポート
- 20以上のテーマ
- VIM、Emacsモードや、カスタマイズ可能なキーバインディング
- リアルタイムの構文チェッカー
- コード補完
多数のサービスに利用されているだけあって非常に高機能でかつ使いやすいライブラリとなっています。Web上でのコード表示だけでも利用シーンは多いのではないでしょうか。
ES6対応状況
ES6にもある程度対応していて、シンタックスハイライトやコード補完も可能でした。
Ace – The High Performance Code Editor for the Web
Eclipse製のJavaScriptエディタ Orion

Eclipse Foundationが手がけるJavaScript IDEです。Cloudでの利用と、オンプレミス用にダウンロードして構築が可能です。
主な機能
- シンタックスハイライトのサポート
- GIT連携
- キーバインディングはデフォルトの他、VIM、Emacsをサポート
- リアルタイムの構文チェッカー
- コード補完
UIも非常に考えられています。Git連携も優れていますので、Gitを使ってチーム作業を行っている場合は作業効率が良くなるクラウド型 IDEとなるのではないでしょうか。
ES6対応状況
ES6のシンタックスハイライトやコード補完には対応されていませんでした。
Orion – Open Source Web and Cloud Development Environment
まとめ
シンプルさが売りのものや、超高機能なエディタまでクラウド環境でのIDEの進化は成熟期をむかえていると言えそうです。手元に開発環境がない場合の最終手段として、ご紹介したIDEを予めセットアップして、開発の伏線を張っておくこともプロジェクト成功の近道ではないでしょうか。
Webアプリケーションを開発していてよくあるのがボタンやリンクを押しても何もイベントが起こらないといった問題です。これは特に動的に生成、描画したボタンやイベントの場合に起こります。
この時はまず、DOMのイベントリスナーをチェックしてイベントリスナー設定されているかどうか確認します。
Google Chromeの場合

Chromeの場合、Elementsタブの右側にEvent Listenersという項目が用意されています。ここでは画面中に設定されているイベントが一覧表示されます。
Firefox Developer Edisonの場合

Firefoxの場合はDOM表示の中にevという小さなアイコンが表示されます。これがあるDOMがイベントリスナーが設定されているものになります。

Safariの場合

Safariは要素タブの右側にイベントリスナーが一覧表示されています。ただし設定できるすべてのイベント名が出ているので、実際にイベントリスナーが設定されているかどうかは各項目を開いて確認する必要があります。
IEの場合

IEは該当のDOMをDOM Explorerで表示した時にイベント設定で確認ができます。具体的なコードまで追いかけることはできないようです。
イベントの確認としてはGoogle、Firefoxの画面中にあるイベントリスナーだけを素早く確認できるのが便利そうです。これを使って、まずはコーディングした通りにイベントリスナーが追加されているかどうかを確認しましょう。
イベント設定されている場合とされていない場合を知っておけば、デバッグ時に正しく判断できるようになります。jQueryなどを使っている場合はブラウザごとの差異を吸収して手軽にイベント設定できますが、それ以外のライブラリを使っている場合は特にチェックが欠かせません。
※ Google Chrome/Chromium限定です
Google ChromeのDevToolsにはWorkspaceという機能が備わっています。フォルダを指定してDevTools上に登録し、編集できるようにする機能です。
使い方は Sources タブで Add Folder to Workspaceを選択します。

ディレクトリへのアクセス権限が求められますので、許可します。

フォルダを読み込んだら、さらにファイルを選択して Map to Network Resource を選択します。

そして現在開いているURLと関連づけます。

これでSourcesタブの中からWorkspaceに登録し、ネットワークアクセスしているファイルは一覧から消えます。なお登録後は一度リスタートする必要があります。

後は通常のエディタのようにファイルを編集して保存ができます。

ファイルのネットワーク読み込みや実行時間にジャンプすることもできます。マッピングされているからこそですね。

編集できるファイルはHTML/JavaScript/スタイルシートファイルなどになります。Workspaceが手に馴染んだ方であれば、開発からテスト、デバッグまですべてGoogle Chrome上で済んでしまいます。
主な機能追加について紹介します。
Data Query
データのフィルタリングを行うのに用います。例えば categoryにbook、nameにHTML5を含み、priceが3000未満のアイテムを検索すると言った具合です。
SQLのような演算子を使って条件を指定できます。
Res
リソースファイルの読み込みを処理します。ejs/JavaScript/CSSファイルが対象です。
Scene
一つの画面上で遷移を行う「シーン」を管理するコントローラーです。
FormController
フォームのバリデーションを行うコントローラです。下記Validationライブラリを使います。
Validation
バリデーションを行うオブジェクトです。エラー時の表示を行うスタイルシートとセットで使います。
各機能については今後詳しく紹介していきます!
古いIEのサポートが停止されたため、できることならばIEを刷新したいところですが実際にはそうそう簡単に移行は進んでいません。未だにIE8以降から対応を願われる案件も多いようです。
そこで今回は企業においてレガシーなIEを捨てきれない理由をリストアップしてみました。
ハードウェア問題
ブラウザの前に最新版に変えなければいけないのはOSです。今なおWindows XPが使われている企業も存在します。そのマシンに最新版のOSに差し替えたとしても、メモリやCPUが貧弱でまともに動かないでしょう。そうなるとOSの入れ替えコストだけでなく、ハードウェアの購入費用まで発生します。人数の多い企業では大きなコスト負担になってしまうことでしょう。
また、ハードウェア問題はオフショアにおいても起こりえます。東南アジアをはじめとする経済が大きくない地域では最新のハードウェアを用意するのは困難です。そのため、日本では型落ちになっているようなハードウェアを使っている場合、OSをバージョンアップできないことがあります。
デバイス問題
特殊なデバイスをつなげて使わなければならない場合もあります。金融系、入退室管理、取引先との通信回線をつないだ取引などです。RS232Cなどを用いるため、専用のソフトウェアも必要となって縛りになってしまうケースです。
そういった場合、予算が許すのであればハードウェアを入れ替えて古いOSを仮想化して動かすのが良いでしょう。特定用途でしか使われない機能によって全体のセキュリティレベルを下げるのであれば、周囲の環境とは隔絶された状態にしておくのが安全です。
対応するソフトウェア問題
ハードウェアについで多いのが使っているソフトウェアがWindows 7や8に対応していないといったパターンです。OSの差し替えができないため、ブラウザのバージョンアップもできない状態になります。予算的な問題に限らず、ソフトウェアを提供している企業自体が倒産していたり、サポートを停止しているケースもあります。
プラグイン問題
一時期の韓国ではActiveXの利用がとても多かったために古いバージョンのIEが使われ続けてきました。日本ではさほど多くはなかったものの、一部の業務システム提供サービスにおいて独自のプラグインを提供していることでブラウザをバージョンアップできないケースがあったようです。Edgeブラウザではプラグインに対応していませんので、今後ますますプラグインを利用したサイトはニーズがなくなっていくと思われます。
業務システムの一部ではFlashやJavaアプレット、そしてSilverlightが使われていることがあります。これらは度々プラグイン自体のセキュリティ問題によってウィルスやマルウェア感染を引き起こします。Microsoft社はSilverlightを止め、Adobe社もFlashを開発終了しています。今後数年を考えるならば代替技術への乗り換えは必須と言えるでしょう。
ヒューマンリソース問題
IEを最新版に入れ替える環境はできつつも、面倒であるという理由で手がつけられていないケースは多々あります。すでに動いているシステムがあり、問題なく運用できているのにあえて問題を起こしかねないアクションを取りたがる人はいないでしょう。特にシステム管理者となると数百台(場合によっては数千台)のPCを管理していますので、一つのトラブルが大きなコストになりかねません。
問題が起こるまでは対処しないというのは場当たり的であり、自分たちでコントロールできない状態に発展する可能性が高いです。IEをバージョンアップする場合は自分たちで計画し、検証した上で段階を踏んで実施できるのがメリットと言えるでしょう。
予算問題
ハードウェア、ソフトウェア、ヒューマンリソースなど問題はありますが、結局のところ予算問題につながります。IT資産に対して十分な予算がかけられない企業は多く、なるべく今あるものを使い続けようとしてしまうものです。しかし、これはITにおいてはリスクを増加させる行為かも知れません。
業務においてインターネットを使わない日はほぼないといえます。そんな中、マルウェアやウィルスのリスクは常時存在します。Microsoft社が古いWindows、IEのサポートを停止するということは、今後セキュリティホールが見つかったとしても放置されるということです。
大きな問題につながる前に移行計画を立てていくのが良いでしょう。その際にはOSやブラウザに依存する技術を用いず、中長期的なメンテナンスが期待できる技術を利用するのがお勧めです。
Microsoft社からアナウンスされていますが、各Windows OSについて最新のIEのみサポートされるようにポリシーが変更になっています。変更は2016年01月13日からなので、すでに適用されています。
これによって起こる変化としては、HTML5への移行がぐんと進むということでしょう。現在、Windows OS本体についてはVista以降がサポート対象となっています。Vistaは企業内においてはあまり多くないと思われますが、2017年までは延長サポートされます。また、Windows Serverも使われていますが、デスクトップ用途で使われているケースはあまり多くないかと思います。そのため、Webサイトとしては主に以下のOSが対象になってくるでしょう。
- Windows Vista
- Windows 7
- Windows 8.1
- Windows 10
ここでWindows 8がないのですが、Windows 8は8.1への以降を前提としており、1月12日でサービスパックの提供は終了しています。サポートを受けるためにはWindows 8.1に移行する必要があります。
Windows 7については2020年1月14日までの延長サポート期間があります。
問題はこれらのOSにおける最新のIEは何かと言うことです。
- Windows Vista(IE 9)
- Windows 7(IE 11)
- Windows 8.1(IE 11)
- Windows 10(IE 11/Microsoft Edge)
Windows VistaにおいてはIE 9までが最新となりますが、それ以外のOSについてはIE 11をサポートしておけば良いということになります。もちろん企業システムにおいてはMicrosoft社のルールがそのまま適用できない場合もありますが、サポートが切れたOSやブラウザを使い続けることは一定のリスクになります。既存案件はともかく、新規開発についてはなるべくサポート対象のブラウザのみをターゲットにするようにしましょう。
IE11を積極的に取り入れられる案件であれば、HTML5を導入するのに前向きになれるでしょう。SVGやCanvas、各種API、新しいタグなどHTML5を駆使した高い表現力と柔軟な操作性をもったWebアプリケーションが開発できるはずです。
Webアプリケーションでは画面の装飾をスタイル設定を使って変化させます。例えばTodoアプリでチェックボックスを入れたら文字を打ち消し線表示にするといった具合です。
そんな時に思ったようにスタイルが変化しないことがあります。そんな時にはDOMエクスプローラを使って表示のチェックをしましょう。
Google Chromeの場合
Google Chromeの場合はElementsタブで確認できます。デフォルトはスタイルシートごとの表示となっています。この画面上で自分で独自の設定を追加することもできます。

Computedを選択すると、スタイルシートの設定をマージした適用されている設定だけを確認できます。

Firefox Developer Editionの場合
インスペクタタブで要素ごとの表示設定を確認できます。継承元も表示されるのでより分かりやすいのが特徴です。

計算済みを選択すると適用されているスタイル設定を一覧で確認できます。さらにその設定がスタイルシートのどこにあるのかも確認できます。

Safariの場合
Safariの場合は要素タブを使います。デフォルトは計算済みで、スタイルシートやユーザ設定などがすべて反映された状態になっています。また、リンクタグで使われるアクティブ、フォーカス、マウスオーバー、訪問済みといった属性に対する設定も確認できます。

表示をルールに変更すると、スタイルシートやインラインごとに確認ができます。

IEの場合
DOM Explorerタブで確認できます。継承元も表示されますので追いかけるのが容易です。

属性で要素に対して適用されている設定を確認できます。ここで設定を外したり変更することもできます。

さらにベンダープリフィックスまで含めた属性の確認も行えます。あまり使わないと思いますが、デフォルトの表示を確認するのに良さそうです。

どのブラウザについてもスタイルシートで指定はされていても当たっていない設定については打ち消し線が入っています。これはもっと上位のスタイル設定が優先されているか、元々指定した属性が許容されていないタグである、import!指定を行っているなどが考えられます。
表示の問題ではあるのですが、利用者にとっては思いもしない表示になるのは不安にさせることでしょう。ぜひ素早く改善してください。
最近ではレスポンシブWebサイトが人気です。一つのデザイン/HTMLですべてのデスクトップやデバイスに対応するため、テストがとても大変です。多くはスマートフォン、タブレット、デスクトップの3種類に対応するのが一般的です。さらに画面の向きが縦横あるのが厄介です。
そしてレスポンシブなデザインでサイトを作っていて、テストをしてみるとデザインが崩れている!といった事態に遭遇することは多々あります。そうした時のデザインの修正にも開発者ツールが利用できます。
Google Chromeの場合
Google ChromeのDevToolsの場合、左上のDevice Modeを有効にするとスマートフォンやタブレットなどのデバイスに合わせた画面幅に調整してくれます。DevToolsの場合、Kindle、iPhone、iPad、Nexus、Galaxyなどの各種デバイスの他、自由に幅を変更することもできます。

また、画面の向きは縦または横向きに指定ができます。デスクトップ向けにはユーザエージェントを変更して表示の違いを確認できます。
Firefox Developer Editionの場合
Firefoxの場合、レスポンシブデザインモードという設定を有効にすればモバイルデバイスのレイアウトが確認できます。特定のデバイスを選んで指定する訳ではなく、320×480などサイズで指定する形になります。

スクリーンショットを撮る機能があるのでデザインの調整をしながらスクリーンショットを撮って保存しておくのが便利です。
Safariの場合
Safariの場合は開発者ツールではなく、開発メニューのレスポンシブ・デザイン・モードを使います。ここでデバイスの画面サイズやRetina指定も行うことができます。iPhone/iPadの各種バージョンを簡単に指定できますが、Android系デバイスは登録されていません。

この他、実機を接続して実機レベルでのデザインの確認ができます。シミュレータでも可能です。この場合もiOSに限定されますが、実機でしか動かない機能があった場合はデザインの確認に役立つかも知れません。
IEの場合

IEはエミュレーションタブで指定できるようになっています。ブラウザプロファイルで指定したり、ディスプレイの解像度と向きを指定できます。レンダリングエンジンの互換性を考えると、Windows Phone向けのデザイン確認に使えるかと思います。
各ブラウザとも基本的にスマートフォン、タブレットでのエミュレーションをサポートしています。それぞれにやり方が異なるのが面白い点ではあります。
これまでに紹介した開発者ツールは次の通りです。
今回はWindowsと言えば、ということでIEについて紹介します。

開発者ツールの立ち上げ
IEの開発者ツールの立ち上げも他のブラウザと同じくF12で開きます。

DOM Explorer下にある二重四角のアイコンを有効にしておくとマウスオーバーで該当するDOMがハイライト表示されます。

コンソールでは入力補完も行われます。

オブジェクトの中身や関数もコンソールで確認できます。

エラーが出た際には細かく追いかけられるようになっています。

ブレイクポイントの追加や一覧表示も便利です。

ブレイクポイントで実行が止まったところ。一時停止のアイコンが大きく表示されているので止まったことがよく分かります。

ネットワークタブでは各リソースの読み込み、実行などのタイミングが分かるようになっています。

さらにリソース単位で細かく追いかけることもできます。

リソースを読み込むときのヘッダ情報も確認できます。

レスポンスコンテンツの確認。

UIのレンダリングなどについてはUIの応答タブにまとまっています。GCであったり、スタイル指定、イメージのデコードなど細かく追えるようになっています。

プロファイラタブではJavaScriptが実行している関数をより細かく追いかけられるようになっています。実行回数であったり、実行時間を見ることで時間のかかっている処理が可視化されます。

メモリタブはその名の通り、メモリ使用量を追いかけられます。SPAであったり画面遷移をしないAjaxアプリケーションの場合は特に注意が必要でしょう。

気になったポイントでスクリーンショットを残しておくことができます。

最後はエミュレーションタブです。ブラウザのプロファイルを変更して表示や処理の確認ができます。

GPSを擬似的に与えることもできます。

ディスプレイの向きやデバイスの種類を変更してアクセスできます。

このように多様なデバイスが用意されています。なお、これらはユーザエージェントや画面サイズを変更するものであってレンダリングエンジンは変わりません。

IEもHTML5対応する中で高度な開発者ツールを提供するようになっています。IEはVisual StudioなどのMicrosoft系プロダクトとの相性が良いので、そういったIDEやOfficeなどを使う際の開発には便利そうです。
シェアは落ちつつあるとは言え、やはりIEのシェアは相当大きいのが実情です。そのためIEでのテストは欠かせません。そしてエラーが出た際にはIEの開発者ツールで効率的なデバッグをしてください。