Hatena::ブログ(Diary)

W&R : Jazzと読書の日々 このページをアンテナに追加 RSSフィード

2016/02/03

Safariで始めるiOSプログラミング(1):私の名前は「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>

あるいは直接実行→ http://tinyurl.com/gteblus


実行結果

とてもシンプルなエディタが走りました。出来ることは文章を書くことだけ。けれど、このスクリプトを改造していけば、可能性はどんどん膨らみます。ブックマーク・ボタンを長押しすると「追加」。ブックマークとして登録すれば、いつでも使えます。


スクリプトの解説

スクリプトを展開すると、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>

スクリプトの改行を削り、先頭に「data:text/html:,」を付けると、擬似的なHTMLファイルになります。これが「抜け道」です。オフラインでも実行できる。
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;

どういうとき使うかというと暗号解読。LeoのURL欄を読み取ると「data:text/html;charset=UTF-8,%3Cmeta%20・・・」とコード変換されています。記号類が%付きの数字になって、そのままだと何が書いてあるか分からない。そんな場合Leoにテキストを貼り付け上記ブックマークレットを実行すると、本来の記号に戻り編集しやすくなります。


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;

このブックマークレットを使うと、Leoの本文をスクリプトと見なし、dataスキームに変換します。試しに「スクリプトの解説」に書いたLeoのスクリプトを書いてみてください。改行していても大丈夫です。style内も自由にカスタマイズして好きな配色に変えてみる。そしてRunすると、自分だけのエディタが生成されます。プログラミングできるのです。


まとめ

プログラムを書けば、それが走るdataスキームになる。もちろんブックマークにも登録できます。使う言語はHTMLとJavascriptですから、通常のホームページを作る感覚。材料や参考書は、ネット上に揃っています。後はアイデア次第。何を作りたいかイメージしてスクリプトを書けば、自分だけのアプリがSafari上に現れる仕組みになっています。