Upgrade to Pro — share decks privately, control downloads, hide ads and more …

mWWDC2017

ahiru
May 27, 2017

 mWWDC2017

mikutter World Wide Developers Conference 2017 の資料

ahiru

May 27, 2017
Tweet

More Decks by ahiru

Other Decks in Technology

Transcript

  1. ⽇本⼈は敗戦後、Shift-JISやJAP106などをGHQ
    に押し付けられて、結果として情報⼯学の発展に
    ⼤幅な遅れを取りました。私も⼩学⽣の頃、
    プログラミングを始めたら習ったこともない英語
    が並んでいて挫折したものです。またあなたたち
    はASCII以外⾮対応という、⽇本の⼩学⽣でも作
    らないような低品質なサービスを沢⼭公開してき
    ました。そうやって代々私達が虐げられてきたこ
    とを、あなたたちが追体験できる貴重な機会が、
    このmikutterであるわけです。

    View full-size slide

  2. ⾃⼰紹介
    lあひる
    lNitech
    lTwitter
    「あひる焼き」とつぶやけばわかる
    lEJUG, mikutter

    View full-size slide

  3. いいか、みんな
    (゚д゚ )
    (| y |)

    View full-size slide

  4. mikutterとSlackでは単なるておくれだが
    mikutter ( ゚д゚) Slack
    \/| y |\/

    View full-size slide

  5. ⼆つ合わされば mikutter_slack となる
    ( ゚д゚) mikutter_slack
    (\/\/

    View full-size slide

  6. つまりておくれだ
    mikutter_slack ( ゚д゚)
    \/| y |)
    mikutterの作者です

    View full-size slide

  7. ( ゚д゚)
    (| y |)
    Ban Stop Me Premiamu!!

    View full-size slide

  8. 最近のmikutter
    • mikutter は多種多様なサービスと連携するための機能を強化し
    ている
    • プラグインを導⼊することで新たなサービスに対応できると
    いった柔軟性・拡張性の⾼さを持つ
    • Twitter はmikutterの機能のうちの⼀つにすぎない
    • 〇〇のサービス⽤のプラグインマダァ-?(・∀・ )っ/⼐⌒☆チンチン
    ようこそプラグイン開発沼へ =͟͟͞͞(☞ ՞ڼة◔=͟͟͞)☞ (・∀・ ;)

    View full-size slide

  9. 作者の陰謀

    View full-size slide

  10. 作者の陰謀

    View full-size slide

  11. mikutter_slack
    • Slack とは
    • プラグイン概要
    • 実装
    • 使⽤ライブラリ
    • できていること
    • 今後の予定

    View full-size slide

  12. Slack とは
    • チャットツール
    • Electron ベースのクライアントで各種OSに対応
    • Win, macOS, Android, iOS, Linux(beta)
    • ⾊々なサービスとの連携が可能
    • GitHub のアクティビティの通知、Jenkins の通知などなど…
    • 絵⽂字機能やコマンド機能など楽しい機能も盛りだくさん
    • 最近は通話もできるようになった
    • API も提供されており、Bot の開発も盛んに⾏われている

    View full-size slide

  13. Slack の API
    • Restful な API が⽤意されている
    • ⼤きく分けて Event API と RTM API がある
    • Event API
    • ⼀般的なよくある REST API
    • POST または GET で⾊々な情報を取得する
    • RTM API
    • RealTime Messaging API の略称
    • WebSocket を⽤いたリアルタイムなイベントのやり取りを実現

    View full-size slide

  14. プラグイン概要
    • Slack を使えるようにする mikutter プラグイン
    • コアプラグインと gui プラグインに分離している
    • ライブラリの採⽤によって Event API のみでなく、RTM API
    に対応
    • mikutter 3.5 から導⼊された Retriever Model (現 Diva Model)
    を使ったモデルクラスによる実装
    • 公式レファレンスと mikutter の作者を〆ることで最新の情報
    を得ている
    • 今後出てくるであろう、他サービスのプラグインのプロトタイ
    プになることを⽬指している

    View full-size slide

  15. 要件
    • 必要要件
    • mikutter: 3.6.0-develop
    • ruby : 2.3
    • 推奨要件
    • mikutter: 3.6.0-develop
    • ruby : 2.4

    View full-size slide

  16. 実装
    • 主なモジュール
    • slack_gui.rb

    View full-size slide

  17. slack_gui の機能
    • GUI 周りを⼀通り担当する
    • チャンネルのタブを開く
    • 画像を開く
    • 投稿(未実装)

    View full-size slide

  18. 使⽤ライブラリ
    • slack-api
    • RTM API や Event API などを Ruby で叩ける
    • WebSocket 周りもよしなにしてくれるので、mikutter 側の実装に専
    念できる
    • 作者のレスポンスが早くていい(重要)
    • サンプルも丁寧でドキュメントもしっかりしている(重要)
    • MIT ライセンス

    View full-size slide

  19. slack-api
    • Slack は RTM 接続時に⼤量のデータを送ってくる
    • だいたい 72KB ほどの JSON ⽂字列 (約 7 万字)
    • 当初、このライブラリはこのデータを破棄していた
    • 作者が RTM を使っていなかった
    • これに関して Twitter でライブラリ作者が捕捉・対応してくれた
    • ありがとうございます
    • その後バグを⾒つけ思い切って PR 出して少しばかり貢献した

    View full-size slide

  20. 実装
    • 主なモジュール
    • api/
    • model/
    • entity/
    • slack.rb

    View full-size slide

  21. 実装 ‒ slack.rb

    View full-size slide

  22. 実装 ‒ slack.rb
    • mikutter が最初にロードする実⾏ファイル
    • mikutter の設定画⾯の定義
    • 抽出データソースの定義
    • RTM への接続処理
    • ⼀般的に mikutter のプラグインとして必要なものを実装
    • これ⾃体はかなりスリムで実態はほとんど model や api に実装
    することでslack.rb のスリム化の実現と可読性を上げた
    • たった 75 ⾏!

    View full-size slide

  23. 実装 ‒ model

    View full-size slide

  24. 実装 ‒ model
    • Retriever Model (以後 Diva Model) によって
    クラスモデルを提供
    • 各モデルクラスは親であるDiva Modelを継承する
    • モデルの定義によって可読性の向上
    • モデルごとに、そのモデルが必要な実装を詰める

    View full-size slide

  25. 実装 ‒ model
    class Message < Diva::Model
    include Diva::Model::MessageMixin
    field.has :user, Plugin::Slack::User, required: true
    field.string :text, required: true
    field.time :created
    field.string :team, required: true
    field.string :ts, required: true
    entity_class Diva::Entity::URLEntity
    entity_class Plugin::Slack::Entity::MessageEntity
    end

    View full-size slide

  26. 実装 ‒ api

    View full-size slide

  27. 実装 ‒ api
    • slack-api を通して API から得た情報を model に格納したり、
    情報をキャッシュしたり
    • ネットワークが介在するので基本的に Deferred オブジェクト
    によって形成されている
    • Deferred オブジェクトを返すのでエラーハンドリングや⾮同期
    が格段に楽に
    • Auth は闇
    • 抽象化によって処理がわかりやすい・追いやすいコードに

    View full-size slide

  28. 実装 - api
    • 実際の画⾯を⾒せる

    View full-size slide

  29. 実装 - api

    View full-size slide

  30. 実装 ‒ entity

    View full-size slide

  31. 実装 ‒ entity
    • Slack の特殊な⽂字( @, # などから始まるものや URL)は
    内部的には <@hoge>, <#foo>, といっ
    た形になっている
    • それらをパースする機能を持つのが MessageEntity
    • mikutter 提供する Diva::Entity::RegexEntity によって実現
    • filter() で対象をフィルタリングし、その対象を整形し、返す

    View full-size slide

  32. 実装 ‒ entity
    MessageEntity = Diva::Entity::RegexpEntity
    .filter(/マッチ/, generator: lambda { |s|
    e_url = s[:url]
    e_face = s[:face]
    e_open = s[:open]
    s.merge(url: e_url, face: e_face, open: e_open)
    })
    .filter(…)

    View full-size slide

  33. 実装 ‒ entity

    View full-size slide

  34. できてること
    • リードオンリー
    • パブリックチャンネルの取得
    • プライベートチャンネルの取得
    • そのユーザの権限で取ることができるすべての情報の取得
    • ただし取れているだけ
    • 絵⽂字を画像として開く
    • チャンネルを新しいタブで開く

    View full-size slide

  35. 今後の予定
    • World に対応
    • 書き込みに対応
    • マルチアカウントに対応
    • Bot の投稿に対応
    • 切断時の再接続処理
    • slack-api の依存関係で⼊ってくるライブラリのバージョンを
    どこかに明記する

    View full-size slide