ブログのネタがないし、こういう進捗も記録として残してみても面白いんじゃないかと思ったので書くことにした。サイト名が決まってないのでとりあえず「自分が運用しているサイトのいろいろ表示するやつの進捗」というシリーズにすることにする。

つくってるやつ


status.yoshinorin.io

前回まで


1. 自分が保有しているドメインのサーバ証明書確認するサイトをつくっている
2. 休日的進捗

セカンドレベルドメイン


セカンドレベルドメインの情報を表示するようにした。

Serverless FrameworkでS3に定期的にファイルアップロードするLambda (Node.js) を作成するで書いた方法で週一回 Lambdaを実行してデータ保存用のバケットにアップロードしている。whoisの情報はwhois-jsonというナイスなライブラリがあったのでそちらを使用している。

リポジトリ情報の表示


基本的に大半が静的サイトでローカルのPCにもリポジトリがあるので、そこからコミット情報を取得するようにした。

まず、全サイトのコミット情報を生成するプロジェクトを一つ作った。どのサイトもデプロイはnpm scriptを使っているので、そのタイミングで前述のコミットを生成するプロジェクトを実行するようにした。生成結果は例のごとくS3にアップするようにしている。

今回表示しているような情報はだいたい下記のようなコマンドで取得できる。

1
2
3
4
5
// 全コミットの数
execSync(`git --git-dir="example/.git" rev-list --all --count`).toString('utf-8').replace('\n','');

// 最新のコミットのUxixTime
execSync(`git --git-dir="example/.git" log --date=unix --pretty=format:"%cd" -n 1`).toString('utf-8').replace('\n','')

フッターの追加


正直存在意義が怪しいけど、ないとしまりがない気がして仕方がないので付けた。そのうちメニューとか表示するかもしれない。

コンポーネントの細分化


Vue.jsで作っているけれども、もともとルートコンポーネントで取得していたデータを全部子コンポーネントに移した。Vue.jsの動的コンポーネントを使用している。これで初回のローディングインディケータの表示時間が短くなったのではなかろうか。個人的には多少長い間グルグル周ってるほうががなんかやってる感があってビジュアル的に好きなんだけど、アーキテクチャ的にこちらの方が正しいし、今後の改修もしやすいので。

各々の子コンポーネントでもローディングインディケータを表示するようにしたので子コンポーネントのローディングインディケータがグルグル周ってるのが確認できると思う。

レスポンシブ対応


やらないやらないと思いながらもVuetifyのおかげで簡単にはできてしまうので、必要最低限のレベルでやった。

サイドバー


ブラウザーの幅が600px以下の場合はデフォルトで小さく折りたたんで表示するようにした。

デザインとかレイアウトとか


やはり難しい。いろいろなダッシュボードのサンプルとか見てるけど、どれもデモ用なので実用的なサンプルとは言い難く、なかなかどうしたものか参考にし難い。

その他


今晩もたぶんなんかやると思うので、上にはりつけた画像は夜には跡かたなく変わっているかもしれない。

つづき


自分が運用しているサイトのいろいろ表示するやつの進捗(4)