Yamotty Blog

Make Something People Want

非プログラマがSlackで家族コミュニケーションをハックする

blog.8arrow.org

この記事を読んで「真似したい!」と思ったが、実際にHubotにcofeescriptでバリバリ動かしていくほどのスキルを持たないため、泣く泣く断念した非エンジニアは結構いるんじゃないかと思っている。

僕もその一人だ。

僕は家族(主に妻)とのリモートコミュニケーションはほとんどLINEで済ませていたが、Slackへ乗り換えた。 やはり仕事で使う手に馴染んだツールの方がはかどるし、非エンジニアでもSlackの拡張性の恩恵を受けることはできる。

問題は妻のほうで、彼女にLINEを超える価値を提示してSlackへ乗り換えてもらう必要があった。そこで僕は普段LINEで投げ合っている「息子の写真」をより楽しく簡単に共有してさらに拡張し、一緒に ほわほわ体験 を味わうツールに改造することで、妻をSlackへ引き込むことに成功した。以下が顛末である。

具体的に行ったこと

具体的には以下の3つを行った。「全く機能性はないが本人たちが楽しい」という妻の情緒面をマーケティングし、成功を収めた次第。

  • 息子emojiを創る
  • slackbotで息子と仮装会話
  • GoogleAppsScriptを使って息子に喋らせる

もちろんどれも非エンジニアがすぐに実装できる内容なので、世の中の文系職の方々はこれを機にSlackに乗り換えて、幸せな家族コミュニケーションに精を出すと良いと思う。

1 / emojiにしてSlackで息子に会う

Slackには好きな画像をemoji(絵文字)として登録し使えるという神機能がある。 この機能を使わない手はありません。早速お気に入りの画像を登録して、夫婦間でemojiのラリーを始めましょう。

登録手順

※emojiの登録はPCから行ったほうが良いです

  • Custom Emoji(https://チーム名.slack.com/customize/emoji)へアクセス
  • emojiタブで好きな画像を絵文字にする
    • (1) emojiの名前を決める
    • (2) ファイルを選択する(縦横128pxの正方形)
    • (3) saveする f:id:yamo3:20160122203414j:plain

登録したEmojiの使い方

  • チャット時には:設定したemoji名:と入力することでemojiを召喚することができます。
  • 例えば僕が創ったshinjiというemojiを使いたいときは:shinji:と入力するとおk。

こんなかんじ

f:id:yamo3:20160122204928j:plain

2 / slackbotを使って息子に会う

続いてSlackに標準実装されているslackbotを使ってみよう。slackbotは特定のscriptに対して一意のレスポンスを決めることができる。 僕は例えば以下のように「しんじくれ!」とチャットするとslackbotがslackに登録された全ての息子emojiを返すというレスポンスルールを設定している。妻はこの仕組が気に入ったようで、ちょくちょく全emojiが飛んでくる。

ほかには、特定の頻出する言葉に対して地雷のようにレスポンスを当てたり、slackに投稿した画像を呼び起こすレスポンスを作っても楽しい。様々な使い道があるので家族間で楽しく使うと良いと思う。

設定手順

f:id:yamo3:20160123234520j:plain

  • Slackbot Response(https://チーム名.slack.com/customize/slackbot)へアクセス
  • When someone saysにslackbotに拾わせたいscriptを入れて、Slackbot respondsにその際のレスポンスを入れてsave

こんなかんじ

f:id:yamo3:20160123234744p:plain

地雷レスポンス その1

f:id:yamo3:20160902164254p:plain

地雷レスポンス その2

f:id:yamo3:20160902164329p:plain

たまらんな〜。

3 / 応用編 : GoogleAppsScript(GAS)を使って息子になんか喋らせる

最後に応用編。ちょっぴりGASを書きます。まずはその前の準備としてGoogleSheetsでこんな感じのシートを創りましょう。 f:id:yamo3:20160122210413p:plain - A列とC列は要素を入力しているもので、 - B列とD列で関数を使ってそれぞれemoji形式(::で囲む)とセリフ形式(「」で囲む)に加工 - B列とD列をランダムで組み合わせて、emojiにいろいろ喋らせるbotを創ります

トリガーを設定して自動で実行

Gsheetsのツール>スクリプトエディタを開き、以下をコピペしましょう。

function shinjiBot() {
  var token = 'xoxp-18397965138-18393934421-19149143655-865b9a65f0';
  var slackApp = SlackApp.create(token); 
  var options = {
    channelId: "#general", //チャンネル名
    userName: "おらびんび", //投稿するbotの名前
    iconUrl: "https://s3-ap-northeast-1.amazonaws.com/wacari-server-dev/uploads/user/avatar/orabibbi_200x200.png",
  };
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
  var lastrow = sheet.getLastRow();
  var lastcol = sheet.getLastColumn();
  var sheetdata = sheet.getSheetValues(1, 1, lastrow, lastcol);//がさっと取得
  var row2 = Math.floor((Math.random() * 31)) + 2;
  var text = sheetdata[row2-1][3];
  var Message = slackApp.postMessage(options.channelId, text , {username: options.userName, icon_url: options.iconUrl});
  Logger.log(Message);
}
  
  

ちょっぴり項目説明

 postUrl: 'https://slack.com/api/chat.postMessage',
  token: 'xoxp-...', // Slackのtoken
  channel: "C0...", // #general

この辺の変数は以下の記事を読みながら設定すると良いです。

qiita.com

var row = Math.floor((Math.random() * xx) + 2);
  var shinji = sheetdata[row-1][1];  
  var row2 = Math.floor((Math.random() * yy) + 2);
  var text = sheetdata[row2-1][3];
  • この辺りは変数をそれぞれどの程度シートに入れているかによってxxとyyに入れる数値がかわります。
  • 例えば2~21行目にある値をランダムで呼び出すように設定する場合はxx=20となります。

トリガーを設定する

  • 上記のコードを決まった時間に自動で発動するようにトリガーを設定します。
  • スクリプトエディタ内で例えば毎日15~16時のあいだに実行のようなトリガーを設定しましょう。

動くとこうなる

f:id:yamo3:20161030013303p:plain

ランダムで息子のemojiがなんかしゃべります。ほわほわ。

大満足

f:id:yamo3:20160123235758p:plain

妻も喜んでくれたようです。

4 / まとめ

  • emoji/slackbot/そしてほんのわずかなGASを使って、全く役に立たないが感情的に楽しくなれる家族向け・Slackカスタマイズをお届けしました。
  • 文系職でもかんたん導入できるので、これを期に奥さんや彼女をSlack worldに引き込みましょう。

5 / 追記(2017/01/04)

仕事と家庭でSlackを併用すると、時折チャネルを間違って誤爆するケースが有る。それを防ぐため、特定のチーム/チャネルにのみテキストが送れる(ファイルは不可)「OneChannel」というアプリを使用している。

OneChannel for Slack

OneChannel for Slack

  • Copper Technologies, Inc.
  • 仕事効率化
  • 無料

アプリ起動して、文字入力→SENDと2stepでテキストを送れるのでかなり重宝してる。