Neat Design Journal

テーマ作成がひと段落したので、次は、より快適なモブログ環境の構築に取り掛かります。以前にもBywordやするぷろでモブログしていましたが、今回は新しくTextwellとWorkflowを使ってみたいと思います。

Textwell

Textwellはその名の通りテキストエディタです。アクションと呼ばれる拡張機能を取り込んでカスタマイズすればどんどん便利なアプリになります。以下の記事を参考に、私が取り込んだアクションをいくつかご紹介します。※アクション名を変更しているものもあります。

AppHTML

Appleがアプリに関するアフィリエイトを廃止することを発表したので、いずれ要らなくなるとは思いますが。
Import Textwell ActionAppHTML

HTML Tag

これの便利なのところは、タグで囲みたい単語や文章を選択して実行すると、それだけで開始タグと終了タグがセットになって囲んでくれる点です。言葉では上手く説明できませんがとにかく便利です。
Import Textwell ActionHTML Tag

Blog Preview

HTMLで書いてある箇所がちゃんと機能してるか確認するために使ってます。
Import Textwell ActionBlog Preview

Save to memo

Textwellは他のテキストエディタと違ってファイルを保存するという概念がありません。そこで、iOS標準のメモアプリと連携して丸ごとコピペしておくことで保存します。これも便利。
Import Textwell ActionSave to memo

これを機能させるにはWorkflow側で連携用のワークフローを作成しておく必要があります。詳しくは以下の記事をご参照ください。

Workflow

続いてはWorkflowですが、簡単に言うと、iPhoneでの様々な操作をほぼワンタップで全自動化できる素晴らしいアプリです。ネット上にはたくさんのワークフローが公開されていますので、それらをヒントに自分なりに微調整をしながら色々と作ってみました。基本的にTextwellのShareアクションからワークフローを実行します。

ShareHTML

私のブログでは、自分のブログ記事を関連記事として表示する『内部リンク』や他のブログの参考記事を表示する『外部リンク』はショートコードを使って表示するカスタマイズを行なっていて、Textwellだけでは上手くいかなかったのでWorkflowを使うことにしました。

内部リンク

流れとしては、

1. TextwellのShareアクションからWorkflowを開く
2. Safariで自分のブログを開くワークフローをタップ
3. 関連記事を検索して表示
4. Safariの共有ボタンからWorkflowを起動
5. 内部リンクを表示するショートコードを取得するワークフローをタップ
6. Textwellに取得したショートコードを貼り付ける

となります。ワークフローは以下のリンクより取得できます。
Open Sorairo

上のワークフローでブログを開き、以下のワークフローからショートコードを取得します。
Internal Link

外部リンク

外部リンクは内部リンクとほぼ同じですが、私の場合、参考にしたい記事はPocketに保存していますのでまずPocketを開きます。
Open Pocket

あとは内部リンクとほぼ同じです。
External Link

画像の挿入

次は記事の中で使う画像についてです。色々と参考にした記事はありますが、中でも最終形のワークフローには以下の記事を参考にしました。

かなり欲張ってみましたが、画像の加工（ウォーターマークを付ける、縮小する、ファイル名を変更する、フォーマットを変える）から始まり、加工した写真をWordPressにアップロード、最後にリンクを取得してTextwellに貼り付けるまでをワンタップで済ませるワークフローを作成しました。
Costom & Upload Photo

上の記事にありますが、テキストエディタから下書きとしてWordPressに投稿する時に画像をアップロードするのではなく、単体でアップロードした画像のパスを取得して貼り付けるっていう考え方は目から鱗でした。流れを確認しながら詳しくご説明します。

写真の選択

写真アプリから加工したい写真を選択します。

ウォーターマーク画像を取得

iCloud Driveからwatermark.pngを取得します。ここではiCloudから取得していますが、Dropboxでもオッケーですし、ファイル名も何でもいいです。

写真の幅と高さを判断

写真には横長と縦長がありますので、まずどちらが大きいのかを判別します。

写真をリサイズ

判別後、横長の場合は横幅を、縦長の場合は縦幅を1024pxにリサイズします。

ウォーターマーク画像を重ねる

画像の右下に、透明度30%でウォーターマーク画像を重ねます。

ファイル名を変更

iPhoneで撮った写真のファイル名は『IMG_連番』となっていますので、これを撮影日を元にしたファイル名に変更します。この工程はお好みなので割愛しても大丈夫です。私の場合、撮影日時が『2018年8月6日14時58分41秒』だとしたら『20180806145841』となるように設定しました。

拡張子を変更

デフォルトの拡張子ですが、iPhoneの場合『.HEIC』となっています。これはjpegよりも軽い仕様みたいなんですがデータとしては使いにくい（私感）ので、慣れ親しんだ『jpeg』に変更します。

WordPressにアップロード

加工した画像をWordPressにアップロードします。実際の写真はこんな感じになります。

縦長だとこんな感じ。

ここまでの工程で、リサイズして右下にウォーターマークが付き、ファイル名と拡張子が変更された画像をWordPressにアップロードできましたので、以降はこの画像のパスを取得する作業に入ります。私の場合、WordPressにアップロードした画像のパスは先ほどのファイル名を例とすると以下のようになります。

<a href="https://neatdesignjournal.com/wp-content/uploads/2018/08/20180806145841.jpeg"><img src="https://neatdesignjournal.com/wp-content/uploads/2018/08/20180806145841.jpeg" width="1024" height="768" /></a>

この中で変数（画像ごとに変わる数値）となるのは、年、月、ファイル名、縦横の長さとなりますので、ワークフローではそれぞれの数値を変数として指定します。

※ただし、作成したワークフローではブログ名、拡張子についても変数として対応できるようにしています。

Textwellに貼り付け

最後に、取得した画像パスをTextwellに貼り付けます。TextwellのURLスキームを開く設定にしています。

これですべての作業が終わりです。文章にすると長かったですが、実際にワークフローを実行するとほんの2～3秒でこれまでの工程が完成します。これで圧倒的に快適なりました。

最後に

いかがでしたでしょうか。Workflowはプログラミングみたいなもので、アイデア次第で色々なことが自動化できる優れもののアプリです。最初は変数の使い方が分からなさ過ぎて詰んでましたが（笑）次回は、スクリーンショットの加工についてとWordPressへ下書き投稿について更新する予定です。