2011年12月15日木曜日

kaoriyaさんvim(Win)にjslint.vimいれてみる。の巻


Jsやってて腹立つのはリテラルとかでの末尾カンマ。

先日突っ走ってつくってIEで動かんぞボケー。
って自分ツッコミ入れたばかりですが。

いい加減そろそろ慣れてきたのでちまちまとIEで怒られてないか
確認しながらの作業ですが、それでも乗りに乗ってぶわーって
作っちゃったあとでこの問題が出ると


もうIEなんてXXXXXXXXXXXXだよ!!。。。


という気分になります。まぁまだそーんなに大きな
IEハザードには遭遇してないのが救いですが。。

ですのでここは一発JSLintを使ってみることにしました。
Webじゃないよ。もちろんvimですよ。


さーググッてさっくりいれるー。


・・・・

(そんなに世の中甘くなかった。。。。。)
つーか予想以上に苦戦したぞ。これ。
完全に力不足。vimスクリプト勉強しないとなぁ。。
備忘録として残しておく。

以下、時系列。


======

ぐぐったよ。
ソッコー見つかりましたよ!
イイネ。



======

runtimeをhomeと考えてうわがけばいいんでしょ??
(私はkaoriyaさんのを利用させてもらっていますので)

======

うまくいかなかった。
一瞬エラーが出ているのがわかる。。。すぐに消えちゃうよ。。。
瞬間を狙ってAlt+PrtScでとってみた。
何度か失敗してキレました。短気はよくないです。

とうぜんググりますた。
「:messsage」というコマンドに出会いましたひとつ勉強になりました。
救われました。
ここで備忘録に残すと決心しました。



さて本題ですよ。
どうしようか。。。。

そりゃあ、もちろんもうソースを見るのが早いですよね。
jslint.vimをvimでひらきますよ。


「/invoke」と。


ほれみつかった。156行目だ。
もう一つ勉強になったのが「echoerr」でエラー出力できるってこと。
つまりこれで引数をダンプしまくりゃ勝ちですよ。

さて。
154行目のsysytemコールしている引数を覗いてみる。
要はコマンドと読み込んだJS渡してるんだよな。たぶん。
これパスの半スペ(Program△Files)とか問題なんじゃないのか?



ここまで来れば同志はいるはず。ということで再度ググります。
このググりが下手っぴだったので苦戦しました。

http://robrobbins.info/?p=245

ここに答えがありました!!!



59行目から82行目まで(Windows用のコマンド生成部分)
を書き換えます。



で、再度確認。
おし。ちゃんとダブルクォートでくくられている。と。



でダンプコード削除して。
めでたく、エラーコードが出力されなくなりました!!!!

まてまて。。。
そうじゃない。目的はちゃんとLintが働いていることを確認しないと。。
検証設定は_jslintrcとかで調整できるらしいけど、
リテラル末尾の検知が今回の目的だからね。


。。。。。



うんともすんともイイませぬ。
しょんぼりですよ。しょんぼり。


しょんぼりして
またjslint.vimに戻る。
b:jslint_outputをダンプしてみる。



ちゃんとjslintは働いてて、エラーメッセージも返してくれている。
いいぞ!働いてるってことは確認できた。
あとは表示系の問題。


ということであとは表示ロジックへの判定文を見ると。。。
正規表現でパースしてる。


ん?この正規表現、さっき出力してた「ふようなコンマだよー」っていうメッセージ、マッチするか?
最後のアルファベットのあとのコロンおかしくないか?
ということで他にもルールがあるのかもしれんのでひとまず最後のコロンだけを
外すことにしました。



多分これででるだろ。。



でたーーー。

ということで終わり。
合ってるだろ。多分、、、。ひとまずこれで。




■まとめるよ。
0:jslintをDLしてきて配置します。
1:パスの設定を変更します。59行目から82行目付近まで。書き換え過ぎないようにね。
2:正規表現を変更します。最後のコロン。



Macいいなぁ。。。
あと、vimスクリプト?でいいのかな。勉強してみたくなった。
おしまい。
疲れた。


======
明日会社の環境にセッティングしてみよ。

2011年12月12日月曜日

vim勉強中です


仕事でプログラムを書くようになり、
vim(gVim)を常用するようになって少し慣れてきたので
振り返りを。

で、初心者なりにどうやって慣れていったのかを
書いて見ようと思います。と、その都度アドバイスを
くれた方々に感謝だよ。


1:インストールしてみる

http://www.kaoriya.net/software/vim
からダウンロードして入れました。



2:設定をどうしたら良いか戸惑う。

・_vimrcのベース:@ispernさんの_vimrc

デフォルトで起動した際に、はて、何をどうしたら良いものか。
これからプログラム書くうえで使ってゆくつもりなんだけどわけわかんない。。。
と戸惑いましたが、過去の勉強会でneocompletecacheを紹介して
くれた@ispernさんがgithubで公開してくれていたので
それをひとまずベースにしました。それをベースに使用していない
部分等の削除や追加を行いながら勉強中です。
きっかけをくれてありがとう!!そういやぁ会ってないなぁー。


・フォント:osaka

会社入って近くにマカーなかたが多く、
macvim奇麗!と言ってるんですが、それよりも何よりも
そのフォントに憧れて最初はmigmix1Mフォントを適用して
使ってました。でも、@asano_yukiさんがosakaつかえまっせ。
って教えてくれたんでosakaに乗り換えました。ほら、気分はMacだよ。
設定自体は_gvimrcに記述しました。

・全角スペース可視化

全角スペース可視化できないの?って聞かれ
あ、そうですねぇ。って。
設定自体は_gvimrcに記述しました。


・ファイル保存時の行末削除

コードレビュしてて、指摘されたときにググったら見つけました。
これはかなり重宝しました。
設定自体は_vimrcに記述しました。
コード元はどこからだかを失念してしまいました。。。


・あとはキーバインド色々

使いながら色々と修正していってます。
まだ、設定の仕方自体怪しさ満点で勉強しながらですが、
まずはvimrcを普通に設定できるようになりたいものです。。



3:neocompletecacheを入れる。

・入れてみた。コレがないと多分もうだめだと思う。
 ただ、まだ設定とか含めて使いこなせていない。


4:操作に戸惑った。

・環境をvim練習用にする
hjklの操作がやはり最初に戸惑いますた。コレばかりはもう仕方ないので
何をする時でもvimを使用するように心がけました。

メインブラウザがchromeなのでvimmium入れたりしてできるだけ
環境をvimに縛るようにしました。

vimmiumはfを押してキーでクリック操作などができるのが良いです。
使いこなせていませんが。

だいなファイラのキーバインドもhjklにわりあて
Ctrl+l、Ctrl+hでウィンドウの切り替えをさせるようにシました。
hは上位、lはデフォルト(フォルダであれば下位へ)設定にしてみました。


壁紙をチートシート(vim-background.png)にしました。
で、
gui
set transparency=220
としてvimを透過させてカンニングしながらキー操作の勉強をしています。
最近はなれたのであまり見なくなってきたので成長したと思います。


5:スニペットに追加してみる

・snippetsを編集してみた。
PHPという未知なる言語との遭遇だったから勉強がてら
vimの訓練もしてみた。その時にphpunitのメソッド群をマニュアルから
加工してsnippetsに追加してみた。

あと、javascriptのsnippetsにextjs4向けのスタートアップ時の
スニペットを追加中。


6:NERDTreeを入れてみる

・@kotsutsumiさんや@asano_yukiさんが使ってて、あ、いいなぁと
おもったので入れました。
で、上記だいなファイラの設定だとeで編集(vim)が起動するんだけど
NERDTreeだと新しいペインにTreeが展開されちゃうので
キーバインドをNERDTree.vimを書き換えて使わせてもらっています。

7:このあと、、

・テクニックバイブルに掲載されているいろいろを少しづつ試して
行こうとおもうけど、、、多分しばらくはこのままだと思う。



慣れ始めたばかりだけど苦痛ではなくなったし、
vimをもっと上手に使いたいという向上心のほうが
大きい。継続的な勉強は必要ですね。



※あと、、、
ExcelをVimキーバインドにシてくれるアドインを
@martini3ozさんから教えてもらいました。
Vimxlsと言います。

これ、アドインインストール後、Ctrl+Mで起動/終了。
起動後に?を入力することでキーバインドマップが参照できます。

やはり行コピー(yy)列コピーが(yc)サクッとできること、
移動がhjklでできることが大きいです。
ほかにも罫線がmやcで引けたり、zで囲えたり、、、
と、使ってとてもお気に入りのアドインです。


※あと、設定ファイルとかまだまだ作成メンテ中ですが
githubに上げてみました。
https://github.com/froggugugugu

2011年11月13日日曜日

VMWareとCentOSと私:5:LAMP構築

PXを動かすために
LAMPの構築をしてみた。

※これは記憶とメモのみなので後でもう一回確認する必要がある。




    ■基本セットインストール

    yum install httpd php mysql-server

    ■各パッケージのインストール

・rpmforgeレポジトリを入れて各パッケージをインストール
     レポジトリはデフォルトOFFにしておく 
  rpmforgeレポジトリの入れ方はこちらを参考にさせてもらいました。また感謝です。

 
・各パッケージのインストール
yum --enablerepo=rpmforge install httpd-devel php-devel php-pear mysql-server phpmyadmin


    ■php-mycryptのインストール
これはrpmforgeではなくremiにある。

・remiレポジトリを入れてphp-mycryptをインストール

    こちらはにゃほーさんがPXでつかってるから必要だよ。という話を教えてくれて。
こちらを参考にさせてもらいました。

    rpm -ivh http://download.fedora.redhat.com/pub/epel/6/i386/epel-release-6-5.noarch.rpm
    rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
    yum install --enablerepo=remi php-mcrypt





    ■Apacheの設定も。

    vi /etc/httpd/conf/httpd.conf

    で、Directoryの設定を
 
AllowOverride All  ←NoneをAllへ



    ■PHPの設定を。
 
こちらを参考にさせてもらいました。一つ一つのパラメタの確認は後回しで
ひとまず。感謝感謝です。本当に。
 
vim /etc/php.ini
    output_buffering = Off
    output_handler = none
    default_charset = UTF-8
    mbstring.language = Japanese
    mbstring.internal_encoding = UTF-8
    mbstring.http_input = auto
    mbstring.http_output = UTF-8
    mbstring.encoding_translation = On
    mbstring.detect_order = auto
    mbstring.substitute_character = none

    ・再起動

    service httpd restart

    ■mysqlの設定
 
mysqlの起動
 
service mysqld start

 
mysqlの設定
 
/usr/bin/mysql_secure_installation

    ・自動起動設定
    chkconfig httpd on
    chkconfig mysqld on

    ・mysql用のポート3306を空けておく。あと、ついでに80、443、3000も。
    vim /etc/sysconfig/iptalbes

-A INPUT -p tcp --dport 80 -j ACCEPT
-A INPUT -p tcp --dport 443 -j ACCEPT
-A INPUT -p tcp --dport 3000 -j ACCEPT
-A INPUT -p tcp --dport 3306 -j ACCEPT


 ・設定の反映
    service iptables restart

    ・phpmyadminでnavicat用ユーザを作成しておく
    あとはnavicatでクライアントから。。


   


VMWareとCentOSと私:4:CentOS設定:DDNSに登録とDiceの起動とか


またもや
本当に
CentOSで自宅サーバ構築に感謝です。

で、DDNSに登録して、
Dice起動しての手順は上記のサイトの素のままで
設定しました。。
確認もポケファイからつないで外から経由でのドメインアクセスが
可能になっていることも確認できました。めでたし。

2011年11月11日金曜日

VMWareとCentOSと私:3:CentOS設定:ルータの穴あけ


3:CentOS設定:ルータの穴あけ

このあたりは概ね理解はしてるものの
まぁやったことなんぞ無いんで手探りだった。
メモメモ。

CentOSにSSHでつなぐためには
ルーターに届いた22番ポート(SSH)に来たものをCentOSへ横流し(その逆も)
する必要がある。これだけ。

しかしはじめてな事はホント躓くのですよ。
することは、
1:VMのネットワーク設定をブリッジにしておく。
2:VM上のCentOSのeth0を有効にしておく(起動時設定もふくめて)。
3:ルータの設定でVM上のCentOSへDHCPではなく、静的にIPをふっちゃる
4:22番ポートの設定
5:SSHを起動してやる
こんなとこでしょうか。


1:VMのネットワーク設定をブリッジにしておく。


VMWareのメニュー→仮想マシンの設定→ネットワークアダプタを選択で。

ブリッジにして物理ネットワークの状態を複製で。


これでVMの設定はOK。





あとはルータでIP振るときにMACアドレスがひつようになるので、
CentOS上でifconfigしてMACアドレスを控えておいた。



2:VM上のCentOSのeth0を有効にしておく(起動時設定もふくめて)。
なぜか、ネットワークカードが有効になってない。何でだかわからんが。
ですので有効にする必要がある。

vi /etc/sysconfig/network-scripts/ifcfg-eth0
     
で、

ONBOOT=yes


にする。




3:ルータの設定でVM上のCentOSへDHCPではなく、静的にIPをふっちゃる
ルータの設定:DHCPリースのところで新規追加して手動割り当てで。



4:22番ポートの設定
プロトコルを選択してLAN側のIPにCentOSのIPを指定。
同一ポートへのフォワードなのでLAN側ポートにも同一のポート番号を指定(この場合は22)


5:SSHを起動してやる
   ・SSHを起動して、起動時有効にしておく


    /etc/rc.d/init.d/sshd start

で起動。


    chkconfig sshd on

で起動時に起動する。


これでSSHはOKだと思う。


もちろん秘密鍵作って云々はあとで。


2011年11月10日木曜日

VMWareとCentOSと私:2:CentOSインストール


で、続きを。
新しいOS入れるのってなんかいいですよね。
メモメモ。

2:CentOSインストール

    VMWareからisoイメージ起動でDLしたisoイメージファイル
    を指定してVMを起動するとCentOSのインストールが始まる。
    あとはひたすら手順にしたがってインストールした。

本当に


仮想マシンを起動するとインストールCDイメージが
設定されているのでインストールが始まります。

NEXTで。

日本語でNEXTで。

日本語で次で。

基本ストレージデバイスにした。
次で。

全てを再初期化で。
次で。

ホスト名はあとでも変えられるので
そのままで。
左下のネットワークの設定。で。

eth0を選択して、、

編集で。

この設定もあとで変更できるけど、
ここでやってしまった。
このCentOSには固定IPを割り当てるってことに
きめていたのでそのアドレスを割り当てた。
ゲートウェイ、DNSサーバにはルータのIPを設定。
で、適用で。

システムクロックでUTCを使用のチェックを「外して」
次で。

rootのパスワードをきめて
入力して次で。

すべての領域を使用する。で、
次で。

変更をディスクに書きこむで。
次で。

フォーマット中で。

今回の用途はPXとNXが動きゃいいので
Minimalで。

左リストからベースシステムを
右リストからベースにチェックして次で。

左リストから開発を
右リストから開発ツールにチェックして次で。

いよいよ始まった。放置。

はじまってるなう。

終わったよ。おめでとう。


ということで次は設定になります。

==========================
眠いので一旦寝ます。

VMWareとCentOSと私:1:VMWareインストール

たぶん、こんなん残してなくてもわすないだろうけど、
一応流れ的に必要だからメモを残しておくよ。

1:VMWareインストール
    VMWareはVMware Player4をDLしてインストール実施。
    https://www.vmware.com/jp/tryvmware.html


  あ、あと、CentOS6のisoイメージをDLしておく。
    http://isoredirect.centos.org/centos/6/isos/i386/
    (DLに時間がかかるので一晩ほうっておいた)

    メモリを精一杯利用することに設定してみた。

新規作成だから、
新規仮想マシンの作成で。
あとで入れるから、
後でOSをインストールで。

もちろんCentOSで。

仮想マシン名入れて
イメージファイルの保管場所を指定。と。

推奨サイズのままにしておいた。

で、メモリ割り当ては目一杯割り当てることにした。
もともと死んでたマシンだしね。

で、CDのせっていでISOイメージファイルを使用するにして
DLしてきたCentOSのイメージファイルを指定しておく。と。

これでCentOSのインストール準備完了。と。





つぎはCentOSのインストールメモを。

VMWareとCentOSと私

デスクトップPCがタダの箱になっていたことと、
仕事上、一度は経験しておかないとまずいので
遊びがてらWindowsXP上のVMWareにCentOSを構築してみたよ。

■環境
ルータ:BAFFALO WZR-HP-G301NH
DELL Inspiron530 メモリ4GだけどXPProの32bit

■ゴール
目標としては
・SSH接続
・PX環境構築
・NX環境構築
がひとまずのゴールとしてみる。

■アウトライン
大きな流れとして
1:VMWareインストール
2:CentOSインストール
3:CentOS設定ルータの穴あけ
4:CentOS設定
5:LAMP構築
6:PX構築
7:nextjs構築
となる。


■手順
参考というか手順の全ては
CentOSで自宅サーバ構築を参考に、CentOS6に読み替えて実施中です。
もうそもそも右も左もわからんのでそのまま写経になってしまうんだろうけどね。

ちまちま進めて画像もとれたから久々にブログを更新を。と。

2011年9月23日金曜日

PHPを始めたよー

完全に放置状態でした。

 あ、でも勉強はしてました。

・vim(gvim)
・PHP
・xFrameworkPX

の。 


本当はExtJs4に行きたいんだけど、 PHP初心者な自分にとってはまぁ、新しい言語なわけですし。

ひとまず、オライリーのカッコウ本をかってヨミヨミふむふむと。 
せっかくなのでPHPUnitでの開発リズムってものも ためしてみるかーー。

っことで、TDDの本もかってヨミヨミふむふむと。

 コレばかりは訓練になるのでコードをかかんとイカンですね。 

ということを最近やってたのでブログを放置してたら 更新しねぇのかよ。

というツッコミが入ったので更新したまでです。はい。

 ちっこいツールを試しに作って(PHP版のDataTierGeneratorもどき)
少しだけTDDの本見ながら体験した時のリズムでも載せておきます。


 ■テスト駆動開発のリズム  
  設計: 
        責務(そのクラスは何をしなくてはならないか)に
         視点を置いて機能を切り出しクラスの切り分けをしてみました。  
  
  実装:
        1:テスト環境にテストクラスを作ります。
         一番小さい例だと、Writerクラスです。
         Writerはファイルへの書き込みができなくてはならないので
         テストクラスにはまず、
         Writerをインスタンス化し、   
         writeし、   
         writeできたことを確認するコードを書きます。    
         (Readerクラスを作っておいてtestWriteAndReadとかにしてもいいのかもね)

         評価する際の評価値で肝要なのはより具体的であるということです。

        2:テストを実行します。
        3:エラーが発生します。クラスが無いと言われます。
        4:クラスを作成します。
        5:テストを実行します。
        6:エラーが発生します。メソッドが無いと言われます。
        7:メソッドをひとまず、評価値がTrueに成るような値を返す実装で作成します。
        8:テストが通ります。
        9:複数の視点から評価します。(トライアンギュレーションというらしいです)   
         テストデータを変更して評価します。
        10:エラーが発生します。
        11:テストが通る実装を行います。
        12:実装の重複を排除します。
        13:類似パターンが2つ以上発生しそうなとき、抽象化できないかを考えます。
       

      このサイクルを繰り返す。 です。
      慣れてくると小さなテスト例えば2-6あたりをジャンプしたりして
      疲れてると小さく刻んで安心してみたりと。  
     
     できるだけ本に書いてるように進めたかったんですが  
     なかなか難しく、でも、このリズムはやってみるとホント気持ちがいい。    
     と。  こんな感じでした。 

■PHPUnit  
  PHPUnitはXAMPPにももともと??入ってるみたいだったんですが、  
  そのフォルダをリネームしておいて新規にインストールして使いました。  

  phpunit自体はphpunit.batというバッチファイルを実行して稼働させています。
  パラメタでカバレッジ情報をHTMLファイル出力する設定にしています。

  まだ使いこなせてませんが。 

■Vimの設定  
  あと、vimのftpluginのphpに下記二行を追加して、テスト作っては
  :w,mで実行してみたりとか、  
  クラス作っては
  :w,lでLintで構文チェックさせてみたりとやってみてます。


 nmap ,l :!C:\xampp\php\php.exe -l "%"
 nmap ,m :!C:\xampp\php\phpunit.bat --coverage-html report "%" 












ああ、はやくExtJs4に行きたい。 
が、そのまえにDirectがグレイトなPXを勉強します、そもそもPXがメインに必要になるしね!!


あと、Vim体験でもかくかな。。。 






あ、すげえ大切なこと書いてないじゃんか。 


我らがcode:xの小堤さんがとうとう本をお出しになりましたよ。


 #ExtJS4実践開発ガイド 


 これについはよみとちゅうだからまた今度。 ねむ。。



2011年7月20日水曜日

iphone3gsをもらったよ!!

二ヶ月もブログほったらかしだったか。。。
いろいろありすぎたから書く気もおきず。

ipod touch欲しいよー。。。
ってつぶやいてたら、

@taka_2さんが
あげようか?って
いってくれて。

だからGDDPhoneあげました。

タカサン、ありがとう。恐ろしく快適だよiphone。

2011年5月15日日曜日

ExtJS-111 ATNDの受付のその後(まとめ)


長々とまとめ。またしばらく触らんだろうからね。

まずお世話になった、なってるリンクは山ほどあるのですが、
http://extjs.blog.sus4.co.jp/
http://www.sunvisor.net/extjs/06
http://extdocs.xenophy.com/
今回は主にこちらにお世話になりました。

あと@naotoriさんのカーセンサーのサンプル。どこに行っちゃったんだろ。。
探せない。。

レイアウトについてはレイアウト迷子になってたときに、
@martini3ozさんにお世話になりました。
こちらはスッと頭に入ってきて良かった。
ツイッターというサービスに感謝。
http://www.sunvisor.net/extjs/06

あと、PDで小堤さんが何気なく
itemsをババっと書いて、layoutをちょこちょこ変えて
例を見せてくれたので「ああ、そうか、そんな感じで変えて試せばいいんだな」って。

みんなPerfectDay行けばいいのに(また言ってる)。

さていろいろ過去の分も含めておさらいを。
(writerについてもまとめておかなきゃ。もう忘れてる。。。)

■CDNについて
ExtJsを提供してくれているのはchacheflyです。ほかは知りませんし、
CDNについてもずいぶん前の勉強会ですが、Extjs勉強会を通してはじめて知りました。

■継承(Ext.util.Observable継承)
    ・constructor
        ・addEvents
        ・on / ・mon
        ・superclass.constructor.apply(me,arguments);  
    な順で。
     

    ex)
    AtndReception.AtndService = Ext.extend(Ext.util.Observable, {
        constructor: function (){
            var me = this;
            //イベント作成(通知用のIF)
            me.addEvents({'eventsearch':true         //イベント検索
                         ,'seteventfee':true         //イベント会費設定
                         ,'usersearch':true          //ユーザ検索
                         ,'showinfo':true            //詳細情報表示
                         ,'updateinfo':true          //情報情報更新      
                         ,'attendance':true          //受付
                         ,'absence':true});          //受付解除
            AtndReception.AtndService.superclass.constructor.apply(me,arguments);                  
            me.init();
        }
    …


■継承(コンポーネント)
    //コンポーネントの初期化
    ・initComponent(construct時にコールされる)
        ・addEvents(イベントの追加)
        ・superclass.initComponent.call(me);
    な順で。

    ex)
    initComponent: function () {
        var me = this;
        AtndReception.EventGrid.superclass.initComponent.apply(me, arguments);
        me.addEvents('beforesearch',
                    'aftersearch');
    },

    ・initEvents(render時にコールされる)
        ・superclass.initEvents.call(me);
        ・on(ハンドラの設定)
        ・mon
        な順で。

    ex)
    initEvents: function () {
        var me = this;
        AtndReception.EventGrid.superclass.initEvents.apply(me, arguments);
        me.on('rowdblclick', function (grid, rowIndex, e) {
            var me = this;
            //イベント会費ダイアログ作成
            me.observer.fireEvent('preseteventfee',me.store.getAt(rowIndex).data);
            me.observer.fireEvent('usersearch',me.store.getAt(rowIndex).data);
        });          
    },
       

■グリッド設定
    ・store設定
        ・proxy設定

            ex)今回DはWebサービスを使用するため同一ドメインポリシに
                引っかかるためScriptTagProxyを使用します。
                APIのパラメタの仕様に合わせて補正する必要があります。
         
            proxy: new Ext.data.ScriptTagProxy({
                url: 'http://api.atnd.org/events/'
            })
            //ロード前のイベントでatndAPIの仕様に合わせて補正する
            me.on('beforeload', function (o, p) {
                p.params.start++;//Atndは1オリジン
                p.params.count = p.params.limit;//パラメタの変更
            });
            //ロード後のイベントで補正したパラメタ情報の書き戻し
            me.on('load', function (o, r, p) {
                p.params.start--;
            });
                 

        ・reader設定
            フィールドを設定する。
            nameがcolModelのdataIndex値と連結、サーバからの返却キー名がnameと違えば
            mappingで結びつける。
         

            ex)
            reader: new Ext.data.JsonReader({  
                fields: [{
                    name: 'event_id',//こっちはExtJsの世界の通り名だよー
                    mapping: 'event_id'//こっちはサーバからの返却名だよー
                }
                     

    ・colModel設定
        dataIndexはbindするレコードのフィールド名
        (=Readerに設定しているfieldsのname。readerは内部でレコード生成する際に
            このfieldを引数に生成するからおなじこと。)
     
        ex)
        colModel: new Ext.grid.ColumnModel([{
            header: 'イベントID',
            dataIndex: 'event_id'//fields:のnameね。
        }
     
    ・tbar(top)設定(検索用のパネルとか設定してみるよ)
    ・bbar(buttom)設定(集計結果とかステータスとか設定してみるよ)


■フォームの出し入れ
    フォームはformPanelから使用することが多いと思う。
    formPanelに内包されているフォームに対して設定したり取得したり。
    http://extjs.blog.sus4.co.jp/2010/04/22/extjs-tutorial-form-baseic/

    取得:
    ex)
        return me.getComponent('setFeePanel').getForm().getValues();
 
    設定
    ex)
        me.getComponent('setFeePanel').getForm().setValues(config);

■レイアウトのスプリットバー
    スプリットバーの移動は
    スプリットバーのエレメントを移動させて(このアニメーションは未検証のままのこしちゃったけど)
    'beforeapply'を発火でやってみた。
    split.el.move(dir, movesize , {duration: 0.25, easing: 'easeBoth', callback: function (el) {
        var me = this;
        //alert('moved!!');                              
    }, scope: me});
    split.fireEvent('beforeapply', me, dir=== 'bottom' ? panel.getHeight() - movesize : panel.height);

■イベントの管理について
コンポーネント同士がお互いのイベントにハンドラ設定してくと
混乱するけど、止む終えないケースはある。この辺はまったくもってよく
わかってないので@kotsutsumiさんや@Mt_blue81さんや、@djodjojpさんから
ヒントを貰い、
今のところは、、、
Application(オブザーバ:Observable継承) → Service(オブザーバ:Observable継承)→Component(Component)
として、
Serviceには機能要件レベルの実装を行い、イベントの追加、ハンドラとして設定
Componentでは、生成時にServiceオブジェクトを渡しておいて、
機能要件レベルの挙動が発生した際はServiceのイベントを発火させることにした。
サービスの主要なものはサービスに集約したかったから。
また、コンポーネント間での小細工や、連動処理はコンポーネント同士で結びついて
良いことにした。
これは
1:一挙動により下位層が一斉に動き出すケース
2:一挙動により上位層が動き出すケース
3:一挙動により同位層が動き出すケース
があったとき、
2,3のケースが多いかなと思ったから。
なんかイイ方法というかベストプラクティスが欲しいよー。

■総括
新しい発見と良い復習になったと思います。
フォームの細かい制御とかその辺はちゃんと作るとき躓くだろうから
その時にでも。そのまえに実践開発ガイド出るのを期待して。
マジですげー手元においておきたい気分です。

早く出ないなぁ。

■これから
次はSenchaに行ってからExtJs4。
でまた階層Gridに戻ろう。

2011年5月12日木曜日

ExtJS-110 ATNDの受付のその後(jsdoit)

どうして公開したらいいかわからんので
ひとまず昨晩jsdoitにアップした。

んだけど、idが気に入らないので
再びアップした。

んだけど、ワンファイルコードで見にくいから
分割したんだけど、アップの仕方がわからないので

結局そのまま放置した。

http://jsdo.it/froggugugugu/tFYj/fullscreen

ひとまず、
ExtJs3はこれで一旦離れよう。
(以前やってた階層グリッドはちょっと寝かしておこう)


SenchaTouchを開始しよう。
@kotsutsumiさん主催のPerfectday(最近ついていけてない)
でExt4について教えてもらったことが今度はSenchaTouchで
生かせればうれしい限りなんだけど。

ほんと、プログラムがかけない体になってきたよ。。。


2011年4月14日木曜日

ExtJS-109 ATNDの受付のその後(一旦おあずけメモ)

春になりました。
桜も咲きました。
資格の季節です。

去年は1ヶ月1個取るぞーって意気込んで序盤はうまくいったんだけど
職場の異動でやる気ぱたっと無くなって頓挫。。。

一年経過しましたのでそろそろ始めます。ので
おもちゃつくるぞーっていってやり始めた
ATNDの受付は一旦おあずけ。

今年度は4つ取れりゃイイネ。
という具合で取り組もう。



再開の時のためにメモを残しておく(すぐに再開するだろうけど)。

・会費、懇親会費オブジェクトをObservableから継承したオブジェクトを作って
値の再設定に伴う各種表示、料金再計算をリスナとして登録すること。
・ATNDっぽい配色に。あとATNDのロゴも入れて提供も入れること(テーマってどうすんだろ)
・フォームのサイズ、レイアウトの微調整
・入力チェック、オリジナルバリデータの設定
・日時入力あたりのrender設定
・Grid内部のrender作成と設定

ひとまず勉強。勉強。

2011年3月27日日曜日

ExtJS-108 ATNDの受付のその後(BorderレイアウトのSplitBarの移動)

子供と寝てしまい、午前一時半からの調査と実装。
勘違いとなれないレイアウト周りで超はまりました。
以前、コードリーディングした際に勉強してたはずなのに度忘れしてました。

やりたいイメージは、

①イベント検索 ボタンでイベント領域を広げておきたい。




②イベントのユーザリストへDD時にユーザ領域を広げたい















です。


領域は可変にしておきたい。
でもいちいちSplitBarを選択して調整したくない。
で、Grid間のDDを有効にしたいから
collapseだとこまる。

なのです。


ちなみにこの後は、




参加リストからDDするとダイアログが出てて
受付します。
















繰り返しになりますが、
SplitBarは可変にしておきたいし、collapseだとグリッド間のDDが使えない。
で、
結果から言うと


borerlayoutのonSplitMoveを稼動させてやる。




に落ち着きました。

コードの抜粋(ビューポートに追加実装しちゃってます)。


/**
 * 下部スプリットバー移動サイズ計算
 */
calcSouthSplitMoveSize: function(dir){

    var me = this,
        split = me.layout.south.split,
        panel = me.layout.south.panel,
        result;
      
    if (dir === 'bottom'){
      
        result = panel.getHeight() - me.layout.south.minHeight;
  
    } else if (dir === 'top'){
  
        result = me.layout.south.height - panel.getHeight();
  
    }
  
    return result;

},

/**
 * イベントリージョン拡大
 */
openEventRegion: function(){

    var me = this;
  
    me.resizeRegion('bottom');

},

/**
 * 受付リージョン拡大
 */
openReceptionRegion: function(){
  
    var me = this;
  
    me.resizeRegion('top');

},

/**
 * リージョンサイズ指定
 */
resizeRegion: function(dir){

    var me = this,
    split = me.layout.south.split,
    panel = me.layout.south.panel,
    movesize = me.calcSouthSplitMoveSize(dir);
  
    split.el.move(dir, movesize , {duration: 0.25, easing: 'easeBoth', callback: function(el) {
        var me = this;
        //alert('moved!!');                              
    }, scope: me});
    split.fireEvent('beforeapply', me, dir=== 'bottom' ? panel.getHeight() - movesize : panel.height);
  
}







ハマリからの脱出経路。


■ビューポートのExt.layout.BorderLayout.SplitRegionが生成されるくみは
BorderLayout.jsの117行目あたりを。(center以外かつ、split=tureで生成)

■Ext.layout.BorderLayout.SplitRegionがSplitBarを生成する部分は、
おなじく、BorderLayout.jsの1071行目あたりから。
1076行目でリスナ設定されているね。

■Ext.SplitBarの移動については、
Ext.SplitBar.jsの202行目あたりからDDの終焉の実装部。

■ここまでくればSplitBarオブジェクトとPanelオブジェクトが触れればゴール。



※はまってしまったところは、
SplitRegionのことをてっきりSplitBarだと思ってたことと、
その誤解が解けたあと、
SplitBarはSplitRegionにくっついていると思ってしまったこと。
(これは以前コードリーディング発表時にレイアウトまわりみたとき見てたはずなのに)

と、ソース見ないと通常の倍はかかる気がする。


結論:だからはじめからソースを見りゃいいんだよ。


あとは107で決めた機能拡張したらゴール。あと二回かな。。
そしたら念願のSenchaTouch!!


※今回のこのレイアウトについては完全な予定外実装。


2011年3月22日火曜日

ExtJS-107 ATNDの受付のその後

2月にちょいと作ってたやつを三連休のスキマ時間で
仕上げてしまおうとおもったけど、なかなかそう上手く時間は取れず。。

一応
・ViewPortによる設定と
・twitter_imgフィールドをimgタグに入れる

ってのだけはやっておいた。
twitter_連携してない人の画像は出来ればnoimageとかそういう類の
やつがいいんだろうけど、ひとまずchasheflyでやってるし
default配下の画像にした。

あとは
・懇親会費の設定ダイアログ、今は固定1000円だし。
・懇親会費じゃない主会費ってのもあるね。
・項目とかグダグダなのでUI周りを整える
って位をつけて
早くSenchaに行きたい。
でも相変わらず牛歩。














寝よう。

2011年3月19日土曜日

最近忙しい

NextJsもあれ以来全く触れてないし、
ExtJsも昨日久々にプログラムをかけた。

三連休でひとまずブログを一度更新することを目標にしよう。
てか一ヶ月以上ほったらかしだったんだ。。どうりで忘れるわけだ。

しっかし、年度末ってのはいろいろ重なるね。
今日は長女の7才の誕生日。
疲れた顔なんてしてられんな。。


2011年3月1日火曜日

NextJS-1環境だけはひとまずつくろう


ExtJS106のプログラムはほうっておいて
Win環境にnextjs環境をサクーって作りたかったんだ。
そしたらkotsutsumiさんが、VMWareいれてcentosいれりゃいいじゃんよーって
お勧めしてくれたんでそうしたよ。

またいつか、絶対に環境壊すと思うのでメモメモ。

1:VMware インストール

2:centOSのディスクイメージゲト
    CentOS5MinimalVirtualAppliance-1.3.7zをダウンロード
    (今はリンク切れ起こしてる。。)

3:centOS起動

4:ユーザ追加
    useradd ユーザ名
    passwd ユーザ名

5:sudoユーザ追加
   vim /etc/sudoers
  
   root ALL=(ALL) ALL
  
  の下に
  
  ユーザ名 ALL=(ALL) ALL
  
  を追加する
6:ログアウト

   logout
  
7:ログイン

   ユーザ名でログイン

8:node インストール(今は4.0.1が最新だった)

   sudo yum install build-essential libssl-dev curl
   mkdir tmp
   cd tmp
   wget http://nodejs.org/dist/node-v0.4.1.tar.gz
   tar -xvzf node-v0.4.1.tar.gz
   cd node-v0.4.1

※ここでgcc 入ってないことがわかる。

   sudo yum install gcc-c++


※openssl-develもない。


   sudo yum install openssl-devel

   ./configure --prefix=~/local
   make
   sudo make install

8:PATHを通す
   ~/.bash_profileを編集

   $PATHに~/local/binを追加する

   一度ログアウト後にパスが通っているか確認するよ。

   echo $PATH

9:node用のポート開放(nodejsのexample実行するのにあけただけ)
  →これ以降の手順ではnodejsのexample確認はしないので別にいらない。

   /etc/sysconfig/iptablesを編集

   -A INPUT -p tcp --dport 8142 -j ACCEPT

   を追記。

10:npm インストール

   cat >>~/.npmrc <<NPMRC</ppp>
   root = $HOME/.node_libraries
   binroot = $HOME/bin
   manroot = $HOME/share/man
   NPMRC

   vim ~/.bashrc

   export NODE_PATH=$HOME/.node_libraries:$PATH
   export PATH=$HOME/bin:$PATH
   export MANPATH=$HOME/share/man:$MANPATH

   を追記

   curl http://npmjs.org/install.sh | sh

   を実行

11:作業用にXwindows入れておく。(コレはいらない人はいらないよね)
   rootで

   yum groupinstall "X Window System" "GNOME Desktop Environment"


12:nextjs インストール(他のパッケージもね)

   npm install NX connect formidable mysql socket.io

13:mongodbのインストール(てかなんで12でやらんかった俺。)

   npm install mongodb

14:Win環境とcentOSで共有を張っておきたい。

   nodejs用のファイル記述するのにwin環境上で書いて
   そのままcentosに切り替えて動かしたい。
   ってことでsambaいれればいいの?ってつぶやいたら
   @martini3ozさんが教えてくれました。VMWareで共有できるよーて。

   VMwareの設定で共有張ったら再起動!
   で、

   /mnt/hgfs/共有名

   でほうら見えた。
   これでWin上での開発が楽チンになるってことです。

16:ひとまずnextjsのサンプルを環境にDL

   共有貼ったフォルダにNextJsの環境を放りこんでおこう。
   examplesがまず欲しいからね。

17:サンプルの実行
   で、ひとまず、ifconfigでIP見て、
   nextjsのサンプルを動かすってことで、
   nextjs配下のexamples配下のwebsocketに移動して

   node server.js

   を実行。

   winのブラウザで

   http://192.168.150.128:3000/にアクセス。

   チャットが動いた事を確認。

















めでたし。



■下記、お世話になったサイトです。サイト管理者様。ほんとに感謝です。ありがとうございました。 
NextJS
http://www.nextjs.net/

nodejs
http://nodejs.jp/nodejs.org_ja/

自分の感受性くらい
http://d.hatena.ne.jp/t_43z/20101013/1286957802

にゃほ~
http://yp.xenophy.com/?p=75

あさのののーと
http://yuki.xenophy.com/?p=188

junji_furuyaのブログ
http://d.hatena.ne.jp/junji_furuya0/20101028/1288222330

地方で活動するweb制作者の日々を綴るblog
http://blog.livedoor.jp/loopus/archives/50161232.html

WebOS Goodies
http://webos-goodies.jp/archives/50481076.html

2011年2月13日日曜日

ExtJS-106 久々のプログラムを作る。

気がつけば2月。
だらだらと変なグリッドをつくろうとやってましたが飽きてしまいました。
ので先週?先々週の週末にSenchaTouch触ろうとおもってネタがないので
@taka_2さんや@mt_blue81さんがANTDAPI触ってたので真似ようと。



年末の勉強会で@ispernさんと受付でワタワタして
こりゃもったいないな。とおもったのでせっかくだから
ATNDの受付をつくろうと思ったのです。
サクっとできそうだったし。

つまり勉強会な人にであってつくろうと思ったおもちゃです。


機能は簡単。
イベント検索して
イベント参加者リスト持ってきて
イベント参加者を別のグリッドへ移動して参加人数と懇親会集計するってもの。


案の定、
パネル自体はさくーっとできたんだけど、
その先はなーんかぜんぜん手が動かなくて大変だった。
ScriptTagProxyとかD&D周りについては一通りできあがったら乗せていこ。

今日終わらすはずだったんだけど変なところで詰まってあきらめー。
→解決。recordTypeがundefineになってしまうんだけど、
readerをちゃんとつくってやったらOKだった。。このあたりようわからん。




2011年1月3日月曜日

案の定もげた

サンタにもらったプリキュアがやられたらしい。

アロンアルファの出動。