デザインとプログラムの狭間で: 2011/02

2011年2月17日木曜日

javascriptでキャピタライズ（一文字目を大文字にする）

一文字目だけを大文字にする

toUpperCaseを使って

String.prototype.capitalizeFirstLetter = function(){
 return this.charAt(0).toUpperCase() + this.slice(1);
};

replaceを使って

String.prototype.capitalizeFirstLetter = function(){
 return this.replace(/^\w/, function($0) { return $0.toUpperCase();});
};

動作例

var str = 'test strings';
alert(str.capitalizeFirstLetter());
// Test string

単語の先頭を大文字化する

String.prototype.capitalize = function(){
 return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase(); } );
};

動作例

var str = 'test strings';
alert(str.capitalize());
// Test String

2011年2月15日火曜日

kohana3.0からkohana3.1にアップデート

いつのまにやら、kohana3.0からkohana3.1にアップデートしていました（汗

UPGRADING FROM V3.0

Kohana 3.0 to 3.1 Upgrade Troubleshooting

~~内容をチェックしたいところですが、時間が無いのでとりいそぎメモ。~~
内容をチェックして、なんとなく訳したのでメモ。

kohana3.0でリダイレクトする

phpフレームワークのkohana3.0でリダイレクト

Controllerクラスにて、equest::instance()->redirect()を用いて、リダイレクト先を指定します。

リダイレクトの例

public function action_hoge()
{
    Request::instance()->redirect('hoge/index');
}

kohana3.0でHTTP Status codeを出力する

phpフレームワークのkohana3.0でHTTP Status codeを出力します。

Controllerクラスにて、$this->request->statusを用いてコード番号を指定します。

404 Not Foundの例

public function action_hoge()
{
    // HTTP Status code.
    $this->request->status = 404;
}

追記: kohana3.1.xの場合

Controllerクラスにて、$this->request->status()メソッドを用いて、引数にコード番号を指定します。

public function action_hoge()
{
    // HTTP Status code.
    $this->response->status(404);
}

2011年2月14日月曜日

kohana3.0でjson形式で出力する

phpフレームワークのkohana3.0でjson形式で出力する時のメモです。

Controllerクラスの出力を以下のように、何らかの連想配列をjson_encodeで送ります。
Content-Typeの指定方法を忘れるのでメモです。

public function action_hoge()
{
    $hoge = array(...); //何らかの連想配列

    $this->request->headers['Content-Type'] = 'application/json';
    $this->request->response = json_encode($hoge->get_entries());
}

追記: Kohana3.1.xの場合

request / responseクラスが別れたので記述が変更になります。

public function action_hoge()
{
    $hoge = array(...); //何らかの連想配列

    $this->response->headers('Content-Type', 'application/json');
    $this->response->body(json_encode($data));
}

jQuery Templates plugin(jquery-tmpl)を使ってみる

jQuery1.5でコア組み込まれるかと思っていた、テンプレートエンジン「jQuery Templates Plugin」を使ってみました。（組み込まれていると思って書いて、"has no method 'tmpl'"ってエラーがでてやっと気がついた）

使用するには、プラグインファイルを読み込みます。
jquery v1.4.2以上が必要です。

ファイルの読み込み

Microsoft CDNから読み込んでみる場合

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">

参考サイト

github - jQuery Templates plugin v1.0.0pre.
jQuery APIドキュメント the jQuery Templates plugin (jquery-tmpl)
idocsq.net [jQuery] jQueryの公式プラグイン - テンプレート(Template)

使用メモ

繰り返しタグ{{each}}{{/each}}の2重構造でも動いた

{{each 配列名}}でjsonデータに同名の配列があり、lengthが2以上だったら、自動的にループするのですが、配列の中に配列がある構造でも問題なく動作（ループ）しました。すばらしい。

//tmpl
{{each categories}}
<h2>${categoryName}</h2>
 <ul>
  {{each lists}}
   <li><a href="#${url}">${name}</a></li>
  {{/each}} 
 </ul>
{{/each}}

//json
 {
 "categories" : [
  { "categoryName" : "category1", "lists" : [
   { "name" : "sample1", "url" : "http://url1.sample/"},
   { "name" : "sample2", "url"  : "http://url2.sample/"}
  ]},
  { "categoryName" : "category2", "lists" : [
   { "name" : "sample3", "url" : "http://url3.sample/"},
   { "name" : "sample4", "url" : "http://url4.sample/"}
  ]}
 ]
}

2011年2月7日月曜日

bloggerにSyntaxHighlighterをインストールする

技術メモなのでシンタックスハイライターは必須ですからして初めにインストールしておきます。

今回インストールするのは、SyntaxHighlighter - Alex Gorbatchevにしました。バージョンは3.0.83です。ファイルのホスティングもしておられるので有り難く使用させていただきます。

Syntax Highlighter

簡単インストール

ダッシュボード > デザイン > HTMLの編集へ移動
テンプレートをすべてダウンロード
<head>内に以下のソースをコピーしてペースト（テーマとブラシは必要なものを記述。）
テンプレートを保存して、ファイルをアップロードすれば完了

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

簡単な使い方

<pre />タグを使う

<pre>タグで記述する場合は、<は、<に、>は>エスケープすること。

<pre class="brush: js">
...code
</pre>

<script />タグを使う

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
...core
]]></script>

備考

バージョン3.0.83からshAutoloader.jsが導入されているが今回は未使用。