ちょー高速開発 javascriptのフレームワーク『meteor』を使ってみた

ここ最近twitterで流れて話題になっている『meteor』を触ってみたので感触めも。

参考にさせていただいたサイトは下記。
http://d.hatena.ne.jp/Syunpei/20120413/1334276712
http://meteor.com/

とにかくセットアップもソースも公開も非常にシンプルで済むのに、感動してしまいました。。(涙

こういうの作れたら最高w

参考サイトにならって、触ってみたことを下記にメモ。

まずインストール

$ curl install.meteor.com | sh

※パスワードをうつ必要があります。

プロジェクト作成

$ meteor create --example todos

–example todosで用意されているサンプルのtodoを作成

生成したディレクトリに移動

$ cd todos

メテオ コマンド実行!

$ meteor

これで完成!&実行!

Running on: http://localhost:3000/

などと出力されるので、

http://localhost:3000/

にブラウザでアクセスすればtodoアプリがみれます!

さらに既に用意されているドメインにアップロードして、外部公開も可能になっている!!(驚

$ meteor deploy test55todo

test55todoがサブドメインの部分にあたる、test55todo.meteor.comという名前を用意してくれる。

実際に上記で作ったサイトのURLが下記。

http://test55todos.meteor.com/

軽くてけっこう使えそうなtodoリストの完成。

この手軽さやばすぎです。。
meteorの今後動向が気になります。

9leap『ワンボタンゲームチャレンジ』優勝ありがたや!

「9leap ワンボタンゲームチャレンジ」でまさかの優勝!
関係者の皆様本当にありがとうございます!

パンプキンブロック

http://wise9.jp/archives/6799

いままで9leapには何度か作品を投稿させていただいて、
今回がはじめて受賞いただきました!

enchant.jsは本当に簡単にゲームが作れてしまうので、この手軽さは圧巻です!
また音声サポートや、webGL対応など、凄いスピードで進化しており、既にスマホブラウザの限界まできているんじゃないと思うぐらい! !

とくかく今後も9leapを要チェックしていきます!

あと、今開催中のGlobal Leap Challenge も時間作って是非チャレンジしたい!
英語力不要ということで自分にもうってつけw!

 

過去の9leapに投稿した作品
男!コイノボリ
どらごんでぃふぇんす
ゾンビ落とし
Follower Rescue!

 

 追記!

そしてめちゃくちゃ欲しかった!Androidのタブレット『Eee Pad Slider SL101』を賞品としていただきました!本当にありがとうございます!!
今度はタブレットプログラミングで9leapに投稿したいと思います!

キーボード付きタブレット

高スペックで、リアルなゲームなどががんがん動くのもびっくりしました!

Androidネイティブプログラミング

ShadowGun

また、Androidのネイティブアプリ開発などもできて、今後もがんがん活用していきたいと思います!

9leapの『One Button Game Challenge』に挑戦!ワンボタンゲームを作りました。

久しぶりに9leapにゲームを投稿させていただきました!
今回挑戦させていただいたのは

「One Button Game Challenge」

というワンボタンで遊べるゲームというのがテーマ!
との事!

非常にシンプルなテーマだけど、おくが深そうw
シンプルな分ブラッシュアップに時間が割けるので、個人的には好きでしたw

また、個人的にスマホでゲームする際、両手で持ってやるのが苦手なので、
ワンボタンゲームは片手でプレイできて相性ばっちり!ということで気合で作りました!

↓こんな感じ

パンプキンブロック

Pumpkin Block

Pumpkin Block

Pumpkin Block

こちらよりプレイできます!(スマホOK)

今回のチャレンジは、応募期間が長いので、時間を作ってアップデートできればと思っておりますw(汗

それにしても、enchant.jsはすごい!UEの清水さんすごすぎ!
まだまだ憧れの存在ではありますが、自分ももっともっと成長しなきゃとおもう今日この頃!!

めちゃくちゃリアルなWEBGLを使った車にインスパイアされました!

webglもここまできたかというぐらいチョーリアルな3Dカーが、
ブラウザ上でぐいぐい動きます!!
※十字キーでオレンジカーを操作可能、後ろの白いカーもw/a/s/dで操作できます。 

↓↓↓

3dcar

 このリアルさ半端ないです、blurを使った遠近間や、反射の光具合など、、、
すごすぎます!

ちなみにnキーを押すとナイトモードに切り替わり!12345キーで視点を切り替えられます!

↓↓↓

webgl_car2

下記から見れます!これ作った人ホントすごい!(chrome推奨かと)

http://alteredqualia.com/three/examples/webgl_cars.html

リニューアル!! ルートドメインへ変更&MediaQueriesでスマートホンレイアウトに対応しました。

今回サイトのサーバー移行と一緒に、いままで無料のDDNSで利用していたサブドメインを、
独自ドメインを取得してルートドメインに変更しましたw

http://e-com.webhop.net/wordpress/ → http://matsudapress.com

また、移行先もwordpressにしhtml5&CSS3対応にし、スマホで表示してもレイアウトが崩れないようまえから気になっていたmedia queriesを利用したブログに変更しました。

Media Queriesを利用することで、ブラウザの画面サイズによって利用するCSSを変更できるので、ブラウザの画面サイズを意識し、スマホでも見やすいサイト作成ができます。
このブログでもサイズによってこんな感じに変わります。

media queries

サイズ小(主にスマホ用)

media queries

中サイズ(サイドバー分スペースを下へ折り返しています)

media queries big width

サイズ大(基本のレイアウト)

 

下記のように横幅の最小と最大を指定し、そのサイズ内ならこのCSSを適用するということができます。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
	}
	#page {
		margin-top: 0;
	}
	#branding {
		border-top: none;
	}
}

上記を利用しスマホの画面サイズを意識て作ることできれいなPCデザインをいかしつつスマホにも同時に適用できるのが魅力的です!
ちなみにいままでwordpressのプラグインでスマホ用の画面を用意してましたが、この方法なら好きにカスタマイズできるし、PC&スマホ両方に適用させたい場面など大変便利になります。

実は今回利用しているテーマですがデフォルトテーマで、最初からMedia Queriesに対応しているので、気になる部分をカスタマイズして利用させていただいております♪