Web Analytics Made Easy -
StatCounter

メモ・備忘録(設定ファイル・スクリプト類・ブックマーク)

数年後の自分が首を捻らなくて済むようにするために残す、自分で使うためのアプリの設定やスクリプト類のメモ。改変等ご自由に / 内容が古いまま、間違ったままもあるので注意 / 書いている途中や、途中で放置もあり / 対象の仕様変更で動かなくなったもの多々。特に、WorkFlowyを対象として作ったものは全滅。

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

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


f:id:sorashima:20201119173214j:plain:w311
Safariで引用したい文字列を選択して、下の共有ボタンをタップ

f:id:sorashima:20201119173308j:plain:w311
共有シートではWebQuoteTweetショートカットを選ぶ

f:id:sorashima:20201119173337j:plain:w311
Twitterアプリが起動するので一言添えてツイート

f:id:sorashima:20201119173403j:plain:w311
WebページのURLが自動的に添えられて投稿される

f:id:sorashima:20201119173420j:plain:w311
添付画像を開くとこんな感じ

f:id:sorashima:20201119175412j:plain:w311
引用が長く枠に収まらないときは、最後に三点リーダ「…」が添えられる


利用するアプリ

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画像の表示はできる。

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

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