@wall46

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Twitter(X)へ画像付きツイートをするシェアボタンの作り方

解決したいこと

【実装したいもの】
ウェブサイトで動的に生成した画像を、X(以下Twitterと書きます)へ投稿するシェアボタンを作りたいと考えています。

具体的には「サイト閲覧者に質問に答えてもらいその結果により画像を生成→シェアボタンを押すと、その画像を含めたツイートを投稿できる」というものを想定しています。

【実現できたこと】
(1)動的に生成した画像ファイルを、自サイトのサーバー上に保存
(2)シェアボタンを押下してツイートする文字列に、(1)で保存した画像のURLを含める

発生している問題

上記の方法では、あくまでツイートの文中に画像のURLを挿入しているだけであり、Twitterのタイムラインにはプレビューが表示されません。

Twitterのタイムラインでプレビューを表示させるには、自サイトのサーバーに一旦保存した画像を、Twitterのサーバー上に画像をアップする必要があると考えますが、その方法を知りたいと思います。

OAuth認証を使用して実現する方法が考えられますが、導入には費用面で敷居が高く、OAuth認証無しで実装できる方法を探しています。
宜しくお願い致します。

0 likes

3Answer

Comments

  1. @wall46

    Questioner

    早速のご回答ありがとうございます。
    自分の作りたいものの場合は、生成される画像のパターンがかなり多いためTwitterカードを使う形は難しいようです。

    しかしながら、結果が数パターンしか無いようなケースを作る際には使えそうな手段ですね。
    参考にさせていただきたいと思います。

しばらく前に自分が実施した内容含めての説明になります

  1. APIでポストする
    1. ユーザにTwitterアプリ連携として認証させて書き込み権限を要求し、画像投稿&ポスト作成する
  2. Twitterカードを含めたintent
    1. (結果の分類=画像の種類が少ない場合)
      事前に画像を用意しておき、種類ごとのランディングページのURLを含めたintentでユーザにポストさせる
    2. (ユーザ次第で結果が無制限に増える場合)
      サーバ側で画像を生成&画像ごとのランディングページを生成して、そのURLを含めたintentでユーザにポストさせる
  3. ユーザ自身の操作
    1. 普通のintentで、ユーザ自身の操作で画像保存&画像含めてポストさせる

API

APIについて、最新の状況は正確に把握してないですが

  • API v1系で通常のポストができなくなった
  • API v2系で画像作成ができない

つまりv1で画像作成してv2でポスト作成せねばならない、という流れらしいです。
このための連携周りでユーザにどういう権限で認証させることになるとかはよく分かりません
正直、最近のTwitter(X)社の急な方針転換など鑑みてとても不安定な状況ですので、あまり積極的に勧められる方針ではないな……と思います。
自分ならぜったいやりたくありませんw

Twitterカード

別回答で示されているTwitterカードを用いるやり方です。

結果の種類が少ないのであれば、事前に一通り用意するだけでよいのですが
種類が有限でない場合、サーバ側ではユーザの結果ごとに画像生成だけでなくメタタグとして画像URLを埋め込んだランディングページも(つまり画像1枚に対してHTML1つ)必要となります。

デメリットとしては、原理的にはサーバ側が無期限で保存しておかねばいけない点でしょうか。

こちらの方針は、現在リアルタイムでTwitter(X)社が方針転換を示しており
結局どうなるのかはよく分かっていません。
(一応CTO氏の発言としては「画像だけが表示される」方針らしいので、問題はなさそうですが……)

ユーザ自身の操作

結果表示部分で「画像保存ボタン」と「結果ポスト(ツイート)ボタン」を用意し、ユーザ自身に両方させるようなやり方です。
元々の本文に成績もテキストで含めておいて、追加で画像を含めてもよい、という感じです

  • メリット
    • サーバ側で何一つ保存しなくてよい
    • ユーザ側に「ポスト(ツイート)しなくても画像を残す」「画像ありポスト」「画像なしポスト」という選択肢ができる
  • デメリット
    • ユーザ側の手間が増える

自分が実装したアプリでは、そもそも初回レスポンス以降はスタンドアロンで動作するブラウザアプリであったり
ブラウザ側で常にcanvasに描画しているようなものであったため、そのままcanvas機能で結果を画像化して自動保存させる機能があって
その流れでツイートにも含められるよ、という形で導入していました。
元々「スクショで結果保存したのを皆にも見せたい」という要求がある人にとってちょっと便利になる機能、といった所です。

宣伝などの目的で「全利用者に積極的に共有を促したい」という場合にはやや弱いかもしれません。
出来ることといえば結果ポストボタンの付近に画像を含めてポストする手順を記載しておく、程度でしょうか

1Like

メリット・デメリットを交えて複数の手法のご説明ありがとうございます。

自分の作ろうとしているものでは「ユーザ自身の操作」が一番合っている(実装の難易度的にも)と思いました。

確かにAPIはそもそもX(Twitter)の方針が不透明な現状では導入したくないですね…

Twitterカードを使用する方法も、htmlを動的に生成すれば実装可能ということを知ることができ良かったです。

0Like

Your answer might help someone💌