HTML ビューア 【JavaScript】

Python

HTMLビューアの JavaScript のプログラムについてまとめておきます。ブラウザで動作します。
ボタンをクリックすると HTML ファイルを表示
します。
以下の環境で動作確認をしています。

環境: Windows 10、Microsoft Edge

背景

Python の応用範囲はとても広く、これまでスクリプトを多数作成してきています。
とても手軽に使えるものの、Python を使うたび、開発環境やコマンドプロンプトの黒画面を起動するのも煩雑です。
少なくとも、プログラムの作成が完了したものについては、開発環境やコマンドプロンプトをわざわざ起動しなくても実行できるようにし、結果も簡単に参照できるようにしたいところです。

これまで、Python スクリプトの実行結果を、HTML ファイル形式の表やグラフで書き出すスクリプトをまとめてきています。
HTML ファイルはダブルクリックすればブラウザから参照できますので、このままでも使えます。
しかしながら、HTML ファイルがたくさん増えてくると今度は、HTML ファイルを探すのが煩雑です。
そこで、1つの HTML ファイルからボタン1つで、任意の HTML ファイルを参照するビューアを作成しましたのでまとめておきます。

なお、下記のサンプルは、ローカル PC での使用を想定していますが、ネットワーク内でも動作します。

設定手順

① PC にフォルダを作ってください。
例: C:\user
② ①のフォルダ内に html_viewer01.html という名前でテキストファイルを作成し、下記のサンプルを貼りつけて保存してください。
③ ①のフォルダ内に、任意の HTML ファイルを保存してください。テストのため、ファイル名を chart01.html、chart02.html、chart03.html 等に修正してください。

使い方

④ ②の html_viewer01.html をダブルクリックして、ブラウザで開いてください。
⑤ ボタンをクリックすると、③でリンクされている HTML ファイルが参照できます。
⑥ うまく動いたら、②の html_viewer01.html をメモ帳等で編集して、HTML ファイルのファイル名(chart01.html、chart02.html、chart03.html とした部分)を、参照したいファイル名(あるいはリンク)に修正してください。
最初に表示される HTML ファイルと、各ボタンをクリックしたときに表示される HTML ファイルをそれぞれ指定しています。
必要により、参照するファイル数(ボタンの個数)を変更して調整してください。

まとめ

HTML のビューアについてまとめました。
Python などで分析を行ったとき、処理結果を HTML 形式で出力するようにしておけば、今回のビューアから、一元的に管理・参照できます。

Python でプログラムを作ってしまえば、実行自体は、バッチファイルやタスクスケジューラで自動化できます。Python で処理を行った出力データ (chart01.html, chart02.html など)は、自動的に差し替えることが可能ということです。
すると、今回の HTML ビューアをブラウザの「お気に入り」バーなどに設定しておけば、ブラウザから1,2クリックで、グラフや表など最新の分析結果をつねに参照できることになります。

また、以下の関連リンクで、Python で Web サーバを動かす方法についてもまとめています。自宅や会社などのローカルネットワーク上で Web サーバを起動させておけば、ブラウザ経由で、任意の Python のスクリプトを実行することも可能となります。(可能なはず。機械学習とか。。今度、やってみます。。)

関連リンク
・ CSV ファイルを HTML の表に変換する 【Python】
・ Python で HTML ファイルを出力する
・ HTML のグラフを出力する 【Python】
・ Python で Web サーバを動かす 【Windows】

スクリプト

<!DOCTYPE html> 

<html>
<head>
<style type="text/css"> 
button { 
    width:120px; 
} 
</style> 
<title>html_viewer 1.0</title>

<script language="javascript" type="text/javascript"> 
function func1( n1 ){ 
    element1 = document.getElementById( "iframe_id1" ); 
    if ( n1 == 1 ) { 
        element1.src = "chart01.html"
    } else if ( n1 == 2 ) { 
        element1.src = "chart02.html" 
    } else if ( n1 == 3 ) { 
        element1.src = "chart03.html" 
    } else if ( n1 == 4 ) { 
        element1.src = "" 
    } else if ( n1 == 5 ) { 
        element1.src = "" 
    } 
} 
</script> 

</head>
<body>
<button type="button" onclick="func1('1')">chart01</button>
<button type="button" onclick="func1('2')">chart02</button>
<button type="button" onclick="func1('3')">chart03</button>
<button type="button" onclick="func1('4')">chart04</button>
<button type="button" onclick="func1('5')">chart05</button><br> 

<iframe id="iframe_id1" width="100%" height="550px" src="chart01.html" scrolling="auto" frameborder="no" ></iframe>
</body>
</html>


タイトルとURLをコピーしました