Sencha Advent Calendar 2014 - 12月7日 Ext5のPieチャート
Advent Calenderが来ると、今年も終わると感じますね。
今回は、Ext5を使ったPieチャートを紹介したいと思います。
tnkerさんのブログで、Ext4のPieチャートをかっこよくするってのがあったんですが、
Ext5ではもう少し簡単にかっこよくできたので、それを紹介してみます。
Ext JSの中でもトップレベルのダサさを誇るPieチャートコンポーネントをどうにかしてあげよう ;) | blog.tnker.com
Sencha Fiddleでサンプルを作ってみました。
さくっとサンプル作るのにSencha Fiddleは楽でいいですね。
https://fiddle.sencha.com/#fiddle/eku
簡単なものならデフォルトで、theme作らなくてもそれっぽく作れるので試してみて頂ければと思います。
明日は、 中村 久司 (@martini3oz) | Twitter です。
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は、意味も分かりやすいし使い道のイメージしやすいですね。実際にこれまでもrequiresの方ばかり使ってたし。。usesってじゃあいつ使うんだよってところが悩ましい。確実にロードされているわけではないって言い回しがもどかしい。
blogの発見1
調べてると下記のblogを見つけました。
読書メモ: Ext JS 4 First Look / Capter 1 | Sunvisor Lab. Ext JS 別館
このblogのDynaic class loadingというところの記述です。
RequiresとUsesのそれぞれの説明はリファレンスと同じ感じですね。デッドロックの話で、usesだと大丈夫ということで、少し理解が深まります。 ただ、そもそもこのデッドロックするクラス設計自体おかしいなということで、usesを使う理由にはならないのかなと。
blog2の発見2
もう少し調べてみると、下記のblogを発見。
ExtJS PerfectDay #006 講義メモ | Sunvisor Lab. Ext JS 別館
このblogのクラスシステム - uses・requiresというところです。
絶対使う場合はrequiresで、configなどで使い分ける場合はuses。これはとてもしっくりきました。 configなんかで、複数クラスを使い分けるような場合には、無駄なロードを減らすためにusesを使いましょうということかなと。
実際に試してみた
ローカル環境、下記のようなSenchaコマンドを叩いてもらうとプロジェクトが自動生成され、Webサーバ上に配置すると画面表示までいけます。
sencha -s ~/Library/Sencha/ext-4.2.1.883 generate app AdventCalenderSample ./adventCalender/public_html
新たに簡単なフォームパネル（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' }] }] });
画面表示して下記のように開発者ツールなどで、ファイルの読み込みを確認してみて下さい。
次に、ソースの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との契約
- http://www.kingssl.com/から登録手続き。
- CSRが必要になるので、CentOSで下記のコマンドを叩いて作成。
sudo openssl req -new -newkey rsa:2048 -nodes -keyout 適当な名前.key -out 適当な名前.csr - サイトで登録して流れに従って行くとメールが3件くらい来る。
その中に、証明書と中間証明書とコモンネームが記載された
メールがあるので保存しておく。
◇Nginxにsslの設定
- ちなみに作業しているのは、さくらVPSでCentOSを使っています。
- NginxにSSLのモジュールが入っていることを確認する。
/usr/sbin/nginx -V のコマンドを叩くとconfigure argumentsが表示されるので
その中に、--with-http_ssl_module が含まれていることを確認する。 - KingSSLとの契約の3で保存している証明書と中間証明書を合わせたファイルを
適当な場所に作成する。
ファイルの中身は下記のような感じになる。
-----BEGIN CERTIFICATE-----
証明書の中身
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE-----
中間証明書の中身
-----END CERTIFICATE----- - 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のメールのコモンネームの値; - Nginxの設定ファイルの記載に問題がないことを確認。
sudo /etc/rc.d/init.d/nginx configtest - 設定ファイルの記述に問題がなければ、Nginxを再起動。
sudo /etc/rc.d/init.d/nginx restart - httpsで試してみて問題ないことを確認。
- }
