Web制作Tips -3ページ目

画面遷移用のスクリプト


ドロップダウンリストからページを選択すると、すぐにそのページに

飛ぶスクリプトです。


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の後に記載する

  必要があります。


ここの説明は参考資料を使ってください。

文字化けなどが発生した場合は、参考にしてみると良いでしょう。

参考資料:http://www.php.net/manual/ja/ref.mbstring.php

Web制作リファレンス

●HTTP

  HTTP Overview

    http://www.studyinghttp.net/


●HTML

  とほほのWWW入門

    http://www.tohoho-web.com/

  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レイアウト実践講座

    http://css.uka-p.com/


●PHP

  以下の記事参照。

  http:///genetsys/entry-10004832580.html


 

(データは随時更新していきます)


PHPエディター

PHPの編集に特化した便利なエディターです。

http://phpspot.net/php/phpeditor2.html


PHPエディタ standalone版 をダウンロードして使ってみてください。

変数や制御文などが色分けされて、とても見やすいです。


配色関連

●Color Slider 配色/色見本

http://report.s22.xrea.com/

このサイトは凄い!Web上で配色やフォントを変えながらリアルタイムで

 確認が出来る。


Apache関連サイト

●Japanized Apache Sever Project

http://www.apache.jp/

  Apacheの日本語情報サイト。ダウンロードもできる。


●Apache本家のサイト(英語)

http://www.apache.org/

PHP関連の参考サイト

●PHPマニュアル

http://www.php.net/manual/ja/

PHPに関する情報が網羅されてます。とても役に立つサイトです。


●PHP FAQ よくある質問

  http://www.php.net/manual/ja/faq.php


●PHP Spot

http://phpspot.net/php/

使えそうなスクリプトがいっぱいあります。


●日本PHPユーザ会

http://www.php.gr.jp/

ダウンロードサイトへのリンクあり。


●PHPのオフィシャルサイト(英語)

http://www.php.net/


●PHP Security Consortium(英語)

 http://phpsec.org/

セキュリティーに関する情報。とても重要です!


●バグを検索

http://bugs.php.net/search.php

おかしいと思ったらバグレポートを検索してみると、解決方法が見つかる

 時があります。


Apche, PHP, MySQLのインストール


自宅でPHPの勉強をするためには、PHPをインストールする

必要があります。ここでは、PHPをApacheのモジュールとして

動かしていきますので、Apacheのインストールから始めて、

PHPのインストール、最後にDBの代表格であるMySQLを

インストールしてみます。


インストールする環境は、Windows XP Home Editonです。


●Apacheのインストール

・Apacheのダウンロード

  http://www.apache.jp/

・最新版をダウンロード(今は、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.dllWindowsのシステムフォルダー(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を入力。

お疲れ様でした。