見出し画像

Misskeyに投稿した内容をpipedream経由でTwitterに投げる方法

大事なこと

  • 用法用量を守ったクロスポスト(投稿流し)

  • CWはこの方法のままでは伏せられないので各自で設定をいじくるor諦めることチャンネル投稿もそのまま流れる

  • なんなら画像も流せないから各自何とかするか諦メロン

  • ついでに無料プランだと(UTC基準の)1日に100件しか取得できない

  • この方法で取得される投稿はパブリック、ホーム、チャンネル投稿です


使う物と全体の流れ

使う物

  • Twitterアカウント(鍵垢可)

  • 自分のMisskey(鯖不問)のRSS

  • pipedream

    • 補足としてpipedreamと検索するとマルウェアという検索結果もでるが、ややこしいことに同名のマルウェアが居るらしく、今回使うpipedreamはOSS(GitHubにある)のAPI連携プラットフォームである

ざっくりした流れ

  • まずTwitter開発者ポータルでアプリを作る

    • 作った連携用アプリのコンシューマーキーとシークレットキーを取得

  • pipedreamのアカウント連携でコンシューマーキーとシークレットキーをそれぞれ入力して、自作アプリと連携

  • 次にMisskeyの自分のアカウントのプロフィールからRSSをコピーする

  • pipedreamのRSS連携でNEWアイテム〜みたいなやつを選ぶ

  • 時間は15分間隔以上にすること(修正するのにめちゃくちゃ苦労するので)

  • 一番下の項目にこのRSSフィードを利用したソースに名前をつける入力エリアがあるが、ここは必ず一意の名前(ダブリ厳禁)にすること(あとで管理がめんどくなるので)

  • Misskeyの投稿が取得できてることを確認

  • 次のアプリにpipedreamのfilterを選ぶ

    • ENDから始まるfilterを選ぶ

    • valueには取得したRSSの投稿内容部分を選択

    • containには一番上の項目(デフォルトのやつ)を選ぶこれはvalueのテキストに、次に設定する文字が含まれている時フィルターするという項目

    • 2nd valueには除外したい文字だけを入力する(例えば「りんご」を除外したいなら、何かで囲んだりせずりんごと入力する)このフィルターでは大体の人がリプする際に付いている@を除外する

    • フィルターが動作して、該当文字が含まれている時、endなんちゃら〜という灰色の表示が出ることを確認

  • 同様に#もフィルターする

  • 文字数フィルターを作る

    • LESS_THAN_EQUALを選ぶ

    • 2nd valueには140と入れる

  • 次のアプリにTwitterを設定連携は冒頭で終わってるはず

    • ツイート作成のテキスト部分にRSSの投稿内容部分を選択

  • 動作確認して終わり!!!


詳しい手順

1.開発者ポータルへの登録

まずTwitterの開発者ポータルへ登録する。
ワイは登録するときにここの内容を参考にしたけど、ちょっと古い情報なので注意。

補足事項としては、『一つの電話番号には10個までアカウントを紐付け出来る』(少なくとも、ワイは電話番号1に対して本アカとサブ垢が紐付けれてる)。
『最初に開発者ポータルに登録するのは鍵なしじゃないと登録出来ない』(真偽あやふや 未検証)(どうも最初に開発者ポータルに登録するのが鍵でも大丈夫っぽい……? 未検証)

開発者環境を手に入れるためにTwitterに送る文章は先述したリンク先の参考サイトのものをコピペしたり、必要な場合はGoogle翻訳なりDeepLなりで翻訳したものをコピペでオッケー。
参考サイトにもあるけど、個人で使うだけっていうのをしっかり書いとくと通りやすい気がする


2.開発者ポータルで連携用の個人アプリを作る

何の事やねん 何でそんなもん要るねん。

そう思われた方もいるかも知れないのでざっくり解説すると、TwitterのAPIが値上げしたので各自で連携用アプリ作ってくれや!ということである。

では連携用の個人アプリをご用意しよう。
ちなみに利用プランはFreeプランで問題なく運用できる。
連携用の個人アプリを作る大まかな流れとしてはこうだ。
プロジェクト作成

アプリ作成

アプリの権限などを設定

コンシューマーキーとシークレットキーを取得

2-1.プロジェクト作成

開発者ポータルでプロジェクトも何もない場合は、ダッシュボードに「create project」というボタンがあるはずだ。
しかし、人によっては「は??作った覚えもないのに既にプロジェクトが存在しているんだが??」という方もいらっしゃるかもしれない。それはサンプルプロジェクトだ。その場合はそれをベースに作っていくので、後述する2-3.アプリの権限などを設定、まで飛ぶので少々お待ちいただければ幸いである。

「create project」ボタンを押したら、まずはプロジェクトの名前を決める。
日本語が使えるので、日本語で入力していいのでテキトーに入力しておこう。
次に「use case」を選ぶのだが、とりあえず「Exploring API」を選んでおけば良い。
3つ目の項目はプロジェクトの説明だ。ここでも日本語でいいのでざっくり説明を書いておこう。
NEXTを押したらアプリの作成に進む

2-2.アプリ作成

早速アプリを作っていこう。
「App Environment」つまり「アプリ環境」だが、これはデフォルトの「Development」で良い。

次にアプリの名前を設定する。
日本語でいいので、「連携用個人用アプリ」みたいに自分で分かるような名前にしておこう。
最後にトークンが表示されるが、スマホのブラウザだと横長すぎてめちゃくちゃはみ出ている……が、ここで表示されるトークンは使わないし、何ならトークンは再生成出来るのでここではスルーする。
重要なのはその下の「App setting」だ。
「App setting」ボタンを押そう

2-3.アプリの権限などを設定

ここの設定をミスするとちゃんと連携出来なかったり、連携出来てても投稿できない可能性があるので、注意しよう。
入力するのは項目名の横に青文字が書かれている項目4つだけだ

まず「App permissions」は「Read and write」を選ぼうじゃないとそもそも投稿できないからだ

次に「Type of App」だが、2つめの項目である「Web App, Automated App or Bot」を選ぼう

3つめは「App info」の「Callback URI / Redirect URL」を設定するここをミスると連携が出来ないので、コピペミスをしないように気をつけよう。

まずは、開発者ポータルを閉じないように別タブや別窓でpipedreamのTwitterAPIについての解説ページに行く。
ぶっちゃけここを翻訳すれば、このページを読まなくてもTwitter連携の仕方が書いてあったりする。
このpipedreamのページをスクロールすると、真ん中の方に「Configuring Authentication Settings」の項目がある。
ここに、赤字でhttps://api.pipedream.com/connect/oauth/oa_gk6iBa/callback とあるのでこれをコピーする。
このコピーしたURLを開発者ポータルの「Callback URI / Redirect URL」に貼り付けする

4つめに「Website URL」を入力するのだが、ここには自分のTwitterアカウントのURLでも入れておこう。最後に一番下の「Save」ボタンを押して保存したら完了だ

3.コンシューマーキーとシークレットキーの取得

ここも設定をミスると連携が出来ないので、コピーしたものは、メモ帳など誰にも見えないところに貼り付けるなどして残しておくと良い。

アプリの諸々の設定が完了したら、今作ったアプリについての画面に戻されると思う。
恐らくそのページには作ったアプリの名前の下に「Settings」と「Keys and tokens」の項目があると思うので、「Keys and tokens」のタブを選ぼう。
「Keys and tokens」を選ぶと一番上に「Consumer Keys」の項目がある。
この項目の「Regenerate」ボタンを押すとコンシューマーキー(短い方)とシークレットキー(長い方)が再生成されるのでそれぞれコピーする。
これは後で使うので必ずメモ帳などに残しておこう

4.pipedreamで連携する

pipedreamでアカウントを作る。
ワイはめんどくさいからGoogleアカウントで作ったプランはフリープランで十分

5.連携フローを作っていく

5-1.まずスマホのブラウザの表示設定をPC版にする。この方が見やすいのだそして右上の「New」を押して連携フロー作成に入る

5-2.トリガーに自分のRSSを設定する。

  • まず自分のMisskeyアカウントのプロフィールページを開く。そして右上の「…」(3点リーダー)を押して、表示された項目から「RSSをコピー」を選んでコピーする。

  • 次にpipedreamの連携フロー作成画面に戻って、「Search app」にRSSと入力して「RSS」との連携を選択する。

  • 次に「New Item in Feed」を選ぶこれで新しい投稿があればトリガーが発動する(=最終的に新しい投稿があるたびTwitterに投稿される)。

  • 次に「timer」を設定する何分置きにトリガー判定をするかだが、これは15分間隔以上を推奨する。この時、時間がUTC基準になっておりテスト投稿の時にどれが最新か分かりづらいので、タイムゾーンを「Asia/tokyo」にしておく(これはあくまでも表示時間を分かりやすくするためのものであり、ここで設定して完成させたあとまたフローをいじくるとUTC表示に戻ってるが気にしてはいけない)。


  • 「Feed URL」に先程コピーした「自分のアカウントのRSSのURL」を貼り付ける。

  • URLを貼り付けたら、「select event」という項目を開く。すると、「Every 15 minutes」(15分間隔の場合)という文字の下に「Try Now」とボタンがあるのでこれを押す。
    これは「RSSの取得テストするで〜」のボタンである「Try Now」を押したあと、とりあえずMisskeyで何かしら投稿してみよう。

  • すると、「Select〜」という項目のところに黄色い目印が付いた自分のアカウント名が表示されてるはずだ。この目印のついたアカウント名を選択する。

  • 下に「Results」という項目があるのでこれを開く。薄緑の背景で「Success」と表示されてたら成功だ。

  • 「Exports」に何やら英語が表示されてるのでその中の「event」を選択すると、投稿したノートの詳細(ユーザーネームや投稿内容など)が表示されてるので、分かりやすいだろう。

  • 「Exports」にノートが取得されているのを確認したら、フィルター3種を作ります。

5-3. 3種類のフィルター設定

フィルター3種類(@除外、#除外、文字数判定)の設定もっと賢い方法あるかもしれないけど、ワイには個別フィルター3種類設定するのが早かった

というわけでまずはトリガーである「RSS」の枠の外にある「+」を押して、filterと入力緑のアイコンのフィルターAPIを選択する。

3つほど選択肢が出てくるのでまずは一番下、「End〜」とEndから始まる項目を選ぶこれは、条件を満たすと止まるフィルターだ2つの除外フィルターはこのEndから始まるフィルターを使用する

@ 除外フィルター
まず最初の項目、「Initial value」に投稿内容を設定する具体的には、「Initial value」を押すと、今取得してるノートの詳細が表示されるはずだ。
そこから、
steps

trigger

event

(moreが表示されてる場合はmore)

atom:content

#
という順番で選択していくと、取得したノートの投稿内容が設定できる。
え?eventの後の項目はdescriptionでも良くないかって?
……それはそう。
それはそうなんだけど、私はこういうのは正確な方を設定しておいた方がいいのかなって思ったので、わざわざatom:contentまで掘り下げて選択してます。
descriptionの方が選ぶの早く済むからこっちにするわ!って人は、他に投稿内容を選ぶ場合もdescriptionで設定は統一してほしい。
そんなわけで、「Initial value」の設定が出来たらフィルターする条件を設定する。
「Condition」の項目をクリックすると選択肢が出てくるので、一番上の「[Text]Contains」を選ぶ。
これは次に出てくる「2nd value」で設定した文字をフィルター対象とするフィルターだ。
最後に「2nd value」に@とだけ入力する。何かで囲う必要は無い。

ハッシュタグ除外フィルター
「+」でフィルターAPIを追加したら、@除外フィルターとほぼ同じ設定をするので省略。
違うのは最後の「2nd value」に#とだけ入力するのみだ。

文字数判定フィルター
2つの除外フィルターを追加できたら、次に140字以内なら投稿するフィルターを追加していく。
「+」を押して、filterと入力緑のアイコンのフィルターAPIを選択する。3つほど選択肢が出てくるので真ん中、「Continue〜」とContinueから始まる項目を選ぶ。
これは条件を満たすとフィルターを通すフィルターだ。これによって、140字以内なら行ってよし!するのだ。
まず「Initial value」だが、
steps

trigger

event

(moreが表示されてる場合はmore)

atom:content

#
と選択する(先述の除外フィルターでdescriptionで設定してる人は、ここもdescriptionで統一してほしい)。
次に、今選択した結果{{ }}(実際は半角)で囲まれたコードが設定されたと思うこのコードの一番外の{{ }}、この合計2組のかっこを削除しよう。
するとこうなるはずだ。
steps.trigger.event["atom:content"]["#"](descriptionで設定している場合は、steps.trigger.event.descriptionとなっているはず)
このコードの末尾に.lengthと書き足して、steps.trigger.event["atom:content"]["#"].lengthとなるようにする。
次に「Condition」だがここは文字数でフィルターしたいので、「[Number]is less than or equal to」を選ぶ。これは次に設定する「2nd value」の値以下の場合フィルターを通す、という設定だ。
そして「2nd value」に140と設定すれば、3種のフィルターの設定は完了だ。

6.連携フローにTwitterを追加する

これで設定も最後です。説明が長い?私もそう思うしnoteのAIにもそう言われたよ。HAHAHA!

それはさておき、フィルターなどと同様に「+」を押してTwitterを追加します。
使うAPIはもちろん「Create tweet」です。
「Twitter Account」を押すと入力フォームが出てくるが、ここで取得したコンシューマーキーとシークレットキーを使います。
え?コピペしすぎて、もう2つのキーの内容残ってないって?
その場合は「3.コンシューマーキーとシークレットキーの取得」まで戻って2つのキーを再生成しよう。
入力フォームの上の欄にはコンシューマーキー(短い方)を、下の欄にはシークレットキー(長い方)を入力しよう。
すると、自作アプリとの連携認証画面に進むので連携したいTwitterアカウントで連携しよう。
アカウントの連携が出来たら、「Text」の項目にフィルター設定の時と同じになるようにRSSから取得した投稿内容部分を設定する(フィルター設定でsteps→trigger→event→(moreが表示されてる場合はmore)→atom:content→# と設定したいうあれである)

7.最後に投稿テストしたら完成!!!!!!お疲れ様でした


最後に

  • このページの内容について分からない部分がある場合はお気軽にこのnoteまでコメントをいただければ幸いです

用法用量を守って適度にクロスポストしようね!!!!!!


muuteを使ってる人にはツイート取り込みできるからオススメかも。
muuteについては多分いつか記事を書くかもしれないので、期待しないで待っていてほしい。


この記事が気に入ったらサポートをしてみませんか?