Javascript の最近のブログ記事
sprinkle.jsを利用すればiflame、object、SSIなどで外部のHTMLを読み込みしていたことと同じことができるようです。
使い方
- sprinkle.jsをダウンロードし適当なディレクトリにアップロード
- 使用するページでsprinkle.jsを読み込む
<script type="text/javascript" src="http://yourdomain/sprinkle.js"></script>
- 以下のように読み込みたいファイルを指定
<div src="読み込みたいファイル"></div>
おぉ、簡単。
まだ実験していなけど...。
UTF-8以外のHTMLを読み込むと文字化けするみたいです。
サイト外のHTMLは読み込みができないみたいです。
どんなことに使えるか想像ができませんが、便利そうなのでメモ。
参考ページ
トラックバック(0)
トラックバックURL:
最近いろいろなサイトでみかける画像を ページの前面で表示するやつ。
コレ↓（クリックしてみてください）
Lightbox2というJavascript、導入が難しいのかなと思ったら以外に簡単。
- まずダウンロードして解凍
- 解凍後ファイルを任意のディレクトリにアップロード
（例：/js/lightbox/に解凍したjs,css,imageフォルダをアップロード）
- 使用するページのヘッダーに以下のコード記述
<script type="text/javascript" src="/js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="/js/lightbox/js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="/js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="/js/lightbox/css/lightbox.css" type="text/css" media="screen" />
- lightbox.js内のアイコン画像のパスを変更
fileLoadingImage: '/include/js/lightbox/images/loading.gif', fileBottomNavCloseImage: '/include/js/lightbox/images/closelabel.gif',
- light.css内のアイコン画像パスを変更
#prevLink:hover, #prevLink:visited:hover { background: url(/js/lightbox/images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/js/lightbox/images/nextlabel.gif) right 15% no-repeat; } - 表示対象画像にリンクする<a>タグ内にrel="lightbox"追記
<a href="test.jpg" rel="lightbox"><img src="thumbnail.jpg" /></a>
たったこれだけでリッチなサイトに変身です。
写真にグループ名を付けて、同じフォルダ内にある画像を次々めくったり、タイトルをつけたりすることもできます。
<a href="test.jpg" rel="lightbox" title="タイトル名">写真を見る</a>
<a href="image1.jpg" rel="lightbox[グループ名]">写真1</a> <a href="image2.jpg" rel="lightbox[グループ名]">写真2</a> <a href="image3.jpg" rel="lightbox[グループ名]">写真3</a>
MovableTypeを使用している方はプラグイン「LightBox2MT」を使用すると、画像挿入時は<a>タグ内にrel="lightbox"を自動的に入れてくれます。
ただし、画像をアップロードする際に「画像をポップアップで開く」を選択しているとLightbox2が使えません。
プラグインの配布は製作者の以下ブログ内からダウンロードできるので、ダウンロードしたら解凍し、/mt/plugins/内にアップロードするだけで使えます。
トラックバック(0)
トラックバックURL:
以前に「
Warning: Missing argument 2 for getTitleLink(), called in /home/sites/heteml/users158/m/h/0/mh0723/web/hoshiya.biz/blog/web/javascript/index.php on line 277 and defined in /home/sites/heteml/users158/m/h/0/mh0723/web/hoshiya.biz/include/function/function.php on line 104
PHPのファンクションでMozshotを楽に使う｜星屋工作室 hoshiya.biz
」の一部で
タイトルタグ<title></title>の間の文字列を取得するスクリプトを紹介しましたが、もっと短くできました。
<?php
function getTitle( $url ) {
$byte = 256;
while(empty($matches)){
//無限ループにならないようにバイト数を制限
if($byte > 10000){
break;
}
//file_get_contents($url)でも読めるが、バイト数指定で読み込む
$html = file_get_contents($url, NULL, NULL, 0, $byte);
preg_match("@<title.*?>(.*?)</title>@i" , $html, $matches);
$byte= $byte + 256;
}
$html = $matches[1];
$html = mb_convert_encoding($html, mb_internal_encoding(), "auto" );
return($html);
}
echo getTitle("http://hoshiya.biz");
?>
タイトルタグが見つからなかったり、 タイトルタグ<title></title>よりも前に大量の文字列があると読み込みに時間がかかるので、読み込みのバイト数上限を決め、タイトルが見つかるまで徐々に読み込みバイト数を増やしていくようにしました。
↓上記でhttp://hoshiya.bizのタイトルを取得した結果
星屋工作室 hoshiya.biz
20011/03/06追記
PHPのクラスライブラリPEARのパッケージ（iHTTP_Client）を使った方法が見つかったのでメモ。
こっちの方が高速！な感じがします...。
※PEARのパッケージHTTP_Clientと依存関係にあるHTTP_Request2が必要です。
<?php
function getTitle($targetUrl){
require_once $_SERVER['DOCUMENT_ROOT']."/lib/PEAR/HTTP_Client/Client.php";
$client =& new HTTP_Client();
$client->get($targetUrl);
$response = $client->currentResponse();
//余計な改行コードをスペースに変換
$response = str_replace( array( chr(10), chr(13), chr(9) ), chr(32), $response['body'] );
preg_match("/<title.*?>(.*?)<\/title>/", $response, $title_matches);
$title = $title_matches[1];
$title = mb_convert_encoding($title, mb_internal_encoding(), "auto" );
return($title);
}
echo getTitle("http://hoshiya.biz");
?>
ついでにJavascriptでタイトルを取得する方法もメモ。
※現在のURLのタイトルしか取得できません。
<script type="text/javascript">
document.write("このページのタイトルは→「"+document.title+"」です。");
</script>
結果：
関連記事
-
Warning: Missing argument 2 for getTitleLink(), called in /home/sites/heteml/users158/m/h/0/mh0723/web/hoshiya.biz/blog/web/javascript/index.php on line 364 and defined in /home/sites/heteml/users158/m/h/0/mh0723/web/hoshiya.biz/include/function/function.php on line 104
PHP Simple HTML DOM Parserでタイトルタグ内の文字列を取得する：PHP｜星屋工作室 hoshiya.biz -
Warning: Missing argument 2 for getTitleLink(), called in /home/sites/heteml/users158/m/h/0/mh0723/web/hoshiya.biz/blog/web/javascript/index.php on line 367 and defined in /home/sites/heteml/users158/m/h/0/mh0723/web/hoshiya.biz/include/function/function.php on line 104
htmlSQLを使ってタイトルタグ内の文字列を取得する:PHP｜星屋工作室 hoshiya.biz
トラックバック(0)
トラックバックURL:
イントラネットで表示されているページを印刷しようとすると、
A4・縦で印刷したいのに、デフォルトはA4・横になっているため、
印刷設定を毎回「縦」に変更しなくてはならない事にガマンの限界が...。
Windowsサーバーなので、
イントラネットはIIS上のASPで作っており
一部PHPを使っています。
印刷設定（用紙設定）はASPやJavascriptの関数があるんかな？
といろいろ検索しましたが見つかりませんでした...。
しかし、替わりに見つけたのはActtiveXコントロール「ScriptX」を使った方法！
まず以下のページで「Dowload smsx.cab」ボタンを押してダウンロード
任意のディレクトリにアップロード
印刷設定を使うページに以下のコードを挿入し、
<object>タグでActiveXコントロール読み込む。
<!-- ScriptX 読み込み --> <object id=factory style="display:none" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="http://**smsx.cabを設置した場所のパス**/smsx.cab#Version=6,5,439,72（←バージョンによって書き換える）"> </object> <!-- ScriptX 読み込み -->
次にJavascriptファンクションで印刷設定を行う。
<script type="text/javascript">
function printWindow() {
factory.printing.header = "ヘッダ名";
factory.printing.footer = "フッタ名";
factory.printing.portrait = false; // 用紙方向 true: 縦 false: 横
factory.printing.leftMargin = 1.0;
factory.printing.topMargin = 1.0;
factory.printing.rightMargin = 1.0;
factory.printing.bottomMargin = 1.0;
factory.printing.Print(false); // 印刷実行 ture: 印刷ダイアログなし false: 印刷ダイアログあり
}
</script>
あとはファンクションを呼び出すだけでOK!
<input type="button" value="ScriptXで印刷" onclick="printWindow();" />自分の場合は印刷ページ表示と同時に印刷するので、
<body onload="printWindow();" />
としました。
※初回使用時は「ActiveXをインストールしますか？」見たいな警告が出ますが、インストールしてしてください。
その他
ヘッダ・フッタに、現在日・ページ数出力
factory.printing.header = "ヘッダ名 &b 日付: &d"; // 現在日出力 factory.printing.footer = "フッタ名 &b &p/&P ページ"; // ページ数出力
これでイントラネットとインターネットでヘッダー・フッター印刷を切り分けられそうなのがいいです。
ヘッダーとフッターで使える記号
- &w ： 印刷するホームページのタイトル
- &u ： 印刷するページのアドレス
- &d ： 現在の日付（xxxx/xx/xx 形式）
- &D ： 現在の日付（xxxx年xx月xx日 形式）
- &t ： 現在の時刻（コントロールパネルの「地域」で設定されている形式）
- &T ： 現在の時刻（xx：xx：xx 形式）
- &p ： 現在のページ番号
- &P ： 総ページ数
- &b ： 右揃えの文字列（「&b」に続けて文字列を入力）
- &b&b ： 中央揃えの文字列（最初の「&b」に続けて文字列を入力）と右揃えの文字列（2 番目の「&b」に続けて文字列を入力）
- && ： アンパサンド（&）
直接印刷(印刷ダイアログ表示なし）だけを直接使う
factory.printing.Print(true);
プレビュー画面を表示
factory.printing.Preview();
ActiveXコントロールだけにWindowsサーバー上じゃないと動かないとは思うのですが、
WindowsサーバーであればIISじゃなくてもApatchでも動き、
<object>タグで「smsx.cab」さえ読み込めばPHPでも使えるようなことが書かれたページがありました。
有償版もあるようですが、用紙サイズの指定とかもできるみたいです。
トラックバック(0)
トラックバックURL:
最近のサイトでよく見るソースをきれいに見せるJavascriptです。
↓これ
<pre class='brush:php'> <?php $p = "サンプル"; echo $p; ?> </pre>
自分のホームページにも導入したいと思っていろいろ探しました。
現在の最新は「SyntaxHighlighter 3.0.83」のようです。
まずダウンロードして適当な場所に保存して解凍
ダウンロードファイルはこれ↓
http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current
「ルートディレクトリ/js/SyntaxHighlighter」に保存した場合。
<head>～</head>内に以下を追加
ハイライト部分は必須。
ソースを表示する場所に以下のように記載すればOK。
（'brush:php'の部分は表示する言語によって変更する）
<pre class='brush:php'> <?php $p = "ようこそ"; echo $p; ?> </pre>
意外にカンタン...。
英語の説明ページですが、なんとなくでも理解できました。
なんかウレシイ。
参考ページ
トラックバック(0)
トラックバックURL:
トラックバック(1)
トラックバックURL:
代替画像の表示でFLASHが表示できないiPhone対策
会社のホームページはパソコン用のサイトで、
メイン画像がFLASHでできております。
iPhoneを持っているのですが、
FLASHが表示できないため、
なんか替わりの画像が表示できたらなぁ～と方法を検索したら簡単に見つかりました。
早速導入してみようということで実践したら、
Javascriptのライブラリの設置がいるものの、
ちょ～簡単にできた。
通常のFLASH画像を設置するよりも簡単じゃないですか！？
しかし、またJacascriptが増えてしまった...。
以下を参考にさせていただきました↓
swfobject.js を使って Flash と代替画像を切り替える方法
http://www.drk7.jp/MT/archives/001481.html
トラックバック(0)
トラックバックURL:
配列をうまく使えないので、同じような処理を繰り返しており課題はあるものの
なんとかラジオボタンで選択した金額を計算できる自動見積りフォームを作ってみた。
合計：0 円
消費税：0 円
税込合計：0 円
見積り
下記項目を選択すると自動計算します。
ソース
<div onscroll="display_account()">
<script type="text/javascript">
<!--
function keisan(){
var tax = 5; // 消費税率
var i;
var p1 = 0;
var p2 = 0;
var p3 = 0;
var goods1 = document.getElementsByName("goods1"); //チェック済みのラジオボタンを調べて値を取得
for(i=0; i<goods1.length; i++){
if(goods1[i].checked){
p1 = goods1[i].value;
break;
}
}
var goods2 = document.getElementsByName("goods2"); //チェック済みのラジオボタンを調べて値を取得
for(i=0; i<goods2.length; i++){
if(goods2[i].checked){
p2 = goods2[i].value;
break;
}
}
var goods3 = document.getElementsByName("goods3"); //チェック済みのラジオボタンを調べて値を取得
for(i=0; i<goods3.length; i++){
if(goods3[i].checked){
p3 = goods3[i].value;
break;
}
}
var price1 = p1 * document.form1.volume1 .selectedIndex; // 数量×単価
var price2 = p2 * document.form1.volume2 .selectedIndex; // 数量×単価
var price3 = p3 * document.form1.volume3 .selectedIndex; // 数量×単価
var total1 = parseInt(price1)+ parseInt(price2)+ parseInt(price3); // 税抜き合計を計算
var tax2 = Math.round((total1 * tax) / 100); //消費税を計算
var total2 = total1 + tax2; //税込み合計を計算
//表示用の金額を3桁区切りに変換
var data = new Array(total1,tax2,total2); //金額を配列に格納
var len = data.length; //配列の数を取得
for(cnt=0;cnt<len;cnt++){
data[cnt] = new String(data[cnt]).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); //ここで正規表現で3桁ごとにカンマで区切る
}
//フォームのテキストエリアに表示する金額
document.form1.field_total1.value = data[0]; // 税抜き合計
document.form1.field_tax.value = data[1]; // 消費税
document.form1.field_total2.value = data[2]; // 税込合計
//右の窓に表示する金額
document.getElementById("display_account_amount").innerHTML = data[0]; // 税抜き合計
document.getElementById("display_account_tax").innerHTML = data[1]; // 消費税
document.getElementById("display_account_all").innerHTML = data[2]; // 税込合計
}
// -->
</script>
<script type="text/javascript">
<!--
function display_account() {
var position_top = ( document.body.scrollTop || document.documentElement.scrollTop || window.scrollTop ) ; if ( parseInt(position_top) > 170 ){
document.getElementById("display_account").style.top = position_top + "px"; } } window.onload = function() {
var isIE = 0<=window.navigator.userAgent.indexOf("MSIE");
if(isIE && document.compatMode=="BackCompat"){
document.body.onscroll = display_account;
}else{
document.documentElement.onscroll = display_account;
}
}
//-->
</script>
<div id="display_account" style="position:absolute;top:170px;right:20px;z-index:100;width:200px;"> 見積金額<br />
合計：<span id="display_account_amount">0</span> 円<br />
消費税：<span id="display_account_tax">0</span> 円<br />
税込合計：<span id="display_account_all">0</span> 円<br />
</div>
<h1>見積り</h1>
<p>下記項目を選択すると自動計算します。</p>
<form name="form1" action="" id="form1" method="post">
<table>
<tr>
<td>商品</td>
<td>グレード5</td>
<td>グレード4</td>
<td>グレード3</td>
<td>グレード2</td>
<td>グレード1</td>
<td>数量</td>
</tr>
<tr>
<td>液晶テレビ</td>
<td><input type="radio" name="goods1" id="goods1" value="120000" onClick="keisan()" />
120,000円</td>
<td><input type="radio" name="goods1" id="goods1" value="40000" onClick="keisan()" />
40,000円</td>
<td><input type="radio" name="goods1" id="goods1" value="20000" onClick="keisan()" />
20,000円</td>
<td><input type="radio" name="goods1" id="goods1" value="15000" onClick="keisan()" />
15,000円</td>
<td><input type="radio" name="goods1" id="goods1" value="10000" onClick="keisan()" />
10,000円</td>
<td><select name="volume1" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td>エアコン</td>
<td><input type="radio" name="goods2" id="goods2" value="80000" onClick="keisan()" />
80,000円</td>
<td><input type="radio" name="goods2" id="goods2" value="60000" onClick="keisan()" />
60,000円</td>
<td><input type="radio" name="goods2" id="goods2" value="40000" onClick="keisan()" />
40,000円</td>
<td><input type="radio" name="goods2" id="goods2" value="20000" onClick="keisan()" />
20,000円</td>
<td><input type="radio" name="goods2" id="goods2" value="10000" onClick="keisan()" />
10,000円</td>
<td><select name="volume2" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td>パソコン</td>
<td><input type="radio" name="goods3" id="goods3" value="60000" onClick="keisan()" />
60,000円</td>
<td><input type="radio" name="goods3" id="goods3" value="40000" onClick="keisan()" />
40,000円</td>
<td><input type="radio" name="goods3" id="goods3" value="20000" onClick="keisan()" />
20,000円</td>
<td><input type="radio" name="goods3" id="goods3" value="10000" onClick="keisan()" />
10,000円</td>
<td><input type="radio" name="goods3" id="goods3" value="50000" onClick="keisan()" />
5,000円</td>
<td><select name="volume3" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>合計</td>
<td><input type="text" name="field_total1" size="8" value="0">
円</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>消費税</td>
<td><input type="text" name="field_tax" size="8" value="0">
円</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>税込合計</td>
<td><input type="text" name="field_total2" size="8" value="0">
円</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</div>
トラックバック(0)
トラックバックURL:
前回は金額が3桁区切りになっていなかったので、
今回は3桁区切りを加えてみた。
合計：0 円
消費税：0 円
税込合計：0 円
見積り
下記項目を選択すると自動計算します。
<div onscroll="display_account()">
<script type="text/javascript">
<!--
function keisan(){
var tax = 5; // 消費税率
var price1 = eval(document.form1.goods1.value) * document.form1.volume1 .selectedIndex; // 数量×単価
var price2 = eval(document.form1.goods2.value) * document.form1.volume2 .selectedIndex;
var price3 = eval(document.form1.goods3.value) * document.form1.volume3 .selectedIndex;
var total1 = parseInt(price1)+ parseInt(price2)+ parseInt(price3); // 税抜き合計を計算
var tax2 = Math.round((total1 * tax) / 100); //消費税を計算
var total2 = total1 + tax2; //税込み合計を計算
//表示用の金額を3桁区切りに変換
var data = new Array(total1,tax2,total2); //金額を配列に格納
var len = data.length; //配列の数を取得
for(cnt=0;cnt<len;cnt++){
data[cnt] = new String(data[cnt]).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); //ここで正規表現で3桁ごとにカンマで区切る
}
//フォームのテキストエリアに表示する金額
document.form1.field_total1.value = data[0]; // 税抜き合計
document.form1.field_tax.value = data[1]; // 消費税
document.form1.field_total2.value = data[2]; // 税込合計
//右の窓に表示する金額
document.getElementById("display_account_amount").innerHTML = data[0]; // 税抜き合計
document.getElementById("display_account_tax").innerHTML = data[1]; // 消費税
document.getElementById("display_account_all").innerHTML = data[2]; // 税込合計
}
// -->
</script>
<script type="text/javascript">
<!--
function display_account() {
var position_top = ( document.body.scrollTop || document.documentElement.scrollTop || window.scrollTop ) ; if ( parseInt(position_top) > 170 ){
document.getElementById("display_account").style.top = position_top + "px"; } } window.onload = function() {
var isIE = 0<=window.navigator.userAgent.indexOf("MSIE");
if(isIE && document.compatMode=="BackCompat"){
document.body.onscroll = display_account;
}else{
document.documentElement.onscroll = display_account;
}
}
//-->
</script>
<div id="display_account" style="position:absolute;top:170px;right:20px;z-index:100;width:200px;"> 見積金額<br />
合計：<span id="display_account_amount">0</span> 円<br />
消費税：<span id="display_account_tax">0</span> 円<br />
税込合計：<span id="display_account_all">0</span> 円<br />
</div>
<h1>見積り</h1>
<p>下記項目を選択すると自動計算します。</p>
<form name="form1" action="" id="form1" method="post">
<table>
<tr>
<td>商品</td>
<td> </td>
<td>数量</td>
</tr>
<tr>
<td>果物</td>
<td><select name="goods1" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="1000">リンゴ（3個入り）1,000円</option>
<option value="450">バナナ 450円</option>
<option value="35900">パイナップル 650円</option>
</select></td>
<td><select name="volume1" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td>肉</td>
<td><select name="goods2" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="500">牛肉（100g）500円</option>
<option value="400">豚肉（100g）400円</option>
<option value="300">鶏肉（100g）300円</option>
</select></td>
<td><select name="volume2" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td>魚</td>
<td><select name="goods3" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="110">さけ 110円</option>
<option value="120">さば 120円</option>
<option value="130">いわし 130円</option>
</select></td>
<td><select name="volume3" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>合計</td>
<td><input type="text" name="field_total1" size="8" value="0">
円</td>
<td> </td>
</tr>
<tr>
<td>消費税</td>
<td><input type="text" name="field_tax" size="8" value="0">
円</td>
<td> </td>
</tr>
<tr>
<td>税込合計</td>
<td><input type="text" name="field_total2" size="8" value="0">
円</td>
<td> </td>
</tr>
</table>
</form>
</div>
トラックバック(0)
トラックバックURL:
いろいろ探してみて一番よさそうなサンプルを使用して
金額の数値をカンマで3桁に区切り、
表示できるようやってみた。
<script type="text/javascript">
//3桁カンマ区切り
function addFigure() {
var str = 1000000000;
str = String(str).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
document.getElementById("price").innerHTML = str;
}
</script>
<div id="price">0</div>
</body>
これで「1,000,000,000」と表示されるはず
正規表現で数字の間にカンマを置き換えているのですが、
正規表現についてはチンプンカンプンです。
参考サイト：http://www.coppermine.jp/hasunuma/weblog/2010/05/post.html
トラックバック(1)
トラックバックURL:
課題はたくさんあるものの、
いろいろサンプルを探してJavaScriptの自動見積りフォームを作ってみた。
合計：0 円
消費税：0 円
税込合計：0 円
見積り
下記項目を選択すると自動計算します。
ソース
<script type="text/javascript">
<!--
function keisan(){
// 計算開始
var tax = 5; // 消費税率
var price1 = eval(document.form1.goods1.value) * document.form1.volume1 .selectedIndex; // 数量×単価
var price2 = eval(document.form1.goods2.value) * document.form1.volume2 .selectedIndex;
var price3 = eval(document.form1.goods3.value) * document.form1.volume3 .selectedIndex;
var total1 = parseInt(price1)+ parseInt(price2)+ parseInt(price3); // 合計を計算
var tax2 = Math.round((total1 * tax) / 100); //消費税を計算
// フォームのテキストエリアに表示する金額
document.form1.field_total1.value = total1; // 合計を表示
document.form1.field_tax.value = tax2; // 消費税を表示
document.form1.field_total2.value = total1 + tax2; // 税込合計を表示
//右の窓に表示する金額
document.getElementById("display_account_amount").innerHTML = total1;
document.getElementById("display_account_tax").innerHTML = tax2;
document.getElementById("display_account_all").innerHTML = total1 + tax2;
}
// -->
</script>
<script type="text/javascript">
<!--
function display_account() {
var position_top = ( document.body.scrollTop || document.documentElement.scrollTop || window.scrollTop ) ; if ( parseInt(position_top) > 170 ){
document.getElementById("display_account").style.top = position_top + "px"; } } window.onload = function() {
var isIE = 0<=window.navigator.userAgent.indexOf("MSIE");
if(isIE && document.compatMode=="BackCompat"){
document.body.onscroll = display_account;
}else{
document.documentElement.onscroll = display_account;
}
}
//-->
</script>
<div id="display_account" style="position:absolute;top:170px;right:20px;z-index:100;width:200px;"> 見積金額<br />
合計：<span id="display_account_amount">0</span> 円<br />
消費税：<span id="display_account_tax">0</span> 円<br />
税込合計：<span id="display_account_all">0</span> 円<br />
</div>
<h1>見積り</h1>
<p>下記項目を選択すると自動計算します。</p>
<form name="form1" action="" id="form1" method="post">
<table>
<tr>
<td>商品</td>
<td> </td>
<td>数量</td>
</tr>
<tr>
<td>果物</td>
<td><select name="goods1" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="1000">リンゴ（3個入り）1,000円</option>
<option value="450">バナナ 450円</option>
<option value="35900">パイナップル 650円</option>
</select></td>
<td><select name="volume1" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td>肉</td>
<td><select name="goods2" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="500">牛肉（100g）500円</option>
<option value="400">豚肉（100g）400円</option>
<option value="300">鶏肉（100g）300円</option>
</select></td>
<td><select name="volume2" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td>魚</td>
<td><select name="goods3" onChange="keisan()">
<option value="0" selected="selected">選択してください</option>
<option value="110">さけ 110円</option>
<option value="120">さば 120円</option>
<option value="130">いわし 130円</option>
</select></td>
<td><select name="volume3" onchange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>合計</td>
<td><input type="text" name="field_total1" size="8" value="0">
円</td>
<td> </td>
</tr>
<tr>
<td>消費税</td>
<td><input type="text" name="field_tax" size="8" value="0">
円</td>
<td> </td>
</tr>
<tr>
<td>税込合計</td>
<td><input type="text" name="field_total2" size="8" value="0">
円</td>
<td> </td>
</tr>
</table>
</form>
</div>
次は金額を3桁区切りにする方法を探ってみたいと思います。
JavaScriptは3桁区切りにしてくれる関数が存在しないみたいですね。
3桁毎に「,」を挿入する方法と正規表現による置換える方法があるようですが、
正規表現による置換えがすっきりしてよさそう。
function addFigure(str) {
var num = new String(str).replace(/,/g, "");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num;
}
トラックバック(0)
トラックバックURL:
ブログを更新して、RSSも更新されているが、
Google AJAX Feed APIで読み込んだフィードが更新されていないということが多々あります。
それは、
Googleのキャッシュにあるフィードを読み込んでいるからだそうです。
キャッシュをクリアまたはリセットする方法があるのかもしれませんが、
リアルタイムに最新の記事一覧を表示する方法は
読み込むフィードのURLにユニークな値を付加させることで
毎回最新の一覧を表示できるようになります。
今回はユニークな値として現在日時をURLに付加させてみました。
<script type="text/javascript" src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize()
{
// 現在の日付と時間を取得
var date = new Date();
var year = date.getYear();
var mon = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var query = year + mon + day + hour + min + sec;
//現在の最新RSSフィードの取得
var feed = new google.feeds.Feed("http://example.com/blog/rss20.xml?"+ query );
//取得するフィード数
feed.setNumEntries(6)
//実際に読む込む
feed.load(function(result)
{
//読み込めたか判別
if (!result.error)
{
//表示部分を選択
var container = document.getElementById("feed");
//変数の初期化
var list = "";
//Feedの処理
list = '<ul>';
for (var i = 0; i < result.feed.entries.length; i++)
{
//Feedを一つ抽出
var entry = result.feed.entries[i];
if(entry.title.match(/^PR:/)) {
//「PR:」から始まるものがあれば何もしない
}
else{
list += '<li>';
list += '<a href="' + entry.link + '" target="_blank" title="' + entry.title + '">' + entry.title + '</a>';
var strdate = createDateString(entry.publishedDate);
list += ' (' + strdate + ')';
list += '</li>';
}
}
list += '</ul>';
container.innerHTML = list;
}
});
}
//日付の表示方法を変更
function createDateString(publishedDate)
{
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
//var strdate = pyear + "年" + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分" + psecond + "秒";
var strdate = pyear + "-" + pmonth + "-" + pday ;
return strdate;
}
google.setOnLoadCallback(initialize);
</script>
<div id="feed">Loading...</div>
ちょっと難点なのは、
毎回フィードの読み込みを行うので、表示がもたつきます。
なので、
1時間ごとくらいにするために「分」のminと「秒」のsecは省いた方がいいかもしれません。
参考ページ
トラックバック(0)
トラックバックURL:
Javascriptで宅急便各社の荷物追跡サービスの検索結果を表示するフォームを作ってみた
- 検索窓に伝票番号（お問い合せ番号）を入力
- 宅急便会社を選択
- ボタンを押す
- 新規ウィンドウに検索結果が表示される
というフォームをJavascriptを使用して作ってみた。
よく使うのは
- クロネコヤマト
- 佐川急便
- エクスパック
なので、この3つを検索できるようにしてみました。
nimotsu.html（http://hoshiya.biz/nimotsu_search/nimotsu.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>荷物追跡</title>
</head>
<body>
<script type="text/javascript">
<!--
function data_in(){
//フォームデータ入力用変数
var denpyou;
var kaisha;
var url;
url = new Array();
//クロネコヤマト
url[1] = "http://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id=";
//佐川急便
url[2] = "http://k2k.sagawa-exp.co.jp/p/web/okurijosearch.do?okurijoNo=";
//日本郵便（ゆうパック・EXPACK・ポスパケット）
url[3] = "http://tracking.post.japanpost.jp/service/singleSearch.do?org.apache.struts.taglib.html.TOKEN=&searchKind=S002&locale=ja&SVID=&reqCodeNo1=";
//フォームデータを受け取る
if(document.form1.denpyou.value==""){
alert("伝票番号が入力されていません。");
}
else{
denpyou=document.form1.denpyou.value;
//ラジオボタンの値を受け取る
for (i=0;i<document.form1.kaisha.length;i++){
if (document.form1.kaisha[i].checked)
kaisha = document.form1.kaisha[i].value;
}
url = url[kaisha];
//新しいウィンドウで検索結果を表示
window.open(url+denpyou);
}
}
/* 半角数字チェック */
function TextCheck() {
var str = document.form1.denpyou.value;
if( str.match( /[^0-9.-]+/ ) ) {
alert("半角数字、半角ハイフンで入力して下さい。");
return 1;
}
return 0;
}
-->
</script>
<form id="form1" name="form1" method="post" action="">
<br />
<label for="denpyou">伝票番号
<input name="denpyou" type="text" id="denpyou" value="" onblur="TextCheck();" />
</label>
（半角数字、半角ハイフン） <br />
<label for="kaisha">会社選択
<input name="kaisha" type="radio" id="kaisha" value="1" checked />
ヤマト運輸
<input name="kaisha" type="radio" id="kaisha" value="2" />
佐川急便
<input name="kaisha" type="radio" id="kaisha" value="3" />
ゆうパック･EXPACK</label>
<br />
<input name="button" type="button" id="button" value="検索結果ページを開く" onClick="data_in();" />
</form>
</body>
</html>
実際のフォーム↓↓
PHP版は以下をご参照ください。
PHPで荷物追跡サービスの検索フォームを作ってみる。
http://hoshiya.biz/2009/09/php-1.html
トラックバック(0)
トラックバックURL:
前回のページ「
Warning: Missing argument 2 for getTitleLink(), called in /home/sites/heteml/users158/m/h/0/mh0723/web/hoshiya.biz/blog/web/javascript/index.php on line 2357 and defined in /home/sites/heteml/users158/m/h/0/mh0723/web/hoshiya.biz/include/function/function.php on line 104
Google AJAX Feed APIを使ってアメーバブログの「PR:」を除く記事一覧を表示するJavascript｜星屋工作室 hoshiya.biz
」で紹介したスクリプトを一部変更してみた。
変更の主な内容は、
表示するリストを作成する際に、HTMLタグを変数に入れるように改造しました。（赤文字部分）
前回はXMLの要素を操作してリストを作成するようにしていましたが、
XMLの操作は苦手なのでHTMLのソースを変数に格納するようにしました。
<script type="text/javascript">
google.load("feeds", "1");
function initialize()
{
//RSSフィードの取得
var feed = new google.feeds.Feed("●●読み込みたいフィードのURL●●");
//取得するフィード数
feed.setNumEntries(5)
//実際に読む込む
feed.load(function(result)
{
//読み込めたか判別
if (!result.error)
{
//表示部分を選択
var container = document.getElementById("feed");
//変数の初期化
var list = "";
//Feedの処理
list = '<ul>';
for (var i = 0; i < result.feed.entries.length; i++)
{
//Feedを一つ抽出
var entry = result.feed.entries[i];
if(entry.title.match(/^PR:/)) {
//「PR:」から始まるものがあれば何もしない
}
else{
list += '<li>';
list += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
var strdate = createDateString(entry.publishedDate);
list += '（' + strdate + '）';
list += '</li>';
}
}
list += '</ul>';
container.innerHTML = list;
}
});
}
//日付の表示方法を変更
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
//var strdate = pyear + "年" + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分" + psecond + "秒";
var strdate = pyear + "-" + pmonth + "-" + pday ;
return strdate;
}
google.setOnLoadCallback(initialize);
</script>
<!--表示結果表示する部分-->
<hr size="1" />
<div id="feed"></div>
<hr size="1" />
<!--表示結果表示する部分-->
↓↓実際にうちの社長のアメブロのフィードを読み込んで表示した例↓↓
前回同様に
RSSに「PR:」が含まれていなければ新着5件を表示しますが、
新着5件中1件に「PR:」が含まれていた場合は
フィード自体から削除して消すのではなく、省略というか、スキップしているだけなので
表示が4件になります。
この辺りは改善が必要ですが、また今度にします。
参考にしたサイト
2009/09/23追記
上記を更に改造↓
トラックバック(0)
トラックバックURL:
MovableTypeの標準機能のmt-search.cgiによる検索ですが、
すこぶる遅いので、他の検索方法がないか探してみた。
結構、この話題は多いみたいで、
すぐ見つかった。
参考ページ
↓↓上記を参考に作った検索フォーム↓↓（実際に検索できます。）
検索がびっくりするほど速いです。
これを作った暴想さんに感謝です。
トラックバック(0)
トラックバックURL:
他のサイトで見たことがあると思いますが、
検索に使用したキーワードをハイライトで見やすくする方法です。
- Javascript「se_hilite.js」をダウンロードする
- 自分のサイトに「se_hilite.js」をアップロードする
- スタイルシート（CSS)にハイライトの色を決めて一部追加をする
- ハイライト表示をしたいページにタグを挿入する
以上のステップで完了。
詳細は以下の参考ページを参照してください。
参考にしたページ
JavaScriptで検索ワードをハイライトする
http://www.magicvox.net/archive/2007/04122238/
トラックバック(0)
トラックバックURL:
先日、「Google AJAX Feed APIを使って外部のRSSを読み最近の記事リストを表示するJavascript」を使用してアメーバブログのRSSを読み込み、
新着5件の一覧表示を行いましたが、
アメーバブログ（アメブロ）のRSSは広告（PR:○○～）というのが自動的に入り、
これがすごく邪魔で困っていました。
そこで今回はif文を加えて「PR:」から始まるフィードは無視（除く）することにしました。
スクリプト
<script src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize()
{
//RSSフィードの取得
var feed = new google.feeds.Feed("●●読み込みたいフィードのURL");
//取得するフィード数
feed.setNumEntries(5)
//実際に読む込む
feed.load(function(result)
{
//読み込めたか判別
if (!result.error)
{
//表示部分を選択
var container = document.getElementById("feed");
//変数の初期化
var list = "";
//Feedの処理
for (var i = 0; i < result.feed.entries.length; i++)
{
//Feedを一つ抽出
var entry = result.feed.entries[i];
if(entry.title.match(/^PR:/)) {
//「PR:」から始まるものがあれば何もしない
}
else{
var div = document.createElement("li");
var a = document.createElement("a");
var strdate = createDateString(entry.publishedDate);
a.href = entry.link;
var list = entry.title + " (" + strdate + ")" ;
a.appendChild(document.createTextNode(list));
div.appendChild(a);
container.appendChild(div);
}
}
}
});
}
//日付の表示方法を変更
function createDateString(publishedDate)
{
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
//var strdate = pyear + "年" + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分" + psecond + "秒";
var strdate = pyear + "-" + pmonth + "-" + pday ;
return strdate;
}
google.setOnLoadCallback(initialize);
</script>
<!--表示結果表示する部分-->
<div id="feed"></div>
<!--表示結果表示する部分-->
ということで、うちの社長のアメブロのフィードを読み込んで
「PR:」を除いた新着情報を表示してみた
↓↓実行結果↓↓
ただし、
RSSに「PR:」が含まれていなければ新着5件を表示しますが、
新着5件中1件に「PR:」が含まれていた場合は
フィード自体から削除して消すのではなく、省略というか、スキップしているだけなので
表示が4件になってしまいます。
それを補うスクリプトは今度チャレンジします。
2009/09/23追記
上記を更に改造↓
Google AJAX Feed APIで最新の記事一覧を表示する。
http://hoshiya.biz/2009/09/google-ajax-feed-api-1.html
フィード（RSS2.0）を読み込むスクリプト
<script src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize()
{
//RSSフィードの取得
var feed = new google.feeds.Feed("●●読み込みたいRSS2.0のURL●●");
//取得するフィード数
feed.setNumEntries(5)
//実際に読む込む
feed.load(function(result)
{
//読み込めたか判別
if (!result.error)
{
//表示部分を選択
var container = document.getElementById("feed");
//変数の初期化
var list = "";
//Feedの処理
for (var i = 0; i < result.feed.entries.length; i++)
{
//Feedを一つ抽出
var entry = result.feed.entries[i];
var div = document.createElement("li");
var a = document.createElement("a");
var strdate = createDateString(entry.publishedDate);
a.href = entry.link;
var list = entry.title + " (" + strdate + ")" ;
a.appendChild(document.createTextNode(list));
div.appendChild(a);
container.appendChild(div);
}
}
});
}
//日付の表示方法を変更
function createDateString(publishedDate)
{
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
//var strdate = pyear + "年" + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分" + psecond + "秒";
var strdate = pyear + "-" + pmonth + "-" + pday ;
return strdate;
}
google.setOnLoadCallback(initialize);
</script>
<!--表示結果表示する部分-->
<div id="feed"></div>
<!--表示結果表示する部分-->
ということで、うちの社長ブログのフィードを読んでみた。
↓↓結果↓↓
2009/06/30追記
アメーバブログ（アメブロ）等のフィードでPRなどが入ってしまい、
省略して表示をさせたい場合は「Google AJAX Feed APIを使ってアメーバブログの「PR:」を除く記事一覧を表示するJavascript」をご参照ください。
2009/09/23追記
上記を更に改造↓
Google AJAX Feed APIで最新の記事一覧を表示する。
http://hoshiya.biz/2009/09/google-ajax-feed-api-1.html
トラックバック(0)
トラックバックURL:
Googleブログ検索でこのサイトhttp://hoshiya.bizを検索。
↓実際に検索↓
http://blogsearch.google.co.jp/blogsearch?hl=ja&ie=UTF-8&q=hoshiya.biz&lr=lang_ja
そして、そのXMLを読み込みリストとして表示するスクリプト。
残念ながら現時点では被リンクが少なすぎて１件しかない...。
↓実行結果↓
スクリプト
<script type="text/javascript" src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●"></script>
<script type="text/javascript">
google.load("feeds", "1"); function initialize() {
var url = "●●検索対象のURL●●";
var num = 100;
// Get Linkbacks from Google Blog Search
var feed = new google.feeds.Feed("http://blogsearch.google.co.jp/blogsearch_feeds?hl=ja&q=link%3A"+encodeURIComponent(url)+"&output=rss&num="+num+"&lr=lang_ja&ie=utf-8");
feed.setNumEntries(num);
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.load(function(result) {
if (!result.error) {
var items = result.xmlDocument.getElementsByTagName('item');
var item = null;
var entry = null;
var html = '<ul id="linkback_list">\n';
for (var i = 0; i < items.length; i++) {
entry = [];
// make simple array from item nodes
// You can access values like "entry['key']"
for ( var j=0; j<items[i].childNodes.length; j++ ) {
item = items[i].childNodes[j];
entry[item.nodeName] = (item.textContent)?item.textContent:item.text;
}
html += '<li class="linkback_entries">';
html += '<a class="linkback_links" href="'+entry['link']+'" rel>'+entry['title']+'</a>';
html += '<span class="linkback_blogs">('+entry['dc:publisher']+')</sapn>';
html += '<span class="linkback_dates">'+entry['dc:date'].substring(0,10)+'</sapn>';
html += '</li>\n';
}
html += '</ul>\n';
document.getElementById("linkbacks").innerHTML = html;
}
});
}
google.setOnLoadCallback(initialize);
</script>
<!--結果を表示する部分-->
<hr size="1" />
<div id="linkbacks">loading</div>
<hr size="1" />
<!--結果を表示する部分-->
参考にしたページ
Trackbackをやめて、Google AJAX Feed APIを使って被リンクを表示
http://creazy.net/2009/02/stop_tb_and_start_linkbacks_by_google_ajax_feed_api.html
トラックバック(0)
トラックバックURL:
変数配列に代入されたHTMLソースを
タイマーで一定時間ごとにランダムに表示するスクリプト。
MozShotと併せて、サイトのサムネイルをランダムに表示する例。
表示された画像をクリックすると指定のURLにジャンプできます。
変数配列にはタグごと入れるので、
特にアフィリエイトのバナータグなどは会社によって、
タグの仕様が異なる場合に便利です。
<script type="text/javascript">
src = new Array();
src[0]='<a href="http://www.google.com" target="_blank"><img src="http://mozshot.nemui.org/shot/large?http://www.google.com" alt="google" /></a>';
src[1]='<a href="http://www.yahoo.co.jp" target="_blank"><img src="http://mozshot.nemui.org/shot/large?http://www.yahoo.co.jp" alt="yahoo" /></a>';
src[2]='<a href="http://jp.msn.com" target="_blank"><img src="http://mozshot.nemui.org/shot/large?http://jp.msn.com/" alt="msn" /></a>';
window.onload=chX;
function chX(){
i=Math.floor(Math.random()*src.length);
document.getElementById("chimg").innerHTML=src[i];
setTimeout("chX()",1000);
}
</script>
<div id="chimg"></div>
↓↓実際に表示したところ
トラックバック(0)
トラックバックURL:
変数配列に格納された文字「ルパン三世」を
数秒ごとのタイマーによって表示を変更するスクリプト。
<script type="text/javascript">
tag = new Array();
tag[0]='ル';
tag[1]='パ';
tag[2]='ン';
tag[3]='三';
tag[4]='世';
window.onload=chT;
function chT(){
i=Math.floor(Math.random()*tag.length);
document.getElementById("chTxt").innerHTML=tag[i];
setTimeout("chT()",1000);
}
</script>
<div id="chTxt"></div>
↓↓実際に表示してみたところ
この方法で、アフィリエイトのタグやバナーの画像、写真などに応用ができます。
「Javascriptで数秒ごとにHTMLソースをランダムに変更。」をご参照ください。
トラックバック(0)
トラックバックURL:
ページにアクセスするごとに、
ランダムに選択されたアフィリエイトのバナーを表示するスクリプト。
Javascriptは初心者ですが、とりあえずは表示に成功。
「banner.js」を以下の内容でルートに作成。
（例：http://www.example.com/banner.js）
tag = new Array();
tag[0]='<a href="http://www.example.com/" target="_blank"><img src="http://www.example.com/banner1.jpg" alt="バナー1" border="0" /></a>';
tag[1]='<a href="http://www.example.com/" target="_blank"><img src="http://www.example.com/banner2.jpg" alt="バナー2" border="0" /></a>';
tag[2]='上記同様にバナーのタグを入れる';
i = Math.floor(Math.random()*tag.length);
document.write(tag[i]);
HTMLファイルのバナーを表示したい箇所に以下のコードを記述。
（例えば、http://www.example.com/index.htmlの場合）
<script type="text/javascript" src="http://www.example.com/banner.js" charset="utf-8"></script>
こでだけでOK。
今後の課題は、一定時間ごとに表示したバナーをランダムに変更できるようにしたいと思います。
［今回参考にしたページ］
バナーやアフィリエイトを、jsでランダムに表示させる | Java script、Ajax | 青森県八戸市 ホームページ制作・作成 studio md
http://studiomd.jp/archives/homepage/java-script/randombanner.php
PHPで同じことを行う方法は以下を参照
