「code:JS」はCoffeeScriptを使い、viewベースでWebアプリケーションを作成するための、フレームワーク／クラス群です。
このクラスライブラリを作った動機は、Webアプリ開発をやったりiOSアプリ開発をしていると、しばらく関わっていない技術のことを忘れていまい、いざ開発にかかろうとした際にすぐにコーディングには取りかかれず、言語仕様や開発手法・設計などを思い出すことに時間を奪われ、これが何回も続くかと思うと気が遠くなったことに端を発します。
そのため、iOSアプリケーション開発などで用いられている「viewベースアプリケーション開発」と呼ばれる様々なパーツを画面に並べることで、画面設計を行い機能を実装していく開発手法を、そのままWebアプリケーションでも行えるようなクラスライブラリを作成しました。
ライブラリの各クラス構成や、Viewベースの概念はiOSのViewを参考にしています。
Webアプリケーションの作成はsandboxになっており、アプリケーションが操作出来るディレクトリを制限しています。
アプリケーション内で使う画像データなども、各アプリケーションのディレクトリ内の決まった場所に配置することでクラス内で使うことが出来るような仕様になっています。
code:JSには以下のプロダクトが必須になっています。

PHP(CGI, CLI) 5.3以降

CoffeeScript 1.2以降

SQLite 3.7以降

php5-sqlite

ImageMagick

github（https://github.com/digitarhythm/codeJS）からサーバー上にcloneしてください。
httpdのDocumentRoot配下である必要はありません。
cloneした後に、「[code:JSインストールディレクトリ]/bin」にあるコマンドに実行権限をつけてください。
「[code:JSインストールディレクトリ]/bin」にpathを通しておくと、コマンドを実行する時に便利です（aliasでもいいですが）。

まず、code:JSフレームワークをインストールするサーバーにログインし、設置するディレクトリまで移動してgithubからcloneしてください。
$ git clone https://github.com/digitarhythm/codeJS
そうすると「codeJS」ディレクトリ配下に必要なディレクトリ／ファイルが生成されます。
生成されたのを確認した後、「[code:JSインストールディレクトリ]/bin」配下のコマンドに実行権限を付けてください。
「[code:JSインストールディレクトリ]/bin」にpathを通しておくと、コマンドを実行する時に便利です。
コマンドの使い方については次の章に詳細があります。

次に、Webアプリケーションを作成するドキュメントルート配下の適当なディレクトリに移動して、サンドボックス生成コマンドを実行します。
$ codejs new testapps
フレームワークに必要なプロダクトが足りない場合はエラーになります。
エラーが出ずに実行が終了すると、指定した名前のディレクトリが出来ています。
このディレクトリの中にある「appscode」ディレクトリ内にCoffeeScriptでWebアプリケーションを作成していきます。

「appscode」ディレクトリ内にはデフォルトでは「applicationMain.coffee」が入っています。
このファイルが、iOSにおける「appDelegate.m」に相当します。

この「applicationMain.coffee」のコメントの下に、コメントと同じインデントでアプリケーションの初期化処理を記述していきます。
iOSでの「rootViewController.view」に相当するのが「@rootView」になります。
Viewを生成し、画面に表示するにはViewの基幹クラス「JSView」を継承したオブジェクトを生成し、「@rootView」にaddSubview()します。

iOSではViewの中にボタンを配置したり、他のViewを配置したりするためカスタムのViewを生成して画面デザインを行うことが多いですが、code:JSでも同じ形でプログラミングしていきます。
カスタムのViewを生成するためには、JSViewを継承したクラスファイルを作成します。
$ codejs derive JSView testView
上記コマンドを実行すると、「appscode」ディレクトリに指定した名前（例の場合は「textView.coffee」）のクラスファイルが生成されています。

この新しく生成したクラスファイルを使ってViewを作成するために先ほどの「applicationMain.coffee」を変更します。

しかしこのままではCoffeeScriptがコンパイルされていないため、コーディングが反映されません。
コンパイルは、Webアプリケーションのトップディレクトリ配下で、
$ codejs build
というコマンドを実行します。
これで、ユーザーファイルの更新を監視し、自動的にコンパイルされるようになります。
（監視が走りっぱなしになるので、コマンドライン作業は他のターミナルを使ってください）

コンパイルでエラーが出なければ、WebアプリケーションディレクトリのトップをWebブラウザで開くと、グレーのウィンドウが表示されていると思います。

【新規プロジェクト生成】
「[code:JSルート]/bin」にパスが通った状態で、

$ codejs new [プロジェクト名]

を実行すると、カレントディレクトリ配下に「プロジェクト名」のディレクトリが作成されます（マルチバイト非推奨）。

【ユーザースクリプトコンパイル】
ユーザーが「[プロジェクトルート]/appscode」配下に生成したCoffeeScriptファイルはコンパイルをしなければ実行出来ません。
スクリプトをコンパイルしたいプロジェクトのルートで、

$ codejs build

を実行すると、ユーザーディレクトリを監視し、更新があったファイルを自動的にコンパイルされます。
コマンドは実行され続けるのでコンソールを奪います。
他のコンソール作業が必要な場合は、新しいコンソールを立ち上げてください。

【システムファイル更新】
code:JSシステムのファイルを更新したい場合は、ライブラリの再構築を行わないと過去に作成したプロジェクトに更新が反映されません。
システム更新を反映したいプロジェクトのルートで、

$ codejs update

を実行すると、code:JSのシステムスクリプトがコンパイルされ実行したディレクトリのプロジェクトに反映されます。
jQueryUIのテーマを変更した場合もこのコマンドで反映させます。

【新規クラス作成】
少なくとも、すべてのクラスが「JSObject」を継承しなければならないため、新規にクラスを生成するには雛形が必要になります。
そこで、新規にクラスを作成する時は、クラスを作成したプロジェクトのルートで、

$ codejs derive [継承するクラス名] [新規クラス名]

を実行します。
「[プロジェクトルート]/appscode」配下に、指定した名前のクラスファイルが出来ているのでこれを修正してアプリケーションを構築していきます。

【jQueryUIのテーマ変更】
「[code:JSルート]/configs/system.ini」にjQueryUIのテーマへのリンク先一覧が記載されているので、「[プロジェクトルート]/configs/system.ini」の「jqueryui-theme」を書き換え、上記の「codejs update」コマンドを実行すると、index.phpファイルが再生成され、CSSへのリンク先が書き変わるのでテーマの変更が反映されます。

code:JSにはシステムが用意したスーパーグローバル変数があります。

JSRectや、JSSize, JSPoint, JSString等は複数の値を持つことが出来るので、「生成→値代入」という2ステップを踏む事になります。
この2ステップを補助するための関数が用意されています。

• JSObject
• JSFileManager
• JSImage
• JSPoint
• JSRange
• JSResponder
• JSSize
• JSTableViewController
• JSUserCookies
• JSUserDefaults
• JSView
• JSAlertView
• JSControl
• JSGLView
• JSImageView
• JSLabel
• JSRect
• JSScrollView
• JSTableView
• JSWindow
• JSButton
• JSImagePicker
• JSListView
• JSMenuView
• JSSwitch
• JSTextField
• JSTextView

すべてのクラスが「JSObject」を基幹クラスとして継承しています。
すべてのパーツが「JSView」を継承しています。
クラスの持つインスタンス変数は基本的にはすべて読み取り専用です。
値を変更する場合は用意されているsetterメソッドを使用してください。
直接値を変更した場合は、動作が不安定になるか、最悪の場合はWebアプリがクラッシュします。
値を変更出来ないインスタンス変数は、変数名が「_（アンダースコア）」で始まっています。
変数名がアンダースコアで始まっていない変数の値は直接変更することが出来ます。
例）JSPointクラスの「x」と「y」
JSViewや、JSViewを継承している画面表示に関するクラスの「_（アンダースコア）」で始まるインスタンス変数は、値を直接書き換えても変更は反映されません。
（値を変更した後に「viewDidAppear」メソッドを呼ぶことで反映されますがお勧め出来ません）

(object)JSObject(void)

スーパースーパークラス。
すべてのクラスがこのクラスを継承しているため、下記のインスタンス変数はすべてのオブジェクトが持っています。

インスタンス変数

インスタンスメソッド

JSObject→JSFileManager

(object)JSFileManager(void)

サーバー上のファイルをやりとりするクラス。
サーバー上のsandbox内にあるファイルを読み込んだり、ファイル一覧を取得します。

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSImage

(object)JSImage(string)

画像ハンドルクラス。
iOSでは画像そのものを保持していますが、code:JSでは画像ファイルへのパスになります。
「imageWriteToSavedPicture()」で保存すると、保持しているパスの画像を、sandbox配下の指定したディレクトリへコピーする動作になります。
このクラスは、JSImageViewで表示する画像指定に使うのが主な使い道になります。
code:JSでは、アプリケーション側でディレクトリ構造を把握する必要が無いため、このオブジェクトに渡すパスは、「JSSearchPathForDirectoriesInDomains()」で取得したパスに画像ファイル名を付けて指定します。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSPoint

(object)JSPoint(void)

座標クラス。
主に座標値を扱う際のインスタンスとして用います。
インスタンス変数として「x」と「y」を持っています。
「JSPointMake(x, y)」という関数を使うことで座標値を持ったJSPointオブジェクトを作成することが出来ます。

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSRange

(object)JSRange(void)

範囲管理クラス。
配列の要素指定や、テキストの文字位置指定等に使用します。
このクラスは結果を受け取る以外に、インスタンスを生成する場合は「JSMakeRange(int, int)」関数を使用して生成します。

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSResponder

(object)JSResponder(void)

レスポンダー管理クラス。
イベントを受け取るクラスが継承しています。

インスタンス変数

インスタンスメソッド

デリゲートメソッド

JSObject→JSSize

(object)JSSize(void)

サイズ管理クラス。
インスタンス変数として「width」と「height」を持っています。
「JSSizeMake(x, y)」という関数を使うことで横幅、縦幅を持ったJSSizeオブジェクトを作成することが出来ます。

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSTableViewController

(object)JSTableView(void)

テーブルビューコントローラー。
テーブルビューオブジェクトをひとつ持ち、テーブルビューのデリゲートメソッドを受け持つクラス。
通常はこのクラスを継承したクラスの中でテーブルビューの振る舞いを定義して使用します。

初期化引数

使用例

インスタンス変数

JSObject→JSUserCookies

(object)JSUserCookies(void)

Cookies操作クラス
文字列、もしくは配列（オブジェクト）変数をCookieに格納することが出来ます。
値はCookieに格納されるので、各端末毎の値になります。
値の寿命は365日になります。

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSUserDefaults

(object)JSUserDefaults(void)

UserDefaultsクラス。
文字列、もしくは配列（オブジェクト）変数を格納することが出来ます。
データはSQLiteに格納されるためサーバー毎の値になり、Webアプリケーションをリロードしても、次に開いた時に値が消えることがありません。

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView

(object)JSView(JSRectオブジェクト)

View管理クラス。
画面に表示に使用するパーツのクラスはすべてこのクラスを継承しています。
生成時にJSRectオブジェクトを渡すことで、生成時にViewのサイズを指定することが出来ます。
生成時に引数を省略するとサイズが640x480のビューが生成されます。
背景色はJSColor()関数で指定します。
iOSと違う大きな点としては、addSubview()する前のViewに、さらにaddSubview()するとViewが表示されないことがあります。
出来る限りaddSubview()されるViewは、addSubview()してから行ってください。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView→JSAlertViewbr

(object)JSAlertView(string, string, array)

jQueryの「Dialog」を使用して、確認用ダイアログの表示や、パラメータ入力ダイアログを表示します。
「JSAlertViewStyleDefault」の場合は、デフォルトではメッセージと「OK」ボタンのみが表示されます。
インスタンス変数「cancel」を「true」にすることで「Cancel」ボタンが表示されます。
この場合は「clickedButtonAtIndex」に渡される引数は、ダイアログ上でクリックされたボタンの番号／入力されたデータの配列と、JSAlertViewオブジェクトになります。
「JSAlertViewStylePlainTextInput」の場合は、指定した配列の要素分の入力された文字列が配列で渡されます。
デフォルトで「Cancel」ボタンは表示されます。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

デリゲートメソッド

JSObject→JSResponder→JSView→JSControl

(object)JSControl(JSRectオブジェクト)

JSViewのタップアクションと、表示の有効／無効をコントロールします。
このクラス単体で使うことはほとんどありません。

初期化引数

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView→JSGLView

(object)JSGLView(JSRectオブジェクト, string, float, bool)

Three.jsを用いたWebGL用のビューを生成します。
実際のWebGLのコーディングに関しては、WebGLのドキュメントを見てください。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView→JSImageView

(object)JSImageView(JSRectオブジェクト)

画像を表示するビューです。
このクラスで生成したオブジェクトは、「_userInteractionEnabled」が「false」になっています。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView→JSLabel

(object)JSLabel(JSRectオブジェクト)

クラスの説明

初期化引数

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSRect

(object)JSRect(void)

座標と領域を持ったクラス。

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView→JSScrollView

(object)JSScrollView(JSRectオブジェクト)

ビューからはみ出た領域の表示方法を制御します。
このクラスを単独で使用することはほとんどありません。

初期化引数

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView→JSScrollView→JSTableView

(object)JSTableView(JSRectオブジェクト)

連続したビューの表示（テーブルビュー）クラス。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

デリゲートメソッド

JSObject→JSResponder→JSView→JSWindow

(object)JSWindow(JSRectオブジェクト)

JSViewを継承した基本的なビュークラス。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView→JSControl→JSButton

(object)JSButton(JSRectオブジェクト)

jQueryUIを用いたボタンオブジェクト。
ボタンが押された時に実行される処理を設定するのは、「JSControl」の「addTarget」なので、ここには出てこない。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

デリゲートメソッド

JSObject→JSResponder→JSView→JSScrollView→JSImagePicker

(object)JSImagePicker(void)

「[アプリケーションルート]/Media/Picture」にある画像を選択するビューを表示します。
通常はボタンが押されたりした時のアクションとして使用します。
このビューは「addSubview」した途端に表示されます。

使用例

インスタンス変数

インスタンスメソッド

デリゲートメソッド

JSObject→JSResponder→JSView→JSScrollView→JSListView

(object)JSListView(JSRectオブジェクト)

jQueryUIを使った並べ替え可能なリスト表示ビュー。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView→JSScrollView→JSMenuView

(object)JSMenuView(JSRectオブジェクト)

jQueryUIを使ったドロップダウン式のメニューです。
メニューを選択すると、「addTarget()」で指定したメソッドが選択されたメニューの番号（上から0, 1, 2...）を渡されて呼ばれます。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView→JSControl→JSSwitch

(object)JSSwitch(JSRectオブジェクト)

jQueryUIのスイッチウィジェットを設置します。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView→JSControl→JSTextField

(object)JSTextField(JSRectオブジェクト)

編集可能な一行のテキストビュー。

初期化引数

使用例

インスタンス変数

インスタンスメソッド

JSObject→JSResponder→JSView→JSScrollView→JSTextView

(object)JSTextView(JSRectオブジェクト)

編集可能な複数行テキストビュー。
デフォルトでは、編集可能状態になっています。

初期化引数

使用例

インスタンス変数

インスタンスメソッド