前回は透過画像を使った強引なやり方でした.
こっちも面倒な問題がありますが前回より遙かに汎用性が高いです.
※価格は記事執筆時のものです. 現在の価格はApp Storeから確認ください.
レビュー時のiOSバージョン ： iOS14.7.1
スポンサーリンク
ダウンロードと使い方
今回のレシピは関数型になっています.
本レシピとは別に新規のレシピを作成し, パラメータとなる「辞書」アクションを入力として本レシピを実行する形式になっています.
「辞書」アクションに必要なキーと値は以下になります.
- txt
本文となるテキストです。上のように「テキスト」アクションに書いて値にしたり, 他の処理の結果を入れてもいいです。html5を使用しているため、基本的な装飾タグに対応しているはずです。 - color
テキストの文字色です。カラーコードを使用する場合は先頭に#が必要です。 - font-size
テキストの大きさを指定します。デバイスの画面画素数によって相対的に変わるので以下のpaddingを含めて何度か試して調整して…を繰り返してください。 - padding-left
テキストの左端の位置を指定します。単位はpx。「壁紙の枠」を越えない値にしてください。 - padding-top
テキストの上端の位置を指定します。上に同じ。 - image
壁紙をBASE64エンコードしたものをここに入れます。 - type
使用しているiPhoneの画面画素数に応じた値を入れます。例えばiPhone12 Pro Maxの画面画素数は1284×2778ピクセルなので1284x2788とします。
「幅」「高さ」の順に、かつ間に半角アルファベットのxを入れます。
「壁紙を設定」アクションの使えるiPhoneを考えると、執筆時点で以下の9種類と思われます
- 1284x2778
- 1242x2688
- 1170x2532
- 1125x2436
- 1080x2340
- 1080x1920
- 828x1792
- 750x1334
- 640x1136
パラメータとなる辞書を作ったら、これを入力として本レシピを実行します。
本レシピはテキストを書き込んだ画像として値を返すので、実際に壁紙として設定するのは本レシピ外です。
以上、シンプルに文章を書くだけならメインのアクションはこの6つになります。
(後半の視差効果のオンオフは不具合回避なので本来なら4つ)
応用
上の場合は文章一つでしたが、異なる場所に異なる色、大きさで書きたい場合もあります。
その場合は本レシピの結果をBASE64エンコードし、これを使って必要な条件で更に本レシピを繰り返せばよいです。
(蛇足)レシピについて
今回はRedditのとある投稿を参考にして作成しました(がソースが消されたようで今は見れません).
似たようなアイデアは他でも見られます, ようはhtmlで記述し, PDF化→画像化→壁紙として設定…という流れです.
しかし厄介なことに, htmlで書くまではいいのですがこれをPDFにすると上のように余白が生まれます.
他のやり方でもやはり余白ができてしまい, このままでは壁紙にしてもズレたり余白が丸見えになってしまいます.
例えばiPhone8で実行した結果(PDFを画像化した時点)でのものはこの画像の通り, 左と上にそれぞれ26ピクセル分の余白があります.
さらに厄介なことに, PDFにした影響…いやhtmlで書いたせいでしょうかね、画像化した結果は元の壁紙として用意した画像のサイズと一致しません.
上の場合はiPhone8に合わせて750×1334ピクセルの画像をBASE64エンコードして使っていますが, html→PDF→画像化の結果2251×4448ピクセルになってしまいます.
2251は750の3.001333...倍、4448は1334の3.334332…倍と, 縦横の倍率は同じではありません.
そしてこの倍率もiPhoneの種類によって恐らく変わります. 画像化されたときの上で定めたtypeごとの左と上の余白、そして幅と高さはショートカット上で調べたところ以下となりました(なおこれは「イメージを切り取り」で代入する値でもあります).
| X座標 (左余白) |
Y座標 (上余白) |
幅 | 高さ | |
|---|---|---|---|---|
| 1284x2778 | 16 | 16 | 2409 | 5789 |
| 1242x2688 | 16 | 16 | 2330 | 5601 |
| 1170x2532 | 17 | 17 | 2280 | 5483 |
| 1125x2436 | 18 | 18 | 2280 | 5484 |
| 1080x2340 | 18 | 18 | 2279 | 5486 |
| 1080x1920 | 18 | 18 | 2279 | 4501 |
| 828x1792 | 24 | 25 | 2273 | 5470 |
| 750x1334 | 26 | 26 | 2251 | 4480 |
| 640x1136 | 26 | 26 | 1919 | 3786 |
ただ上で書いたとおりiPhone8上で試験したもののため, 実際に対応する機種でこの通りにしてピッタリ壁紙部分だけ切り取れる保障はありません.
しかし切り取りさえできれば, 縦横の倍率の違いを無視できる「イメージのサイズを変更」で元の壁紙のサイズにリサイズできるためここは問題ありません.
レシピ
というわけで上を踏まえてレシピを作ります.
ひとまず壁紙の違いをベースに, 壁紙の幅と高さ, そして上で書いた通り拡大された画像の余白と縦横の長さの組を予め「辞書」アクションで組んでおきます.
例えば1242x2688の場合は画像の通りです.
上で書いた表の内容を辞書として追加しておきます.
続けてhtmlを記述…といいたいのですが, その準備として以下の3つを行います。
①テキスト本文の改行処理
②typeとして与えたiPhoneの余白や拡大後の縦横の長さの値を含む辞書を指定
③壁紙として指定したBASE64コードをデコードし, リサイズしてから再エンコード
③を行うのは, 用意した壁紙の大きさやアスペクト比を揃えるためです.
続いて「ショートカットの入力」, つまり今回は別に作成したレシピで予め約束した形式で入力として「辞書」アクションを本レシピの「ショートカットの入力」として受け取ります.
このままだと「テキスト」アクションで行った改行はhtml上では無視されてしまうので, 「テキストを結合」で改行を<br>にします.
続いて余白などを指定するためのtype値を取得します.
「ショートカットの入力」で渡された辞書のキーtypeの値を使い, 本レシピ先頭の辞書の対応する値を取り出せば, 対応する端末の余白や拡大後の幅と高さの値が手に入ります.
この辞書を改めてtypeとおきます.
そして「ショートカットの入力」で得た辞書に含まれる壁紙のキーimageの値をデコードし, 一度画像化してから各iPhoneの正規のサイズにリサイズしてから再びエンコードします.
これでhtmlを書く準備ができました.
というわけでhtml本文がこちらです.
拘る人はもっとイイカンジにするでしょうね.
いくつか補足するなら以下になります.
- font-famly
フォントを指定する箇所でここではAvenirになっています。他のフォントが良いときは書き換えましょう。
書く場所によってフォントも変えたい場合はここもパラメータとして受け渡しする必要があります。 - <img src"data:image～～～ style="width:90%;"
この90%の値は作成する壁紙そのものの大きさを(相対的に)指定しており, typeの幅と高さはこの値に依存しているため基本的に変更せずそのままにしてください。
現時点ではこれでいいのですが, 今後より画面画素数の大きいモデルが登場した場合、この方法だとPDF化した時点で全体の右側が見切れてしまう恐れがあります.
実際現時点でも, この横幅を100%にすると最新機種を含め一部のtypeが見切れてしまい, PDF化で「すべてを含める」にしてもダメだったため, やむなく90%にして対応しています.
しかしこれもiPhone8で行っていることが影響している可能性がゼロではありません.
もしそれが事実なら, 最悪typeとして用意した余白や縦横の長さすら別の機種では異なる可能性もあってまあ困ったことです.
本文の位置調整同様何度も繰り返して見つけるか, 僕が実際に行ったようにPDF→画像化したものを一旦パソコンのイラストソフトでピクセル測定して値を求めるのが一番ではあります.
その辺はスマホが苦手とする分野なので仕方ありませんね.
なにはともあれ, 書き込んだhtmlテキストを「HTMLからリッチテキストを作成」で変換し, これを更に「PDFを作成」でPDFにします, ただし今回は上で書いた通り縦横拡大されてしまい1ページで収まらないため「含める」を「すべてのページ」にしておきます.
そしてこの結果を「入力からイメージを取得」で画像にします.
しかしまだ余白と大きさの調整が残っています.
「イメージを結合」で縦方向に画像を繋げ(もちろん間隔は0), 「イメージを切り取り」で必要な部分だけ切り取ります.
位置を「カスタム」にし, X座標、Y座標、幅、高さの4項目を辞書「type」の値からそれぞれ代入します.
最後に切り取った画像を辞書typeにある対応するiPhoneのデフォルトの幅と高さにリサイズします.
これで本レシピの処理は完了です.
〆
アクション数こそ20個と少ないですが, 不確定要素のせいで強引なところがあります.
これを使ったオートメーションもちゃんと動作するのを確認しています.
ちゃんと使えさえすればとても便利です.
