作品を公開
作品ができても、Safariで別のことをすると消えてしまいます。Leo上のプログラムは儚い。もう一度走らせるにはスクリプトを打ち直すしかない。これでは実用的ではありません。もったいないオバケが出るので、短縮URLサービスを使ってリンクに変換してみます。
Share
Image may be NSFW.
Clik here to view.
Leoにスクリプトを書いた状態で下記スクリプトを走らせると、別タブに短縮URLアドレスが表示。これをブログに貼るだけ。ただし、iPhoneはバックグラウンドでタブが開くようです。何もしてないように見えても、裏で何か開いてないか確認をよろしく。
javascript:s=Leo.value.replace(/\n\s*/g,"");data="http://tinyurl.com/api-create.php?url="+encodeURIComponent("data:text/html;charset=UTF-8,<meta name=viewport content=initial-scale=1>"+s);window.open(data,"_blank");
登録リンクはこちら→ http://tinyurl.com/jcl2ojk
MarkletMaker
本日のWebアプリはブックマークレット登録システム。Safariにはブックマークレットを直接代入する方法がありません。それでボックス方式にしました。これもLeoで作れます。登録リンクからスクリプトが走るので、ブックマークしてお使いください。
<title>MarkletMaker</title>
<style>
textarea{
width:100%;
font-size:large;
word-wrap:break-word;
}
div{
color:black;
text-align:center;
background:lightgreen;
font-size:large;
padding:10px;
border:1px solid green;
border-radius:5px;
}
hr{
border:0;
}
</style>
<body style=font-size:large;>
<hr>
ブックマークレット登録用リンクを作成。
<hr>
<textarea id=line1 placeholder="タイトル"></textarea>
<hr>
<textarea id=line2 placeholder="スクリプト" rows=5></textarea>
<hr>
<div onclick=Make()>短縮URLに変換</div>
<script>
function Make(){
url="data:text/html;charset=UTF-8,<meta name=viewport content=initial-scale=1>";
url+="<title>"+line1.value+"</title>下記スクリプトをブックマークに貼り付けてください。<br/>";
url+="<textarea rows=5 style=\"font-size:large;width:100%;background:#eee;word-wrap:break-word;padding:5px;border-radius:5px;\">";
url+=line2.value.replace(/\n\s*/g,"").replace(/&/g,"&").replace(/</g,"<");
url+="</textarea>";
link="http://tinyurl.com/api-create.php?url="+encodeURIComponent(url);
window.open(link,"_blank");
}
</script>
</body>
登録リンクはこちら→ http://tinyurl.com/h8h5fda
ブックマークレットのリンク化
Image may be NSFW.
Clik here to view.
ブックマークレットの名前とスクリプトを書き込んでボタンを押す。すると短縮アドレスに変換されます。このURLアドレスをSafariで開くとブックマークレットが現れる仕掛け。出てきたページ自体をブックマークすると、名前にスクリプト名が入ります。スクリプト自体は手作業で貼り付けてください。すでにこのブログで使ってきた方法です。
まとめ
これでWebアプリをシェアする方法と、ブックマークレットを公開する方法が出来ました。ブログに自作アプリを載せるのが簡単になる。もちろん内容はJavascriptなので、パソコンのブラウザでも実行可能です。どの環境でもアプリが動かせる。
ただ、Javascriptには「クリップボード」がないんだよなあ。確かに、知らないうちにクリップボードの内容をサーバーが収集すると困るので、こうした制限が付いています。URLスキームの使えるコピペ・アプリを噛ませるとか、工夫が必要なところ。
