テキストやメディアファイルをフォルダに入れておくと、一括で HTML ファイルに変換する Python のスクリプトについてまとめておきます。
以下の環境で動作確認をしています。
環境
・ Windows パソコン（Python をインストール済み）、Microsoft Edge
・ スマートフォン（Android）
背景 ～ テキストやメディアを単独の HTML ファイルにしたい！
最近、スマートフォンを購入しました。
そこで日頃、パソコン上に記録してあるテキストのメモ書きや HTML ファイルなどをスマートフォン内の SDカードに移して活用しようとしたところ、正常に機能しません。
テキストファイルは文字化けしますし、HTML ファイルはリンクが飛ばず、参照している画像や音声などの外部ファイルを読み込むことができません。
年々、セキュリティが厳しくなっており、スマートフォンのローカルに入れて活用するには、単一の HTML ファイルにしないと機能しないようです。
各ファイルを作り替えたり、メディアごとにアプリを設定していくのも煩雑です。
ということで、テキスト、画像、音声などのファイルをフォルダに入れておくと、一括で HTML ファイルに変換する Python のスクリプトを作り、公開しておくことにします。
生成した HTML ファイルをスマートフォンの SDカードなどにコピーしておくと、外出時などに参照できるようになります。ネットワーク環境がなくても、スタンドアロンでブラウザ上で機能するようになります。
スクリプトでは、画像ファイルなどを読み込んで、単一の HTML 形式に変換します。出力した HTML のソースを参照・編集することで、たとえば、WordPress などのサイトのページ内に画像を貼りつけたり、外部ファイルだった JavaScript の機能を HTML に入れ込むことなどが可能になります。
設定手順
① 以下を参考に、パソコン内にフォルダを作り、末尾の Python のスクリプトをコピー＆ペーストして保存します。
例：
c:\user\media2html1\media2html1.py
② ①のフォルダ内にさらに、２つのフォルダ “media1″、”html1” を作ります。
c:\user\media2html1\media1
c:\user\media2html1\html1
② ②のフォルダ “media1″ にテキストファイル等を入れます。
c:\user\media2html1\media1\text1.txt
③ ターミナル（または、Anaconda プロンプト）を起動し、Python のスクリプトを実行します。
例： python c:\user\media2html1\media2html1.py
→ ”html1” フォルダ内にファイルが変換できたら成功です！
うまく動いたら
メディアファイルの単一ファイル化
うまく動いたら、フォルダ media1 内に以下のファイルを入れて変換してみてください。
単一の HTML ファイルにすることができます。
・ テキストファイル（*.txt）
・ 画像ファイル（*.jpg、*.png、*.svg）
・ その他（*.html、*.wav、*.gif、*.mp3、*.mp4、*.js）
Python のスクリプトでは、同一フォルダ内にある “media1” フォルダを参照してファイルを変換するようにしてあります。スクリプトでコメントアウトした部分に記載したように、他の任意のフォルダを指定することで、指定したフォルダ内に入っているテキストファイル類を一括で HTML 化することが可能です。
従来、メディアごとに使用するアプリを設定したり、新たにインストールをするなどの必要が生じていましたが、単一の HTML ファイル化することで、メディアやデバイスの種類によらず、ブラウザがあれば動くことになります。
最近のブラウザさえ動けば、スマートフォンであろうが Raspberry Pi などの Linux であろうが、データや機能を活用できることになります。
スマートフォンでの活用例
HTML ファイル化したら、スマートフォンに移して活用してみてください。
設定手順は以下のとおりです。
・ スマートフォンに SDカードを入れておく。
・ スマートフォンとパソコンを USB – Type-C ケーブルなどで接続する。
・ スマートフォンの画面背景を下方向にスライドして、「このデバイスをUSBで充電中」等の項目を２回タップする。
・ USBの接続用途の欄で「ファイル転送」を選択し、本人確認を行う。
→ パソコンからスマートフォン内の SDカード等を参照できるようになる。
・ パソコン経由で、SDカード等にフォルダ等を作成し、上記のファイル一式をコピーする。
・ 保存したファイルを参照する場合は、背景画面のスライド後、「SDカード」等を選択し、フォルダ内の HTML ファイルをクリックして参照する。
また、JavaScript の外部ファイル（*.js）について、上記のスクリプトを実行すると、外部ファイルをタグとして、１つの HTML に入れ込むことが可能です。
この後、任意の CSS や JavaScript の機能を呼び出すスクリプトを追記していくことで、１つの HTML ファイル内にすべての機能を盛り込むことが可能です。任意の機能をスタンドアロンで活用できることになります。
ネット環境、電波環境などの外部の環境に依存せず、作成した機能をスマートフォンなどに入れて持ち歩いて活用できることになります。
Web サイトでの活用例
インターネットやローカルネットワークで Web サイトを運用している場合は、HTML の任意のページに上記で生成したタグを貼り込むことで、サイトのページに直接、図形や動画などを挿入できます。
たとえば、WordPress でサイトを作っていて図形を入れたい場合、通常は、別ファイルを作成してアップロードしていると思います。
上記の手順で HTML を生成すると、HTML のソースを参照してタグの部分をそのままコピー＆ペーストすることで、サイト上のページに直接、図形等を入れることが可能です。
また、SVG ファイルなどは直接的に WordPress の図形としてはアップロードできない等の制約があります。しかし、SVG を変換してプレーンテキストとしてしまえば、タグとして貼り込むことで、劣化の少ないベクター図形についても活用ができることになります。
以前に、ブラウザ上でベクター画像でお絵描きをする JavaScript をまとめています。簡単に図形などを描画して、今回のスクリプトでプレーンテキスト化し、劣化の少ない SVG 画像としてサイトに貼り込む、といったことが可能になります。
単一のページとしてはファイルサイズが大きくなりますが、データや機能を１つにまとめ、複数のファイルや複数のファイル形式を扱う煩雑さを解消できることになります。
スクリプトの説明
・ スクリプトは、これまでにこのサイトで使ってきている機能を組み合わせた程度のものです。
・ 指定したフォルダ内の各ファイルのリストを glob 機能を使って取得しています。
・ 各ファイルを読み取って適宜変換し、HTML のテンプレートに差し込んで出力しています。
スマートフォンで表示したときに適切な表示サイズとなるよう作成してありますので、文字サイズ、縦横比、表示倍率などを変えたい場合は、テンプレートやタグの記載を修正してください。
・ テキストファイルについては、リターン等を <br> 等に変換して、テンプレートに差し込んでいます。
・ その他のメディアについては、バイナリで読み取って、base64 という文字列に変換しています。
base64 は、バイナリなどの任意のデータを平易なアルファベットなどの文字列で表現できるようにしたデータ形式です。base64 形式とすることで、HTML 上でプレーンテキストとして扱うことが可能になります。この文字列にタグをつけ、HTML のテンプレートに差し込んでいます。base64 については、このサイトで以前、Flask でサーバーのアプリを作成して画像等を表示させる際にも使用しています。興味があれば下記の関連リンクを参照してください。
・ 単一の HTML 上でデータ化しているため、生成した HTML ファイルのスクリプトを参照することで、編集・流用が可能なように意図しています。たとえば、JavaScript の外部ファイル *.js なども変換できます。
・ 最近のブラウザが機能するデバイスであれば、ローカルのブラウザ上で読み込むことで、ネット環境がなくても、一連のメディアの機能を活用できることになります。
まとめ
テキストファイルや画像ファイル、音声、動画などを HTML ファイル化するスクリプトについてまとめました。
これでよく参照するファイル類は HTML 化して、スマートフォンなどで活用できるようになりました。
他にも Python や JavaScript などを使ったツール類の自作を試みています。
興味のある方は参照してみてください。
関連リンク
・ 一括で日付つきファイル名に変換する 【Python】
・ 一括でファイルを移動する 【Python】
・ Python で HTML ファイルを出力する
・ バーコード作成 Web アプリ 【Raspberry Pi & Flask】
・ ベクター形式でお絵描きをしてみる 【JavaScript】
サンプルスクリプト
media2html1.py ～ テキストやメディアを単一の HTML 化するスクリプト
import os
import glob as gl1
import base64
def read1(file1):
str1 = ""
with open(file1, 'r', encoding='utf-8') as f1:
str1 = f1.read()
return str1
def read1_base64(file1):
str1 = ""
with open(file1, 'rb') as f1:
str1 = f1.read()
str2 = base64.b64encode(str1).decode("utf-8")
return str2
def write1(file1, str1):
with open( file1, 'w', encoding='utf-8' ) as f1:
f1.write(str1)
return 0
def glob1(path1):
a1 = ["*.txt", "*.svg", "*.png", "*.jpg", "*.mp3", "*.gif", "*.wav", "*.mp4", "*.js", "*.html"]
a2 = []
for i1 in range(len(a1)):
pattern1 = path1 + a1[i1]
a2 = a2 + gl1.glob(pattern1)
return a2
def media2base64(file1):
str1 = ""
file2 = os.path.basename(file1)
print(file2)
if file2.endswith(".txt"):
file2 = file2.replace(".txt", ".html")
str2 = read1(file1)
str1 = str2.strip().replace("\n", "<br>\n")
else:
str2 = read1_base64(file1)
if file2.endswith(".svg"):
file2 = file2.replace(".svg", ".html")
str1 = '<img src="data:image/svg+xml;base64,' + str2 + '" alt="">'
elif file2.endswith(".png"):
file2 = file2.replace(".png", ".html")
str1 = '<img src="data:image/png;base64,' + str2 + '" alt="">'
elif file2.endswith(".jpg"):
file2 = file2.replace(".jpg", ".html")
str1 = '<img src="data:image/jpeg;base64,' + str2 + '" alt="">'
elif file2.endswith(".mp3"):
file2 = file2.replace(".mp3", ".html")
str3 = '<source src="data:audio/mp3;base64,' + str2 + '" type="audio/mp3">'
str1 = '<audio controls>\n' + str3 + '\n</audio>\n'
elif file2.endswith(".gif"):
file2 = file2.replace(".gif", ".html")
str1 = '<img src="data:image/gif;base64,' + str2 + '" alt="">'
elif file2.endswith(".wav"):
file2 = file2.replace(".wav", ".html")
str3 = '<source src="data:audio/wav;base64,' + str2 + '" type="audio/wav">'
str1 = '<audio controls>\n' + str3 + '\n</audio>\n'
elif file2.endswith(".mp4"):
file2 = file2.replace(".mp4", ".html")
str3 = '<source src="data:video/webm;base64,' + str2 + '" type="video/webm">'
str1 = '<video width="320" height="240" controls>\n' + str3 + '\n</video>\n'
elif file2.endswith(".js"):
file2 = file2.replace(".js", ".html")
str1 = '<script src="data:application/javascript;base64,' + str2 + '" ></script>'
elif file2.endswith(".html"):
str1 = '<iframe src="data:text/html;charset=utf-8;base64,' + str2 + '" width="380" height="700"></script>'
return str1, file2
def target2html1(path1, path2):
a1 = glob1(path1)
for i1 in range(len(a1)):
file1 = a1[i1]
str1, file2 = media2base64(file1)
str2 = template1(str1)
file3 = path2 + file2
write1(file3, str2)
def template1(str1):
str2 = f'''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style></style>
</head>
<body>
{str1}
</body>
</html>
'''
return str2.strip()
path1 = os.path.dirname(__file__) + "/"
path2 = path1 + "media1/"
# path2 = "D:/..."
path3 = path1 + "html1/"
target2html1(path2, path3)
