2022-12-17

学園祭のWeb開発を語る: 具象編1 講習会と砂場遊びで支える組織

学園祭の Web サイト開発に関する良いエントリが出たので読んでいた。

これを読んで、色々な学園祭のWeb開発がどういう組織形態で、こういう取り組みをして成功/失敗した、という話をもっと聞きたいと思った。

アウトプットが進めば、学園祭Webサイト業界（？）全体として互いに学び高め合うことができる。その伸び代があるなと感じている。

学園祭技術部署カンファレンスとかやったら面白いと思うけどな〜。関東学園祭交流会とか参加してたけど、一般的には Web の部署が広報として外交も担当したりしているので、俺はもっと技術の話もしたいんだよって思っていた
— Arthur (@Arthur1__) 2022年12月16日

他の学園祭の開発部門にもぜひこのようなエントリを書いてほしいと思ったので、まずは自分が書く。というのも、id:arthur-1 は学生時代に学園祭実行委員会に所属して Web 開発に携わっていたからだ。

長くなりそうなので何 part かに分割して書く。現状、以下の3本立てで考えている：

具象編1: 自分が実際に生きてきた過去を振り返り、組織の運営について語る
具象編2: 実際に使っていた技術や開発の仕方について語る
抽象編: 学園祭の開発部署という組織や、学園祭Webサイトというプロダクトの性質から語る

まずは具象編。

これからする話は実在する組織に関する話になるわけが、今現在もこう！というわけではないことにご留意いただきたい。

工大祭の Web 開発してました

2015 年〜2017 年の間、id:arthur-1 は工大祭実行委員会のネットワーク局という部署に所属していた。企業で例えると、開発部門 & 情シス部門といったところで、主たる仕事はやはり Webサイトの開発と運用であった。

工大祭の Web サイトは当時年間 50 万PV ほどあるものだった。これを毎年テーマに合わせたデザインに作り替えている。自分が作った時代のものがもう見れなかったので、一番近かった頃のものを置いていく。

2017.koudaisai.jp

工大祭実行委員会には 3年間しか居られないのだが、ネットワーク局 3学年で以下のような役割分担をしていた：

1年: とにかく学ぶ
2年: 実働部隊として Web サイトを開発
3年: マネジメント・後輩への教育、支援

僕がいた当時のネットワーク局の取り組みをいくつか紹介していく。

講習会

自分は小学生の頃にロボットコンテストに出場したり、今は亡き geocities に FTP で euc-jp のファイルを送って~~黒歴史~~個人 Webサイトを公開したりしていた。中学高校では他の文化・芸能的活動に勤しんでいたので、大学生になった当時も、それ以上の知識はない、という状態で入部した。他の同期もめちゃくちゃWeb開発できる、という感じではなかった。

そんな自分たちを育ててくれた 2本柱のうちの 1つが講習会である。

前述の通り、3年生は開発のために手を動かすことをあまりせず、後輩を育てることに集中していた。ネットワーク局に入ってから1年弱の間、講習会を受講して Web 開発を身につけていくことになる。

HTML
- マークアップの基礎
CSS
- 装飾をつけたり、アニメーションをつけたり
JavaScript
- jQuery とかやってた気がする
PHP
- 動的な Web サイト入門
SQL
- RDB の CRUD 操作一通り学ぶ
PHP の Web フレームワーク
- MVC アーキテクチャ、ORM、フォームの作り方など

おいおい React じゃなくて jQuery かよとか色々ツッコミはあるかもしれないが、当時はそういう時代だったのである。

3年生になると、2年生のうちに実際開発していて分かった「これは勉強してほしい！」というポイントを資料に反映させて講習会を作り変えていく。そういうサイクルが回っていて、情報が古びず良い仕組みだった。また、最終学年で次がないとはいえ、自分の知識をアウトプットすることで曖昧な理解が確かなものへと変化していったのも良かった。

自分が実際にどんなことを話していたのかを公開しようと思ったが、あいにく手元にもうデータが残っていなかった。参考までに、他のサークルで自分が話していた内容を一部紹介する。

また、この講習会を通して、ネットワーク局でのキャリアパスが見えてきたのも面白ポイントだった。フォームの実装難しいけどデザインなら頑張れる、みたいな得意不得意を知り、それぞれが得意な部分の専門性を独自に磨くことができた。そして、それを講習会を通して集合知として組織に還元することができた。

工大祭実行委員会に閉じない活動も行っていた。学園祭の実行委員会は互いに交流する外交関係にあるのだが、Web の部署で勉強に困っているという他の委員会の話を聞いた時に、講習会資料の共有をしていた。

砂場遊び

講習会は良い仕組みだったと思っているが、座学はやはり飽きるものである。やはり手を動かしてこそ。

ネットワーク局の 1年生を育てる柱その2は、遊びサイト作りである。

HTML と CSS を学んだ 1年生は、次のステップに行く前に合宿用のWebサイトを作ることになる。合宿とは学園祭実行委員会全体の旅行で、夏の合宿は新入委員との懇親を深めるチャンスなのである。工大祭実行委員会には当時 3学年で 180 人ほど在籍していた。大所帯のため、合宿で居合わせた人がどこの部署のどんな人か分かるように、部員名簿を Web サイトにして部内公開するのだ。

1年生が各自が割り振られた部署の部員名簿サイトを、学んだことをもとに作っていく。作ったものは委員会全体で使われ、フィードバックがもらえる。自分の生み出したプロダクトがたくさんの人に使われるという経験を最初のスモールステップとして得ることになる。

合宿は年2回あり、2回目の冬の合宿サイトを作る頃には 1年生も大きく成長している。フレームワークを使ってサイト全体のテンプレートを管理していたり、外に出しても遜色ないクオリティのデザインになっていたりする。

世間一般に公開する初仕事は実行委員会の新歓サイトなのだが、いきなりそれを作ろうとすると行き詰まってしまうだろう。適度なタイミングで「時間制限下で決められた目的を達成するプロダクトを作る」というプロジェクトを複数回経験することで、技術力と企画進行力、そして自信を高めることができる。

また、面白いことはモチベーションが上がる、というのも大事な要素である。どうしたら他の委員がたくさんWebサイトを見てくれるかを考えながら、面白要素やイースターエッグを仕込んでいく。そのためならば学習も徹夜コーディングも全く苦ではなかった。

局員が自由に使えるサーバのリソースがあったのもポイントである。こういう節目以外にも、技術的な検証をしたり、個人で作ったものを委員会に展開するために個人が自由に使っていいサーバがあった。個人でサーバを借りたり建てたりするのは大変なので、とてもお世話になった。

自分のいる会社でもこうした技術検証に使えるクラウドの砂場が用意されていて、僕もよく活用している。これはスキルアップのために組織が払う必要経費なのだと思う。児童の創造力を高めるために、粘土を買ったり公園に砂場を作ったりするのと同じである。

次回は具象編2 ということで、泥臭いテクノロジーの話をする予定。

2022-12-16

URL から profile を自動判別する Smart Google Chrome を作ろうとした

テクノロジー sh

結論

URL を見て profile を自動判別して開くアプリ、もうあるってよ

brew install --cask choosy

Chrome の profile

Google Chrome の profile 機能を使っていますか？　これは、ブックマークや履歴などの情報や設定を使い分けることができるものです。

support.google.com

例えば、仕事用と私用で使い分けるのが良くあるパターンですね。 id:arthur-1 は計4つの Google アカウントを持っているので、それぞれに対応した profile を Chrome に登録しています。

こいつが便利なんですが、痒い所に手が届かないのです。

複数の profile のウィンドウを同時に立ち上げている時に問題が起こります。Slack のアプリなどに表示されるリンクを踏んだとき、自分が開きたい profile のウィンドウでページが開かないことがあるのです。

挙動としては一貫性があり、直近でアクティブだったウィンドウの profile にタブが追加されます。しかし、サイトを開く前に開きたいウィンドウをアクティブにするのは面倒です。業務システムへのアクセスをプライベートな profile のブラウザでしてしまうことになりかねません。

profile を指定してページを開く方法

Mac の Google Chrome で、特定のWebページを特定の profile で開きたい場合はこのスクリプトを実行すれば良いです。

open -na "Google Chrome" --args "https://example.com/" --profile-directory="Profile 1"

"https://example.com/" のところには開きたいページを、 --profile-directory オプションには profile ディレクトリ名を指定しましょう。

profile ディレクトリ名は chrome://version/ というページを開くと分かります。下の図のような表示であれば "Profile 2" と指定すれば良いです。

smart-google-chrome.sh

URL を見て開きたい Profile を判別させるために、こんなシェルスクリプトを書いてみました。

#!/bin/zsh

p1_website_regexs=(
  '^[http?s://]?blog\.arthur1\.dev'
)

# 引数指定がない場合は通常通り Chrome を開く
if [[ $# -eq 0 ]]; then
  open -na "Google Chrome"
  exit 0
fi

# 引数がある場合には p1_website_regexs にマッチするなら Profile 1 で開く
for regex in $p1_website_regexs; do
  if [[ $1 =~ $regex ]]; then
    open -na "Google Chrome" --args $1 --profile-directory="Profile 1"
    exit 0
  fi
done

# どれにもマッチしなかったので、profile を指定せず開く
open -na "Google Chrome" --args $1

以下のようにスクリプトを指定すると、引数に渡した Web ページが Chrome で開きます。

smart-google-chrome.sh https://blog.arthur1.dev

このとき、URL が p1_website_regexs 配列に指定した正規表現にマッチするならば、Profile 1 を明示的に指定して開く、という挙動になります。

Automator でアプリ化も...

macOS には、Automator という地味に便利な仕組みがあります。Automator を使うと、シェルスクリプトをアプリケーションのように動かすことができます。

これにより、作ったスクリプトをアプリ化したものをデフォルトブラウザとして指定すれば、URL をクリックした時に自分が開きたい profile でページを開く最高体験ができるのでは、と考えました。

しかし、作ったものをデフォルトブラウザに指定することはできませんでした。Xcode を使ってきちんと mac のアプリとして作らないとブラウザとして認識してもらえないようです。

stackoverflow.com

車輪の再開発回避

仕方ないから Swift 入門するか、と思って諦めていたとき、社の先輩が「それ、Choosy というアプリでできそう」と教えてくれました。

choosy.app

これがまさに自分が欲しかったものそのものでした。どのアプリから開いたリンクか、URLの文字列が何から始まるか、などの条件に応じて、どのブラウザ（profile 指定も可能）で開くかというルールを自由に設定できます。

また、ルールにマッチしなければ、ブラウザを開く前にポップアップが表示されどのブラウザかを選択する、といったことも可能です。

Choosy はブラウザのプロキシアプリケーション的な存在なので、これをデフォルトブラウザにして生活します。

シェアウェア（$10）ではありますが、自分は気に入ったので課金しようと思います。

まとめ

profile を使い分けている方は choosy を使うとペインが解消されるかも？という情報でした。

2022-12-16

Lambda 新機能の Telemetry API を利用した mackerel-lambda-extension-agent 試作

テクノロジー Mackerel AWS Lambda Go

この記事は Mackerel Advent Calendar 2022 16日目の記事です。

こんにちは、id:arthur-1 です。2022年にはてなに新卒入社して、Mackerel 開発チームのアプリケーションエンジニアをやっています。また、今年の Mackerel Advent Calendar の運営を担当しております。よろしくお願いします。

先日、Mackerel チームで「Mackerel アゲアゲ合宿」を開催しました。これは旧来「開発合宿」と称して行ってきたもので、「Mackerel の未来に繋がることを誰かと一緒にやること」をコンセプトとして、5つのチームに分かれて3日間集中して開発やワークに取り組みました。

こちらの運営も担当させていただいたのですが、詳しい運営話は別の機会にさせていただくかもしれません。運営として、「合宿の成果を Advent Calendar にアウトプットしましょう」と Mackerel スタッフに声掛けしているのですが、まずは自分からやらねば、という気持ちでこのエントリを書いています。

今回は、id:arthur-1 のチームで取り組んだ「Lambda Telemetry API を利用した mackerel-lambda-extension-agent 試作」プロジェクトについてご紹介します。

Lambda Telemetry API

AWS の年次イベント re:Invent2022 が開催される少し前に、 Lambda Telemetry API が発表されました。

aws.amazon.com

もともとは Logs API というものが用意されていました。Lambda 関数に extension を登録し、そこから API を subscribe すると、プラットフォームに関する情報や関数が吐き出したログを取得できる、というものです。これを外部に送信することで、実行環境ごと区別した監視が実現可能になります。

Telemetry API はこの Logs API の進化系という立ち位置になっています。API がログの塊を extension 上のサーバに POST していく仕組みはLog API と同じです。OpenTelemetry と情報的な互換がある形でログに span と trace の id がついていたり、実行環境のライフサイクルに関する情報が増えていたりしています。

Telemetry API に関する詳しい説明は、ドキュメントや他の記事に譲ります。

docs.aws.amazon.com

dev.classmethod.jp

mackerel-lambda-extension-agent

Telemetry API を利用して Mackerel でより詳細な Lambda の監視ができるようにと、合宿の3日間で mackerel-lambda-extension-agent を試作しました。

github.com

Mackerel の AWS インテグレーションで取得できる Lambda のメトリックは関数単位のものでした。しかし、この agent を利用することで、各実行環境ごと Mackerel のホストとして登録し、Telemetry API で取得できるメトリックを投稿することができます。

自動退役にも対応していて、実行環境がシャットダウンされるとき、Mackerel 上のホストを退役させる API リクエストを投げるようにしています。

設定方法は、監視したい Lambda 関数のレイヤーとしてこの mackerel-lambda-extension-agent を追加し、関数本体に環境変数を指定するだけです。このアプリケーションは Go で開発されていますが、Go 以外のランタイムの関数に対しても適用できます。リポジトリの README.md に terraform での設定例を記載しているのでご確認ください。

試しに、Mackerel の staging 環境のシステムで使われている Lambda 関数（ランタイムは Node.js）の extension として、mackerel-lambda-extension-agent を設定してみました。

Telemetry API の report から取得した Done Duration のグラフ

仕組み解説

まず、以下のような手順で Telemetry API を subscribe します

Extension API にリクエストを投げ、Lambda レイヤーを extension として登録する
Telemetry API からのレスポンスを受ける HTTP サーバを extension 上に立ち上げる
Telemetry API に HTTP サーバの URL を教えるリクエストを投げ、購読する
Telemetry API からサーバにログの塊が次々と送られてくる

subscribe が終わったら、 Mackerel API にリクエストを投げ、ホストとしての登録やグラフ定義の設定を行います。

Telemetry API から受け取ったログはキューに積まれています。1分ごとキューを flush し、それぞれのログの type を見て、メトリックにできるものがあれば集約して Mackerel に投げるようにしています。具体的には、"platform.initReport"、"platform.report"、"platform.runtimeDone" に含まれる内容からメトリックを取得しています。

また、定期的に Extension API にリクエストを送り、イベントを確認しています。ここでシャットダウンのイベントが来たら、1分経過を待たずにキューを flush して最後のメトリックを送り、その後 Mackerel 上に作ったホストを退役させます。

難しかったところ

難しかったのは、extension 上で行っているメトリック集計の部分です。

Mackerel のメトリックは一番細かいもので 1分粒度なので、Telemetry API のレポートから得たメトリックは 1 分ごと平均/合計演算などでロールアップしてから Mackerel に送る必要があります。

しかし、1回の実行時間が短い Lambda 関数に対してこの agent を適用すると、1分待っている間に実行環境がスリープしてしまい、次に関数が invoke されるまでメトリック送信が遅延してしまうという問題があります。

また、Lambda 関数のタイムアウト時間を短く設定すると、extension もその時間でタイムアウトしてしまうため、メトリックが収集できません。

きちんと観測したいなら、無理に直接 Mackerel に投稿せず、即時に他のサーバに送って集計させてから Mackerel に送る方が良さそうです。

まとめ

新機能の Lambda Telemetry API を用いて、Lambda の可観測性がアゲアゲしたのを体感することができました。クラウドシフトしていくと、大規模なストリームを Lambda でバサバサと処理していくアーキテクチャを選択することも多いでしょう。Lambda のモニタリングについて引き続き良いあり方を模索していきたいなと思いました。

qiita.com

prev: 15日目は id:wafuwafu13 さんの mackerel-agent configtest によるチェックの強化についてでした

next: 17日目は Kidapan さんの Mackerelの新機能を振り返ってみた~2022年版~ です

2022-12-12

オンライン遊びまとめ 2022

ゲームボードゲーム

コロナ禍をいかがお過ごしでしょうか。僕はオンラインで通話しながら遊ぶ機会がとても増えました。

年の瀬も近づく中、感染者は増えつつあり、外出をやめてオンラインで遊ぼうという方もいるのではないでしょうか。

そんな皆さまのために、自称「オンライン遊びのプロ」が、オンライン遊びのあれこれをご紹介します。今回は、ゲーム機が必要なく、アプリケーションのインストールもいらないブラウザで遊べるWebサービスのみを取り上げます。

（本記事は思い出し次第適宜更新します。ご了承ください。）

オンライン遊びサービス一覧

ピクトセンス

pictsense.com

おすすめ人数: 3~7人
手軽さ: 軽め
ゲーム時間: 短め

親プレイヤーが辞書からランダムに選ばれたお題を絵で表現し、子プレイヤーは絵からお題を推測して当てる、というゲームです。

正解した場合、絵を描いた人と当てた人両方に、当てるまでの時間が短いほど多くの得点が入ります。親プレイヤーは、子プレイヤーに分かってもらえるような絵を描くことが大事ということです。

プリセットの辞書が難易度別に用意されているほか、ユーザー独自に辞書を作って登録したり、誰かが登録した辞書で遊ぶことができます。たとえば、ポケモンの辞書とか、国の辞書とかは遊びやすいですね。

ちなみに、id:arthur-1 はサイゼリヤのメニューを辞書にしましたが、友人からは「でぃあぼらふうそーすのせちきんぐりるとはんばーぐのもりあわせ、なんて分かるわけないだろ」と大変好評でした。

pictsense.com

Gartic Phone

garticphone.com

おすすめ人数: 5~7人
お手軽さ: 軽め
ゲーム時間: 短め

言葉と絵を交互に使う伝言ゲームです。ボードゲーマーには「テレストレーションのパクリ」と言うと完全に理解してもらえると思います。

ゲームの流れは以下の通りです：

それぞれがお題となるキーワードを記入する
前のプレイヤーが書いたキーワードが自分の元に届く
キーワードを表現するような絵を描いて次のプレイヤーに渡す
前のプレイヤーが描いた絵が自分の元に届く
絵から元のキーワードを推測して書き次のプレイヤーに渡す
以後、2~5 の繰り返し

こうして、（言葉）→（絵）→（言葉）→（絵）→... と一周分伝言ゲームしたあと、最初のお題からどれぐらい変わってしまったかをみんなで眺めて楽しむゲームです。

伝言ゲームの結果を gif アニメーションとしてダウンロードできるのもポイント高いです。はてな社ではオンライン飲み会の議事録が Scrapbox に記録されがちですが、こうした思い出保存文化との相性が非常に良いですね。

ラウンジ Zoom しながらみんなで遊ぼう

loungegame.site

おすすめ人数: ゲームによる
お手軽さ: 軽め
ゲーム時間: 短め

いろんなゲームが遊べます。例えば、サイトトップで紹介されているものを中心に紹介すると、

一致するまで終われまテン
- 「カタカナ3文字の飲み物といえば？」のようなお題について、みんなの答えを一致させることを目指す
NGワード
- インディアンポーカー的に各自NGワードが割り当てられている。会話の中でNGワードを使ってしまった人が負け
早押しクイズ

といったゲームが遊べます。

基本的にバラエティ番組を意識した作りになっており、クイズ番組でパネルに回答を書く仕草が体験できます。

アプリケーションの出来が悪い面があり、存在しないドメインで共有リンクが発行されてしまう、勝手に切断されてしまう、などの不具合はありますが、遊べなくはないです。

コードネーム

codenames.game

おすすめ人数: 4人~
お手軽さ: 普通
ゲーム時間: 長め

コードネームというボードゲームが遊べるWebサイトです。

ルールを説明するには余白がなさすぎるので、他のエントリを読んでください。

boku-boardgame.net

個人的には間延びしがちなのであんまりおすすめしないですが、よく選択肢として挙がるので紹介しておきます。

ワンナイト人狼

oj.bakuretuken.com

おすすめ人数: 6~7人
お手軽さ: 普通
ゲーム時間: 短め

ワンナイト人狼も有名なのでルールは他のエントリを参照してください。

bakuretuken.com

boardgamearena

ja.boardgamearena.com

おすすめ人数: ゲームによる
お手軽さ: ゲームによる
ゲーム時間: ゲームによる

ボードゲームが遊べる Web サービスとしては最大級のサイトです。このエントリで紹介してきた数々のサービスと異なり、遊ぶには各プレイヤー会員登録が必要です。

多くの人数で遊べ、ルールも簡単なボードゲームをいくつか挙げておきます：

コンセプト
- お手軽さは普通。
- ピクトセンスをベースに、絵を描くのではなく、色々なイラストが書かれた盤面にコマを配置することで表現していく
ジャストワン
- お手軽
- あるお題に対するヒントをみんなで出し、親に当ててもらう。ただし、出すヒントが誰かと被ってしまった場合、そのヒントは親に見せられない
- 現在は日本語対応していないけど、多少英語がわかれば遊べるはず
ラマ
- お手軽
- 語弊はあるけどウノみたいなもんよ
ニムト
- お手軽さは普通
- 有名なボードゲーム。ルール説明はちょっと難しいけど、慣れたらサクサクできるのでおすすめ

QMAClone

kishibe.dyndns.tv

おすすめ人数: 2人~
お手軽さ: 手軽
ゲーム時間: 手軽

クイズマジックアカデミーというアーケードのクイズゲームを再現したWebサービスです。UI が分かりづらいところはありますが、アプリをインストールせずクイズで遊べるので楽しいです。

友達と遊ぶ時は「イベント対戦」を選び、適当なイベント名を設定して共有しましょう。

Webサービスはないけどチャットツールでできる遊び一覧

ウミガメのスープ（水平思考ゲーム）

おすすめ人数: 2人~
お手軽さ: 大変
ゲーム時間: 長め

dic.pixiv.net

ウミガメのスープを Discord のチャットを使って遊んでいます。

質問をチャットに書き、出題者が :o: :x: のリアクションを使って yes/no を答えていきます。

ちょっとトリッキーですが、量子ウミガメのスープも楽しかったので、合わせてご紹介します：

hikido.hatenablog.com

朝までそれ正解

おすすめ人数:6人~
お手軽さ: 簡単
ゲーム時間: 普通

有名なテレビ番組の一企画です。

「『ぶ』から始まる、女性の部屋にあるもの」*1のようなお題に対して、それぞれが正解と思うものを書いていきます。

Discord であらかじめ書いておき、自分の発表する番が来たら投稿するオペレーションでやっています。後で誰かのものを見て書くのを防ぎたい場合には、|| hoge || という spoiler 記法を使ってあらかじめ入力してもらい、発表する時に編集で || を消して保存する、という方法もあります。

お題が思いつかなければ、以下のような Webサービスに頼るのもアリです。ランダムにお題が表示されるので、良さそうなものが出るまで F5 で更新しましょう。

soreseikai.com

Ito

おすすめ人数: 4~8人
お手軽さ: 簡単
ゲーム時間: 普通

arclightgames.jp

自分の手札の数字を、数字そのものではなくお題で表現し、お互いの数字を見ずに小さい順に並び替える協力ゲームです。

例えば、お題が「子供に人気の食べ物」で、自分の手札の数字が 95 だったら（100 が最大）、「フライドポテトかなあ」といった具合です。

Web サービスはありませんが、TRPG ツールの ccfolia で、1から100のカードを用意して遊んでいます。

ccfolia.com

まとめ

オンラインで手軽に遊びたいがどのサービスが良さそうかわからない、オンライン飲み会がマンネリ化してきた、そんな方々へこのエントリが支えになれば嬉しいです。場に応じた適切なゲームを選択し（もちろん、オンライン遊びにせず会話をすることが最善の選択肢である可能性だってあるでしょう）、幹事力を抜群に発揮していきましょう。

*1:三村「ブロッコリーの鉢植え」

2022-12-01

時間やネットワークトラフィックの単位が追加された Mackerel でネットのスピード監視

テクノロジー Mackerel Go

この記事は Mackerel Advent Calendar 2022 1日目の記事です。

今日は、そんな私が Mackerel チームに join して一番最初に実装し提供できた機能に関する話をします。

グラフ定義で選択できる単位を追加しました

mackerel.io

今年7月頭のリリースノートで紹介されていますが、グラフ定義で使える単位に、以下の3つを追加しました：

seconds [s]
milliseconds [ms]
bits/sec [bps]

単位を追加するのはパッと見簡単そうなのですが、実際には既存実装の仕組みの修正やリファクタなどが必要で、それなりにコードの差分がありました。このあたりの苦労話は社内で発表させていただきました。

さておき、時間の単位は分かりやすく便利ですね。各種クラウドインテグレーションで収集したメトリックで、単位が秒なのかミリ秒なのか分かりにくいものもありました。しかし、追加された単位をグラフ定義に設定することで、以下のように単位が分かりやすく表示されます。

before
after

bps 単位は帯域幅などで用いられ、ネットワーク監視には欠かせないものですね。

ネットのスピード監視を Mackerel で！

ということで、今回は自宅のネットのスピードをメトリックとして Mackerel に投稿し、監視していこうと思います。

え？n番煎じでは？と思った方は、もしかすると過去の Mackerel Advent Calendar をちゃんと読んでいる方かもしれませんね。

c4se.hatenablog.com

大丈夫です。令和最新版なので単位が違います。

今回は Raspberry Pi 4 の cron でプログラムを定期実行し、以下の数量をサービスメトリックとして Mackerel に投稿することにしました：

帯域幅 [bps]
- upload
- download
ping の stats [s]
- latency
- jitter

できたもの

その結果できたグラフはこちらです：

グラフを見たときに値のラベルににきちんと単位がついているのは気持ちが良いですね。

普段は気になったときに Home Network カスタムダッシュボードを眺めています。移動平均を見ると、最近は下りがちょっと速くなっているな～とかトレンドが分かっておもしろいです。

実装

github.com

実装は Go 言語を利用しました。これを作った当時は Go はじめて、という状態だったので、あんまり洗練されたコードではないです。x86_64 の Windows でコーディングしていたものを Arm64 の Linux で動かすのでクロスコンパイル面倒だなあと思っていたのですが、そのあたり Go はとても簡単で、当時感動していたのを覚えています。

ロジックとしては、外部コマンドである Ookla のスピードテスト CLI を実行して、その結果を parse して Mackerel に投稿する、という流れになっています。

www.speedtest.net

go で書かれた speedtest-go というライブラリもあり、こちらを利用することも考えました。しかし、Raspberry Pi で動かすにはメモリの使い方が厳しく、upload の速度が安定しなかったので上記の方法を取りました。

github.com

そして、新たな単位が追加されたので、今回作ったアプリケーションでもそれに対応した書き方になっています！という紹介をしたかったのですが、残念ながら特記事項はありません。

このエントリ執筆当時の Mackerel にはサービスメトリックのグラフ定義生成を行う API が用意されていません。（ホストメトリックならある*1のに……）よって、bps や秒の単位に設定するのは Web コンソールからポチポチして行いました。API があればこのプログラムからグラフ定義を生成して単位を設定してあげられたのにな、と思います。

まとめ

Mackerel に新しい単位ができたのでぜひ使ってください！という宣伝でした。プラグインを自作している方や便利なライブラリを開発している方、bps, s, ms 単位に置き換えられるところがあればぜひご活用ください。

Mackerel の Advent Calendar まだまだ空きがあります。参加・閲覧どうぞよろしくお願いします！

qiita.com

prev: undefined

next: 2日目は id:stefafafan さんの Mackerelを振り返りやキャパシティプランニングのために毎月眺めているです

*1:https://mackerel.io/ja/api-docs/entry/host-metrics#post-graphdef

2022-12-01

Advent Calendar を Mackerel で監視する〜新卒の暮らし方を添えて〜

テクノロジー Mackerel Go AWS Lambda

この記事ははてなエンジニア Advent Calendar 2022 1日目の記事です。

こんにちは、id:arthur-1 です。2022年に新卒入社して、Mackerel 開発チームのアプリケーションエンジニアをやっています。 ~~arthur-1 という id に掛けて、~~トップバッターをいただきました。よろしくお願いします。

今日は Advent Calendar を Mackerel で監視している話をします。

Advent Calendar で何を監視したいのか

id:arthur-1 は、Mackerel Advent Calendar 2022 の運営をしています。こちらは、Mackerel ユーザーが TIPS やノウハウ、利用事例などを載せていく自由参加のカレンダーになっています。

Advent Calendar 企画の主催になると、どれだけの方が参加しているか、枠がパンパンになっていないか（あるいは、スカスカでないか）気になるものです。

Qiita の Advent Calendar であれば、以下のような指標をモニタリングしたいな、と思いました：

寄稿数：カレンダーの埋まっている枠の数
参加者数：寄稿した人の数
購読者数：購読した Qiita ユーザの数

例えば、購読者数をグラフにすることで、「Twitter のある投稿により購読者数が激増した」などの事実が分かればマーケティングの参考になります。また、寄稿数が一定以下であるかの監視を設定することで、カレンダーの空き枠が残りわずかになったときにカレンダーを増やす、などのアクションを取ることができます。

Mackerel にメトリックを投稿する

Advent Calendar のページを定期的にスクレイピングして、Mackerel にサービスメトリックとして投稿する mackerel-adcal-counter を開発しました。

以下のように、グラフで Advent Calendar に関するメトリックを閲覧できます。

infrastructure

AWS 上に構築しました。EventBridge Rules を用いて、定期的に Lambda を実行するようにしました。

application

Lambda のハンドラは Go 言語で作りました。Go は入社前は触ったことがなかったので、練習のために使ってみました。

github.com

スクレイピング周りで地獄のようなクエリが生まれているのが味わい深いのでぜひ読んでみてください。

工夫したポイントとしては、interface を用いて、Qiita 以外の Advent Calendar にも対応する余地を残したことです。Adventar のメトリックも収集できるようにしたかったら、具体的な実装を counter/adventar/counter.go に書く、というイメージです。

counter/counter.go

package counter

type CountResult struct {
    Entries      uint64
    Participants uint64
    Subscribers  uint64
}

type Counter interface {
    Count() (*CountResult, error)
}

counter/qiita/counter.go

package qiita

import "mackerel-adcal-counter/counter"

type Counter struct {
    url string
}

var _ counter.Counter = &Counter{}

func NewCounter(url string) *Counter {
    return &Counter{
        url: url,
    }
}

func (c *Counter) Count() (*counter.CountResult, error) {
    entriesCnt := uint64(0)
    participantsCnt := uint64(0)
    subscribersCnt := uint64(0)

    /* ここに Qiita へのスクレイピングの実装 */

    result := &counter.CountResult{
        Entries:      entriesCnt,
        Participants: participantsCnt,
        Subscribers:  subscribersCnt,
    }
    return result, nil
}