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

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

iPhoneの使い方-アプリなど
2020/09/11
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#スマートフォン #スマホ #iPhone #ブログ #ブログ作成 #ブロガー #作業効率化 #ブロガーお役立ち #iPhone便利ワザ #スマホでソース表示

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

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

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

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

スマホを使ってブログを書くブロガーのイメージ画像

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

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

スポンサードリンク

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

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

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

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

参考:ブックマークレットとは?

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

引用:ブックマークレット - Wikipedia

手順

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

iPhoneでWebページのHTMLソースを見る方法-説明画像1iPhoneでWebページのHTMLソースを見る方法-説明画像2

iPhoneでWebページのHTMLソースを見る方法-説明画像3

②次に、以下の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コードを貼り付けて編集を完了します。

iPhoneでWebページのHTMLソースを見る方法-説明画像4iPhoneでWebページのHTMLソースを見る方法-説明画像5

iPhoneでWebページのHTMLソースを見る方法-説明画像6

以上で、ブックマークレットの登録は完了です。

動作確認

ソースを表示したいサイトを開きます。もう一度『ゆうらり Happy Smile』で試してみましょう。

①ブックマークのアイコンをタップします。

iPhoneでWebページのHTMLソースを見る方法-動作確認画像1

②先ほど作成したブックマークレットをタップするとソースが表示されましたね。

iPhoneでWebページのHTMLソースを見る方法-動作確認画像2

これからは、2タップで簡単にHTMLソースの確認が出来るので非常に便利だと思います(^^)

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事ランキング
iPhoneの使い方-アプリなど