HTMLビューアを使ってスマホでコードを確認！おすすめアプリ6選

公開日: 2021.09.15
更新日: 2024.07.26
HTMLビューアおすすめアプリ6選

副業のため、または学業と平行してプログラミングの勉強をしている方の中には、

「通勤中（通学中）に参考サイトや自作したサイトのHTMLソースコードを確認したい」

「スマホでもプログラミングの勉強ができたら良いのに…」

と思っている方もいるでしょう。

そこで今回は、そんな方のために以下の内容を解説していきます。

  • スマホからでもHTMLソースコードが確認できるHTMLビューアを紹介
  • おすすめのHTMLビューアアプリ6選
  • アプリをダウンロードしなくでもスマホからHTMLを見る方法

HTMLのソースコードを見ることができるのは、パソコンからだけではありません！

AndroidからでもiPhoneからでも、スマホからHTMLソースコードを見ることができます！

スキマ時間を有効活用したいと考えているHTML学習者の皆様は、ぜひ最後までみてくださいね。

HTMLビューアとは？

HTMLビューアの「ビューア(viewer)」とは、データやファイルなどを表示ためのソフトウェアや機器のことを意味しています。

つまり、HTMLビューアはHTMLを表示するためのソフトウェアのことです。

HTMLエディタのことをHTMLビューアと呼ぶ場合もありますが、厳密には違うので注意しましょう。

HTMLビューアとHTMLエディタは似ているけど違う！

HTMLエディタと似ている言葉で「テキストエディタ」があります。

テキストエディタは、Macの「テキストエディット」やWindowsの「メモ帳」など、テキストを編集・保存できるソフトウェアや機器のことを指しています。

このテキストエディタの中でも、HTMLの編集に特化したものがHTMLエディタはと呼ばれています。

「Atom」や「Visual Studio Code」などが代表的なHTMLエディタと言えるでしょう。

テキストエディタと同様にHTMLエディタではHTMLの編集・保存が可能ですが、HTMLビューアは表示・閲覧のみしかできません。

スマホからHTMLファイルが見れる！HTMLビューアーおすすめアプリ6選

パソコンでは、ブラウザの機能を活用すればHTMLを閲覧することができるため、HTMLビューアは必要ありません。

そのため、HTMLビューアは主にスマートフォンからHTMLを表示・閲覧する時に使用されます。

スマートフォンでHTMLビューアを使うには、専用のアプリをダウンロードする必要があります。

AndroidとiPhoneで使えるアプリが違うので注意しましょう。

今回は、AndroidとiPhoneそれぞれ3選ずつ、おすすめHTMLビューアアプリを全部で6選紹介します！

Androidで使えるHTMLビューアーアプリ3選

HTML Viewer

HTMLビューアの必要機能が全て備わっていると言えるHTML Viewer。

ワンクリックでHTMLソースコードを表示することができるので、HTMLビューアをはじめて使う人でも使いやすいでしょう。

HTMLソースコードの検索機能や、HTMLファイルの保存・共有など必要機能が備わっています。

英語表記ですが、わかりやすいアイコンを使用しているので、英語が苦手な人でも安心ですよ。

HTML Reader/ Viewer

とにかくシンプルなデザインと機能が特徴のHTML Reader/ Viewer。

ダークテーマなのでHTMLソースコードが見やすいのもポイントです。

「戻る」矢印ボタンだけでなく、他のアプリには中々ないと言われている「進む」矢印ボタンも備わっています。

HTMLファイルをGoole driveに保存したり、共有することも可能です。

余計な機能は必要ない！という人におすすめのアプリです。

HTML Viewer & HTML Reader: HTML Source Code Viewer

50以上のテーマがあるデザイン性の高さが特徴のHTML Viewer & HTML Reader: HTML Source Code Viewer。

HTMLソースコードの背景をホワイトやダークだけでなくイエローなどにすることができるので、パソコンのHTMLエディタと同じカラーテーマで使用することもできるかもしれません。

WebページのWebバージョンを表示する機能や、HTMLファイルのダウンロード・共有機能が備わっています。

HTMLエディタと同じぐらいHTMLビューアを使いたいという方に向いています。

iPhoneで使えるHTMLビューアーアプリ3選

HTML Viewer Q

iPadも対応しているHTML Viewer Qは、とにかく多彩な機能が備わっている便利なHTMLビューアアプリです。

HTMLソースコードの検索機能はもちろんのこと、パソコンのようにウィンドウ内で複数のタブを開くことができる機能が備わっています。

HTMLファイルの共有は、スナップショット・PDF・アーカイブから選択可能。JavaScript Logなど多彩な機能が盛りだくさんです。

iPhoneユーザーで、パソコンと同じようHTMLビューアを使いたいという方でも満足できるでしょう。

HTML Viewer

約90種類もの膨大なデザインテーマを選択できるHTML Viewer。

HTMLソースコードを確認する時のテーマにもこだわりたい人にピッタリのアプリです。

「HTML Viewer Q」と同様、複数のタブを開くことができるのがポイント。

HTML以外の言語も表示や、静的・動的HTMLの切替など、デザインだけでなく機能性も充実しています。

View Source

https://apps.apple.com/jp/app/view-source/id1041817284

iPhoneで使えるHTMLビューアの中でもシンプルな無料アプリのView Source。

WebサイトのURLのコピペ、またはSafariから開くことでHTMLソースコードを見ることができます。

検索機能と、URLのコピーだけのシンプルな機能。

スマホでHTMLソースコードだけを確認したい時に便利です。

画像やリンク、JavaScriptやCSSを一覧表示できる機能などがプラスされた、120円のバージョンもありますよ。

HTMLビューアのアプリを使わないでスマホからHTMLファイルを確認する方法もある

実は、HTMLビューアのアプリを使わずに、スマホのデフォルト機能だけでHTMLファイルを確認する方法もあります。

一々アプリをダウンロードするのは面倒な方や、ちょっとだけ試してみたい方などは、以下の方法で試してみてくださいね。

AndroidとiPhoneで異なるので、それぞれ説明していきます。

Android：view-sourceを入力する

Androidの場合は、Google Chromeで検索したWebサイトのURLの前に、「view-source:」を記述するだけです。

view-source:https://example.com/

上記を追記する以外、特に操作の必要がないので簡単です。

iPhone：ブックマークレットを使用する

ブックマークレットとは、ブックマーク（お気に入り）に登録して起動するプログラムのことです。

ブックマークしたWebサイトのHTMLソースコードを閲覧するには、以下の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))})();

具体的な手順は以下の通りです。

1.上記のJavaScriptをコピーしておく

2.HTMLソースコードを見たいWebサイトを開く

HTMLソースコードを見たいサイトを開いている画面

3.共有ボタンをクリック

画面下真ん中の共有ボタンを押す

4.「ブックマークを追加」を選択

「ブックマークを追加」を選択する画面

5.「ブックマークを追加」画面で一度「保存」する

保存をする

6.「お気に入り」ページを開くボタンをクリック

画面下の本マークを選択している

7.「編集」をクリック

画面右下に出てくる「編集」を選択

8.保存したWebサイトのブックマークをクリック

保存したWebサイトのブックマークを選択してる画面

9.WebサイトのURLに先ほどコピーしたJavaScriptを貼り付けて「完了」をクリック

完了をクリックする様子

10.「お気に入り」ページから保存したWebサイトのブックマークをクリック

お気に入りページから保存したWebサイトのブックマークをクリックしている様子

上記の工程を行うと、以下のように表示されます！

上記を行った結果

HTMLビューアを活用してスキマ時間も効率的に勉強しよう！

普段プログラミングを勉強している方にとっては、HTMLエディタが一般的でしょう。

しかし、働きながらプログラミングを勉強している方や、副業でプログラミングを使う仕事をしている方にとっては、スマートフォンからでもHTMLソースコードが確認できるHTMLビューアはとても便利です。

専用のアプリを使用すれば、AndroidやiPhoneからでも簡単にHTMLソースコードが確認できるようになりますよ。

以下は、この記事のまとめです。

  • HTMLビューアはHTMLのソースコードをスマホから確認したい時に便利
  • HTMLエディタと違って編集や保存はできない
  • スマホアプリをダウンロードしなくても一応表示できるけど、アプリが最も簡単！

通勤時間や、休憩時間などのスキマ時間にHTMLビューアを活用して、効率的にプログラミングを勉強しましょう！

関連記事

  • CSSで画像をトリミングする方法とは?

    CSSで画像をトリミングする方法とは？object-fit以外のプロパティも紹介

    公開日: 2021.11.10
    更新日: 2024.01.03
  • HTMLでspace(空白)を入れる2通りの方法

    【HTML】スペースを入れる2通りの方法（サンプルコード付き）

    公開日: 2021.07.31
    更新日: 2024.01.03
  • Pythonはどんなプログラミング言語？メリットやおすすめの学習サイト5選も紹介

    Pythonはどんなプログラミング言語？メリットやおすすめの学習サイト5選も紹介

    公開日: 2020.12.22
    更新日: 2024.01.31
  • Python環境変数について解説

    【入門者向け】WindowsでPythonを学習する方法

    公開日: 2018.03.31
    更新日: 2024.01.06

    • 新着記事

    資料請求

    • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

      DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

      資料をダウンロードする
    • IT技術がもたらす3つの変化と身につけるべきスキル

      IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

      資料をダウンロードする
    • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

      働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

      資料をダウンロードする

    資料請求一覧はこちら

    サービス紹介

    © 2024 WEBCAMP MEDIA Powered by AFFINGER5