Captain's Log, Supplemental

最近追加したローカルプレビュー機能には、プレビューの母体となるHTMLを独自に定義する事ができます。


このHTMLをご自分のブログのデザインに合わせる事で、ローカルプレビューの再現精度を高める事が出来ます。

本気でこのHTMLファイルを弄りだすと結構手間だと思うのですが、スタイルシートだけ持ってくるだけでもローカルプレビューの再現性は上がります。

自ブログのスタイルシートの定義を調べる

stylesheetで検索してコピー

PressSyncのプレビュー用HTMLを編集

スタイルシートの箇所を先ほどコピーした内容に置き換えます。

以上

via PressSync

ローカルプレビュー時に環境に応じて入力テキストをどのようにHTML化するか？という事を選択出来るオプションを追加しました。

マークダウン解析(デフォルト値On)

入力されたテキストをマークダウン変換する場合はOnに設定します。

素の状態のwordpressにマークダウンは関係ないように思われがちですが、空白の改行を入れるとパラグラフで囲うというのもマークダウンの一つなのでOnにする必要があります。

自動改行(デフォルト値On)

パラグラフ内の改行コードをBRタグに変換するか否かのスイッチです。


マークダウンプラグインなどを使用されてない場合はOnで利用してください。

以上

via PressSync

PressSyncにはAppLinkMakerという機能があり、これはアプリの紹介リンクを簡単に作る事を主目的とした機能です。

それ以外にも変わった使い方ができそうなのでご紹介してみます。

アプリアイコンなどを取得する為のフォーマットを作ってみた

この機能の仕様はこちらになります。

上記のドキュメントをみれば大体このフォーマットの作成ルールがわかると思うのですが、私が勝手に考えたものなので、たぶん私しかわからない事があると思います。

もし自作したい場合、わからない事があれば聞いてください。

さて、タイトルのフォーマットを作ってみました。

<table>
<tr>
<th><a href="[artworkUrl60]">60x60</a></th>
<th><a href="[artworkUrl60]"><img src="[artworkUrl60]" width="100" height="100"></a></th>
</tr>
<th><a href="[artworkUrl100]">100x100</a></th>
<th><a href="[artworkUrl100]"><img src="[artworkUrl100]" width="100" height="100"></a></th>
</tr>
<tr>
<th><a href="[artworkUrl512]">512x512</a></th>
<th><a href="[artworkUrl512]"><img src="[artworkUrl512]" width="100" height="100"></a></th>
</tr>

<logic:notEmpty key="screenshotUrls[]">
<logic:iterate key="screenshotUrls" Separator="">
<tr>
<th><a href="[screenshotUrls[]]">iPhoneScreenShot[]</a></th>
<th><a href="[screenshotUrls[]]"><img src="[screenshotUrls[]]"  width="100" height="100"></a></th>
</tr>
</logic:iterate>
</logic:notEmpty>

<logic:notEmpty key="ipadScreenshotUrls[]">
<logic:iterate key="ipadScreenshotUrls" Separator="">
<tr>
<th><a href="[ipadScreenshotUrls[]]">iPadScreenShot[]</a></th>
<th><a href="[ipadScreenshotUrls[]]"><img src="[ipadScreenshotUrls[]]"  width="100" height="100"></a></th>
</tr>
</logic:iterate>
</logic:notEmpty>
<table>

フォーマットの登録

システム設定画面よりAppLinkMaker設定を選択

フォーマット追加を選択

「i」ボタンをタップし、適当な名前(本例ではアイコン取得用と命名)をつける

「アイコン取得用」ボタンをタップ

今回ご紹介しているサンプルフォーマットを貼付ける

登録したフォーマットの利用

AppLinkMaker機能は本文テキストボックスにタグを貼付ける事を主目的にしている為、本文の編集中でないと機能を呼び出せません。（この点すこし不便ですが）

下図のボタンおよびアクションシートを選択します。

適当に検索します。（本例ではMacアプリのTweetBotを検索）

フォーマット変更をタップし、先ほど追加した「アイコン取得用」を選択します。

一覧より「TweetBot」を選択しプレビューを選択します。

画像ファイルを取得する

画像をロングタップしてコピー→他のアプリ（画像編集アプリ）に貼付けるか、、、
クリップボード経由は色々難しいので推奨しません。画像箇所もリンクするようにサンプルフォーマットを一部修正しました。

画像のリンクを選択して画像を開いた状態で、「Safariで開く」を選んで、Safari経由でアルバムに保存するなどしてください。


 
 

以上

via PressSync

PressSyncのローカルプレビュー機能は、投稿内にMediaが指定されている場合、一旦Mediaをアップロードしてからで無いとプレビュー表示出来ないという制限がありました。

つまりローカルプレビューと言いながら通信環境が必須の機能なので、これはまずいという事でローカルだけで完結してプレビュー出来るようにしました。

気づかれている方も多いと思いますが、PressSyncのイメージタグの表現の仕方は二種類あります。


一つはそのものズバリの<img>タグで、もうひとつはアップロード直前のassets-library://から始まる例のアレです。

assets-library://から始まるタグはiPhone内の画像URLを示す文字列なのですが、「&presssync=1」以降にPressSync独自のパラメータを保持しています。

こちらのイメージタグ編集画面で設定した値を「&presssync=1」以降に保持しておき、アップロードがされた時にイメージタグを構築しているという仕組みです。

つまりPressSyncは画像がローカル状態でも様々なパラメータを与える事が現時点のリリースバージョンでも可能なのですが、プレビューの際にすぐに<img>タグに変換されてしまって、あんまり意味ないよな、と我ながら感じていました。

しかし今回の対応で、このややこしい仕組みが火を吹きます。

ローカルプレビューの場合は、以下のようなローカルイメージタグはアップロードを行わず、内部的に<img>タグに変換を行った上でプレビューを行います。

ローカルプレビューであっても、回り込みの設定や、リンクが正しく機能しているか？という確認が行えます。

最近リリースの頻度が多すぎるので、もうちょっと他の機能を実装してからまとめて申請します。


先日、不具合対応版を申請した所で、しかもそれがまだ承認されてませんし(^^;;

以上

via PressSync

短いスパンで何度もアプリのアップデートを行ってしまい申し訳ありません。


本日のリリースバージョンから新規インストール直後のデフォルトのプレビュー方式を「ローカルプレビュー」に変更したのですが、そのローカルプレビューが正しく動作していない事が発覚しまして。

wordpressは改行に関してマークダウン的な解釈を行うのですが、ローカルプレビューではその考慮が漏れていました。

どういう問題が起きるかというと、適切に改行を入れて文章を書いているのに、一行にまとまってプレビューされてしまうという事態になります。

これの対策として次の機能を追加しました。

マークダウン解析機能

プレビュー時に入力されたテキストをマークダウン変換を行いプレビューするスイッチです。

自動改行はパラグラフ内の改行コードを自動的にBRに変換するか？というスイッチです。

特にマークダウンプラグインを使用していない場合、両方ともONの状態で使って頂くことになるかと思います。

以上

via PressSync