cubeLabo PHP,Javascript,Web標準などWeb制作覚書 2007年07月

Prototype Window Classの使い方

ページ内にサブウインドウを表示するAjaxライブラリPrototype Window Classの使い方の覚書です。
»Prototype Window Class : Introduction

»サンプルを表示
クリックするとページ内にサブウインドウにPrototype Window Class : Introductionを表示します。

Prototype Window Classの特徴

サブウインドウをレイヤーとして表示: Prototype Window Classはサブウインドウをページ内にレイヤーとして表示します。ポップアップブロックによる表示制限を受けることがありません。
多機能なサブウインドウ: 閉じる,最大化、最小化やドラッグ&ドロップが可能でです。

Prototype Window Classの使い方

Prototype Window Classのダウンロード

Prototype Window Classをダウンロードして解凍します。
»Prototype Window Class : Introduction

必要ファイルのアップロード

ウインドウを表示するために必要なファイルをアップロードします。下記のファイルは基本的なウインドウの場合です。

prototype.js
effects.js
window.js
default.css
defaultフォルダの画像

default.cssは利用画像を相対パスで記載しています。FC2などのディレクトリがアップロードできない場合は、default.cssを修正します。

例) url(default/bottom_left.gif) → url(bottom_left.gif)

必要ファイルの読み込み

head要素でアップロードした一連のファイルを読み込みます。

FC2ブログなど文字コードがUTF-8以外の場合はtype="text/css"/ charset="utf-8"をつけるのが無難です。

関数の定義

クリックされたときに呼び出す関数を定義します。

呼び出し

Prototype Window Classを呼び出すリンクを記述します。

<a href="javascript: return false;" onclick="openWindow();">サンプルを表示</a>

参考記事
»Prototype Window Class : Introduction
»Prototype Window Classリファレンス
»Prototype Javascript Windowsがパワーアップ。「Prototype Window Class」: Recently Ajax

スポンサードリンク

スポンサーサイト

テーマ:ＨＰ作成
ジャンル:コンピュータ

特徴と注意点 -WordPress-

WordPressをCMSとして利用するさいの利点と留意すべき点の簡単な覚書です。

特徴

更新が簡単(無料ブログサービスと同等の操作)
自由な時間に更新可能
更新費用が不要
デザインの自由度がとても高い
ブログとしての実績世界No1
フリーソフト(開発コミュニティーが世界規模)
CMSとして企業用HPへの導入実績が増加
RSSに対応
SEOに有利(Transitional XHTML 1.0 + CSS)

留意点

DBのバックアップが必要
動的なページ生成
動的なページ生成によるSEOとの関係
サーバへの負荷

スポンサードリンク

テーマ:オープンソース
ジャンル:コンピュータ

地図の表示(4) タブ付吹き出しの表示 -Google Maps-

Google Mapで目的の場所にタブを持った吹き出し付マーカーを表示します。マーカーをクリックするとタブを持った吹き出しが表示されます。例では東京タワーにマーカーを表示しています。

マーカーが表示されていない場合は下記サンプルをクリックしてください。
サンプル_※1

※1:トップページ、カテゴリーページにはマーカーは表示されません。記事固有ページを表示した場合のみマーカーが表示されます。

コード

head部

地図を表示するためにhead部分に挿入するJavascriptコードです。マップキー●●●はご自身のキーに置き換えてください。

body部

body要素に挿入するHTMLコードです。

スポンサードリンク

テーマ:ホームページ・ブログ制作
ジャンル:コンピュータ

地図の表示(3) 吹き出しの表示 -Google Maps-

Google Mapで目的の場所に吹き出し付マーカーを表示します。マーカーをクリックすると吹き出しが表示されます。例では東京タワーにマーカーを表示しています。

マーカーが表示されていない場合は下記サンプルをクリックしてください。
サンプル_※1

※1:トップページ、カテゴリーページにはマーカーは表示されません。記事固有ページを表示した場合のみマーカーが表示されます。

コード

head部

地図を表示するためにhead部分に挿入するJavascriptコードです。マップキー●●●はご自身のキーに置き換えてください。

body部

body要素に挿入するHTMLコードです。

スポンサードリンク

テーマ:ホームページ・ブログ制作
ジャンル:コンピュータ

地図の表示(2) マーカー表示 -Google Maps-

Google Mapで目的の場所にマーカーを表示します。例では東京タワーにマーカーを表示しています。

マーカーが表示されていない場合は下記サンプルをクリックしてください。
サンプル_※1

※1:トップページ、カテゴリーページにはマーカーは表示されません。記事固有ページを表示した場合のみマーカーが表示されます。

コード

head部

地図を表示するためにhead部分に挿入するJavascriptコードです。マップキー●●●はご自身のキーに置き換えてください。

body部

body要素に挿入するHTMLコードです。

スポンサードリンク

テーマ:ホームページ・ブログ制作
ジャンル:コンピュータ

地図の表示(1) 基本地図 -Google Maps-

もっとも基本的なGoogle Mapsの表示例です。東京タワーの周辺の地図を表示しています。

コード

head部

地図を表示するためにhead部分に挿入するJavascriptコードです。マップキー●●●はご自身のキーに置き換えてください。

body部

body要素に挿入するHTMLコードです。

スポンサードリンク

テーマ:ホームページ・ブログ制作
ジャンル:コンピュータ

Google Mapsでオリジナルアイコンを表示する

Google Mapsでオリジナルのアイコンを表示する方法を説明しています。下記サンプルではmarker1.png～marker9.pngがサーバへアップロードします

アルファベットや番号付のGoogle Maps用アイコンは下記のサイトで無料でウェブ上で作成できます。
»Google-Maps markers generator

スポンサードリンク

テーマ:ホームページ・ブログ制作
ジャンル:コンピュータ

外部ファイル -Google Maps-

Google Mapsのコード量が多くなってきたら、Google Maps用のコードを外部Javascriptファイルに記載して、読み込む方法が便利です。

Javascriptファイル(拡張子.js)はアップロードしておきます。

スポンサードリンク

テーマ:JavaScript（ジャバスクリプト）
ジャンル:コンピュータ

Google MapsをFC2ブログに設置する

Google MapsをFC2ブログで利用する方法を説明しています。

STEP1:Google Maps API keyの取得

Google Mapsの利用には下記サイトからGoogle Maps API key(以下マップキー)を取得します(無料)。マップキーの取得に必要な情報は設置ブログのURLです_※1。
»http://www.google.com/apis/maps/>Sign up for a Google Maps API key

※1:Google Maps API keyの取得にはGoogleアカウントが必要です。

STEP2:Google Mapのjavascriptコードを保存

マップキー取得の際にjavascriptコードのサンプルが表示されます。

STEP3:緯度·経度の調べる

地図を表示したい場所の緯度·経度を調べます。下記サイトでは住所から緯度·経度を簡単に調べることができます(日本の緯度は大まかに35あたり,経度は136～137あたり)。
»geocoding

STEP4:Javascriptコードの変更

マップキーを取得した際に表示されるサンプルコードをカスタマイズします。目的の地図を表示するだけの場合に必要な変更箇所はマップキーの値と緯度·経度情報です。具体的にJavascriptコードを変更する箇所は赤字の①～④です。

①：取得したマップキーの値を入力。マップキー取得時のサンプルを利用する場合は既に、値が埋め込まれているので変更の必要はありません。

②：表示したい場所の緯度(日本の場合35～36;)を入力する。

③：表示したい場所の経度(日本の場合136～137)を入力する。

④：表示する場所の拡大度を0～17で指定する。17が一番拡大して表示

IE対策としてcharset="utf-8"を追加する

STEP5:JavascriptコードをHTMLに挿入する

FC2のテンプレートの編集画面からJavascriptコードをHTMLコードに挿入します。HTMLに挿入する箇所は大きく2箇所あります。
(1)head要素の最後に挿入するコード
(2)body要素の地図を表示する部分に挿入するコード

(1)のhead要素に挿入するコートはSTEP4で変更したコードです。

(2)のbody要素の地図を表示したい部分に挿入するコードは下記のコードを挿入します
<div id="map" style="width: 500px; height: 300px">div>

参考記事
»Ajax Google Mapsを自サイトに設置する

スポンサードリンク

テーマ:ホームページ・ブログ制作
ジャンル:コンピュータ

携帯HP制作のための用語集

携帯向けホームページ作成においてのキーワードを健忘禄としてまとめています。

XHTML Basic
HDML
WAP1
CHTML
XHTML 1.0 Transitional
i-HTML
i-HTML2.0

スポンサードリンク

テーマ:モバイル
ジャンル:コンピュータ

外部制約の追加・削除 MySQL

【外部制約の追加・削除 -MySQL- 】

MySQLでの外部制約の追加と削除についてのメモ。

■ 追加
ALTER TABLE テーブル名 ADD FOREIGN KEY(列名) REFERENCES 参照テーブル(列名);

※参照テーブルの列名は主キー(プライマリーキー)でなければならない。

■ 削除
●STEP1

下記SQL文で外部キーIDを確認する

mysql>SHOW CREATE TABLE テーブル名

外部キーを破棄する場合は、SHOW CREATE TABLE を使って、内部で生成された外部キー ID を確認する必要があります。

●STEP2

下記SQL文で外部キーを削除する

mysql>ALTER TABLE テーブル名 DROP FOREIGN KEY 外部キーID

参考URL http://dev.mysql.com/doc/refman/4.1/ja/innodb-foreign-key-constraints.html

スポンサードリンク

列属性の変更 MySQL

【列属性の変更 MySQL 】

MySQLで列属性を変更についてまとめる

■型の変更
mysql>ALTER TABLE table_name MODIFY column_name column_type;

(例) mysql>ALTER TABLE table_name MODIFY somecol VARCHAR(10);
somecol列の型をVARCHAR(10)へ変更する。

■デフォルト値の設定
mysql >ALTER TABLE table_name ALTER column_name SET DEFAULT defalut_value;

スポンサードリンク

DATE型のメモ MySQL

【ＤＡＴＥ型のメモ MySQL 】

■問題
１行テキスト等のテキストエリアからyyyy-mm-ddと入力してもらう想定で、リクエストデータをＤATE型に格納する。この場合に空文字(長さ0の文字列)が送信された場合の問題点。

※ＨＴＭＬフォームのテキスト入力域が未入力の場合は空文字が送信される。
※空文字とは長さ0の文字列でありプログラム(PHP)中では""や''であらわす。
※空文字とNULLはまったく別物。

■具体例
$c = $_POsT['char'];
$v = $_POST['date'];
$sql = "INSERT INTO table_name(c,d) VALUES({$c},{$v})";

※dはDATE型のカラム、sはCHAR型のカラムとする。

上記のSQL文を実行すると$_POST['date']が空文字の場合、カラムdの値として0000-00-00がインサートされる。

下記の通り変更しても同じ結果になる。

$v = ($_POST['date']) ? $_POST['date'] : NULL;
上記のようにNULLを代入した値$vを使ってSQL文を実行してもdの値として0000-00-00がインサートされる。

■解決策
dの値としてNULLを設定したい場合の対策
if(empty($_POST['date)){
$sql = "INSERT INTO table_name(c) VALUES({$c})";
} else {
$sql = "INSERT INTO table_name(c,d) VALUES({$c},{$v})";
}

$_POST['date']が空文字の場合上記コードではdの値としてNULLが設定される。

スポンサードリンク

LAN内アプリ2 セキュリティ

LAN内で利用するウェブアプリケーションのセキュリティについての備忘録です。小規模オフィスで外部インターネット非公開のLAN限定のウェブアプリケーション(以下WA)を安全に利用するためのセキュリティについての要点を整理しています。

前提環境

前提1: WAの動作

WAはLAN(オフィス)内からのアクセスのみ許可し、外部(インターネット)には非公開とする。

前提2: ネットワーク環境

winXP,win2000の２台でLANを構築し、ルーターを介してインターネットに接続。
ルーターはブロードバンドルーターでスイッチングハブを内臓。
各パソコンにはNorton Internet Security(以下NIS)をインストール

前提3: プライベートIPアドレス,サブネットマスク

コンピューター	IPアドレス	サブネットマスク
winXP	192.168.1.11	255.255.255.0
win2000	192.168.1.12	255.255.255.0

前提4 : アプリケーション実行環境(下記は全てwinXPにインストール)

Apache 2.0.55(Win32)
PHP5.05
MySQL 4.1.15-nt

前提5 :アプリケーションへの接続

winXPからはhttp://localhost/ またはhttp://192.168.1.11 でApacheへ接続する。win2000からはhttp://192.168.1.11 でApacheへ接続する。

目標

上記の環境下でLAN内限定のWA構築における安全なセキュリティの確保。

Apache,MySQLの対策の分類

ルーターでの対策
NISによるApache,MySQLへの対策。
Apache設定ファイルhttp.confでの対策
参考サイト: Web+DB on Windows

ルーターでの対策

外部インターネットとLANの間にルーターを設置することはそのこと自体が外部からのLAN内のWWWサーバ(本文ではApache)やDBサーバ(本文ではMySQL)への不正アクセス防止につながる。

NISによるApache,MySQLへの対策

概要: NISのアクセス制御でApache,MySQLへのアクセスをLAN内のコンピューターに制限する(NIS2004の場合)。

起動画面→ファイアーウォール→設定→プログラム制御を選択する。該当プログラム(Apache.exe,mysqld.exe)でカスタムルールに変更し、LAN内のIPアドレス(本例では192.168.1.11,192.168.1.12)からの通信のみ許可する設定へ変更する。

上記の設定でApacheがインストールされているPCのlocalhostからもアクセス可能となる。

Apache設定ファイルhttpd.confによる対策

hppd.confの前提
Server Root "C:/Program Files/Apache Group/Apache2"

DocumentRoot "C:/Program Files/Apache Group/Apache2/htdocs"

httpd.confの設定:

<Directory />
    order deny,allow
    deny from all
    allow from localhost
    allow from 192.168.1
    Options FollowSymLinks
    AllowOverride All
</Directory>
・・・・・・・
・・・・・・・
<Directory "C:/Program Files/Apache Group/Apache2/htdocs">
・・・・・・・・
・・・・・・・・
#Order allow,deny
#Allow from all
</Directory>

上記の設定で前述のLAN内のPC(本文では192.168.1.11,192.168.1.12)及びApacheがインストールしてあるPCからのlocalhostでのみApacheへ接続可能となる。

参考: Web+DB on Windows

Appendix:Directiveコンテナについて

<Directory>コンテナ（<Directory ディレクトリ>...</Directory>)は、特定のディレクトリ及びそのサブディレクトリに適用される指示子(Order,denay,allow,Options,AllowOverrideなど)をかこむ。

上記設定内容はServerRootに指定したディレクトリ以下の全てのディレクトリに適用される。

下記のように設定すると、C:/Program Files/Apache Group/Apache2に適用されます。

※設定内容がhtdocs以下のディレクトリに適用される。

<Directory />コンテナで指定した内容を<Directory "C:/Program......./htdocs>コンテナで上書きする。

ApacheについてはApacheに関する基礎事項を参照してください。

スポンサードリンク

テーマ:プログラミング
ジャンル:コンピュータ

Apache,MySQL,PHPの設定ファイル

Apache(2.0.59),MySQL 4.2.22,PHP 5.2.1の設定ファイルをまとめます。

Apache設定ファイル

%APACHE%_※1/bin/httpd.conf

MySQL設定ファイル

%MYSQL%_※2my.ini

私の場合はmy.iniはまったく編集しませんでした。

PHP設定ファイル

%WINDOWS%_※3/php.ini

解凍フォルダの直下にあるphp.ini-distをphp.iniにリネイムして%WINDOWS%へ移動します。

私の場合PEARも利用しています。PEARの設定ファイルは%WINDOWS%_※1/pear.iniです。

※1:%APACHE%はApacheのインストールフォルダです。通常C:Program FilesApache GroupApache2のようになります。
※2:%MYSQL%はMySQLのインストールフォルダです。通常C:Program FilesMySQLMySQL Server 4.1のようになります。
※3%WINDOWS%はOSのバージョンにより異なります。WindowsXPではC:WINDOWSです。

スポンサードリンク

テーマ:プログラミング
ジャンル:コンピュータ

LAN内アプリ1

LAN内で利用するウェブアプリケーションを構築した際の覚書です。

構築環境

OS: Windows XP,Windows Vista(若しくは2000)
ソフトウェア: LAN内で動作Apache+PHP(+PEAR,,Smarty)+MySQL
主な機能: DB登録,表示,画像アップロード,表示,エクセルファイル生成,ダウンロード

ダウンロードファイル

Apache 2.0.59(DL:apache_2.0.59-win32-x86-no_ssl.msi)
PHP 5.2.1(DL:php-5.2.1-Win32.zip)
MySQL 4.2.22(DL:mysql-4.1.22-win32.zip)

注意点

最初はApche2.2.4(DL:apache_2.2.4-win32-x86-no_ssl.msi)を試すもうまくいない。ApacheのLoadModuleのところでエラーが発生するようです。

スポンサードリンク

テーマ:プログラミング
ジャンル:コンピュータ

Spreadsheet_Excel_Writer Bitmap画像の挿入

PEARのSpreadsheet_Excel_WriterでBITMAP画像を挿入する方法をまとめる。

■使用関数

void Worksheet::insertBitmap (integer $row, integer $col, string $bitmap [, integer $x=0 [, integer $y=0 [, integer $scale_x=1 [, integer $scale_y=1]]]])

■使用例

$excel = new Spreadsheet_Excel_Writer(); $excel->send("mybook.xls"); $sheet = $excel->addWorksheet("mysheet"); $sheet->insertBitmap (0, 0, "C:/Program Files/Apache Group/Apache2/htdocs/images/image001.bmp");$excel->close();

?>

上記のコードで

ITMAP画像sample001.bmp(C:/Program Files/Apache Group/Apache2/htdocs/images/sample001.bmp)がエクセルファイルmybook.xlsのmysheetシートの１行1列目に挿入される。

スポンサードリンク

テーマ:プログラミング
ジャンル:コンピュータ

Spreadsheet_Excel_Writerのインストール

【 Spreadsheet_Excel_Writer のインストール　Windows版】

①pear.batがあるディレクトリへ移動。以後そのディレクトリを%HOME_DIR%とする。

②pear/OLEをインストールしていない場合はインストールする。

%HOME_DIR% > pear install OLE

③β版のパッケージをインストールできるようにする(Spreadsheet_Excel_Writer はβ版)

%HOME_DIR% > pear config-set preferred_state beta

④ Spreadsheet_Excel_Writer をインストールする

%HOME_DIR% > pear install Spreadsheet_Excel_Writer

以上でインストールが完了する。

スポンサードリンク

テーマ:プログラミング
ジャンル:コンピュータ

PEAR環境構築

レンタルサーバでPEARの環境構築の覚書です。

PHPが利用可能なレンタルサーバの場合PEARのサポートでは下記の状況が考えられると思います。

PEARをサポートしていない
一部PEARをサポートしている
ほとんどのPEARをサポートしている

レンタルサーバがPEARをサポートしている場合、php.iniでPEARディレクトリをインクルードパスに設定しています。そのためPHPファイルの中からは、PEARディレクトリを基点とするパスを設定すればよくなります。

php.iniの設定(UNIX)

include_path = "○○○/・・・/○○○/includes;○○○/・・・/○○○/PEAR"

PEARディレクトリ

PEARディレクトリ
|----Authディレクトリ----Auth.php
・・・・・・・・・・・・・・・・・・・・・・・・
|----DB.php
・・・・・・・・・・・・・・・・・・・・・・・・

PHPスクリプトファイル

require_once(DB.php);

require_once(Auth/Auth.php)

スポンサードリンク

テーマ:プログラミング
ジャンル:コンピュータ

携帯ホームページ検証ツール

携帯電話の検証をパソコンから行うソフトウェアをまとめています。

Iモード: iモードHTMLシミュレータII
ソフトバンク: ウェブコンテンツビューア; 919シミュレータ&エディタ(J-sky用)
EZウェブ: Openwave SDK 3.3.1
Openwave SDK6.2K

スポンサードリンク

携帯電話の日本語入力モードを制御する方法

携帯の入力欄は、デフォルトで日本語入力モードになります。メールアドレスや電話番号などは半角英数字で入力します。パソコンに比べて入力モードの変更が煩雑な携帯では入力域に合わせて入力モードを適切に設定するとユーザビリティが高まります。

i-mode,ez-web: istyle属性で入力モードを指定します。; 全角漢字 ⇒ istyle = 1
半角カナ ⇒ istyle = 2
半角英字 ⇒ istyle = 3
半角数字 ⇒ istyle = 4
vodafone: istyle属性で入力モードを指定します。; 全角漢字 ⇒ mode = hiragana
半角カナ ⇒ mode = hankakukana
半角英字 ⇒ istyle = mode = alphabet
半角数字 ⇒ istyle = mode = numeric

同じページで双方に対応させるにはistyle属性とmode属性を併記します。

スポンサードリンク

テーマ:モバイル
ジャンル:コンピュータ

Prototype Window Classの特徴

Prototype Window Classの使い方

特徴

留意点

コード

head部

body部

コード

head部

body部

コード

head部

body部

コード

head部

body部

STEP1:Google Maps API keyの取得

STEP2:Google Mapのjavascriptコードを保存

STEP3:緯度·経度の調べる

STEP4:Javascriptコードの変更

STEP5:JavascriptコードをHTMLに挿入する

前提環境

前提1: WAの動作

前提2: ネットワーク環境

前提3: プライベートIPアドレス,サブネットマスク

前提4 : アプリケーション実行環境(下記は全てwinXPにインストール)

前提5 :アプリケーションへの 接続

目標

Apache,MySQLの対策の分類

ルーターでの対策

NISによるApache,MySQLへの対策

Apache設定ファイルhttpd.confによる対策

Appendix:Directiveコンテナについて

構築環境

ダウンロードファイル

注意点

php.iniの設定(UNIX)

PEARディレクトリ

PHPスクリプトファイル

RSS登録

ブックマークに追加

カテゴリー

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

ブロとも申請フォーム

hatena

トラックワード

お勧めプログラム

RSSフィード

リンク

前提5 :アプリケーションへの接続