@blog.justoneplanet.info

JavaScript、PHP、MySQLを使ったり

Cookieを使って別サイトの閲覧履歴を取る

自社サイトを訪れたユーザが他サイトAを訪れたか調べたい。他サイトAに対してビーコンを貼れることを条件に、これが可能となる。

■他サイト側(http://sample.jp/index.html)

imgタグでビーコンを貼り付けてあげれば良い。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ドキュメント</title>
</head>
<body>
<p><img src="http://sample.org/spacer.php" width="1" height="1" /></p>
</body>
</html>

■自社(サイト)ドメイン側実装

他サイトに貼り付けたビーコンを準備してあげる。

ビーコン用のイメージ(http://sample.org/spacer.php)

クッキーをセットしたいのでphpで書く。

<?php
header('Content-Type: image/gif');
setcookie('sample', 'see');
print(file_get_contents('spacer.gif'));

検証ページ(http://sample.org/index.php)

このページを訪問したユーザが、他サイトAを訪問したか調べられる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>検証ページ</title>
</head>
<body>
<?php
if($_COOKIE['sample'] === 'see'){
    print('<p>you have already seen http://sample.jp</p>');
}
else{
    print('<p>Nice to meet you!</p>');
}
?>
</body>
</html>

基本的にはユーザの行動収集はこの原理で行う。iframeとJavaScriptを使用することで、さらに多くの情報を取得することができる。

システム設計と開発の基本

■設計

チャンクダウン

  1. 何を作るのか
  2. 必要な機能を列挙
  3. 必要な画面を列挙
  4. 画面や機能のグループ化
  5. グループ化したものをコントローラとして定義
  6. コントローラで行うべき処理内容を列挙
  7. 列挙した処理内容からアクション(名)を定義
  8. データソースの設計
機能の列挙

何をどうするのか箇条書きで軽く書き出す。

画面の列挙
画面名 内容 構成画面
ランキング画面 人気の高い順に上から表示する 1画面のみ
ログイン画面 ログイン処理を行う 1画面のみ
画面や機能のグループ化
グループ 画面名(複数場面の場合)
閲覧系 ランキング画面
認証系 ログイン画面
コントローラの定義
コントローラ名 処理内容 担当画面
IndexController 登録されている情報を閲覧する処理 ランキング画面
AuthController ログイン・ログアウトなどのユーザ権限の管理 ログイン画面
コントローラで行うべき処理内容を列挙

箇条書きや上述の表に書き込んでも良いかもしれない。

列挙した処理内容からアクション(名)を定義
コントローラ 担当処理 アクション名
IndexController
  • 閲覧回数の多い順に一覧を表示する
  • 指定されたページにリダイレクトする
  • popularAction
  • redirectAction
AuthController
  • ログイン画面を表示する
  • ユーザ認証をする
  • ログアウト処理をする
  • loginAction
  • authAction
  • logoutAction

■開発

  1. 画面レイアウトの作成
  2. モデルの処理をコーディング
  3. 全体にかかわる内容の定義
  4. 個々のコントローラやアクションをコーディング

モデル

  • コントローラのリクエストをデータソースから取得して渡す
  • コントローラから渡されたデータをデータソースに登録・更新する
  • データソースの状態をチェックしてコントローラに渡す

Dreamweaverのショートカットキー

■pタグで選択テキストを括るには

ctrl + shift + [p]

■h1~h6で選択テキストを括るには

ctrl + [1~6]

作業がガシガシ速くなる!

■ショートカットキーをカスタマイズしたいときは

スニペットの設定画面

  1. ウィンドウ > スニペット > 
  2. 右側に小窓が出るので、スニペットのフォルダの小窓で右クリック
  3. 「新規スニペット」を選択
  4. 上のような画面が出るので、スニペットに分かりやすい「名前」をつける
  5. ラジオボタンで「選択範囲を囲む」or「ブロックの挿入」を選択する

ショートカットキーの設定

ショートカットキーの設定画面

  1. ウィンドウ > スニペット > 
  2. 右側に小窓が出るので、スニペットのフォルダの小窓で右クリック
  3. 「キーボードショートカットの編集」を選択
  4. そうすると上のような画面が表示される
  5. 右側のボタンの一番左に「セットの複製」をクリック(元の設定に戻せるようにするため)
  6. 「コマンド」欄では「スニペット」を選択
  7. 上述で作った「新規スニペット」を選択
  8. 「キー」の欄をクリックし、(希望する)任意の(ショートカット)キーをキーボードでタイプ
  9. 既存のショートカットキーと重複してなければ、そのまま「OK」を押す
  10. 設定完了

※CS3オリジナルのもあるかもしれません。

CentOSにPHPmotionをインストールしよう

PHPmotionとはオープンソース動画投稿サイト構築システム。

■前提条件

  • 「yum」が使える事。そして「ffmpeg」をインストールしている人

まだの人は前回の記事を参考にインストール!

別に使えなくてもインストールはできると思いますが、すごく大変だと思います。

■前準備

「flvtool2」と「mencoder」をインストールしよう!

実行コマンド
yum --enablerepo=rpmforge install flvtool2
yum --enablerepo=rpmforge install mencoder
さらにphpSHIELDをインストール
cd /etc/php.d
cp mbstring.ini phpshield.ini
vi phpshield.ini

で以下のように変更

; Enable ffmpeg extension module
extension=phpshield.5.1.lin
/etc/rc.d/init.d/httpd reload

■PHPmotionのインストール

  1. ソースをダウンロードする
  2. 任意のディレクトリに展開
  3. setup/に直接アクセス!

あとはまぁ、流れに沿って進めてください。初期の管理ID/PASSは「admin/admin」です。

■追記

実は先日、PHPをバージョンアップしたらphpSHIELDが上手く読み込めなくなってしまいました。あれこれ迷ったあげく

; Enable ffmpeg extension module
extension=phpshield.5.1.lin

; Enable ffmpeg extension module
extension=phpshield.5.2.lin

と記述しなおしたら動くようになりました!

PHPのバージョンが5.1系なのか5.2系なのか、という事ですね。

mod_rewrite.c(リライトする)

以下のように.htaccessファイルに記述するとURL(URI)をリライトできる。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteRule !\.(js|ico|gif|jpg|png|css)$ index.php
</IfModule>

以下のように書いてしまうと、サーバにmod_rewrite.cが入ってなかったときエラー(500)となる。

RewriteEngine on
RewriteBase /
RewriteRule !\.(js|ico|gif|jpg|png|css)$ index.php

レンタルサーバーを選ぶポイントとは?

ということでポイントをまとめてみました。意外とイッパイあるんですねー。表には空欄が2つありますが移転時の比較用に用意しました。

下記の表をエクセル形式でダウンロードする

新規サーバー選び
OSの種類とバージョン OSの種類    
OSのバージョン    
ライセンス付与形態    
OSのサポート期間    
サーバーハードウェアスペック CPU、メモリー、ディスク容量    
RAID、データバックアップオプション    
リモートコンソール    
ウェブ
HTTPサーバーの種類とバージョン HTTPサーバーの種類    
HTTPサーバーのバージョン    
CGI利用の可否 利用可能なスクリプト言語とバージョン    
CGIの設置場所の制限    
suEXECへの対応(Apache)    
PHP、Perl、Rubyなどのパス    
PHPはモジュール版か、CGI版か    
CPANでの、どのバージョンか    
.htaccessによる制御の可否 .htaccessが利用できるか    
.htaccessの必要な機能が新サーバーで利用できるか    
パスワードファイル「.htpasswd」へのパスはどこか    
.htpasswdにユーザーを追加できるか .htpasswd用のパスワード生成ツールは用意されているか    
データベースの種類とバージョン データベースの種類    
データベースのバージョン    
データベース容量の制限    
作成可能なデータベース数、テーブル数、レコード数    
データベース用管理ツールの有無    
新旧両サーバーの文字コード    
アクセス解析は利用可能か アクセス解析ツールの提供の有無    
HTTPサーバーの生アクセスログ取得の可否と保存期間    
トラブルシューティングのための、HTTPエラーログの閲覧    
Jcode.pmやjcode.pl、nkfは使えるか Jcode.pmやjcode.pl、nkfは使えるか    
SSLサーバー証明書の利用の可否 SSLサーバー証明書利用の可否    
共用SSLか、独自ドメイン名SSLか    
構築可能なSSLサイトの数(グローバルIPアドレスの数)    
旧サーバーからの証明書の持ち出し    
新サーバーへの証明書持ち込み    
証明書の受け渡し方法    
証明書が無効になる場合    
メール
作成可能なメールアドレス数 運用中のメールアドレスをすべて移行できるだけの数が使えるか    
代表メールアドレスは利用可能か、その上限数はいくつか    
メール関連の用語は確認しよう    
既存アドレスはすべて利用可能か メールアドレスでの、1文字ユーザー名は利用可能か    
「.」や「-」などの記号が利用可能か、先頭や末尾にも利用可能か    
予約済みで使用できないメールアドレスはあるか    
メールの容量制限 メール1通あたりのサイズ制限    
メールアドレス1つあたりの容量制限    
メーリングリストやメルマガの発行は可能か 個数×メンバー数    
送信回数やメールでの転送量の制限    
対応するメールプロトコル 対応するセキュアーなメールプロトコル    
モバイル環境から読み書きするか    
迷惑メール送信の対策はとられているか 迷惑メール送信の対策はとられているか    
送信ドメイン認証に対応しているか    
旧サーバーに保存されているメールをどうするか 旧サーバー上に保存されているメールを新サーバーに移行可能か    
旧サーバー上に保存しているメールの扱いの周知徹底    
メールサーバーの移行 旧メールサーバーが止まるまでの措置    
ネットワーク・DNS・ドメイン名
回線タイプを選ぶ 10Mbps / 100Mbps    
共有回線/専有回線    
帯域保証は必要か    
転送量制限と課金タイプ 課金タイプはどうなっているか    
転送量制限の有無と超過時の料金    
引越しを機にレジストラを変更する 移管するドメイン名はJPかgTLDか    
現在利用中のレジストラに連絡    
新しいレジストラに移管を申請    
DNSの設定変更 現在設定されているホスト名一覧を控える    
旧DNSサーバーのTTLを事前に短縮    
Nsレコードの最終的な変更者は誰か    
社内に別のDNSサーバーがないか    
管理
管理者権限付与の有無 管理者権限付与の有無    
管理者権限は何のために必要か    
サーバー管理ツールの種類 提供される管理ツールの種類    
サーバー移転支援機能はあるか    
管理ツールのライセンス数と料金    
管理ツールの権限分割は可能か 管理ツールは権限分割が可能か    
ウェブマスター用のFTPアカウントが発行できるか 複数のFTPアカウント発行(サイト管理者機能の追加)    
パッチはいつ、誰が適用するか パッチの適用は誰が行うか    
共用の場合アナウンスの有無、タイミング、方法    
PHPやPerl、Rubyなどのアップデートはいつ行われるか 共通モジュールのアップデートタイミング    
契約・サポート
新規サーバーの契約 支払い方法    
最短契約期間    
旧サーバーの解約手続き 申請書到着後の解約日は何日か    
解約の事前通知期間は何日前か    
解約時に残っているデータの扱い 解約時に残っているデータの扱い    
サポート体制のチェック サポート窓口へのコンタクト方法    
障害情報ページの有無    
緊急時の連絡方法やサポート範囲    
24時間サポートの要/不要    

GoogleAnalyticsで携帯のアクセス数はカウント(計上)できるのか?

■結論

出来る。

これがAnalyticsのキャプチャー画面。data.png

■方法

Analyticsでは通常http://www.google-analytics.com/__utm.gifのファイルに(クライアント情報を記録した)クエリをつけたリクエストをJavaScriptで行っている。このimgをベタでHTMLファイルに記述すればJavaScriptが実行できない携帯端末でもgifファイルをリクエストし、Analyticsに計上される。

■ソース

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
    //this is your id
    var pageTracker = _gat._getTracker("UA-123756-7");
    pageTracker._trackPageview();
}
catch(err){}
</script>
<noscript>
<img src="http://www.google-analytics.com/__utm.gif?utmul=noscript" width="1" height="1" />
</noscript>

■注意

自己責任でお試しください。

アイデア提供元(codeなにがし

ウェブサイトの主目的

■結論

ユーザーのニーズ

■間違い

クライアント側
  • 上司へのゴマすりとしてのWebサイト
  • 他部署への恩着せとしてのWebサイト
  • 自部署での自己満足としてのWebサイト
制作者側
  • 過度な演出(Flash、DHTML)
  • 過度な技術の挿入(Ajaxなど)

■おまけ

ユーザーのニーズというのは、「お客様は神様」のごとく、ペコペコするのとは違う。

アドビ、「Photoshop」をウェブアプリ化へ–無償版として提供予定

Adobeが、Googleなどの競合各社を追従すべく、画像編集アプリケーションソフト「Photoshop」のウェブアプリ版を6カ月以内にリリースする計画を進めているらしい。が米国時間2月27日に明らかにした。

広告入りのオンラインサービスで既存製品を補完、シェア拡大を目指す大規模な措置の一環だって。

しかし、タダで何でも出来る時代がますます現実のものとなる一方、広告費がこれを支えているのであり、既存のメディアにも変化が要求されるのであろうか…