iOS SafariでHTMLソースをみる方法-p--q

Bloggerテンプレートの編集を始めてからHTMLソースをチェックする機会が増えました。このiOS SafariでHTMLソースを見る方法を知ってからは自分のブログのソースを通勤電車の中で暇つぶしに見ています。

アドレスバーからJavaScriptを実行させることでソースを表示させることが可能

iphoneのsafariでソース表示する方法iPhone / iPad｜プログラムメモに教えていただきました。

javascript:d=document;c=d.charset||0;i=0;o=d.documentElement;d.write("<pre>"+(o.outerHTML||o.innerHTML).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")+"</pre>");c?d.charset=c:0;void(document.close());

ソースをみたいページをSafariで表示させた後アドレスバーにこのコードをペーストして「開く」をクリックすればそのページのソースコードが表示されます。

この方法はiOS Safariに限らずアドレスバーでJavaScriptを実行できるブラウザで使用可能です。

しかしパソコンのブラウザではセキュリティの関係でアドレスバーからのJavaScriptの実行が制限されているものが多いです。

私のWindowsパソコンではSleipnir4は実行できましたが、IE、Chrome、Firefoxいずれもダメでした。

IE、Chromeはコードをコピペではなくキーボードから入力すると実行できるようですが、こんな長いコードをキーボードから入力するのは現実的ではないですね。

JavaScriptをブックマークに登録してブックマークレットにする

JavaScriptをブックマークに登録しておいて、それを選択すればこのコードがアドレスバーに入力されるので毎回入力する手間が省けます。

こういうのをブックマークレットというようです。

ブックマークレットにするとSleipnir4以外のパソコンのブラウザでも実行可能になるようですが、パソコンでは右クリックメニューで簡単にソースが見れますのでこの機能はあえてブックマークレットにする必要はなさそうですね。

iphoneのsafariでソース表示する方法iPhone / iPad｜プログラムメモに書かれている通りに先頭に「http://a.a/」をつけたアドレスへのリンクをSafariでクリックしてブックマークに登録した後、そのブックマークを編集して「http://a.a/」を削除して再登録すればブックマークレットにできます。

この一旦登録したブックマークを再編集する、というブックマークレットの登録方法が煩雑でしたのでもっと簡単な方法がないかと探してみましたが一発で登録する方法はないようです。

タッチパッドで長いコードをドラッグ操作で先頭までたぐって文字列を編集するのはパソコンのマウス操作に比べるとかなり面倒です。

せめてこの操作だけでも省略できないかと工夫してみました。

ドラッグ操作なしでタップ操作だけでブックマークレットを登録したい

ブログに記載したコードをコピペすればタッチ操作での編集が省略できると思ったのですが、iOS Safari上ではコピーする範囲の選択にタッチ操作が必要でした。

編集不可能な部分の選択では「全選択」というのがでないのです。

ということで編集可能エリアにしてしまえばよいということになるのでtextarea要素で編集可能部分にコードを載せてみました。

テキストエリアで長タップすると「全選択」がでてきますね。

「全選択」すれば「コピー」できます。

ところがこの方法で作ったブックマークレットはうまく動きませんでした。

textarea要素でエンティティ文字をエンティティ文字のまま表示させたい

原因を調べると投稿編集画面のHTMLモードで入力した「&」「<」「>」が勝手に「&」「<」「>」に変換されていることがわかりました。これらの文字はHTMLエンティティといわれるものです。

「&amp;」とHTMLモードで入力すれば「&」と表示されるものの、textareaで囲むとこれが「&」に勝手に変換されてしまいます。

どうやらtextareaでは「&amp;」→「&」→「&」、というように勝手に2段階に変換されてしまうようです。

textareaで「&」「<」「>」として表示させる方法はないのか探しましたが見つけられませんでした。

散々頭脳を駆使した結果、「textareaの内容をあとで入れる」という方法を思いつきました。

inputボタンでtextareaにコードを代入すればOK

<script language="JavaScript">function ireru_botan(){
document.form_ireru.code_ireru.value="javascript:d=document;c=d.charset%7C%7C0;i=0;o=d.documentElement;d.write(%22%3Cpre%3E%22+(o.outerHTML%7C%7Co.innerHTML).replace(/&/g,%22&amp;%22).replace(/%3C/g,%22&lt;%22).replace(/%3E/g,%22&gt;%22)+%22%3C/pre%3E%22);c?d.charset=c:0;void(document.close());";
}</script>
<form name="form_ireru">
<textarea style="width:100%;height:90px" name="code_ireru"></textarea>
<input onclick="ireru_botan();" type="button" value="コードを表示" />
</form>

これを投稿編集画面のHTMLモードに入力して表示される「コードを表示」ボタンをクリックすると、エンティティ文字がエンティティ文字のままtextareaに表示されます。