ぼやき

0

寒い日が続くのでパソコンの前に座ることなく(コタツに入ったまま) 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 App
カテゴリ: 仕事効率化
価格: 無料

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

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

Best Album – Picasaの写真/動画管理 App (¥85)

20130204_1.jpg

20130204_2.jpg

これで 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 プロポリス

20130204_3.jpg

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

20130204_4.jpg

<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 で指定した文字数を選択状態に変更

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

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

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

DraftPad App
カテゴリ: 仕事効率化
価格: 無料

Best Album – Picasaの写真/動画管理 App
カテゴリ: 写真/ビデオ
価格: ¥85

関連記事

コメントを書く


*

トラックバック URL