予定通りならば、先週にtypoチェック機能へtextlintを追加した話を投稿したはずです。

最近の投稿はそれを使って私が個人的趣味で編集リクエストを出しているのですが、
やっぱり古い記事のtypoも気になるわけで。
でも古い記事の保守判断って外部からは難しいので…

いっそ自主的にできる環境があればいいのかなあと思いました。¹

Qiita Typo Checker
(無料どころの例に漏れずスリープするのでアクセスは遅いです)

khsk/Qiita-typo-checker-zeit: Qiita-typo-checkerをユーザー指定と任意テキストに限定したWebアプリとしてzeitにデプロイします

ということでコードをいじって、Webアプリケーションフレームワークを導入してブラウザから使えるようにしてみました。

機能はSlackに投げていたもの以上のものではないので、アプリやZEIT周りのお話をば。

スクリーンショット

デザインは投げ捨てるもの。

(@khskの投稿は諸事情で除外しており、@Qiitaにもヒットがなかったので、スケベなら心が広いだろうと人柱に使わせてもらいました)

使ったもの

• Now(ZEIT)
• Micro
• pug(jade)
• Materialize

Now

デプロイ先を何にするかはいつも迷います。
Herokuはbotで使っていますし、
何よりクレカ登録無しの完全無料枠という制限がいつも厳しい。
今回はNode.jsなので
Glitch - The Friendly, Creative Community
も考えていましたが、

• Now でクラウドの複雑さから解放されよう、今すぐに - Qiita
• now: リアルタイム・グルーバル・デプロイメント - Qiita

が気になっていたのと、
固定URLが簡単に作れることが決め手となりNowにしました。

Now – Realtime Global Deployments

(余談ですが、ここを書くまでZEITがサービスでnowがデプロイ用のCLIツールの名前だと思っていました(だからRepository名もzeit))

後者の記事のOSSプランの解説はおそらく古くて、

OSSプラン	PREMIUMプラン
20 フリーデプロイ / 月	1000 デプロイ / 月
1GB フリー回線容量 / 月	50GB 回線容量 / 月
1GB フリーストレージ	100GB ストレージ
フリーバックアップ	フリーバックアップ
ファイル毎に1MBサイズ制限	ファイルサイズ制限なし
ダイナミック・リアルタイム・スケーリング™	ダイナミック・リアルタイム・スケーリング™
カスタムドメインなし	カスタムドメイン対応
オープンソースのデモや授業、チュートリアル、テストに最適	商業アプリやAPIを作る開発者に最適
/_src ページは常に公開	プロジェクトはデフォルトで非公開
永久にフリー！	$14.99 / 月

ZEIT – Your Plan

特に今はデプロイが無限回のようです

ソースコードは公開されるのですが、隠したい情報は環境変数やSecretに入れられるので、.envファイルで管理していたようなトークン類はこちらで代用できました。

ZEIT – Environment Variables and Secrets

URLのaliasもJSONで簡単に設定できます。

{
    "name":  "qiita-typo-checker",
    "alias": "qiita-typo-checker.now.sh",
    "env": {}
}

Frequently Asked Questions - ZEIT Documentation

now alias ～コマンドでも手動で設定できるのですが、ですが？
now.jsonで記述しても手動でnow aliasを打たなければ反映されないようです。
そしてすでに同じaliasでインスタンスが立っていた場合は自動的に新しいインスタンスに置き換わり、古いのはスリープするようです。

なので、参考資料のように
now && now alias && now rm my-app --safe --yes
とすると古いインスタンスを消しながら、すぐに最新の状態を一つのURLでチェックできます。

Glitchとの違いとして、メールアドレスでアカウントを作れることと、Gitが必須ではないところが大きいです！

自分のようなズボラでも本当に複雑さなしにデプロイできるので、非常にありがたい。
複雑さって機能自体じゃなくて、アカウント作成やremoteにpushする。みたいな(普通のITエンジニアなら)常識的な部分でも挫折・躓くことがあるので…

now doesn't require you to install certain applications in order to get started.

No need to install git or source control
No need to setup keys/tokens
No complicated cloud provider setup or registration

Micro

Webアプリケーションなので、サーバーサイドを考えなければ…
昔Hapiを使ったりしましたが、なんだかんだ言ってもExpress
Express - Node.js Web アプリケーション・フレームワーク
に落ち着くような感じがしてました。
しかし、

• Node.js でちょっとしたサーバーサイドやるなら、 Micro が良いかも - Qiita

を思い出し。
同じZEIT製なので相性は良いだろうと採用です。
記事にもありますが、ログ表示がイケてます。

採用といっても
pedronauck/micro-router: A tiny and functional router for Zeit's Micro
を追加してルートにgetとpostするだけなので、なんでもいいレベルなんですけどね。

const { get, post, router } = require('microrouter')
const checker = require('./checker')
const pug = require('pug')
const compiledFunction = pug.compileFile('template.pug')

module.exports = router(
  get('/', () => compiledFunction()),
  post('/', checker.main),
  () => 'not found',
)

言及できるほど使っていないことが一目瞭然なので、ログがイケてたよとだけ。

pug

HTMLを表示する必要があったので、テンプレートエンジンを探しました。
ここは予想外に、これといった決定版はないようで、
「よく使われている」「優れている」という観点ではなく、
「覚えれば他の言語でも流用できる」という点から

pug(旧Jade)にしました。
Getting Started – Pug
記法をJadeで探したりと少し手間取ったりはしましたが、変数の初期化

- items = items || []
- userId = userId || ''
- itemId = itemId || ''

さえ覚えておけばあとはすらすら書けたと思います。

• jadeがpugになって変わった所のメモ - かもメモ

Materialize

デザインは投げ捨てると言いましたが、それとなく、クラス指定程度の装飾はお茶濁しのために施しておきたい。

というので、なにか使ったことがないものから適当に。
Documentation - Materialize

Material Design Lite
と名前がややこしい…

特筆することはないかな？
Materialize固有ではないですが.col.s6.m6でカードが2段組に出来たのは嬉しかったです。

ただ、テンプレートエンジン考えてCSSフレームワーク考えて～
となると、Vue.js入れてVue.jsのライブラリ、
Element - A Desktop UI Toolkit for Web
などに乗っかるほうが結果的に簡単でよかったのかな？と思いました。

Coolors

CSSフレームワークを使って、使わない場合より見辛くなることはそうそうないとは思うのですが、
既定色のカード背景に合う文字の色を何にすればいいのかわからなくて、これを使いました。

簡単便利な配色ツール「Coolors」色選びに重宝します | 創kenブログ

一色固定すれば残りが相性の良い色になるらしく…
濃い緑に対してテキストをオレンジ、赤、ベージュっぽい色にしてみましたが、大丈夫でしょうか？

色彩もなかなか奥深いので、こういうツールは助かります。

いいねボタン ツイートボタン ソーシャルボタン まとめて設置

ブログやwebサービスでよく見かけるソーシャルボタンってどうやって設置するのかな？
と気になったので探してみたら、一括で作れるものがありました。
なるほど、便利。
pugはエスケープ|すればそのままのHTMLが書けるので、これをぺろっと貼り付け。

ただ、nowはhttpsで提供されているのですが、ソーシャルのアイコンなどがhttpなので、完全なhttpsにならずブラウザで警告が出ていました。
しかし、今どきのソーシャルはhttpsに対応しているだろう。
と、このサイトで作られるコードのhttp:をhttps:に置換してやると、画像が表示されたまま、ブラウザの警告も消えました。
覚えておきたいです。

Qiitaアクセストークン

QiitaAPIは未認証では1時間で60回。
一回で100件取得するので、大雑把に6000件しか見れません。…しか？
複数人が使うとオーバーすることが見込まれたので、開発にも便利ですしAPIトークンを使うことにしました。
最初は
QiitaのユーザーフィードをRSS化するサービスを公開しました。 - Qiita
のようにユーザーに自分のトークンを入れてもらおうと考えていました。
でも、まあ、こんなサービスに自分ならわざわざトークン取得してまで使うか？と考えると、面倒でバイバイしそうだったので、自分のトークンを使うことにしました。

弊害として

QiitaのAPIをアクセストークン付きで使用すると、通常のitem検索でも限定共有記事が検出される - Qiita

という問題も出ましたが、私が気をつければ…
(多分居ないと思いますが、ユーザーIDにkhsk文字列が入っている方は弾かれると思います)

制限事項

複数人での同時検索をテストしていません。nowがどの程度の性能なのかは未知数です。

また、

Qiitaのあれこれをひたすら分析してランキング#ユーザ別記事数ランキング - Qiita

のトップ3

のうち、1位と2位の方は検索すると502が返ってきました。
nowのログにも何も書かれておらず、タイムアウトなのかなんなのか、原因は不明です…
3位の方の728件はチェックできたので、投稿内容にも依るんでしょうが、700件ぐらいの投稿数はチェックできる。
また、ユーザーの99%はそのままチェックできると言えそうです。

数が多すぎる方もcreatedクエリーなどで投稿数を絞れば出来そうですけどね。

ということで、Free online spelling and grammar checkかのようなものを公開したお話でした。
typo修正ってプリミティブな楽しさがあるので、年に一回の大掃除的に思い出して使ってもらえると、こんな物でも誰かの役に立てるとしたらそれはとっても嬉しいなって思ってしまうのでした。