スマホでWebサイトのソースを表示する方法ブログ作業が劇的に効率化UPする話し

iPhoneの使い方-アプリなど

2020/09/11 2020/09/11

#スマートフォン #スマホ #iPhone #ブログ #ブログ作成 #ブロガー #作業効率化 #ブロガーお役立ち #iPhone便利ワザ #スマホでソース表示

今回は、スマホでWebサイトのHTMLソースを表示・確認する方法についてご紹介しようと思います。

僕は、普段からiPhoneを使ってブログを書いています。したがって、スマートフォンで全ての作業を完結させるには、PCと同程度の機能があることが必要です。

ところが、PCではマウスでブラウザの右クリックから簡単にソースの表示ができるのに、スマホだとその機能がありません。

これは、ネットニュースの記事などを自ブログで引用する際に、よくWebページのHTMLソースを開いてtitleタグを確認している僕にとっては悩みの種のひとつでした。

しかし、スマホでもPCと同じく簡単にHTMLソースを表示する方法を知ってからは、ブログ作成の効率も劇的にアップ！非常に便利なので、やり方をこれから解説します。

iPhoneでWebページのHTMLソースを見る方法

お使いのスマホがiPhoneの場合は、ブックマークレットを利用してHTMLソースを表示するのが便利です。

ブックマークレットを作成する

参考：ブックマークレットとは？

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。
引用：ブックマークレット - Wikipedia

手順

①まずは、どこかのWebページを開いてブックマークに登録。今回は、僕のブログ『ゆうらり Happy Smile』で試してみます。

②次に、以下のJavaScriptコードをクリップボードにコピーします。

javascript:(function(){var a=window.open('about:blank').document;a.write('<!DOCTYPE html><html><head><title>ViewSource:'+location.href+'</title><meta name="viewport" content="width=device-width,initial-scale=1" /></head><body></body></html>');a.close();var s = a.createElement("script");s.src = "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian";a.body.appendChild(s);var b=a.body.appendChild(a.createElement('pre'));b.className='prettyprint lang-html linenums';b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.style.wordBreak='break-all';b.style.fontSize='11px';b.appendChild(a.createTextNode(document.getElementsByTagName('html')[0].outerHTML))})();

③先ほど登録したブックマークの項目を編集します。題名は「HTMLソースを表示」とでもしておけばわかりやすいです。URLの部分には、クリップボードにコピーしたJavascriptコードを貼り付けて編集を完了します。