動的 JavaScript 埋め込みコンテンツ

ARGUS のツリーリンク初期バージョン

埋め込まれた JavaScript は、pinpoint.js です。

<!-- ピンポイント タイトル部分 -->
<SPAN class="li">
<IMG
	src="http://winofsql.jp/image/p.png"
	onClick='TreeControl("501", this)'
>
&nbsp;ピンポイント
</SPAN><br>
<DIV class="ul" style='display:none;' id="501">

<!-- 明細の埋め込み -->
<SCRIPT
	language="javascript"
	type="text/javascript"
	src="http://winofsql.jp/argus/tree/pinpoint.js"
></SCRIPT>

</DIV>

pinpoint.js

この時点では、単純に HTML 文字列を書き出す JavaScript コードになっており、リンクリストを
追加する場合は、この pinpoint.js を変更してアップロードする事になります。

document.write( '<SPAN class="li">' );
document.write( '<IMG src="http://winofsql.jp/image/d2.png">' );
document.write( "<A href='javascript:HideView2(\"" );
document.write( "http://winofsql.jp/VA003334/smalltech060519170330.htm\",3000)'>" );
document.write( 'C++ MySQL アクセス' );
document.write( '</A>' );
document.write( '</SPAN>' );
document.write( '<br />' );

document.write( '<SPAN class="li">' );
document.write( '<IMG src="http://winofsql.jp/image/d2.png">' );
document.write( "<A href='javascript:HideView2(\"" );
document.write( "http://winofsql.jp/VA003334/smalltech060519171448.htm\",4500)'>" );
document.write( 'C++ ADO' );
document.write( '</A>' );
document.write( '</SPAN>' );
document.write( '<br />' );

js を PHP ファイルに差し替える

php で画像イメージを出力して、IMG タグの src 属性に php ファイルの url を書くのと同じです

<!-- ピンポイント タイトル部分 -->
<SPAN class="li">
<IMG
	src="http://winofsql.jp/image/p.png"
	onClick='TreeControl("501", this)'
>
&nbsp;ピンポイント
</SPAN><br>
<DIV class="ul" style='display:none;' id="501">

<!-- 明細の埋め込み -->
<SCRIPT
	language="javascript"
	type="text/javascript"
	src="http://winofsql.jp/argus/tree/pinpoint.php"
></SCRIPT>

</DIV>

pinpoint.php

<?
header( "Content-Type: text/javascript; Charset=shift_jis" );

?>

document.write( '<SPAN class="li">' );
document.write( '<IMG src="http://winofsql.jp/image/d2.png">' );
document.write( "<A href='javascript:HideView2(\"" );
document.write( "http://winofsql.jp/VA003334/smalltech060519170330.htm\",3000)'>" );
document.write( 'C++ MySQL アクセス' );
document.write( '</A>' );
document.write( '</SPAN>' );
document.write( '<br />' );

document.write( '<SPAN class="li">' );
document.write( '<IMG src="http://winofsql.jp/image/d2.png">' );
document.write( "<A href='javascript:HideView2(\"" );
document.write( "http://winofsql.jp/VA003334/smalltech060519171448.htm\",4500)'>" );
document.write( 'C++ ADO' );
document.write( '</A>' );
document.write( '</SPAN>' );
document.write( '<br />' );

この時点では、js が php に変わっただけで、リンクリストの追加をするには php の内容を JavaScript として
変更してアップロードする必要があります。

しかし、PHP なので次の段階としてリンクの url をデータベースから取得するようにし、データベースのデータの
メンテナンスアプリケーション( 管理ツール ) を作成すれば、プログの部品は元より、ホームページの部分リンク
コンテンツとして使用できるようになります。

データベースにテーブルを作成

create table `MYLINKS` (
	`AUTOID` BIGINT NOT NULL AUTO_INCREMENT UNIQUE
	,`CATEGORY` VARCHAR(20)
	,`TITLE` VARCHAR(255)
	,`UTL` VARCHAR(255)
	,`OPTION` VARCHAR(255)
	,`SORT` INT
	,primary key( AUTOID )
)

create index `MYLINKS_SORT` on `MYLINKS`( `SORT` )

insert into `MYLINKS` (
	`CATEGORY` 
	,`TITLE` 
	,`UTL` 
	,`OPTION` 
	,`SORT` 
)
 values(
	'pinpoint'
	,'C++ MySQL アクセス'
	,'http://winofsql.jp/VA003334/smalltech060519170330.htm'
	,'3000'
	,1
)

insert into `MYLINKS` (
	`CATEGORY` 
	,`TITLE` 
	,`UTL` 
	,`OPTION` 
	,`SORT` 
)
 values(
	'pinpoint'
	,'C++ ADO'
	,'http://winofsql.jp/VA003334/smalltech060519171448.htm'
	,'4500'
	,2
)

DB よりリンク先を展開する

MySQL の窓の left.php をほぼそのまま使用できます

※ タイトルのデータに ' ( シングルクオーテーション ) を使用できません。
※ 厳密には、　HTML 特殊文字に置き換える必要があります

※ データの呼び出しも、汎用的な mysql_fetch_array を使用すべきです。

<?
header( "Content-Type: text/javascript; Charset=shift_jis" );

$host = "localhost";	// データベースのあるサーバー
$db = "lightbox";		// データベース名
$user = "root";		// ユーザー名
$pass = "";		// パスワード

mb_language( "ja" );
mb_internal_encoding("EUC-JP");

// 接続とDB選択
$link = mysql_connect($host, $user, $pass);
if ( !$link ) {
	print mystr( "接続エラー" );
	exit();
}
mysql_select_db( $db, $link );

// SQL の指定
$sql = "select * from `MYLINKS`";
$sql .= " where `CATEGORY` = '{$_GET['target']}'";
$sql .= " order by `SORT`";
$result = mysql_query($sql);
if (!$result) {
	print "SQLエラー<br>";
	print mysql_error();
	exit();
}

// 一覧作成
while ($row = mysql_fetch_row($result)) {
?>
document.write( '<SPAN class="li">' );
document.write( '<IMG src="http://winofsql.jp/image/d2.png">' );
document.write( "<A href='javascript:HideView2(\"" );
<?
	print "document.write( \"";
	print $row[3];
	print "\\\",";
	print $row[4];
	print ")'>\" );\n";

	print "document.write( '";
	print mb_convert_encoding( $row[2], "SJIS", "EUC-JP" );
	print "' );\n";
?>
document.write( '</A>' );
document.write( '</SPAN>' );
document.write( '<br />' );
<?
}

mysql_free_result($result);

// 接続解除
mysql_close($link);

?>

埋め込み SCRIPT タグの src 属性の変更

<!-- ピンポイント タイトル部分 -->
<SPAN class="li">
<IMG
	src="http://winofsql.jp/image/p.png"
	onClick='TreeControl("501", this)'
>
&nbsp;ピンポイント
</SPAN><br>
<DIV class="ul" style='display:none;' id="501">

<!-- 明細の埋め込み -->
<SCRIPT
	language="javascript"
	type="text/javascript"
	src="http://winofsql.jp/argus/tree/pinpoint.php?target=pinpoint"
></SCRIPT>

</DIV>

リファラチェック

このままでは、世界中のあらゆる場所からアクセスできてしまうので、自分のサイトからのみアクセス
可能なようにします。( プログラムを作成されてしまうとアクセス可能ですが、通常これで十分です )

<?
header( "Content-Type: text/javascript; Charset=shift_jis" );

# リファラチェックのはじまり
$mydomain = "http://argus.sblo.jp";
$len = strlen( $mydomain );
$ref = substr( $_SERVER['HTTP_REFERER'], 0, $len );
if ( $mydomain != $ref ) {
	print "document.write( \"argus.sblo.jp 以外では使用できません\" );";
	exit();
}
# リファラチェックのおわり

$host = "localhost";	// データベースのあるサーバー
$db = "lightbox";		// データベース名
$user = "root";		// ユーザー名
$pass = "";		// パスワード