molog

HTMLのセレクトボックスは、CSSではほとんどスタイルがあてられないので
デザイン重視なサイトを作成する際にこちらを使用させていただきました。

jQuery.selectable.js

セレクトボックスを拡張するjQueryベースのライブラリです。

プルダウンの表示形式を「selectable」または「simpleBox」から選択できますが
今回はプルダウンにデザインを当てるだけのsimpleBoxを使いました。


▽画像の用意

select_right.gif


select_left.gif

▽CSS調整
セレクトボックスの大きさなど
skin/base.css

プルダウンの背景色やテキスト色など
skin/natural/style.css または skin/selectable/style.css



こんな感じになりました。


・背景を画像に変更
・プルダウン時にアニメーションをつける
・プルダウン部分のカラーを変える
といったことが簡単にできるので便利です。

DBから13桁の数値を取得して、PHPで表示しようとした際に
なぜか全く関係のない「2147483647」という数値がずらりと表示されました。

原因はPHPのinteger型の最大値以上の数値を取得しようとしていたためでした。


解決策として、以下のようにSQLで文字列として取得しました。
（表示するだけだったので..）

SQL> SELECT TO_CHAR(1234567890123) FROM DUAL;

これに関連して。
SQL*Plusでは、NUMBER型の列の表示文字数は
デフォルトで10桁となっています。
10桁以上の数値の場合は指数表記となります。

SQL> SELECT 1234567890123 FROM DUAL;

1234567890123
-------------
1.2346E+12

これを指数表記にしたくない時はNUMWIDTHを変更します。

SQL> SHOW NUMWIDTH
numwidth 10
SQL> SET NUMWIDTH 13
SQL> SELECT 1234567890123 FROM DUAL;

1234567890123
-------------
1234567890123

ちなみにNUMWIDTHの範囲は2から50までで
NUMBER型の桁数が一括で変更されるようです。


参考：SQL*Plusオプション一覧

社内で毎週勉強会をしていますが、今日のテーマは「デザインのいいHTMLサイト」でした。
一人3サイト発表だったのでここに残しておこうと思います。

・ 千葉県警察　http://www.police.pref.chiba.jp/
使いやすさとデザイン性、ナビゲーションがしっかりしている。メニューのJavaScriptの使い方がいいと思います。

・ Cold Stone Creamery　http://www.coldstonecreamery.co.jp/
ボタン・フッターの形、模様の使い方、トップのFlashなど細かいところの作りこみがしっかりしている。使い方の難しい赤をうまく使っていると思います。

・ ungarbage　http://www.ungarbage.com/
サイト全体が紙の質感で統一されていて、色使いもかわいい。CSSハックを使わずに組んであるので、見習いたいです。



最後にお勧めのデザインの本を載せておきます。（だいぶ有名ですが・・）

ノンデザイナーズデザインブック

タイトル通り、デザイナーではない人向けのデザイン本。
デザインというと抽象的なもので、どこをどうしたらいいか言葉にしにくいものですが、その基本的なルールをまとめてくれている本です。

私もデザインを勉強し始めたときに紹介されてたのですが、今でも悩んだときは読み返して参考にしている頼りになる存在です。デザインだけではなく、ドキュメント作成などにもすぐに活かすことができるので、お勧めです。

とりあえず会社に置いておきますので、読みたい方はどうぞ。

画像を使わず、CSSだけでシンプソンズのお父さんを描いているサイト。

http://www.romancortes.com/blog/homer-css/


CSSを切ってみたり、ソースを覗いてみたりするとおもしろい。
「0」とか「8」とか「/」だけでここまでできるんですね。
positionを調整するためのブラウザプレビューの回数が凄そうです。

暇があったらやってみたい・・。

Akashic Recordsさんに紹介していただいたカフェ。
ホームページの地図の「かにや」っていうのが気になっていたので、その確認もかねていってきました。
↓
http://fiveandfivecafe.com/access.htm
「ゴーゴーカフェ」かと思っていたら、「ファイブアンドファイブカフェ」でした。。


二子新地駅から右に出てすぐのところです。

かわいい蛙がお出迎えです。

1Fで注文とお会計を先に済ませます。席は2Fと3Fがあって、それぞれの階インテリアのテイストが違ってこれまたイイ感じ。
2Fは奥に座敷があって和む系。（写真ないですが・・。）

3Fは低いソファーがいっぱいあって照明も落としぎみで大人系。

ギャラリーでもあるそうで、壁や階段の至る所にかわいいイラストが描かれてました。
メニューとか、番号札とか細かいところにも凝ったイラストが描かれていておもしろいです。

入口のところに店内のイラストを描いたとおぼしき方の作品が飾られていました。
boojilさんというそうです。cafeのオニーサンが教えてくれました。
味があってイイ！
イラストを描ける人は尊敬します。

絵本や雑誌もたくさんあるので、ボーっとしたいときには良さそう。


久しぶりにいいお店に出会いました。
また休みの日に行きたいです。

ちなみに「かにや」の正体は・・・。








季節料理屋さんでした。

蟹屋じゃなかった・・。

55CAFE
http://fiveandfivecafe.com/

↓こういうxmlをプログラムで書き出して

<aaa>
<bbb>1</bbb>
</aaa>

xmlの<bbb>タグ中身を　test　という変数にして

if(test == "0") {
○○○○
} else if(test == "1") {
△△△△
} else {
□□□□
}

っていうif文を書いたときに、xmlタグの中身が1なのに□□□□が実行されるという挙動で悩まされました。

原因はxmlタグの中に改行が入っていたせいで、0でも1でもないよーってことだったようです。
そこで、

indexOf();

という関数を教えていただき、それで回避しました。



使い方
[検索対象の文字].indexOf([検索する文字],[検索開始位置]) ;


検索対象の文字列に検索する文字が含まれてたらその開始位置を、
含まれていなかったら-1を返します。

これで直りました！
↓


if(test.indexOf("0") != -1){
○○○○
} else if(test.indexOf("1") != -1) {
△△△△
}


xmlは侮れない・・

すぐに「to_charってなんだっけ・・・・・・・」となってしまうのでメモ。

DATE型をupdateやinsertをするときは、to_date()関数で文字列を日付に変換する。
DATE型のフィールドに条件をつけるときは、to_char()関数で日付 を日付書式 の文字列に変換する。

こんなかんじ↓

update
[テーブル名]
set
[DATE型のフィールド名] = to_date('2008/05/10 15:00:00','YYYY.MM.DD HH24:MI:SS')
where
to_char([DATE型のフィールド名],'YYYY/MM/DD') = '2008/05/14'



これはダメなんだって・・↓

where [DATE型のフィールド名] like '2008/05/14%'

LAのインタラクティブエージェンシーのポートフォリオサイトですが、1人のキャラクターになって海外の人とチャットができます。日本語じゃないですが、なんとかなるもんです。空を飛んだり、なぜか相手に暴行を加えることもできます。
会社のサイトでありながら、この作り込みはすごいし独特の世界観があると思う。

何よりドメインがイイ。
REDだけにRGBカラーの「ff0000」とは。

「RED INTERACTIVE AGENCY」
http://ff0000.com/

phpでカンマとかスペース、ハイフンなど、どこかで文字列を区切りたいときはexplode関数を使うと便利みたいです。


使い方 ：
配列変数 = explode(ここに指定した文字で分解, 分解する文字列, 分解する回数);


ある案件で、「1111-aaaa-222-bbb-333-cc」のような形式の文字列を、ハイフン区切りで上位3つにするというのがあったので、これを使ってみました。

$ex = explode("-", "1111-aaaa-222-bbb-333-cc", 4);

とすると、$exの値は、
1111
aaaa
222
bbb-333-cc
という風に4つに分解され、最後の配列に文字列の残りすべてが入ります。
で、

$data = $ex[0]."-".$ex[1]."-".$ex[2];

という感じでくっつけなおして、ハイフン区切りで上位3つを取得することが出来ました。
もっといい方法あるかな？

今日から仕事の足跡を残していきます。
BIGLOBEにしてみましたが、まずはこのデザインを何とかしたい・・。