ソースコード付き

2015年2月14日 - 未分類

iTelepass2に入っているアプリのほとんどは、ソースコードも付いています。特に、Webアプリ学習用のCoderのソースコードは学習の役に立つと思います。

itelepass02-010024

 

Coderの使い方は、GOOGLE CODER – HTML & CSS SCHEME OF WORK を見て下さい。

coderApp0301

アプリの右上端にある スクリーンショット 2015-03-01 14.52.31 マークの</>をクリックすると、コード編集モードになります。

スクリーンショット 2015-03-01 15.00.07

左上から、HTMLは、ブラウザに表示されるHTMLです。CSSはスタイルファイル、JSはJavaScriptを書く所です。この3つは、ブラウザで動作します。NODEは、サーバー側で動作するJavaScriptを書くところです。HTMLのheader部分にこれらのファイルの連結が定義されています。慣れないうちは、JSとNODEのやりとりに戸惑うかもしれません。

Coderは、Node.jsのExpressに似た構成ですね。調べてはいませんが、Expressを使っているのかもしれません。

サーバーサイドとブラウザサイドの通信について
JS

ブラウザサイドの処理は、JSに書きます。サーバーサイドにコマンドと引数を送る例です。

function command( req ) {
$.getJSON(
“/app/websendcom/command”,//url
{“command”:”sendcom”, “arg”:req2},//data
function(data) {
//dataがサーバから受け取るjson値
var rdata=”;
$.each(data,
function(key, val) {
rdata = val;
}
);
}
);
}

Node

サーバーサイドの処理は、Nodeに書きます。ブラウザサイドから送られたパラメータを読み込む例です。

exports.command = function( req, res ) {
var com = req.param(‘command’);
var args = req.param(‘arg’);
:
:
}