画面遷移用のスクリプト
ドロップダウンリストからページを選択すると、すぐにそのページに
飛ぶスクリプトです。
index.htmlというファイルを作って以下のコードを埋め込みます。
さらに、page1.html, page2.html, page3.htmlというページを
作っておくと、ドロップダウンリストを選択した時点で、
該当ページに飛ぶようになります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>ページ選択</title>
<script language="JavaScript" type="text/JavaScript"><!--
function change_page(){
location=(document.f1.sel_page.options[document.f1.sel_page.selectedIndex].value);
}
// ---></script>
</head>
<body>
<h1>ページ選択</h1>
<p>見たいページを選んでください。</p>
<form name="f1">
<select name="sel_page" onChange="change_page()">
<option value="index.html" selected>トップ</option>
<option value="page1.html">1ページ</option>
<option value="page2.html">2ページ</option>
<option value="page3.html">3ページ</option>
</select>
</form>
/body>
</html>
ポイントは、formにname属性で名前を付け(f1)、select文のname属性(sel_page)を
指定するというオブジェクトの指定方法です(document.f1.sel_page)。
さらに、現在選択されたオプションを
document.f1.sel_page.selectedIndex
を使って指定し、
その値(value; ここでは、飛ぶ先のページ)をoptionsとvalueを使って指定します。
options[document.f1.sel_page.selectedIndex].value
実際に使う場合は、飛んだ先のページに戻るボタンを設置したり、
上記スクリプトと同じものを設置すると使いやすくなると思います。
このようなオブジェクトを指定した方法になれるようにしましょう!
コンバージョンレート(2)
コンバージョンレート を下げないようにするために、
どういう点に注意してWebページを作成すればいいのか
纏めてみた。
・オーバチュアやアドワーズなどに出すキーワードと
全く同じ言葉を使って、ページ作る。人間の脳は、
広告と同じキーワードをページ内で探すので、
違うキーワードを使っていたり、広告内容とページの
内容に一貫性が無いと、ユーザは他のサイトに
移ってしまいます。
・ユーザの入力項目が多い時は、ページを分けるなどして、
少しづつ入力させる方法を検討する。一度に全部の入力
項目を見せてしまうと、入力する気がなくなってしまい、
コンバージョンレートを下げる可能性があります。
・アンケートなどで、ある項目にチェックした人だけが
入力して欲しい項目があったら、JavaScriptを使って、
関係ない人にはその入力項目は見せない。
・全角・半角の入力の切り替えが多いと、入力するのが
面倒になってしまうので、どちらでも対応できるように
する(PHPなどのサーバサイドのブログラムで処理する)。
・入力項目が消えないようにする。ようやく入力が終わって、
確認画面で間違いに気がつき、思わず戻るボタンを
押したら、入力項目が消えてしまったということは
よくあることだと思う。こういった部分にも、PHPのセッション
管理などを使って、入力した項目が消えないように工夫する。
Webショップなどを運営している方々、コンバージョンレートを
上げようとして日々努力をしているので、Webの作り方が
悪かったからレートが悪いのだと言われないように
注意しましょうね。
コンバージョンレート
キーワード広告の話になると必ず出てくるコンバージョンレート。
コンバージョンレートとは、キーワード広告をクリックした数の中で、
実際に商品を購入したり、セミナーに申しこんだりしてくれた人の
数の割合を言います。
キーワード広告によるクリック数が同じで、
コンバージョンレートが2倍になれば、売上げは2倍で、
購入者一人あたりの広告コストは1/2になります。
コンバージョンレートを上げる為には、本当に買ってくれそうな人に
クリックしてもらえるようなキーワードを選び、広告を出すことが
一番重要です。
”不動産”などの一般的なキーワードだと、クリックする人の
目的が様々で、無駄な広告費を支払ってしまうことになる。
”不動産、東急東横線沿線”というキーワードにすれば、
クリックする人は、東横線沿線上で物件を探している可能性が
高くなります。さらに”ペットOK”、”車庫付き”などの限定する
言葉を追加すれば、さらに潜在顧客に近づくことができます。
このような形で、コンバージョンレートが高いキーワードのみを
残して、それ以外のものを破棄しながら、
コンバージョンレートを上げていくのが一般的です。
それから、せっかくキーワードを見てクリックしてくれたのに、
そのページに同じキーワードのコンテンツが無いと、
ユーザは他に行ってしまいます。
キーワード広告とWebサイトの作りには一貫性が無いと、
コンバージョンレートを上げることができません。
広告に、”お買い上げはこちら”と書いてあったのに、
クリックしたページには”ご購入はこちら”と書いてあったと
すると、意味は同じでも言葉が違うとコンバージョン
レートが下がってしまうという報告があります。
キーワードを見てクリックしたら、その人は同じキーワードを
探すので、ページ内では広告と同じキーワードを使う方が
効果が上がります。
php iniの設定 mbstring
英語圏は、シングルバイトの文字を使っているので、日本語に対応させるためにには、
マルチバイトを扱える環境が必要です。
php.iniのmbstringを設定することによって、日本語のWebページを扱えるようになります。
PHPで文字化けしたりする場合は、参考にしてみてください。
PHPを利用する環境によって設定方法が変わってくるので、以下は設定の一例です。
それぞれの環境に合うようにパラメータを変更してください。
ポイントとなるのは、内部エンコーディングです。
データベースを使用する場合は、PHPの内部エンコーディングとデータベースの
エンコーディングを揃えておくことです。
私の利用している環境は、FreeBSD+Apache+PHP+MySQLです。
LAMPと言われている環境です。
*LAMPは、Linux,Apache,MySQL,PHPの略。
内部エンコーディングは、MySQLと接続するためにEUC-JPを使って、
スクリプトは、SJISで書いています。
mbstring.language = Japanese
mbstring.internal_encoding = EUC-JP
mbstring.script_encoding = SJIS
mbstring.http_input = auto
mbstring.http_output = SJIS
mbstring.detect_order = auto
mbstring.substitute_character = none
*(注意)mbstring.internal_encoding は、mbstring.languageの後に記載する
必要があります。
ここの説明は参考資料を使ってください。
文字化けなどが発生した場合は、参考にしてみると良いでしょう。
Web制作リファレンス
●HTTP
HTTP Overview
●HTML
とほほのWWW入門
HTML 4.01 仕様書
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html
●JavaScript
独学JavaScript
http://www.ueda.info.waseda.ac.jp/~gaku/js/
とほほのJavaScript リファレンス
http://www.tohoho-web.com/js/index.htm
JavaScript Kit(英語)
http://www.javascriptkit.com/jsref/index.shtml
●CSS
CSS2 リファレンス
http://hp.vector.co.jp/authors/VA022006/css/
CSSレイアウト実践講座
●PHP
以下の記事参照。
http:///genetsys/entry-10004832580.html
(データは随時更新していきます)
PHPエディター
PHPの編集に特化した便利なエディターです。
http://phpspot.net/php/phpeditor2.html
PHPエディタ standalone版 をダウンロードして使ってみてください。
変数や制御文などが色分けされて、とても見やすいです。
PHP関連の参考サイト
●PHPマニュアル
PHPに関する情報が網羅されてます。とても役に立つサイトです。
●PHP FAQ よくある質問
http://www.php.net/manual/ja/faq.php
●PHP Spot
使えそうなスクリプトがいっぱいあります。
●日本PHPユーザ会
ダウンロードサイトへのリンクあり。
●PHPのオフィシャルサイト(英語)
●PHP Security Consortium(英語)
セキュリティーに関する情報。とても重要です!
●バグを検索
http://bugs.php.net/search.php
おかしいと思ったらバグレポートを検索してみると、解決方法が見つかる
時があります。
Apche, PHP, MySQLのインストール
自宅でPHPの勉強をするためには、PHPをインストールする
必要があります。ここでは、PHPをApacheのモジュールとして
動かしていきますので、Apacheのインストールから始めて、
PHPのインストール、最後にDBの代表格であるMySQLを
インストールしてみます。
インストールする環境は、Windows XP Home Editonです。
●Apacheのインストール
・Apacheのダウンロード
・最新版をダウンロード(今は、Ver1.3.33)
[ダウンロード]メニューから、適当なダウンロードサイトを選択。
下の方の説明で、The historical stable release is Apache 1.3.33 と
書いてあるので、1.3.33が安定バージョンであることが分かる。
binaries/win32/apache_1.3.33-win32-x86-no_src.exe Installer Package
・適当なディレクトリーに保存して、実行するとインストールされる。
デフォルトでは、C:\Proguram Files\Apache Group\Apacheにすべて
インストールされる。
・インストール中に、Network_Domain, Server Name, Administrator's
Email Addressの入力を求められる。ローカルで使うので、なんでもOKでしょう。
とりあえず、localhost, local_testserver,自分のメールアドレスを入れておく。
チェックボックスは、マニュアルで起動したいので、
Run when started manually, only for me ()
を選択。
・Setup TypeはCompleteを選択
・ディレクトリは、デフォルトのまま
C:\Program Files\Apache Group\
・Apacheを起動してみる。
最新バージョンでは、以下の操作をしなくてもApacheが起動しているので
操作不要。
・c:\Program Files\Apache Group\Apache\Apache.exeを実行
・黒い画面が出て、「Apache/1.3.33 (Win32) running......」と
表示される。
・ブラウザで http://localhost/ と入力してみる。
「あななの予想に反して、このページが見えているでしょうか?」と
表示されていれば、Apacheのインストールは成功です。
・一旦、黒い画面(Apache)を閉じる(手動で起動した場合のみ)
・C:\Proguram Files\Apache Group\Apache\conf\httpd.confの編集
[すべてのプログラム] → [Apache HTTP Server]
→[Configure Apache Server]
→[Edit the Apache httpd.conf Configuration File]
*Noteバッドで開く
・DocumentRootを決める。
デフォルト: DocumentRoot "C:/Program Files/Apache Group/Apache/htdocs"
変更例: DocumentRoot "C:/www/htdocs" (ディレクトリを作っておく)
●PHPのインストール
http://www.php.net/downloads.php
ここでは、Ver4.Xの最新バージョン、PHP 4.4.0をダウンロードする。
・Windows Binaryの中で、server API versions for Apacheの方をダウンロードする。
・ダウンロードサイトが表示されるので、適当なサイトを選ぶ。
・ダウンロードが完了したら、解凍して、c:\phpにコピーする。
・c:\php\php4ts.dllをWindowsのシステムフォルダー(Windows XPの場合は、
c:\windows\system32)にコピーする。
・c:\php\php.ini-distをコピーして、php.iniという名前にして、c:\Windowsの
中に保存する。
・php.iniの編集
・include_path = ".;c:/php/includes" を有効にする(行頭の;を消す)。
=> c:/phpの下にincludesというディレクトリを作成
・extension_dir = "c:/php/extensions"
・doc_root = "c:/www/htdocs" に設定
・extension=php_gd2.dll を有効にする
・extension=php_mbstring.dll を有効にする
・session.save_path = c:/tmp を設定
=> cドライブの直下にtmpというディレクトリを作っておく。
・Apacheモジュールとして動作させるのに必要なファイルであるphp4apache2.dllを
Apacheに組み込むためにhttpd.confを編集する。
・# Dynamic Shared Object (DSO) Supportを探して、以下の2つを挿入する。
LoadModule php4_moduleC:/php/sapi/php4apache.dll
AddModule mod_php4.c (これは、AddModule群の最後に入れると動く)
=>最初の方に入れたら、立ち上がらなかった。
・# Document types.の下の<IfModule mod_mime.c> から </IfModule>
の中に、次の2行を追加
AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps
・AddCharsetのセクションに以下の1行を追加
AddDefaultCharset shift_jis
・DirectoryIndex index.html index.php (index.phpを追加する)
・LanguagePriority ja en da nl et fr de el it kr no pl pt pt-br ru ltz ca es sv tw
(jaが一番前になるように移動する)
・apacheを起動してみる(自動で起動するバージョンの場合は、PCを再起動する)。
先ほどと同じような画面になったら、正常に設定されていることになる。
エラーが出た場合は、エラーメッセージを参考にしながら、上記の
内容を再確認してみる。
・ドキュメントルート(c:\www\htdocs)に以下の以下の内容を記述した
テキストファイルを作り、phpinfo.phpという名前で保存する。
<?php
phpinfo();
?>
・エクスプローラーでhttp://localhost/phpinfo.php と入力する。
・PHPの環境設定一覧が表示されれば成功
●MySQLのインストール
・以下のサイトにアクセスする。
http://download.softagency.net/MySQL/downloads/mysql/4.0.html
Windows downloadsといく項目を探し、
”Windows (x86) 4.0.25 25.1M Download” のDownloadをマウスの左
ボタンで選択して、適当なディレクトリに保存する。
ファイル名は、mysql-4.0.25-win32.zipになっているはず。
・エクスプローラで、保存したファイルの上にマウスを持っていき、
マウスの右ボタンのメニューの中で、”全て展開”を選択して展開する。
展開が終わると、mysql-4.04.25-winというフォルダーが作成される。
・そのフォルダーの中に、setup.exeが入っているので、ダブルクリックする。
すべて[Next]を押しながらインストール作業を進める。
c:\mysqlの中にインストールされる。
・エクスプローラで、c:\mysql\winmysqladmin.exeを実行する。
ウインドウが開くので、usernameとpasswordを適当に設定して
おく。 例)User name: mysqluser Passowrd: mysqluser
ウィンドウの右上の信号が緑になっていれば、正常に動作しています。
左下のボタンの[Hide me]を選択すると、右下のバーの中にアイコン化
されます(緑の信号が点灯した状態のアイコンが見える)。
もう一度ウィンドウを開きたい場合は、信号のアイコンをマウスの左で
クリックし、[Show me]を選択すれば良い。
・[スタート]メニューの[すべてのプログラム]-[アクセサリ]
-[コマンドプロンプト]を選択する。
・コマンドプロンプトの黒い画面が表示されたら、
cd c:\mysql\binと入力。
ここで、mysqlと入力して、以下の画面が出れば成功。
-------------------------------------------------------------
Welcom to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 4 to server version: 4.0.25-nt
Type 'help;' or '\h' for help. Type '\c' to clear the buffer.
mysql>
-------------------------------------------------------------
・exitを入力して、一度mysqlを終わらす。
・ルートのパスワード設定
以下のコマンドを実行。パスワードは半角英数字で設定してください。
mysqladmin -u root password ここにパスワードを入力
・rootのユーザでログイン
mysql -u root -pと入力。
画面に"Enter password:"と表示されるので、先ほど設定した
パスワードを入力してみる。
"mysql>"というプロンプトが出れば、パスワードの設定も
正常に登録されたと確認できます。
・あとは、mysqlの世界の話になるけど、例えば、
show databases;と入力して、デフォルトの
データベースである、mysqlとtestが画面に表示されれば、
正常です。
・mysqlを終わらす場合は、exitを入力。
お疲れ様でした。