リニューアル後の国税庁サイト内のページを検索できるSPAを支える技術

国税庁サイトのリニューアルに伴う大部分のページのURLが変更されている問題を少しでも解決できればと思い、以下のようなページを公開してみました。

[国税庁サイト内ページ簡易検索 | chooyan-eng](https://chooyan-eng.github.io/KzPageViewer/)

開発の経緯については以下にまとめましたので、この記事ではこのページを会社帰りからの数時間で作り上げるにあたって役立った技術を紹介したいと思います。

[国税庁のサイトリニューアルの話題を聞いて、僕も何か作ってみました | Note](https://note.mu/chooyan_eng/n/n0fef7f6747e5)

なお、リポジトリはこちらです。

[chooyan-eng/KzPageViewer | GitHub](https://github.com/chooyan-eng/KzPageViewer/tree/gh-pages)

__（2018/4/5 追記）__
紛らわしくて申し訳ないのですが、ここで紹介しているサービスはSNS等で話題になっている[国税庁URL変換器](https://nta-go.com/)とは別のページです。

国税庁URL変換器を見て「自分も作ってみよう！」と思って作ってみたというだけのものですので、ご注意ください。
__(/追記）__

# 大まかな作り

このサイトの大まかな構成は以下のようになっています。

![kzpageviewer.png](https://qiita-image-store.s3.amazonaws.com/0/134943/ade76e9b-6d97-0d2d-ebd2-0977b211efea.png)

Rubyで国税庁のサイトからデータをスクレイピングし、そのデータをJavaScriptの配列として.jsファイルにベタ書きしたものをHTMLで読み込み、それらをGitHub Pagesで配信する、というものです。

つまり、動的と見せかけて完全に静的なHTMLとちょっとしたJavaScriptのみで作られたページです。

# Codeanywhere

さて、このページを「作ろう」と思ったものの、帰宅中の電車内で手元にあるのはiPad Pro一台のみ！

「これはコーディングは帰ってからかなー」と思ったその時、数日前に読んだ [iPadで「どこでも」プログラミングしよう](https://qiita.com/ShinoTatwu/items/06cca8aba7e768677909) を思い出して [Codeanywhere](https://codeanywhere.com) を使ってみました。

結果、ここまでオンラインで快適にできるとは思いませんでした。

多少の入力のラグはあるものの、 iPad Pro + smart keyboard で数十行のRubyプログラムをコーディングするには十分でした。

データを取得するスクリプトの大半はPC無しで完成してしまいました。とても役にたちました。

# GitHub Pages

次に悩んだのが、開発した結果、ユーザーが見るWebページをどこに置くか、という問題です。

今回作成するページはHTML、JS各1枚というとてもカンタンなものだったため、これだけのためにAzureなりをいろいろ設定するのも面倒だと思っていたとき、GitHub Pagesを思い出しました。

[GitHubを使って3分でHPを公開する。](https://qiita.com/budougumi0617/items/221bb946d1c90d6769e9)

GitHub PagesはコミットするだけでHTMLが公開できるのが便利なのですが、なんとテキストファイルの追加、編集がGitHub上でできてしまうため、コーディング＆動作確認も含めて全て iPad Pro だけでできてしまうという便利具合。

こちらもPC無しで帰宅中にそれなりに進められてしまいました。

# Ruby

Rubyは絶賛勉強中で、あまり実用的なコードは書いたことがなかったのですが、今回試しに国税庁サイト全ページのタイトルとURLを取得するスクリプトに使ってみたところ、改めてRubyで提供されているAPIの便利さに驚きました。

* 国税庁のトップページを取得して
* 同じドメインのページを正規表現で再帰的に取得して
* 同じく正規表現で抜き出したタイトルをURLとセットで出力する

という一連の処理がたったの29行でかけてしまうとは思っていませんでした。

[app.rb](https://github.com/chooyan-eng/KzPageViewer/blob/master/app.rb)

おそらく、Javaでよくある「お決まりの宣言」に必要な文字数が少なかったり、「GETリクエストする」「正規表現で抜き出す」といったよくある処理を1行、1API呼び出しだけで書たりするところが大きいかと思います。

結果として、エラーが出ても原因の特定が楽だったり、ググって出てくるAPIをとりあえず使ってみたら動かせたりと、今回のように「ちょっと作って動かしてみたい」場合には最適な言語でした。

ちなみに、出力した内容のファイルへの保存は、Rubyのコードではなくコマンドラインのリダイレクトを利用しています。

```bash
$ ruby app.rb > data.out
```

こうすることで、動作確認時はリダイレクトをとって標準出力で自分の目で確認し、実際に全件取得する場合はリダイレクトでファイルに保存する、といった使い分けがカンタンにできます。

# Vue.js

[Vue.js](https://vuejs.org/) はSPAを作る際に役立つフレームワークです。

それなりの規模のWebアプリケーションの場合、これをRailsやDjangoなどと組み合わせて使うことが多いと思うのですが、Vue.js自体はHTMLタグを操作する単なるJavaScriptプログラムのため、静的なHTMLからでももちろん使えます。

今回は検索のために画面遷移やHTTP通信をさせたくない（できない）構成だったため、検索結果をそのまま画面に反映させるコードを完結にするためにとても役立ちました。

チュートリアルがとても充実しているため、今回の程度であれば実装方法に困ることはありませんでした。

[index.html](https://github.com/chooyan-eng/KzPageViewer/blob/master/index.html)

---

本当はAzureなどのクラウドサービスを使って、「Function AppsでクロールしたデータをCosmosDBに入れて、それをWeb Apps上のRailsでかるっと表示！」みたいにできたらカッコ良いのですが、それをさらっとやる技術は僕にはないので、今回はもっと軽く触れてすぐに結果が確認できる（しかもiPadで開発できる！）ものを選んでみました。

結果として、思い立ってから半日でここまでできてしまったのは予想以上の使い勝手でした。

先日参加したハッカソンもそうでしたが、コンセプトを見せるためにモックを作る場合、必ずしもプロダクション環境でも運用できるちゃんとした作りである必要はないこともありますので、そんな時のために今回の知見が役にたちそうです。

あと、単純にそれぞれの技術を使ってひとつの役割を持ったページが作れたのがとても楽しかったです。