以下の内容はhttps://sorashima.hatenablog.com/entry/WebQuoteTweetより取得しました。


kindleアプリの引用のように、Webページの選択テキストを画像としてTweetするiOS/iPadOSショートカット

kindlequotesのように画像で引用できれば、引用する内容が140文字制限を占めてコメントが十分書けないのを回避できるのでは?


Safariで引用したい文字列を選択して、下の共有ボタンをタップ

共有シートではWebQuoteTweetショートカットを選ぶ

Twitterアプリが起動するので一言添えてツイート

WebページのURLが自動的に添えられて投稿される

添付画像を開くとこんな感じ

引用が長く枠に収まらないときは、最後に三点リーダ「…」が添えられる


利用するアプリ

Toolbox Pro for Shortcuts
Utilities
0円
ユニバーサルアプリ: ○

ショートカットアプリだけではこれを実現するのに機能が足りないので、Toolbox Pro for Shortcutsを使った。

テキストを画像に変換するのに

  • Create Images From Text

背景の色を作るのに

  • Create Solid Matte

の機能を使った。

どちらの機能もToolbox Pro Premium対象なので、¥730のApp内課金(一度きり)が必要。


ショートカット

 WebQuoteTweet

ショートカットアプリの仕様変更で動かなくなった。
ショートカットはこんな事ばかりで凹む。


ポイント

Toolbox ProのCreate Images From Textにプレーンテキストを渡すことも可能だが、それだと行間が詰まってとても読みづらい。

テキストをHTMLにして、スタイルシートで行間やフォント、文字サイズ、文字色などの体裁を整えてリッチテキストに変換して渡すことでそれを回避した。

引用文部分とWebページタイトル部分は別々にCreate Images From Textで作っているが、それぞれにバックグラウンドカラーを設定して画像結合(ステッチ)をすると、なぜか繋ぎ目に細い線が入ってしまう。
なので透明バックグラウンドに設定して画像結合してから、後でバッグラウンドの画像を重ね合わせている。


ちなみに、ショートカットでもSVG画像の表示はできる。

ショートカットで<text> - SVG: Scalable Vector Graphics | MDNの2つ目の例「回転テキスト」を表示させてみた
ただ、できたイメージを、JPEGPNGなどの他の形式に変換して、写真アルバムに保存しようとしても上手くいかない。
RoutineHub • Convert SVG to PNGのように、Javascriptで一度HTML5 Canvasに描写させ、それをHTMLCanvasElement.toDataURLメソッドでPNG形式のdataURIに変換してやる必要がある。

頑張ればToolbox Proアプリが無くても作れないことはないだろう。今回は手抜き。




以上の内容はhttps://sorashima.hatenablog.com/entry/WebQuoteTweetより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14