Safariで始めるiOSプログラミング(１)：私の名前は「Leo」です
iPhone/iPadのSafariはJavascriptが走る。つまり、Webアプリを作ることができます。ただ、パソコンであればHTMLファイルを作りローカルでも起動できるのですが、モバイル環境だとファイルが作れない。ネットにアップしてブラウザで開く？ それだとオフラインでは使えないアプリになってしまう。でも実はこれ、一つだけ抜け道があります。
dataスキーム
以下のスクリプトをSafariに貼り付けてみてください。SafariのURL欄を長押しすると「ペーストして検索」と出るので、それでスクリプトを実行できます。data:text/html;charset=UTF-8,<meta name=viewport content=initial-scale=1><style>#Leo{font-size:large;background:ivory;width:100%;height:100%;white-space:pre-wrap;}</style><title>Leo</title><textarea id=Leo></textarea>実行結果
とてもシンプルなエディタが走りました。出来ることは文章を書くことだけ。けれど、このスクリプトを改造していけば、可能性はどんどん膨らみます。ブックマーク・ボタンを長押しすると「追加」。ブックマークとして登録すれば、いつでも使えます。
スクリプトの解説
スクリプトを展開すると、textareaを貼り付けるだけのもの。プログラムは一つも走っていない。なのにエディタとして使えるからHTMLの底力はすごい。<style>
#Leo{
font-size:large;
background:ivory;
width:100%;
height:100%;
white-space:pre-wrap;
}
</style>
<title>Leo</title>
<textarea id=Leo></textarea>styleで定義しているのは「属性」。backgroundで背景色をivoryにしていますが、blackにすれば黒色になる。文字が読めなくなるから、color:white; を追加し文字色を白にします。フォントが大きすぎる場合は、font-sizeをmediumにしてください。もし明朝体が良ければ、font-family: Hiragino Minco ProN; を追加。そんなふうにカスタマイズできます。
Little Editing Organizer
このエディタの名前を「Leo」とします。textareaのIDをLeoとしているので、変数Leo.valueを使うと、ブックマークレットで本文を拾い出すことが出来ます。たとえば、URIデコードしたい場合は下記ブックマークレット。
javascript:s=decodeURIComponent(Leo.value);Leo.value=s;Run
Leoは「プログラミング環境」になります。Javascriptを書くだけではなく、実行もできる。つまり、新しいWebアプリを作って走らせることが出来ます。
javascript:s=Leo.value.replace(/\n\s*/g,"\n"); location="data:text/html;charset=UTF-8,<meta name=viewport content=initial-scale=1>"+s;
