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を使ってみましょう。
JavaScriptは柔軟な言語仕様になっているので任意のオブジェクトをPrototypeで拡張できます。hifiveで同じような機能を提供するのがMixinになります。
Mixinを使うことで、継承関係にはないようなオブジェクト同士に同じ機能を追加できるようになります。
Mininの使い方
Mixinは h5.mixin.createMixin を使って作成します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var mixin = h5.mixin.createMixin({ | |
| set: function(p, v) { | |
| this[p] = v; | |
| }, | |
| get: function(p) { | |
| return this[p]; | |
| }, | |
| times: function(p, i) { | |
| return this[p] * i; | |
| } | |
| }); |
今回は適当なオブジェクトを作ります。このオブジェクト自体にはメソッドは特にありません。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var target = { | |
| hoge: 'Hello World', | |
| fuga: 5 | |
| }; |
そしてmixinを実行します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| mixin.mix(target); |
これでtargetオブジェクトにメソッドが追加されました。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| > target.get('hoge') | |
| -> Hello World | |
| > target.times('fuga', 10) | |
| -> 50 |
このようにMixinを使うことでオブジェクトの拡張が容易になります。すでにインスタンスが作られた後でも使えるので、特定のインスタンスにだけメソッドを追加することもできるでしょう。
今回のコードはJSFiddleで試せます。Mixinを使いこなすとコードが分かりやすくなりますので、ぜひ使いこなしてください。
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を扱えるようにしてくれます。開発者ツールであれば自動補完なども使えますので、開発者にとって使い慣れたツール上で便利に扱えるでしょう。
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ビューワーを使って開発時のミスを防ぎましょう。
日本は世界でも珍しくiOSとAndroidが同じくらいのシェアになっています。また、企業の現場ではiPadが多数使われています。そのため、iOSのSafariにおけるAPI実装によって、本腰を入れてそのAPIを使った機能開発ができるかどうかが決まってきます。
iOS11がリリースされたことで、多数のAPIが追加されました。今回はそれらについて紹介します。
WebRTC
P2Pの通信技術であるWebRTCがiOS11にも実装されました。元々Androidにはありましたので、これでWebブラウザベースの動画チャットなどの実装が現実的になります。
H.264のハードウェアアクセラレーションなので動画の動きはとてもスムーズです。
Media Capture API
Webカメラやマイクへのアクセスができるようになりました。Videoタグの中に描けますので、Canvasの中に取り出したりするのも難しくないでしょう。その画像を分析すれば、QRコードリーダーなども実装できるはずです。
これに伴うものか分かりませんが、iPhoneにおいても動画が埋め込み表示のままできるようになっています。これにより、動画とテキストを合わせたコンテンツなども表現しやすくなっています。
Media Capture and Streams API (Media Streams) – Web API インターフェイス | MDN
WebAssembly
すべての実装ができている訳ではなさそうですが、WebAssemblyも実装されています。Rustなどで書いたコードをWebAssemblyに変換し、Webブラウザ上で実行できるようになっています。
今後、Webアプリケーションのニーズが伸びていく中で大事な機能になっていくことでしょう。
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が実装されているのは間違いないでしょう。
hifiveを使って作られたWebアプリケーション（デモ）の紹介です。業務システムでよくあるダッシュボードのサンプルになります。
mpppk/hifive-dashboard-template: Dashboard sample constructed by hifive
利用技術
ダッシュボードサンプルは以下の技術を使って作られています。
- hifive
- Node.js
- TypeScript
- WebPack
使い方
まずGitリポジトリをクローンします。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| git clone https://github.com/mpppk/hifive-dashboard-template.git | |
| cd hifive-dashboard-template |
さらに npm で必要なライブラリをインストールします。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| npm i |
後はWebサーバを立ち上げます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| npm start |
これで http://localhost:8080 としてダッシュボードが立ち上がります。
機能
ダッシュボードサンプルは主に3つのパートに分かれています。
- アイコン表示
- 地図
- グラフ
すべてデータはリアルタイムに書き換えられるようになっています。表示して完了するダッシュボードではなく、表示したまま最新の情報が分かる仕組みです。
このコードを参考にすれば、高機能な管理者向けダッシュボード画面を作れるはずです。hifiveを使っていますのでメンテナンスしやすく、中長期的な運用にも耐えられるでしょう。
mpppk/hifive-dashboard-template: Dashboard sample constructed by hifive
外部のWebサイトのスクリーンショットが必要になるケースはよくありますが、その中でもWebサイト全体が撮れるものを紹介します。サムネイルであったり、サイズ指定ができるものは多いですが、高さが不定であるWebサイトをきちんと撮れるものはそう多くないようです。
screenshotlayer API
独自のCSSを追加したり、viewportの設定、撮影したスクリーンショットをFTPやAmaozon S3へアップロードすることも自由に指定できます。画像フォーマットはPNG、JPEGそしてGIFとなっています。
screenshotlayer API | Free, Powerful Screenshot API
ApiLeap
Google Chromeを使っているという点がユニークなポイントとして挙げています。Chromeであれば、新しい技術にも追従できるのは利点でしょう。Viewportの指定や撮影を遅延させるといったこともできます。なお、日本語は文字化けするようです。
Website screenshot and thumbnails API | ApiLeap
Restpack
Retinaにも対応し、独自CSSルールの指定もできます。viewportの指定も可能です。SVGやES6にも対応していますので、Chromeなどのブラウザがレンダリングエンジンに使われているようです。日本語にも対応しています。
Screenshot API
フルサイズ、サムネイルの画像が取得でき、結果はJSON/XMLで返ってきます。なお、有効期限が設定されていますので、期限が切れると画像がなくなるようです。
Snapito
フルサイズの場合は縦のサイズを0と指定すれば良いようです。キャッシュの有効期限はWeb APIを通して指定できます。基本的には画像が返ってきますが、JSONやXMLによるレスポンス取得も可能です。
Free Online Website Screenshot Tool – Snapito by ShrinkTheWeb
Web-capture
日本語にも対応しています。JPEG、PNGといった画像の他、PDFやTIFF、SVGなど様々なフォーマットで取得できます。ブックマークレットはありますが、Web APIでの提供ではないようです。
Web-capture – Online full length web site screenshots for free
Urlbox.io
レスポンシブWebデザインに対応しています。さらにFlashやWebFontにも対応していますので、幅広いWebサイトでスクリーンショットが保存できます。日本語も利用可能です。
Best Automated Screenshot API | Urlbox.io
URL2PNG
日本語も使えます。viewport指定も可能で、ユーザエージェントやデフォルトの言語もカスタマイズできます。さらに撮影タイミングを指定することや、カスタムCSSも指定可能です。
URL2PNG – Screenshots as a Service
Screen.rip
他のプログラミング（テストなど）と組み合わせるのを前提としたスクリーンショットAPIを提供しています。DOMを指定して一部分だけ画像取得することもできます。ヘッダーの変更やCookieの指定、JavaScriptの実行など、細かくカスタマイズしたスクリーンショット取得が可能です。
スクリーンショットの利用目的は様々です。Pitaliumのようにビジュアルテストで使ったり、ヘルプドキュメントに利用することもあるでしょう。テストでの利用においては縦長ですべてのコンテンツが撮れなければならないので、今回紹介したようなライブラリが役立つはずです。
Pitaliumはこれまでjarファイルをダウンロードして自分でセットアップする必要がありましたが、先日Mavenのリポジトリに登録されました！これで導入の手間が大幅に軽減されるはずです。
そこで今回はごく基本的なPitalium導入法に加えて、Dockerを使ってSelenium Hub/Nodeを簡単に組み合わせる方法を紹介します。
要件
まず以下の環境はあることとします。
- Docker
- Gradle
Dockerの実行
Dockerはすでにインストールされている前提とします。Selenium Hub/NodeはDockerコンテナイメージのサイズが大きいので、ダウンロードに時間がかかります。そこで、とりあえず実行しておきます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ docker run -d -p 4444:4444 –name selenium-hub selenium/hub | |
| $ docker run -d -v /dev/urandom:/dev/random -P –link selenium-hub:hub selenium/node-chrome-debug |
これでどちらも実行されればSelenium Hub/Nodeが立ち上がって、Chromeが使える状態になります。
ディレクトリ構成
最低限のディレクトリ構成は次のようになります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ tree . | |
| . | |
| ├── build.gradle | |
| └── src | |
| ├── main | |
| │ └── resources | |
| │ └── capabilities.json | |
| └── test | |
| └── java | |
| └── pitaliumtest | |
| └── SampleTest.java | |
| 6 directories, 3 files |
capabilities.jsonはHubのブラウザ設定を記述しますが、この時点ではChromeのみなので次のようになります。IEやFirefoxなど必要に応じて追加してください。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "browserName": "chrome" | |
| } | |
| ] |
build.gradleは次のようになります。ここでPitaliumを指定するだけです。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| apply(plugin: 'java') | |
| apply plugin: 'application' | |
| version = '0.0.1-SNAPSHOT' | |
| sourceCompatibility = 1.8 | |
| repositories { | |
| mavenCentral() | |
| } | |
| dependencies { | |
| compile group: 'com.htmlhifive', name: 'pitalium', version: '1.2.1' | |
| } |
SampleTest.javaは今回は次のように記述しました。03.基本的なテストコードの書き方 – hifiveのままですが、Dockerで立ち上がるChromeは英語版になっていますので、アクセス先を日本語版指定としています。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import static org.hamcrest.CoreMatchers.*; | |
| import static org.hamcrest.MatcherAssert.*; | |
| import org.junit.Test; | |
| import org.openqa.selenium.By; | |
| import org.openqa.selenium.WebElement; | |
| import com.htmlhifive.pitalium.core.PtlTestBase; | |
| public class SampleTest extends PtlTestBase { | |
| @Test | |
| public void test() throws Exception { | |
| // 1. hifiveサイトのトップページを開きます | |
| driver.get("http://www.htmlhifive.com/conts/web/view/Main/?language=ja"); | |
| // 2. hifiveサイトのトップページのスクリーンショットを撮影します | |
| assertionView.assertView("OpenhifiveTopPage"); | |
| // 3. "#about" に表示されているタイトルが正しいことをチェックします | |
| WebElement about = driver.findElementById("about"); | |
| WebElement title = about.findElement(By.tagName("h2")); | |
| assertThat(title.getText(), is("hifiveとは")); | |
| } | |
| @Test | |
| public void testClickAndCapture() throws Exception { | |
| // 1. hifiveサイトのトップページを開きます | |
| driver.get("http://www.htmlhifive.com/conts/web/view/Main/?language=ja"); | |
| // 2. hifiveサイトのトップページのスクリーンショットを撮影します。 | |
| assertionView.assertView("OpenhifiveTopPage"); | |
| // 3. "過去のお知らせ一覧" ボタン要素を取得してクリックします。 | |
| WebElement infoHistoryButton = driver.findElementByCssSelector("#news a.btn"); | |
| infoHistoryButton.click(); | |
| // 4. ページ遷移後のスクリーンショットを撮影します。 | |
| assertionView.assertView("OpenNewsListPage"); | |
| } | |
| } |
実行する
後はテストを実行するだけです。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ gradle test |
しばらく待つと結果が表示されます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ gradle test | |
| :compileJava UP-TO-DATE | |
| :processResources UP-TO-DATE | |
| :classes UP-TO-DATE | |
| :compileTestJava | |
| :processTestResources UP-TO-DATE | |
| :testClasses | |
| :test | |
| BUILD SUCCESSFUL | |
| Total time: 1 mins 11.666 secs |
そしてJUnitのファイルも生成されています。
Pitaliumのテストファイルも生成され、スクリーンショットも保存されています。
Dockerコンテナイメージがダウンロードできるまでに若干の時間がかかりますが、それさえ終われば環境を整えるのはとても簡単です。ぜひPitaliumを使ってWebブラウザベースのビジュアルテスティングを推進してください！
ESLintはCLIツールですが、プログラミングエディタと組み合わせることでリアルタイムに問題箇所を指摘してくれるようになります。後でまとめて指摘されるよりも適宜チェックしてくれる方がスムーズに開発できるはずです。
そこで今回は人気のプログラミングエディタ、Visual Studio CodeとESLintを組み合わせた使い方について紹介します。
プラグインについて
Visual Studio Codeでは多数のプラグインを提供しています。その中でもESLintで使うのはESLint – Visual Studio Marketplaceになります。これをVisual Studio Codeのプラグインインストーラーからインストールします。
ESLintについて
このプラグインはESLintは含まれていません。そのため npm を使ってインストールする必要があります。グローバルにインストールする場合は次のようにコマンドを打ちます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| npm i eslint -g |
プロジェクト以下でだけ使う場合には次のようになるでしょう。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| npm i eslint –save-dev |
ESLintの設定
幾つかの設定があります。今回は主なものについて紹介します。
- eslint.autoFixOnSave
保存時に自動的にエラーを修正します。有効で良いでしょう。 - eslint.run
いつのタイミングでESLintを実行するか設定します。デフォルトはonTypeでキー入力時に実行されます。 - eslint.validate
検証する言語です。デフォルトではJavaScript,JavaScriptReactとなっています。 - eslint.nodePath
Node.jsのパスを設定します。あらかじめパスが通っている場合は設定しなくとも大丈夫です。
ファイルを開く
後は .eslintrc を配置したJavaScriptプロジェクトを開くと自動的にESLintによるチェックが行われます。赤い波線があるところがチェックに引っかかった部分になります。そして、マウスオーバーで指摘事項が表示されます。
eslint.autoFixOnSave が有効になっていると保存時、自動的にエラーを修正してくれます（修正できないエラーもあります）。
基本的には指摘事項に合わせて修正を行っていくだけです。指摘のメッセージを見て修正していくのですが、Atomのように詳細ページへのリンクがないので分かりづらい指摘の時にどう修正すべきかが分からないかも知れません。
JavaScriptのコードをより高品質にしていくためにもLintツールの力を借りるのは良いことです。Visual Studio Codeを使っている方はぜひESLintを使ってみましょう。
HTMLのドロップダウンリストはよく使われるUIコンポーネントです。しかし標準のデザインでは使い勝手が良いとは言えません。一つ選択する際にも長くスクロールしなければならなかったり、複数選択では途中で解除されてしまったりします。
そこで今回はドロップダウンリストを便利にしてくれるライブラリを紹介します。
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
フィルタリング機能、複数選択対応、選択済みアイテムのハイライト表示、グルーピングなど多機能にしてくれます。左寄せだけでなく、右寄せにもできます。
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
Dropdown Check List
複数選択のドロップダウンリストにチェックボックスが追加されます。常にキーを押しておく必要がなくなるので便利です。
highrisehq/lufo: Tracks the most recent options chosen on a <select> element and displays them at the top of the list
最近選んだ項目を上に表示してくれます。地味な機能ですが、同じフォームを何度も使う機会がある場合に便利です。
Fabianlindfors/multi.js: A user-friendly replacement for select boxes with multiple attribute enabled
複数選択可能なドロップダウンがかなり大きくなります。選択するとグレーアウトし、選択項目が右側に移る仕組みになっています。
ddSlick – a jQuery plugin for custom drop down with images
ドロップダウンの項目にアイコンと説明書きが付けられます。かなり派手な表示になるので、用途は限られるかも知れませんが便利なライブラリです。
ddSlick – a jQuery plugin for custom drop down with images
matrushka/Dropp: A replacement for html dropdowns
クリックすると表示状態を維持してくれるようになり、複数選択もキーボードの補助なしでサポートされます。選択された項目はカンマ区切りで並べて表示されます。
matrushka/Dropp: A replacement for html dropdowns
使い勝手の悪い機能でもJavaScriptの力で一気に便利に変身させられます。業務においても使い勝手の悪いまま使うよりもよっぽど生産性が向上するでしょう。UIが大きく変わるので操作性に慣れる必要がありますが、一度慣れてしまえば手放せないライブラリになりそうです。
今やJavaScriptはあらゆる場所で動作するようになっています。Webブラウザはもちろん、サーバサイド、IoTなどの小さなデバイス機器など一度覚えてしまえば多くの環境におけるアプリケーション開発で利用できるでしょう。
そんなWeb技術を使ってデスクトップアプリケーションを開発できるのが今回紹介するフレームワークたちです。WindowsやmacOSで動くアプリケーションが作れれば業務で大いに役立つことでしょう。
alexflint/gallium: Build desktop applications in Go and HTML.
GoでHTMLファイルなどをラッピングし、デスクトップアプリケーションを開発できます。JavaScriptの中でGoが使える訳ではありません。メニューやタスクバーなどの処理をGoで記述できるようになっています。
alexflint/gallium: Build desktop applications in Go and HTML.
electron/electron: Build cross platform desktop apps with JavaScript, HTML, and CSS
この手のフレームワークとしては最も有名です。HTMLファイルを開き、そこからNode.jsの機能も呼び出せるようになっています。ローカルのファイルなども操作できます。レンダリングエンジンを内包するのでバイナリファイルのサイズが大きくなるのが欠点です。
electron/electron: Build cross platform desktop apps with JavaScript, HTML, and CSS
pojala/electrino: Desktop runtime for apps built on web technologies, using the system’s own web browser engine
Electronとほぼ変わりませんが、Webレンダリングエンジンを内包せず、OS標準のブラウザのものを使います。そのためバイナリファイルのサイズが小さくて済みます。その代わりにブラウザの互換性によって動作しない場合があります。
NW.js
既存のWebサイトをアプリ化するのがとても簡単です。実行ファイルもElectronに比べるとシンプルな構成になっています。通常のWebサイトに加えてNode.jsの機能を呼び出すことも可能です。
BrentNoorda/slfsrv: Create simple, cross-platform GUI applications, or wrap GUIs around command-line applications, using HTML/JS/CSS and your own browser.
Webサーバとして立ち上がり、ローカルのファイルを扱うためのAPIが幾つか追加されます。最終的にバイナリを生成することもできますので、ごく簡単なWebアプリケーションファイルで、その結果をファイル出力すると言った目的に使えそうです。
jyapayne/Web2Executable: Uses NW.js to generate “native” apps for already existing web apps.
WebアプリをExeファイル化するソフトウェアです。特定のWebサイトをそのままラッピングし、同じドメインではないURLをクリックすると通常使っているブラウザに飛ばせるようになります。
jyapayne/Web2Executable: Uses NW.js to generate “native” apps for already existing web apps.
mozilla/qbrt: CLI to a Gecko desktop app runtime
コマンドラインでURLを渡してあげるだけでパッケージングされたアプリケーションが立ち上がります。エンジンがこの手のソフトウェアでよく使われるWebKitではなく、Geckoエンジンなのが一つの特徴です。コマンドラインなしで起動できるようにすることも可能です。
mozilla/qbrt: CLI to a Gecko desktop app runtime
mozilla/positron: a experimental, Electron-compatible runtime on top of Gecko
Electronとの互換性を重視しつつ、エンジンをGeckoにしたのが Positron です。Mozillaの下で開発されているので期待が持てるプロジェクトになっています。HTML5の実装状況もWebKitとGeckoで異なりますので、Geckoでしか実装されていないものを使う際には便利そうです。
mozilla/positron: a experimental, Electron-compatible runtime on top of Gecko
業務要件によってはWebブラウザではなくデスクトップアプリケーションでないと難しい場合もあるでしょう。そうした時にC#やSwiftなどに行くのでなく、JavaScriptでまとめて提供することで開発リソースの低減や管理の一本化が可能になります。ぜひお試しください。
hifive開発者ブログ 