Skip to content


lightbox 写真と一緒に地図も表示させる。

最近、lightboxの仕組みを勉強中です。

ソースコードをいじったりしてます。

lightboxのカスタムではCSSをいじってるのはよく見かけるんですが、

javascriptのコード自体をいじってるのはあまり見かけないので

その成果がこちら。あまり実用性はないかもしれないですが。

下の画像をクリックしてみてください。

天橋立

追加したコードは数10行です。

lightbox.jsにコードを追加しちゃってるので、できればまったく別ファイルでそれを読み込むだけって感じにしたいと思ってます。

ソースの解説等はその後ということで。

ご意見募集中です。ぜひコメントを!!!

Posted in googlemap, javascript. Tagged with , , .

YAHOO UI (YUI) ドラッグ&ドロップ

Yahoo UI を使ってドラッグ&ドロップを実装します。

ほんとに簡単なコードで実装できます。Yahoo UI恐るべし。

Yahoo UI ダウンロードはこちら

今回使うファイルはダウンロードしたyuiの

build/fonts/fonts-min.css
build/yahoo-dom-event/yahoo-dom-event.js
build/dragdrop/dragdrop-min.js

以上の3つです。

サーバーにあげたりするときはbuild/ だけで10MBもあるので必要なファイルのみアップロードします。

サンプルはこちら

コードをのっけます。

htmlソース



Sample | Yahoo UI ドラッグ&ドロップ

area1
ドラッグ&ドロップできます。
area2
ドラッグ&ドロップできます。
area3
ドラッグ&ドロップできます。

注意点

  1. Yahoo UIを使いコントロールする部分は<div class=”yui-skin-sam”></div>でくくる。(<body class=”yui-skin-sam”)>としとけば問題ないです。どうやらくくらないとスタイルシートが適応されない。
    すいません。今回のサンプルではYahooUIの持っているスタイルを適応させる場所がないのでこの記述はいらないです。
    fonts-min.cssをインクルードする必要もないです。
  2. 今回サンプルを作る時に躓いたんですが、
    <script type=”text/javascript” src=”./js/build/yahoo-dom-event/yahoo-dom-event.js”></script>
    <script type=”text/javascript” src=”./js/build/dragdrop/dragdrop-min.js”></script>
    この部分、上下をかえてdragdrop-min.jsを最初に読み込むとうまく動きませんでした。

javascriptソース

// JavaScript Document

YAHOO.namespace(”sample”);

var dd1, dd2, dd3;

YAHOO.sample.init = function() {
//area1
dd1 = new YAHOO.util.DD(”area1″);
//area2
dd2 = new YAHOO.util.DD(”area2″);
//area2
dd3 = new YAHOO.util.DD(”area3″);
}

YAHOO.util.Event.onDOMReady(YAHOO.sample.init);

これだけの記述でドラッグ&ドロップが実装できる。

IDを指定するだけでいいので既存のサイトにもすぐ埋め込めるのでは?

Posted in DOM, Yahoo UI, html, javascript. Tagged with , .

javascript + php + mysql ユーザーIDが登録済みかどうかチェックする。

ユーザーIDが登録済みかどうかチェックする。

uidの確認ボタンでデータベースに登録されているかチェックします。

未登録の場合登録ボタンが有効になり、登録済みの場合登録ボタンは無効になります。

このプログラムだと登録ボタンを押した後にもう一度uidが登録済みでないかどうかチェックしないとだめです。

一度未登録のuidを確認した後にuid入力欄に変更を加えると

変更後のuidが未登録かどうかチェックしていないのに登録ボタンが有効のままです。

サンプルURL

http://kimson.name/memo/uidCheck/

——————————————————————————————————————–

=======================================

データベース(ユーザーIDを格納している)の内容。

sample_uid_check テーブル

=======================================

+——+
| uid    |
+——+
| nic    |
| kim   |
| uid    |
| uid2 |
+——+

=========================================

htmlソース index.html

=========================================


Sample ユーザーIDが登録済みかどうかチェック

uid:

半角英数(2文字以上)で入力してください。

============================================

javascriptソース ./js/checkUid.js

============================================

// JavaScript Document

function checkUid(){
document.getElementById(”form1″).submit.disabled = true;
//formの内容を取得
var tmp_uid = document.getElementById(”form1″).uid.value;

//問い合わせ
var request = creatHttpReq();

request.open(”GET”, “./lib/checkUid.php?uid=”+tmp_uid);

request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200){
if(request.responseText.match(”OK”)){
document.getElementById(”form1″).submit.disabled = false;
}
}
}
request.send(”");
}

//クロスブラウザ用XlHttpRequestオブジェクト生成関数
function creatHttpReq(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXOvject){
try{
return new ActiveXObject(”Msxml2.XMLHTTP”);
}catch(e){
try{
return new ActiveXObject(”Microsoft.XMLHTTP”);
}catch(e2){
return null;
}
}
}else{
return null;
}
}

=================================================

phpソース ./lib/checkUid.php      ./lib/db_lib.php

=================================================

require(’db_lib.php’);

extract($_GET);
//文字数チェック
if(strlen($uid) < 2){
echo “NO”;
exit();
}
//半角英数かチェック
if(!preg_match(”/^[a-zA-Z0-9]+$/”, $str)){
echo “NO”;
exit();
}

//データベースへ接続(./lib/db_lib.php)
$db = connect_db();
//sqlインジェクション対策
$uid = mysql_real_escape_string($uid);

$sql = “select count(*) from sample_check_uid where uid = ‘”.$uid.”‘;”;

$result = mysql_query($sql)
or exit(”db error”.mysql_error());

$row = mysql_fetch_assoc($result);

if($row['count(*)'] == 0){
echo “OK”;
}else{
echo “NO”;
}
?>

//db_lib.php

function connect_db()
{
$db_name = ‘db_name’;//データベース名

$sql_id->host = ‘db_hostname’;//データベースのホスト名
$sql_id->uid = ‘db_uid’;//データベースへ接続するユーザーID
$sql_id->pass = ‘db_password’;//データベースへ接続するパスワード
//DBへ接続
$db = mysql_connect($sql_id->host, $sql_id->uid, $sql_id->pass)
or exit(”Could not connect”);
//DBの選択
mysql_select_db($db_name)
or exit(”Could not select database”);

return $db;
}

function close_db($db)
{
mysql_close($db);
}
?>

Posted in DOM, html, javascript, mysql, php. Tagged with , , .

javascript form input disabled フォームの入力を不可にする。

input タグの入力を無効にする。

サンプルURL

http://kimson.name/memo/form/

===========================================

htmlソース index.html
===========================================

Sample form

=======================================================

javascript ソース func.js

=======================================================

//登録ボタンの入力可、不可を切り替える

function swSubmit(){

if(document.getElementById(”form1″).submit.disabled){
document.getElementById(”form1″).submit.disabled = false;
}else{
document.getElementById(”form1″).submit.disabled = true;
}

}

//テキスト入力の可、不可を切り替える

function swText(){

if(document.getElementById(”form1″).textinput.disabled){
document.getElementById(”form1″).textinput.disabled = false;
}else{
document.getElementById(”form1″).textinput.disabled = true;
}
}

====================================================

Posted in html, javascript. Tagged with , , , .

DOM php XML

php:データベースのデータをXML化。(DomDocument())

//DOMを作成
$dom = new DomDocument(’1.0′);
//文字コードをUTF8に設定
$dom->encoding = “UTF-8″;
//出力XMLを整形する
$dom->formatOutput = true;
while($row = mysql_fetch_assoc($result)){

//<markerData>
$markerData = $ExportData->appendChild($dom->createElement(’markerData’));
//<timestamp>…</timestamp>
$timestamp = $markerData->appendChild($dom->createElement(’timestamp’));
$timestamp->appendChild($dom->createTextNode($row['time_stamp']));
//<lat>…</lat>
$lat = $markerData->appendChild($dom->createElement(’lat’));
$lat->appendChild($dom->createTextNode($row['lat']));
//<lon>…</lon>
$lon = $markerData->appendChild($dom->createElement(’lon’));
$lon->appendChild($dom->createTextNode($row['lon']));
//<html>…</html>
$html = $markerData->appendChild($dom->createElement(’html’));
$html->appendChild($dom->createTextNode($row['html']));
//<img>…</img>
$img = $markerData->appendChild($dom->createElement(’img’));
$img->appendChild($dom->createTextNode($row['img']));
//<public_area>…</public_area>
$public_area = $markerData->appendChild($dom->createElement(’public_area’));
$public_area->appendChild($dom->createTextNode($row['public_area']));
}

Posted in DOM, XML, mysql, php. Tagged with , , , .

javascript for in

javascript : for in (連想配列の要素を順に取り出す。)

var ctlM = new ctlMarker();

//Markerを格納するオブジェクト
function ctlMarker(){
this.marker_id = 0;
this.markerArr = new Object();
this.addMarker = ctlMarker_addMarker;
this.clearMarker = ctlMarker_clearMarker;
this.getMarkerId = ctlMarker_getMarkerId;
}
//Markerを追加するメソッド
function ctlMarker_addMarker(marker){
this.markerArr[this.marker_id] = marker;
this.marker_id++;
}
//Markerを削除するメソッド(未実装)
function ctlMarker_clearMarker(marker){

}
//引数で与えられたMarkerオブジェクトのidを返すメソッド
function ctlMarker_getMarkerId(marker){
for(var tmp in ctlM.markerArr){
if(ctlM.markerArr[tmp].getLatLng() == marker.getLatLng()){
return tmp;
}
}

return null;
}

Posted in googlemap, javascript. Tagged with , , , .

javascript 継承

javascript : 継承

javascriptでクラスの継承を行う。

スーパークラスのメソッドをサブクラスにコピーする。

   function inherit(subClass, superClass) {
        for (var prop in superClass.prototype) {
            subClass.prototype[prop] = superClass.prototype[prop];
        }
    }

Posted in googlemap. Tagged with , , .

mysql テーブルの追加

sql : tableの作成

CREATE TABLE `db_name`.`table_name` (

`marker_id` TINYTEXT NOT NULL ,
`uid` TINYTEXT NOT NULL ,
`time_stamp` TIMESTAMP NOT NULL ,
`lat` TINYTEXT NOT NULL ,
`lon` TINYTEXT NOT NULL ,
`html` TINYTEXT NOT NULL ,
`img` TINYTEXT NOT NULL ,
`public_area` TINYTEXT NOT NULL ,
`etc` TINYTEXT NOT NULL ,
`etc2` TINYTEXT NOT NULL

) ENGINE = MYISAM

Posted in mysql. Tagged with .

javascript POSTでXMLHttpRequest() をつかいデータ送信。

javascript : XMLHttpRequest() POSTでデータを送信する。

function comment_confirm(){
var request = new XMLHttpRequest();
var data = “data”;
var url = “send_data.php”
request.open(”POST”, url);
request.setRequestHeader(”Content-type”, “application/x-www-form-urlencoded”);
request.setRequestHeader(”Content-length”, comment.length);
request.setRequestHeader(”Connection”, “close”);

request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200){
alert(request.responseTEXT);
}
}
request.send(”data=”+data);
}
}

Posted in googlemap, javascript. Tagged with , , .

javascript googlemap マーカーの追加

var marker = new GMarker(latlng);
GMap2.addOverlay(marker);

Posted in googlemap, javascript. Tagged with , , .