Next.js と mstdn-api
による
ウェブサービス開発

@the_boss@mstdn.jp

2017/8/19
Mastodon Developers Kaigi #0

mstdn.jp で活動しています

(以下、 jp = mstdn.jp)

{
    "display_name": "THE BOSS ♨",
    "url": "https://mstdn.jp/@the_boss",
    ...(snip)...
}
avatar
avatar

jp で公開した
マストドン関連サービス

  1. 全ブロブロ解
    • フォロー・フォロワーリセット支援サービス
    • 公開停止中
  2. BirdKiller
    • 鳥を燃やすウェブサービス
  3. TootStar
    • ふぁぼ・ブースト集計サービス

luckyapps.herokuapp.com

2. BirdKiller

2. BirdKiller

  • 特定のクライアントをミュートするサービス
  • ブラウザ上で local timeline を streaming
    • 正規表現にマッチするクライアント名をミュート

某連携ツール (鳥) を自動ミュートしたかった

3. TootStar

3. TootStar

  • ふぁぼ・ブースト集計サービス
  • ブラウザ上でログインユーザの statuses を取得して集計
    • 結果を localStrage に保存
    • ふぁぼ数、ブースト数の多い順に表示
    • 集計結果をトゥートする機能

Favstar みたいなサービスが欲しかった

アプリ構成

  • JavaScript
  • Node
  • Next.js
    • Node で動く Web Application Framework
    • React
  • mstdn-api
    • Universal な Mastodon API ライブラリ

アプリ構成

    Node                           Browser
+-------------+                 +---------------+
|             |                 |               |
|   Next.js   | <-------------> |     React     |
|             |                 |               |
+- mstdn-api -+                 +-- mstdn-api --+
     |                               |
     +-----> Mastodon Instance <-----+

  Register App                Streaming,
  & OAuth                     fetch statuses/users, etc.

Node 側: アプリ登録、認証の時だけインスタンスと通信する

Next.js と mstdn-api

Next.js

  • Node で動く Web Application Framework
  • React
  • SSR

github.com/zeit/next.js

Next.js

インストール:

npm i -S next

ES6 with Babel,
React,
CSS-in-JS,
hot-reloading env

モダン JS 入門

ES6 や React のよくある環境構築手順

  • Babel 入れて設定書く
  • React とか Express とか入れる
  • Babel の React 用プラグイン入れて設定書く
  • Webpack みたいなの入れて設定書く

→ 環境つくるのめんどい

他、「Electron もあるよ」「React vs Angular」
「Webpack vs Broserify vs Gulp」etc...

→ 選択肢多すぎ

Next.js でモダン JS 入門

npm i -S next

  • とりあえず ES6 で React を書いて動かせる
  • ホットリロード有効

楽ちん

Next.js

  • Rails や Angular のようなフルスタック FW ではない
    • ORM 何使うか
    • プロジェクト構成 どうするか
    • etc...

mstdn-api

mstdn-api

  • JS で Mastodon の API を簡単に呼び出せるライブラリ
  • Universal (Node, ブラウザ同じように使える)
  • 同種の JS ライブラリにない特徴
    • Streaming API が簡単に扱える
      • Node でもブラウザでも
    • TypeScript で書かれている

mstdn-api

JavaScript 用 Mastodon API ライブラリ比較

Name          | Platform  | Stream | Lang | License
--------------+-----------+--------+------+---------
libodonjs     | ?         | x      | JS   | MIT
mastodon.js   | Browser   | o      | JS   | Apache2
node-mastodon | Node      | x      | JS   | MIT
mastodon-api  | Node      | o      | JS   | MIT
mstdn-api     | Universal | o      | TS   | MIT

mstdn-api は Universal で Stream 対応、
TypeScript 対応

mstdn-api

mstdn-api

似たような名前の npm パッケージいろいろ

  • これ
    • mstdn-api
  • これじゃない
    • mastodon-api
    • mstdn
    • node-mastodon
    • mastodon.js

開発で気をつけていること

開発で気をつけていること

  • インスタンスに余計な負荷をかけないために
    • Register App を何度もしない
    • 繰り返し処理にはスリープを入れる
      • インスタンス管理者の皆様
        ご迷惑をおかけしてたら
        ごめんなさい。。。
      • お叱りは @the_boss@mstdn.jp にお願いいたします

まとめ

BirdKiller, TootStar
luckyapps.herokuapp.com
github.com/luckybeastakatheboss/luckyapps

Next.js
WAF with ES6, React
github.com/zeit/next.js

mstdn-api
TypeScript で書かれた Mastodon ライブラリ
github.com/onsen-ui/mstdn