TextwellのスライドカーソルがiOS7にて復活!早速、 AppSearchをボタン付きにしてみた

f:id:sattelle:20131003173859j:plain2013/10/3時点の記事です。

Textwellにスライドカーソルが復活!

Textwellが1.1.2にアップデート!
iOS7でもスライドカーソルが使えるようになりました。

Textwell

Textwell

  • Sociomedia
  • ¥250

App Storeから姿を消してからも、エディタとして頼りにしていたDraftpadを使用し続けていましたが、
@hiro45jpさんや@ふぃーぷれさんのアプリ紹介のリンク取得ブックマークレットAppHtml”の連携先として、機能しなくなってしまいました。
iOS7以降、調子の出なかったTextwellのスライドカーソルが復活したので、ようやく引越しを決意致しました。

Hello! Textwell.

Draftpadの後継アプリ、Textwell。
“アシスト”から“アクションへ。
変わったのは名前だけではありません。
f:id:sattelle:20131004220115j:plain
Evernoteへポスト”のDraftpadアシストがTextwellアクションに変わると
こんなにシンプル!
URIエンコードの必要がなくなり、設定された変数を使ってjavascriptを書くようにアクションを作成できます。
って、javascriptなんて書けねー。
( ̄- ̄;)
という訳で、こちらの力をお借りしました。
Textwellでアプリの紹介リンクを作成する AppSearch - W&R : Jazzと読書の日々
Draftpadブログ?でお馴染みの@jazzzzさんのAppSearch。このアクションを今迄自分が使っていたボタン付きリンクが取得できるようにカスタムします。
f:id:sattelle:20131004231138j:plain
Textwellにはアクションのソース編集の専用画面が設けられているので、以前よりカスタムが楽チン!
私にはjavascriptをゼロから書くスキルはありませんが、今回することは、
  1. ボタンの画像とリンクを付け足す。
  2. カラーリングなどCSS部分の変更。
ぐらいです。早速やってみましょう!
*Jazzと読書の日々 オリジナルソース

// PHGのat番号を at に登録してください。

at="10l4Z2";

color="slate";

title="darkblue";

background="ghostwhite";

border="lightgray";


type=(confirm("・iPhone用→[Cance] ・iPad用→[OK]"))? "iPadSoftware":"software";

q=new XMLHttpRequest();

q.open("get","http://itunes.apple.com/search?country=JP&entity="+type+"&limit=100&term=

"+encodeURIComponent(T.current),false);

q.send(null);

res=JSON.parse(q.responseText).results;

document.write("<meta name=viewport content=initial-scale=1><title>"+T.current+"</title>");

for(i=0;i<res.length;i++){

  app=res[i];

  url=app.trackViewUrl;

  link=url+"&at="+at;

  name=app.trackName;

  icon=app.artworkUrl60;

  icon100=app.artworkUrl100;

  version=app.version;

  price=app.formattedPrice;

  artist=app.artistName;

  genres=app.genres;

  plate="<blockquote name='"+name+"' style='background-color:"+background+";padding:10px;border-radius:5px;border:1px solid "+border+";'><a href="+link+" style='color:"+title+";'><img width=80 align=left src="+icon100+" style='border-radius:5px;margin:1px 15px 1px 1px;box-shadow:1px 2px 3px gray;'></a><font size=+1><strong>"+name+" "+version+"</strong></font></a><br/><font size=-1 style='color:"+color+";'>分類: "+genres+"<br/>価格: "+price+" ("+artist+")</font><br clear=all></blockquote> ";

  sample="<div style=color:white;background-color:black;padding:10px;><a onClick=T('insert',{text:' "+icon100+" '})><img align=left width=75 src="+icon+" style=border-radius:5px;></a><a onClick=T('replaceCurrent',{text:unescape('"+escape(plate)+"')})><strong>"+name+" "+version+"</strong></a><br>分類:"+genres+"<br>価格:"+price+" ("+artist+") <a href="+url+"><img src=http://r.mzstatic.com/ja_jp/images/web/linkmaker/badge_appstore-sm.gif></a><br clear=all></div>";

  document.write(sample);

}

document.write("<hr>");


*ソースは改行してあります。
前半部分でカラーリング変更できるようになってます。親切ですね。流石です。
*登録はこちらから(AppSearch2)
“type=”から始まるコードが入力ウィンドウがポップアップして、iPhoneアプリiPadアプリを選ぶ部分です。
私はiPadを所有していないので、ここは削ってしまいます。“q=”からはjavascript。理解不能ですが、恐らくはリンクを取得して、それを書き出すというコマンドかと。ここはノータッチです。blockquoteからはデザインの部分。htmlタグに直接、CSSのスタイルを記述してあるようです。ここにボタンを足していきます。"sample=”からはアプリ選択画面の設定ですね。それではカスタム後のソースを紹介します。

AppSearch Me

// PHGのat番号を at に登録してください。

at="11I77Q";

color="lamp black";

title="dimgray";

background="whitesmoke";

border="lightgray";


type="software";

q=new XMLHttpRequest();

q.open("get","http://itunes.apple.com/search?country=JP&entity="+type+"&limit=

100&term="+encodeURIComponent(T.current),false);

q.send(null);

res=JSON.parse(q.responseText).results;

document.write("<meta name=viewport content=initial-scale=1><title>"+T.current+"</title>");

for(i=0;i<res.length;i++){

  app=res[i];

  url=app.trackViewUrl;

  link=url+"&at="+at;

  name=app.trackName;

  icon=app.artworkUrl60;

  icon100=app.artworkUrl100;

  version=app.version;

  price=app.formattedPrice;

  artist=app.artistName;

  genres=app.genres;

  plate="<blockquote name='"+name+"' style='background-color:"+background+";width:490;

margin:10px;padding:8px;border-radius:5px;border:1px solid "+border+";'><a href="+link+" style='color:"+title+";'><img width=80 align=left src="+icon100+" style='border-radius:5px;margin:1px 15px 1px 1px;border:1px solid "+border+";'><font size=+2%><strong>"+name+" "+version+"</strong></font></a><br/><font size=-2% style='color:"+color+";'>分類: "+genres+"<br/>価格: "+price+" ("+artist+")</font><br><br clear=all><a href="+link+"><img width=175 height=55 src=http://cdn-ak.f.st-hatena.com/images/fotolife/s/sattelle/20130731/20130731235043.jpg style="display:block;margin-left:auto;margin-right:auto;text-align:center;pading:10px;border-radius:5px;box-shadow:1px 2px 3px gray;"></blockquote> ";

  sample="<div style=color:white;background-color:black;padding:10px;><a onClick=T('insert',{text:' "+icon100+" '})><img align=left width=75 src="+icon+" style=border-radius:5px;></a><a onClick=T('replaceCurrent',{text:unescape('"+escape(plate)+"')})><strong>"+name+" "+version+"</strong></a><br>分類:"+genres+"<br>価格:"+price+" ("+artist+") <a href="+url+"><img src=http://r.mzstatic.com/ja_jp/images/web/linkmaker/badge_appstore-sm.gif></a><br clear=all></div>";

  document.write(sample);

}

document.write("<hr>");


*ソースは改行してあります。
こんなん出来ました。
実際にTextwellのリンクを取得し、貼ってみると、
Textwell 1.1.2
分類: 仕事効率化,ユーティリティ
価格: ¥250 (Sociomedia)


何とか思ったような仕上がりになりました。はてなディフォルトのリンクと場面によって、使い分けて行きたいと思います。(はてなディフォルトリンクと整合性を持たせるなら、プレートのwidthを指定しない方がいいかもしれません。)
*登録はこちらから(AppSearch Me)

f:id:sattelle:20130731235017j:plain
今回、アクションをカスタムしていて少し気になった部分があります。
fontタグ使ってる人はもう使うのやめよう | delaymania
こちらの@delaymaniaさんの記事にあるようにalginタグや、fontタグはHTML5では非推奨となっている点です。
カスタムにあたって、その辺りも自分なりに改善してみようといろいろ工夫してみましたが、アクションが動かなかったり、プレートの配置が崩れてしまったりで上手くいきませんでした。
だから今回は暫定版です。
しかし、アクションが動いた時は本当に嬉しかったので、ちょっと真剣にHTML、CSSjavascriptを勉強してみようと思いました。
もう一つはスライドカーソルが空行に反応しない点。こちらは何らかのバグだと思うので、改善を待とうと思います。(というか、待つしかない。)

末長くよろしく!

設定に時間がかかる割にできることは以外と大したことない。そういうアプリが沢山ある中で、Textwellは正に対極。すぐ使い始められるけど、トンデモなく奥が深い。自分の経験値に合わせて可能性がどんどん広がって行く。長い付き合いになりそうです。皆さんも是非!ハマるよ!
d(゚ε゚*)
Textwell 1.1.2
分類: 仕事効率化,ユーティリティ
価格: ¥250 (Sociomedia)