#chiroruLab

趣味と日々の雑記録

「Write Space」でクエリパラメータを使えるようにしました。

f:id:chiroru_27:20131111174916p:plain
選択範囲を送りたかったので、URLクエリパラメータ形式で指定出来るようにしました。

記法も通常のURLクエリパラメータと同じです。(?text=text)

続きでは、簡単な例などをまとめます。



Textwellに裏紙を作ってこっそり書ける WriteSpace - W&R : Jazzと読書の日々
ソースをダウンロードして自前のDropboxで使うシステムですが、そのままじゃダメですか? 走っちゃうんですけど。
どうも、@chiroru_27 です
winerosesさんの記事を読んで、Publicフォルダ以外でも共有できる事が判明。早速DEMOファイルを移動しました。
ありがとうございましたm(_ _ )m

コメント欄が見当たらないので、ここに返信をば。
いえいえ、駄目ではないですよ!
ただWrite Spaceを更新する場合、そこに上書きしていく予定なので、それでも大丈夫ならこちらとしては全く問題ありません。
(いい意味で考えれば、オートアップデート。あらステキ。)

「Write Space」そのまま実行リンク
「Write Space」DLリンク

Write Space

いくつか細かい変更をしました。

  • SetQueryParameters関数の追加。
    • クエリパラメータ形式でデータを設定できます。
  • エディタ設定コマンドに「about」を追加。
    • 最終更新日などが見られます。
  • commandSwitch変数の値をiPadiPhone/iPod touchで切り替えるように変更
    • iPhone/iPod touchでもWrite Spaceが使えるようになりました。ただタイトルに表示する情報はiPhoneなどでは見られません。

クエリパラメータ

これでできる事は、URLからデータを指定して起動することだけ。

簡単な説明。

Textwellを例にすると、”?text=[text to add with]”の部分。

引用:Textwell | URL Schemes
textwell:///add?text=[text to add with]

?・・・クエリパラメータ開始のマーク
text・・・名前
=・・・イコール
[text to add with]・・・値

複数指定したい時は「&」でつなげていくだけ。シンプルでいいですね。
(?名前=値&名前=値&名前=値...)

サンプル

実際に指定するとこんな感じ。もちろん「Must be URL-encoded」
以下のリンクを開くと、現在のlocalStorageの内容が上書きされる(と思う)ので注意して下さい。

「text」と入力された状態で起動します。
https://dl.dropboxusercontent.com/s/o0swkbwa8rz0mzx/index.html?text=text

> ?text=text

赤い文字で「text」と入力された状態で起動します。
https://dl.dropboxusercontent.com/s/o0swkbwa8rz0mzx/index.html?text=text&color=red

> ?text=text&color=red

少し幅を狭めて、文字を黒、背景を白で「text」と入力された状態で起動します。
https://dl.dropboxusercontent.com/s/o0swkbwa8rz0mzx/index.html?text=text&color=%231b1b1b&bgcolor=%23fafafa&width=80%25

> ?text=text&color=%231b1b1b&bgcolor=%23fafafa&width=80%25

選択範囲を「Write Space」に追記。(for iPad

javascript:
(function(){
 var query = encodeURIComponent(window.getSelection());
 if(query != "") {
  var link = "https://dl.dropboxusercontent.com/s/o0swkbwa8rz0mzx/index.html?add=" + query;
  window.open(link,"WriteSpace");
 }
})()

> ?add="選択範囲"

「Write Space」を開く
一番実用的なのはこれかな。

javascript:
(function(){
 var link = "https://dl.dropboxusercontent.com/s/o0swkbwa8rz0mzx/index.html";
 if(window.getSelection() != "") link += "?add="+encodeURIComponent("\n"+window.getSelection());
 window.open(link,"WriteSpace");
})()

> ?add="選択範囲"

使える名前はこちら

基本的には設定画面から指定できるやつと同じです。

  • text

テキストを置き換えます。
?text=TEXTTEXT

  • add

テキストを末尾に追加します。
?add=TEXTTEXT

  • color

字の色を変更します。
?color=red
?color=%231b1b1b

  • bgcolor

背景色を変更します。
?color=white
?color=%23fafafa

  • font

フォントを変更します。
?font=Hiragino%20Kaku%20Gothic%20ProN
?font=Monaco

  • fontsize

字の大きさを変更します。
?fontsize=14px
?fontsize=medium

  • width

横幅を変更します。
?width=700px
?width=80%25


デザイン設定を共有出来たら面白いかも。

設定画面でexportとか打ってりしてね(笑)

以上、@chiroru_27 でした!