HTMLビューアって何?基本的な概要と抑えておきたいアプリを厳選してご紹介!
  • facebookページ
  • twitterページ
  • 2020.05.22

    HTMLビューアって何?基本的な概要と抑えておきたいアプリを厳選してご紹介!

    ビューア(viewer)という言葉は「画像ビューア」「イメージビューア」「ブラウザビューア」など様々な言葉とセットで利用されています。

    本記事では、HTMLビューアにフォーカスを当てて基本的な概要と抑えておきたいアプリを厳選してご紹介していきたいと思います。

    HTMLビューアって何?


    まず「ビューア(viewer)」という言葉の意味として、データやファイルなどを閲覧・表示するためのソフトウェアのことを指しています。

    つまりHTMLビューアはHTMLを閲覧・表示するためのソフトウェアのことを意味します。

    一般的に出力に特化したものをHTMLビューアと呼んでおり、編集や保存などの機能は備えられていません。
    ※最近のHTMLビューアは、編集・保存が可能なソフトウェアも数多く存在します。

    HTMLエディターとの違い

    HTMLエディターという言葉も一般的に使用されていますが、HTMLビューアと何が異なるのでしょうか?

    結論としてHTMLエディターには、HTMLの編集や保存機能が備えられているソフトウェアを総称してHTMLエディターと呼んでいます。

    HTMLビューアは閲覧・表示(ソフトウェアにより編集・保存機能)に対し、HTMLエディターにはデフォルトで編集・保存機能が備わっています。

    パソコンで使用可能なHTMLビューア


    パソコンでは様々なHTMLエディターが利用出来るため、一般的にHTMLファイルを開く際はHTMLエディターを活用する方法が一般的です。

    広義の意味でHTMLビューアの一部である、おすすめHTMLエディターをご紹介していきます。

    Visual Studio Code

    Visual Studio Codeは現在、最も注目を集めているエディターの1つです。

    HTMLエディターとして紹介していますが、ほぼ全てのプログラミング言語に対応しており、更に任意のOSで利用することが可能な強力なエディターです。

    2015年に登場したばかりの比較的新しいエディターですが、軽量でありながら高性能なことから近年シェア率が大幅に上昇しているコードエディターです。

    Atom

    GitHubがリリースして一躍人気となった「Atom」も注目のエディターです。

    Web開発に特化して作成されており、もちろんHTMLビューアとしての役割も果たします。

    様々なパッケージが提供されており、自分好みのエディターにカスタマイズ可能な点も人気の理由となっています。

    Sublime text

    Sublime textはデフォルトが軽量でありながら、パッケージやAPIを追加することでカスタマイズ可能なため、古くから愛用しているユーザーも多いテキストエディターです。

    HTMLとCSSのコードを見やすくするためのカラースキームが標準で搭載されているため、余分な機能は必要ないHTMLビューアとして利用したい方には使いやすいエディターです。

    Windowsはもちろん、MAC・Linuxにも対応しており、設定ファイルを同期することで様々な環境で自分好みのカスタマイズを使いまわせるメリットがあります。

    サクラエディター

    必要最低限のHTMLビューアとしての役割があれば良いという方におすすめなのはサクラエディターです。

    国内でも古くからユーザーが多く、信頼性の高いテキストエディターです。

    今回ご紹介している他のエディターほど多機能ではありませんが、シンプルなHTMLビューアとしての役割は十分に果たせるエディターです。

    WebStorm

    WebStormはJetBrains社が提供する高機能コードエディターです。

    HTMLビューアと呼ぶには豊富すぎるほどの機能が提供されています。

    コードの編集履歴が保存される機能や、リアルタイムエラー検知機能がデフォルトで提供されており、プログラマーにとっては非常に使い勝手の良いHTMLエディターです。

    有料エディターのため、HTMLを閲覧・表示だけを利用用途とする方にはあまりおすすめとは言えません。

    Android端末で使用可能なHTMLビューア


    スマートフォンの登場で、携帯端末でもHTMLファイルの閲覧表示が可能になっています。

    まずはAndroid端末で使用可能なHTMLビューアを3つご紹介していきます。

    HTML Viewer

    HTML Viewer(GooglePlay Store)

    HTML Viewerで検索をすると大体一番上に表示されるのがこちらのアプリです。

    簡易的に表示するのであれば特に問題なく利用することは可能ですが、レビューにもある通りバージョンにより文字化けの問題も懸念されます。

    GooglePlay Storeでの評価は「3.6」でまずまずの評価を得ています。

    Local HTML Viewer

    Local HTML Viewer(GooglePlay Store)

    スマートフォンに保存されたhtmlファイルやCSS、Javascriptファイルを閲覧することが可能なアプリです。

    zipで圧縮されたファイルの閲覧も可能で、簡単な確認であればこのアプリだけで足りるほどの機能が提供されています。

    GooglePlay Storeでの評価は「3.9」で、1000件以上の評価が寄せられており、実績も十分なアプリです。

    HTML Source Code Viewer Website

    HTML Source Code Viewer Website(GooglePlay Store)
    こちらのアプリは閲覧だけでなく、ソースコードを編集することも可能です。

    ソースコードを共有する機能も実装されており、HTMLビューアの域を超えるような多機能ビューアです。

    GooglePlay Storeでの評価は「4.7」とかなり高い評価を得ています。

    ただ、評価総数が250程度と上述したアプリに比べると少ないため、まだまだ認知度は低いアプリです。

    iOS端末で使用可能なHTMLビューア


    続いてiOS端末で使用可能なHTMLビューアをご紹介していきたいと思います。

    HTML Viewer Q

    HTML Viewer Q(AppStore)

    軽量のHTMLビューアでファイル管理ツールとしての役割も果たします。

    iTuensでファイルを共有することが可能で、表示はもちろん編集も可能です。

    AppStoreで評価「4.6」を記録しており、総評価数も1,200件以上と実績も十分のアプリです。

    html+css+js-web designer,html5

    html+css+js-web designer,html5(AppStore)

    html, css, Javascriptの閲覧・編集が可能なHTMLビューアです。

    各言語の基礎を学習可能なコンテンツが提供されている点も特徴の1つです。

    編集したコードをTwitterやFacebookにシェアする機能も提供されてます。

    AppStoreでの評価は「4.3」となっていますが、評価数が少ないのが懸念点です。

    HTML & HTML5 Editor

    HTML & HTML5 Editor(AppStore)

    シンプルに設計されたHTMLの閲覧・編集が行えるHTMLビューアです。

    無駄な機能は提供されておらず、HTMLコードの編集に必要な最低限の機能が提供されているアプリです。

    AppStoreでの評価は「4.0」で、余計な機能は使わないからシンプルにHTMLの閲覧・編集だけを行いたい方に利用してもらいたいアプリとなっています。

    さいごに:HTMLビューアはパソコンだけでなくスマートフォンでも利用可能なソフトウェア


    本記事では、HTMLの基本的な概要とパソコン・スマートフォンで利用可能なHMLTビューアをご紹介してきました。

    プログラミングはパソコンで行うのが一般的ではありますが、簡単なHTMLファイルの閲覧・編集程度であれば、スマートフォンでも実施出来るようになっています。

    ちょっとしたスキマ時間でもプログラミングコードの確認に利用出来ますので、ぜひ一度スマートフォンでもHTMLビューアをお試しください。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE