Hatena::ブログ(Diary)

Web系がおもしろい。

2012-01-26

RingoJSのサンプルをいくつかうpりました。

| 23:05 | RingoJSのサンプルをいくつかうpりました。 - Web系がおもしろい。 のブックマークコメント

Nodeが熱い昨今ですが、ちょっと手元に眠っていたRingoJSのサンプルをすこしずつうpって行こうと思いますー。

なるべく各機能に於いて、ミニマムな実装にすることを心がけてます。

RingoJS遅い!とか言う人もいらっしゃるかもしれませんが、CommonJSのOlegさんが仰っているように、コールバック使わない、syncなJSというのも直感的でわかりやすくていいですよ!

まぁNodeはJavaScriptを採用したからスゲーじゃなくて、すごいのはアーキテクチャの方なんで、ちょっと論点違うんですけどね。


サンプルはこっちに置いてます。

https://github.com/esperia/ringo-sample



あと、幾つかRingoJSの記事出してますが、アレv0.7のRingoJSだし僕がよく分かってなかった頃なのであんまり役に立たないかもしれません。。

幾つか見てヤバいのは賞味期限切れタグかなにかつけてみます。→つけました

2011-07-25

GAE上で使えるファイルマネージャ"Ringo Directory Expander"っての作った

| 01:34 | GAE上で使えるファイルマネージャ"Ringo Directory Expander"っての作った - Web系がおもしろい。 のブックマークコメント

ということでリリースされましたv0.8!

トップページも変わって、

RingoJSがServerSideJSのエンジンであるところだけでなく、Swingの例を出して、Javaの恩恵が受けられるという部分も前面に推しだしていますね。


で、こんなんつくりました

http://www.esperia09.com/res?path=/

Github : no title


最後が/で終わってるやつがディレクトリ、それ以外がファイルです。

ディレクトリをクリックすると展開できます。

jQueryまだよくわかってないのでDOMいじりいじりしてるとこあったり、開いたら閉じなかったり謎仕様になってます。そのうち直します。。


今日はちょい眠いので寝る…また後日追記する


正直使えなかったレベルでcommitして申し訳ないです、修正しました。。そのうちRingoJS moduleとして配布する予定です。

2011-07-10

RingoJS v0.8で導入されたmustache.jsの話

| 15:37 | RingoJS v0.8で導入されたmustache.jsの話 - Web系がおもしろい。 のブックマークコメント

RingoJS v0.8 で、古いテンプレートエンジン(Skin functionally)が削除され、新しいテンプレートエンジン(mustache.js)に置き換わりました。というか以前は"template"ではなく"skin"と呼ばれてましたが。

新しく導入されたテンプレートエンジンは mustache という種類もので、クロスプラットフォームであるなどの特徴があります。


mustache

mustache(5)には、[1, 2, 3]のような配列の時の表現の仕方が書いてなかったりしたので、僕はmustache.jsの方のドキュメントを参考にしました。



どう書き方が変わったの?

RingoJS v0.7以前
var Response = require('ringo/webapp/response').Response;

exports.index = function (req) {
    return Response.skin(module.resolve('index.html'), {
        title: "my blog title",
        diaryArticle: {
            title : "everyday articles",
            content : "today breakfast is delicious!!",
        },
    }); 
};
  • テンプレート側 (index.html)
<!DOCTYPE html>
<html>
<head>
<title><% title %></title>

</head>
<body>
<section>
    <h1>テスト</h1>
    <% for diaryArticle in <% diaryArticle %> render 'diaryArea' %>
</section>
</body>
</html>

<% subskin 'diaryArea' %>
    <article>
        <header>
            <h2><% diaryArticle.title %></h2>
        </header>
        <div class="diary-content">
            <% diaryArticle.content %>
        </div>
    </article>

RingoJS v0.8 以降
var response = require('ringo/jsgi/response');
var mustache = require('ringo/mustache');

exports.index = function (req) {
    var template = getResource(TEMPLATE_DIR + "index.html").content;

    return response.html(
        mustache.to_html(template, {
            title: "my blog title",
            diaryArticle: {
                title : "everyday articles",
                content : "today breakfast is delicious!!",
            },  
        })  
    );  
};
  • テンプレート側 (index.html)
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>

</head>
<body>
<section>
    <h1>テスト</h1>
    {{#diaryArticle}}
        <article>
            <header>
                <h2>{{title}}</h2>
            </header>
            <div class="diary-content">
                {{content}}
            </div>
        </article>
    {{/diaryArticle}}
</section>
</body>
</html>

ちょっと長くしすぎたかも。。すみません><

とりあえずこんな感じです。


前のは使えないの?

…っていう話なんですが、ringo/webapp/response - API v0.7 - RingoJSから、skinのメソッドが削除されているため、多分使えません。


つまり、

RingoJS v0.7 -> v0.8 はむちゃくちゃ仕様かわってるので、これからRingoJSやる方は v0.8 でやるといいですよ!!

まだRC版だしv0.8のドキュメントまだ揃い切ってないんですが、ビルドの方法とかはあまり変わってないので大丈夫です。前より分かりやすくなってるので、とっつき易いかと思われます。

あと、0.8-RC1 -> 0.8-RC2 もringo-adminコマンドが生成してくれるプロジェクトの中身とかが変わってるので、RC1使ってた人はそこも気をつけてくださいまし。


プロジェクト生成のヘルプ(v0.8 RC2)
% ringo-admin create --help
Creates a Ringo application or package.
Usage:
  ringo-admin create [options] [path]
Options:
 -a --app-source [DIR]  Copy application from [DIR] instead of skeleton
 -g --google-appengine  Create a new Google App Engine application
 -p --ringo-package     Create a new Ringo package
 -s --symlink           Create symbolic links for jar and module files
 -w --java-webapp       Create a new Java Web application (WAR)
 -h --help              Print help message and exit

今気づいた。結論がmustache関係ない…。すみません(・ω・`)

2011-03-22

RingoJSにAppengineJSを組み込んでGAE上で使う方法

| 14:40 | RingoJSにAppengineJSを組み込んでGAE上で使う方法 - Web系がおもしろい。 のブックマークコメント

GAE上でRingoJSとAppengineJSを使う際、現状で一番きれいな導入方法が見つかったのでこの記事を書いてます。以前も似た日記を書いたんですが、試行錯誤状態で安定した内容ではなかったので。


僕が使用している環境

  • MacOSX SnowLeopard
    • シェル:zsh
    • GAE JavaSDK導入済み

Cygwinあたりを使うとWindowsでもできると思います。

AppenginJSとRingoJSを取得する

アーカイブ(.tar.gzや.zip)として取得する場合

アーカイブとして取得した場合は、両方解凍しておきます。

gitでチェックアウトする場合
$ git clone git://github.com/ringo/ringojs.git
$ git clone git@github.com:gmosx/appengine.git


ディレクトリを仮にringojsディレクトリと、appenginejsディレクトリと呼びます。


解凍したringojsディレクトリを任意の場所に配置

このディレクトリの中身は、プロジェクトファイルではありません。このringojsディレクトリを直接GAEへデプロイしたりするわけではなく、この中に同梱されている「ringo-admin」コマンドを使ってプロジェクトを生成します。

…ということを考慮して、workspace内に同梱するのはおすすめしません。。

僕は「~/Software/ringojs-0.7」にいれました。


パスを通す

ringojs/binディレクトリ内のコマンドをよく使うので、パスを通しておきます。

また、ローカルにてテストする時はGAEの「dev_appserver.sh」コマンドも使うので、まだパスを通していない方は一緒に通しておくと吉です!

$ vi ~/.zshrc
(以下を追加)

export PATH=$PATH:/Users/(userName)/Software/appengine-java-sdk-1.4.2/bin
export PATH=$PATH:/Users/(userName)/Software/ringojs-0.7/bin

(:wq)
$ source ~/.zshrc

ベースを作る

ringo-adminコマンドを利用してプロジェクトを生成します。

  • a (もしくは--appengine) オプションは、GAEで利用する際に使います。
$ ringo-admin
Please specify one of the following commands:
    create 	- Create a new RingoJS web application or package
    install 	- Download and install a RingoJS package from a zip URL
$ ringo-admin create -a ./ringojs-gae

ringojs-gaeプロジェクトディレクトリが生成されました。


生成したプロジェクトの中にライブラリを配置する

  • AppengineJSのライブラリを配置
    • このモジュールを実際のプロジェクトの方から呼び出して使います。
    • 配置元)appenginejs/libディレクトリ内のgoogle, mapreduceディレクトリ
    • 配置先)WEB-INF/modules/ ディレクトリ
    • すみません、ここに入れるのは間違っているかも…。google/appengine/ext/dbはうまく読めたんですが他のapi読むときにエラーになったので、もうちょっと検証する必要がありそうです。。
  • GAEJavaライブラリを配置

web.xmlの編集

Startup time can further be improved by running Rhino in interpreted mode.

Google App Engine - RingoJS

とのことで、以下の設定をするとGAEStartup time(Spin-up)が改良(短縮?)できるそうです。

    <init-param>
        <param-name>optlevel</param-name>
        <param-value>-1</param-value>
    </init-param>

準備完了!

お疲れ様です!では、早速動かしてみます!

$ cd ringojs-gae
$ dev_appserver.sh .

http://localhost:8080/


f:id:esperia:20110322042638p:image:w500


上記の画像のように、RingoJSのIt's working!が出れば完了です!

ここまでできたら、このプロジェクトディレクトリをzipなどアーカイブ化しておくと、上記手順をもう一度踏まなくて済むようになります。

一度「dev_appserver.shを起動したらすぐに落ちる」っていう現象が起きたんですが、これはRingoJSが問題ではありませんでした。

MacOS XのJavaアップデートとAppEngine SDKの問題に対処した - Basicにて問題が解消されました。




いや待てコラ、GAEの機能利用してなくね?

すみません!


sampleに入っていたguestbookを移植してみます

その前にちょっと、ディレクトリの意味だけおさらいします。

  • ringojs-gae/WEB-INF/app/
    • main.js (RingoJSで一番最初に実行されるjsファイル)
    • config.js (各種設定をするファイル)
    • actions.js (トップページの処理)
    • guestbook.js (appengine-exampleについていたゲストブックの処理を書く)
    • message.js (データを投稿する処理が書かれたJS)
    • skins/ (テンプレートHTMLを入れるフォルダ)
      • base.html (全体の骨組みとなるHTMLを記述する)
      • index.html (トップページ)
      • notfound.html (404 Not Foundページ)
      • guestbook.html (ゲストブックページ)

config.jsを修正して、上記の3つのファイルを追加します。


config.js

exports.urlsの部分を変更します。

exports.urls = [
    ['/', './actions'],
    ['/guestbook', './guestbook']
];

guestbook.js
var {Response} = require('ringo/webapp/response');
var Request = require('ringo/webapp/request').Request;
var Message = require("./message").Message;

exports.index = function (request) {
	var messages = Message.all().order("created").fetch();
	return Response.skin(module.resolve('skins/guestbook.html'), {
		title: "Contribute",
		posts: messages,
	});
};

exports.post = function post(req) {
	var params = new Request(req).postParams;
	var msg = new Message(params);

	msg.put();
	
	return {
		status: 303,
		headers: {Location: "/guestbook"},
		body: ["See other: /guestbook"]
	};
};

message.js
var db = require("google/appengine/ext/db");

/**
 * A Guestbook message.
 */
var Message = exports.Message = db.Model.extend("Message", {
    author: new db.StringProperty({required: true, multiline: false}),
    content: new db.TextProperty(),
	created: new db.DateTimeProperty({autoNowAdd: true})
});

guestbook.html
<% extends ./base.html %>

<% subskin content %>
<form action="/guestbook/post" method="post">
<p>Author : <input type="text" name="author" /></p>
<p>Content : <textarea name="content"></textarea></p>
<p><input type="submit" value="send"></p>
</form>

<div id="postList">
<% for post in <% posts %> render 'postOverview' %>
</div>

<% subskin 'postOverview' %>
    <h2><% post.author %></h2>
    <p><% post.created | dateFormat "dd.MM.yyyy" %></p>
	<div><% post.content %></div>

できました!

実行してみます。

http://localhost:8080/guestbook/

f:id:esperia:20110322042639p:image:w500

↓データ入力してpost

f:id:esperia:20110322051128p:image:w500


ちゃんとBigTableも使えました!

もう怖いものはないですね!あとは書いていくのみ!


Macでしか出来ないような書き方だったので環境の部分を修正。

web.xmlの編集について追記

2011-03-21

炊き出したんWebAPIを使った「炊き出したんマップ」を作りました

| 19:50 | 炊き出したんWebAPIを使った「炊き出したんマップ」を作りました - Web系がおもしろい。 のブックマークコメント

f:id:esperia:20110321222513p:image:h500

http://takidashi-map.appspot.com/


これは?

炊き出したん WebAPI を利用して、現在炊き出し中の位置を地図上に表示することができます。

パソコンやスマートフォンに付いているGPS機能を利用して、現在地をマーカーで指すこともできます。



動作環境

  • PC - IE以外の各ブラウザ
    • Firefox
    • Chrome
    • Safari
    • Opera
  • スマートフォン
    • Android2.0以上 (Xperia(Android2.1)にて動作検証済み)
    • iPhone (未検証)
    • iPad (未検証)

iPhone、iPadに関しては未検証ですが、入っているブラウザがSafariなので動くと思います。

Android1.6以下に関しましては、確かWebStorageがサポートされていなかったと思うので、バグが発生するかもしれません。

ガラケーにも対応したい…!


使い方

1.炊き出し場所を確認したい場所をタップして、「炊き出し場所を取得」ボタンをタップします。

f:id:esperia:20110321183952p:image:h400


2.炊き出し情報を取得して、場所を表示します。

f:id:esperia:20110321183953p:image:h400


3.ピンをタップすると、吹き出しに詳細を表示します。

f:id:esperia:20110321222513p:image:h400


他の機能

  • 「現在地を取得」ボタンをタップすると、現在地が取得できます
    • 現在地を取得する際、位置情報を共有するかの確認がでますので、共有を行ってください
  • Aboutのリンクを押すと、ヘルプのウィンドウが表示されます。
    • 簡単な使い方などが参照できます。
  • 右下の赤いボタンを押すと、メニューの開閉ができます。

バグ報告や追加要望等

僕のTwitterアカウント(@esperia09)へご連絡頂くか、この記事のコメント欄等へ書きこんでください。また、炊き出したんWebAPIの作者(@yokmama)様とは別人ですので、このマップのことでご迷惑をおかけしないようにお願いいたします。


余談

今回、作成した「炊き出したんマップ」ですが、GAE上で動作するフレームワークとしてサーバーサイドJavaScriptである「RingoJS」を使用しています。やっとAppengineJSとRingoJSを組み合わせる方法が分かったので。。

追って記事書きたいんですが、ちょっと忙しくてかけてません。。



アップロードする画像を間違えていたので修正しました。

見出しの画像を差し替え