関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。Tumblr1.はじめに先日Bubbleで元号ジェネレータの作成方法について説明しました。(その時の記事はコチラ↓)blog.nocodelab.jpさらに、プラグインを利用して、画像ダウンロードのところまで次の記事で説明しました。(その時の記事はコチラ↓)blog.nocodelab.jpそして、さらにもう一つ機能を追加することにします。それは、Twitter連携です!今回は以下の処理を追加します。作成した元号の画像をツイートそれでは、詳しく見ていきましょう。2.DataにTypeを追加しよう。前回までに作成している「Gengo」Dataに新しく2つTypeを追加しましょう。:作成した画像のURLtwitter_count:ツイートした回数image_urlには作成した画像のURLを、twitter_countにはツイートした回数を登録するようにします。3.元号の画像を作成しようBubbleからTwitterにツイートするのが、今回の目的です。前回は、画像をすぐにダウンロードする処理をしていましたが、ダウンロードはせずに作成のみするようにしましょう。3-1.新規画面を作成しよう。今回は画面遷移するようにしましょう。理由としては、画像を作成するアクションは非同期なので、画像作成のタイミングがつかみにくいからです。このような画面を作成してみましょう。元の画面をクローンして作成するとラクだと思います。content」の設定です。前画面でGengoデータを作成し、それを画面遷移の時に渡すようにしましょう。参照記事はコチラblog.nocodelab.jp3-2.ページロードで画像を作成しよう。画像を作成するアクションは、ページロードを利用しましょう。これにより、ロード終了タイミングで画像作成することができます。loaded」のイベントを選択しましょう。image」を使用しました。このプラグインは画像作成してダウンロードするか、画像作成するのみか2通りのアクションを選べます。Element」を作成します。プロパティの設定はダウンロードのアクションと同様です。when」のところに、実行条件も付与しています。同じ元号の画像を何度も作成させたくないので、既に画像URLが登録されていないときのみ、画像作成するようにしています。3-3.画像のURLをDataに登録しよう。3-2で作成したURLを「Gengo」Dataに登録する必要があります。ここで注意するのが、登録のタイミングです。画像作成は非同期なので、同じページロード時に次のアクションとしてData更新を行うとうまくいかないことがあります。true」を追加しましょう。画像作成プラグインのElementのプロパティに作成されたらURLが取得できるので、取得できた場合のみ、「Gengo」Dataを更新するようにしましょう。これで画像作成&URL更新までできました。4.Twitter連携してみよう。次にTwitter連携を行います。BubbleではTwitterのプラグインはありますが、Twitterのログイン機能しかそのプラグインでは行えません。APIを利用してJavascriptをゴリゴリ書かないとできません。それも可能ですが、今回はタスク自動化ツールのZapierを利用してTwitter連携してみます!4-1.Zapierを登録しよう。Zapierとは何か?それはコチラの記事をご参照ください。ここでは、WebhookをトリガーにTwitterに画像付きツイートを行うようにします。hook」のイベントを選択します。Hook」でURLを自動で生成してくれるので、コピーしておきましょう。そのURLにPOSTするのがトリガーとなります。※ここでテストデータを送信したい場合は、4-2のBubbleからZapierの設定を先に行うことをお勧めします。Zapierのトリガーだけ呼ぶボタン等を一時的に用意すると簡単ですね。Tweet」のイベントを選択します。Twitterアカウントは、一つのみです。Tweet」では、ツイート内容を設定します。ここでは、POSTする値を下記のようにするので、上図のように設定します。Text1:ツイートする本文Text2:ツイートする画像URL※Webhookのテストを行った場合、そのデータを利用して設定できるようになります。最後に、Twitterアプリの方もテストをすると、テストデータを元にツイートされます。ツイートされたらZapierの設定は完了です!4-2.BubbleからZapierを設定しよう。それでは、BubbleからZapierを実行してみましょう。ZapierをBubbleから利用するには、プラグインが用意されているので、まずはプラグインをインストールしましょう。次に、実際にワークフローを追加しましょう。Zapierの実行タイミングは元号の画像が作成されたらツイートするようにします。true」を追加しましょう。同じ内容のツイートをするとTwitterからエラーが返ってきて、Zapier自体もOFFになってしまい、手動でONにしないといけなくなってしまいます。1つの元号につき、1回しかツイートしないように制御も必要です。zap」から設定します。Hook」で生成されたURLを設定します。「Text1」には、ツイートする本文、「Text2」は画像のURL(前に”https:”を足しましょう)を設定します。その次に「Gengo」データの「twitter_count」を1に更新するアクションも追加しましょう。これで、BubbleからZapierを利用して、Twitterに画像ツイートができるようになりました。あとは、元号を入力する画面から今回作成した画面に遷移するように設定すれば完成です!プレビューで実際に試して、ツイートできるか試してみましょう!その時、Zapierを起動させておくことをお忘れなく!今回の処理を追加したサンプルはコチラです。作成!「学習サポートアプリ」をリリースします。『Integromat』というWebアプリをご存知でしょ...2019-08-30Bubbleのプラグインを使ってみよう。Bubbleのプラグインを使ってみよう。nocodelabスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。