電車で移動中にいろんなサイトを閲覧してて、ちょっと HTMLソース を見てみたいと思ったことありませんか？PCだと簡単に見れるのですが、Safariで表示する方法が無いか調べました。

基本的な方法は「ブックマークレット」を利用する方法のようです。（「ブックマークレット」とはブックマーク(お気に入り)に置いて、そこから呼び出すプログラムのことです。）

ブックマークを追加

何でもいいのでまずはブックマークを追加します。
 

 

 

ブックマークを編集

 

 
ブックマークを編集します。とりあえず名前は何でもいいのですが分かりやすく「ソース表示」にしました。
 

 

アドレスに「JavaScript」を入力する

アドレスに「JavaScript」を入力します。
アドレスバーでは自動的にエンコードされますが、お気に入りに入力の際は自動的にエンコードされないので、URLエンコードする必要があります。
 

javascript:d=document;c=d.charset||0;i=0;o=d.documentElement;d.write%28%22%3Cpre%3E%22+%28o.outerHTML||o.innerHTML%29.replace%28/&/g,%22&%22%29.replace%28/%3C/g,%22<%22%29.replace%28/%3E/g,%22>%22%29+%22%3C/pre%3E%22%29;c?d.charset=c:0;void%28document.close%28%29%29;

 
登録したら、ソースを見たい画面でお気に入りの「ソース表示」をタップします。
 

 
ただ、これだとイマイチ分かりにくいので、こちらはSnoopyを採用したバージョン。
 

javascript:(function()%7Bvar%20d%3Ddocument%2Cs%2Ce%3Bvar%20el%3Dd.getElementById('snpy')%3Bif(typeof%20Snoopy!%3D'undefined')%7BSnoopy.toggle()%3Breturn%7Delse%20if(el)%7Bel.className%3D%2Fclosed%2F.test(el.className)%3Fel.className.replace('closed'%2C'')%3Ael.className%2B'%20closed'%3Breturn%7Ds%3Dd.createElement('link')%3Bs.setAttribute('href'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.css')%3Bs.setAttribute('rel'%2C'stylesheet')%3Bs.setAttribute('type'%2C'text%2Fcss')%3Bd.getElementsByTagName('head')%5B0%5D.appendChild(s)%3Be%3Dd.createElement('script')%3Be.setAttribute('src'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.js')%3Bd.getElementsByTagName('body')%5B0%5D.appendChild(e)%7D)()%3B

外出先とかでソースを確認したい時は使ってみてください。

自己紹介

松田 大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「 こどもICTかつしか教室 」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ