/customize/Tweetを取り込むPopup menu

generated at 11/17/2024, 7:15:47 AM
Tweetを取り込むPopup menu
Twitterからインポート出来るPopup Menu
from /takker/scrapbox-embed-tweet
https://scrapbox.io/api/code/takker/scrapbox-embed-tweet/temperMonkey.js
使い方
tweet URLを含んだ文を選択して、Popup Menuのボタンを押すと変換される
URLが複数入っていたときは、その全てを変換する
変換形式はTweetを取り込むPopup menu#5fd37efd1280f000004a6e2aをいじると変えられる

install方法
import.jsimport '/api/code/customize/Tweetを取り込むPopup menu/script.js';
他人のprojectからimportするのは安全上問題があるので、codeをコピペすることをおすすめします
その際ファイルパスを適宜変更して下さい
それからこのUserscriptをTamperMonkeyにinstallして下さい

類似UserScript
/kn1cht/embed-tweet
参考にしたscript
TamperMonkeyが不要な代わりに、埋め込み用HTMLを毎回手動で取得しなくてはならない
/ci7lus/tweet2image-upload
テキストではなくtwitterのscreenshotを貼り付けるscript
本UserScriptと同様、TemperMonkeyを使って外部APIを叩きにいっている

2021-06-08 02:49:21 /takker/scrapbox-embed-tweet#60be5b951280f00000678928を反映

以下code
依存コード：scrapbox-insert-text
script.jsimport {insertText} from '/api/code/customize/scrapbox-insert-text/script.js';
import {convertWholeText} from '/api/code/customize/Tweetを取り込むPopup menu/convert.js';
 
scrapbox.PopupMenu.addButton({
  title: '\uf081', // Font Awesomeでないと文字化けします
  onClick: text => {
    if (!/https:\/\/twitter\.com\S+\/status\/\d+/.test(text)) return; // URLがなければ何もしない
    
    const cursor = document.getElementById('text-input')
    Promise.all(text.split('\n').map(line => {
      const matches = line.match(/^\s+|.*/g);
      const indent = /^\s+$/.test(matches[0])? matches[0] : '';
      const content = /^\s+$/.test(matches[0])? matches[1] : matches[0];
      console.log([indent,content]);
      return convertWholeText(content, indent)
    })).then(lines => insertText({text: lines.join('\n'), cursor: cursor}));
    
    // 入力しやすいよう選択範囲を先に消しておく
    return '';
  },
});

tweet情報を整形して返す
convert.jsimport {getTweetInfo} from '/api/code/customize/Tweetを取り込むPopup menu/getTweetInfo.js';
// 複数のURLを含んだテキストをまとめて変換する
export async function convertWholeText(text,indent) {
  const tweetRegExp = /https:\/\/twitter\.com\S+\/status\/\d+(?:\?s=\d+)?/g;
  const urls = text.match(tweetRegExp) ?? [];
  if (urls.length === 0) return undefined;
  
  const tweets = (await Promise.all(urls.map(url => getTweetInfo({tweetUrl: url}))))
    .map(tweetInfo => convert({
      tweetInfo,
      indent,
    }));
  console.log(tweets);
  let map = {};
  for (const originalUrl of urls) {
    const i = urls.indexOf(originalUrl);
    if (!tweets[i]) break;
    map[originalUrl]= tweets[i];
  }
  //console.log(map);
  const result = text.replace(tweetRegExp, match => map[match] ?? match);
  //console.log(result);
  return result;
}

引用の形を決めるところ
この関数をいじってお好みのformatにしてください　
convert.jsfunction convert({tweetInfo, indent}) {
  return [
    ...tweetInfo.content.map(text => `${indent}> ${text}`),
    `${indent}> \t${tweetInfo.signature}[${tweetInfo.date.href} ${tweetInfo.date.text}]`
  ].join('\n');
}

tweet取得処理
getTweetInfo.jsexport async function getTweetInfo({tweetUrl} = {}) {
  if (!window.getTweetInfo) {
    alert('Please install "getTweetInfo" from https://scrapbox.io/api/code/customize/Tweetを取り込むPopup menu/temperMonkey.js'); 
    return;
  }
  try {
    const tweet = await window.getTweetInfo(`https://publish.twitter.com/oembed?url=${tweetUrl}`)
      .then(req => req.response);
    // 埋め込み用HTMLを解析する
    const dummy = document.createElement('div');
    dummy.insertAdjacentHTML('beforeend', tweet.html);
    console.log(tweet.html);
    // <blockquote>を取得
    const blockquote =dummy.getElementsByTagName('blockquote')?.[0]; 
    // 要素に分解
    const [contentDOM, signatureDOM, dateDOM] = [...blockquote?.childNodes];
    // tweet本文をscrapbox記法に変換
    contentDOM?.getElementsByTagName('a')
      ?.forEach?.(link => link.innerHTML = `[${link.href} ${link.textContent}]`);
    contentDOM?.getElementsByTagName('br')
      ?.forEach?.(br => br.innerHTML =`\n`);
      
    // 各種情報を詰め込んで返す
    return {
      author: {
        name: tweet.author_name,
        url: tweet.author_url,
      },
      content: contentDOM?.textContent.split('\n'),
      signature: signatureDOM?.textContent,
      date : {
        href: dateDOM?.href,
        text: dateDOM?.textContent,
      },
    };
  } catch(e) {
    console.error(e);
  }
}


TemperMonkeyに貼り付けるコード
url-info-proxyをコピペして少しいじった
temperMonkey.js// ==UserScript==
// @name         twitter-info-proxy
// @namespace    https://scrapbox.io
// @version      0.1
// @description  fetch the information of a tweet
// @author       takker
// @match        https://scrapbox.io/*
// @connect      publish.twitter.com
// @grant        GM_xmlhttpRequest
// @license      MIT
// @copyright    Copyright (c) 2020 takker
// ==/UserScript==

;(function () {
  "use strict"
  unsafeWindow.getTweetInfo = (url) => {
    const u = new URL(url)
    if (!['publish.twitter.com'].includes(u.hostname)) {
      throw Error("unexpected url!")
    }
    return new Promise((r) => {
      GM_xmlhttpRequest({
        method: "GET",
        url,
        onload: (res) => r(res),
        withCredentials: true,
        responseType: "json",
      })
    })
  }
})()