HTML ビューア【JavaScript】 | いろはぷらっと

ボタンをクリックすると任意の HTML を表示する、JavaScript のプログラムについてまとめておきます。ブラウザで動作します。

以下の環境で動作確認をしています。

環境： Windows 10、Microsoft Edge

背景

Python の応用範囲はとても広く、これまでスクリプトを多数作成してきています。
とても手軽に使えるものの、実用段階で Python を使うたび、開発環境やコマンドプロンプトの黒画面を起動するのは煩雑です。

少なくとも、プログラムの作成が完了したものについては、開発環境やコマンドプロンプトをわざわざ起動しなくても実行できるようにし、実行結果についても、できる限り簡単に、ネットを参照する程度の感覚で気軽に参照できるようにしたいところです。

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

なお、下記のサンプルは、ローカル 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 ビューアをブラウザの「お気に入り」バーなどに設定しておけば、ブラウザから１，２クリックで、グラフや表など最新の分析結果をつねに参照できることになります。

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

スクリプト： HTML ビューア html_viewer01.html

<!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>