ダリの雑記：WEBプログラム版

Javascriptでサブウィンドウをフルスクリーンで表示する場合は以下のように記述します。

window.open("url", "subWindow", "fullscreen=yes");

３つ目の引数にfullscreen=yesを入れればOKです。

ただし、このfullscreenはIEでしか使用できません。（サンプル）
上のサンプルを試していただければわかりますが、Firefoxなどでは普通のサイズで表示されてしまいます。

そこで、ディスプレイのサイズを取得し、そのサイズで開くという風にします。

var sw = screen.width;
var sh = screen.height;
window.open("url", "subWindow", "left=0, top=0, width="+sw+", height="+sh);

ディスプレイサイズの取得方法はこちらのサイトを参考にしました。

ディスプレイ（画面）の横幅・高さを得る - JavaScript TIPSふぁくとりー

これで、FirefoxやSafariでもフルスクリーンの大きさで表示してくれます。（サンプル）

Flashとjavascriptを利用して、複数のファイルを一気にアップロードすることができる「SWFUpload」

とりあえず動けばいいとの考えのもと、設置方法の手順を記述します。

SWFUploadをダウンロードする。

SWFUploadサイトからファイルをダウンロードしてください。

（ダウンロードページはこちらになります。）

ダウンロードページにはいろいろとファイルがリストされていますが、
SWFUpload v××× Samples.zip
をダウンロードしてください。（×××はバージョンナンバーです。ちなみに自分がダウンロードしたファイルはv2.2.0.1でした。）

サーバに設置する。

ダウンロードしたファイルを解凍してください。「SWFUpload v××× Samples」というフォルダができます。このままでは長いので適当にフォルダ名を変えてください。ここでは「swfupload」と名前を変えたことにします。

これをフォルダごと、サーバにアップロードしてください。

デモを実行する。

ブラウザにて、「http://○○○/swfupload/demos」にアクセスしてください。（○○○はドメイン名です。）デモ一覧が表示されます。

ここでは一番シンプルな「Simple Upload Demo」を変更していきます。

「Simple Upload Demo」を開くと以下のような画面になります。

この画面で「Hello」ボタンを押すと、アップロードするファイルを選択するウィンドウが開きます。このウィンドウで複数ファイルを選択できるので、ファイルを選択してください。

選択後、「開く」ボタンを押すと、すぐにアップロードが始まります。

アップロードの進行状況は「Upload Quere」のところで確認できます。

すべてCompleateになったらアップロード完了です。

が！

どこ探してもアップロードされたはずの画像が見つからない！

それもそのはず。

デモではあくまで動作が見れるだけあって、実際にアップロードされているわけではないからです。

ではアップロードするためにはどうすればよいのか。

「upload.php」を修正する。

「swfupload/demos/simpledemo」フォルダの中にある「upload.php」をテキストエディタで開いてください。

現時点では「upload.php」とは名ばかりのプログラムです。

このプログラムに以下の記述を追加してください。

exit(0);の前に

$upload_path = "アップロード先のパス";

// Handle the upload
if (!move_uploaded_file($_FILES["Filedata"]["tmp_name"],
    $upload_path . $_FILES["Filedata"]["name"])) {
    header("HTTP/1.0 500 Internal Server Error");
}

なお、このプログラムは「cronos feed 2.0::SWFUploadを使ってみる」からいただきました。

$upload_path = "アップロード先のパス";　はアップロード先のフォルダを設定しています。ここで記述したパスと同じ場所にアップロードフォルダを作成してください。（パーミッションに注意）

これで無事複数アップロードするようになりました。

どこで設定するのか、よく忘れてしまうのでメモ。

設置しただけでは、まともにパスが通っていないため、「イメージプロパティ」ウィンドウの「サーバーブラウザー」ボタンを押すとエラーが出てしまいます。

パスを通すためには、まず「editor/filemanager/connectors/php/config.php」を開いてください。

その中にある３か所を編集します。

1. $Config['Enabled']　・・・　trueにしてください。
   例）$Config['Enabled'] = true;
2. $Config['UserFilesPath']　・・・　アップロードフォルダのURL
   例）$Config['UserFilesPath'] = "https://nandani.sakura.ne.jp/updir/";
3. $Config['UserFilesAbsolutePath']　・・・　アップロードフォルダの物理パス
   例）$Config['UserFilesAbsolutePath'] = "/var/www/updir/";

※ちなみにFCKEditorのバージョンによっては、config.phpがある階層が違うかもしれません。

javascriptで日付の比較をするとき、以下のように記述するとします。

if("2010/12/31" > "2010/12/15"){

～処理～

}

このような比較方法でも、多くのブラウザでは正常に動作してくれます。

しかし、予想通りというかIE6以下では動作せずエラーを吐いてくれます。

この腐ったブラウザIE6で対応させるには、一度time（※）にする必要があります。

PHPでは「strtotime」という非常に便利な関数があるのですが、javascriptでは残念ながらそれに該当する関数は無いようです。

しかし、Googleで調べていたら、やはりそのような関数を作ってくださっている方がいました。

Javascript strtotime (php.jsさんのサイト)

これで

strtotime("2010/12/31");

という風に使用すればtimeで出力してくれます。

※Unix エポック（1970 年 1 月 1 日 00:00:00 GMT）からの通算秒

mixiチェックの設置方法の７．まではやり方が同じです。

１．イイネ！ボタンを発行する

「登録サービス詳細」になると、新規に追加された「イイネ！ボタンHTMLタグ発行」というフォームが表示されます。

「タグを取得」ボタンを押すと、すぐ下の「タグ」と書かれたテキストフィールドにiframeタグが表示されます。「プロフィール画像表示」にチェックを入れたままだと、かなりボタン領域が大きくなってしまいますので、不要ならばチェックを外しておいてください。

２．タグを改良する

出力されるタグは以下のようになります。

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fwww.nandani.sakura.ne.jp%2F&service_key=識別キー&show_faces=false&width=140"></iframe>

上記のオレンジで記述された部分は、ページのURLが入るようにしなくてはなりません。

※ただし、URLはURLエンコードする必要があります。

wordpressだと以下のようになります。

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=<?php echo urlencode(get_permalink()); ?>&service_key=識別キー&show_faces=false&width=140"></iframe>

 さらに赤で記述されている「識別キー」の部分には、１．の「登録サービス詳細」画面に載っている「識別キー」を入れてください。

結果はこのページの下の方（mixiチェックボタンの左横）にボタンがあるので確かめてみてください。

いやー、なんというか、・・・挙動がまんまですねｗ
ここまで似てていいんでしょうか^^;

自分のサイトにGoogleサイト内検索フォームを設置できる「Googleカスタム検索」
この検索フォームの仕様が変わったようです。

Googleカスタム検索はこちらから設定を行えます。↓

http://www.google.co.jp/cse/

設定を行うと、以下のようなコードが出力されます。（以下のコードはこのサイト用に設定したコードなので転用しても意味がありません。あしからず。）

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
   google.load('search', '1', {language : 'ja'});
   google.setOnLoadCallback(function() {
      var customSearchControl = new google.search.CustomSearchControl('006668502882474005811:hojvzo2b0qm');
      customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
      customSearchControl.draw('cse');
   }, true);
</script>

で、張り付けた結果がコレ↓
     

検索するとフォームのすぐ下に結果がリストされるようになりました。

う～ん・・・正直今まで通りで十分なんだけどなぁ。

という人は、「検索エンジンID」だけ拝借して今までどおりのコードに適応。
「検索エンジンID」というのは上のコードの赤文字で記述されている部分です（設定ごとにこのIDは変わります。）。このＩＤを以下のコードの赤文字の部分に記述してください。

<form action="http://www.google.com/cse" id="cse-search-box" name="cse-search-box">
   <input type="hidden" name="cx" value="検索エンジンID" />
   <input type="hidden" name="ie" value="UTF-8" />
   <input type="text" name="q" size="21" value="" />
   <input type="submit" name="sa" value="検索" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=ja"></script>

結果↓

メモ

画像のロールオーバーは、Javascriptを使うと楽です。特にCSS HappyLifeさんのサイトの

smartRollover.js

なんかは非常に簡単にロールオーバーを実現できます。

ただ画像のロールオーバーといっても、明度が上がる程度のものであれば、わざわざ２枚用意するのも面倒です。

そういう場合はスタイルシートで解決しましょう。

１．imgタグを囲んだaタグに「class="opacity"」を記述します。

<a href="#"  class="opacity"><img src="hoge.jpg" /></a>

２．スタイルシートに以下を記述します

a.opacity{
   background-color:#FFF;
   display:inline-block;
}

a.opacity:hover img,
a.opacity:active img{
    -moz-opacity:0.7;
   opacity:0.7;
   filter:alpha(opacity=70);
}

要するに、画像の透明度を上げて、白の背景色と混ぜ合わせれば明るく見えるというわけですね。

■サンプル（明るく：background-color:#FFF;）

反対に暗く見せたい場合は、背景色を暗くすれば良いので、「a.opacity」の「background-color」を「#000」にしてください。

■サンプル（暗く：background-color:#000;）

その他の色についても、背景色の設定次第で様々なバリエーションが可能です。

■サンプル（赤：background-color:#F00;）

■サンプル（緑：background-color:#0F0;）

■サンプル（青：background-color:#00F;）

メモ

別のスクリプトファイルですでにwindow.onloadを使用している場合は、以下のように対処しましよう。

if (window.attachEvent) { //IE用
    window.attachEvent("onload", hogeFunc);
}else{
    window.addEventListener('load', hogeFunc, false);
}

ちなみに

<img src="hoge.gif" onload="hogeFunc()" />

という方法もありますが、うまくいかないことも多々あります。主にIEで。
解決方法についてはいろいろなサイトに載っていますのでご参照ください。

• IMG要素のonloadイベントがIE系でうまくいかないときの対処
• GIFアニメをロードするIMGでonload使う時の注意

などなど。

フォトギャラリーのように、時間経過とともに画像が変わっていく処理をする場合、新しい画像が表示されるたびに画像を読み込むようになっています。（IEのステータスバーを見ているとよくわかります。）

１ループすると以後は読み込む動作をしなくなるのですが、できればページを開いたときにあらかじめすべての画像を読み込んでおきたい。

ということで、こんなサイトを見つけました。

複数の画像をあらかじめ読み込む（プレロード）

photo_array = new Array("img01.jpg", "img02.jpg", "img03.jpg", "img04.jpg", "img05.jpg");

pl_file = new Array();

for(i=0;i<photo_arrray.length;i++){
    pl_file[i] = new Image();
    pl_file[i].src="photo/"+photo_array[i];
}

• photo_array：読み込む予定の画像ファイルすべてを配列に格納
• pl_file[i]=new Image()：イメージオブジェクト生成（画像分用意するため、あらかじめ配列にしておく）
• pl_file[i].src：キャッシュに画像データを読み込む

という風な処理を行うと、事前に画像を読み込んでおくことができます。

2011.05.14：最新版version1.4bができました。

2011.03.22：バグが見つかりました(詳細を見る)

今回のバージョンでは住所から座標を取得できるようにしました。（まずはサンプル）

ちなみに改良したプログラムはv1.2の改良版のため、バルーン複数表示はできなくなっています。

手順

1.bodyタグに、バルーン用情報を記述します。複数なんでちょっと長くなりますが４件ほどデータを入れます。（以下例）

<ul id="gmap_list">
    <li>
        <div class='gmap_title'><a name="gmap_title">アロチ本家丸高</a></div>
        <div class='gmap_photo'><img src="img/marutaka.jpg" width="120" alt="京橋幸太郎" /></div>
        <div class='gmap_info'>
            <span class='gmap_address'>和歌山県和歌山市友田町2-50</span><br />
            TEL：073-432-3313<br />
            営業時間：17:30～3:00<br />
            定休日：日曜
        </div>
        <div class='clear'></div>
        <div class='gmap_description'>
            醤油でひと煮立ちさせ、一晩寝かせた豚骨でとったスープはコクが生かされクセになる味
        </div>
    </li>
    <li>
        <div class='gmap_title'><a name="gmap_title">井出商店</a></div>
        <div class='gmap_photo'><img src="img/yamatame.jpg" width="120" alt="山為食堂" /></div>
        <div class='gmap_info'>
            <span class='gmap_address'>和歌山県和歌山市田中町4-84</span><br />
            TEL：073-424-1689<br />
            営業時間：11:30～23:30<br />
            定休日：木曜（年始休）
        </div>
        <div class='clear'></div>
        <div class='gmap_description'>
            和歌山ラーメンの名を全国に知らしめたのがこちらの店。
        </div>
    </li>
    <li>
        <div class='gmap_title'><a name="gmap_title">まるイ</a></div>
        <div class='gmap_photo'><img src="img/marui.jpg" width="120" alt="まるイ" /></div>
        <div class='gmap_info'>
            <span class='gmap_address'>和歌山県和歌山市中之島2323</span><br />
            TEL：073-427-2662<br />
            営業時間：平日19:00～翌3:00/土19:00～翌4:00<br />
            定休日：日曜
        </div>
        <div class='clear'></div>
        <div class='gmap_description'>
            全国から集まる麺ファンを虜にするこんもりと盛られたネギの山！
        </div>
    </li>
    <li>
        <div class='gmap_title'><a name="gmap_title">ラグマン</a></div>
        <div class='gmap_photo'><img src="img/raguman.jpg" width="120" alt="ラグマン" /></div>
        <div class='gmap_info'>
            <span class='gmap_address'>和歌山県和歌山市黒田258-7 玉置マンション1F</span><br />
            TEL：073-475-1200<br />
            営業時間：12:00～14:00/17:30～23:30 <br />
            定休日：水曜日
        </div>
        <div class='clear'></div>
        <div class='gmap_description'>
            “らぐまん”ならではのオリジナルラーメンは、34種類！レゲエが流れるログハウス作りのオシャレなお店。
        </div>
    </li>
</ul>
   
<div id="map" style="width:500px;height:500px;"></div>
<div class='clear'></div>

※それのぞれに情報は必ずリスト形式にしてください。

ここで必要なものは

• id='gmap_list'：このIDを元にバルーン、マーカー用データを取得します。必ず「ul」または「ol」につけてください。
• class="gmap_title"＋aタグ：タイトルをクリックしたときに該当するマーカーの吹き出しを表示します。【追記】
• class="gmap_address"：このclass名を元に住所を取得し、座標に変換します。
• id="map"：ここにマップが表示されます。必ずwidthとheightを指定してください。

となっています。

もちろんこれまでのバージョン同様、座標データからマーカーを表示することもできます。その場合は前バージョンと同じく「class="gmap_coord"」を含んだタグを追記してください。

<li>
    <div class='gmap_title'><a name='gmap_title'>アロチ本家丸高</a></div>
    <div class='gmap_photo'><img src='img/marutaka.jpg' width='120' alt='京橋幸太郎' /></div>
    <div class='gmap_info'>
        和歌山県和歌山市友田町2-50<br />
        TEL：073-432-3313<br />
        営業時間：17:30～3:00<br />
        定休日：日曜
    </div>
    <div class='clear'></div>
    <div class='gmap_description'>
        醤油でひと煮立ちさせ、一晩寝かせた豚骨でとったスープはコクが生かされクセになる味
    </div>
    <div class='gmap_coord'>
        34.2326948,135.1848098
    </div>
</li>

class="gmap_coord"の中の座標は

マーカー緯度,マーカー経度

となっています。（座標についてはこちらから手動で取得できます）

※ここで注意点。

マーカー座標を設定する際、以下のパターンが考えられます。

1. すべて住所から座標に変換する場合。（gmap_addressのみ）
2. すべて座標を「gmap_coord」に用意しておく場合。（gmap_coordのみ）
3. 住所から変換するものと、座標が用意されているものが混ざっている場合（gmap_address＋gmap_coord）

1.の方法では、各項目（<li>内部の記述）の中に「gmap_address」を設定すればOKです。
（この場合「gmap_coord」は必要ありません。）サンプル

2.の方法についても、各項目の中に「gmap_coord」を設定すれば問題ありません。
（この場合「gmap_address」は必要ありません。）サンプル

問題は3の方法について。
一度でも住所から座標を取得する項目がある場合は、すべての項目に「class="gmap_address"」を設定してください。その中で「class="gmap_coord"」がある場合は、そちらが優先されます。
つまり「class="gmap_address"」はとりあえずすべての項目の住所に設定しておき、座標に微調整を加えたいなどの項目がある場合のみ、それに「class="gmap_coord"」をつけて設定する、という感じで設定してください。
サンプル

上記のサンプルはどれも見た目変わりませんが、ソースがそれぞれ違いますので各ページのソースをご覧ください。

２．以下のスクリプトをダウンロードしてください。

自作のマップ表示用スクリプトv3版

• 自作のマップ表示用スクリプトv3版（個別版と同じものです）
  map.js（ダウンロードページへ）
• jquery.js（ダウンロードサイトへ）

３．htmlファイルのheadタグに上記のファイルとGoogleMapAPIを読み込んでください。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>

※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
※スクリプトファイルはダウンロード後、「js」フォルダに入れていると仮定して記述しています。
※ダウンロードした「map.js」は、「map_v1.3.js」のようにバージョンナンバーが付いているので、ファイル名を変更するか、上記の読み込み部分の記述を変更してください。

４．bodyタグのonloadにて、マップ表示用関数を呼び出します。

<body onload="map_all('map','gmap_list')">

map_allの引数について

• 第一引数：マップを表示するタグのID（今回はmap）
• 第二引数：バルーン情報が入っているリストタグのID（今回はgmap_list）

これで、マーカー・バルーン付きマップが表示できます。

５．スタイルを整えます。以下をheadタグ内に記述するか、別ファイルに保存してheadタグで埋め込んでください。（スタイルシートのダウンロードはこちら）

#map{
 float:left;
}

.clear{
 clear:both;
}

/*吹き出しのスタイル*/
.gmap_block{
 width:320px;
}
.gmap_block .gmap_title{
 font-size:100%;
 font-weight:bold;
 margin-bottom:10px;
}

.gmap_block .gmap_photo{
 float:right;
 margin-left:10px;
 overflow:hidden;
}

.gmap_block .gmap_info{
 font-size:75%;
}

.gmap_block .gmap_description{
 font-size:75%;
 margin-top:10px;
}
/*お店の情報（個別用）*/
#gmap_data{
 float:left;
 margin-right:10px;
 width:320px;
}

#gmap_data .gmap_photo{
 float:left;
 width:130px;
}

#gmap_data .gmap_title{
 font-size:100%;
 font-weight:bold;
 line-height:1.5em;
}

#gmap_data .gmap_info,
#gmap_data .gmap_description{
 font-size:75%;
 line-height:1.5em;
}

#gmap_data .gmap_description{
 padding-top:5px;
}

/*お店の情報（リスト用）*/
#gmap_list{
 width:300px;
 height:500px;
 overflow:scroll;
 float:left;
 margin:0px;
 padding:0px;
}

#gmap_list li{
 list-style-type:none;
 margin:0px 0px 20px 0px;
 padding:0px;
}

#gmap_list .gmap_photo{
 float:left;
 width:130px;
}

#gmap_list .gmap_title{
 font-size:100%;
 font-weight:bold;
 line-height:1.5em;
}

#gmap_list .gmap_title a{
 color:#0000FF;
 text-decoration: underline;
 cursor:pointer;
}

#gmap_list .gmap_info,
#gmap_list .gmap_description{
 font-size:75%;
 line-height:1.5em;
}

#gmap_list .gmap_description{
 padding-top:5px;
}

.gmap_coord{
 display:none;
}

サンプル [新しいウィンドウで開く]

以上です。

バグなどありましたらご連絡いただけるとありがたいです。

【追記】

class="gmap_title"を忘れると、エラー警告が出ることに気付いたので、付け加えました。

【追記：2011/03/22】

10件以上住所による座標取得を行おうとすると、途中でマーカーが表示されなくなるというバグが見つかりました。
現段階でこのバグの修正は行われておりません。
このスクリプトを利用されている方は申し訳ございませんが、10件マーカーを表示する必要がある場合は、旧来通りgmap_coordに座標を記述する方式を取ってください。
なお、座標の取得については
https://nandani.sakura.ne.jp/jstest/googlemapapi/map_set.html
のページをご利用ください。

【追記：2011/03/26】

マーカー数が少ないと、ズームが寄り過ぎる問題点について解決したスクリプトをアップロードしました（map_v1.3.1.js）
ズームの最大値の調整は、map_v1.3.1.jsの15行目にある「zoom_max」の値を調整してください。
スクリプトのダウンロードページへ。

【追記：2011/05/14】

10件以上住所による座標取得を行おうとすると、途中でマーカーが表示されなくなるという問題点を解決したバージョンをアップロードしました。

詳しくはこちらのページをご覧ください。

GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版） version1.4b

今回参考にさせていただいたサイト

Google Maps API Version3 日本語ドキュメント（非公式）：該当記事「ジオコーディング」