【質問内容】adaloのtwitter埋め込みについて。
adaloforumで問い合わせて、以下の回答をえました。
For embedded tweets see:
https://publish.twitter.com/ 3
Twitter for Websites | Docs | Twitter Developer 2
私になりにやってみましたが、うまくいきません。
webviewでembedのURLを入れるのかと思いますが、上記リンクのやり方だと、htmlのタグがついている状態ですし。。
英語が読み取れてないだけかもです。。 ヘルプお願いします。
【URL】
質問したforumのURL.。karimooもちょくちょく私に答えてくれる準専属w
How to embed twitter - Help - Adalo
回答者１
普通は、Twitter表示されるはずなんですけどね。。。
私もやってみましたが、Twitterは表示されませんでした。Youtubeはスムーズにいくのに、なぜだろう？ SRC のタグの取得方法が違うのか？
Adaloフォーラムで追加で質問してみましたー。
回答者２
僕の方でも確認しましたが「adalo」では対象URLを「iframe」タグで読み込んでいます。またこれをTwitter側で「読み込まないで！」と設定しているのが読み込めない原因です。(X-Frame-Options: deny)
背景として、ユーザが例えば「あなたのお金を盗みます.com」の別URLにアクセスして「iframe」を使って「ゆうちょ銀行」を読み込ませると、あたかも先のURLがゆうちょ銀行のサイトである、と錯覚させることが出来てしまうので、最近のブラウザは「そう言うのはサーバごとに設定できるようにしようぜ！」とルールを決めてコンテンツ読み込みをブロックするようにしています。
回避策として以下2つの方法があります。
- Twitterが生成するHTMLタグを使う (blockquoteタグのやつです。)
- 埋め込み用のJSONデータを出力してHTMLタグを形成する(Notionの埋め込みもこれを使ってます。恐らくこれが一般的かと。)
- GET statuses/oembed | Docs | Twitter Developer Platform
Adaloユーザの利便性を考えると次の手段が好ましいです。
Adalo公式にTwitter Pluginをお願いして出してもらう
Reactを使って独自埋め込みComponentを作る (検証してないですが、別ライブラリを読み込めるのであれば可能です)
ローコード、あるいは別サービスでTwitter埋め込み用サービスを使う(最終手段で、速度的には遅くなります… :爆笑:)
- GET statuses/oembed | Docs | Twitter Developer Platform
ちなみにAdaloのAPIコネクトを使っても残念ながら読み込みが出来ません。と言うのもAdaloは「配列オブジェクト (e.g., [ {…} ]」形式しか受け付けないからです。言い換えるとAdaloにTwitterを埋め込む専用のAPI / あるいはPluginが別に必要になります。(これはローコードで実現出来ます…:爆笑:)
一般的なAPIは「オブジェクト (e.g., {…} )」形式を返すのが普通なのですが…。
カスタムコンポーネントを作成して読み込むことが出来ました :にこっ: ユーザさんに使ってもらうためには整形して公開できるようにする必要はありますが…
質問者
え、ちょっとすごすぎてついていけてないのですがw
コンポーネント作れちゃう人発見したということはわかりましたw
コンポーネントをアプリみたいにクローンできるのかとかわからないですが、何かお手伝いしますので、そのコンポーネント分けて欲しい。。
回答者２
今adaloのドキュメントを読み進めながらどんなカスタマイズが出来るのかを見てます。完成したらマーケットプレースに上げようかなと考えてます :にこっ:
あるいはNoCodeCampオリジナルにするとか？？？
質問者
えええ、すご。マーケットプレイスもどんな仕組みになってるかまだ把握できてなくて。
個人間？で受け渡しできるんですかね〜？
マーケットプレイスにあげれるなら、あげた方がいいと思いますよ！それ欲しい人いっぱいいますよ！
私の質問に答えたkirimooが、誰かがコンポーネント、作らないと！って言ってます。
作っちゃいましたねw