slooProImg_20170331142430.jpg

(追記あり)Workflowアプリ内でHTMLプレビューしようとしたら、ちょっとアレだったので代替案を考えてみた。

Pocket

みなさんはWorkflowでHTMLプレビューしたい時ってありませんか?

例えば、私が以前作ったSongTweet via MyScriptsは、今聴いてる曲を検索して候補をHTML表示して、タップすればツイートやLINEにNowPlayingを送れるレシピでしたが、その候補をHTML表示するのにWorkflowでのやり方がわからず、仕方なくMyScriptsを使ってました。

▼こんな感じに表示されます。

ただMyScriptsは1発で起動しないことが多く、何だかなぁと思ってました。(T_T)

そこで今回、Workflow内でHTMLをプレビュー出来ないかやってみたので紹介します。

やったこと

最初に、<div>〜</div>のタグをテキストで渡されるとWorkflowだけでHTMLプレビューするレシピを作りました。
やってることは、渡されたテキストにheaderなどを付けてHTML記述にしたあと「Make Rich Text from HTML」で1度RichTextにして、その後「Show Web Page」でHTMLプレビューしてます。

▼Workflowレシピはこんな感じです。

▼HTMLプレビューはこんな感じになります。

布袋寅泰が文字化けしてますが((^^;)、いい感じだと思いませんか?

でも問題があるんです。

HTMLプレビュー出来てそうですが、実はリンクが切れてるんです。
ちょうどTextwellのBlogViewみたいな感じです。あれもリンクが効かないですよね?(私だけ?)

でも、かと言ってRichText表示のままにすると

▼リンクは効いてますが、画像が表示されません。(T_T)

ということで試行錯誤した結果、Documents 5というアプリにRichTextを渡してHTMLプレビューすることにしました。

このアプリはいわゆるファイラーというやつで、いろんなタイプのファイルを開けます。
無料だし、持ってて損はないかも。

MyScriptsを使う場合との違い

MyScriptsを使う場合は、MyScripts側にもスクリプトが必要だったんですが、このDocuments 5に対しては特に何も用意することなく、ただ持ってるだけでいいということと、1発で起動するというところですね。
この違いは大きいです。

レシピのインポート

以下のリンクからレシピをインポートして下さい。
※HTML previewの仕様を1部変更しました。
以下は最新版に差し替えてますので、旧版をお持ちの方は再度インポートして下さい。(17/4/2)

カスタマイズ

▼footer(赤枠の部分)が私のTwitterアカウントになってます。不要なら空欄にして下さい。

呼び出し元のレシピ

▼呼び出し元は、1行目がHTMLプレビューのタイトル、2行目以降がプレビュー表示したいタグにして、最後にRunWorkflowで「HTML preview」を選択して下さい。

追記17/4/2
HTMLのheadやscriptも自由に弄りたい事もあると思うので、HTML全文を渡すこともできるようにレシピの仕様を変更しました。

1行目に何か文字列があれば従来同様、1行目をHTMLプレビューのタイトル、2行目以降をbody内のタグとしてプレビューします。
1行目を空行(改行のみ)にすると、2行目以降をHTML全文としてプレビューします。

追記ここまで

使ってみる

呼び出し元のレシピを実行すると

▼Documents 5でプレビュー表示されます。

ちゃんとリンクも有効だし、何故か布袋寅泰の文字化けも治ってます。(^^)

※但し、Documents 5側でプレビューファイルが勝手に保存されるので、そのままにしてるとドンドン溜まっていきます。(^^;

▼こんな感じです

プレビューを何度も再利用できるのは利点とも言えるかもしれませんが、不要であればこまめに削除するようにして下さい。

最後に

いかがでしょうか?
MyScriptsはもう更新されてないし、MyScriptsを使わないでプレビュー出来るだけでもかなり便利になったと思います。
今後Workflowだけで処理できないかわかれば、また紹介したいと思います。

紹介したアプリ
Workflow: Powerful Automation Made Simple 1.7.3
分類: 仕事効率化,ユーティリティ
価格: 無料 (DeskConnect, Inc.)


happyChappy(@happyChappy1115)でした。

Sponsored Link


Posted from するぷろ for iOS.

Pocket

コメントを残す