div要素の中で下揃えしたい

div要素の中で、ボタンを配置する際に、下揃えしたいということがあり調べたのでメモ。

まず親となるdivに、heightとposition: relative;を指定します。

下揃えしたい部品(今回の場合はボタン)にposition: absolute;およびbottom:0;を指定します。

bottom:0;は、数値を変えれば下からの位置を調整できます。

以下のサイトを参考にさせて頂きました。
CSSブログ – div内で下揃え

MySQLでコマンドラインからデータをインポートしたい

Webサービスを新しいサーバーに移す必要があり、DBの移行を行った際のメモ。

まずはデータベースを作成します。

# mysql -u root -p

mysql> create database IF NOT EXISTS db_name;
Query OK, 1 row affected (0.00 sec)

mysql> grant all privileges on db_name.* to db_user@localhost identified by 'hogehoge';
Query OK, 0 rows affected (0.00 sec)

db_nameがデータベース名、db_userがユーザー名、hogehogeがパスワードです。

よくLinuxのコマンドラインからmysqlコマンドを使ってSQLを流し込んでいるので、
この後に同じようにデータを流し込もうとしたら以下のようなエラーが出て「ん?」となりました。

# mysql -u db_user -p < db_dump.sql
ERROR 1046 (3D000) at line 28: No database selected

データベースが指定されていない・・・。確かに。
コマンドラインから流し込む場合に、どう指定するんだったっけ?となり調べました。

# mysql -u db_user --default-character-set=utf8 -p db_name < db_dump.sql

一番後ろにデータベース名を書くだけでした・・・。
ついでに文字コードも指定しました。

jQueryでname属性にアクセスするには

jQueryでid属性にアクセスするには「#」、class属性にアクセスするには「.」ですが、
name属性にアクセスする必要があり、はて何だったかな?と思って調べたのでメモ。

<input type="text" name="title">

上記のようにinputタグにアクセスするには以下のようにします。

$("input[name='title']")

inputタグの値を取得するのは、以下で可能です。

$("input[name='title']").val()

以下のサイトを参考にさせて頂きました。
Bugle Diary – [jQuery]inputのname属性にアクセス

ヘッダーのスクロールを固定したい

ヘッダー部分のスクロールを固定して、常にヘッダーが表示されているようにしたいという案件があったのでメモ。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="sample.css" media="all" type="text/css" />
</head>

<body>

<div id="header">
  ヘッダーです
</div>

<div id="contents">
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
  コンテンツ<br>
</div>

<div id="footer">
  フッターです
</div>

</body>
</html>

CSS

#header{
  position: fixed !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #4E9ABE;
  color: #FFF;
  z-index: 11;
}

#contents{
  margin-top: 110px;
  width: 100%;
  height: 1000px;
}
* html div#contents {
  height: 100%;
  overflow: auto;
}

#footer{
  width:100%;
  height: 50px;
  background-color: #4E9ABE;
  color: #FFF;
}

ヘッダにposition: fixed !important;を指定します。
スクロールした際に、コンテンツ部分が上に来てしまうため、ヘッダーにz-index: 11;を指定しました。

Postfixでcatch allを設定する

Postfixで、任意のメールアドレス宛てのメールを受信したい場合、catch allアドレスを設定します。

以前行ったときは、バーチャルドメインで設定したのですが、今回はサーバーに1ドメインしかないため

バーチャルドメインを使用せずにcatch allアドレスを設定できないか探してみました。

以下のサイトを参考にさせて頂きました。

トリアエズぶろぐ – Postfixでvirtualを使わずにキャッチオールアドレスを設定する
tkoshima.net – Postfix (Catch-All)

/etc/postfix/main.cfを2箇所修正します。

1.「#local_recipient_maps =」のコメントを外します。

# 変更前
#local_recipient_maps =

# 変更後
local_recipient_maps =

2.「luser_relay」に受信したいアドレスを指定します。

luser_relay = catchall

luser_relayには、他のドメインのメールアドレスも指定できます。

CakePHPでBootstrapを使う方法

CakePHPでTwitter Bootstrapを簡単に使えるようにプラグインを作成された方がいらっしゃいます。

Twitter Bootstrapプラグインの導入方法をまとめました。

1.Twitter Bootstrap本体をダウンロードする

以下のURLから、bootstrap.zipをダウンロードし、解凍します。

http://twitter.github.com/bootstrap/

cssファイル、imgファイル、jsファイルをそれぞれwebroot以下のフォルダに配置します。

2.TwitterBootstrapプラグインをPlugin以下に配置します。

$ cd project
$ git clone git://github.com/slywalker/TwitterBootstrap.git app/Plugin/TwitterBootstrap

もしくは以下からzipファイルをダウンロードします。

https://github.com/slywalker/TwitterBootstrap

ダウンロードしたTwitterBootstrap-master.zipを解凍します。

解凍されたTwitterBootstrap-masterディレクトリをapp/Plugin以下にコピーします。

コピー後のディレクトリ名をTwitterBootstrapにします。

cd /your_app_path
cp TwitterBootstrap-master app/Plugin/TwitterBootstrap

3.プラグインを読み込むように設定します。

app/Config/bootstrap.phpの最後に以下を追加します。

CakePlugin::load(array('TwitterBootstrap'));

4.default.ctpファイルを配置します。

app/Plugin/TwitterBootstrap/View/Layouts/default.ctpをapp/View/Layouts/bootstrap.ctpとしてコピーします。

以下のサイトを参考にさせて頂きました。

otukutunの日記 – CakePHPのTwitter Bootstrapプラグインの使い方

ASKLIFE – CakePHPのデザインをTwitter Bootstrapに変更する作業のメモ

Javascriptでsleepをかけたい

Javascriptでsleepをかけたいということで調べてみたら、Javascriptにはsleepがないんですね。

それでsetTimeoutを使って実装しました。


setTimeout( function() {

func1();

}, 1000 );

これで、1秒後にfunc1()が実行されます。

 

CakePHPのビューファイルで、URLを取得する方法

ビューファイルで、自分のURLを使いたい場合は、以下で取得できます。

$html->url();

第2引数を渡すこともできて、trueにすると、絶対パスを取得できます。

$html->url(’/’, true);

こうすると、コントローラー名までの絶対パスを取得できます。

その他、コントローラー名は $this->name

アクション名は $this->action

Webrootは $this->webroot

色々知っておくと便利ですね。

WordPressでソースコードを簡単に表示する方法

ソースコードを説明する場合、WordPressでソースコードを簡単に表示したいと思うでしょう。

SyntaxHighlighter プラグインを使うと簡単にできてしまいます。

まずはプラグインをインストールします。
管理画面からプラグインをインストールしている方は、プラグイン⇒新規追加と進み
「SyntaxHighlighter」で検索、いますぐインストールで導入できます。

手動で追加する場合は、SyntaxHighlighter からzipファイルをダウンロードします。
解凍したファイルを/wp-content/pluginsにアップロードします。

導入したら、プラグイン画面から有効化します。
以上で導入は終了です。

ソースコードを書く場合は、[sourcecode language="css"][/sourcecode]で囲みます。

[sourcecode language="css"]プログラム[/sourcecode]

と書くと、以下のように表示されます。

プログラム

参考サイト:
サイノメ.net
NetaOne

CakePHPでレイアウトファイルを変える方法

CakePHPでは、View/Layouts/default.ctp がレイアウトファイルとして使われます。

ログイン認証が必要なWEBシステムを構築する際に、ログイン画面は別のレイアウトにしたいというあるかと思います。
同じレイアウトを使用すると、ログインしていなくてもメニューが見えてしまうといった対策のためです。

まず、View/Layouts/以下に、レイアウトファイルを作成します。
例えば、View/Layouts/simple.ctpとします。
上記の例ですと、default.ctpからメニュー部分を削除したものになります。

次は、コントローラーで使用するレイアウトを以下のように指定します。

    public function login() {
        $this->layout = "simple";
        if ($this->request->is('post')) {
            if ($this->Auth->login()) {
                $this->redirect($this->Auth->redirect());
            } else {
                $this->Session->setFlash(__('Invalid username or password, try again'));
            }
        }
    }

$this->layout = “simple”;の部分で、レイアウトを指定しています。