Goldilocks Days: 2011

2011年9月22日木曜日

古いRailsをインストールしてみる

進化が早いWeb業界ではOSやライブラリを常に最新のものが使えるとは限らないので、最新バージョンを使えない場合が多々あります。
そういった中でライブラリが求めるものがインストールできない場合はいろいろコツが要るかと思います。

そんな一つで今回は、Ruby on Railsの環境をRuby version1.8.5という条件でインストールしてみた場合の覚え書きです。

Railsはgemからインストールするのでgemを先にインストールします。
gemは最新バージョンだとエラーが出たので、1.3.2をwgetでダウンロードします。
ここ
に各バージョンが用意してあるのでエラーが出ないバージョンのURLを指定してください。
今回では、1.3.2をダウンロードします。

wget http://rubyforge.org/frs/download.php/55066/rubygems-1.3.2.tgz
tar zxf rubygems-1.3.2.tgz
ruby setup.rb

でインストール完了
正しくインストール出来ると

gem -v

でバージョン確認できると思います。

次にRuby on Railsのインストールです。
Rubyのバージョンが古いので普通に

gem install rails
ERROR: could not find gem rails
locally or in a repository.

とやるとエラーが出る場合があるので、その場合はバージョン指定してやります。

gem install rails -v 2.0.1

で成功すると思います。

gem list

で正しくインストールされているか確認してください。

MySQLやSQLiteも同じです。

gem sqlite3-ruby -v 1.2.5

自分の環境にインストール出来るバージョンを指定してやればインストール出来ると思います。

もちろん環境が最新のものが利用出来るようなら古いものは利用しない方が言うまでもないです。

2011年6月14日火曜日

PHP4とPHP5のコンストラクタの動作の違い

PHP4からPHP5へのオブジェクト関連の変更でマジックメソッドが追加されてますが、このマジックメソッドの仕様は不思議な動作をするようでたまに問題が指摘されてます。
多分に漏れず、初心者がはまりそうな部分を書いておきます。

__constructによるコンストラクタの継承による不具合発生。

PHP4までの親コンストラクタの継承は「$this->親クラス名」で継承されていましたが__constructで書こうとすると思わぬエラーが出ることがあります。

Smartyの拡張セットアップも「$this->Smarty();」となっていますね。
http://www.smarty.net/docsv2/ja/installing.smarty.extended.tpl

これを「parent::__construct()」で継承するまではいいのですが、親コンストラクタのほうを__constructに変更するとエラーが出ます。

class Test {
 public function __construct() {
  echo "Testコンストラクタです\n";
 }
}

class TestChild extends Test {
 public function __construct() {
  $this->Test(); //エラー
  echo "TestChildのコンストラクタです\n";
 }
}

冷静に考えれば$thisで親コンストラクタを呼び出すこと自体変なので、新しい親コンストラクタは「parent::__construct()」で呼び出してください。

class Test {
 public function __construct() {
  echo "Testコンストラクタです\n";
 }
/*
        //古い書き方であっても大丈夫です
 public function Test() { 
  echo "Testオブジェクトを生成します\n";
 }
*/
}

class TestChild extends Test {
 public function __construct() {
  parent::__construct();
  echo "TestChildのコンストラクタです\n";
 }
}

であれば親が古い書き方であってもエラーは出ません。

2011年6月12日日曜日

PleiadesからPerlでCGIを動かす(Windows7)

PleiadesはEclipseの豊富な機能を一度に纏めてインストールしてくれるとても便利なIDEですね。
そこでPHP開発などもPleiadesで開発している人も居ると思われます。特にZen Codingがプラグインが登場してからはIDEでもかなり生産性は高くなったのではないでしょうか？

PHPはデフォルトでドキュメントルートからそのまま拡張子を.phpにすれば表示されます。

Perlもパスを通せばドキュメントルートからでも可能ですが、cgi-binフォルダはCGI専用のフォルダなので分けて開発しておくと後々便利ではないでしょうか？

PleiadasAll in Oneですと
/pleiades/xampp/htdocsがデフォルトのドキュメントルートになっています。

Apacheの設定ファイルである。
/pleiades/xampp/apache/conf/httpd.confにDocumentRootに設定してありますので確認してください。

ScriptAliasはCGIを動作できるフォルダを指定するためのものです。
/cgi-bin/とあればcgi-binフォルダから動作出来るはずです。

/pleiades/xampp/cgi-binフォルダにprintenv.plと言うファイルが有るはずなのでそのファイルを
http://localhost/cgi-bin/printenv.plで開いてみましょう。表示されれば、動作確認OKです。

拡張子が「pl」でしたがCGIの拡張子は通常「cgi」なので適宜Apacheで設定してください。

■ CGIをEPICで開発する
せっかくPleiadesを使用しているのでPerl環境もEclipseから開発したい人も
Eclipseの[ヘルプ]から[新規ソフトウェアからインストール・・]で[追加]ボタンをクリック、そこで現れるダイアログで名前に「EPIC」、ロケーションに「http://www.epic-ide.org/updates/」を入れてください。

urlが正しく入力されれば、EPICがチェック出来るようになるのでチェックボックスに入れて「次へ」からインストール出来ます。

これでEclipseからPerlの開発環境が整いました。
IDEは重くて嫌だと言う人もZen Codingとの組み合わせなら十分メリットはあると思います。

■ Hello Worldファイルを作る。
自分のファイルで確認するためと日本語表示確認のために作ってみます。
先程のprintenv.plと同じくcgi-binフォルダ以下に配置してください。

例：

#! "C:/dev/pleiades/xampp/perl/bin/perl.exe"
print "Content-type: text/html; charset=utf-8\n\n";
print "Hello, World.日本語表示\n";

気をつけることはパスはperlのある場所にダイレクトに指定することです。
Pleiadesでは、/pleiades/xampp/perl/bin/perl.exeにあります。
Strawberry perlならその位置を指定してください。

正確に表示されれば成功です。

2011年6月8日水曜日

jQueryのempty()とremove()

jQueryは似たようなセレクターやメソッドがいくつか存在しますが、比べてみることでその違いをはっきりさせておくと覚え易いです。

empty()メソッドとremove()メソッドの違い。

empty()は中身を削除する。
remove()はそのもの本体ごと削除する。
remove([exp])でセレクターの条件にあったものだけ削除されます。

例:
html

jQuery(empty and remove)
1.Text
2.TextStrongTextTextEm
3.TextStrongText
4.TextiTextText

cssは分かりやすいように色付け(お好みで)

li {
  background-color: lavender;
  border: 1px solid royalblue;
  height: auto;
  width : 400px;
  padding: 5px; 
}

strong {
  background-color: seashell;
  border: 1px solid fuchsia;
}

em {
  background-color: beige;
  border: 1px solid chocolate;
}

i {
  background-color: lightsalmon;
  border: 1px solid tomato;
}

jQuery部分
empty()とremove()とremove([exp])で変化を見ます

jQuery(function() {
 //liにempty()を適用します
 $("#btn1").click(function() {
  $('li').empty();
 }); 
 //liにremove()を適用します
 $("#btn2").click(function() {
  $('li').remove();
 }); 
 //em要素が含まれるliにremove()が適用されます
 $("#btn3").click(function() {
  $('li').remove(':has(em)');
 }); 
 //文字列[Strong]が含まれるliにremove()が適用されます
 $("#btn4").click(function() {
  $('li').remove(':contains("Strong")');
 });
});

初期状態

empty()を使用した場合

remove()を使用した場合

remove(':has(em)')を使用した場合

remove(':contains("Strong")')を使用した場合

2011年6月6日月曜日

SQLite関数で「file is encrypted or is not a database」というエラーが出る場合

PHPのsqlite_open関数でSQLiteのデータベースを開こうとしたら「file is encrypted or is not a database」というエラーが出ました。
直訳すると「ファイルは暗号化されているか、データベースではないです」ということ。

どうやらSQLiteの互換性の問題のようです。
SQLite3とそれ以前のSQLiteはかなり異なった設計なのでPHPの旧関数は使えない模様。
PDOで開けば解決します。

データベース開くのに固有の関数はよろしくないですね。
ただし、テストなど色々試したい場合があると思いますので一応メモです。

PHP5でも組み込まれているのがSQLite2.8などの場合があります、そうすると思わぬ互換性問題が発生しますのでお気をつけを。

2011年6月3日金曜日

Firefoxでハマリそうなこと1(innerTextはFirefoxでは使えない)

FirefoxではinnerTextでエラーが出た方も多いかも。
代わりにtextContentを使用します。
使ってないと忘れてしまいがちなのでメモ。

if(element.innerText) { //IE
     element.innerText = "文字列";
}else { //Firefox
     element.textContent = "文字列";
}

2011年5月28日土曜日

WebStorageを試す

・WebStorageとは

WebStorageはHTML5に加えられたWebデータをローカルに保存される機能です。
簡単に言うとcookieでは使いづらかった点を改良したものと言えます。
例えば、cookieには出来なかった大きなデータを保存したりページごとにセッションを持つことが出来たりします。

・対応ブラウザ

Internet Explorerは8からFirefoxは3.5から対応しています。最新のブラウザであれば多くは対応しています。

・WebStorageの種類

WebStorageにはsessionStorageとlocalStorageが存在します。
sessionStorageはブラウザがセッションを保持するために使わる揮発性のデータです。
localStorageはローカル側に期限なしでcookieでは実現できなかった大量のデータを保存できます。
つまりローカルに大きなデータを長期保存出来ることによりいままで制限上出来なかったことができるようになります。
これらとcanvasなどを機能を利用してサーバの負荷を抑えながらリッチな表現力を保持できたりします。

・localStorageとは

localStorageの機能は非常に簡単です。
保存、読み出し、削除などごくごく少数のメソッドを使用するだけです。

・保存データの形式

localStorageのデータはキー・バリュー型で保存されます。
これはハッシュや連想配列でおなじみですね。JavaScriptではオブジェクトでもあります。

保存方法は

window.localStorage.setItem(データ名, データ値);
window.localStorage.データ名 = データ値;
windwo.localStorage[データ名] = データ値;

のいずれかで保存されます。

読み出し方法は

データ値 = window.localStorage.getItem(データ名);
データ値 = window.localStorage.データ名;
データ値 = windwo.localStorage[データ名];

で全く違和感ないですね。

削除方法は

window.localStorage.removeItem(データ名);

です。

全件削除は

window.localStorage.clear();

です。
これで同じドメインのすべてのデータが削除されます。(別のドメインのものは残ります。)

ではフォームデータを保存する簡単な例を書きます

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>HTML5</title>
<script>
<!--

var data, save, load, mess, disp;

window.onload = function() {
 data = document.getElementById("data");
 save = document.getElementById("save");
 load = document.getElementById("load");
 mess = document.getElementById("message");
 disp = document.getElementById("disp");
 
 save.onclick = function(){
  setData(data.value);
 }
 load.onclick = getData;
}

function setData(value) {
 if(!window.localStorage) {
  return false;
 }
 if(value == "") {
  mess.innerHTML = "データがありません";
  return false;
 }
 window.localStorage.setItem("data", value);
 mess.innerHTML = "保存しました";
}

function getData() {
 if(!window.localStorage) {
  return false;
 }
 var result = window.localStorage.getItem("data");
 if(!result) {
  disp.innerHTML = "データが保存されていません";
 }else {
  disp.innerHTML = result;
 }
}
 
//--> 
</script>
<style>

#message {
 color: red;
}

</style>
</head>
<body> 
<h1>WebStorage</h1> 
 <form action="#">
  <label for="data">データ: </label>
  <input type="text" name="data" id="data">
  <br>
  <input type="button" value="保存" id="save">
  <input type="button" value="読み込み" id="load">
 </form>
 <div id="message"></div>
 <div id="disp"></div>
</body>
</html>

2011年5月24日火曜日

コマンドプロンプトを「管理者として実行」する

Windowsでコマンドプロンプトを扱うときコマンドによっては管理者権限が必要なものがあります。
その場合は「管理者として実行」でコマンドプロンプトを開きましょう。

使用OS：Windows7
1.デスクトップ左下のWindowsボタンから
[すべてのプログラム]→[アクセサリ]→[コマンドプロンプト]を右クリック「管理者として実行」を選びます。

2.[Windowsボタン + r]で開くプログラムとファイルの実行の窓に「cmd」と打ち込み[Ctrl]+[Shift]+[Enter]で確認窓が開きますので「はい」を押します。

コマンドプロンプトの左上に「管理者」と記されていれば成功です。

2011年5月4日水曜日

関数オブジェクトとthis(JavaScript)

JavaScriptにはクラスがありませんが、コンストラクタがあるのでクラスのようなものは出来ます。
なので便宜的にクラスと呼ばせていただきます。

JavaScriptはプロトタイプベースのオブジェクト指向です。
JavaScriptでクラスを作るには関数をクラスっぽく定義するだけです。

function Person(name) {
    this.name = name;
}

簡単です。

そこからオブジェクトを作成するにはnew演算子を使えばいいだけです。

var hirosi = new Person("ヒロシ");

そしてメソッドはオブジェクトに直接追加できます。
Javaなどのクラスベースのオブジェクトと違うのはクラスベースはクラスを一度定義したら変更できないのに対し、プロトタイプベースオブジェクト指向は後からオブジェクトに直接追加できるのが特徴です。
オブジェクトにメソッドを追加するには関数オブジェクトを追加するだけです。
関数オブジェクトとは関数を変数のように扱う事の出来る仕組みでFunctionクラスのインスタンスで作れますがそれは普通の関数と同じものです。関数を実行させず(()のない形)で扱えば変数のように自在にオブジェクトとして扱えます。

メソッドを追加の例

function showName() {
    alert(this.name + "です");
};

hirosi.showName = showName;

hirosi.showName(); //"ヒロシです" とアラートされ

thisは自らのオブジェクトを指します。これは関数オブジェクトの特徴でありこれによって同じオブジェクトないの資産を活用できます。

では関数オブジェクトをオブジェクトに結びつけずに実行するとどうなるか？

function showThis() {
alert(this);
};

showThis(); //"[object Window]" が表示されます。

これはグローバル・オブジェクト、ブラウザで実行すればwindowオブジェクトが表示されます。

function showName() {
    alert(this.name);
};

var name = "ウインドウ";

showName(); //"ウィンドウ" が表示されます。

つまりグローバル変数はすべてグローバル・オブジェクトのプロパティなのですね。

2011年4月30日土曜日

constructorプロパティ(JavaScript)

■ constructorプロパティの利用

JavaScriptでは、constructorプロパティを呼ぶことで自分を生成したオブジェクトのコンストラクタ関数を呼ぶことが出来ます。

function MyObject(x) {
   this.x = x;
}

var my = new MyObject(1);

document.writeln("MyObject: " + my.constructor);

このような結果になります。

MyObject: function MyObj(x) {  this.x = x; }

これは、定義した関数を表示しただけなので元の関数を変数として使用したものと同じ結果になります。

document.writeln((my.constructor == MyObj)); // true

これを使用してインスタンスの直接のオブジェクトが調べられます。

var arr = new Array(1, 2, 3, 4, 5);
document.writeln(arr.constructor == Array); // true
document.writeln(arr.constructor == Object); // false
document.writeln(arr instanceof Object); // true //instanceof演算子だとスーパークラスにもtrueになる

また基本型もラップされてラッパーオブジェクトとして評価されます。

document.writeln((1).constructor == Number); // true
document.writeln(("文字列").constuctor == String); // true
document.writeln((function() {}).constructor == Function); // true

以上からconstructorプロパティはインスタンスが何のオブジェクトから生成されたか判定できるので有用です。

■ Objectオブジェクトの不思議な挙動

Objectオブジェクトのインスタンスでconstructorプロパティを生成する場合、引数を入れたObjectのインスタンスと比べるとエラーになります。

var obj = new Object();
document.writeln(obj.constructor == Object); // true

obj = new Object(1);
document.writeln(obj.constructor == Object); // false

なんだか変ですね。

参考:https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/Object/constructor