西Hide Design & Art Work Collection

西Hide Design & Art Work Collection




備忘録:HTMLファイルをスマホで見る方法

Category : blog · by 4月 1st, 2015

ゲームもWebデザインも今やスマートフォンに対応するのが当たり前となりました。小さな画面という制約がある中で高いUXとユーザビリティを提供しなければなりません。そんなことを考えてローカルで作成したHTML(CSSは外部ファイルに記述)を手持ちのiPhoneとAndroidで表示確認することにしました。

▼用意したのはこんなテストページ(多分に趣味まみれ)

page_image001

手軽な方法は無いかしら?ということで、まずはGoogle DriveにUPしてそれを開いてみました。甘かったですね。Androidでは画像やCSSを読んでくれません。iPhoneに至っては開けもしません。悲しい・・・。

▼Androidで見た図

page_image002

気を取り直してGoogle先生に聞いてみます。すると次の答が。

  • CSSはヘッダに記述
  • 画像はリンクの代わりにBase64形式に変換したコードを挿入
  • HTMLを表示するビューアーを作成するかアプリを入れる

このようにすることで、一手間要るけれどもどこかのサーバーをレンタルせずお手軽に確認できることが分かりました。セキュリティの面でもまぁ安心です。ということで早速試しましょう。

1:外部に記述したCSSをヘッダへコピペ

ここはさすがに割愛します・・・。

2:画像をBase64形式に変換する

▼Web上のツールで変換

手っ取り早くするならThingsさんの「画像をBase64に変換するツール」などあります。このツールページを開いていただき任意の画像を指定、OutputFormatをHTMLに設定して「Convert64」ボタンをクリックすればサクッとコンバート完了です。吐き出されたコードをHTMLの該当画像と差替えればOKです。

▼赤ベタで強調した部分を差替える

page_image003

▼こんな感じの数字の羅列をペーストします

page_image004

▼コマンドプロンプトで変換

ツールを使わずにやる方法もあります。セキュリティやコンプライアンス面を考えるなら、こちらの方法をオススメですね。「Eiji James Yoshidaの記録」さんで紹介されていたコマンドプロンプトで変換するというものです。以下に示す例はOSがWindows7の場合です。

※コマンドプロンプトはWindowsスタートボタンをクリック>すべてのプログラム>アクセサリの中にあります。

①Cドライブのユーザーフォルダの中に変換用のフォルダを作り、そこに任意の画像を入れます。ワタクシはconvert64というフォルダを作りました。ここに作る理由はコマンドプロンプトを起動した際のデフォルトフォルダで楽だからです。ちなみにコマンドプロンプトではDドライブを覗くことはできないようです(Cドライブに戻される)のでご注意ください。

②コマンドプロンプトを起動して①で作成したフォルダに移動します。「cd convert64」と打ちenterキーを押します。これで変換用フォルダにアクセスしている状態になりました。

page_image005

③変換コマンドを入力します。「certutil -f -encode 入力ファイル名 出力ファイル名」という形式です。(※出力ファイルはtxt形式にする)

(例)certutil -f -encode test_image01.jpg test_image01.txt

あっさり完成。とても簡単(^^)。ワタクシのような初心者のために付け加えると、コマンドプロンプトのようなものでは大文字と小文字は別物として扱われます。なのでファイル名は英数小文字のみ(記号もアンダーバー程度)にしておきましょう。

▼変換が正常に完了すると図のようなメッセージが返ってくる

page_image006

▼フォルダには変換されたテキストが出来ている

page_image008

④テキストエディタ(今回の例ではTeraPadを使用)で変換されたデータを開き改行コードを削除します。HTMLでは改行コードは無視されることになっておりますが、以前表示が崩れる現象に遭い難儀した記憶があるので、念のための工程となります。

page_image009

テキストを全選択してプルダウンメニュー>検索>置換を選択。検索する文字列を「¥n」、置換後の文字列を空白のままにして「すべて置換」をクリック。これで改行コードが全て削除されます。あと文字列の最初に「—–BEGIN CERTIFICATE—–」、最後に「—–END CERTIFICATE—–」と入っていると思いますので、これも削除します。これでコンバートデータが完成です。

※Windowsに標準でインストールされているメモ帳ではこのような加工ができませんので、TeraPadなど高機能なエディタをお使いください。

⑤完成した文字列をコピーしてHTMLの該当箇所に貼り付けます。

この時「<img src=””>」の中に「data:image/****;base64,」と入力し、その後ろに文字列をペーストします。****の文字列は画像形式によって書き換えます。

  • jpg・・・data:image/jpeg;base64,
  • png・・・data:image/png;base64,
  • gif・・・data:image/gif;base64,

この段階で一度Webブラウザで確認してみましょう。問題が無ければ次のステップに進みます。

3:iOSで確認する

①AppStoreにて「HTML Viewer Q FREE」というアプリをインストール。

②iPhone(またはiPad)をPCに接続>iTunesを起動。iPhoneアイコンをクリック>Appを選択>ファイル共有のApp項目の「HTML Viewer Q FREE」を選択し、右下の「ファイルを追加」をクリック。加工したHTMLファイルを追加し適用、同期でiPhoneにデータを入れます。

page_image007

③iPhoneで「HTML Viewer Q FREEを」起動

page_image010

④ブックマークアイコンをタップ

page_image011

⑤作成したHTMLファイルを選択

page_image012

⑥意図通りに表示されれば完了です!お疲れ様でした~。

4:Androidで確認する

※SDカードが無いため文章のみでの説明となります。ご了承ください。

①GooglePlayストアにて「Local HTML Viewer」というアプリをインストール

②ご自身のGoogle Driveなどに保存したHTMLファイルを選択する

③アプリケーションの選択で「Local HTML Viewer」を選び表示するだけでOK。お疲れ様でした~。

5:まとめ

これで作成したHTMLファイルを携帯デバイスで確認できるようになりました。長々と書きましたが、やってみると意外とあっさり終わる手順です。やったことが無いかたはお試ししてみてください。ちなみに画像をエンコードしてHTMLに入れるテクニックは、画像サイズが小さければ読み込み時間短縮に使えるものだそうで、覚えておいて損はないと思います。

さて次回はスマホで見るためのレスポンシブデザインにチャレンジします。ではでは。

SHARE :