Skip to content

ESLintをプログラミングエディタで使う「Atom編」

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を使ってみましょう。

オブジェクトを後から拡張するMixinを使いこなす

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

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

Mininの使い方

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

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

そしてmixinを実行します。

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


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

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

JSDoc: Class: Mixin

JSONを閲覧、編集できるソフトウェアまとめ

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ビューワーを使って開発時のミスを防ぎましょう。

iOS11 Safariで追加されたAPIについて

日本は世界でも珍しく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

hifiveの使い方が分かるダッシュボードサンプルの紹介

hifiveを使って作られたWebアプリケーション(デモ)の紹介です。業務システムでよくあるダッシュボードのサンプルになります。

mpppk/hifive-dashboard-template: Dashboard sample constructed by hifive

利用技術

ダッシュボードサンプルは以下の技術を使って作られています。

  • hifive
  • Node.js
  • TypeScript
  • WebPack

使い方

まずGitリポジトリをクローンします。

さらに npm で必要なライブラリをインストールします。

後はWebサーバを立ち上げます。

これで http://localhost:8080 としてダッシュボードが立ち上がります。

機能

ダッシュボードサンプルは主に3つのパートに分かれています。

  • アイコン表示
  • 地図
  • グラフ

すべてデータはリアルタイムに書き換えられるようになっています。表示して完了するダッシュボードではなく、表示したまま最新の情報が分かる仕組みです。


このコードを参考にすれば、高機能な管理者向けダッシュボード画面を作れるはずです。hifiveを使っていますのでメンテナンスしやすく、中長期的な運用にも耐えられるでしょう。

mpppk/hifive-dashboard-template: Dashboard sample constructed by hifive

Webサイト全体のスクリーンショットが撮れるWeb APIまとめ

外部の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 – Restpack

Screenshot API

フルサイズ、サムネイルの画像が取得でき、結果はJSON/XMLで返ってきます。なお、有効期限が設定されていますので、期限が切れると画像がなくなるようです。

Screenshot API

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の実行など、細かくカスタマイズしたスクリーンショット取得が可能です。

Screen.rip


スクリーンショットの利用目的は様々です。Pitaliumのようにビジュアルテストで使ったり、ヘルプドキュメントに利用することもあるでしょう。テストでの利用においては縦長ですべてのコンテンツが撮れなければならないので、今回紹介したようなライブラリが役立つはずです。

PitaliumがMaven対応したのでDockerと組み合わせて使ってみる

Pitaliumはこれまでjarファイルをダウンロードして自分でセットアップする必要がありましたが、先日Mavenのリポジトリに登録されました!これで導入の手間が大幅に軽減されるはずです。

そこで今回はごく基本的なPitalium導入法に加えて、Dockerを使ってSelenium Hub/Nodeを簡単に組み合わせる方法を紹介します。

要件

まず以下の環境はあることとします。

  • Docker
  • Gradle

Dockerの実行

Dockerはすでにインストールされている前提とします。Selenium Hub/NodeはDockerコンテナイメージのサイズが大きいので、ダウンロードに時間がかかります。そこで、とりあえず実行しておきます。

これでどちらも実行されればSelenium Hub/Nodeが立ち上がって、Chromeが使える状態になります。

ディレクトリ構成

最低限のディレクトリ構成は次のようになります。

capabilities.jsonはHubのブラウザ設定を記述しますが、この時点ではChromeのみなので次のようになります。IEやFirefoxなど必要に応じて追加してください。

build.gradleは次のようになります。ここでPitaliumを指定するだけです。

SampleTest.javaは今回は次のように記述しました。03.基本的なテストコードの書き方 – hifiveのままですが、Dockerで立ち上がるChromeは英語版になっていますので、アクセス先を日本語版指定としています。

実行する

後はテストを実行するだけです。

しばらく待つと結果が表示されます。

そしてJUnitのファイルも生成されています。

Pitaliumのテストファイルも生成され、スクリーンショットも保存されています。


Dockerコンテナイメージがダウンロードできるまでに若干の時間がかかりますが、それさえ終われば環境を整えるのはとても簡単です。ぜひPitaliumを使ってWebブラウザベースのビジュアルテスティングを推進してください!

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