インターネット技術特論
D:SSI,PHP,eRuby
山口 実靖
http://www.ns.kogakuin.ac.jp/~ct13140/inet
SSI (Sever Side Include) PHP ， eRuby など
ロジック と
プレゼンテーション(デザイン) の 分離
インターネット技術特論D-3
CGI は print文 地獄
<html>
<head>
<title>
Sane's Page </title>
</head>
<body>
Welcome to My Web Page <br>
hoge<br>
fuga<br>
piyo<br>
You are the 1234th visitor.
</body>
</html>
printf("<html>¥n");
printf(" <head>¥n");
printf(" <title>¥n");
printf(" Sane's Page¥n");
printf(" </title>¥n");
printf(" </head>¥n");
printf(" <body>¥n");
printf(" Welcome to My Web Page¥n");
printf(" <br>¥n");
printf(" hoge<br>¥n");
printf(" fuga<br>¥n");
printf(" piyo<br>¥n");
printf(" You are the ¥n");
printf(" %dth visitor. ¥n", cnt);
printf(" </body>¥n");
printf("</html>¥n");
ページの見た目
(左の
HTML)を変更したくなったら，
右のプログラムのソースコードを変更しなくてはならない．
しかし，
デザイナーにプログラムの変更は難しすぎる．
技術者にデザインの変更は難しすぎる．
デザイン と ロジック が，分離されていない
出力 出力のために必要なプログラム
多くの場合，もっと汚い！
インターネット技術特論D-4
SSI (Server Side Include)
• SSI (Server Side Include)
サーバで通常のHTMLファイルに，テキストを埋め 込んでからブラウザに渡すことが可能
インターネット技術特論D-5
SSI (#include file)
This is <b>000.shtml</b>
<!--#include file="copyright.txt" -->
<hr>
Powered by <I>Saneyasu Yamaguchi</I>
000.shtml
copyright.txt
This is <b>000.shtml</b>
<hr>
Powered by <I>Saneyasu Yamaguchi</I>
ブラウザに渡される内容
ブラウザで"000.shtml"に対して
読み込みをかけると サーバ側でINCLUDE処理 ポイント されてから，
ブラウザに渡される
インターネット技術特論D-6
余談 (dateコマンド)
• Un*x系OSには date というコマンドがある．
– date
→ 現在時刻を表示する．
– date +%Y/%m/%d_%H:%M:%S
→ 現在時刻を"2010/10/19_16:20:01"の形 式で表示する．
– date 010203042003
→ 現在時刻を2003年01月02日03時04分に 設定する．ただし，管理者権限が必要．
インターネット技術特論D-7
SSI (#exec cmd)
This is <b>001.shtml</b>
<hr>
Now :
<!--#exec cmd="/bin/date" -->
001.html
This is <b>001.shtml</b>
<hr>
Now :
Mon Oct 19 14:40:01 JST 2020
ブラウザに渡される内容
ブラウザで"001.shtml"に対して
読み込みをかけると ポイント
サーバ側でcmdを実行して，
その結果(出力)が 挿入されてから渡される．
インターネット技術特論D-8
SSI 利用方法 ( 工学院大学 )
• SSIに関するルール:
– SSIを用いる場合，ファイル名を"*.shtml"にする
• 利用方法はWebサーバの設定による.
上記は，工学院大学のルール.
– 設定ファイル "/etc/httpd/conf/httpd.conf"
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
インターネット技術特論D-9
SSI式カウンタを含むページ 0/2
#include <stdio.h>
#include <stdlib.h>
void main(void) { int cnt;
FILE *fp;
fp = fopen("cnt.txt", "rt");
if( fp == NULL ){
cnt == 0;
printf("file read NG.<br>¥n");
} else {
char buf[1024];
fread( buf, 1, 1023, fp);
buf[1023] = '¥0';
cnt = atoi(buf);
fclose(fp);
}
printf("%d", cnt);
cnt ++;
fp = fopen("cnt.txt","wt");
if( fp == NULL ){
printf("file write NG.<br>¥n");
} else {
fprintf(fp, "%d", cnt);
fclose(fp);
} }
cnt.c
「カウンタの数字」だけを 表示するプログラムを用意しておく．
ct13140@green[101]:cc cnt.c -o cnt ct13140@green[102]:cat cnt.txt 22
ct13140@green[103]:./cnt 22
ct13140@green[104]:cat cnt.txt 23
インターネット技術特論D-10
SSI式カウンタを含むページ 1/2
This is <b>002.shtml</b>
<hr>
You are the
<!--#exec cmd="./cnt" -->th visitor.
002.shtml
<!--#exec cmd="./cnt" -->
以外の部分は，普通にHTMLを記述すればよい．
ロジック と デザイン が分離された．
インターネット技術特論D-11
PHP
• 動的Webページ (Webアプリケーション) の作成に特化 したプログラミング言語，その処理系
– HTMLの中にスクリプトを埋め込むことが可能
• SSIの様に
– サーバサイドスクリプト言語
• つまり，処理(実行)はサーバにて行われる.
– かつては， PHP=Personal Home Page – 今は，「PHP: Hypertext Preprocessor」
インターネット技術特論D-12
PHP の例
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<ol>
<li>(^o^)</li>
<li>
<?php
echo 'Hello, Wordl!';
?>
</li>
</ol>
<body>
</html>
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<ol>
<li>(^o^)</li>
<li>
Hello, Wordl! </li>
</ol>
<body>
</html>
注意：工学院大学のサーバでは，この方法ではPHPは使用できません．
サーバに左のファイル(000.php)を置いておく．
｜
｜ブラウザから000.phpに対して読み込み要求があると，
↓
「サーバ上で」スクリプト部が処理(実行)され，右の内容(000.php変換後)に変換される．
変換後の内容(000.php変換後)が，サーバからブラウザに渡される．
000.php 000.php変換後
特徴
HTMLを(ほぼ)そのまま書いていけばよい．
実行(処理)はサーバで行われる．
スクリプト言語(インタープリタ型)でコンパイルは不要
インターネット技術特論D-13
PHP の例
<?php
echo date('y/m/d'), ' ';
echo strftime('%H:%M:%S',time()), '<br>';
system('/usr/bin/hostname');
?>
注意：工学院大学のサーバでは，この方法ではPHPは使用できません．
←これを 001.php として，Webサーバに 置いておく
20/10/19 14:40:01<br>sweb01
001.php
←サーバ上でこの様に変換されてから ブラウザに転送される．
インターネット技術特論D-14
PHP 利用方法 ( 工学院大学 )
• 本講義では，基本的にPHPは扱わない．
• PHPは
– sweb01 (www.ns.kogakuin.ac.jp) にインストール されている．
インターネット技術特論D-15
PHP 利用方法 ( 工学院大学 )
#!/usr/bin/php
Content-type: text/html
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<ol>
<li>(^o^)</li>
<li>
<?php
echo 'Hello, Wordl!';
?>
</li>
</ol>
<body>
</html>
000.cgi
注意点 (1)最初の3行目に，
#!/usr/local/bin/php Content-type: text/html と記述する．
(2)ファイル名を"*.cgi"にする．
(3)実行権限を付与する．
例えば，
chmod 755 000.cgi
工学院大学以外の多くのサーバの設定では，
・(1)の3行は不要であり，
・ファイル名は"*.php"であり，
・実行権限は不要．
インターネット技術特論D-16
PHP 利用方法 ( 工学院大学 )
> hostname sweb01
> ls -l 000.cgi -rwxr-xr-x 000.cgi
> ./000.cgi
Content-type: text/html
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<ol>
<li>(^o^)</li>
<li>
Hello, Wordl! </li>
</ol>
<body>
</html>
sweb01 (www.ns.kogauin.ac.jp)上にて 実行し，
変換後の内容を確認することができる．
green.ns.kogauin.ac.jpではなく，
www.ns.kogauin.ac.jpにloginする．
インターネット技術特論D-17
eRuby
• eRuby (embedded Ruby)
• HTMLの中にRubyスクリプトを埋め込むことが 可能．
インターネット技術特論D-18
eRuby
• <% ～～ %>
～～のスクリプトを実行
• <%= ～～ %>
～～を評価し，表示．
インターネット技術特論D-19
eRuby
<html>
<head><title>
eRuby
</title></head>
<body>
<%
a = "Hello,"
b = "World!"
%>
<h1><%= a %></h1>
<h2><%= b %></h2>
</body>
</html> 変換してからブラウザに渡される
<% ～～ %>
～～のスクリプトを実行
<%= ～～ %>
～～を評価し，表示．
<html>
<head><title>
eRuby
</title></head>
<body>
<h1>Hello,</h1>
<h2>World!</h2>
</body>
</html>
000.rhtml 000.rhtml変換後
インターネット技術特論D-20
eRuby使用方法 (工学院大学)
#!/usr/bin/erb -->
<% print "Content-type: text/html¥n¥n<!--¥n" %>
<html>
<head><title>eRuby</title></head>
<body>
<b>hello</b>
</body>
</html>
やや強引な使用方法．
erbをcgiとして呼び出す．
(1)ファイル名を“*.cgi”にする.
(2)ファイルに実行権限を与える.
(3)ファイルの先頭に上記の赤色部を記述する．
000.cgi
インターネット技術特論D-21
eRuby 使用方法 ( 工学院大学 )
#!/usr/bin/erb -->
<% print "Content-type: text/html¥n¥n<!--¥n" %>
<html>
<head><title>eRuby</title></head>
<body>
<b>hello</b>
</body>
</html>
000.cgi 変換前
<!--
#!/usr/bin/erb -->
<html>
<head><title>eRuby</title></head>
<body>
<b>hello</b>
</body>
</html>
000.cgi 変換後
インターネット技術特論D-22
eRuby 使用方法 ( 工学院大学 )
• サーバ上で，実行(変換)結果を確認する ./000.cgi
インターネット技術特論D-23
eRuby の例
<html>
<head><title>eRuby</title></head>
<body>
<h1>eRuby</h1>
<ul>
<% 5.times do | i | %>
<li> <%= i %> <br></li>
<%end%>
</ul>
</body>
</html>
<html>
<head><title>eRuby</title></head>
<body>
<h1>eRuby</h1>
<ul>
<li> 0 <br></li>
<li> 1 <br></li>
<li> 2 <br></li>
<li> 3 <br></li>
<li> 4 <br></li>
</ul>
</body>
</html>
002.cgi 変換前
002.cgi 変換後
