Vue.jsとNPM資産でオンラインツールを量産する

f:id:syonx:20171102220326p:plain

TL;DR

モチベーション

使い慣れたマシンではない環境で、サクッとコードを変換したいときがあります。 HTMLやCSS、そしてSQL。あとはURLエンコードBase64エンコードなどなど。 その都度Google検索をしてオンラインサービスを見つけてもよいのですが、探すのも面倒です。 あとは、できればサーバに入力内容を送信したくないという要望がありました。

実現のためのアイデア

サーバに入力内容を送信しないということは、ブラウザ内で完結する必要があります。 ということは JavaScript でやるしかありませんね。 もしかして、 NPMパッケージを活用できるのでは? と思いつき、自作することにしました。

作ったもの

特に難しいこともなく、普通にできてしまいました。 強いて挙げるとすれば、ページ切り替えに vue-router を使っているため、URLにハッシュが付きます。*1 これはWebサーバが操作できない GitHub Pages で公開しているためです。

それから、SQL整形には外部APIを使用しました。面倒だったので……。 過去に作った VSIX Downloader もここに移植しました。 window.fetch API を活用しているのですが、非同期でうまいことやっていたページをそのままコンポーネント載せることができました。 ほかにも過去に作った残骸がありますがそのまま公開。 おためしコンポーネントを気軽に設置できるサンドバッグ的な場所になりました。

構成

Vue.js

github.com

土台を作り上げるまでのノウハウはここにまとめてあります。

UIKit

getuikit.com

GitHub Pages & Wercker

ソースコード

作ってみて

URLを覚えているので、すぐにアクセスして使い始めることができて便利です。

また、ツールを追加するのも簡単です。昨日もBase64エンコードを作って、実装には数時間程度でした。 入力フォームやオプションの UI がテンプレ化してきているので、 NPMパッケージさえ見つかればすぐに追加できてしまうのがステキポイントです。