2009/08/06

画像の最適化

スライスをするときにどの画像フォーマットで書きだそう?と迷うことがよくある。
写真はjpg、色数の少ないイラストはgifと決めていたけれど、本当にそれでいいのだろうか?

Web用に画像を書きだすには、以下の3つの画像フォーマットを使用する
簡単な特徴は以下の通り。
・GIF
最大256色、可逆圧縮、透過、アニメーションGIF
・JPG
最大17万色、非可逆圧縮、高い圧縮率
・PNG
最大17万色、可逆圧縮、JPGよりサイズ大、透過
(GIFみたいなぎざぎざなしで透過画像が作れる)
またPNGにはPNG-8、PNG-24、PNG-32などいくつか種類がある。

PNG-8…IE6でGIF並みの表現があり、透過もOK、可逆圧縮
(PNG-24や32を扱いたい場合でも、PNG-8でいけないかを確認し、
できるだけPNG-8を使用する)←軽い・早い!
PNG-24、32はIE6以前のブラウザできちんと表示されず
jsなどの力を借りる必要が出てくる。

さらに縮小化したい方はこちらを参考に。
画像サイズを縮小化する4つの手順(画像劣化なし!)
http://journal.mycom.co.jp/news/2008/11/19/027/

2009/07/24

CentOSにMTをインストールする!

Linuxについてちらほら研究していましたが、もともとはそう、MT環境を構築するためのLinuxだった。。
では早速。


まずはMT4(無償版)のインストールから~
http://www.sixapart.jp/movabletype/license.html#personal

パーミッションがどーのこーのと言われるので、解凍したフォルダをいったんユーザーのフォルダへ移動
MT-4_261-ja.zip ⇒ MT-4.261-ja
(/home/ccoro/以下へ移動)


さて、この作業は必要だったのかなぞですが、一応この手順でやったので…
■参考サイト
http://blog.servered.net/2008/01/yum-rpmforge.html
---
root@host bin]# wget http://dag.wieers.com/rpm/packages/rpmforge-release/rpmforge-release-0.3.6-1.el5.rf.i386.rpm
[root@host bin]# rpm -Uvh rpmforge-release-0.3.6-1.el5.rf.i386.rpm

[root@host bin]# vi /etc/yum.repos.d/rpmforge.repo
編集モードで以下のように書き換える
enabled = 1

enabled = 0

保存して終了(:wq)

[root@host bin]# rpm --import http://dag.wieers.com/rpm/packages/RPM-GPG-KEY.dag.txt


続いて、モジュールを一気にインストール
■参考サイト
http://wp.serpere.info/archives/177#
---
※リポジトリを自動で追加してくれるrpmパッケージを有効にしたいとき
→yumの実行時に「--enablerepo=rpmforge」 オプションを付ける
1.
sudo yum --enablerepo=rpmforge install \
perl-Image-Size perl-SOAP-Lite perl-Crypt-DSA perl-XML-Atom \
ImageMagick-perl perl-Archive-Zip perl-IO-Compress-Zlib perl-PerlIO-gzip
2.
#DB接続モジュールは今回MySQLで。
sudo yum --enablerepo=rpmforge install perl-DBD-MySQL

ここらへん、結構時間がかかります。


あとは「MT-4_261-ja」フォルダをさらにrootの権限で(su -コマンド)
/var/www/cgi-bin/以下へ移動
名前の入力が面倒なので、「MT-4.261-ja」という名前を「mt」に変えてしまいます!

以下のフォルダを作成
(mkdir フォルダ名 ディレクトリ)
/var/www/cgi-bin/html(アプリケーションディレクトリ)
/var/www/cgi-bin/html/blog(ブログディレクトリ)
/var/www/db(データベースディレクトリ)
もうひとつ「スタティックディレクトリ」というのが必要ですが、
これはMTをダウンロードすると中に入っています。

以後パーミッションの変更が必要ならば・・・
chmod 0777 ディレクトリ
■参考サイト
http://www.movabletype.jp/documentation/linux.html
(「パーミッション(権限)の設定」の項目を参考に3つの権限を設定)

ユーザーの変更が必要ならば・・・
chown ユーザ名:ユーザ名 ディレクトリ


そして最後に肝心なこと
SELinuxの設定!!
セキュリティが有効になっていたら
「mt」にアクセスしてもForbiddenが返されてしまいます。
■参考サイト
http://www.server-memo.net/linux-setting/selinux6a5f80fd306e505c6b62

getenforce
→Enforcing
となっていたら…

setenforce 0
を入力して、一時的に無効にしましょう。
(※次、リブートすると元に戻ります)


はい、これで完成!
ブラウザで
「http://localhost/cgi-bin/mt/」を叩くと…

「Movable Typeへようこそ」!!!!

あ~嬉しいぃぃぃ(ToT)/~
感動です。


補足
Apache(httpd.conf)の中での設定
■参考サイト
http://www.aconus.com/~oyaji/faq/apache_cgi4.htm

2009/07/15

tar形式で圧縮

PCが壊れてバックアップが必要になった!
メールをバックアップしたい!
というとき…

データの移行でファイルをまとめてzip形式で圧縮しようとすると、ものすごく時間がかかってしまう。
それを回避する方法がtar(ター)形式でまとめる方法。
あまり聞きなれない形式だけど、Linuxとかでよく出てくる。

tar形式の特徴
・中身を圧縮しない
・ひとつのファイルに固めるだけ

そのため容量にほとんど変化はないが、大量のデータを移動したいときには圧縮する時間分短縮できるので効率的。


設定方法は以下の通り。
ソフトが必要(ここではLhaplusを使用)


1.Lhaplus.exeの入っているディレクトリに移動し、開く




2.ダイアログが出るので、[関連付け/シェル]タブを開き、右下の「[圧縮]のサブメニュー項目」のところで「tar」を選択




3.[適用]を選択



これでフォルダの上で右クリックして[圧縮]を選ぶと、tar形式が選択できるようになる。

惜しいっ!!

主婦の知恵でふと考えた。

冷蔵庫の中身がいつでもパッと思い出せたら・・・
  • 夕ご飯何作ろうかしら?が分かる
  • スーパーで何を買うべきか分かる
  • 重複して買わなくてすむ
  • 眠っている食材を意識できる(賞味期限を忘れない!)

ということから、
冷蔵庫の中身を記録・閲覧できるリストがあったら!
とひらめいた。
自分の中ではかなりのヒット☆
もしかしてビジネスができるかもー!

なんてウキウキしていたら・・・・
すでにありました。。
ショミカン http://shomikan.jp/mypage/

悲しすぎます。
でもたとえばこれが携帯アプリケーションだったら?
とか
賞味期限だけを管理するんじゃなくて
今冷蔵庫に何が入っているかが分かるリストがあれば
素晴らしいと思う。

私にプログラミング能力があれば開発してみるんだけど。。。
あーあ、ビジネスチャンスが。残念。

2009/07/10

ファイルシステム(CentOS)

Linuxでは、フォルダのことをディレクトリと呼ぶらしい。

[CentOS内のディレクトリ構造]

/--- bin 一般ユーザーも利用可能なコマンドがあり、基本的な操作に
欠かせないコマンドを格納するディレクトリである。

├ dev Linux で使用するデバイスに適応するためのデバイスファイルが
置かれている。

├ home ユーザーのホームとなるディレクトリがこの下に置かれる。
例えば、"testuser"というユーザーがいれば、/home の下に
/testuserというディレクトリが存在し、ホームディレクトリとなる。

├ lost+found なんらかの理由で破損し、行き先不明となったファイルを
格納する場所である。

├ misc ファイルシステムを自動的にマウントする仕組みである
autofsによって利用される。

├ net /miscディレクトリと同様に、ファイルシステムを自動的に
マウントする仕組みであるautofsによって利用される。

├ proc システムのプロセスを維持するための各種ファイルが置かれている。

├ root ルートユーザーのホームディレクトリである。

├ selinux

├ sys sysfsのディレクトリである

├ tmp プログラムが動作するときに必要な一時ファイルを格納するディレクトリである。

├ var ログ、メール、プリントスプールなどのいろいろなシステムファイルが格納されるディレクトリであり、追加・更新など日常的に内容が変化するファイルが置かれている

├ boot Linux の起動に関するファイルが置かれている。

├ etc システム設定ファイルが入っているディレクトリである。

├ lib システムを起動するのに必要なドライバモジュールやライブラリファイル用のディレクトリである。

├ media CD-ROMやフロッピーディスクなどの外付けメディア用のディレクトリである。

├ mnt CD-ROM やフロッピーディスク、他のOS のパーティションなどをマウントする場所である。

├ opt 追加アプリケーションを格納する場所である。

├ sbin システム管理用のコマンドが置かれる場所である。

├ srv HTTP,FTPなどのサービス用のデータが入るディレクトリである。

├ usr 各種プログラムが置かれる場所である。さまざまなアプリケーションやその設定ファイル、ライブラリを格納する。

CentOSでCtrlキーとCapsLockキーを入れ替えたい

しばらくWindowsでキーマップを変更して使っていたもので
Linux環境でも同じように変更したくて検索してみた。

参考にしたサイト
CentOS 4 : CapsLock と Controlキーを入れ替える。 | ぶっちろぐ

-----
管理者としてログイン
$ su-

キーマップを扱うディレクトリへ移動
# cd /lib/kbd/keymaps/i386/qwerty

「jp106.map.gz」をコピーする
# cp -p jp106.map.gz jp106_Ctrl_CAPS.map.gz

-dオプションで解凍する
# gzip -d jp106_Ctrl_CAPS.map.gz

解凍したファイルを編集
# vi jp106_Ctrl_CAPS.map
keycode 29=Caps_Lock
keycode 58=Control

元ファイルも解凍して、2つのファイルの変更点を比較する
# gzip -d jp106.map.gz
# diff -u jp106_Ctrl_CAPS.map jp106.map

確認できたら元通りに圧縮する
#gzip jp106_Ctrl_CAPS.map
#gzip jp106.map

このディレクトリにjp106から始まるファイルがちゃんと存在するか確認
# ls -l jp106*
-rw-r–r– 1 root root 775 Feb 22 2005 jp106.map.gz
-rw-r–r– 1 root root 783 Feb 15 20:33 jp106_Ctrl_CAPS.map.gz

sysconfigファイルヘ移動
# cd /etc/sysconfig

keyboard内を編集(※赤字部分を編集)
# cat /etc/sysconfig/keyboard
KEYBOARDTYPE="pc"
KEYTABLE="jp106_Ctrl_CAPS"

リブートしなくてもよいように。
# /bin/loadkeys jp106_Ctrl_CAPS


・・・しかし、この通りにできたのに
なぜかキーマップを変更できていない。
なぜだろう。。

2009/07/02

Linux on Windowsの環境構築【VMware Player】

仮想マシン・ソフト「VMware Player」を入れてみた。
仮想マシンなら何かあったとしても起動前の状態に戻すことができるし、既存の環境には触れずに別のOSを使えるから安心。

作成する環境
ホストOS Windows Vista
ゲストOS Linux
(CentOS使用)

1.VMware Playerのインストール(最新版が入手できる)
個人情報の入力が必要
私の場合、バージョン2.5.2をダウンロード
保存先:C:\Program Files\VMware\

2.CentOSのミラーサイト「日本理化学研究所」から必要なファイルを入手
ダウンロードするファイル
「CentOS-5.3-i386-bin-1of6.iso」
~「CentOS-5.3-i386-bin-6of6.iso」まで6ファイル
保存先:C:\Program Files\VMware\CentOS5\

3.ディスクイメージのダウンロード
設定:EasyVMX!2.0
VM Name : CentOS5
GuestOS: Redhat Enterprise Linux 4
それ以外の設定はそのままでCreate Virtual Machine

4.CentOS5.zipができるので、ダウンロードし解凍
VMware Playerはiso形式のファイルを読み込めないため、
「CentOS5.vmx」をsakuraなどで開いて赤字部分を書き換える
(念のため、オリジナルは名前を変えてコピーしておく)
# Settings for physical CDROM drive
ide1:0.present = "TRUE"
ide1:0.deviceType = "cdrom-image"
ide1:0.startConnected = "TRUE"
ide1:0.fileName = "C:\Program Files\VMWare\CentOS5\CentOS-5.3-i386-bin-1of6.iso"
ide1:0.autodetect = "TRUE"

5.VMware Playerを起動し、「CentOS5.vmw」を開く
ダイアログが表示される
”仮想デバイスparallel0に接続できません。一致するデバイスがホストに存在しません。仮想マシンをパワーオンする度に、この仮想デバイスに接続を試みますか。”
→はい
”operating system~”と出て画面が止まってしまっている場合は、Enterキーを押す
再びEnterキーを押して、CentOSのインストールへ。
テストを始めるか聞いてくるが、時間がかかるので[skip]へ

言語の選択 [日本語]
キーボードの選択 [日本語]

警告がでるが[はい]を選ぶ
”選択したドライブ上のlinuxパーティションを削除してデフォルトのレイアウトを作成します”
再び警告が出るが[はい]で。
あとでカスタマイズするにチェックを入れて、とりあえずはGNOMEのみを入れる

CDを要求されるが、必ず[続行]で。(※[再起動]しない!!)

※以降、たびたびダイアログが出て[CD-ROMの変更]を求められるので、[デバイス]メニューで次のisoファイルを指定して[OK]する(~CentOS-5.3-i386-bin-6of6.isoまで)
私の場合、なぜかCentOS-5.3-i386-bin-5of6.isoを読んだ時点でインストールが完了してしまった・・・
”おめでとうございます!~”

6.「CentOS5.vmw」をsakuraなどで開き、先ほど書き換えた部分を元に戻す
# Settings for physical CDROM drive
ide1:0.present = "TRUE"
ide1:0.deviceType = "cdrom-raw"
ide1:0.startConnected = "TRUE"
ide1:0.fileName = "auto detect"
ide1:0.autodetect = "TRUE"

=その他の設定=
◆ようこそ!の画面での設定
・ファイアウォール
テスト環境にするので、[無効]を選択

・SELinux
デフォルト(Enforcing)のまま

・日付と時刻
[ネットワークタイムプロトコル]タブで
[ネットワークタイムプロトコル(ntp)を有効にする]にチェックを入れる

・ユーザーの作成
・サウンドカード
・追加のCD

その後、IDパスワードを入力する。



■解像度の変更
GUIにて、
システム/管理/ディスプレイ
[ディスプレイ設定]で[ハードウェア]タブを開く
[モニタータイプ]→[設定]
使用可能なモニターをすべて表示にチェックを入れ、
[モニター設定]タブに戻り、[解像度]を1280X1024に変更する
解像度の設定を1280X1024にする(好みの大きさで。)
再起動すれば設定が適用される

■キーマップの変更
・・・もやりたいけど、これは次回!!

=参考にしたサイト=

◆あるSEのつぶやき VMWare Player + CentOS5 環境構築メモ(2008/01/19)



うん、だんだん整ってきて嬉しい^-^
Linuxの勉強頑張ります。

2009/07/01

むずむず

やりたいことがまた増えてきた。。。
以下のページ、気になります。
時間があるときにやりたい&ゆっくり見たいのでメモ書き。
「Design Walker」さんから。


アルファベットを使ったロゴの作成のTips

真似からはじめるウェブデザイン

背景に使えるパターンいろいろ

サイト最適化に使えるツールいろいろ

Tableのデザインまとめ

ニュースレター テンプレートとツールいろいろ

吹き出しいろいろ

気がつけばもう7月。時間経つの早すぎ!!

今日は初めてWindowsの再インストールをやってみました。
保証書、取扱説明書、付属のCD-ROMは、
きちんと管理しておかないとこういう時に苦労する。
今日はそのことを十分思い知らされた・・・。

あ!first bootをハードディスクに戻すの忘れた。。。
明日やろう。

2009/06/14

SQLiteのコマンド

MySQLの勉強をしたら、SQLiteでもある程度コマンドとか同じかなーと思ってなめていましたが…
全然分かりません。

コマンドプロンプトでいろいろ叩いてみるものの、エラー続出。
まだいきなりやるには早かったようです。
初心者がプログラムをやるのは、本当に難しい。いろんなエラーが出過ぎてわかりまへん。

せっかくなので、今日学んだコマンドを。
.databases データベース一覧を表示する
.dump データベースをダンプする
.echo コマンド表示を設定する
.exit コマンドラインプロンプトを終了する
.explain EXPLAINコマンド実行結果の表示方法を設定する
.header ヘッダを表示するか設定する
.help コマンドの使用方法を表示する
.import ファイルからデータをインポートする
.indices テーブル名を表示する
.mode コマンド実行結果の表示方法を設定する
.nullvalue NULLを置き換える文字列を設定する
.output 実行結果の出力先を設定する
.prompt 標準的なプロンプトを変更する
.quit コマンドラインプログラムを終了する
.read コマンドファイルを実行する
.schema テーブルスキーマを表示する
.separator フィールド区切り文字を設定する
.show 設定値を一覧表示する
.tables パターンにマッチするテーブル名を表示する
.timeout テーブルロック長の時間(ミリ秒)を設定する
.width フィールドの表示幅を設定する


で、ついでに使えるSQLコマンドも。
ALTER TABLE テーブル構造を変更する
ATTACH DATABASE データベースを追加する
BEGIN TRANSACTION トランザクションを開始する
COMMIT TRANSACTION トランザクションをコミットする
COPY データをインポートする
CREATE INDEX インデックスを作成する
CREATE TABLE テーブルを作成する
CREATE TRIGGER トリガーを作成する
CREATE VIEW ビューを作成する
DELETE データを削除する
DETACH DATEBASE データベースを切り離す
DROP INDEX インデックスを削除する
DROP TABLE テーブルを削除する
DROP TRIGGER トリガーを削除する
DROP VIEW ビューを削除する
END TRANSACTION トランザクションを終了する
EXPLAIN SQLコマンドを解析する
INSERT データを追加する
ON CONFLICT データ衝突時の動作を設定する
PRAGMA 設定値を取得/設定する
REINDEX インデックスを再作成する
REPLASE データを置き換える
ROLLBACK TRANSACTION トランザクションをロールバックする
SELECT データを取得する
UPDATE データを変更する
VACUUM 不要領域を回収する

ファイルのアップロード

PHPでファイルをアップするには、フォームに以下のコードを追加する
<input type="file" name="image" size="40">

POSTされてきた画像をプログラム内で扱うには、PHPのスーパーグローバル変数「$_FILES」を使用
例)
$upload_file = date("ymdHis")."_".basename($_FILES["image"]["name"]);
$upload_path = "<保存先のディレクトリ名>".$upload_file;
$upload_url = "./images/".$upload_file;
move_uploaded_file($_FILES["image"]["tmp_name"],$upload_path);

2009/06/10

Enterキーはなぜ2つあるか

おなじみEnterキー。
テンキーにも小さなEnterキーがあるし、いったい何の意味があるんだろう?って思う人多いのでは?

実はこのEnterキー、違う役割があるんです。

たとえばPhotoshopで文字ツールを使用して、テキストを編集している途中で
メインのEnterキーを押すと・・・?

そうです。改行されます。


一方、同じ状況で
テンキーのEnterキーを押すと・・・?

なんと、改行ではなくてテキストの確定になるんです!!
つまり文字ツールの編集終了になって、通常の状態に戻るんです。

すごーーーーーい!パチパチ☆

ようやく一段落。

ここ1カ月くらいは半Wワーク的な勢いで仕事をしてたので
ようやく解放されてほっとしてます。

さて、私がこれからやりたいことはたっくさーん。
Ruby,PHP,JS,FlashCS4、Fireworks・・・
気になる気になる!!
時間と気力の勝負です。

新しい会社に入って1か月。
今の会社では、みんなすごく向上心があって日々せっせと勉強してるけど、私はみんなに早く追いつきたいし、むしろ追い越したいとも思う。
現場で制作に携わるのは初めてだけど、私だってそれなりに勉強してきた意地があるので、絶対負けたくないのだ!小さい。。。
でもどうせやるなら本気で行こうと思う。

上に書いたようなことは直接仕事に結びつかないのが悲しいところだけど、CSSももっと極めたいなーと思う。これから仕事で出会った発見はここにメモしていこうと思います♪
ではではまた。

2009/06/02

楽しくWeb!

今日は私のお気に入りツールをご紹介。

まずは大好きなFirefoxのアドオン「Firebug」!!
大好きなんて言ったら変体がられるけど、でも好きなんです。

ほかにもアドオンは「Web Developer」と「HTML Validator」を入れています。
便利なのは「Colorzilla」。ブラウザ上の色の情報を16進数でそのままGET♪素敵です。

あと関係ないけどFirefoxつながりで、「Firebug」の虫のマークが変更できるって知ってます?
デフォルトではゴキブリみたいな虫ですが、私はハチさんに変えてます。
ほかにもイモムシやテントウムシなどがあるんですよ。かわいい^^
http://koress.jp/2008/07/firebug.html


それからそれから
■Launchy
http://webos-goodies.jp/archives/50752356.html
アプリケーションの起動が一瞬です。

IETester
http://coliss.com/articles/browser/ie/928.html
最近ご紹介しましたがIE全バージョンでチェックできます。

■Flexible Renamer
http://hp.vector.co.jp/authors/VA014830/FlexRena/
ファイル名を一括変更

Skype
http://www.skype.com/intl/ja/
言わずと知れた無料チャット&ビデオ電話

Winshot
http://www.forest.impress.co.jp/lib/pic/piccam/capture/winshot.html
ショットをバンバンとります

GmailGoogle Docs
http://mail.google.com/mail/help/intl/ja/about.html
https://docs.google.com/
8GB程度の容量を持つメールの王様です。
チャットもできるし、ほかのアプリケーションと連携していて超賢い!
何はなくともつけっぱなしてます。

英辞郎
http://www.alc.co.jp/
アルクが提供する多機能な英和・和英辞典
例文がたくさんあって、使いやすい。


・・・こんなとこかなあ。
今日のところはこんな感じで。。

それにしてももう6月です。
早いなあ。

2009/05/28

IE5.5再来!!?

久しぶりの投稿です。
最近忙しすぎてなかなか書けなかったけれど、今日は個人的に感動の発見があったのでメモします。

IE8が登場してあとはIE6がいなくなれば・・・と思っていた矢先、仕事でIE5.5対策を強要されてしまい、IE5.5~8までをカバーすべくここ数日奮闘していました。

visibility:hiddenを使ったロールオーバーをやっていたのですが、IE5.5だけどうしてもうまくいかなくて悩まされていたのです


HTMLソース
<ul>
<li><a href="home.html"><img src="nav_home.jpg" alt="home" width="12" height="30" /></a></li>
....
</ul>



CSSソース
li.nav {
width:120px;
height:30px;
background:url(nav_home_on.jpg) no-repeat left top;
}
li.nav a {
display:block;
width:120px;
height:30px;
}
li.nav a:hover {
background-color:transparent;
}
li.nav a:hover img {
visibility:hidden;
}


ほかのブラウザ(IE6~8、FF2.0、3.0)では全部見えているのにいったいなぜ??!
と思っていたら・・・

なんてことはない、

li.nav a:hover {
background-color:transparent;
}

「-color」を消したら見事反応しました!!
パチパチパチー☆

こんなことだったのか。勉強になりました。。。


それにしても世の中便利なツールがあるものです。
IETester
IEの全部のバージョンを一気に表示させることができる
だけどすぐ落ちちゃうのはなぜ??!

あとは一台で幅広い環境でのチェックができるように
Firefox2.0と3.0の同居
FF2.0はサポートが終了したので、探すのに苦労しました。
参考にしたサイト
http://www.koikikukan.com/archives/2006/11/06-002826.php

仮想マシンの導入でネイティブIE6.0を印刷用に

してます。こんなことできるなんて知らなかったー!!

2009/04/27

と、思ったけれど?!


Ruby②を本屋さんでパラパラ見てみたら、
アルゴリズムがあーだとかファイル構造がこーだと
あまり何につながるのかパッと浮かばない感じだったので
モチベーションが上がらず・・・

結局、これ買いました☆

どうでしょう?このワクワクするタイトル。
もう変数や配列の説明は、詳しく要らないので
ちょっとレベル上がりますが、ここから行ってみたいと思います!

2009/04/24

やりました!!

ようやく「ちょっと実用掲示板」が完成しました。
いっぱいエラーが出て、どうなることかと思ったけれど、ちゃんと稼働して、新規入力・検索・コメント挿入・初期化とかができるのを実感して感動しました~^▽^

PHPも面白いなぁ。
でも、
とりあえずはRubyだ!

さて、次の私のお目当てはですね・・・
Ruby②

これだ!
あー楽しみ♪

PHPからMySQLを操作する

ようやくPHPから操作する時がきた!

■PHPスクリプトでMySQLサーバーに接続する
|sample|
+-----------------------------------------------------------------------+
<?php
$s=mysql_connect("localhost","root","1234") or die("失敗です");
print "成功しました";
mysql_close($s);
?>
+-----------------------------------------------------------------------+
mysql_connect(サーバー名,ユーザー名,パスワード)
接続に成功すると、「データベース接続の値」を返す
失敗すると、「false」を返す

or die(メッセージ)
()内を表示して、スクリプトの実行を中止する(=exit())

mysql_close(データベース接続の値)
切断に成功すると、「true」
失敗すると、「false」を返す


■PHPスクリプトでクエリを発行する
|sample|
+-----------------------------------------------------------------------+
<?php
$s=mysql_connect("localhost","root","1234") or die("失敗です");
print "成功しました";
mysql_select_db("db1",$s);
mysql_query("INSERT INTO tb1 VALUES('K777','PHP太郎',20);
mysql_close($s);
?>
+-----------------------------------------------------------------------+
mysql_select_db(データベース名,データベース接続の値)
データベースを指定する
mysql_query(SQL文)
SQL文を発行する
(※SQL文のデリミタはつけない、「"」「'」を入れ子で使うかヒアドキュメントを使用)


■PHPでSQL文の実行結果を受け取る
$re=mysql_query("SELECT * FROM tb1);で
print $re;としても、mysql_queryの返す値が単純な文字列でないため結果が実行できない!

mysql_fetch_array(結果)
SQLコマンドの結果を配列として得る
呼び出すときは、while文を使って
while($kekka=mysql_fetch_array($re)){
print $kekka[0];
・・・
}
とするとよい。

|point|
mysql_queryで実行されるクエリで、エラーが起こった場合、
mysql_query(・・・) or die(mysql_error());
でエラーの内容を表示できる


データベースに存在するテーブルの一覧を取得する
mysql_list_tables(データベース名,データベース接続の値):
|sample|
+-----------------------------------------------------------------------+
<?php
$s=mysql_connect("localhost","root","1234") or die("失敗です");
$re=mysql_list_tables("db1",$s);
while($kekka=mysql_fetch_array($re)){
print $kekka[0];
print "
";
}
mysql_close($s);
?>
+-----------------------------------------------------------------------+

2009/04/12

環境変数

phpinfo関数による表示の中の「Apache Environment」のブロックにあり、「Webサーバのソフトウェア」「クライアントIPアドレス」などの重要な情報が保管されている
REMOTE_ADDRは、使用中のマシンのIPアドレス(localhostの場合127.0.0.1)

getenv関数
環境変数を返す、引数に指定した情報を得られる
getenv(得たい情報の項目)
得たい情報の項目得られる情報
SERVER_SOFTWAREWebサーバーのソフトウェア
SERVER_PORT使用しているポート
PATHサーバーに設定されているPATH
REMOTE_ADDRクライアントのIPアドレス
HTTP_USER_AGENTクライアントのブラウザの情報


gethostbyaddr関数
IPアドレスからホスト名を得る
gethostbyaddr(得たいホストのIPアドレス)

例)クライアントのホスト名を表示する
<?php
print gethostbyaddr(getenv("REMOTE_ADDR"));
?>

PHPの基礎知識

「MySQL+PHPでWeb上でデータベースを操作する」をテーマに進めていくので、
まずはPHPの基礎を学習する。
気になったものだけを箇条書きでメモ。

・PHPでは変数に型を宣言しなくてよい
[変数のデータ型]
integer(整数)
float(浮動小数点)
double(浮動小数点)
string(文字列)
boolean(論理値)
object(オブジェクト)
array(配列)
NULL(空)
・文字列をつなげるには「.」
例)「あいうえお」と出力したい場合
「"あいう"."えお"」

◆「"」と「'」の違い◆
文字列のデータは「"」か「'」で囲む
「" "」で囲んだ変数は展開され、「' '」で囲った変数は展開されない
「" "」で囲った文字の中に「"」の文字を入れたり、「' '」で囲った文字の中に「'」の文字を入れたりすることはできない
[対処法]
・「\"」でエスケープ処理する
・「' '」と「" "」を組み合わせる

MySQLによるWebアプリケーションを作成するとき、PHPスクリプトによってSQL文を発行する
SQL文を文字列としてmysql_query関数の引数にする
mysql_query(文字列としてのSQL文)
例)INSERT INTO tb1 VALUES('A101',・・・)のSQL文を発行する
mysql_query("INSERT INTO tb1 VALUES('A101',・・・)")

■今回扱うPHP関数
関数名内容
dieスクリプトの実行を中止する
execコマンドを実行する
phpinfoPHPの情報を表示する
mysql_connectMySQLサーバーに接続する
mysql_closeMySQLサーバーから切断する
mysql_select_db使うデータベースを指定する
mysql_fetch_arraySQL文を発行する
mysql_error最後に起こったエラーを返す
getenv環境変数を得る
gethostbynameホスト名からIPアドレスを得る
gethostbyaddrIPアドレスからホスト名を得る


(※mysql_で始まるのは、MySQLデータベースを扱う関数)

date関数
日時の書式返す値
g12時間単位の「時」
h12時間単位の「時」2桁表示
G24時間単位の「時」
H24時間単位の「時」2桁表示
j「日」
l「曜日」の英語の文字列
F「月」の英語の文字列
n「月」
m「月」2桁表示
s「秒」2桁表示
Y「年」
y「年」2桁表示


その他
■「繰り返し処理」
for(初期値;繰り返しの条件;変化){
繰り返し実行する処理
}

while(繰り返しを行う条件){
繰り返しの処理
}
最初にカウンタ変数の初期値を設定する
繰り返していくうちに、必ず繰り返しを行う条件がfalseになるようにする


do{
繰り返しの処理
}while(繰り返しを行う条件)

■「条件分岐」
if(条件が正しいときに実行する処理){
else{
条件が正しくないときに実行する処理
}

switch(変数){
case 変数の値1:
処理1
break;
case 変数の値2:
処理2
break;
...
default:
すべての条件が正しくないときに実行する処理
}
変数がcaseの条件と一致した場合、それぞれの処理が実行される
一致する値がなければ、default:以降の処理を実行


■「配列」「連想配列」

IE6で透過pngを表示する

久しぶりにやってきました、この課題。
前回やったときはスイスイできたはずなのに、なぜか今回はうまくいかない・・・。
結局最終的にできたのは、この方法でした。

透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる(参考)

iepngfix.jsをダウンロードし、ディレクトリに保存

②透過pngを含むHTMLファイルの<head>~</head>内に、以下を記述
<script language="JavaScript" type="text/javascript" src="iepngfix.js"></script>

③CSSの背景画像として読み込んでいる タグorIDorクラス に、以下を設定
* html タグorIDorクラス {
behavior: expression(IEPNGFIX.fix(this));
}

----
ほかに試した方法で、JQueryを使う方法がある。

①以下をダウンロード
pngFix.zip

②この中の2つのjsファイルをコピーし、ディレクトリに保存
・jquery-1.3.2.min.js
・jquery.pngFix.js

③HTMLファイルの<head>~</head>内に、以下を記述
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>

・・・でもなぜかこれを<a>タグに読み込んだCSSの背景画像として表示させると、IE6でリンクがきかなくなってしまった。そのため、今回は見送ります。。。
私のやり方が間違っている可能性もあるので、またトライしてみたい。

2009/04/05

SELECTしたコードからSELECTする(サブクエリ)

サブクエリが使えるのはMySQL4.1以降のみ

サブクエリ・・・「副問い合わせ」
クエリを実行して取り出されたデータを使って、さらにクエリを発行する(2段階処理)

例えば、
最も売上の高い社員データを抽出するにあたって、

SELECT * FROM tb ORDER BY uria DESC LIMIT 1; (・・・①)

という方法でやってみたけれど、
サブクエリを使うと、こんなやり方ができる。

SELECT * FROM tb WHERE uria IN (SELECT MAX(uria) FROM tb); (・・・②)

もし最高売上獲得社員が複数いた場合、
①のやり方では一人しか抽出できないので、正確に最高額を売り上げた社員を割り出すことはできないが、②のやり方なら何人いても大丈夫!

GROUP BY関数
MAXAVGSUMなどの集計を行う関数はGROUP BY関数と呼ばれ、本来はグループ化したときの値を処理する。ただし、「GROUP BY・・・」がない場合は、テーブル全体を1つのグループとして処理する。

INを使う -カラムを返すサブクエリ-
サブクエリがカラムを返す例
1段階目:サブクエリで条件に一致したカラムを返す
2段階目:その値を含むレコードを対象に抽出する

サブクエリの構文
SELECT 表示するカラム FROM テーブル名 WHERE カラム名 IN (SELECTによるサブクエリでカラムを抽出);

INではなく=(イコール)を使おうとすると、サブクエリが1件以上抽出された場合は
「Subquery returns more than 1 row」
というエラーになる。
INは「・・・の中のどれか」という意味になるので、安心。

EXISTSで、存在するレコードだけを対象にする
特定のカラムではなく、1段階目のサブクエリが「対象となるレコードが存在する」という情報を返す

NOT EXISTSで、サブクエリによって抽出されないレコードを対象にして処理する

2009/04/04

複数のテーブルを利用する

■2つのテーブルのレコードを集めて表示
(SELECT カラム名1 FROM テーブル名1) UNION (SELECT カラム名2 FROM テーブル名2);
3つ以上のテーブルの場合もUNIONでつなげる
条件をつけてカラムを抽出する場合、
SELECT * FROM tb WHERE bang NOT IN('A101');
重複を省く場合、
UNION ALL

■複数のテーブルを結合して表示する(内部結合
内部結合は、「JOIN」(あるいはINNER JOIN)により、キーが一致しているレコードだけを取り出す

SELECT カラム名 FORM テーブル1 JOIN 結合するテーブル2
   ON テーブル1のカラム=テーブル2のカラム;
カラム名が同じ場合、
   USING(カラム名);
テーブルが2つ以上の場合、
SELECT ~ FROM
テーブル名1
JOIN テーブル名2 結合の条件
JOIN テーブル名3 結合の条件
・・・
;

■複数のテーブルの全てのレコードを表示する(外部結合
外部結合は、一致していなくても一方のテーブルのレコードはすべての取り出す
※存在しない値は、「NULL」になる

・左外部結合(LEFT JOIN または LEFT OUTER JOIN)
一致したレコード+テーブル1の全データ
SELECT カラム名 FROM テーブル1
LEFT JOIN 結合するテーブル2
ON テーブル1のカラム= テーブル2のカラム;

・右外部結合(RIGHT JOIN または RIGHT OUTER JOIN)
一致したレコード+テーブル2の全データ
SELECT カラム名 FROM テーブル1
RIGHT JOIN 結合するテーブル2
ON テーブル1のカラム= テーブル2のカラム;

自己結合
同じカラム名が2つ表示されてエラーになるため、必ずエイリアスをつける
SELECT カラム名 FROM テーブル名 AS エイリアス1 JOIN テーブル名 AS エイリアス2;

自己結合の活用法
・すべての組み合わせを表示し、そこから条件をつけて必要なものを選べる
(順位付けをするにはORDERとGROUPを組み合わせて処理する必要がある)
SELECT a.nama,a.tosi,COUNT(*) FROM tb1 AS b WHERE a.tosi<=b.tosi GROUP BY a.bang;

UPDATE、DELETEコマンド 【データ編集・削除編】

■カラムのデータを修正する
UPDATE テーブル名 SET カラム名=修正する値;
・条件をつける
~ WHERE 条件
・並べ替え後の抽出
~ ORDER BY カラム名 LIMIT 限定数

例) ALTER TABLE tb ADD bikou VARCHAR(100);
   UPDATE tb SET bikou='no data';
     (一行で書くと、ALTER TABLE tb ADD bikou VARCHAR(100) DEFAULT 'no data';)
   UPDATE tb SET bikou='good!' ORDER BY uria DESC LIMIT 3;

■条件に一致したレコードをコピーする
CREATE TABLE 新規テーブル名 SELECT * FROM tb WHERE カラム名 LIKE '抽出する文字列';
すでに存在するテーブルにレコードを挿入する場合、
INSERT INTO 存在するテーブル名 SELECT * FROM tb WHERE bang LIKE 'A101';
・順番に並べ替え、抽出してコピー
CREATE TABLE 新規テーブル名 SELECT * FROM tb ORDER BY uria DESC LIMIT 4 OFFSET 1;

■条件に一致したレコードを削除する
DELETE FROM テーブル名;(テーブルのカラム構造自体は残る)
DELETE FROM テーブル名 WHERE 条件;
DELETE FROM テーブル名 ORDER BY カラム名 LIMIT 限定数;

2009/04/03

表示の工夫【関数の処理など】

エイリアス(alias)・・・本物を参照するためにユーザーが自由につけた名前。偽名。別名。ニックネーム。

■カラム名をエイリアスにする
SELECT カラム名 AS エイリアス FROM テーブル名;
※複数のカラム名を指定するときは、「,」で区切って「カラム名 AS エイリアス」を付け加えていく

■関数を使って計算する
平均 AVG()
合計 SUM()
個数 COUNT()

結合 CONCAT() ※文字列を直接指定することもできる

など他にもたくさんの関数がある

たとえば
円周率 PI()
のように、テーブルと全く無縁の関数もある
引数は不要の場合も必ず付ける!

・MySQLサーバーのバージョン
SELECT VERSION();

・現在使っているデータベースを表示
SELECT DATABASE();

・現在のユーザーを表示
SELECT USER();

・引数で指定した文字の文字コード(文字セット)を表示
SELECT CHARSET('この文字');

■文字列操作で活躍する関数
・右から取り出す:RIGHT関数
・左から取り出す:LIGHT関数
例) SELECT RIGHT(bang,2) FROM tb;
「bangの右から2文字を表示する」

・X番目から△個取り出す:SUBSTRING関数
例) SELECT SUBSTRING(bang,2,3) FROM tb;
「bangの2文字目から3文字分を表示する」

・繰り返して表示:REPEAT関数
例) SELECT REPEAT(' .' , tosi) FROM tb;
「「.」の文字をtosiの回数だけ繰り返して表示する」

・逆さから表示:REVERSE関数
例) SELECT REVERSE(nama) FROM tb;
「nama(氏名)のデータの文字列を逆さに表示する」

■日付・時刻の関数
NOW関数 現在の日付と時刻の値を返す
DATETIME型に設定してカラムを入力する

■条件を指定した選択
・レコードを決めて表示する
LIMIT関数
SELECT カラム名 FROM テーブル名 LIMIT 表示するレコード数;

・WHEREを使った抽出(条件に一致したレコードだけを取り出す)
SELECT カラム名 FROM テーブル名 WHERE 条件;
※条件には、比較演算子などを使う
[比較演算子]
=  等しい
>  より大きい
>= 以上
<  より小さい
<=  以下
<>  とは異なる
○ IN ×  ×のリスト中に○がある
○ NOT IN ×  ×のリスト中に○がない
○ BETWEEN × AND ××  ×から××の間に○がある
○ NOT BETWEEN × AND ××  ×から××の間に○がない

・文字列を使った条件
WHERE カラム名='文字列'

LIKE:あいまい検索
WHERE LIKE '~'
     「~の文字列を含む」
     NOT LIKE '~'
     「~の文字列を含まない」
[ワイルドカード]
  任意の文字列
_  任意の一文字

・NULLを使った条件
WHERE カラム名 IS NULL
           「カラムがNULLのレコードを抽出」
           IS NOT NULL
           「カラムがNULLでないレコードを抽出」

・重複したデータを省いて抽出
SELECT DISTINCT カラム名 FROM テーブル名;

・複数の条件を指定
AND かつ
OR  または
※ANDが優先して処理される
優先したい処理は()で囲むとよい

CASE WHEN:条件によって入力する値を変化させる
CASE
  WHEN 条件1 THEN 表示する値
  WHEN 条件2 THEN 表示する値
  WHEN 条件3 THEN 表示する値
・・・・・
ELSE すべての条件に当てはまらないときの値
END

・並べ替え
昇順
SELECT カラム名 FROM テーブル名 ORDER BY キーとなるカラム ASC;
降順
SELECT カラム名 FROM テーブル名 ORDER BY キーとなるカラム DESC ;
降順に下から5件だけ表示するとき
SELECT カラム名 FROM テーブル名 ORDER BY キーとなるカラム DESC LIMIT 5;

・表示するレコードの範囲を決める
SELECT カラム名 FROM テーブル名 LIMIT 表示するレコード OFFSET 表示開始レコードのシフト数;
表示開始のレコード数とは、「何個移動したところから表示させるか」を指定する数
(「指定した数の次」個目から表示)

・グループごとに表示
グループとして扱うことで、グループ単位での処理が可能になる
GROUP BY:グループ化
SELECT カラム名 FROM テーブル名 GROUP BY グループ化するカラム名;
指定したカラムの偶然選ばれたレコードが表示される
ただし、処理の対象は同じグループに属するすべてのレコードが対象

・グループごとの数を数える
例) SELECT bang,COUNT(*) AS 件数 FROM tb GROUP BY bang;
・グループごとの合計・平均を表示する
例) SELECT bang,SUM(uria) AS 合計 FROM tb GROUP BY bang;
   SELECT bang,AVG(uria) AS 平均 FROM tb GROUP BY bang;

・グループに分けて条件をつけて取り出す
「グループ化した後で抽出」
SELECT 集計したカラム FROM テーブル名 GROUP BY グループ化するカラム HAVING 条件;
「抽出してからグループ化」
SELECT 集計したカラム FROM テーブル名 WHERE 条件 GROUP BY グループ化するカラム;
「グループ化してから並べ替える」
SELECT 集計したカラム FROM テーブル名 GROUP BY グループ化するカラム ORDER BY キーとなるカラム;
+------------------------------+
 ◆記述順のポイント◆
  ①WHERE条件
      ↓
  ②GROUP BY
      ↓
  ③ORDER BY ○○ (DESC)
+------------------------------+

テーブルやレコードのコピー・削除、さまざまな抽出方法など

■テーブルのコピー方法
・テーブルのカラム構造+データのコピー
CREATE TABLE 新規テーブル名 SELECT * FROM 元となるテーブル名;
・テーブルのカラム構造だけをコピー
CREATE TABLE 新規テーブル名 LIKE 元となるテーブル名;
AUTO_INCREMENTやPRIMARY KEYの属性もコピーされる
・他のテーブルのデータのみコピー
INSERT INTO テーブル名 SELECT * FROM 元となるテーブル名;
・特定カラムを選択してコピー
INSERT INTO テーブル名(カラム名) SELECT カラム名 FROM 元となるテーブル名;
※データ型が同じであること!

■テーブル・データベース・レコードの削除
・テーブルを削除
DROP TABLE テーブル名;
・もし指定のテーブルがあれば削除する
DROP TABLE IF EXISTS テーブル名;
・データベースの削除
DROP DATABASE データベース名;
・レコード丸ごと削除
DELETE FROM テーブル名;
※丸ごとでなくレコードを選択して削除するときは
「WHERE」で条件を設定する

xamppのインストール

いつもいつも、悩まされるのが最初の環境作り。
今回もXPでは問題なくできたものの、
家のVISTAでやってみたらAPACHEのインストールがうまくいかない。
エラーメッセージ:
「ポート80または443(SSL)はすでに利用されています。Apache2をサービスとしてインストールするのに失敗しました。」

どうやらポート番号がかぶっている模様。。。
ネットで調べたらSkypeが標準でポート80番を使っているらしい。

Skypeの
[Tools > Options > Connections ]で、
Use ports 80 and 443 for incoming connectionsのチェックを外せばいいらしいが、
[Connections]がないんですけどぉ???

よく分かりません。。。

MySQLのコマンドいろいろ【カラム構造変更編】

■カラムの定義を変更する
alter table テーブル名 modify カラム名 データ型;
カラム順を変更するには、
alter table テーブル名 modify 対象カラム 場所;

■カラムを追加する
alter table テーブル名 add カラム名 データ型;
カラムの先頭に新規カラムを追加するには、
alter table テーブル名 add カラム名 データ型 first;
任意カラムの後に新規カラムを追加する場合、
alter table テーブル名 add カラム名 データ型 after 任意カラム名;

■カラムの名前と定義を変更する
alter table テーブル名 change 変更前カラム名 変更後カラム名 変更後データ型;

■カラムを削除する
alter table テーブル名 drop カラム名;

データ型<よく使うものだけ~>

「フィールド」…テーブルを構成する項目のデータ
「カラム」…実際に入力されたレコードを構成する項目のデータ

データベース名やテーブル名、カラム名には日本語を使わない!

■数値型■
INT正負の整数(-2147483648~2147483647)
DOUBLE小数点以下(「○E+△(○×10の△乗)」)
■文字列型■
VARCHAR(最大文字数)文字データ(255文字まで)
TEXT(最大文字数)文字データ(65535文字まで)
■日付・時刻型■
DATETIME日付と時刻 YYYY-MM-DD HH:MM:SS
DATE日付のみ YYYY-MM-DD

MySQLのコマンドいろいろ【テーブル操作編】

■テーブルの作成
create table テーブル名 (カラム名1 データ型1, カラム名2 データ型2 ...);
主キーを設定してテーブルを作成する場合、
create table テーブル名 (カラム名 データ型 primary key...);
主キーはレコードを厳密に特定できるように
・値の重複がない
・何のデータも入力しない(null)ことはできない
主キーの代わりに、一意キーunique)を指定することもできる
一意キーは、重複はできないがnullを入力することは可能
自動的に連続番号が入力されるauto_incrementは、主キーに適する
例:create table renzoku (a INT AUTO_INCREMENT PRIMARY KEY, b VARCHAR(10));

■すべてのテーブルの表示
show tables;
文字セットを指定してテーブルを作る場合、
(Shift_JISを指定してテーブルを作成)
create table テーブル名 (カラム名1 データ型1, カラム名2 データ型2 ...) charset=sjis;

■他のデータベースへのアクセス
select * from データベース名.テーブル名;

■テーブルのカラム構造の確認
desc テーブル名;
[見方]
null…何も入力しなくても許す!
default…何も入らなければこの値
Field…カラム名
Type…データ型

■データの挿入
insert into テーブル名 values(データ1,データ2...);
設定したカラムの順に、データを「,」で区切って記述
※文字列データは「"(ダブルクォーテーション)」「'(シングルクォーテーション)」で囲む

■カラム名を指定してデータを挿入する
insert into テーブル名 (カラム1,カラム2...) values(データ1,データ2...);

■一度にデータを入力する
insert into テーブル名 (カラム1,カラム2...) values(データ1,データ2...),(データ1,データ2...),(データ1,データ2...);

■データの表示
select カラム1,カラム2... from テーブル名;
全部のカラムの場合、
select * from テーブル名;

MySQLのコマンドいろいろ【データベース操作編】

■MySQLモニタの起動
mysql -u ユーザー名 -pパスワード
(※-pの後には半角スペースを入れない)
-----
mysql -u ユーザー名 -p
Enter password:
の方が、パスワードを盗み見られてしまうことがにため、より安全

■MySQLモニタの終了
exit(あるいは 
quit)

■新規ユーザーの作成
create user 新規ユーザー名 identified by '新規パスワード';

■ユーザー権限を設定
grant 与える権限 on データベース名.テーブル名 to ユーザー名;
[与える権限について]
・全権限 「ALL」
・指定する場合 「例)SELECT,UPDATE」
・全データベースの全テーブル 「*.*」


■ユーザーの削除
drop user ユーザー名;

データベースの作成
create database データベース名;

■データベースの一覧を表示
show databases;

■使うデータベースを指定する
use データベース名
(※SQL文ではないので最後に「;」は不要)
¥U データベース名

■現在使用しているデータベースの表示
select database();
データベースをあらかじめ選択して、MySQLモニタを起動するには、
mysql データベース名 -u root -p
とすればよい

Shift_JISでやっていくワケ【5C問題】

日本語を利用するため!
…なんだけど、それ以外の文字コードでは日本語に対応するターミナルソフト(例:コマンドプロンプト)が必要だったり、またShift_JISはWindowsでは初心者でも扱いやすいものだそう。

ただし、文字コードの中に「5C」が含まれてる文字では、エスケープ処理されて「¥」がついたり、文字化けすることがある。
代表的なものでは、 「十、申、貼、能、表、予、ソ」 など。


設定の変更はc:\xampp\mysql\bin内の「my.cnf」というファイルをメモ帳で開いて以下のように変更する。
(30行目付近)
[mysqld]
...
old-passwords
character-set-server = sjis
#collation-server = latin1_general_ci
skip-character-set-client-handshake


とりあえずはShift_JISで行きます。

2009/04/02

基礎からのMySQL


ようやくRuby①の本が終わりました…。(時間かかりすぎ)

そして今日からスタートです!!
データベースは初めてだけど、前にRuby on RailsやPHPをやったときにデータベースをちょこっと触っていたのもあって、今のところ順調です。このまま行けますように・・・☆

今回はxamppを使ってやりまーす。

2009/03/25

オブジェクト指向プログラミング

Ruby以前のお勉強 「オブジェクト指向プログラミング」について

そもそもプログラミング方法は2つある。
・手続き型プログラミング
  何らかのシナリオにしたがって順番に処理を記述するプログラミング方法
・オブジェクト指向プログラミング
  データを中心にモジュール化してプログラムを構成するプログラミング方法
  オブジェクト指向プログラミングで、その処理対象となるデータを「オブジェクト」という。

Rubyはオブジェクト指向プログラミング言語である。

2009/03/11

IE6に負ける。。。

どのブラウザでも同じように表示させるのは、とても難しい。
いまさらだけど、痛感している。

結局「中央可変の3段組みレイアウト」は、方法その3(テーブル)を使うことになった。
やっぱりテーブルは強い!崩れない!
なんとなく避けてきたけど、すべてのブラウザに対応できるコーディングを考えたときテーブルは必要な技術だと思った。

でもどうしてほかの方法ではできないのだろう・・・
いつか分かるといいなぁ。

Ruby①はじめてのプログラミング

これはいい!!

私はプログラム素人ですが、この本を読んで、今までいまいち曇り空だった部分がいっぱい解消できたのだ^-^
パソコンのいろはからハードウェアの構造、プログラムとは?ってとこから細かく解説してくれる。
特に文字コードとかコンソールの使い方などは、私にはすごくためになった。
最初からこの本に出会っていれば、もっと理解できたのになぁ~

どうやら3番まであるらしい。
今度こそ挫折せずにRailsを頑張りたい☆

2009/03/10

IEでボーダーが表示されない!?

例の案件をやっていて、ふと気付くとIEだけボーダーが表示されていない!!
しかもIE6もIE7も両方とも。。。
他のブラウザではバッチリなのに、全くやってくれます=3 フゥ。

いろいろ調べた結果、これで解消されました。

★症状★
IEでfloat内のコンテンツ、もしくはfloatに接する部分に指定したborderが一部表示されなくなる
★対処法★
borderを指定した要素にline-height:1emを指定する

なぜか今回の場合、line-height:1.2emとかにしてもダメだった。
このバグ、Peekabooっていうらしい。
勉強になります。

中央可変の3段組みレイアウト

仕事つながりで、CSSコーディングの依頼をもらった。
久々に気合いが入る。

が、しかし!今回は予想以上に険しい感じ。
相変わらずIE6に悩まされます…
というわけで、今回のメイン「中央可変の3段組みレイアウト」についての覚書き。

■方法その1■
ネガティブマージンで作る

<div id="wrapper">
<div id="container">
<div id="main">メインコンテンツ</div>
</div>
<div id="left">左コンテンツ</div>
<div id="right">右コンテンツ</div>
</div>


#container {
float:left;
width:100%;
}
#main {
margin-left:180px;
margin-right:230px;
background:yellow;
}
#left {
width:180px;
margin-left:-100%;
float:left;
background:red;
}
#right {
width:230px;
margin:-230px;
float:left;
background:blue;
}

■方法その2■
左カラムはfloat:left、右カラムはfloat:rightを指定


<div id="left"左コンテンツ></div>
<div id="right"右コンテンツ></div>
<div id="main"メインコンテンツ></div>

#left {
float:left;
width:180px;
background:red;
}
#right {
float:right;
widht:230px;
background:blue;
}
#main {
margin-left:180px;
margin-right:230px;
background:yellow;
}

■方法その3■
テーブル(width="100")を使って、真ん中のカラムはwidth:100%を設定

<table>
<tr>
<td id="left" valign="top">左コンテンツ</td>
<td id="main" valign="top">メインコンテンツ</td>
<td id="right" valign="top">右コンテンツ</td>
</tr>
</table>


table {
width:100%;
background:green;
border-collapse:collapse;
}
td#left {
width:180px;
background:red;
}
td#main {
background:yellow;
}
td#right {
width:230px;
background:blue;
}

いろいろあるんだなぁ。
今回は1の方法を採用してみまーす!

2009/02/24

Dreamweaver MX 2004 + PHP + MySQL で作る blog

今さらながら、
「Adobe Developer Connection Dreamweaverデベロッパーセンター」
というサイトを見つけた。
何か新しいテクニックを学ぶ導入として、なかなかおもしろそうなものがいっぱい!
PHPを学ぶのによさそうなサイトを見つけた。
ぜひ挑戦してみよう!

①4つの基本原則


  • コントラスト

  • 反復

  • 整列

ページ上のすべてのものを意識的に配置


すべての項目がページ上の何かほかのものと視覚的に関連していなければならない
より強く団結したユニットが生まれる


中央揃え<左揃え、右揃え
中央揃え=かしこまった、落ち着いた、穏やかな ←意識的に、楽しそうに使う
(大きすぎる文字、退屈な書体、窮屈な配置を避ける)
左・右揃え=緊張感のある、力強い


1ページに1種類の文字揃えだけを使う


2つの文字列を左右に離れて配置する場合は、ベースラインを揃える


最初の段落にインデントをしない
インデントする場合は1em(半角2個分のスペース)


強い線を見つけてそれを使う



  • 近接

関連する要素を近接させてグループ化する(知覚的にも視覚的にも組織化する)
情報の組織化


視線の流れを意識して配置


明瞭なコミュニケーションで、読者が一目見ただけでわかるようにする
「誰が、いつ、どこで、何を」という情報を即座に伝えることができるように。


空白を作り出して読みやすく


視線が止まる回数=視覚的要素の数
1ページあたり3~5個となるように近接させる

The Non-Designer's Design Book -Third Edition-





「ノンデザイナーズ・デザインブック」


プロデザイナーでなくたって、かっこいいデザインをしたい!という人のための、レイアウトデザインの基本書。


私はデザインは得意ではないけれど、きれいに見せたいというこだわりは強いので、デザイン書を読み漁るより、こういう本を一冊押さえておこうと思う。


・・・というわけで、今日からスタート!!