0

jQueryを使ったおしゃれなメッセージボックス

タイトルが非常につけにくかったのですが、フォームなどで送信が完了した時にでてくる「送信しました」みたいなメッセージをちょっとおしゃれに出す方法です。(gmailの出し方に似てるけどちょっと違う)
これによって簡単なフォームでは、完了ページをつくる必要がなくなります。

とりあえず、これがサンプル

適当なコメントを書いて送信ボタンを押すとページ右上に「送信しました」のメッセージがでてきます。
ここでは、ajaxを使って送信していますが、そうでない場合はコードを少し変える必要があります。

たったこれだけのものです。
あまりWEBで見かけなかったのでおいておきます。
ソースは下記の通り

<html>
<head>
<title>完了ページ</title>
<script type="text/javascript" src="./jquery.js" mce_src="./jquery.js"></script>
<script>
clearTimeout();
window.onload = function(){
$("#msg").hide();
}
function test (value) {
$("div#area").load('test.php', {
name: value
});
document.form1.area.value="";
$("#msg").fadeIn("slow");
var id = setTimeout(function() { $("#msg").fadeOut("slow"); }, 2000);
return false;
}
</script></style>
</head><body>
<div id="msg" style="background-color:#000; color:#fff; width:100px; position:absolute;
right:0px; top:0px; text-align:center;">
送信しました
</div>
<form name="form1">
<textarea name="area" rows="6" cols="40"></textarea>
<input type="button" value="送信" onclick="return test(form1.area.value);">
</form>
<div id="area"></div>
</body>
</html>
>

0

mySQLでデータベース毎に文字コードを変える

ずーと、DBはsjisを使ってきましたが最近ではもっぱらUTF8になりました。
しかし、sjis時代から運営し続けてる大規模サイトはサーバーをリプレイスしても、sjisで使いたいものです。
時代遅れといわれてもコードを書き換えるよりはましです。
でも、他のバーチャルドメインのやつはUTF8で動かしたい時は、下記のコードでデータベース毎に文字コードを設定してやります。
create database hoge character set sjis;
create database hoge character set utf8;

mySQLのチュートリアルでは、よくmySQL全体の文字コードについては書かれてるけど、こっちの方が便利かと思います。

0

プログラマーのための色見本サイト

WEBでモックを作るにしても多少のデザイン力が必要です。
なくても動作には関係しないけど、他人に訴える力がなければそのプログラムが埋もれてしまう可能性もあります。

残念ながらデザインもプログラムも一流という人間は希少です。

僕もプログラマーの端くれとして、WEBの業界にいますが、デザインはさっぱりです。
社内でつくったCSS・XHTMLのテンプレートに流し込むといった形です。
ただそれを何回も使ってたらさすが見るほうも見せるほうも新鮮味をなくしてしまいます。

デザインといってもモックレベルで必要なのは格好いいロゴでもなくかっこいいフォントでもありません。
レイアウトとカラーだけでそれなりにバリエーションをそろえられます。

僕は、レイアウトは社内で用意してもらった一般的な2カラムのやつにカラーはadobeのkulerというサイトを使っています。
他にもこういったカラーサンプルサイトはありますが、一番センスの良さと日本人にあったのがこのkulerです。
これをボックスやフォームの色を指定してやれば格好よくはなくてもダサいモックではなくなるはずです。

世の中には、ダサすぎるデザインのため本来のサービスの良さをなくしてるところが多々あると思います。その逆も然り。
その辺はまた今度書くことにします。

0

フォーム2.0

リマインダーサービスのRemember the Milkサインアップのフォームに感動した。

voxのフォームも確かこんなだったけど、入力に対してバリデーションのチェックがAJAXで瞬時に実行されます。
一通り入力しおわって、確認ボタンを押してエラー項目を指摘されるってのが1.0としたらこれはまさしくフォーム2.o
(エラー項目だけだしてhistory.backで戻らすのは0.1)
まあ、ここまでやらなくてもユーザーネームの重複チェックとかはいいですね。
都度サーバーに接続しないといけないのはサーバーにはかなり重労働だろうけど。。。

0

softbankのSSL

softbankのSSLは通常https://secure.softbank.ne.jpに強制的にリダイレクトして使用します。
どういうことかというとhttps://hoge.jp/hoge.htmlというURLがあるとするとsoftbankではhttp://secure.softbank.ne.jp/hoge.jp/hoge.htmlというURLにリダイレクトされてしまうわけです。

ただ不思議な現象が、直接ブックマークなどからhttps://hoge.jp/hoge.htmlにアクセスしてもそのようなリダイレクトは行われません。http://hoge.jp/内のリンクからhttpsに入らないとリダイレクトされません。
リダイレクトされなくてもhttps://hoge.jpで一応アクセスできます。
ただ、この場合絵文字が表示されません。

今、とりあえず回避方法としてリファラーがサイト外もしくはない場合、一度http://にリダイレクトしてhttps://にリダイレクトするようにしています。
出る時と入る時アラートが二回でてうっとうしいですが、あとはサイト内を相対リンクにしていれば何も問題はありません。

0

prototype.jsとjQueryのDOM操作

javascriptでprototype.jsを最近追随してるのがjQueryです。
jQueryの特徴はやはり簡単、軽いに加えてDOM操作が容易ということがあります。
ノードを取得する方法がCSSと似ていてコーダーやデザイナーでも簡単に操れます。
ノードを取得する際、prototype.jsでは$(“sample”)とするけどjQueryではCSSっぽく$(“#sample”)とします。

prototype.jsの$()は、あくまでdocument.getElementByIDのショートカットなのでdocument.getElementByIDと同じプロパティやメソッドが使えます。

よって下記の二つは同じ意味です。
document.getElementByID("sample").innerHTML="hoge";
$("sample").innerHTML="hoge";

でも、下記のjQueryのやつはエラーがでます。
$("#sample").innerHTML="hoge";
これはjQueryがノードに対して独自のオブジェクトを持たすためです。
もちろんinnerHTMLの代わりになるやつは用意されています。
(html()ってやつ)
jQueyを使うのであればこの独自のメソッドとプロパティを使う事になります。

0

smaryのプラグイン作成

smartyのプラグインもMTやXOOPSのようなものを想像しててあまり考えてなかったんですが、先日初めて触って便利さ&簡単さに気付きました。
ほしかったプラグインが掲示板のコメント等でhttp://やhttps://ではじまる文字列があれば自動でaタグ(リンク)をはってくれるというやつです。しかも他のタグはちゃんとエスケープさせて。
PHPのロジック部分でやってしまうとescape:”html”とかぶってうまく処理できずに<a href=http://yahoo.com>http://yahoo.com</a>と表示されていましたが、自作プラグインでなんとか解決。
まあ、処理の順番の問題といえばそれまでだけど。

まず、smartyディレクトリの中にlibs/pluginsってディレクトリがあるのでそこに命名規則にそったファイル名でプラグインを保存しておきます。

今回つくったのはnl2brやmailto等と同じ修正子プラグインmodifier.autourl.phpです。
この下記をmodifier.autourl.phpというファイル名でプラグインディレクトリに保存します。
<?
function smarty_modifier_autourl($string)
{
return ereg_replace("(https?|ftp)(://[[:alnum:]\+\$\;\?\.%,!#~*/:@&=_-]+)","<a href=\"\\1\\2\" target=_blank>\\1\\2</a>",$string);
}
?>

で、呼び出したいテンプレートで{$com|autourl}と記述してやればOK.
$comに含まれてるhttp://かhttps://から始まるものは自動リンクされます。modifier.****.php
function smarty_****_autourlこんな感じで****を修正子を合わせるだけでいいです。
もっとはじめに気付いておけばよかった。

0

fedoraでapacheが起動しない時

先日、fedora7をインストールしました。
テキストモードで使用しているため、新しさを実感できる機能というのはそんななかったです。
vmware上で動作が劇的に高速化するなんとかって機能があったけど失念。
これはちゃんと動けばうれしい機能です。

ただ、毎回fedoraをインストールした時に躓くのがapacheが起動しないという点。
問題はこの二つ。

  • iptables
  • seLinux

根本的な解決方法はわからず、毎回この二つの機能を停止させてとりあえず動作させてます。
■iptables
# chkconfig iptables off

■seLinux
# vi /etc/selinux/config
SELINUX=enforcing
↓↓
SELINUX=disabled

iptablesはsambaの邪魔もします。
ちゃんと使えば強固なシステムができるのだろうけど、俺専用ということで自分に言い訳を。

0

Google Gears

Google Gearsでました。
オフラインでもWEBアプリケーションが使えるというものです。

はじめの感想としては、「最新のデータ取得するにはネットにつなぐんでしょ」「フィードが全文配信じゃなければどうするの」ってが正直なところ。
GmailがGoogle Gearsに対応しても最新のメールとれないと意味ないやん。。。
Google Readerでフィードの半分だけみて、あとはネットつないでから、っていうのはいくら新物好きの僕にも全然魅力的じゃありません。
昔ダイヤルアップ接続時代に、とりあえずページを読み込んで、切断してオフラインで読むという行動に相通づるものがあります。
これから対応するアプリが色々でてくるだろうけど、さっそく対応を発表したのがタスク管理ツールのRemember The Milk
むしろこっちの方がアプリ内で完結するという理由でGoogleGearsの魅力を引き出してると思う。

ただ、このGoogle Gearsはよく考えれば何もオフライン時に使わなくてもローカルに保存する機能というのをうまく使えば普通のブラウジングがかなり高速化するのでないでしょうか。
必要な時に必要な分だけ取得しながらブラウジングしていく。
もしくは、オフラインがメインとなるアプリでたまに通信を必要とするもの。
こんな使い方があってもいいのかもしれません。

0

CSSのみでできるツールチップ

IE7がでてますます肩身の狭くなるポップアップですが、今は代替としてCSS+JavaScriptで疑似ポップアップのようにしてだすのが主流になってきそうです。

今回試したPure CSS Tooltipsは、それよりも少しライト感覚でCSSだけでポップアップをだします。
ただ、当たり前でがCSSのみなのでマウスオーバーしてる時しかでてきません。
手軽に使いたい時に効果を発揮しそうです。

■CSS

.ItemHeaderClient{
/*border-bottom:1px solid #717171;*/
padding:10px 8px;
line-height:1.5;
}
.ItemClient{
/* \*/clear:right;/* */
border:1px solid #8C9698;
margin:0 11px 9px 0;
background:#fff;
}a.blueClient{
color:#06c;
font-size:20px;
font-weight:bold;
}span.line{
_float:left;
margin-right:20px;
white-space: nowrap;
}

■XHTML
<a class=info href="#" mce_href="#">
これをマウスオーバー
<span>ここに説明文を書いておく</span>
</a>

たったこれだけツールチップが実現できます。