Yamamoto's Laboratory
プログラムソース
インラインフレーム

インラインフレーム (Inline Frame) とは

インラインフレームを使うと,WEB ページに枠 (フレーム) を作成し,その中に別の WEB ページを表示させることができます.その HTML は,「<iframe src="htmlへのパス"></iframe>」です.たったこれだけで,外部の HTML を表示させることができます.これは,とても便利です.

他のページを表示

インラインフレームを使うと,他のページを表示することができます.

<iframe src="htmlへのパス"
      style="width:幅(px); height:高さ(px); margin-left:左マージン">
      インラインフレームが表示されないブラウザ向け.
</iframe>

具体例を以下に示します.

境界は,CSS で記述できます.例えば,style 中に「border:1px #000000 solid」とすれば,境界は線幅:1pxの黒い実線になります.

JQuary の fancyBox のインラインフレームを使うと, WEB サイトをクールに仕上げられます.

簡単な説明文を付けるときにインラインフレームは大変便利です.以下に従い html ファイル(example.html)を作成します.これを,「<a class="iframe" data-fancybox-type="iframe" href="パス/example.html">クリックする文や図</a>」で呼び出します.

説明文に向いたインラインフレームの書き方

<!DOCTYPE html>

  <html>
    <head>
    <title>タイトル</title>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
    <link rel="stylesheet" href="cssへのパス/inline_frame.css" type="text/css">
    <meta name="description" content="ページの説明">
    </head>
  
  <body>
    <h1>ページタイトル</h1>

      本文

  </body>
</html>

ポップアップ (プログラムソース)

プログラムを表示するときも,fancyBox を使ったインラインフレームは大変便利です.狭いスペースでプログラムの説明ができます.以下に従い php ファイル(example.php)を作成します.これを,「<a class="iframe" data-fancybox-type="iframe" href="パス/example.php">クリックする文や図</a>」で呼び出します.

Google Code Prettify (GCP) を使う

最もお勧めの方法です.GCP でコードを表示し,黒い背景に緑色の文字で実行結果を示します. 以下に,テンプレートを示します.

コードの表示は GCP,結果は黒地に緑文字.

<!DOCTYPE html>

<html>
	<head>
		<title>タイトル</title>
		<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
		<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
		<link rel="stylesheet" href="cssへのパス/css/inline_frame.css" type="text/css">
		<meta name="description" content="ページの説明">
	</head>

	<body>
		<?php include "cssへのパス/www_func/mk_html.php";?>
		<h1>ページタイトル</h1>
		<p>XXXのプログラム例と実行結果を示します.</p>
	  
		<h2>プログラム例</h2>
		<p>プログラム例を以下に示します.</p>
		<pre class="prettyprint linenums my_gcp" style="height:auto; width:500px; line-height:150%"><?php source2html_raw("ソードコードへのパス", 4); ?></pre>

		<h2>実行結果</h2>
		<p>実行結果は,以下のとおりです.</p>
		<pre class="terminal_screen mono_space" style="height:300px; width:500px"><span class="prompt">プロンプト</span> コマンド <span class="obj">目的語</span>

<?php source2html_raw("実行結果ファイルへのパス", 4); ?></pre>
	  
	</body>
</html>

プログラムはファイルに記述し,それを mk_html.php の関数: source2html_raw() で呼び出します.結果を記述したファイルは,関数: source2html() で呼び出します.具体的なソースリストとその実行結果は,ソースリスト結果をクリックすると表示されます.

実行結果を表示する <pre class="terminal_screen"> には,以下の <span class="クラス"> を使い,コマンドを美しく表示することが可能です.

クラス 記述すべき内容
prompt プロンプト ($, #, >など)
sudo sudo
op オプション (--help)
arg 引数
obj 目的語
obj2 目的語2
emph 強調
comment コメント

これらのオプションを使うと,以下のように表示されます.

$ sudo command  --option  引数  目的語  目的語2  強調 コメント

<span class="command mono_space">」とすると,等幅フォントになります.また,複数個のコマンドを複数行に記述できます.

単純な書き方

ほとんど装飾のないインラインフレームです.白地に黒文字でコードを表示します.コメント文は緑色です.

プログラムのソースリスト表示に向いたインラインフレーム

<!DOCTYPE html>

  <html>
    <head>
    <title>タイトル</title>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
    <link rel="stylesheet" href="cssへのパス/css/inline_frame.css" type="text/css">
    <meta name="description" content="ページの説明">
    </head>
  
  <body>
    <?php include "phpプログラムへのパス/www_func/mk_html.php"; ?>
    <h1>ページタイトル</h1>

       <pre style="line-height:110%; font-size:110%"><?php source2html("ソースコードのパス", "コメント文字列", 行番号表示フラグ, 行番号桁数, <pre>表示フラグ, タブの空白変換); ?></pre>

  </body>
</html>

以下に実際の例を示します.

<!DOCTYPE html>

<html>
  <head>
    <title>numpy の正規分布 (numpy.random.normal)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
    <link rel="stylesheet" href="../../../../../../css/inline_frame.css" type="text/css">
    <meta name="description" content="numpy.random.normal の例">
  </head>
  
  <body>
    <?php include "../../../../../../www_func/mk_html.php"; ?>
    <h1>正規分布 (numpy.random.normal)</h1>
    <h2>プログラム例</h2>

    <pre style="line-height:110%; font-size:110%"><?php source2html("normal.py", "#", 0, 3, 0, 4); ?></pre>

    <h2>実行結果</h2>

    <img src="normal.svg" style="width:300px">

  </body>
</html>

この実行結果は,インラインフレームで表示することができます.

背景付き,手動

プログラムの動作をもう少し詳しく説明する場合は,プログラムのソースや実行結果に背景をつけます.そのほうがわかりやすいです.そのために,「<div> — </div>」で囲み,背景などの設定を行います.具体的には,以下のようにします.

<div style="padding:1px 2px 2px 10px; margin-left:30px; background-color:#dddddd">
	ソースコードあるいは結果を記載.
</div>

具体例を以下に示します.このインラインフレーム表示例です.

インラインフレームでソースコードを実行結果を示す HTML の例

<!DOCTYPE html>

<html>
  <head>
    <title>インラインフレームを使ったプログラム表示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
    <link rel="stylesheet" href="../../../../../../css/inline_frame.css" type="text/css">
    <meta name="description" content="インラインフレームの例.「エラトステネスのふるい」を使っい,素数を求める Python のプログラムです.">
  </head>
  
  <body>
    <?php include "../../../../../../www_func/mk_html.php"; ?>
    <h1>インラインフレームを使ったプログラム表示例</h1>

    <h2>プログラム</h2>
    <p>100までの素数を出力付すプログラムです.素数を求めるアルゴリズムは「エラトステネスのふるい」です.整数の列があり,その中から素数の2以上の整数倍を消します.残ったものが素数になります.</p>

    <div style="padding:1px 2px 2px 10px; margin-left:30px; background-color:#dddddd">
      <pre style="line-height:110%; font-size:110%"><?php source2html("prime.py", "#", 0, 0, 0, 4, array()); ?></pre></div>

    <h2>実行結果</h2>
    <p>以下に実行結果を示します.</p>

    <div style="padding:1px 2px 2px 10px; margin-left:30px; background-color:#dddddd">
    <pre style="line-height:110%; font-size:110%">
2   3   5   7   11  13  17  19
23  29  31  37  41  43  47  53
59  61  67  71  73  79  83  89
97</pre></div>
    <br/>
    
  </body>
</html>

背景付き,自動

先の例はいろいろと設定は可能ですが,HTMLが長く面倒です.クラスを使い,記述を簡単にしました.フォントサイズの変更は「<pre class="program_source" style="font-size:100%">」のようにします.

<!DOCTYPE html>

<html>
  <head>
    <title>タイトル</title>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
    <link rel="stylesheet" href="相対パス/css/inline_frame.css" type="text/css">
    <meta name="description" content="内容の説明">
  </head>
	
  <body>
    <?php include "相対パス/www_func/mk_html.php"; ?>
	  
    <h1>os.path.commonpath()</h1>
    <p>説明文の作成</p>
	  
    <h2>プログラム例</h2>
    <div class="program_source">
      <pre class="program_source"><?php source2html("ソースファイル", "コメント",行番号, 行番号桁数, <pre>, タブ空白変換, array(強調行)); ?></pre>
   </div>
	  
   <h2>実行結果</h2>
   <div class="program_result">
      <pre class="program_result"><?php source2html("ソースファイル", "コメント",行番号, 行番号桁数, <pre>, タブ空白変換, array(強調行)); ?></pre>
   </div>
	  
  </body>
</html>

具体な表示例 (php のソース) を示します.

ページ作成情報

参考資料

更新履歴

2020年08月08日 ページを分割し,新規ページに変更.
2020年08月13日 Google Code Prettify (GCP) を使ったプログラム表示方法を追記.


no counter