|
|
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 謹賀新年！ よいお正月ですか？ Atelier Ｈ〜あとりえあっしゅ〜 -WebデザイナーのTips- No.113 発行：1月3日 from aska ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ Atelier Hは「いかに楽してかっこいいページを作るか」 をモットーに展開するWebDesignerのためのサイトです。 このメールマガジンは３日、18日を努力目標(！)に 「Weeklyまぐまぐ」より配送されております。 不必要になった場合、 登録の解除はこちらのページでできます。 http://atsh.com/atelier/magazine.html CONTENTS=============================================== 1)新型メールフォームのご紹介 2)Random Formバージョンアップ 3)JavaScriptでクッキー２ 4)常識のウソ？ 数字のマジック 5)ちょっと♪なサイト ======================================================== ◆◇◆新型メールフォーム◆◇◆ ▼どんと来い、簡単フォーム ●明けましておめでとうございます。 今年のお正月は風邪をひきまして 本格的な寝正月でした。 で、それを利用して？ 新しいプログラムを少々 作成したりしてみましたのでご紹介です。 メールフォームプログラムというのは、CGIの中でも ごく基本的なスクリプトで作られています。 フォームの内容を取得し、sendmailで送信する 未記入の内容があれば警告を出し、メールアドレスが いい加減だったりしたら、チェックするという具合ですから それほど難しいことはありません。 しかし、フォームがころころ変わる場合は大変です。 その度に変数を設定し、メールの内容も変えなくてはいけません。 ある程度わかってくるとどうってことないのですが CGIのカスタマイズに慣れていな人にとっては まったくめんどくさい作業になってしまいます。 そこで誰でも簡単に扱えるように フォームを変えても、対応してくれる メールフォームを作ってみました。 ●サーバやプロバイダから提供される 定番のメールフォームとよく似たようなものです。 あまり細かい設定はできませんが とりあえず、フォーム入力したものを拾って メールで送ってくれます。 フォームの項目がしょっちゅう変わるような場合に とっても便利なのです。 設定の仕方も簡単で、送信先メールアドレスや 必須項目などを設定するだけでＯＫ。 HTMLのフォームには<INPUT TYPE="text" NAME="お名前"> などと設定してやればメールには お名前：山田花子 などのように書かれて送られてきます。 送信前の確認もできます。ただし、Random Formのように 送信内容をもう一度フォームで表示させることはできないので エラーが出たら「戻る」で戻って修正してもらいます。 送信結果やエラーの出力などもデザインを変えられますので 提供されているフォームのデザインが気に入らない人は いじってみてください。 なお、このプログラムにはjcode.plの他に cgi-lib.plが必要ですので、持ってない方は いっしょに持っていってください。 http://www.atsh.com/cgi/easy.html ======================================================== ◆◇◆Random Formもバージョンアップ◆◇◆ ●少し前のことですが、某有名CGI配布サイトが 一時休止になりました(たぶん今も)。 なんでもセキュリティの面で問題があり サーバに記録させた個人情報が漏れてしまったらしいのです。 アンケートなどでサーバ上に記録ファイルを残すのは やはりかなり問題なようですので うちのメールフォームも、すべて ファイルを残す機能は削除させていただきました。 その代わり、カンマ区切り(csv)のデータを メールで送るようにしておきましたので エクセルなどで読み込んで保存していけば、 データの集計も簡単にできるはずです。 メールで送るのも本来は100%安全というわけではないので 暗号化もされていないフリーのメールプログラムで 個人情報を扱うようなことはしない方がいいと思います。 これが第１の変更点です。 で、ついでにもうひとつ、使いやすくしてみました。 ●カスタマイズを前提に作ってあるのがRandom Formです。 設定はちょっとめんどうですが、これでメールの基本がわかると いろんなことに使えるフォームなのです。 実際ショッピングカートも、このフォームの 大がかりなカスタマイズと言えなくもありません。 こちらはファイルの書き換えやら、いろいろあるので それほど話は簡単ではありませんが。 先に紹介したEasyFormよりも、至れり尽くせり エラーになっても、入力内容が書いてあるフォームが もう一度出てくるので、使う方はとっても楽です。 本当にちょっとした間違いだけで エラーになってしまい、いちいち戻るのって けっこう面倒に感じている人、多いはずですから。 使う方が楽、ということは設定する方は ひと手間かけてあげなきゃいけないわけで CGIにHTMLをそっくり書かせることになります。 でも、それほど面倒でもないんですよ。 PerlにはHTMLをそのまま出力させる書き方もあるので ちょっとコツを覚えれば、同じフォームを書き出せます。 Random Formの説明の中に、カスタマイズのポイントを 付け加えておきましたので、それを参考にしてください。 http://www.atsh.com/cgi/random.html ======================================================== ◆◇◆JavaScriptでクッキー２◆◇◆ ●２・・・って言っても今回の方が簡単なんですが(笑) 最初の訪問者と、リピータを区別したい場合 クッキーに何か書き込んでおいて、再訪問のときにチェックし 何か書いてあったら別のページに飛ばします。 どこが簡単かと言いますと、有効期限の設定です。 最初かそうでないかだけですので、何日有効とかではなく 何日まで有効、という設定の仕方でいいのです。 このふたつはどう違うか？ クッキーの有効期限は普通 60 * 60 * 24 * 2 * 1000 のような設定の仕方をします。 秒、分、時間、日を全部かけて1000倍するのです。 この例だと有効期限は２日です。 が、何日まで有効という場合には Kigen = new Date("January 1,2013"); Limit = Kigen.toGMTString(); Kigenに日付を入れて、toGMTString()という関数で クッキーの有効期限に変換してしまえるからです。 この方が見た目にわかりやすいですよね。 これだと10年先のお正月まで有効ってことになるわけです。 まぁ、難しいことはともかく、これで最初の人と ２回目以上の人を区別できるので 表示ページを変える他にも、メッセージを変えたり 何か画像を出したりというようなこともできるわけです。 http://www.atsh.com/js/ ======================================================== ◆◇◆これって常識？◆◇◆ ●よく、ホームページの作り方みたいな本に いろんなデザインの常識が書いてありますよね。 例えばページの左上は一番先に目がいくから バナーやタイトルは左上に置くのがいい。 できたら、ホームへのリンクも付けてとか。 グレーやブルーなどの寒色は小さく見えて 赤やオレンジは大きく見えるから 遠くの物は寒色で描き、手前のものは暖色にするとか。 こういうのはホームページに限らないので 当たっているんです、確かに。 意図的に、常識を外したデザインで 個性をねらうことはありますけどね。 ●その他にコンテンツは５〜９個にしましょう なんてこと書いてないですか？ なんでこの数字になるかというと、 人間がぱっと見て覚えられるのはこのくらいの数なんだそうです。 だから７個＋−２くらいにしとくのがいいと。。。 確かにコンテンツが全部アタマに入っていて それでサイトの中を見て回るとスムースにいけそうです。 でも、それより多くちゃいけないの？ 例えばYahoo・・・ ずらーっと項目が並んでますよね。 これを９個以内にするっていうのはかなり難しいです。 無理にくっつけても、結局サブメニューが必要になって あまりコンパクトにはならないので やっぱり覚え切れるわけないんですよね。 というより、覚える必要ないんじゃないかしら。 人間の短期記憶なんていい加減なもんですから コンテンツを覚えてもらおうなんて方が無理な相談で それよりも迷子にならない、構成に一貫性があって道がたどりやすい イザとなったらいつでもホームに戻れる、というように さりげないヘルプを提供する方がよっぽど親切です。 もちろん５〜９個にまとめられるものならば まとめた方がいいんですけれど、無理しないことです。 変なコンテンツ分けをしてかえって わかりにくくなっては意味ないですから。 と言いつつ、建て増しに建て増しを重ねたツケで うちのサイトもかなり迷路化してきています。 サイトマップ作るほど大型サイトじゃないんだけど もう一度見直してみましょうかねぇ。＜反省 ======================================================== ◆◇◆ちょっと♪なサイト◆◇◆ ●よくいろんなワザを使ってるサイトで かっこいいけど、どうやってるの？ と思うことありますよね。 実際は必要ないんだけど 見てみるとちょっと面白いサイト そんなのを見つけたらちょっとご紹介しようと思います。 今回は軽く、SONY BANKなんてどうかなと思ったら これはオールFlashでしたねぇ。。。 Flashはここで説明しきれないので どうやってるかはお話できませんが ここのMONEY KITのページは見るだけでもけっこう面白いですよ。 窓の周囲にぐるっと並んだアイコンはクリックするのでなく 窓の中にドラッグ＆ドロップしてくると、内容が表示されるのです。 このインターフェイスってわかりにくそうなので 銀行みたいなお堅いサイトではまず採用されないはずですが さすがSONYってことでしょうか？ http://moneykit.net/ ======================================================== ◆◇◆そして最後に◆◇◆ ●バックナンバーをご希望の方はお知らせください。 1999年４月からのバックナンバー(NO.24以降)は ウィークリーまぐまぐで閲覧できます。 http://www.mag2.com/ ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆ 発行元：Atelier Ｈ 管理者：aska E-mail(Becky!)：info@atsh.com URL：http://atsh.com/ ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆ |