寒い日が続くのでパソコンの前に座ることなく（コタツに入ったまま） 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 の変数みたいなもの。
| カーソルがある行全体の文字列、または選択した範囲の文字列 | |
| 全体の文字列 | |
| 現在のカーソル位置を表す数値（文字数） カーソルがテキストの先頭にある場合 “ 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
