ObsidianにTweetを埋め込む時に使用するtwitframeのiframeのsizeを決定するiOS/iPadOSショートカットやブックマークレット(2022-04-08)

2022-02-03

Simple Embedsという名のコミュニティプラグインがあり、ここで作ったショートカットを使わなくても同じことができることがわかった。

注意点

[Twitter link](https://twitter.com/rob_pike/status/1021913270922358784)

プラグインの説明に書かれている上の書き方だとツイートの内容が含まれていないのでツイートの内容で検索できない。

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true" data-theme="dark"><p lang="en" dir="ltr">Things should just work.</p>&mdash; Rob Pike (@rob_pike) <a href="https://twitter.com/rob_pike/status/1021913270922358784?ref_src=twsrc%5Etfw">July 25, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Web版Twitterの各ツイートの右上の「…」メニューの「</>ツイートを埋め込む」からコピーしたコードを貼れば、ツイート内容も含まれているのでツイート内容も検索対象になる。
Hide conversationの設定も、Light/Darkの表示テーマ設定も反映される。
コードを新たに書き込んだり・書き換えたり、プラグインの設定を変えたりした時は、一度Obsidianアプリを再起動しないとコードがツイート表示に置き換わらないのが唯一の難点。

---

2021-12-27

もしかしたら、もっと便利な方法が既に他にも有るかもしれないが。

Obsidianにツイートを埋め込む時の問題点

ObsidianにTweetを埋め込もうとTwitterの「</>ツイートを埋め込む」からコピーしたコードをObsidianに貼り付けても、ツイートのテキストが表示されるだけでWebページに貼り付けたときの様な体裁では表示されない。

ヘルプには、

HTMLのサニタイズ
ObsidianはHTMLをセキュリティの観点からサニタイズしています。Obsidianはローカルで実行するため、スクリプティングの脆弱性はwebアプリケーションよりももっと深刻な問題です。したがって、慣れ親しんだようなものに比べて多少厳格であるかもしれません。また
<script> タグをノートに埋め込もうとした場合などに問題が発生するかもしれません。しかしながら、大多数のユーザーにとってこのような問題に出くわす可能性はきわめて低いでしょう。
　
HTMLのサニタイズ - Obsidian 日本語ヘルプ - Obsidian Publish

とあるから、スクリプトは動かないようにしてあるのだろう。

別のページには、

例えば、検索結果に提示されているようにTwitterのツイートを埋め込む事が可能です:
　
ファイルを埋め込む - Obsidian 日本語ヘルプ - Obsidian Publish

と書かれており、

<iframe
  border=0
  frameborder=0
  height=250
  width=550  
  src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2Fjack%2Fstatus%2F20">
</iframe>  

と、twitframe.comをiframeで表示する方法が説明されている。

ただ、iframeの高さはツイートの内容によりまちまち。
twitframe.comのサイジングの項にはこの問題を動的に解決する方法が書いてあるが、それもJavascriptを使った方法なのでObsidianでは使えない。

当てずっぽうで値を決め、表示結果を見て数値を微調整の繰り返しなどしたくない。

そこで、Twitterの「</>ツイートを埋め込む」からコピーしたコードを与えると、iframeのサイズを自動的に決めてくれるショートカットを作った。

ショートカット

TwitframeSize 1
https://www.icloud.com/shortcuts/ca4f8ce65c4847ddb949fa16e5403806

使い方

1.

ここでは、twitframe.comのサイジングの項で使われているのと同じツイートを埋め込んでみる。
Safariでツイートを表示して、右上の「…」ボタンをクリック。

2.

「</>ツイートを埋め込む」をクリック。

3.

「set customization options」をクリック。

4.

テーマ(Light/Dark)や、会話を隠すかどうかを選んで「Update」。
この画面に<iframe>が存在しているのでそこからサイズ情報を取得する。

5.

そのページを開いたまま、Safariの共有シートからこのショートカットを起動。

6.

iframeを使ったコードがクリップボードにコピーされる。

Obsidianに貼り付けた結果。
下にもう一つ別のツイートを追加した。
ツイートの縦の長さに合わせてそれぞれ適切にiframeが表示されている。

変更履歴

2022-02-03(TwitframeSize 1)

iframe中に書かれているツイート内容は検索でヒットしないので、ツイートのテキストを<template>タグで挟んで、表示はされないが検索には引っかかるようにした。

2022-01-31(TwitframeSize)

サイズが適切に決められないツイートがあったのでJavascriptを書き換え。
これまでの操作が、
クリップボード → ショートカット → Safari → ショートカット → クリップボード
と複雑だったものを、
Safariでpublish.twitter.comのWebページを表示しておいて、共有シートからこのショートカットを呼び出し、即クリップボードに結果をコピーするように変更。

macOS上のショートカットアプリはまだbuggyでこのショートカットはまともに動かないので、タイトルのAppleショートカットをiOS/iPadOSショートカットに変えた。

2021-12-27(TwtEmbSrc2iFrame)

初版

---

2022-04-08 ブックマークレット版

上のショートカットの中の"WebページでJavascript"アクションに書いたスクリプトの最後に、結果をクリップボードにコピーする機能を追加しただけのもの。

上の使い方の4.の画面の「Update」ボタンを押した直後の画面で実行すると、結果をクリップボードにコピーする。

iOS上のChromeでは動作することを確認した。

javascript:
const template = document.createElement("template");
template.innerHTML = document.querySelector("#app-root > div > article.Configurators > div:nth-child(1) > div > div > samp > code").textContent;
const tmpl = template.content;

const bq = tmpl.querySelector('blockquote');
const conversation = bq.getAttribute('data-conversation');
const theme = bq.getAttribute('data-theme');

const aA = tmpl.querySelectorAll('a');
const ou = new URL(aA[aA.length - 1].getAttribute('href'));
const u = ou.protocol + "//" + ou.host + ou.pathname;

const ifm = document.querySelector('iframe[id^="twitter-widget-"]');
const style = ifm.getAttribute('style');
const w = parseInt(style.match(/width: (.*?)px;/)[1]) + 16;
const h = parseInt( style.match(/height: (.*?)px;/)[1] ) + 31;
const t = `<iframe border="0" frameborder="0" width="${w}" height="${h}" src="https://twitframe.com/show?url=${encodeURIComponent(u)}&amp;conversation=${conversation}&amp;theme=${theme}"></iframe>
<template>${tmpl.textContent}</template>

[TweetLink](${u})`;

navigator.clipboard.writeText(t).then(function() {
  alert("クリップボードにコピーしました")
}, function() {
  alert("クリップボードにコピーできませんでした")
});

このブックマークレットをpublish.twitter.comが表示されている状態で実行したかどうかの判定は行っていない。

Light/Darkのテーマ選択とConversationを隠すかどうかの選択とツイートのURLは、"Copy Code"と書かれた部分に書かれたコードから取得。
幅と高さは、下に表示されているiframeからサイズを取得。それに、Tweetのiframeのすぐ左上に表示される白地に黒文字の「Twitframe」という表示の高さや、外側のTwitframeのiframeとの間隔分のピクセル数を足している。

---

2022-03-29

Discord - Obsidian Members Group - #🔒insider desktop

@everyone Hey insiders, v0.14.3 is now available for testing!
　
Improved
- Improved <iframe> for some websites that disallows being iframed.

iframe(で埋め込まれること)を許可しない一部のWebサイトに対して<iframe>を改善したらしい。上はインサイダーデスクトップ版の話なので、パプリック版は次かその次のアップデート待ちかも。モバイル版もインサイダーであってもアップデート待ちか？