DraftPadの自作アシストでPicasaの画像リンクをiPhoneで作成してみた : トイレのうず／ブログ

寒い日が続くのでパソコンの前に座ることなく（コタツに入ったまま） 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 の開発は終了しました。

これで 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 にて変換する行にカーソルをおいて登録したアシストを実行するとこの通り！

<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 の変数みたいなもの。

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

→ DraftPad ： Assist Help

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

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