ランダム表示させた内容をTwitterでシェアする方法に関しまして

前提

ボタンを押すとランダムに単語が表示されるサイトを作ろうと思っています。
表示された複数の単語を組み合わせてその意味を答えるという、大喜利のようなサイトを考えています。
HTMLやjavascriptの知識が全くない状態で、色々なサイトから情報を得ながら自分なりに作ってみました。
（かなり無駄の多い記述になっていると思います）
この後、表示された単語をTwitterにツイートできるようにしたいのですが、その方法が全くわかりません。
初心者どころではないほど知識がないのですが、お分かりになる方いらっしゃいましたらよろしくお願いいたします。

実現したいこと

《意味をTwitterで説明する》ボタンを押した時にTwitterの画面が開き

サイトの名前
サイトのURL　ハッシュタグ
「〇〇〇って✕✕✕だよね」
「？？？・・・どういうこと？」

という内容が表示されるようにしたいと思っています。
「〇〇〇って✕✕✕だよね」の部分は、《例え話をする》ボタンを押してランダムに表示された結果です。

発生している問題・エラーメッセージ

サイトにランダム表示された内容（「〇〇〇って✕✕✕だよね」の部分）をそのままTwitterの画面に表示させる方法がわかりません。

エラーメッセージ

該当のソースコード

    <h1>クセの強い例え話</h1>

<div class="wrapper">
	<h3>ボタンを押すとランダムな組み合わせで例え話が出ます<br>その例え話がどういう意味なのか説明してみましょう</h3>
	    <div class="wrapper-button">
		<button id="button" class="button" onClick="getTatoe()">例え話<br>をする</button>
	    </div>
</div>
    <h2>
<span id="kuse">あのさぁ・・・</span>

</h2> <br> <div class="my"> ???・・どういうこと？ </div> <br> <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="share" data-show-count="false" target="_blank">意味を<br>Twitterで<br>説明する</a> <script> function getTatoe() { document.getElementById("kuse").innerHTML = getKuse(); } function getKuse() { let kuse = ["ＡＩ", "Ｖチューバ―", "アート", "いい嘘", "イエスマン", "いたずら", "インスタ", "ウィルス", "おじいちゃん", "おばあちゃん", "お化け", "お給料", "お金", "お使い", "お土産", "かくれんぼ", "かまってちゃん", "カラオケ", "カンニング", "ギャンブル", "ゲーム", "ゲーム実況", "ケンカ", "コスプレイヤー", "コマーシャル", "ｺﾐｭﾆｹｰｼｮﾝ", "ゴミ箱", "コンビニ", "サイコロ", "サザエさん", "じゃんけん", "シャンプーハット", "ショッピング", "ｽｰﾊﾟｰﾏｰｹｯﾄ", "スキル", "すごろく", "スポーツ", "センチメンタル", "ダイエット", "タイムマシン", "ダイヤモンド", "タンポポ", "ツンデレ", "ﾃﾞｨｽﾞﾆｰﾗﾝﾄﾞ", "デザート", "テスト", "トイレ", "どっちつかず", "ドラえもん", "ドレス", "ど忘れ", "なかよし", "ナルシスト", "ノスタルジック", "ハーレム", "バイキング", "ハイタッチ", "ハイテンション", "パジャマ", "パスポート", "パスワード", "バンジージャンプ", "ひとり言", "ファンタジー", "フナ虫", "プリンセス", "ふるさと", "ポスター", "ホラー映画", "ボロ雑巾", "マンガ", "ミニチュア", "モテ期", "もみあげ", "やる気", "ライバル", "ラスボス", "ロボット", "ロマンチック", "わがまま", "ワクチン", "愛", "愛想笑い", "悪だくみ", "悪魔", "悪夢", "握手", "安心", "伊達メガネ", "医者", "一目惚れ", "引きこもり", "飲み会", "隠し事", "宇宙人", "雨男", "嘘泣き", "運命", "映画泥棒", "永遠", "遠い親戚", "遠距離恋愛", "恩返し", "温もり", "温泉", "仮想現実", "仮病", "夏休み", "家出", "科学", "歌", "過ち", "過去", "我慢", "画用紙", "怪我", "絵の具", "開き直り", "階段", "学問", "感謝", "感染病", "奇跡", "寄り道", "希望", "記念日", "鬼ごっこ", "偽物", "偽薬", "休日", "強さ", "教育", "鏡", "筋肉痛", "近所迷惑", "苦情", "空気", "靴", "靴下", "訓練", "兄弟ゲンカ", "芸術", "芸人", "芸能界", "激かわ", "潔癖症", "結婚", "結婚式", "健康", "権力", "元気", "原始人", "言い訳", "個人情報", "孤独", "口コミ", "好奇心", "幸せ", "告白", "黒歴史", "砂漠", "座敷童", "才能", "雑草", "三角関係", "傘", "散歩", "残業", "仕事", "子供", "子守歌", "師匠", "思い出", "思い出し笑い", "思春期", "私服", "耳かき", "自己管理", "自己犠牲", "自慢話", "失恋", "嫉妬", "寂しさ", "手紙", "趣味", "酒", "習慣", "初恋", "傷心旅行", "勝負", "焼肉", "上下関係", "情熱", "食いしん坊", "食リポ", "食わず嫌い", "食事", "食欲", "信頼", "寝言", "寝坊", "心", "心霊写真", "真実", "真心", "真面目", "神様", "親心", "身だしなみ", "人違い", "人間", "人間ドック", "人間関係", "人生", "図書館", "水", "水たまり", "水平線", "睡眠不足", "酔っぱらい", "世界", "性格", "成功", "成長", "正しさ", "生き物", "青春", "石ころ", "赤ちゃん", "赤ちゃん言葉", "切なさ", "絶望", "戦争", "船", "前世", "双子", "掃除", "相性", "憎しみ", "贈り物", "足の小指", "足湯", "卒業", "尊敬", "太陽", "大家族", "大勝利", "大人", "探検", "誕生日", "男子禁制", "地球", "中二病", "仲間", "仲間外れ", "虫歯", "朝ごはん", "通勤", "泥棒", "天気", "天才", "天使", "転校生", "努力", "東京", "盗み聞き", "動物園", "憧れ", "内緒話", "二次会", "二度寝", "二日酔い", "虹", "入れ歯", "年齢詐称", "悩み事", "敗北", "爆弾", "発明", "罰ゲーム", "反抗期", "美しさ", "病気", "富士山", "浮気心", "風船", "物語", "平常心", "平凡", "平和", "別腹", "変装", "片思い", "便座", "勉強", "宝くじ", "抱き枕", "忘れ物", "望遠鏡", "本", "本音", "本能", "魔法", "妹", "末っ子", "満員電車", "未来", "夢", "無意識", "無邪気", "無駄遣い", "無料アプリ", "命がけ", "迷惑メール", "夜空", "約束", "優しさ", "優柔不断", "勇気", "友情", "友達", "裕福", "遊園地", "郵便", "夕日", "欲張り", "落とし穴", "落書き", "留守番", "旅行", "列車", "恋", "連想ゲーム", "脇役"];

let kusetuyo1 = Math.floor(Math.random() * kuse.length);
let kusetuyo2 = Math.floor(Math.random() * kuse.length);

//出力用
var tatoe = kuse[kusetuyo1] + "って<br>" + kuse[kusetuyo2] + "だよね";
return tatoe;
}
</script>

ここに問題に対して試したことを記載してください。
Web Intentsというのも調べてみたのですが、それだけではできなさそうでした。

ここにより詳細な情報を記載してください。
javascriptの中に、ランダムに表示させるためのワードをたくさん入れてしまっています。
本当は別なファイル（CSV）などで管理したいのですが、そこからリンクさせる方法もわかりません。
もしよろしければこちらも良い方法を教えてください。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

Web Intentsというのも調べてみたのですが、それだけではできなさそうでした。

それで出来るかなと思います。

下記のドキュメントを読んでみてください。
https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent

以下はサンプルコードです。
上記のドキュメントと合わせてご確認ください。

html
1<button type="button" id="tweet-button">意味をTwitterで説明する</button>

js
1let tweetButton = document.querySelector('#tweet-button');
2
3tweetButton.addEventListener('click', event => {
4  let siteName = 'クセの強い例え話',
5      siteUrl = 'https://kusetsuyo.example.com',
6      hashTags = 'クセの強い例え話,ああああ,いいいい',
7      tatoe = '靴って優しさだよね',
8      text = [
9        siteName,
10        tatoe,
11        '？？？・・・どういうこと？',
12      ].join("\n");
13
14  let url = new URL('https://twitter.com/intent/tweet');
15  url.searchParams.set('text', text);
16  url.searchParams.set('url', siteUrl);
17  url.searchParams.set('hashtags', hashTags);
18  window.open(url);
19});

投稿2022/12/23 03:02

shinoharat

総合スコア1685

satoshi_

2022/12/23 10:47

ありがとうございます。かなり悩んでいたので、とても感動しました。全くの素人の質問で申し訳ないのですが、教えて頂いたjsのコードは、return tatoe;の前に入れればよろしいでしょうか。また、7行目の tatoe = '靴って優しさだよね', の部分は、ランダム表示させるために tatoe = kuse[kusetuyo1] + "って" + kuse[kusetuyo2] + "だよね", に置き換えてしまってよろしかったでしょうか。その場合、「例え話をする」ボタンを2回以上押して、内容を変えてもTwitterの方は「意味をTwitterで説明する」ボタンを押しても1回目の内容のまま変わりません。（ブラウザをリロードすれば1回目は大丈夫です。）ボタンを複数回押してもTwitterの内容が連動して変わるようにすることは可能でしょうか。お陰様でかなり希望する状態に近づいてきました。これから色々と調べてみたいと思いますが、何分知識がないもので、お力添え頂くととてもありがたいです。どうかよろしくお願い致します。