Slackを中心に世界は廻っている

2020/06/21

VR勉強会 #3 / #study_in_vr

jiyuujin

  • 複雑なUIを作るのが好きです
    • Vue/Nuxt/React/Next/Scala/Swift
  • v-kansai/kansai.ts/..
  • Profile site by Gatsby.js since 2020/03
    • https://yuukit.me
  • Tech blog by Nuxt.js since 2018/10
    • https://webneko.dev

VR勉強会って何よ?😎

完全に興味本位先行

後からネタを考えました😇

情報の仕入れ、

皆さまはどうしてる🤔

自身が日々やっていること

  • はてなエントリーやnoteのRSSを利用する☑️
  • ツイッターを使わない訳
    • 雑多で見落とす可能性もある
    • 自分だけのslack、専用のchannelで情報を精査しながら必要なものをスプレッドシート(Firestore)に上げて再度目を通したり
  • Nuxt.jsを使って作っている管理画面上でチェック👀

Webアプリとして✍️

ポイント

  • 自主的に入力することも可能、というよりもともと入力できるようにしていた
    • ​タイトル
    • URL
    • メモ書き程度の説明文
    • カテゴリータグ
    • イベント
  • 1個1個登録するの、ってどうなの?🤔
    • GASを使った自動入力により成立
  • ダークモード対応

やや凝ったデザイン😂

使ってるツールは👀

今日出てくる登場人物

  • Slack
  • Google Apps Script
  • Google Cloud
  • Firestore
  • IFTTT + hatena entry
  • Nuxt.js (Vue.js)
  • Netlify

IFTTTを使って監視🙋‍♀️

SlackからSpreadsheet

:reaction: を取るには

const token = PropertiesService.getScriptProperties()
  .getProperty('SLACK_ACCESS_TOKEN');
const channel = PropertiesService.getScriptProperties()
  .getProperty('SLACK_CHANNEL');

const json = JSON.parse(
  e.postData.getDataAsString()
);
const event = json.event;

// 指定の顔文字リアクションでなければ無視
if (event.reaction !== 'lgtm') return;
Logger.log(event.reaction);

リアクションを受け発火

getPost(e) で

const slackParams = JSON.parse(
  e.postData.getDataAsString()
).event;
const messageTs = slackParams.item.ts;
const messageTsDate  = new Date(messageTs * 1000);

/api/conversations.history を叩く

const baseUrl = 'https://slack.com/api/conversations.history';
const baseParams = [
  'token=' + token,
  'channel=' + channel,
  'oldest=' + messageTs,
  'latest=' + messageTs,
  'inclusive=' + true
];

const latestMessage = '';
const params = baseParams.concat([latestMessage]).join('&');
const encodeType = 'application/x-www-form-urlencoded';
const res = postMessageToSlack(baseUrl + '?' + params, encodeType);

function postMessageToSlack(url, encodeType) {
  const res = UrlFetchApp.fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': encodeType
    }
  });
  return JSON.parse(res);
}

リアクション取ったメッセージを取得できる👌

💪💪💪

さらに力を入れたこと

  • 年月に合わせてシート名を変更
  • 取得した情報をフロント (Nuxt.js) に合わせ成形

年月に合わせてシート名を変更

存在チェックにより保存先を決定

const today = new Date();
const sheetName = Utilities.formatDate(
  today,
  'Asia/Tokyo',
  'yyyyMM'
);

const sheet = SpreadsheetApp
  .getActive()
  .getSheetByName(sheetName);

// 存在していない場合新たに作る
if(!sheet) SpreadsheetApp.create(sheetName);

取得情報をフロントに合わせ成形

title url に対し自動入力

export interface TipForm {
  title: string
  url: string
  description: string
  tags: number[]
  event: number
  time: Date
}

シートからNuxt.js

そもそも、なぜNuxt.jsを?

データは先のGASにより自動入力

ここでFirestoreにアクセスする準備を整える

1VUSl4b1r1eoNcRWotZM3e87ygkxvXltOgyDZhixqncz9lQ3MjfT1iKFw

https://github.com/grahamearley/FirestoreGoogleAppsScript

ライブラリからキーを追加すれば

updateDocument を使って

addDataToFirestore({
  time: messageTsDate,
  title: messageText,
  url: matches[0]
});

function addDataToFirestore({ time, title, url }) {
  const certification = initFirestore();

  const firestore = FirestoreApp.getFirestore(
    certification.email,
    certification.key,
    certification.projectId
  );

  try {
    firestore.updateDocument('tips/' + getUuid(), {
      time: time,
      title: title,
      url: url,
      description: '',
      event: 0,
      tags: []
    });
  } catch (e) {
    Logger.log(e);
  }
}

後はNuxt.jsでFirebaseを使う

今後やりたいこと

Reading for All

Firebase Auth が障壁

みんなが見られるようになると良いよね😇

情報の仕入れ以外で🤔

色々とやっていること

  • ISSUEの残状況を把握するため、Github API v4 と Google Apps Scriptを使って自動化している
  • 毎月の定期処理の一環としてISSUEやPRを作る時などの場面でも Github API v4 と Google Apps Scriptを使って自動化をやっている

他、ブログに書きました

現在のお仕事は

  • Next.js + AppSync のサーバレス環境で、新しいしごと情報を管理する両サイトの制作を進めてます
    • 実際のおしごとで使う用の本番アプリ
    • 本番で使うため、事前に作ったデモアプリ (趣味用)
  • Vue CLI ベースのMPA構成を構築、コンポーネント単位でリプレースを進めてます

こんな私がお送りしましたー😅

Thank you..🙇‍♀️

Slackを中心に世界は廻っている

By jiyuujin

Slackを中心に世界は廻っている

VR勉強会 #3 でGASやNuxt.jsを中心に

  • 814