AndroidでローカルHTMLのファイルを開く方法!

AndroidでローカルHTMLのファイルを開く方法について解説します。AndroidでローカルHTMLのファイルを開くことで、スマホ画面ではどのようなレイアウトになっていて、レスポンシブは効いているのか確かめることができます。

コンテンツ [表示]

  1. 1AndroidでローカルHTMLのファイルを開きたい
  2. 2AndroidでローカルHTMLのファイルを開く方法
  3. 2.1手順
  4. 3まとめ

AndroidでローカルHTMLのファイルを開きたい

AndroidでローカルHTMLのファイルをChromeやFirefoxなどのツール内で開いて表示させ、スマホ画面ではどのようなレイアウトになっていて、レスポンシブは効いているのか確かめたいと思うことがあります。

Photo byijmaki

以下の項目でAndroidでローカルHTMLのファイルを開く方法について見ていきましょう。

AndroidでローカルHTMLのファイルを開く方法

それではAndroidでローカルファイルを開く方法について見ていきましょう。

まず私のスマートフォンはGalaxy S20なのですが、index.htmlをクリックすると、ダウンロードし、マイフォルダからChromeで表示させたいファイルを閲覧することができます。

もしそれができないという場合について以下で解説します。

手順

まずAndroidのChromeなどで閲覧する用のHTMLファイルを何でもいいので作成します。

私は今回以下のコードをAndroid端末上で表示させたいと思います。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <h1>Hello World</h1>
</body>

</html>

次にそのファイルをPCからAndroid端末へと移行します。

移行する方法としてはUSBケーブルを使い直接移動する、メールやメッセージアプリを用いる、SDカードを介して移動させる、Googleドライブを介してクラウドストレージを使うなど様々な方法があります。

私は今回LINEにてファイルをzipファイルとし、移行しました。

Android端末でその移行したファイルがあるところに移動します。次にそのファイルを長押しして詳細を見てみましょう。

パスという項目があるはずです。

そしたら次にChromeなどのサイトで「file:///sdcard/」とURLを打ち込んでみてください。

するとこののようなページに飛ぶと思います。

パスを参照して順番にクリックしよう

今回私の場合、「file:///sdcard/」からAndroid→data→jp.naver.line.android→storage→mo→ uc44504503d78808d0bca6b434274 a50c→f→11815_index→index.html

というように順番にクリックしていくと、Chromeでindex.hmtlの中身を閲覧することが出来ます。

Androidで表示したHTML

こちらのように表示されていれば成功です。

まとめ

いかがでしたでしょうか?

Android端末でローカルHTMLのファイルを開くことが出来ると、色々とできることの幅が広がります。

ぜひ試してみてください。

GeekHive採用サイト

関連記事