「Zephyr」の版間の差分
(→ディレクトリ構成) |
(→ディレクトリ構成) |
||
行73: | 行73: | ||
zephryコマンド、フロントエンドアプリケーション、サーバサイドアプリケーションで、それぞれcliディレクトリ、front-endディレクトリ、serverディレクトリにアプリケーションのソースコードがある。 | zephryコマンド、フロントエンドアプリケーション、サーバサイドアプリケーションで、それぞれcliディレクトリ、front-endディレクトリ、serverディレクトリにアプリケーションのソースコードがある。 | ||
Zephyrをインストールすると、zephyrコマンドが使えるようにするために、binディレクトリにcli/zephyr(JavaScriptのソースコード)へのシンボリックリンクを配置している。 | Zephyrをインストールすると、zephyrコマンドが使えるようにするために、binディレクトリにcli/zephyr(JavaScriptのソースコード)へのシンボリックリンクを配置している。 | ||
− | インストールの際に、zephyr/binディレクトリをPATHに通すので、zephyrコマンドを実行できるようになる。([[ | + | インストールの際に、zephyr/binディレクトリをPATHに通すので、zephyrコマンドを実行できるようになる。([[Zephyrのインストール]]) |
= ドキュメントAPI = | = ドキュメントAPI = |
2016年3月22日 (火) 11:23時点における版
目次
概要
EosコマンドをWebブラウザ上で実行するためのアプリケーションである。 EosはCUIで実行する場合、OptionControlFileに基づいて実行時引数を解析している。 Zephyrでは、Webブラウザ上で動作するUIパーツをOptionControlFileを用いることで自動的に生成する。 OptionControlFileはそれぞれのコマンドのOptionControlFileを事前にJSON形式にパースし、Zephyrプロジェクトディレクトリの特定のディレクトリに格納してある。 Zephyrでは、JSON形式にパースされたOptionControlFileを使って、Webブラウザを通じてEosコマンドを実行するための様々な機能群を提供する。
必要なソフトウェア
以下のソフトウェアを事前にインストールしておく必要がある。 2016年3月現在、以下のバージョンでの動作を確認している。
- Eos
- Node.js v4.2.4
- Ruby 1.9.3p551
インストール
Node.js(v4.2.4)のインストール
Node.jsのバージョン管理システムnvmを用いてインストールする。(https://github.com/creationix/nvm)
# nvmのインストール $ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash $ source .bashrc
# Node.js(v4.2.4)のインストール $ nvm install v4.2.4 # .bashrcに追記 $ echo nvm use 4.2.4 >> ~/.bashrc
Zephyrのインストール
$ git clone git://git.osdn.jp/gitroot/eos/zephyr.git $ cd zephyr
# 必要なnpmのパッケージをインストール
Zephyrでは、Node.jsのライブラリ管理システム(npm) に登録された様々なライブラリを使って開発されている。 事前にインストールしておく必要がある。
$ npm install
# .bashrcに追記し、PATHを通す $ echo export PATH=/path/to/zephyr/node_modules/.bin:/path/to/zephyr/bin:\$PATH >> ~/.bashrc $ echo export ZEPHYR_HOME=/path/to/zephyr >> ~/.bashrc
使い方
Zephyrディレクトリ中の/user-specific-files/OptionControlFileにJSONファイルが作成されていない場合、Zephyrを起動する前に、OptionControlFileをパースしておく必要がある。
# OptionControlFileのパース場合 $ zephyr parse
# Zephyrの起動 $ zephyr serve
# デバッグモードでの起動 $ zephyr debug
通常の起動、デバッグモードでの起動ともにWebブラウザを開き、アドレスバーにlocalhost:3000を入力し接続すると利用できます。 デバッグモードは、開発者のためのZephyr起動コマンドです。
ディレクトリ構成
Zephyrのディレクトリ構成を以下に示す。
├── bin zephyrコマンドのバイナリへのシンボリックリンク
├── cli zephyrコマンドのソースコード
├── docker docker用のファイル群(未実装)
├── front-end Zephyrのフロントエンドアプリケーション (ブラウザ上で動くHTML, CSS, JavaScriptなどで作られたアプリケーション)
├── node_modules npmのライブラリ群
├── package.json Zephyrのパッケージ情報
├── server Zephyrのサーバサイドアプリケーション (Node.jsで作られたアプリケーション)
├── test テストコード
└── user-specific-files OptionControlFileなど、Zephyrのアプリケーションで利用する静的ファイル
Zephyrは大きく分けて三つのアプリケーションがある。 zephryコマンド、フロントエンドアプリケーション、サーバサイドアプリケーションで、それぞれcliディレクトリ、front-endディレクトリ、serverディレクトリにアプリケーションのソースコードがある。 Zephyrをインストールすると、zephyrコマンドが使えるようにするために、binディレクトリにcli/zephyr(JavaScriptのソースコード)へのシンボリックリンクを配置している。 インストールの際に、zephyr/binディレクトリをPATHに通すので、zephyrコマンドを実行できるようになる。(Zephyrのインストール)
ドキュメントAPI
参考にしたWebサイト
AngularJS と TypeScript
- 【AngularJS x TypeScript デザインパターン】 Controller と Routing 篇 - AngularJS + TypeScript #4
- TypeScriptで書くAngularJSのMVC
- How to use angular-ui-bootstrap (modals) in typescript?
AngularJS
Webpack
AngularJS と Webpack
TypeScriptとWebpack
TypeScript
問題点
- UIの機能のコンポーネント化できてない
- メインページのcontrollerにベタ書きしているので、密結合になっている。
- 機能追加や修正に時間を要してしまう。
- ライブラリの管理
- パッケージ管理システムによる管理を整えられていない。
- ユーザに配布する際に、自動で環境を整えることができない。
- 機能追加の際のプロセス・ワークフローを構築できていない。
- 今は自分以外の人が開発しようとすると、ソースを全部読まないといけない。
- 各機能を疎結合にする+開発プロセス決めることで、自分の開発も効率化できる。
- APIドキュメントがない
- JSDoc等を使ってドキュメントが生成されるようにすべき。
- JSDocでドキュメントが作れるように設計することで、システムの見通しもよくなるはず。
解決策のアイデア
- AngularJSのCommonJS?的な使い方探す(Browserify, Bowerを使う)
- ディレクティブを細かく作る。特に、コマンド実行の部分。
- ページ遷移の際の、REST APIの呼び出しはresolveに押し込む。