2013年7月28日日曜日

Webフレームワークに必要なもの

いろんなフレームワークがあるが、Web制作現場でのニーズをまとめる。

1.稼働サーバが広い
よく「ロリポップでも動くフレームワークにしろ」と言ってる。mod_perlが必要な時点でちょっと厳しい。もちろんPCのローカルでも動く必要がある。常にブラッシュアップを求められるのが、Webシステムなら、そのブラッシュアップするための、開発環境、検証環境は、10分で構築できるのがいい。

ssh接続を許容していないレンタルサーバもある。デザイン確認をするのにはレンタルサーバで十分。フォルダーコピーだけで動くのがいい。

2.ディレクトリを選ばない
よくあるフレームワークでは、ルート相対でないと稼働しない。キャンペーンサイトなどは、
http://クライアントのドメイン/campain/xxx
みたいなディレクトリで動くこともある。だから、ディレクトリを選ばないのが理想。
デザイナーも、ルート相対だとプレビューするのにも一苦労。だから、htmlと画像のパスはテンプレート上は相対パスの方がいい。

3.テンプレートだけを見てもプレビューができる
結構なフレームワークが、デザイナーのデザインプロセスを無視している。.tplという拡張子にしている時点でデザイナーの業務を無視している。カスタムタグも極力使わない方がいい。出来るだけ素のhtmlに近い形でプレビューしよう。

共通化したい気持も分からないでもないが、オーサリングツールにはテンプレート機能が既に備わっている。プレーンなHTMLを大量に作るしごとは多くのデザイナーがやっている。デザイナーの強みを生かそう。

3.2.URLリライターをうまく使おう
PHPはその生い立ちから、素のHTMLタグに機能を付加してくれる。例えば、
a href="index.html"


a href="index.html?guid=ON"
に自動的に書き換えたいときには、
output_add_rewrite_var("guid","ON");
で、自動的に書き換えてくれる。まぁ便利。この機能はフォームにも隠しフィールドを自動的に追加してくれるので、アンカーやフォームをヘルパー関数で作りこむ必要がない。


4.デバイス毎にビューの切り替えができる
もはや、PCとモバイルは両方カバーするのが当然。できれば同じURLでアクセスしたい。昨今はソーシャルメディアでURLが共有される時代。そしてソーシャルメディアのアクセスは、いよいよPCとモバイルが同じくらい。どちらも作ろう。
同じURLでもビューを切り替えることで、PCとモバイルの両方に対応が可能になる。


5.ログが取れる
これはフレームワークに限った話ではないが、何か問題があったときのよりどころはログ。開発フェーズでは、画面上にvar_dumpをしまくっていれば良かったかも知れないが、リリースされたらそういうわけにはいかない。そして本番サーバになると、ApacheのログもPHPのエラーログもアクセスできない可能性がある。アプリ開発者が意図的に出すログだけではなく、エラーログこそ「見えやすい」ところに置いておきたい。
phpでは、
set_exception_handler
set_error_handler
という関数があって、このハンドラの中で、エラーログをアプリ開発者が扱いやすい形で出力することが可能。ミドルウェアの管理の方針とアプリの管理の目的は違うのだから、ログの単位で分けて管理出来た方が良い。


プロジェクトの立ち上げ手順


1.プロジェクトのゴールを復唱できるレベルで明文化
2.スコープと優先順位を決める
3.タスクを洗い出す
4.タスクの依存関係を作る(後続タスクのない先行タスクはない)
5.クリティカルパスを見つける
6.エキスパート、経験者、責任者、元気などのバランスで担当を割り振る
7.負荷のバランスを見て、担当を振り直す
8.あり得ないほどの長いスケジュールになっているはずなので、リソースを投下してクリティカルパスを短くできないか検討したり、品質やスコープの調整でスケジュールを圧縮できないかを検討

エントリーフォームのお作法

応募フォームでイライラさせられることは多い。
一回ユーザビリティテストでもすりゃぁ、すぐに分かりそうな仕様バグに近いモノが放置されてることも多い。

何度も言わなくちゃいけないので、まとめておく。

そもそも、チェックを厳しくしても間違いは大して減らない

全角と半角を厳密に入力規制をかけても、それはユーザにとって間違いを減らす要因にはなりにくい。表札をかけてないユーザへの配送はやっぱりそれはそれで難しい。手書きで住所や電話番号を書いているのと同レベルの精度で十分なケースは多い。

えん罪で失うユーザのコスト

わざわざ広告費を使って連れてきたユーザが、やっとエントリーフォームまできたのに、それを失うリスクは割と無頓着。フォーム作成の担当が、マーケティング担当から情報システム担当になるからか。厳しすぎる入力フォームは経済的損失が大きい。

全半角をユーザに強制させない

半角カナはPCでさえも打ち方を知らない人がいる。
住所の番地などは半角で打つ人がほとんど。
スマホの場合は全半角の区別見た目でほとんど分からない。
どうしても全角数字じゃダメで半角数字で入力させたいのなら、システムで全角から半角に変換するプログラムを入れればいい。
フィーチャーフォンであれば、IMEモードが設定できるので、それを使えばいい。

入力欄のフォントはモノスペースで

全半角を強制するなら、せめて入力欄のフォントは等幅フォントで。
input,
textarea{
font-family : "MS ゴシック", monospace;
}

メールアドレスのRFC標準はやりすぎ

ピリオドは二回連続続かないなどのルールは規約としては存在するが、そのルールから外れて発効されたメールアドレスもある。docomoのメールアドレスは有名。実在するにもかかわらずそれをはじくのはやりすぎ。ユーザの「メールアドレス入力ミス」を本当になくしたいのなら、返信メールのURLをクリックしてもらうのが確実。

余計な項目は取得しない

項目が増えるほどユーザの離脱は多い。あたりまえのこのコトがなかなか浸透しない。個人情報保護観点でも余計な個人情報は取得しない方がいい。

必須入力にしてもムダ

どうしても入力して欲しい項目を必須項目にしてもムダ。都道府県は、一番上の北海道が選択されるし、フリー入力のアンケートなら「あああ」と入れられておしまい。

フィールド長上限は長めに

イマドキのマンションはいやがらせのように名前が長い。フィールド長をけちる時代はとうにすぎた。フィールド長は長めにとっておいていい。ユーザが普通に住所を入力して、max文字数制限に引っかかると言うことは、それはシステムの設計ミス。あえて長さを制限したいというケースがあるとすれば、印刷時の制約ということがありえるが、

フィールドを細かく分ける意味は無い

電話番号をわざわざ3カラムに分けるフォームを見るが意味などない。一つで十分なケースが大半。ハイフンを入力させてもさせなくても全く害はない。ハイフンありなしを制限しているのも論外。


以上。

2013年7月7日日曜日

ディレクトリ個別にクライアント証明書によるアクセス制限を掛ける方法。

1.サイトのSSLの設定に以下を記述

# 認証するクライアント証明書を発行した認証局の証明書。これにより発行者をチェックする。
SSLCACertificateFile /etc/httpd/ssl/ca.crt
# SSL通信においての再認証を許可する設定
SSLInsecureRenegotiation on

2.クライアント証明書によりアクセス制限をかけるディレクトリに配置する.htaccessに記述

# SSL通信を強制する指定
SSLRequireSSL
# クライアント証明書を要求する指定。require以外を指定すると任意とかになるので、requireにする事。
SSLVerifyClient require
# クライアント証明書でチェックする階層の指定
SSLVerifyDepth 1
# 403エラー時のメッセージを指定。定型文の他にURLによる指定もOK
ErrorDocument 403 "Sorry can't allow you access with no ssl"

RapidSSLを使ったSSL証明書の作り方

●全体概要

  • pem:中間証明書(RapidSSL共通の中間証明書。使い回し可)
  • csr:企業情報+ドメインを元に作成する。署名。SSL申し込み時にツールを使って自分でつくるもの。
  • key:企業情報+ドメインを元に作成する。秘密鍵。SSL申し込み時にツールを使って自分でつくるもの(csrとセットで作られる)
  • crt:SSL証明書を取得するときに、認証が終わった後にメールで届くもの。
    メールで受け取るためには、admin@ドメインでメールを受けれることが前提(他にもサーバにおまじないファイルを置く方法もある)

  
この4つのファイルのうち。
key
crt
pem
をアップして、httpd.confで設定すればOK。

おさらい

  • 最初から共通であるのが、pem   
  • つくるのは、csrとkey
  • もらえるのが、crt
  • サーバにあげるのが、pemとkeyとcrt


●Apacheの設定確認
OpenSSLとmod_sslが入っているかどうかを確認
rpm -qa|grep openssl
rpm -qa|grep mod_ssl

●Rapid-SSLから証明書を買う
http://www.rapid-ssl.jp/index.htm?q=rapidssl
▽特徴
・クレジットカードでも銀行振り込みでも変える
・メールを受信する仕組みがなくても、指定されたファイルのアップロードでドメイン所有者であることを確認してもらえる
・CSR作成ツールがあるのでopensslのコマンドライン作業が不要
▽注意点
・「秘密鍵のパスワード」を設定してしまうとApacheの再起動のたびにパスワードを聞かれるので不便。設定しないでいい。

●confの設定
・listenするポートを設定

●作ったファイルのチェック方法

・keyファイルが正しいかどうか
openssl rsa -in domainname.key -check -noout
⇒「RSA key ok」

・crtファイルの有効期限を調べる
openssl x509 -in domainname.key -noout -dates
⇒例)下記のように、出力される
notBefore=Jul  1 04:13:50 2013 GMT
notAfter=Oct  3 00:20:38 2015 GMT


●最後の最後にテストの方法
・ブラウザでhttpsにアクセスして、証明書の有効期間が更新されているかどうかを確認

●以下、RapidSSLフォーム入力手順例
                                                                                                             
■URL
http://www.rapid-ssl.jp/index.htm?q=rapidssl

■事前対応
・ドメイン取得
・DNSにゾーン追加
・apacheのconfを設定して、該当ドメインにhttpでアクセスできている

■手順
・Rapid SSL2600円、「新規お申込み」から申込み
・申込みの際して、CSRが必要で、CSRの作成に下記情報が必要

○CSR生成情報
 コモンネーム:取得したいドメイン
 正式組織名:社名英語表記
  ※whoisでコモンネームのドメインを検索して、ドメイン登録情報を入力
   http://whois.jprs.jp/
  ※参考:ドメイン所有者名(whois情報)と異なると発行が遅くなる場合があります
 部門名:SSL
  ※特に部門名がない場合は、ダミーでSSLと入力
 市区町村名:Sibuya-ku
 都道府県名:Tokyo
 国名:JP

・RapidSSLお申込み画面の注意事項を確認して、お申込みフォームへ
・お申込みフォームのCSR作成ツールからCSRを作成
 ※ https://www.rapid-ssl.jp/tools/makePkeyCsr2048.php
 ※任意の秘密鍵のパスワードは設定しない
・作成された秘密鍵、CSRはテキストに保存
・お申込みフォームに下記内容を入力して、お申込み内容確認へ

 パスワード:申し込みステータスを確認するためのパスワード
 ご契約期間:2年
 他社からの移転:いいえ
 CSRの貼り付け:上記生成したCSRを貼り付け
 サーバタイプ(任意入力):Apache+OpenSSL
 特別コード:入力なし

・内容を確認して次へ
・承認メールアドレス・お客様情報入力
 承認メール受信アドレス:「指定ファイルアップロードによる承認」を選択
 担当者名(日本語):自分の名前
 担当者英字氏名(名):mei
 担当者英字氏名(姓):sei
 担当者メールアドレス:mailaddress
 郵便番号(半角):999-9999
 住所(日本語):東京都千代田区千代田1−1
 電話番号(半角):03-9999-9999

 更新時期のお知らせ:希望する
 技術担当者/代行申請者:証明書管理者と同じ

 経理担当者:以下の情報
 請求先名称(日本語):経理担当の名前
 First Name(ローマ字名):sei
 Last Name (ローマ字姓):mei
 電話番号:99-9999-9999
 メールアドレス:mailadress

・お申込み確認へ
・お支払情報入力
・お支払方法:クレジットカード

・上記内容を入力後技術担当者にメールが届き、「指定ファイルアップロードによる承認」の作業フローが届く
 あとは、指定ファイルを指定された場所にアップすれば、メールでCRTが届く。