みなさんは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プレビューすることにしました。 Documents 5 - PDFリーダーとブラウザ搭載のクラウド対応ファイルマネージャ 5.7.7 分類: 仕事効率化,ビジネス 価格: 無料 (Readdle Inc.) このアプリはいわゆるファイラーというやつで、いろんなタイプのファイルを開けます。 無料だし、持ってて損はないかも。 MyScriptsを使う場合との違い MyScriptsを使う場合は、MyScripts側にもスクリプトが必要だったんですが、このDocuments 5に対しては特に何も用意することなく、ただ持ってるだけでいいということと、1発で起動するというところですね。 この違いは大きいです。 レシピのインポート 以下のリンクからレシピをインポートして下さい。 ※HTML previewの仕様を1部変更しました。 以下は最新版に差し替えてますので、旧版をお持ちの方は再度インポートして下さい。（17/4/2） HTML preview GET WORKFLOW カスタマイズ ▼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.) Documents 5 - PDFリーダーとブラウザ搭載のクラウド対応ファイルマネージャ 5.7.7 分類: 仕事効率化,ビジネス 価格: 無料 (Readdle Inc.) happyChappy（@happyChappy1115）でした。 Sponsored Link Posted from するぷろ for iOS.

関連記事:

TextwellでXMLHttpRequestが使えなくなってたので、Textwell版TagMakerのリンク生成をWorkflow経由にしてみた。 （追記あり）自ブログ紹介や他の人のブログをシェアするWorkflow版BlogTweetをアイキャッチ画像を付けてツイートできるようにしてみたので紹介します （追記あり）DayOne2をPocketのようにするWorkflowレシピ「DayOne2に送る」を紹介します！ DayOne2をPocketのようにするWorkflowレシピ「DayOne2に送る」に機能追加したので紹介します！

みなさんはWorkflowでレシピを作る時、文字列操作が不便だと感じたことはないですか？ Workflowは色んなアクションが用意されてて、簡単に自動化プログラムが作れるので便利ですが、文字列操作はアクションが豊富とは言えません。 例えば、javascriptでよく使うsubstr等の文字列抽出をするアクションがありません。 「ある文字列の3番目の文字から5文字を抽出」 みたいなやつです。 これをレシピ中に何度もやろうとすると煩雑になるし、レシピが長くなって見にくくなってしまいます。 それに同じことを繰り返すのが面倒くさいし大変です。(＞＜) そこで今回、Workflowで使えるsubstrを作ってみたので、使い方も合わせて紹介します。 レシピのインポート 以下のリンクからレシピをインポートして下さい。 ※コピーしないでも文字列抽出結果が渡せることがわかっかのでレシピを最新版に差し替えました 17/4/1 substr GET WORKFLOW 使い方 ▼レシピの最初に使い方のコメントがあります。 詳細 テキスト（複数行可） 開始位置（0〜） 文字数 の形式で本レシピに文字列を渡すと、指定した開始位置（0は1文字目）から指定文字数の文字列を抽出してコピーします。 改行も1文字に数えます。 また、文字数を0以下にすると、開始位置から末尾までの文字列を抽出します。 呼び出し元のレシピでは RunWorkflowでsubstrを指定したあと、GetClipboardで受け取って下さい。 元のテキストに対して、抽出したい開始位置と文字数を改行で付加したテキスト（文字数の後は改行しないで下さい。）をsubstrに渡して下さい。 substrで抽出された文字列はクリップボードにコピーされるので、substrの呼び出し元のレシピでGetClipboardを使って受け取って下さい。 尚、文字数を0以下にすると、開始位置から末尾までの文字列を抽出します。 使用例 ▼以下の場合は ▼このようになります。 解説 改行も1文字に数えます。 また、0から数えるので、開始位置=14は改行含めて15文字目の「す」になります。 文字数=0なので、末尾まで（開始位置指定の前まで）になります。 従って、「す」から末尾の「の」までが抽出されることになります。 ▼もし開始位置と指定文字数の和がテキストの文字数を超える場合は、以下のアラートが出るので文字数を確認して下さい。 また、javascriptの本当のsubstrは開始位置にマイナスの指定もできます（末尾からの指定になる）が、本レシピは出来ません。ご了承下さい。m(_ _)m 今回デバッグに使ったレシピは以下になります。弄ってみて試してみて下さい。 ※こちらも最新版に差し替えました 17/4/1 substrテスト GET WORKFLOW 紹介したアプリ Workflow: Powerful Automation Made Simple 1.7.3 分類: 仕事効率化,ユーティリティ 価格: 無料 (DeskConnect, Inc.) happyChappy（@happyChappy1115）でした。 Sponsored Link Posted from するぷろ for iOS.

関連記事:

NHK「わたし、犬、いぬ」がお手軽に作れるアプリ「わたし、犬、いぬ」を使ってみた(^^) MacでBlu-rayをバックアップするなら「MakeMKV」がオススメ！ 今更だけどAppleTV（第4世代）を買ってみた！ ショッピングサイトの商品情報やメールの購入履歴からTextwellアクション「Kaereba」に送るWorkflowレシピを作ってみた