トイレのうず

寒い日が続くのでパソコンの前に座ることなく(コタツに入ったまま) iPhone から Blog の更新が手軽にできないものかと思って調べてみました。 WordPress の iPhone アプリもあって更新できるのだけれどいくつか不満があるのです。

一番大きな不満は画像の投稿。この Blog の画像は写真共有サービスである Picasa にアップロードしています。 WordPress 本体には Picasa Express x2 というプラグインをインストールしているので簡単に画像リンクが取得できるのですが、 iOS 版の WordPress のアプリだとこの画像リンクを取ってきて整形するのがかなり大変。なんとか簡単にできないものかと調べていたら、 PicasaHtml という DraftPad というアプリで使うアシストがありました。
→ Happy-Go-Lucky : DraftPad : PicasaHtml

喜んだもの束の間、一般公開しているアルバムからしか写真を選べないのです。残念。 PicasaHtml の使用をあきらめたのは blog 用画像のフォルダの公開範囲を「自分だけ」にしているためです。公開範囲を変更すると画像 URL が変更になってしまうことがあるようです。
→喫茶店の部屋: Blogger ユーザ注目. Picasa の共有設定は安易に変えてはいけない.

DraftPad というアプリは下書きするのに便利そうなので使ってみることにして、自分でアシストを作ってみることにしました。

DraftPad は開発が終了しており、 TextWell というアプリが後継です。

Textwell
カテゴリ : 仕事効率化
価格 : ¥ 360

Picasa の画像の URL 取得と DraftPad のアシスト実行

Picasa からの画像の URL を取ってくるのには Best Album という Picasa の管理アプリを使います。写真を表示させてから左下の四角から飛び出す矢印のボタンをタップ。画像の URL をコピーを選択。

Picasa が Google Photos に変更になったため、 Best Album の開発は終了しました。

Best Album の表示画面
写真の URL をコピー

これで Draft Pad に画像の URL が持ってこれました。

https://lh3.googleusercontent.com/-85zSXRVl4_s/UQkcVvtjSkI/AAAAAAABMiM/SRXcL942COk/s640/20130130.jpg

半角スペースのあとに title 属性タグに指定したい語句を追加します。

https://lh3.googleusercontent.com/-85zSXRVl4_s/UQkcVvtjSkI/AAAAAAABMiM/SRXcL942COk/s640/20130130.jpg プロポリス
DraftPad のアシストを実行前

DraftPad にて変換する行にカーソルをおいて登録したアシストを実行するとこの通り!

DraftPad のアシスト実行後
<a href="https://lh3.ggpht.com/-85zSXRVl4_s/UQkcVvtjSkI/AAAAAAABMiM/SRXcL942COk/s800/20130130.jpg" title="プロポリス" ><img src="https://lh3.ggpht.com/-85zSXRVl4_s/UQkcVvtjSkI/AAAAAAABMiM/SRXcL942COk/w400/20130130.jpg" alt="20130130.jpg" title="プロポリス" class="aligncenter" width="400" /></a>

Picasa Express x2 でインポートしたときと同じコードになりました。(画像の縦長に対応するためにもう少し改良が必要かも。)

DraftPad の自作アシストのコード

アシストのコードは下記のよう。

draftpad://self/web?source=<script>
location.href=%22draftpad:///webdelegate?load=f%22;
f=function(q){t=q.t;s=q.s;p=q.p;l=q.l;
if((l==0)%26%26(s.indexOf(%22googleusercontent%22,0)!=-1)){
ls=t.lastIndexOf(%22%5Cn%22, p-1);
le=t.indexOf(%22%5Cn%22, p);
tt=new Array(3);
tt[0]=t.substring(0,ls+1);
tt[2]=t.substring(le,t.length);
s=s.split(%22 %22);
imgalt=s[0].split(%22/%22).reverse();
s[0]=s[0].replace(/googleusercontent%5C.com/,%22ggpht.com%22);
s[0]=s[0].replace(/%5C/(s|w|h|c)%5Cd+?%5C//,%22/s800/%22);
s[2]=s[0].replace(/%5C/(s|w|h|c)%5Cd+?%5C//,%22/w400/%22);
if(s[1]==null){s[1]=imgalt[0]};
tt[1]=%27%3Ca%20href%3D%22%27+s[0]+%27%22%20title%3D%22%27+s[1]+%27%22%20%3E%3Cimg%20src%3D%22%27+s[2]+%27%22%20alt%3D%22%27+imgalt[0]+%27%22%20title%3D%22%27+s[1]+%27%22%20class%3D%22aligncenter%22%20width%3D%22400%22%20%2F%3E%3C%2Fa%3E%27;
t=tt.join(%22%22);
draftpad.replace(t,tt[0].length+tt[1].length,0);}
else{draftpad.close();}}
</script>&t=<@@>&s=<@>&p=<#LOC>&l=<#LEN>

本当は 1 行で書かないといけないみたいなんだけど複数行でも動きました。

上のコードは JavaScript をアシストとして動かしています。 DraftPad のアシストで JavaScript を使用する場合、 1 行だけ処理するというのは無理で全文読み込んで処理を行わなければならないみたいです。

JavaScript を使用する場合の注意点はコードの URL エンコードです。 <script> 〜 </script> で囲まれた部分は「”」「 & 」「 % 」のほか「’」「 \ 」も URL エンコードしなくてはなりません。ほかには HTML タグとして文字列を書いた場合、その部分を URL エンコードしないと動きません。

%22
%27
\ %5C
& %26
% %25
文字列としての HTML タグ 全体を URL エンコード

エンコードする前のコードはこんな感じです。(もっとスマートなコードになりそうだけれど……。)

draftpad://self/web?source=<script>
location.href="draftpad:///webdelegate?load=f";
f=function(q){
	t=q.t;s=q.s;p=q.p;l=q.l;
	if((l==0)&&(s.indexOf("googleusercontent",0)!=-1)){ //カーソルが選択状態および Picasa以外のURLを除外
		ls=t.lastIndexOf("\n", p-1); //カーソルがある前の行までの文字数取得
		le=t.indexOf("\n", p); //カーソルがある次の行の始まりの文字数取得
		tt=new Array(3);
		tt[0]=t.substring(0,ls+1); //カーソル行前までの文字列取得
		tt[2]=t.substring(le,t.length); //カーソル行の後ろの文字列取得
		s=s.split(" "); //URLとtitle属性を取得
		imgalt=s[0].split("/").reverse(); //alt属性にするファイル名取得
		s[0]=s[0].replace(/googleusercontent\.com/,"ggpht.com"); //URLの整形
		s[0]=s[0].replace(/\/(s|w|h|c)\d+?\//,"/s800/");
		s[2]=s[0].replace(/\/(s|w|h|c)\d+?\//,"/w400/");
		if(s[1]==null){s[1]=imgalt[0]}; //title属性がない場合ファイル名を設定
		tt[1]='<a href="'+s[0]+'" title="'+s[1]+'" ><img src="'+s[2]+'" alt="'+imgalt[0]+'" title="'+s[1]+'" class="aligncenter" width="400" /></a>'; //HTMLタグ作成
		t=tt.join(""); //すべて結合
		draftpad.replace(t,tt[0].length+tt[1].length,0); //戻るカーソル位置を設定
	}else{
		draftpad.close(); //例外処理
	}
}
</script>&t=<@@>&s=<@>&p=<#LOC>&l=<#LEN>

最終行にある <> に囲まれているのは「プレイスフォルダ」という DraftPad の変数みたいなもの。

カーソルがある行全体の文字列、または選択した範囲の文字列
全体の文字列
現在のカーソル位置を表す数値(文字数)
カーソルがテキストの先頭にある場合 “ 0 ”
選択範囲の現在の長さを表す数値(文字数)
文字列 “ Hello ” が選択されている場合 “ 5 ”

→ DraftPad : Assist Help

ちなみに DraftPad 独自の JavaScript は下記の 3 つ。

draftpad.close() アシストを閉じて編集画面に戻る
draftpad.insert( text ) カーソルの位置に text を挿入
draftpad.replace( text , cursor , selection ) 本文全体を text と置き換え
カーソルを cursor (文字数)に移動
selection で指定した文字数を選択状態に変更

今回作成したアシストでは JavaScript で処理した文字列を書き戻すのに draftpad.replace() を、例外処理で処理を途中で終了するのに draftpad.close() を使っています。

リンク等自分が使いやすいアシストを探してきたり作ったりして iPhone からの投稿環境を徐々に整えていきたいです。

*参考サイト
→ W&R : Jazz と読書の日々:自分のブログ名を一括削除する DraftPad アシスト Eraser
→ W&R : Jazz と読書の日々: DraftPad 用の置換アシストを作成するアシスト GREPMaker

Textwell
カテゴリ : 仕事効率化
価格 : ¥ 360

関連記事

iPhone 6s を au と MVNO でのどちらで使うのがお得か計算してみた【データ専用機編】
iPhone
thumbnail
iPhone 4s で MVNO の SMS ありなしの挙動を検証してみた 〜バッテリの持ちなど
iPhone
検索中…
0SIM by So-net を GPP でアンロックした iPhone 4s で使ってみた
iPhone携帯電話・格安SIM
nano SIMをmicro SIMのサイズにするアダプタとGPP
クローン iPhone 上で LINE はこう動く!〜ベッキーとゲスの極みの LINE 流出を再現してみた【動画あり】
iPhone
クローンiPhoneで他人がLINEを盗み見できる可能性あり
100 円ショップの au 版変換アダプタで iPhone 4S を充電できた!
iPhone
au充電器からiPhone Dockコネクター変換アダプタ
詳しくない友達でもわかった! ソフトバンクから mineo に SIM フリー iPhone を購入して MNP する流れ
iPhone携帯電話・格安SIM
ソフトバンクからmineoにMNP