Node.jsでHello Worldやってみた(1)

こんにちは。

最近web開発を全くやっていないので何か勉強しようと思い、
最近javascriptをやってることもあってはやりのnode.jsをやってみようと思います。

ということでとりあえずお決まりのHello Worldをやっていこうと思います。

・Node.js導入

まずはnode.jsの導入から。
ちなみにMac向けです。
windows、linuxはご自分で(笑)


まずnode.jsの公式サイトからインストーラーをダウンロード。
http://nodejs.org/#download

ダウンロードしたらインストーラーを起動
あとは何も考えずYes!Yes!



インストールが終了したらターミナルを起動して nodeと打ち込みます。



上の画像の様にnode.jsが起動すればインストール成功です！

node -v

でバージョンの確認もできます。

・Eclipse導入、日本語化

次に開発環境を整えたいと思います。

Cloud9が結構いいらしいんですが、個人的に一カ所性に合わない部分があるのと
やっぱり使いなれたeclipseがいいなぁということでeclipseで環境を整えたいと思います！

まずはEclipseのダウンロード。
公式サイトからJava EEのやつをダウンロードしてきます。
http://www.eclipse.org/downloads/packages/release/indigo/sr2


最新版はJuno(4.2)ですが、node.jsの補完機能を使うための
VJETというプラグインがJunoに未対応の為インストールできないみたいなので
今回はIndigoを使います。

Junoは別の機会に試してみよう。

んで、この辺はお好みですが、日本語化します。
まぁ別に英語のままでもそんなに不便はないんですがw

ここからindigo用をダウンロードします。



ダウンロードするのはJREなしの物でOKです。
platformと書かれているボタンをクリックでダウンロードが始まります。



ダウンロードが完了したらファイルを展開
中にあるdropsフォルダの中身をさっきダウンロードしたeclipse内にある
dropsフォルダにコピーします。

更に eclipse/Eclipse.app/Contents/MacOS にある eclipse.ini ファイルの最後に次の行を追加します。

-javaagent:/Applications/eclipse/dropins/
MergeDoc/eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar

上のはアプリケーションフォルダにeclipseをおいた場合なので、
環境に合わせてかえてください。

※表示上改行していますが、追加するときは改行しないでください。

あとは起動すれば日本語化されているはずです。
だめな場合は以下のコマンドでクリーン起動してあげればいいかも。

$ eclipse -clean

これでEclipseの導入完了です！

・VJETの導入

次にeclipseでnode.jsの補完を行う為にVJETを入れたいと思います。


VJETとはなんぞや？
VJETはeBay Open Sourceで開発されているJavaScript開発用のEclipseプラグイン。
node.jsのほかJQueryやJSONなどのライブラリも用意されているようです。

まぁ細かいことはわからないけど補完使えるようになるということなのでとりあえず
インスト！w

eclipseのhelp→新規ソフトウェアのインストールを選択
urlに「http://www.ebayopensource.org/svn/vjet/tags/RELEASE/plugin/.」を入力します。

あとは出てきたVJETの項目にチェックをつけてインストール。
しばらく待ってインストールが終わったら完了を押して再起動。

Node.jsタイプライブラリを入れる

node.jsの補完を有効にするためnode.jsのタイプライブラリをインポートします。

まずはダウンロード。以下のサイトからダウンロードしてきます。
Node.jsと書いてあるリンクがあるのでクリッククリック！
横に0.4と書いてあって最新版に対応してないっぽいけど
きっと大丈夫！と自分をだましとりあえずいれます(笑)


https://www.ebayopensource.org/index.php/VJET/Downloads

ダウンロードしたファイルを解凍するとプロジェクトフォルダができるので
ecilpseからインポートします。

右クリック→インポート→一般→既存のプロジェクトをワークスペースへを選択。
さっき展開したフォルダを指定。

これでNodejsTLプロジェクトが追加されたので、ここにビルドパスを通します。

まずはプロジェクトの作成。
VJETのプロジェクトかjavascriptのプロジェクト(VJETプロジェクトとして扱えるよう設定する必要あり)として作成。

プロジェクトを右クリックしビルドパスを選択。
プロジェクトタグでNodejsTLプロジェクトを追加します。

これでnode.jsの補完機能を使うことが出来るようになるはずです。


以上で開発の環境が整いました。
次は実際にnode.jsでHello Worldをやってみたいと思います。

[GAE] Slim3 & Mayaa

新年あけましておめでとうございます。


早いもんでもうじき社会人2年目です。
昨年は大地震もあり社会的にも個人的にも激動の一年でした。


今年は去年を圧倒するほど努力していきたいです。




今日はSlim3とMayaaの連携がいけたのでメモ的な話。

まだあんまり動作確認をしていないので問題が出る可能性もあるけど(^^;

EclipseでのGAE、Slim3、Mayaaの環境構築

まずはこちらを参考にEclipseに必要なプラグイン等を入れます。
説明が省かれていますが、MayaaをSVNからチェックアウトするときは全部落とせばOK


Slim3はSVNからblunkを落とし込むよりもSlim3のプラグインがでているので
こちらからプロジェクトを作成した方が楽です。

プロジェクトの作成

Slim3のプラグインをいれるとSlim3のプロジェクトを作成できるようになります。





プロジェクトをつくったらMayaaとマージします。


mayaa-getting-start-gaeプロジェクトのwar以下の必要なファイルをコピーします。





web.xmlとappengine-web.xmlは上書きしないでください
この二つのファイルをマージします。


マージ後はこんな感じ(※もしかしたら正しくないかも)

web.xml

<?xml version="1.0" encoding="utf-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
        version="2.5">

	<context-param>
        <param-name>slim3.rootPackage</param-name>
        <param-value>jp.msfm.gae.slim3.sample</param-value>
    </context-param>
    <context-param>
        <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
        <param-value>application</param-value>
    </context-param>
    <context-param>
        <param-name>javax.servlet.jsp.jstl.fmt.request.charset</param-name>
        <param-value>UTF-8</param-value>
    </context-param>

    <filter>
        <filter-name>HotReloadingFilter</filter-name>
        <filter-class>org.slim3.controller.HotReloadingFilter</filter-class>
    </filter>
    <filter>
        <filter-name>DatastoreFilter</filter-name>
        <filter-class>org.slim3.datastore.DatastoreFilter</filter-class>
    </filter>
    <filter>
        <filter-name>FrontController</filter-name>
        <filter-class>org.slim3.controller.FrontController</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>HotReloadingFilter</filter-name>
        <url-pattern>/*</url-pattern>
        <dispatcher>REQUEST</dispatcher>
    </filter-mapping>
    <filter-mapping>
        <filter-name>DatastoreFilter</filter-name>
        <url-pattern>/*</url-pattern>
        <dispatcher>REQUEST</dispatcher>
    </filter-mapping>
    <filter-mapping>
        <filter-name>FrontController</filter-name>
        <url-pattern>/*</url-pattern>
        <dispatcher>REQUEST</dispatcher>
        <dispatcher>FORWARD</dispatcher>
        <dispatcher>INCLUDE</dispatcher>
        <dispatcher>ERROR</dispatcher>
    </filter-mapping>

    <servlet>
        <servlet-name>MayaaServlet</servlet-name>
        <servlet-class>org.seasar.mayaa.impl.MayaaServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>MayaaServlet</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>


    <servlet>
        <servlet-name>GlobalTransactionServlet</servlet-name>
        <servlet-class>org.slim3.datastore.GlobalTransactionServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!--
    <servlet>
        <servlet-name>GWTServiceServlet</servlet-name>
        <servlet-class>org.slim3.gwt.server.rpc.GWTServiceServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    -->

    <servlet>
        <servlet-name>KtrWjrServiceServlet</servlet-name>
        <servlet-class>bufferings.ktr.wjr.server.service.KtrWjrServiceServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>GlobalTransactionServlet</servlet-name>
        <url-pattern>/slim3/gtx</url-pattern>
    </servlet-mapping>

    <!--
    <servlet-mapping>
        <servlet-name>GWTServiceServlet</servlet-name>
        <url-pattern>*.s3gwt</url-pattern>
    </servlet-mapping>
    -->


    <servlet-mapping>
        <servlet-name>KtrWjrServiceServlet</servlet-name>
        <url-pattern>/ktrwjr/ktrwjr/ktrwjr.s3gwt</url-pattern>
    </servlet-mapping>

    <security-constraint>
        <web-resource-collection>
        	<web-resource-name>All jsp</web-resource-name>
            <url-pattern>*.jsp</url-pattern>
        </web-resource-collection>
        <auth-constraint>
        </auth-constraint>
    </security-constraint>
    <security-constraint>
        <web-resource-collection>
        	<web-resource-name>admin</web-resource-name>
            <url-pattern>/slim3/gtx</url-pattern>
        </web-resource-collection>
        <auth-constraint>
            <role-name>admin</role-name>
        </auth-constraint>
    </security-constraint>
    <security-constraint>
        <web-resource-collection>
        	<web-resource-name>admin</web-resource-name>
            <url-pattern>/ktrwjr/*</url-pattern>
        </web-resource-collection>
        <auth-constraint>
            <role-name>admin</role-name>
        </auth-constraint>
    </security-constraint>
</web-app>

んで、ここで普通にマージするとなんか

Invalid content was found starting with element 'url-pattern'. One of '{"http://java.sun.com/xml/ns/javaee":web-resource-name}' is expected.

っていうエラーがでてきてしまったので調べたらMayaaではないが解決方法があったので
試したらうまくいきました。

http://w.livedoor.jp/tomoedrive/d/Maven2%A4%C8Slim3%C0%B8%C0%AE%A4%B5%A4%EC%A4%BFweb.xml%A4%C7%A5%A8%A5%E9%A1%BC

うえの記事を参考にweb-resource-collectionタグを追加します。


次にappengine-web.xml

<?xml version="1.0" encoding="utf-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
	<application></application>
	<version>1</version>

	<precompilation-enabled>true</precompilation-enabled>

	<system-properties>
	    <property name="slim3.hotReloading" value="true"/>
	    <!--
        <property name="slim3.datastoreDeadline" value="8"/>
        <property name="slim3.uploadSizeMax" value="1000000"/>
        <property name="slim3.uploadFileSizeMax" value="100000"/>
        -->
	    <property name="java.util.logging.config.file" value="WEB-INF/classes/logging.properties"/>
		<property name="org.seasar.mayaa.secure.web" value="true"/>
	</system-properties>

	<static-files>
        <include path="**.css" />
        <include path="**.js" />
        <include path="**.png" />
        <include path="**.gif" />
        <include path="/docs/**" />
        <exclude path="**.html" />
    </static-files>

	<resource-files>
		<include path="**.html" />
		<include path="**.mayaa" />
		<include path="**.mjs" />
	</resource-files>


	<sessions-enabled>false</sessions-enabled>
	<threadsafe>true</threadsafe>
</appengine-web-app>

とにかくこんな感じでMayaaとSlim3で連携をとる準備ができました。

連携

ということで、早速プログラムを書いてみます。
まずはここを参考にControllerを作成
説明が面倒なのでがんがん省略していきます(笑)


上を参考にしてつくるとIndexConterクラスやらJSPやらが作られると思います。

作成されたjspと同じフォルダに適当なHTMLファイルとMayaaファイルを作成します。



test.html



test.mayaa




IndexController.java

初期状態だとindex.jsp(gen-controller-without-viewの場合はnull)にforwardするようになっているので
遷移先をかえます。




これで実行すると



おお～、ちゃんとControllerから送った名前が表示されていますねb
めでたしめでたし^^

[Corona] Storyboardの使い方 [備忘録]

最近Coronaの勉強をしているので、備忘録的なもの。


Coronaについてはここ

参考動画





んで、ゲームアプリ作るときに画面遷移とかが必要になってくるので
そんなときはStoryboard APIを使うのがいいらしいです。

以下Storyboardのリファレンスまとめ

Storyboard備忘録

リファレンス : http://developer.anscamobile.com/content/storyboard


・画面遷移の方法

画面遷移はstoryboardにgotoSceneを使う

http://developer.anscamobile.com/reference/index/storyboardgotoscene


・sceneのメソッド

1.function scene:createScene( event )

gotoSceneが呼び出されたときに、シーンが未存在なら
呼び出される。onCreate的なもの。

※ ただし、一度作成されたシーンは明示的に削除しない場合、メモリに
のこり続けるので、一度作成したシーンに再びgotoSceneしてもcreateSceneは
呼び出されない。

ここでは画面に配置するオブジェクトの宣言、準備を行う。


2.function scene:enterScene( event )

gotoSceneが呼び出されたときに、createSceneの後(createSceneが呼び出されない場合は最初)に
呼び出される。onResume的なもの。

オブジェクトへのイベントリスナー登録などを行う


3.function scene:exitScene( event )

gotoSceneが呼び出されたときに、enterSceneの後に
呼び出される。onPause的なもの。

オブジェクトのイベントリスナー解除などを行う

4.function scene:destroyScene( event )

シーンが削除された時に呼び出されるメソッド
removeSceneやpurgeSceneが呼び出された後

purgeScene : メモリには残る
removeScene : メモリから完全に削除

widgetの削除などを行う

・画面間のパラメータ共有

画面間のパラメータの共有は

storyboard.variableName = value

変数名は任意、テーブルを使うことで複数を一度に扱うことも可

http://blog.anscamobile.com/2011/11/common-storyboard-api-questions/#how-do-you-transfer-data-variables-between-scenes



※まだやり始めたばかりなので、間違いがある可能性が多々あります。