IE6からでも角丸に。CSS3を使わずJavaScriptでやります。

By on 2012年1月26日
This entry is filed under JavaScript.

CSS3で角丸、便利なんですけど、IEは9でも無視ですから、使えません。

なので、こちらを使って丸くします。

CurvyCorners
http://www.curvycorners.net/

使い方は、ダウンロードしてきたcurvycorners.jsを読み込んで、下記のように<head>に書きます。

読み込み

<script type="text/JavaScript" src="curvycorners.js"></script>

設定

<script type="text/JavaScript">
  addEvent(window, 'load', initCorners);
  function initCorners() {
    var settings = {
      tl: { radius: 20 },
      tr: { radius: 20 },
      bl: { radius: 20 },
      br: { radius: 20 },
      antiAlias: true
    }
    curvyCorners(settings, "#wrapper");
  }
</script>

ここで、settingsに保存されているtl, tr, bl, brは、top, bottom, left, rightです。

IE6でも丸くなります。

複数の対象に対して指定する方法などは同梱の解説ファイルを読んでみてください。

CakePHP2.0で、ブログのid,title,bodyとかを管理するチュートリアルのファイル相関図

By on 2012年1月25日
This entry is filed under CakePHP.

CakePHPには、「ブログチュートリアル」という、簡易的なブログを作るための、勉強コンテンツが用意されています。

今日、田中さんによるCakePHP入門講座＠コワーキングスペース恵比寿で、このブログチュートリアルを10名ほどでやっていただきました。

cakephp.org > ブログチュートリアル

手順どおりにやれば、誰でもできるのですが、実際に自分が今何を書いていて、それがどこのどのファイルと連携しているのかが、分かりづらかったので図にしました。

クリックで拡大です。

なんか、間違ってそうなのですが、明日は安藤さん( @yando )による8時間ぶっ通し講座がありますので、それに備えて自分の理解ということで。。

CakePHP2.0をMac／MAMPにインストールする手順

By on 2012年1月24日
This entry is filed under CakePHP.

ダウンロード

http://cakephp.org/からダウンロードしてくる。

MAMPのhtdocs内に置く。何かフォルダ作ると良い(ここでは、cakephp/)。

設定ファイルを２ついじる

app/Config/core.php

最初に、

Use it to configure core behavior of Cake.

とあるので、Cakeのコアな振る舞いを設定するファイルのようです。
ざっと見ると、デバッグレベル、エラーハンドラ、ログなどが設定できるようです。

その中で、

Configure::write('Security.salt', 'DYhG93b0qyJfIxfs2guVoasdfoahsaUubWwvniR2G0FgaC9mi');
Configure::write('Security.cipherSeed', '768593096576788763453542496749683645');

のような2行を検索で探して、二個目の引数をちょこっと変えます。何文字か削ったり足したりします。

app/Config/database.php

最初に、

In this file you set up your database connection details.

とあるので、データベースの接続の詳細を設定できるようです。

DATABASE_CONFIGというファイルの中の、値を変えることで、DBへの接続情報を渡します。

class DATABASE_CONFIG {

	public $default = array(
		'datasource' => 'Database/Mysql',
		'persistent' => false,
		'host' => 'localhost',
		'login' => 'root',
		'password' => 'root',
		'database' => 'cake20',
		'prefix' => '',
		//'encoding' => 'utf8',
	);

	public $test = array(
		'datasource' => 'Database/Mysql',
		'persistent' => false,
		'host' => 'localhost',
		'login' => 'root',
		'password' => 'root',
		'database' => 'cake20',
		'prefix' => 'test_',
		//'encoding' => 'utf8',
	);
}

MAMPの場合、上記のようにlogin/passwordはrootに、databaseは専用に作ったDB名を入れます。

$defaultと$testがありますが、$testの方はユニットテストのために使うものらしいです。テスト時には、テーブルを作って消すという作業が発生するらしいので、prefixを付けておくことで、本番テーブルが消えてしまう失敗を防ぐことができるそうです。

色々エラーが出るかもですが、localhost/cakephp/にアクセスしたときに以下のように全てがグリーンになるようにします。

naverまとめに「オープンな時代に「クローズド」なサービスまとめ」を作ってみた

By on 2012年1月21日
This entry is filed under ころぐ.

ころぐのプロモーションに困っているわけですが、naverまとめにころぐをちゃっかり含めて、まとめを作ってみました。

どうなるでしょう。。

冒頭に書いた、小林弘人さんの流れや、他のクローズドなサービス（特に前半）には実際に興味があるので他にもありましたら教えて下さい。

オープンな時代に「クローズド」なサービスまとめ [NAVER まとめ]

WordPressの多言語化プラグイン”qTranslate”の設定と使い方。その１

By on 2012年1月16日
This entry is filed under qtranslate. | 2 Comments

WordPressを多言語化するプラグインqTranslateの管理画面の設定について見ていきます。

インストールしてから設定すること

まず、インストールするといきなり管理画面が英語になります。メニューも何もかも全部です。「あれ？日本語で使えないの？」と思ったのですが、できました。

qTranslateでは、「このサイトでは何語を使うのか」というのをまず設定します。

管理画面　＞　設定　＞　Languagesと進んだ上で、下の方にあるLanguagesの欄で、使う言語を選びます。最初は英独中文となっているので、EnableボタンやDisableボタンを押します。

写真の例では、日英のみにしてみます。

次に、同じ画面の一番上、Default Language / Orderのところで、デフォルト言語を選択＆順番を決めます。

この順番というのは、投稿画面などのタイトルなどの表示順です。

デフォルトで使う言語と順番を別々に指定できるということです。デフォルトを日本語にすると、管理画面が全部日本語になりました。

ちなみに、サイドメニューの一番下に、下の画像のようなメニューが現れて、英語をクリックすると管理画面が英語になります。

なので、日本人とイギリス人が同じ管理画面を使ってサイトを管理する場合にもちゃんと使えるということですね。便利すぎます。

言語別のURLの設定

qTranslateでは、以下の３つの形式で言語別のコンテンツを表示させることができます。

  1. example.com/somethinghere?lang=en
  2. example.com/en/somethinghere
  3. en.example.com/somethinghere

いちばん後ろに?lang=xxが付くパターン、ドメイン直後に/xx/が付くやり方、xx.example.com/なサブドメインコースの３つです。

これは、Advanced Settings　＞　URL Modification Modeのところで設定します。

デフォルトの言語は、example.com/とexample.com/ja/の両方で表示されるようです。

また、Detect Browser Languageという欄で、ブラウザの言語を取得してリダイレクトさせる設定が可能みたいです。

日付がバグるのを治す

qtranslateで日本語を導入したときに、日付がぐちゃぐちゃになる場合の対処という記事にまとめたので、これをやります。

投稿してみる

実際に投稿してみます。

投稿画面は、以下の写真のようになります。

日本語、英語のタイトルを入れて、画像をUPしてみました。画像には日本語でキャプションを入れて。。

その後、「ビジュアル／HTML」の並びにある英語タブをクリックすると、以下のように、英語コンテンツは空白になっています。

なので、英語コンテンツを入れていきます。画像は、アップロード済みなので選択してみるとキャプションに日本語が入っているので、削除して英語を入れます。

公開してチェックしてみると、

日本語表示

英語表示

ちゃんと表示されました。
ちなみに、カテゴリーが「その他」と”other”にちゃんとなっているのは、投稿　＞　カテゴリーの項目で設定しているからです。

言語別に非表示にすることはできるの？

できました。

デフォルトでは、たとえば、「英語表示の時に日本語しかないコンテンツを表示させる」をやると以下のように（日本語）タイトルとなります。

英語表示で無理やり日本語の投稿を表示させる。

サイドバーにも、日本語コンテンツが表示されています。

英語表示時のサイドバー

これを、General Settings　＞　Hide Untranslated ContentでHide Content which is not available for the selected language. というところにチェックを入れると、サイドバーからは表示が消えます。

日本語表示がサイドバーの最新記事から消えたとこ

今後の課題

  • キャッシュ系プラグインどうなるの？
  • カスタムポストタイプはどうなるの？
  • カスタムフィールドは？
  • テンプレートファイルには、どう書くのさ？
  • マルチサイトは？（これは今のところ不要なのでまた今度必要が生まれたら）

といったことを調べていきたいと思います。

カスタムフィールド、無理っぽいのですがねぇ。。

@hissyNさんなんとかしてくださいm(__)m。

Older Entries »