Sencha Architectをはじめてみる2

今日もSencha Architectについて書いてみる。
起動して、テンプレートの選択をして「Create New」をクリックしたあとから。

ちなみに、今回の内容は本家ドキュメントから抜き出して、自分で理解するためにまとめているので、詳細はこちらを参照してください。
しっかりとしたドキュメントを用意しているあたり、さすがです。

画面

大きく5つのエリアに分けることができる。

ツールバー

画面上。新規プロジェクトの作成、既存のプロジェクトを開く、構築中のプロジェクトの保存、プレビュー、作成したアプリのビルドなどのボタンがあるツールバー。

ツールボックス

画面左。コンポーネントやコントローラに追加する設定などが一覧で表示されている部分。ここからキャンバスやプロジェクトインスペクタにドラッグアンドドロップできる「Filter...」は検索ボックスで、コンポーネントを絞り込むことができる。

キャンバス

画面中央。プロジェクトの現在の設計やコードを表示する部分。右上のボタンで切り替えることができる。

プロジェクトインスペクタ

画面右上。現在のプロジェクトのクラス一覧が表示されている部分。単に「インスペクタ」と略すことが多い。

コンフィグ

画面右下。プロジェクトに設置したコンポーネントのプロパティの値を設定する部分。このキャプチャはキャンバス上にタブパネルをドロップした直後のコンフィグ。

プロジェクトに名前をつける

インスペクタからApplication（黒丸で「A」と書いてあるところ）をクリックし、インスペクタ下のコンフィグから「name」プロパティを探してプロジェクトの名前を入力する。
キャメルケースでの命名が伝統とのこと。たぶん本家推奨設定なのかと。

プロジェクトの保存

ツールバーの「Save」ボタンをクリックし、表示されるメニューの「Save」をクリックする。プロンプトでアプリの名前、プロジェクトの保存場所などを聞かれる。

• Save Path
  プロジェクトディレクトリを保存するディレクトリを選択する。
• App Name
  作成したプロジェクトの名前空間を設定する。これは保存先とは関係ない。
• Project Name
  プロジェクトを保存するディレクトリ名を設定する。実際にプロジェクトが保存される場所は、「【Save Path】/【Project Name】」下になる。なので、ホームディレクトリ直下にtouchappディレクトリなど作って、これをSave Pathにして、実際にブラウザから見るときはプロジェクトディレクトリをシンボリックリンクでWebサーバから見える場所に設置して・・・とかがいいかもしれない。

それぞれ入力が終わったら、Saveボタンをクリックする。すると、次のようなライセンス選択画面が出てくる。

Senchaフレームワークは作成開始時にライセンスを選択しなければならない。
Sencha Touchは商用でもSencha Touch Bundleを買わないと使えないものを使わなければ無料だけど、Ext JSは有償。
なので、Sencha Touchは商用選択一本だろうけど、Ext JSのプロジェクトの場合はどちらを選択するか悩むところ。
でも重要なのが、Senchaフレームワークを使用する場合、「とりあえずGPLで作って、後でライセンス買って商用ライセンスにしよう」が通じない。
なので、プロジェクト作成前にしっかりライセンスの検討、必要であればライセンスを購入しておくことが必要。

ここからは自分の解釈だけど、何かサービスを立ち上げる場合はソースコードを（サーバサイド含め）すべてオープンにすることはほぼ間違いなくないと思うので、選択するのは商用ライセンスしかないと思われる。GPLだとソースコード公開の義務があって、どこからどこまでを公開する必要があるかの線引きが非常に難しい。
このあたりのわかりやすい説明はここにまとめられている。ライセンスの選択に困ったり、ライセンスを買う必要がある場合は、日本のライセンス販売代理会社にお問い合わせするとよいと思う。

保存ができない場合

以下を確認する。

• パスが一致しているか（大文字小文字は区別される）
• 指定したディレクトリに対して書き込み権限がない

見てみる

実際に作成したものをブラウザから見てみる。ドキュメントルート直下以外に設置した場合はWebサーバから見える場所にシンボリックリンクなどを作成する。

ローディング画面は見えたが、そこで止まってしまった場合

ポートの指定などの影響、もしくは深い階層に設置した等の理由で、JSなどのindex.html以外のファイルが読み込めていないのかもしれない。そのような場合はURLプレフィックスを適切に設定する必要がある。
ツールバーにあるギアのようなアイコンをクリックすると、次のウィンドウが開く。

ここで「Url Prefix」の項目に、アクセスするURLをフルパスで書く。
たとえば、ブラウザからhttp://localhost/mapでアクセスしたい場合はhttp://localhost/mapと入力する。

次回はプロジェクトにコンポーネントを追加してみたいと思います。

NERDTree無視ファイル・ディレクトリ設定

メモ。

" 無視設定
let g:NERDTreeIgnore=['\.DS_Store$', '\.git$', '\.svn$', '\.clean$', '\.swp$', '\.bak$', '\.hg$', '\.hgcheck$', '\~$']

Sencha Architectをはじめてみる1

そろそろ無視できなくなってきたので、Sencha Architectを触ってみる。

Sencha Architectとはドラッグアンドドロップで部品を配置して、Ext JSやSencha TouchなどのSenchaフレームワークを使用したWebアプリケーションをささっと作成するツール（超ざっくり説明）。

詳しくは本家サイトやこちらで確認を。

準備

Sencha Architectは下記URLからダウンロードできる。

http://www.sencha.com/products/architect/

Sencha Architectは有料だけど、30日間は試すことができる。現在のバージョンは3。

特にバージョンの記載がない場合、以後Sencha Architect3.0を使っていくことになります。

また、使用するにはSenchaのフォーラムに登録する必要がある。フォーラムの登録は無料。

http://www.sencha.com/forum/

早速試す

諸々準備が整ったら起動してみる。

「Create New」をクリックすると、次のような画面になる。

このように、最初からサンプルやテンプレートが揃っている。自分のプロジェクトにあったものを選ぶと、開発スピードが上がるかも。

今回はドキュメントルート下のmapディレクトリにプロジェクトを置いてみる。

ツールバーの「view」→「Project Settings...」をクリックして、次の画面を開く。

開いたら、「Url prefix」のところをキャプチャのように変更して、「Save」ボタンをクリックする。（見えないかもしれない。。。「http://localhost/map/」と書いてある。）

終わったら右上の「Save」ボタンをクリックして、その中の「Save」をクリックする。

「Save Path」はドキュメントルートのパス、「App Name」はお好みで、「Project Name」は今回はmapと入力する。saveボタンをクリックして、ブラウザを立ち上げて、http://localhost/map/にアクセスしてみる。

たったこれだけで、GoogleMapを使ったWebアプリが作れてしまった！

資料作りと勉強のため、しばらく書き続ける予定。。。

NERDTreeが勝手に起動されるようにしたい

Vimのプラグイン、NERD Tree。

https://github.com/scrooloose/nerdtree

Vim起動時にコマンドやらショートカットで開くのだが、もうなんだか面倒なので、起動時に勝手に開かれるようにしたい。

ついでに、最初からブックマークが表示されていると完璧。

ということで、設定してみた。

まず先にブックマークを最初から表示されるようにする。.vimrcに次のように追記する。

" ブックマークを最初から表示
let g:NERDTreeShowBookmarks=1

これでNERD Treeを立ち上げると同時にブックマークが表示される。

次に、Vim起動と同時にNERD Treeを起動したい。.vimrcに次のように追記する。

" ファイル指定で開かれた場合はNERDTreeは表示しない
if !argc()
    autocmd vimenter * NERDTree|normal gg3j
endif

起動時のオプションを見て、オプションがなければVim起動と同時にNERDTreeを起動する。

後ろの「|normal gg3j」は、先頭の行で「" Press ? for help」とか「----------Bookmarks----------」の行を初期状態で見えなくしたいために追加している。

この設定でVimを起動すると、次のような状態になる。

これで、ほんの少しだけどキーボードを叩く回数が減った。

Charlesを使ってみた

CharlesというHTTPプロキシソフトを試してみたので、使い方メモ。

準備

下記URLからダウンロードして、インストールする。

http://www.charlesproxy.com/

使って見る

起動する。とりあえず右を選ぶ。

試用版だからか、10秒待つことに。

起動直後。

ブラウザを開いて適当にページを開いた後、戻ってみてみると、いろいろなhostから読み込んだのがわかる。

差し替えてみる

特定のディレクトリごと、ファイルを差し替えてみる。ここで、jQueryのページを開いてみる。

読み込んでいるファイルのいくつかを、ローカルファイルに差し替えてみたい。

ここで、main.jsとplugins.jsで少し変更してみる。 ブラウザ上でCmd+sを押し、Chromeの場合「ウェブページ、完全」を選択し、ローカル上にダウンロードする。 ダウンロードが終わると、保存先に「jQuery_files」というディレクトリができているので、その中のmain.jsとplugins.jsの先頭行に次のコードを入れる。

// main.jsの先頭に入れる
console.log('main');

// plugins.jsの先頭に入れる
console.log('plugins');

今回はjsディレクトリを差し替えたい。

jsディレクトリ上で右クリックし、「Map local...」をクリックする。

次のような画面になる。

「Map From」に、先ほど右クリックしたディレクトリが入ってくる。 「Path」の部分の最後が”*”になっていることで、このディレクトリ以下ということを示している。

「Map To」の「Local Path」には、置き換えたいローカルディレクトリを指定する。 下のチェックボックスは、大文字小文字を区別するか・・・だと思う。 入力が終わったら「OK」ボタンをクリックしたあとで、ブラウザを確認してみる。

先ほど差し込んだcosole.logが出てきました！

使ってみて

ディレクトリごと差し替えられる点がすばらしい！リリース後で本番サーバのファイルが差し替えられない状況下でのJS/CSS不具合調査に使えそう。

MacデフォルトのApacheの自動起動解除

時間もできてきたので、こつこつ書いていく。

今日は久々にMacのデフォルトのApacheにやられたので、自動起動の止め方とApacheの止め方をメモ。

まず止める。ターミナルから次のコマンドを打つ。

sudo apachectl stop

自動起動を止める。

sudo launchctl unload /System/Library/LaunchDaemons/org.apache.httpd.plist

正月です

2013年になったので、いろいろ整理していこうと思い、今までのは削除削除してブログを新しくしてみた。

今年は山がたくさんある予感。。。