こんにちは。
Web エンジニアの Hayato Yamashita です。
最近は Nuxt.js が個人的にお気に入りです。
SPA するにしても、もう Vue.js より Nuxt.js が便利すぎますよね。
今回は、この Nuxt.js を使ってサイトをつくり、リリースした様子を記事にしました。
つくったのは Password Generator という、パスワードに使える文字列を生成してくれるサイトです。
生成条件を決めて生成ボタンを押すと、パスワードっぽいランダムな文字列を生成してくれるようになっています。
その左側にあるコピーのアイコンをクリックすると、クリップボードにコピーできて便利ですよ。
ご活用ください。
ちなみに、リリースまでは2日間のスピード感があったのですが、記事にするのは何百倍もかかりました。ダメですね☆
この記事で触れる内容について
どのようなことを考え、開発し、リリースに至ったのか。
その流れについて書いていく記事になります。
Password Generator は非常に小さなサービスです。
小さなサービスだからこそ、手が届く範囲としてイメージしやすく、リリースに至るまでの流れを一口に飲み込みやすいだろうと思いまして、記事を書くことにしました。
そのため、技術的な細かい部分には触れません。
ソースコードは GitHub で公開していますので、興味のある方はそちらをご覧ください。
https://github.com/tes-inc/password-generator
サイト作成の経緯
何かしらのサービスのアカウントで扱うパスワードや、メールに添付するファイルの圧縮パスワード（古い慣習ではありますが）など、日頃の業務でパスワードを扱う機会がありますよね。
しかし、パスワードの使い回しはご法度です。
使い回しをしないためには、パスワードを扱うケースが増えるたびに、新しくパスワードを生成しなければなりません。
そこで、簡単にパスワードを生成できるよう Password Generator を作ることにしました。
発案について
発案自体は、うちの常務の思いつきです。
とある会議の中で、常務から「こんなのつくってよ」と言われたことがきっかけでした。
最近の弊社は、小さなものから自社サービスを立ち上げていこう、というクリエイティブな風潮があります。
先述のとおり、業務でパスワードを生成しなければならない機会があり、普段使うものであれば自分たちでつくろう、という話につながりました。
正確に言うと、それを聞いて「あ、すぐつくれるかも」と思って、私一人で開発することにしました。
独断専行でしたが、それを許してくれて、かつ、自社のサービスとしてリリースさせてくれる常務には感謝しかありません。いつもありがとうございます。
ただ、言われたものを言われたままつくるのでは芸がありませんし、エンジニアとして未熟です。
そこで、つくるにあたってサービス立ち上げっぽく、わりとしっかりめに考えてみることにしました。
プラットフォームの決定
つくるものは決まりましたが、どのように使えるものにするのかを決める必要があります。
まずは、パスワード生成の利用ケースを考えることにしました。
パスワードを生成したい場面として思い当たるのは、何かしらのサービスのアカウントを作成するときや、圧縮パスワードを決めるときですよね。
圧縮はパソコンでおこなう場合がほとんどだと思いますが、アカウント作成はパソコン・スマートフォンのどちらでも行うことがありますので、どちらでも使えたほうが良いはずです。
であれば、パソコンとスマートフォンどちらでも使えるよう Web 上に構築すると、嬉しさが高まりそうです。
ということで、今回のサービスは Web 上に構築することを決めました。
既存サイトとの差別化
ところで、パスワードを生成できる既存の Web サイトはいくつもあります。
新しくサービスを作るのですから、何かしらの差別化を図らなければなりません。
今回は、以下の点で差別化を図ることにしました。
- 軽く、すぐに使えること
- シンプルであり、一画面に収まること
何をもって差別化するか決めるにあたって、「パスワード生成」などで検索して出てくる既存サイトを調査しました。
結果、パソコンで利用する際には優れているものばかりでしたが、スマートフォン利用時においては多機能すぎる、といった感想をいだきました（個人の感想です）。
最近はパソコンよりもスマートフォンユーザが増えていることもあり、モバイルファーストにできるならしたほうが良いでしょう。
そこで、スマートフォンで使うときに嬉しいことを考えました。
それが、先述の差別化ポイントです。
軽く、すぐに使えることは、通信速度が貧弱な環境であることも想定されうるスマートフォンのことを考えています。
シンプルであり、一画面に収まることは、スマートフォンの小さな画面で使うために画面をスクロールしなければならないのは手間でしかないので、ユーザビリティの向上を考えています。
これらを満たすことで、既存サイトとの差別化を図ることにしました。
ここまで掛かった時間
差別化のための調査に少し時間を使いましたが、だいたい1時間くらいです。
おおよそ、私の頭の中で完結しました。
技術選定について
つくるものについて大枠を決めましたから、次はもう少し掘り下げて、どんな技術を使ってつくるのか選定することにしました。
最終的には Nuxt.js と Vuetify を使うことにしましたが、それぞれ、下記の経緯で選定に至りました。
Nuxt.js を選定した経緯
パスワードを生成するだけのシンプルで小さな機能であることを考えると、大仰なフレームワークは似合いません。
また、セキュリティ的に重要度の高いパスワードをサーバサイドで生成するのも微妙かな、という思いもあり、クライアントサイドで完結させたほうが良いだろうと考えました。
そこで選択肢にあがったのは、フロントエンド界隈で人気の高い Vue.js と、それをベースにしている Nuxt.js です。
どちらにするか迷いましたが、今回は Nuxt.js で決定。
Nuxt.js は SSR (Server Side Rendering) できることで有名ですが、SPA (Single Page Application) であっても Vue.js を楽に扱いたい場合に有用です。
ということで、今回開発する Password Generator とうまくマッチするのでは、と思い、選定に至りました。
Vuetify を選定した経緯
簡易的なサイトなので使うかどうか迷いましたが、先述の差別化に適したものを、ということで、デザイン周りは Vuetify を頼ることにしました。
他に有名な Bootstrap や Bulma なども選択肢に挙がりましたが、各サイトにあるサンプルでデザインを見比べて、個人的に好きだと感じた Vuetify を選択。
選んだときには「マテリアルデザインって今っぽくてカッコイイよね！」くらいにしか考えていませんでしたが、結果として、Vue.js で作られていることもあって親和性が高く、学習コストも低くて、選んで良かったと思っています。
また、Vuetify 自体がレスポンシブ対応しているので、開発時に気を遣わなくて済んだのも良かったです。
デプロイ先について
デプロイ先は、弊社で借りている VPS にしました。
最近は Heroku や Netlify などが流行っていますが、今回はそれらを除外。
弊社ですでに借りている VPS があり、先述のとおり、こうした小さなものもどんどんつくっていこうという風潮があるので、複数サービスをコスパ良く運用できる VPS が適当であると判断しました。
ちなみに、弊社は さくらのVPS を利用しています。
ここまで掛かった時間
Nuxt.js とデプロイ先はすぐに決めましたので、ほぼ即決。
Vuetify は、競合フレームワークのサンプルなどを試したりしながらでしたので、1時間くらい使いました。
開発の流れ
常務の発案から、個人的に興味をいだいてつくることを決めたので、開発メンバーは私一人です。
以下の順に、シーケンシャルに開発を進めていきました。
Create Nuxt App を使ったプロジェクト作成
Nuxt.js のプロジェクト作成で、今回は Create Nuxt App を使うことにしました。
先日、当ブログでアップした記事では Vue CLI の nuxt-community/starter-template を使ってプロジェクト作成する方法を書いています。
どちらも簡単にプロジェクト作成をしてくれる素晴らしいツールですが、今回使用する Vuetify を入れるかどうかも対話形式で聞いてくれる Create Nuxt App を使うことにしました。
対話形式に答えるだけでプロジェクト作成してくれるので、本当に導入が楽ですね。
Vuetify を使った開発（モック作成）
Create Nuxt App で作成した雛形から、モック作成を行いました。
Vuetify はドキュメントやサンプルも充実しており、どのコンポーネントを使うと良いかイメージしやすかったです。
先述のとおり、スマートフォンで使うことも想定していましたので、画面幅を狭めたりして、見た目の確認をしました。
Vuetify そのものがレスポンシブ対応していましたので、変に手を加えないかぎり、そのまま使えるのが良いですね。
また、画面上の入力項目は、このモック作成のときに決めました。
桁数・数字の数・記号の数
- サービスによって対応する桁数・文字種が異なりますので、それを吸収するための項目です
- よくある「アルファベット大・小文字」のような項目は、あえて設けていません
- どんなシステムでも小文字だけ・大文字だけといったことはないですし、大文字・小文字を混ぜたほうがセキュリティ的に良いとされているので、選ばずともアルファベット大・小文字を混ぜるようにしました
生成する数
- 生成されたパスワードが気に入らなかった場合、ユーザに再生成させるのは手間です
- なので、ユーザ自身が生成されたパスワードの中から自由に選べるよう、複数生成できるようにしました
- その数は好みによるところがあると思いますので、その数も選べるようにしてあります
- あとから考えると、この項目はなくても良かったかな、と思ったりします。笑
プリセット（普通・強い・カスタム）
- 1〜2クリック（タップ）だけでパスワードを作れるように、プリセットを設けました
- 一般的なサービスだったら、普通・強いのどちらかを選んで「生成」を押せば良いはずです
ロジック周りの開発
メイン機能のパスワードっぽい文字列を生成するロジックが少しばかり厄介でしたが、必要な文字種とそれぞれの文字数を決め込んで、Fisher-Yates shuffle を使うことにしました。
見た目は Vuetify でほとんど実装が完成されているので、それ以外にロジックで気をつけるところは少なかったです。
あとは Nuxt.js のルールに則って、Component 化したり、Vuex を使ったりしたくらいでした。
CircleCI + Capistrano を使ったデプロイ周りの実装（CI/CD）
ひととおりの実装が終わったところで、継続的インテグレーションのため CircleCI と Capistrano を導入しました。
JavaScript ベースのプロジェクトなのに Capistrano を使っているのは、過去に弊社で導入実績があり、容易に導入できたからですね。
CircleCI の設定ファイルは、私が過去に書いた以下の記事の内容をベースにしています。
ここまで掛かった時間
実装全体で2日弱。やっぱりここに掛けた時間が最長でした。
Vuetify を使ったのは今回がはじめてでしたので、慣れていればもう少し早くできたかと思います。
もっとも Vuetify はドキュメントやサンプルが豊富に用意されているので、明らかに手間取ったことはなく、とても良いものでした。
測定
ひととおりの開発が終わりましたので、先述の差別化ポイントを満たせているかどうか、測定する必要があります。
- 軽く、すぐに使えること
- シンプルであり、一画面に収まること
この差別化ポイントのうち、測定できるのは1つ目の「軽く、すぐに使えること」。
具体的には、ページが正しく最適化されているかどうかを測定すれば、これを満たせているか判断できそうです。
PageSpeed Insights を使った測定
そこで、PageSpeed Insights を使うことにしました。
パスワードを生成するだけの非常にシンプルなサービスですので、モバイルにおいて最適化されていれば良しとします。
測定結果は、以下のとおりです。（2018年10月29日時点）
モバイルで、最適化 Good が出ました。
特別パフォーマンスに意識をおいたつくりにしなくても充分高い得点が出せたので、Nuxt.js と Vuetify は優秀ですね。
最適化において重要なのはコスパです。
すでに Good が出ているので、これ以上の手間をかけて最適化してもコスパはよくありません。
なので、測定だけして終了にしました。
（※当時のスコアなので、今はだいぶ下がってしまっています……）
ここまで掛かった時間
数分です。
測定結果次第で、最適化のためにやることがあるかと思いましたが、一発で Good が出たので何もしませんでした。
おわりに
以上が、小さなサービスをリリースするまでに歩んだひととおりの流れになります。
Password Generator の開発を通じて、小さくつくって小さくリリース、というのは素敵だと実感しました。
これを記事にして投稿している頃には、追加で PWA 機能を入れたり、生成条件を localStrage に保持する機能を入れたりしてちょっとだけ利便性を上げていたりもします。
本当に簡単に、そして便利に使えるサイトとしてつくりましたので、良かったらご活用ください。
それでは。