Beeeat’s log

Beeeat’s log

プログラミングで出くわした知識やツール、日常生活、働き方その他色々なことをメモしていくブログ

チームメンバーに感謝の気持ちを伝えるために「pluspl.us」を使ってみた

仕事をしている時にチームメンバーに助けられたり,「いいね!」って思う時が度々あると思います.それを伝えるために「HeyTaco!」や「Unipos」を使って感謝を表現するのをよく聞きます.こういうのを「ピアボーナス」って呼ぶみたいですね.ちなみに今のチームでは「HeyTaco!」を使っています.

www.heytaco.chat

unipos.me

しかし,友人やコミュニティのメンバーで使ってみたい時はどちらのサービスも基本的には有料なので,使うかどうか少し踏みとどまると思います.

そんな時に先輩エンジニアさんから無料で手軽に始められる「pluspl.us」という Slack App を教えて頂いたので今回はそれについてまとめてみます.

go.pluspl.us

使い方

Slack の App から普通に検索できるので「追加」を押してインストールします.

f:id:bake0937:20200407114739p:plain

使いたいチャンネルに追加し,以下のように「@ユーザ名++」の形式でメンションすると相手に1ポイントをあげることができます.画像がモザイクでわかりにくくてすいません...

f:id:bake0937:20200406205033p:plain

自分自身にメンションしてポイントをあげようとすると「詐欺師がいる」と言われます.この仕様は面白いですね.

f:id:bake0937:20200406204920p:plain

「#thing(モノ)++」でユーザだけではなく,thing(モノ)にもポイントあげることができます.これも中々面白いですね.こんな感じな使い方であってるのかな...

f:id:bake0937:20200406205804p:plain

「@pluspl.us leaderboard」でポイントが付与されたユーザの一覧を見ることができます.Things に okabeeeat があるのはあくまでテストでやってみた結果です😅.

f:id:bake0937:20200406210241p:plain

「@pluspl.us leaderboard global」を実行すると,なんと世界中のユーザの一覧を見ることができます.

さらに詳しい使い方と GitHub はこちら

go.pluspl.us

github.com

まとめと所感

今回は「pluspl.us」についてまとめてみました.チームメンバーに無料で手軽に感謝の気持ちを伝えられるのは良いですね.

これを知るまでは以下の記事のような Slack App を自作しようと思いましたが,知った時は「作るまでもなかったかぁ」とふと思ってしまいました...

tech.innovator.jp.net

しかし,最近 GAS + Slack App の勉強をしていて敢えて自作で作ってみたい気持ちは消えてないので引き続きモチベーションを保ってキャッチアップしつつ作りたい Slack App の候補に入れておこうと思います 💪

「WakaTime」で日々のコーディング時間を可視化してみた

たまたま「WakaTime」という日々のコーディング時間を可視化するサービスを見つけて使ってみたのですが,これが結構面白かったので記事にしてみました.

※この記事書いてる時に「WakaTime」を「WakeTime」だと勘違いしていることに気がつきました😅

f:id:bake0937:20200330210102p:plain

使い方

アカウントの登録

まずは,公式サイトからアカウントを登録します.

wakatime.com

GitHub アカウントでサクッと登録ができます.

f:id:bake0937:20200330210240p:plain

登録後,認証用のメールが来るのでメールにある認証用のリンクにアクセスし,認証を完了します.アカウントの登録作業はこれで終わりです.

エディタ / IDEの設定

plugins にアクセスすると,WakaTime と連携できるエディタ / IDE が表示されます.各アイコンにクリックするとプラグインのインストール方法が書いてあります.

私の場合は VS Code と連携をしてみました.連携方法はこちら

f:id:bake0937:20200330210618p:plain

可視化したコーディング時間を見てみる

VS Code でコーディングしたいプロジェクトを立ち上げ,⌘+Shift+pWakaTime: Status Bar Enabledを選択し,ステータスバーに WakaTime を表示させます.

f:id:bake0937:20200330211151p:plain

コーディングしたいプロジェクトで普通にコーディングをします.このようにステータスバーに時間が表示されるようになります.

f:id:bake0937:20200330211513p:plain

さぁ!これで Dashboard にアクセスしてみましょう.するとこのようにどんな言語でコーディングのしたのか・どのプロジェクトにどれくらい時間が掛かった等がわかります.すごい!!!

f:id:bake0937:20200330211630p:plain

まとめと所感

今回は「WakaTime」で日々のコーディング時間を可視化することについてまとめてみました.普段どの言語にどれくらいの時間を掛けているかは,今まではざっくりとした感じでしか把握できていなかったなぁと改めて思いましたが,「WakaTime」を使えばより正確に把握することができますね✨

また日々の勉強の振り返りをする時のモチベーションアップの仕組みの一つにもなりそうだと思ったので,週に1回はチェックすることを楽しみに思いながらコードを書いていこうと思います.

「Slack App」と GAS で Slack にメッセージを投稿する

最近,「Slack App」と GAS で自分の日常生活を便利にするアプリを作っております.そのため現在は両者を勉強中で,その時に得た知見をまとめようと思います.

今回はメッセージを投稿するという基本となる機能についてまとめます.今までは「Incoming Webhook」をよく利用していましたが,チャンネル毎に Token を生成しないといけないため.設定次第では色々なチャンネルに投稿できる Bot の Token を利用できる Slack App を利用します.

やり方

完成イメージ

特定のチャンネルにユーザ名と絵文字をカスタマイズした状態でメッセージを送ります.こんな感じでメッセージが投稿されるイメージです.

f:id:bake0937:20200323232711p:plain

Slack App の作成

Slack API のページから Slack App を作ってみましょう. api.slack.com

「Create New App」を押して,App Name と Slack のワークスペースを選択します.投稿したいワークスペースを選択することで作成することができます.

f:id:bake0937:20200323231412p:plain

作成後,「App Home 」にある「App Display Name」 をの「Edit」を押し,「Display Name」と「Default username」を追加しましょう.この設定をしておかないとワークスペースに Slack App をインストールすることができないため注意です.

f:id:bake0937:20200327093936p:plain

GAS を書く前に Slack App の設定変更

コードを書く前にchat.postMessageの仕様を確認してみましょう.

api.slack.com

何やら「autoship」という気になる項目があるので見てみます.

f:id:bake0937:20200323130034p:plain

どうやらユーザ名とアイコンを設定したい場合はchat:writeに加えて,chat:write.customizeという「Scope」を追加する必要があることがわかります.

f:id:bake0937:20200323130438p:plain

というわけで,Scope を設定しましょう

f:id:bake0937:20200323125715p:plain

Scope を設定したら,「Install App for Workspace」でワークスペースにインストールし, Bot の Token を生成しましょう f:id:bake0937:20200323223956p:plain

ワークスペースにインストールすると「Bot User OAuth Access Token」が表示されるので,コピーします.

f:id:bake0937:20200323224538p:plain

GAS を書いてみる

Google Drive にアクセスし,GAS のエディタ画面を開きましょう.今回は以下のような関数を作ります.

function postMessage() {

  const url = "https://slack.com/api/chat.postMessage";

  // 投稿するチャンネルやメッセージ内容を入れる
  const payload = {
    "token" : "Bot User OAuth Access Token",
    "channel" : "random",
    "text" : "Slack App のテストだよ",
    "username": "Slack App",
    "icon_emoji": ":slack:"
  };

  const params = {
    "method" : "post",
    "payload" : payload
  };

  // Slackに投稿
  UrlFetchApp.fetch(url, params);
}

動かしてみる

投稿するチャンネルにインストールした Salck app を追加します.

f:id:bake0937:20200323224955p:plain

実行する関数にpostMessageを選択し,「▶」で実行します.

f:id:bake0937:20200323225259p:plain

Slack を見てみると設定した内容でメッセージが投稿されていることがわかります.

f:id:bake0937:20200323232711p:plain

まとめと所感

今回は「Slack App」と GAS で Slack にメッセージを投稿する方法についてまとめてみました.「Incoming Webhook」を使ったやり方の場合,従来のようなやり方で上手くいくと思いますが,今回ポイントになったのは作成した Slack App に chat:write.customize という Scope を追加するところかなと思いました.

Slack は日々頻繁にアップデートしているので,Slack のアプリを作るときは公式のドキュメントを必ずチェックしなら進めるのがベストですね.

GAS は clasp という CLI ツールを使うと TypeScript が使えるようなので,作っているアプリの機能の実装が揃ってきたら勉強がてら挑戦します 💪💪

「Toggl Button」で気軽にタイムトラッキングができることを知った

先日,Pomello + Trello を使ってポモドーロテクニックでタスクをこなせることについてまとめた.

bake0937.hatenablog.com

あれから,上記の方法で試していたが,Toggl の Chrome 拡張の「Toggl Button」+ GitHub(or GitLab or BitBucket) が思っていたよりも使えそうだったので,まとめてみる

使い方

まずは「Toggl Button」をインストールする.

chrome.google.com

「Toggl Button」の設定画面にある「Integration」に移動し,連携したいサービスを選ぶ.今回は GitHub と連携をしてみるため,フィルターに GitHub と入力し,チェックボックスにチェックを入れる.

f:id:bake0937:20200316063210p:plain

GitHub の issue や Pull Request の画面を見てみると,「Start timer」というボタンが表示されるため,これを押すとタイムトラッキングが開始される.

f:id:bake0937:20200316063450p:plain

「Toggl Button」の設定画面にある「Pomodoro」でなんとポモドーロテクニックでタイムトラッキングもできる.自動で5分休憩ができる設定にはできないが,25分単位でアラートを出したりタイムトラッキングを止めることができる. f:id:bake0937:20200316063657p:plain

上記の画像の設定で「Start timer」を実行し,「Toggl Button」を押してみると下記の画像のような表示になる.

f:id:bake0937:20200316070148p:plain

Toggl のデスクトップアプリも利用すれば,Google Chrome を閉じてしまった場合でも,デスクトップアプリからタイマーを止めたり再スタートができる.私の場合,まずは issue や Pull Request 上にある「Start timer」を実行してからはデスクトップアプリでタイマーの管理をしているのが今の使い方になる.

toggl.com

まとめと所感

今回は「Toggl Button」についてまとめてみた.Toggl 自体は前々から知ってはいたが,連携したいサービスがかなり多いことやタイムトラッキングしたいのが issue や Pull Request に紐付いていることが多いことに気づいたため,Toggl を見直すことができた.

GitHub(or GitLab or BitBucket) には カンバン機能もあるため,併用すればタイムトラッキングとタスク管理がさらに捗りそうだと感じた.

Mac と iPod touch(iPhone) で音楽を同期する方法がいつの間にか変わっていた

かれこれ iPod touch を4,5年利用しており,当たり前のように Mac Book Pro (以下,Mac)と iPod touch で同期をして音楽を聴いていた.

しかし,突然 iPod touchMac に接続しても「iTunes」が立ち上がらず,音楽の同期が始まらない...原因を調べたところ今まで使っていた「iTunes」がこれから「ミュージック」へこれからシフトしていくことにより,同期の方法が変わったらしい.

今回はその同期の方法についてまとめていく.

やり方

同期の方法は簡単で以下の公式ページに沿って進める. support.apple.com

support.apple.com

音楽の追加や削除などは「ミュージック」を起動して操作をする.

そしていつも通り,iPod touchMac に接続すると,なんと Finder のサイドバーに iPod touch のデバイスが表示される.

f:id:bake0937:20200309121931p:plain

表示された iPod touch のデバイスをクリックすると,「iTunes」で表示されたような画面になる.

f:id:bake0937:20200309121933p:plain

あとは,この画面に表示されている「同期」を押せば音楽を同期が始まる.

まとめと所感

今回は技術的な内容ではないが,頻繁に行う作業かつググるのに少し手こずったのでまとめてみた.間違えて「Apple Music で「ライブラリを同期」を有効にする」方法で解決しようとしていた...

同じように困っている人がこの記事を参考にしてもらえると...というか数週間後の自分への記事だなこれ...

yarn コマンドで「The `yarn' command exists in these Node versions:」と表示された場合の対応

yarn を npm(今回の場合は,ndenv で Node.js インストールしている) でインストールしている状態で,yarn コマンドを実行すると,以下のように yarn がインストールされた Node.js にバージョンを変えるように案内され,yarn コマンドを使うことができない時がある.

$ node --version
v12.16.1
$ yarn --version
ndenv: yarn: command not found

The `yarn' command exists in these Node versions:
  v8.12.0
  v8.5.0

暫定対応

暫定対応としては npm で管理している yarn を削除すれば 使えるようになる.まずは,yarn がインストールされているディレクトリを確認する.

確認後,そのディレクトリをrmコマンドで削除をすれば,yarn コマンドを使うことができる.

$ which yarn
/Users/ユーザ名/.anyenv/envs/ndenv/shims/yarn
$ rm -rf /Users/ユーザ名/.anyenv/envs/ndenv/shims/yarn
$ yarn --version
1.21.1

恒久対応

これで yarn コマンドが使えるようになったが,yarn initなど普段通りにyarn を使っていると yarn コマンドのディレクトリがまた/Users/ユーザ名/.anyenv/envs/ndenv/shims/yarnとなるため,また,rmコマンドで削除する必要になってしまう.

そのため,都度都度この作業をしないようにするためには,yarn は npm で管理しているものではなく,Homebrew などのパッケージ管理ツールで管理しているものを使うようにすれば良い.

Homebrew で yarn をインストールする方法はこちら. classic.yarnpkg.com

そのため,今回の場合はv8.12.0v8.5.0に yarn がインストールされているため,これらのバージョンにインストールされている yarn をアンインストールすれば良い.

$ ndenv global v8.12.0
$ npm uninstall -g yarn
removed 1 package in 0.163s
$ ndenv global v8.5.0
$ npm uninstall -g yarn
removed 1 package in 0.145s

一旦ターミナルを再起動し,yarn がインストールされたディレクトリが Homebrew でインストールされたディレクトリになっていればOK

$ which yarn
/usr/local/bin/yarn

まとめと所感

今回は yarn コマンドで少し詰まったことについてまとめてみた.暫定対応の方法を都度都度実施すれば良いが,こういう手間は塵も積もれば山となるので,こういう小さい手間はこれからもドンドン省いて,少しでも生産性を上げていく.

Pomello を使ってポモドーロテクニックを Trello 上で行ってみた

ノートやタスク管理として Notion を使っていたのですが,最近,タスクはポモドーロテクニックでこなしてみたくなってきました.ポモドーロテクニックのアプリは沢山ありますが,今回は「Pomello」というポモドーロテクニックを Trello 上で行うことができるアプリを使ってみたのでまとめてみます,

f:id:bake0937:20200224230352p:plain

前提

Pomello を利用するには,Trello のボードが必要なため事前にアカウント登録とボードの作成が必要です.

trello.com

使い方

以下の,公式サイトからアプリのダウンロードとインストールをします.

pomelloapp.com

アプリを起動すると以下のような小さなウィンドウが表示されます. 左にある点の部分をクリックします.

f:id:bake0937:20200224224104p:plain

ダッシュボードのアイコンをクリックします

f:id:bake0937:20200224224306p:plain

「Connect」をクリックすると Trello へ接続するウィンドウが表示されるため表示された内容に沿って連携させます.

連携すると以下のように Trello で作成したボード名が表示されます.

f:id:bake0937:20200224224734p:plain

Pomello 上でタスクを選択できるようにするために,ボードの中にあるリストにチェックをつけましょう.一見,ラジオボタンに見えて1つしか選べないように見えますが複数選べます.

f:id:bake0937:20200224224941p:plain

設定したら,ダッシュボードの画面を閉じて,メインメニューまたは更新のアイコンを押すと以下のようにボードが設定された状態になります.

f:id:bake0937:20200224225339p:plain

「Pick a task」を押すと,選択したいリストや設定されているボードの中にあるタスクを選択できます.

f:id:bake0937:20200224225504p:plain

「Do it」を押すとタイマーが実行されます.さぁタスクに着手しましょう!!! f:id:bake0937:20200224225607p:plain

1ポモドーロが終わると以下のように🍅のマークと実行した回数が表示されます.これで1つのタスクに掛かった時間を計測できますね!

f:id:bake0937:20200224225722p:plain

まとめと所感

Pomello を使ってポモドーロテクニックを Trello 上で行ってみました.Pomello の操作は最初のうちは慣れが必要かもですが,そこを乗り越えると良い感じに使えこなせそうだと感じました!

もう少し使ってみて問題なさそうならタスク管理は Trello に移行しようと思います.ここ数年で Trello を使ったら離れたりとしていましたが今回で落ち着くことを願いながら使っていきます 😅