クラス -> つかみ

Posted by muchag | JavaScript | 2011-10-27 (木) 16:57:36

JavaScript でのクラスは、Java やらなんやらのクラスとはちょいと違うらしい。

キーワードは prototype
prototype っていわれたら、ライブラリしか思いつかなかった私は
最初意味不明だった。

で、グーグル先生に教えてもらったことをまとめてみる。

相変わらずちゃんと理解してないので間違いは多いと思われ・・・。
でも、こうやってまとめることで理解を深めるしかないのよね。

クラスベースとプロトタイプベース

まぁ、何でも最初は用語を覚えないといけないんだけど
今回もこういう定義があるらしいので、そっからスタート。

Java なんかのオブジェクト指向は「クラスベース
JavaScript は「プロトタイプベース」なんだそうな。

  • クラスベース クラスのインスタンスがオブジェクト
  • プロトタイプベース オブジェクトを元(プロトタイプ)にしたオブジェクト

 

記法
生成
  1. var Animal = function() {};

クラス名の先頭は大文字。

他人のソースを見て、この記述を初めて見たときビックリした。
変数に無名関数を代入?

でも、こういう意味だったのねぇ。
 

インスタンス化
  1. var anim = new Animal();

変数名の先頭は小文字。
 

コンストラクタ

生成時にコンストラクタによってメンバ変数とメソッドを定義できる。

  1. var Animal = function(name, sex) {
  2.  
  3.     this.name = name;
  4.     this.sex = sex;
  5.  
  6.     this.toString = function() {
  7.         window.alert(this.name + " " + this.sex);
  8.     };
  9. }
  10. var anim = new Animal("トクジロウ", "オス");
  11. anim.toString(); // 「トクジロウ オス」

 

動的に追加
  1. var Animal = function(name, sex) {
  2.     this.name = name;
  3.     this.sex = sex;
  4. }
  5. var anim = new Animal("トクジロウ", "オス");
  6. anim.toString = function() {
  7.     window.alert(this.name + " " + this.sex);
  8. };
  9. anim.toString(); // 「トクジロウ オス」

以上のように動的に追加することも可能だが
この場合は、インスタンス anim 固有のメソッドとなる。

つまり、新たにインスタンス化したオブジェクトには反映されない。
 

プロトタイプ・オブジェクト

今までのは基本だけど、上述のような記述だと
インスタンス化する度に全てメモリに領域確保をするので
以下のような記法が推奨らしい。

  1. var Animal = function(name, sex) {
  2.     this.name = name;
  3.     this.sex = sex;
  4. }
  5.  
  6. Animal.prototype.toString = function() {
  7.     window.alert(this.name + " " + this.sex);
  8. };
  9.  
  10. var anim = new Animal("トクジロウ", "オス");
  11. anim.toString(); // 「トクジロウ オス」

もちろんメンバ変数も定義可能。

プロトタイプ・オブジェクト を利用することで
そのメソッドを利用するときだけ読み込みに行くのでメモリを節約できるみたい。
 

リアルタイム認識

その他のメリットとして、インスタンス生成後にメソッドを追加しても有効らしい。

  1. var Animal = function() {};
  2. Animal.prototype.name = "サチ";
  3. var anim = new Animal();
  4.  
  5. Animal.prototype.sex = "メス"; // インスタンスの生成後にメンバを追加
  6.  
  7. window.alert(anim.sex); // 「メス」

 

保持内容は個別
  1. var Animal = function() {};
  2.  
  3. Animal.prototype.name = "サチ";
  4. var a1 = new Animal();
  5. var a2 = new Animal();
  6.  
  7. window.alert(a1.name + "|" + a2.name); // 「サチ|サチ」
  8.  
  9. a1.name = "トクジロウ";
  10. window.alert(a1.name + "|" + a2.name); // 「トクジロウ|サチ」

 
a1 は書き換えられた値。
a2 はデフォルトの値。
 

hasOwnProperty

こうなると、格納先が2箇所で区別しないといけなくなるので
hasOwnProperty というメソッドが存在する。

  1. function Constructor() {}
  2. Constructor.prototype.prop1 = 30;
  3.  
  4. var objA = new Constructor();
  5.  
  6. // objA 自体は持っていないので false。
  7. alert(objA.hasOwnProperty("prop1"));
  8.  
  9. objA.prop1 = 100;
  10.  
  11. // objA 自体が持っているので true。
  12. alert(objA.hasOwnProperty("prop1"));

 

オブジェクト・リテラル定義

プロパティ・オブジェクトを利用するに当たって

  1. Animal.prototype.name = "サチ";

という記述を繰り返すと

  • 可読性の下落
  • 変更が煩雑

という問題が起こるので

  1. var Animal = function(name, sex){
  2.     this.name = name;
  3.     this.sex = sex;
  4. }
  5.  
  6. Animal.prototype = {
  7.     getVoice : function() {
  8.     window.alert(this.name + "「チュウ!」");
  9.     },
  10.     toString : function() {
  11.         window.alert(this.name + " " + this.sex);
  12.     }
  13. };
  14.  
  15. var anim = new Animal("トクジロウ", "オス");
  16. anim.toString(); // 「トクジロウ  オス」

このように記述することができるようだ。

VB でいうところの With 文だと思えばいいや。
 

引用&参考元サイト

CodeZine:プロトタイプ(prototype)によるJavaScriptのオブジェクト指向
@IT:Ajax時代のJavaScriptプログラミング再入門 第4回 JavaScriptでオブジェクト指向プログラミング

JavaScript | 2011-10-27 (木) 16:57:36 |

JavaScript Index

Posted by muchag | JavaScript | 2011-10-27 (木) 16:35:24

その昔、ユーザビリティを上げるために利用したことがある JavaScript。

確かに素敵なことができるんだけど、それを利用して悪さをする人がいたり
重くなったりするので、ブラウザの設定で切っている人も少なくなく、
また、PHP とのデータの受け渡しが面倒で、使わなくなっていた。

それがいつのまにか一世風靡な感じ。
Ajax の登場が大きいのかなぁ。
知らないうちに Google 検索サイトまで JavaScript ではないの!

こりゃぁ、勉強せんといかんちゃね。

丸っきりの書きかけ項目は Not found になる。

序章
  1. 変数の受け渡し
  2. 文字列
    1. 検索
  3. 配列
    1. 操作
  4. 書式
    1. 即時関数
クラス
  1. つかみ
  2. グレートなつくりかた
  3. 内部関数
ライブラリ
  1. 暗号化
    1. CryptoJS
  2. 画像
    1. Exif
  3. グラフ(比較サイト
    1. http://muchag.undo.jp/archives/1970” target=”_blank”>ccchart
    2. Flotr2
      1. ローソク足(CandleStick)
    3. Highcharts4.1.4
      1. ローソク足(CandleStick)
  4. フォーマット
    1. Moment
    2. Numeral
  5. フレームワーク
    1. jQuery
Tips
  1. 画像調整
  2. 関数名を文字列で指定して実行する
  3. 時間間隔での繰り返し処理
  4. 配列
    1. 一部を切り出す
  5. 日付&フォーマット
  6. ブラウザ別挙動
がい~ん!(はまったこと)
  1. 解決済み(たぶん)
  2. 未解決
    1. Moment の isValid() が機能しない
参考

MDN:JavaScript リファレンス
gihyo.jp:これでできる! クロスブラウザJavaScript入門

その他各参考サイトについては、各エントリーにて。

JavaScript | 2011-10-27 (木) 16:35:24 |

MySQL Workbench

Posted by muchag | MySQL,Tool | 2011-10-24 (月) 19:19:40

MySQL のテーブル設計用 GUI ツール。

新しい記事

DL

MySQL Workbench の Download Now リンクより
プラットフォームを選択して、希望する項目の Download ボタンをクリック。

私は以下を選択した。
プラットフォーム:Microsoft Windows
ファイル:Windows (x86, 32-bit), MSI Installer
      ( mysql-workbench-gpl-5.2.35-win32.msi )

ログインページが現れるので
ログインまたは登録する。

後はリンクから DL 。
 

インストール

私はインストーラ付きなのでダブルクリックでOK。
 

Visual C++ 2010 Runtime

と思いきや、Visual C++ 2010 Runtime がないからインストールできねーよ。
と言われるので
Microsoft Visual C++ 2010 再頒布可能パッケージ (x86)
ここから DL してインストール。
 

インストール

今度こそ~と、ダブルクリック。
後は普通にインストールできる。
 

ローカライズ(日本語化)

ありがたいことに日本語化パッチを配布してくださっている方がおられる。
感謝感謝♪
SOURCEFORGE.JP:OSS_Ja_JPN こちらより
mysql-workbench-gpl_5.2.34_ja6.deb を DL 。
(ちょこっとだけリヴィジョンが違うが気にしない)

で、どうやってパッチを当てればいいのか試行錯誤したけ。
deb なんていう拡張子とは初対面だし・・・ね・・・。

でも、deb を tar.gz に変更すると解凍できるそうで
拡張子を変更して解凍。

そこで出てきた
data フォルダの中に

data\usr\local\share\mysql-workbench\data

また data フォルダが存在する。

そこで MySQL Workbench インストールディレクトリ内にある
data ディレクトリをリネームし、新たに先ほど解凍して出てきた data ディレクトリ

data\usr\local\share\mysql-workbench\data

を、MySQL Workbench インストールディレクトリ内に配置。

これでローカライズ完成。

MySQL Workbench が便利です

MySQL,Tool | 2011-10-24 (月) 19:19:40 |

Tomcat 上で実行

Posted by muchag | Eclipse,Java Servlet & JSP | 2011-10-20 (木) 18:30:56

Web アプリケーションを Eclipse から Tomcat 上で実行する手順。

プロジェクト・エクスプローラで当該プロジェクト名を右クリック。
[実行]-[1 サーバーで実行]

実行させるサーバーをクリックして次へ。

実行させたいプロジェクトを右ペインへ移動させ
アクティブにしてから完了。

Eclipse,Java Servlet & JSP | 2011-10-20 (木) 18:30:56 |

war ファイルのインポート

Posted by muchag | Eclipse,Java Servlet & JSP | 2011-10-20 (木) 18:26:17

.war というファイルがあるようだ。
プロジェクトを圧縮したものらしい。

jar との区別がまだついていない。

今回は Strusts2 付属の .war ファイルのインポートを試みる。

インポート

プロジェクト・エクスプローラ内で右クリック。

[インポート]-[war ファイル] から
[参照] で .war ファイルを選択。

プロジェクト・エクスプローラ内に
当該プロジェクトが出現するので
プロジェクト名を右クリックして
[プロパティー]

左ペインの [Java コンパイラー] を選択。
[JDK 準拠]-[コンパイラー準拠レベル] が 1.6 以上であることを確認。

左ペインの [Java のビルド・パス] を選択。
[ライブラリー] タグで [外部 JAR の追加] から
servlet-api.jar を追加して「適用」。
(これは Tomcat の lib ディレクトリにある)

左ペインの [Tomcat] を選択。
[全般] タブで
「Tomcat プロジェクト」にチェックを入れる。
「コンテキスト名」を入力。(任意?)
「Webアプリケーション・ルートとするサブディレクトリー」に「/WebContent」と入力。

[開発用クラスローダーのクラスパス] タブで
「開発用クラスローダーを有効にする」にチェックを入れる。
先ほど追加した「servlet-api.jar」以外の全てにチェックを入れる。

そして、OK。

プロジェクト・エクスプローラ内の当該プロジェクト名を右クリック。
[Tomcat プロジェクト]-[コンテキストの定義を更新]

Tomcat を起動。

http://localhost:8080/struts2 にアクセス。

参考元サイト:メモ eclipseからstruts2のサンプルを動かしてみる

Eclipse,Java Servlet & JSP | 2011-10-20 (木) 18:26:17 |

Tomcat -> ユーザ設定

Posted by muchag | Tool | 2011-10-20 (木) 10:25:42

Java Servlet を触ることになって Tomcat に初挑戦してみたが
参考元サイトにある Manager ページを表示するに当たり
ID とパスワードを求められ、先に進むことができなかった。

あれこれ見た結果

Tomcat ディレクトリ/conf/tomcat-users.xml

に、ID(任意)、パスワード(任意)、roles=”manager” という user を追加するればよかった。

  1. <?xml version='1.0' encoding='utf-8'?>
  2. <tomcat-users>
  3.     <role rolename="manager"/>
  4.     <role rolename="tomcat"/>
  5.     <role rolename="role1"/>
  6.     <user username="both" password="tomcat" roles="tomcat,role1"/>
  7.     <user username="tomcat" password="tomcat" roles="tomcat"/>
  8.     <user username="role1" password="tomcat" roles="role1"/>
  9.     <user username="id" password="password" roles="manager"/> <- 追加
  10. </tomcat-users>
Tool | 2011-10-20 (木) 10:25:42 |

ライブラリの読み込み

Posted by muchag | Eclipse | 2011-10-20 (木) 9:47:12

今回もやられた・・・。

同一パッケージ内のライブラリの読み込みの問題。

状況

とあるソースを見ていて、ライブラリの参照エラーが出ていた。

これがちょっとしたミソで
同一ライブラリ内で参照に成功しているものと
失敗しているものが存在した。

import com.example.Library1; <- こっちは成功 import com.example.Library2; <- こっちは失敗(エラー)[/java2se6] こんな感じ。 もちろんライブラリファイルは実在する。  

原因

ソースの文字コード。
 

過程

あれこれ探っていく内に
ソース内のコメントが文字化けしているのが気になった。

私は Eclipse の文字コードを UTF-8 で設定しているのだけど
参考ソースは S-JIS で書かれていた。
そのためコメントが文字化けしていたみたい。
 

解決

そこで
[ウィンドウ]-[設定] から
左ペインで [一般]-[ワークスペース] を選択。

[テキスト・ファイル・エンコード] を
その他 – UTF-8 から
その他 – MS932 と変更。
(デフォルトを選択してもOK)

これで、無事にライブラリの参照に成功した。

Eclipse | 2011-10-20 (木) 9:47:12 |

PlugIn -> geshi.inc.php

Posted by muchag | Library & PlugIn & AddIn,PukiWiki | 2011-10-18 (火) 14:06:27

WordPress でも利用させていただいているシンタックスハイライターの Geshi
plugin -> iG:Syntax Hiliter カスタマイズ

Pukiwiki でも利用できるようなので設定。

DL
Geshi

Geshi の Downloads をクリックすると
Sourceforge に飛ぶので、そこから DL 。
 

geshi.inc.php

PukiWiki/自作プラグイン/GeSHi より DL 。
2011-10-18 現在
geshi-1.3.tar.gz
 

詳細

PukiWiki/自作プラグイン/GeSHi 参照。

Library & PlugIn & AddIn,PukiWiki | 2011-10-18 (火) 14:06:27 |

Windows 7 で全文検索

Posted by muchag | Java Servlet & JSP,Windows | 2011-10-11 (火) 17:55:07

Windows 7 に触れ始めて一週間。
全文検索を OS 標準でできることを知った。

検索

[スタート] を開くと、一番下に
「プログラムとファイルの検索」とある。

ここでもいいし、エクスプローラの右上にも検索用のコーナーがある。
 

インデックス

検索をするには、前以てディレクトリを追加してインデックスしておくと速い。

[コントロールパネル]-[インデックスのオプション] から

 
[変更] をクリックして

 
ツリーから目的のディレクトリを選択する。

 

ディレクトリ指定
エクスプローラの場合

エクスプローラを開いて、目的のディレクトリ(フォルダ)を選択すると
自動的に右上の検索バーに「○○○の検索」となる。

そこに文字列を入力して検索すると
インデックスするかどうか聞いてくるので、判断する。
 

全文検索

先ほどのインデックスのオプションから
[詳細設定] に入り

 
① [ファイルの種類] タブを選び

② 目的の拡張子をクリック

③ [このファイルのインデックスの作成方法]
  -[プロパティとファイルのコンテンツのインデックスを作成する]
 

拡張子の追加

JSP の .jsp などのファイルは拡張子が未登録なので
全文検索と同じダイアログを出して
一番下の [新しい拡張子を一覧に追加] から
.(ドット) なしで登録する。

Java Servlet & JSP,Windows | 2011-10-11 (火) 17:55:07 |

ライブラリなどの追加

Posted by muchag | Eclipse | 2011-10-07 (金) 15:57:04

.jar ファイルなどのライブラリファイルを追加する方法。

[プロジェクト]-[プロパティ]
または
プロジェクト名右クリック-[プロパティ] より
左ペインで [Java のビルド・パス]

または
プロジェクト名右クリック-[ビルド・パス]-[ビルド・パスの構成]

で [ライブラリ] タブ。

後は目的に合わせて右のボタンをクリック。

Eclipse | 2011-10-07 (金) 15:57:04 |
次ページへ »