yasutomogのブログ

作業の備忘録としてリンクと一緒に簡単な説明を残す

AngularJSを使ったForm(フォーム)のValidation(バリデーションチェック)

AngularJS Form Validation

現場のAngularJS導入がほぼ決まりなのでサンプル実装

  • 一先ず色々やるんじゃなくてバリデーションだけ導入
  • プロジェクトに馴染むなら双方向バインディングとルーティングも検討する

FormのValidationのサンプル実装

yasutomog/angular-form-validation · GitHub

サンプル実装のバリデーション種類

  • 必須入力
  • 最小文字列数
  • 最大文字列数
  • 複数項目の一致
  • メールアドレス
  • ラジオボタンの必須
  • 数値入力
  • アルファベット入力
  • 電話番号

Sencha ExtJSのrequiresとuses

皆さんrequiresとusesってどう使い分けてるの?

Sencha ExtJSでファイルをロードさせるためには、requiresかusesを使います。どちらもファイルをロードすることが出来るのですが、使い分けはどうするのでしょう。
僕はrequiresだけしか使ってませんでした。

APIリファレンスを読んでみる

  • requires:クラスがインスタンス化される前にロードされる
  • uses:クラスがインスタンス化される前に確実にロードされているわけではない

requiresは、意味も分かりやすいし使い道のイメージしやすいですね。実際にこれまでもrequiresの方ばかり使ってたし。。usesってじゃあいつ使うんだよってところが悩ましい。確実にロードされているわけではないって言い回しがもどかしい。

blogの発見1

調べてると下記のblogを見つけました。

読書メモ: Ext JS 4 First Look / Capter 1 | Sunvisor Lab. Ext JS 別館

このblogのDynaic class loadingというところの記述です。

f:id:yasug:20131219111736p:plain

RequiresとUsesのそれぞれの説明はリファレンスと同じ感じですね。デッドロックの話で、usesだと大丈夫ということで、少し理解が深まります。 ただ、そもそもこのデッドロックするクラス設計自体おかしいなということで、usesを使う理由にはならないのかなと。

blog2の発見2

もう少し調べてみると、下記のblogを発見。

ExtJS PerfectDay #006 講義メモ | Sunvisor Lab. Ext JS 別館

このblogのクラスシステム - uses・requiresというところです。

f:id:yasug:20131219133453p:plain

絶対使う場合はrequiresで、configなどで使い分ける場合はuses。これはとてもしっくりきました。 configなんかで、複数クラスを使い分けるような場合には、無駄なロードを減らすためにusesを使いましょうということかなと。

実際に試してみた

ローカル環境、下記のようなSenchaコマンドを叩いてもらうとプロジェクトが自動生成され、Webサーバ上に配置すると画面表示までいけます。

 sencha -s ~/Library/Sencha/ext-4.2.1.883 generate app AdventCalenderSample ./adventCalender/public_html

f:id:yasug:20131219140317p:plain

新たに簡単なフォームパネル(AdventCalenderSample.view.Form)を作って、自動生成されたタブパネルの中に埋め込むように改修してみます。ソースのイメージとしては下記のような感じです。

Ext.define('AdventCalenderSample.view.Main', {
    extend: 'Ext.container.Container',

//    uses: ['AdventCalenderSample.view.Form'],

    requires:[
        'Ext.tab.Panel',
        'AdventCalenderSample.view.Form',
        'Ext.layout.container.Border'

    ],

    
    xtype: 'app-main',

    layout: {
        type: 'border'
    },

    items: [{
        region: 'west',
        xtype: 'panel',
        title: 'west',
        width: 150
    },{
        region: 'center',
        xtype: 'tabpanel',
        items:[{
            title: 'Center Tab 1',
            xtype: 'sample-form'
        }]
    }]
});

画面表示して下記のように開発者ツールなどで、ファイルの読み込みを確認してみて下さい。

f:id:yasug:20131219142148p:plain

次に、ソースのusesのコメントアウトを外して、requiresの「'AdventCalenderSample.view.Form',」をコメントアウトして下さい。再度、画面表示してみてファイルの読込を確認してみてください。 requiresで定義しているとMainのViewが読み込まれたタイミングで一緒にロードが走っているのが分かります。usesで定義しているとrequiresと比べて後の方に読み込まれるのが分かると思います。

まだファイル読み込みされていない時にExt.createなどでインスタンスを作ろうとすると、そのタイミングでロードが走るということですね。
インスタンスを作成する時に、newを使っているとファイルロードされないので、Ext.createを使った書き方で統一しましょう。

おまけとお礼

今回の調査で見つけたblogはどちらも中村さんが書かれたものでした。
ありがとうございました!

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/

 

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