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


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モードで入力した「&amp;」「&lt;」「&gt;」が勝手に「&」「<」「>」に変換されていることがわかりました。これらの文字はHTMLエンティティといわれるものです。

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

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

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

散々頭脳を駆使した結果、「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に表示されます。

ソースを表示させるブックマークレットの登録方法


ようやく具体的方法です。えらく悩んだのでその経過をまず書きたかったので、、、

iOSのSafariでこのページを開き、まず下の「コードを表示」ボタンをクリックします。

コードが表示された以下の枠内で長タッチ→「全選択」→「コピー」


この画面下のをタッチします。を選択。


ブックマーク追加画面となりますが、ここではアドレスは変更できないのでタイトルを適宜変更して「保存」します。

元の画面に戻ったら今度はをタッチして登録したブックマーク一覧を出して、左下のをタッチ。


先ほど登録したブックマークレット名をタッチしてブックマーク編集画面にします。

今度はアドレスが編集できるのでアドレスの部分をタッチして右端のをタッチして、アドレス欄を空欄にしたあと空欄を長タッチして先ほどコピーしたブックマークレットのコードをペーストします。

これで完了です。

Nexus7のChromeでも同じ方法でできました。Chromeの場合はブックマークの登録時にアドレスも変更できました。

参考にしたサイト


iphoneのsafariでソース表示する方法iPhone / iPad|プログラムメモ
ここに教えていただきました。iPod touchでも同じ方法でいけました。

アドレスバーからjavascript:を実行できなくするブラウザ側の対策について | MemeTodo
アドレスバーからjavascriptを実行について各ブラウザ別対策。

コピー・ペースト・カット - アイフォンの使い方 - TeachMe iPhone
タッチ操作での限定した文字列選択はなかなか難しいです。

HTMLタグ/フォームタグ/複数行のテキスト入力欄を作る - TAG index Webサイト
textarea要素を使いました。

HTML ISO-8859-1 Reference
HTMLエンティティ一覧

WEST MiRa JavaScript:基本操作 - フォームの値を取得&表示 - 7.テキストエリアに値を表示
textarea要素に値を代入する方法
PR

0 件のコメント:

コメントを投稿