yasutomogのブログ

Software Engineerの雑記

Sencha ExtJSとSencha Touchのmixinsについて

mixinsの理解をちょっと深める

mixinsを使うことで、継承を使わずにクラスを追加してメソッドやプロパティを使うことが出来るようになります。
mixinsは、複数のクラスを追加することも出来るようになっています。
じゃあ、複数クラスをmixinsした場合に、同じメソッドがあったらどうなるんだろうという疑問が。

// mixinのクラス1
Ext.define('CanWalk', {  
     doAction: function() {  
         console.log('walk');  
     }  
});  

// mixinのクラス2
Ext.define('CanTalk', {  
     doAction: function() {  
         console.log('talk');  
     }  
});  

// 複数mixinしたクラス
Ext.define('Human', {
    mixins: {
        canwalk: 'CanWalk',
        cantalk: 'CanTalk'
    }
});

// 複数mixinしたクラスを生成してメソッド呼び出ししてみる
Ext.application({
    name: 'MyApp',
    requires: ['Human'],
    launch: function(){
        var human = Ext.create('Human', {
        });
        human.doAction();
    }
})

こんな感じですね。
CanWalkとCanTalkのクラスは、doActionという同じ名前をメソッドを持っています。
CanWalkとCanTalkをmixinsで追加したクラスを生成して、doActionを呼び出すと、
どちらが呼ばれるのか。エラーや警告が出るのか。。

実際に上記のソースで試してみると、
コンソールログには、walkと出力されます。

じゃあ、mixinsの定義部分を下記のように変更すると、

// 複数mixinしたクラス
Ext.define('Human', {
    mixins: {
        cantalk: 'CanTalk',
        canwalk: 'CanWalk'
        
    }
});

コンソールログには、talkと出力されるようになります。 つまり、エラーや警告は出ずに、mixinsの定義の中で先に記述されたほうが優先されるようになっているみたいです。

今回のサンプルです。 mixinsの中の定義の順序を変えてみて試してみてください。

http://jsfiddle.net/yasutomog/Hensp/2/

複数mixinsする場合には、同じメソッド名がないか気をつけたほうがいいですね。
こういうバグは見つかりにくいので、mixinsするようなクラスには、一定の命名規則をつけるのもいいかも知れないですね。

MacBookAir2013Midでskypeのカメラが認識されない問題

MacBookAir 2013 Midでskypeを入れ、

TV電話しようとしたらskype

MBA内臓のカメラを認識してくれなかった。

 

OS:10.8.5

Skype:6.9(513)

 

ぐぐってみると、

同じような現象の人もいるみたい。

http://blog.0x2ek.net/?p=297#more-297

 

skypeのアップデートを待つ時間もなかったので、

こちら(https://discussions.apple.com/message/22979401#22979401)を

参考にして、プラグインを置き換えました。

 

試される方は念のためバックアップを取ってからやった方がいいかと。

 

NginxにKingSSLを設定する

KingSSLと契約してNginxに設定したので備忘録として残しておく。

◇KingSSLとの契約

  1. http://www.kingssl.com/から登録手続き。
  2. CSRが必要になるので、CentOSで下記のコマンドを叩いて作成。
    sudo openssl req -new -newkey rsa:2048 -nodes -keyout 適当な名前.key -out 適当な名前.csr
  3. サイトで登録して流れに従って行くとメールが3件くらい来る。
    その中に、証明書と中間証明書とコモンネームが記載された
    メールがあるので保存しておく。 

 

◇Nginxにsslの設定

  1. ちなみに作業しているのは、さくらVPSでCentOSを使っています。
  2. NginxにSSLのモジュールが入っていることを確認する。
    /usr/sbin/nginx -V のコマンドを叩くとconfigure argumentsが表示されるので
    その中に、--with-http_ssl_module が含まれていることを確認する。
  3. KingSSLとの契約の3で保存している証明書と中間証明書を合わせたファイルを
    適当な場所に作成する。
    ファイルの中身は下記のような感じになる。
    -----BEGIN CERTIFICATE-----
    証明書の中身
    -----END CERTIFICATE-----
    -----BEGIN CERTIFICATE-----
    中間証明書の中身
    -----END CERTIFICATE----- 
  4. Nginxの設定ファイルにSSLの設定を追記する。
    sudo vi /etc/nginx/conf.d/default.conf
    で設定ファイルを開いて、下記の設定を入れる。
    server {
      listen       443;
      ssl          on;
      ssl_certificate      3で作成した証明書と中間超名所のファイルのフルパス;
      ssl_certificate_key  KingSSLとの契約の2で作成したkeyファイルのフルパス;
      server_name  KingSSLとの契約の3のメールのコモンネームの値;
    1. }
  5. Nginxの設定ファイルの記載に問題がないことを確認。
    sudo /etc/rc.d/init.d/nginx configtest
  6. 設定ファイルの記述に問題がなければ、Nginxを再起動。
    sudo /etc/rc.d/init.d/nginx restart 
  7. httpsで試してみて問題ないことを確認。

 

Google Analyticsの登録

 

サイトを作成したので、アクセス解析をするために、Google Analyticsに登録しました。
 
登録方法は下記のリンクを参考にしました。
Googleアカウントがあればすぐできます。
 
 
外部のリンクに対してのクリック数を取るために、下記のサイトを参考にしました。
 
Google Analyticsのカスタムレポートの設定例としてよくまとまっているものがあったので
下記のサイトを参考にして設定してみました。
 
まだサイトを作ったばかりで、Google Analyticsも設定したばかりなので
データがたくさん取れるようになってから徐々に自分なりの設定にしていく予定です。
 

 

HTML KickStartを使ってページ作成

HTML KickStartを使ってサイト構築してみました。

 

作業の手順としては、下記サイトからDownload Nowボタンを押してzip取得して、

その中のblank.htmlをコピーして、自分の好きなように作成していきました。

http://www.99lime.com/

 

htmlレイアウトは、下記のページで使いたいElementを見つけて、

そのhtmlコードをコピーして張っていくだけなので、非常に楽ですね。

http://www.99lime.com/elements/

 

最後に自分にあわせて少しだけ、style.cssをいじっていけば

それっぽい感じになってきました。

古いバージョンのIEで見ると、少しだけ違和感あるけど、

大きく崩れるわけではないので、許せるレベルだと思います。

 

ちょうど焼肉屋の知り合いからサイト構築頼まれていたので

試しに使って作ってみました。

http://horiguchi-yakiyaki.com/

 

今後はこれを使ってレスポンシブデザインへの移行を試してみたいです。

 

さくらのVPS(CentOS)にnginxのインストール

さくらVPS(CentOS 5.7 64bit)にnginxをインストールする。

ソースからコンパイルしようとしたが、下記のサイトの流れで

現在の安定版の最新を取得することができたので、下記サイトの方法でインストール。

2012年2月3日時点では、nginxの安定版の最新は1.0.11でした。

 

参考にしたサイト