「運営者ギルド」の記事 - Crieit

slack流量計の新バージョンをリリースしました(1/13追記)

2019-01-04T00:01:00+09:00

「運営者ギルド」で使用している、どのチャンネルで活発に議論されているかを可視化するツール「slack流量計」を年末にバージョンアップした話を書こうかと思います。

運営者ギルドって？

Webサービスの運営に必要なあらゆる知見を共有できる場として、Webサービス運営者達によって作られたコミュニティです。主にslackを用いて情報交換をしています。

slack流量計とは？

slack APIから書き込みの履歴を取得して日別・チャンネル別に書き込みの数を集計してslackにグラフとテキストで投稿するアプリケーションです。
(ギルドでは呼称が変わりました。)

旧バージョンで使っていた技術

旧バージョンではSpringMVCのタスクスケジューラを使用してバッチでサーバサイドでグラフを生成していました。
- Java
- Spring MVCのタスクスケジューラ
- JFreeChart(グラフ生成ライブラリ)
- MySQL

毎日定時に実行するのにnode-cronを使っています。今回はExpressでAPIを用意してクライアントサイド(chart.js)でグラフを生成し、puppeteerを使ってスクリーンショットを撮って画像を投稿するという形をとっています。
- NodeJS
- Express
- TypeScript
- node-cron
- chart.js
- puppeteer
- slack/client

バージョンアップ

バージョンアップ作業

製造期間：12/28～30
運用・改修：12/31～
Javaからの移行なのでロジックは変えていませんが、ロジック以外はゼロから作っています。

バージョンアップした理由

いくつかデプロイしているJavaアプリケーションからNodeJSアプリケーションに移行を終えたかった
slackに投稿する処理で文字数制限を超えて失敗するケースがあるので改修したかった

苦労した点

chart.jsのプラグインでカラーセットを使っているが、実際に生成すると見辛い色が存在した。
puppeteerの動作で描画待ちをしていなかったため、グラフ描画前にスクリーンショットを撮ってしまう現象が発生。

自動表彰機能追加しました(1/5追記)

あんどさんの「WEB表彰」をお借りして自動で週1回表彰する機能を組み込んでみました。

puppeteerのpage.type()でフォーム入力できるから簡単♪
→入力直後にフォーカスを奪われて入力できなくなる
→page.evaluate()でDOM要素に直接書き込み。
環境によるが、DOM書き換えだけでは描画が走らないことが判明
→要素にフォーカスしてからkeyupイベントを送ることで対処

await page.evaluate( (str)=>{
                 document.querySelector('input#receiver.input').setAttribute('value',str[0])
                 document.querySelector('#certificate_body.input').textContent = str[1]
                 document.querySelector('input#sender.input').setAttribute('value','運営者ギルド勢いランキング')
             },str)
await page.focus('#certificate_body.input')
await page.keyboard.up('Shift')

1行22文字しか入力できないのでsubstring()

パンチカード実装しました(1/13追記)

折れ線グラフと同じようにAPIを用意してchart.jsで描画しています。

今後の展望

~~週1回、チャンネルごとではなくユーザごとの書き込み数で「表彰」したら面白そう？~~(実装済み)
~~- GitHubのコミット履歴に昔あったパンチカードのグラフを実装したい~~(実装済み)

ソース

GitHub

言いたいことを大きな声で言うツールを作った話

2018-12-20T18:37:56+09:00

「かんたん表紙メーカー」という、文字を打ち込んで画像を選ぶと表紙っぽいものをいろんなレイアウトで生成するツールを公開してます。

このバリエーションとしてブログのアイキャッチとかに使えるタイプを作ってみようかな～というのを「運営者ギルド」で呟いたら、「URLシェアでOGB画像芸で遊びたい」という示唆をいただきました。

「サーバにずっと保存しとくの好きじゃないんですよね～」→「パラメタ与えたPHPで画像出力すればできるのでは？テストはしてないけど」とアドバイスいただき、おっ、となったので、当初の目的はひとまず脇に置き、「入力したテキストをgetでPHPに投げて画像生成し、URLとTwitterCardに表示させるテキストを連動させる」というのを試してみることにしました。

言いたいことを大きな声で

Twitterカードを使って、大きな文字で主張するツールを作りました。メディア欄を使わず、画像ソフトも不要、Web上の画面にテキストを入力するだけ。「質問箱」「マシュマロ」等の質問表示に使われているのと同様の見せ方です。お好きに遊んでみてください。　https://t.co/3d584cFmvw pic.twitter.com/knSTHW9tA1
— 悠 (@you_at_pedal) 2018年12月3日

技術的にはごくごくシンプルで、PHP GDライブラリを使いました、以上終了。おしゃれデザインとかイマドキUIとか何それおいしいの…。入力ページとかめっちゃ白いです。

入力フォームとOGP埋め込み：index.php
画像出力：shout.php

入力した文字が1200×630の画像上になるべくみっちり詰め込まれるよう、文字数から行数字数フォントサイズを算出して（これは試行錯誤しつつswitch関数使って場合分け）１行ずつ分割してimagettftextに投げて、ヘッダつけて、画像出力。

shout.php?t=URLエンコードした文字列をindex.phpのヘッダのmeta property="twitter:image" とbody内のimage要素に埋め込んで、index.phpの受け取ったパラメタと連動。

で、シェアボタンを設置して、「言いたいことを大きな声で」のハッシュタグつきで、実際見ているページをシェアできるように設定。

半日くらいでざかざか作って、個人アカウントでリリース、拡散力のあるSS名刺メーカーアカウントでRT。
思ったよりウケたので、ちょっとびっくりしました。トレンド入りました（笑　
オタク、言いたいことめっちゃあるね……。

途中からツール使わずにタグだけ使って叫ぶ人も一杯出てきてましたけど、それもまた面白いところです。
リリース当日のPVが19万くらい、翌日が14万くらい行きました。一瞬の流行だったので、現在はタグ使ってる人が１時間に数人くらいかな～。

シンプルな技術、かっこわるい見た目でも、簡単に使えて機能として面白がってもらえたら、けっこう反応貰えることもあるねえ、という話でした。
めっちゃ技術力とかデザイン力とかないと個人開発とかできないよね！？　とか思ってる人がいたら、全然全くそんなことはないので、楽しくやりましょ。

NPO法人をエンジニアが手伝うススメ！Fastly non-profits サポートプログラムなど

2018-12-16T00:08:22+09:00

NPO 法人は、WEBサービスなどを無料または、格安で使わせてもらえるサービスがたくさんある。

僕は NPO法人グリーンズ（ greenz.jp ）のエンジニアとしても活動しているのだが、いろんな有料サービスに実際に触れることができて知見がたまり、他のプロジェクトでも生きているので、そんな NPO 向けのサービスを紹介と、エンジニアがNPO手伝うススメを書く。

NPO 法人向けのサービスの探しかた

探し方ですが、まずはNPO支援コレクション（通称：N コレ！）にまとまっているので、是非ここで探してみてほしい。
http://npo-sc.org/ncolle

有料サービスが、無料になったり、割引価格で使えるものが意外とたくさんある。

この記事でもまとまっています。
https://rhodium.co.jp/2018/01/11/【npo必見】非営利組織-割引・特典-一覧/

探してみるとコレも使えるのか！ってなるものをがあるのですが、いくつか自分のオススメの紹介する。

Slack 有料プラン

Slack は有料のスタンダードプランが無料になるというプログラムがある。
https://get.slack.help/hc/ja/articles/204368833-Slack-の-NPO-支援プログラム

Slack の NPO 支援プログラムは、審査を通った団体に対し、1つのワークスペースの有料プランへのアップグレードを無料または割引価格で提供しています。詳細は次の通りです :

スタンダードプラン : メンバー数が250人以下のワークスペースに対しては無料のアップグレード、250人を超える規模のワークスペースに対しては85%の割引を提供します。

Slack は有料になるとインテグレーションが無限につけれたり、グループメンション、メンバーの発言の分析など、無料版にはない機能が使える。NPOを支援する代わりに、いろんなインテグレーションや、一定数以上大人数で、運用ができるというのは、とても学びがある。

Slack できることがとても増えるので、とてもオススメ。

G Suite for Nonprofits

Google の G Suite の NPO法人であれば無料で使える。
https://support.google.com/nonprofits/answer/3367223?hl=ja

G suite は、Google Apps まわりで、何かと便利なので、NPOを手伝うことで G suite になれるということができる。

株式会社ジャックアンドビーンズ Google Ad Grants の運用代行業務サポート

そもそも、Google Ad Grants が NPOに向けては、月間100万円分（※10,000ドル分）の無料枠で広告出稿ができる。

しかし広告出稿の作業意外と大変なので、さらにジャックアンドビーンズさんが無料で代行運用をしてくれるものがある。

広告運用がめちゃくちゃ大変なので、とてもありがたいし、Google Ad Grants の設定の勉強にとてもなる。

https://npo-marketing-labo.com/free-support

Faslty の non-profits サポート

上記のNコレ！にはないが、このリンクの下の方に Nonprofit Program っていうのがある。
https://www.fastly.com/open-source

具体的な内容は書いていないが、 greenz.jp は無料枠（一定金額まで）をもらって、Faslty を使うことができる。
強靭な Fastly キャッシュを無料で実際に運用できるのは、とても最高である。

なぜエンジニアがNPO手伝うのを勧めるのか

NPO 界隈は、IT の力が圧倒的に足りていない。エンジニアという人種がNPOに関わることは、それだけで大きな力になる。
Slack を導入を手伝うだけでも、Gsuite の設定をするだけでも、めちゃくちゃ貢献できる。

エンジニアとの関わりが比較的つくりづらい NPO とって、エンジニアが近くにいるだけでとても力強い存在となれるのだ。

また力強い存在になれるだけでなく、上記サービスで紹介したように、有料のサービスを実運用で提案しやすいというメリットがある。フリートライアルで数週間試すのと、実際に運用するのは全然ちがう。こうした実験というと語弊があるか、手伝うことでエンジニアとしても実運用の知見を手に入れることができるのは、とてもメリットがあると思う。

しっかりと使いこなせるようになれば、無料でNPOを応援してくれているサービス提供社のサービスを、もっと僕らエンジニアは使うだろうし、そういったNonprofit事業を応援している会社をもっともっと僕らも応援するサイクルになれば win - win - win なのではないだろうか。

是非、NPOは無料で使える気になるサービスがあったら、そのサービスでNPOを手伝ってあげるのはどうだろうか？

注）もちろん、無理やり導入することで運用コストを上げるなど本末転倒な提案は絶対しないでくださいね。笑