2012-04-27

「enchant.js meetup Tokyo vol.2」に参加して使い方学んできたよ

JavaScript

報告するのが遅くなりましたが、先週末に「enchant.js meetup Tokyo vol.2」に参加してきました！JavaScript分かってきたし、前から気になってたenchant.js触ってみたいなーと思ってたところだったので丁度良かった(´ω｀)

詳細は以下の記事にまとまってます。
wise9 › IKやMMDにも対応!?最新のenchant.jsの詳細が明らかに!?

しかし、まだ公開されて１年しか経ってないんですねー。やたら賞品が豪華なコンテストを開催したり、リアルイベントもしたりで見てて面白いです。
roadmapのスライドを見る感じ、今後も色々やってきそうで楽しみ！

enchant.jsの使い方

基本的な使い方はドットインストールのenchant.jsの講座を見れば分かると思います。イベントの予習で初めて使ってみたけど超分かりやすい！！
enchant.jsの基礎 - ドットインストール

あとは、このスライドにならって簡単なシューティングゲームを作ってみれば完了。
enchant.js meetup Tokyo vol.2 Tutorial

できあがるゲーム
http://u1fukui.github.com/enchantjs/shooting/

作ったもの

ここまでやって何となくゲームを作れそうな気がしたので、http://jsdo.it/9leap/action-sampleをいじってアクションゲームのようなものを作ってみました。

これ
http://u1fukui.github.com/enchantjs/buster/

画面上にいる熊を攻撃して泣かすゲームです。
←↑→キーで移動して、↓キーでショットを撃ちます。
ブロックに乗ったと思ったのに落ちる事があるのは仕様です(;´Д`)

感想

ゲームというとついマリオみたいなアクションゲームを作ろうと思うんだけど、いきなりはきついね＞＜
ブロックとかの当たり判定とかダッシュやジャンプの動きを作るのが、元のコードを見てもうまくいじれなかったです。。
なんか前もenchant.js触ろうとしてアクションゲームうまく作れず挫折した記憶があるｗ

なのでまずは、移動はのペーっと動くようにしたり、タッチだけで操作するような簡単なゲームを作るのが良いと思います。
キー入力はスマホだと出来ないしね。上で挙げたゲームも作ってから「スマホでできねえじゃん！」と気づいたよ。

その他面白そうな機能

wise9 › avatar.enchant.jsが登場!2000万通りの中から君だけのキャラが作れる!?
- 素材がめちゃめちゃ豊富で素晴らしい！クマも好きだけどねｗ
animation.enchant.js v0.1 公開
- アニメーションを簡単に扱える。HTML5とか勉強会でソーシャルゲームのアニメーションの作り方を聞いた話しを思い出した。
Beginning gl.enchant
- 3Dゲーム好きじゃないんだけど、すごく簡単に使えそうなので興味わいた

2012-04-19

HTML5を使ったアプリを作る為にWebViewさわってみた

Android

モバイルアプリ開発でHTML5+WebViewが流行ってるようなので、WebViewってどんなものなのか一度触ってみました！
iOSのアプリだとUIWebViewっていうんですかね。今回は、AndroidのWebViewについて調べました。

なぜWebViewか？

そもそもなぜHTML+WebViewが良いのかと言いますと、ネイティブアプリで全部作るより簡単だからです。
実際にちゃんとしたアプリを作った事がないので知りませんが、今回Androidアプリ開発の構成を見た感じ、見た目整えるの超大変そうだった！

と想像で言っても説得力がないので、実際に使ってる人の意見を紹介すると、

Webアプリからの移植が楽
リンク付きUIが楽に作れる
CSSが最強

だそうです。CSSが大きいのか。

参考(iOSのだけど)：UIWebViewでつくるUI

WebViewで出来ること

ざっと調べたところこんな感じ。

アプリ内でブラウザを使える
任意のURLやHTMLを表示できる
HTMLのイベントをAndroid側で検知できる
HTML⇔Android間で情報のやり取りができる
画面のこの部分はHTMLを表示、この部分はAndroidで作ったのを表示とかできる

参考：Day After Neet: AndroidのWebViewを使う
このページがよくまとまってました。ブログ内で「WebView」で検索すれば他にも良さげな記事が見つかります。

実際に動かすのに参考にしたページ

いまいちイメージが湧かなかったので、実際にサンプルアプリを作って動かしてみました。
Androidアプリ開発めんどい(´Д`)

感想

Androidアプリ開発ちょっと試すだけでえらい苦労しました。。
まずネット環境があまりよろしくないので、SDK落とすのにえらい時間がかかったり、途中で止まったり。
さてコード書くぞと思ったら、ファイルの構成やらアクティビティのライフサイクルやらが全然理解できなかったり。
やっと書いたコードを動かそうと思ったらエミュレータが動かなくなったり。

それでも今は資料が沢山あるのでなんとかなるもんだー！
ググれば大抵答えが見つかります(￣ー￣)

というわけで次はもうちょっとちゃんとしたアプリを作ってみようと思います。

本当は、TitaniumとかSenchaとか使ってアプリ作ろうと思ってたのですが、iPhoneアプリ登録するのに年額一万円とかするのね＞＜
これはちょっと厳しいのでとりあえずAndroidアプリ作ってみることにします。一回作ってから考えよう！

2012-04-15

QUnitでJavaScriptのテストをする

JavaScript

Coderetreat in Tokyo 2ndで、JavaScriptのテストの仕方について学んだので忘れないうちに書いときます！

Coderetreat in Tokyo 2ndとは

リンク先見てもらえれば雰囲気が分かると思うのですが、ひたすらペアプロをして学習をするイベントです。
今回の課題はライフゲームで、45分実装→ペア交代→コード消す→また一から45分実装というのを5セット繰り返しました。
最初はJavaでやってたのですが、普段あんまり使わない言語でやる方が発見が多くて楽しかったので、途中からJavaScriptでやることに(*´ω`)

QUnitとは

QUnitは、jQueryプロジェクトから生まれたテストフレームワークで、JavaScriptの単体テストをすることが出来ます。
テスト結果はブラウザで確認するのですが、QUnit-TAPを使うと、コマンドラインから実行することができ、Jenkinsで利用することも出来るそうです。

JSの他のテストフレームワークには、Jasmineというのもあり、QUnitはオワコンでこれからはJasmineだ！という意見もあるくらい素敵みたいです。
そちらも気になるのですが、とりあえず今回はQUnitで。

QUnitの使い方

いっぱい解説しているページがあるんで、そちらを見て下さい。

ひとつだけ注意点としては、結果が期待値と同じかを比較する関数は"equals"じゃなくて"equal"です！
２個目のリンクのページに間違えて書かれてて、ちょっとつまずきました(;´Д`)

実行環境

あと、QUnitを使う環境を整えるのにちょっと手間取ったので、多分最小構成のファイル一式をGitHubに置いときました。
https://github.com/jquery/qunitから、必須ファイルだけ残したものになります。
life.jsがテスト対象のJSで、test/life-test.jsがテストコードです。
index.htmlを開くとテストが実行されて結果が表示されます。
ファイル構成とかファイル名とかは適当なので、大体みんなこうしてるよというのがあったら教えて下さい＞＜
https://github.com/u1fukui/qunit

テストの実行結果のページはこんな感じになります。格好いい！
http://u1fukui.github.com/qunit/

2012-04-08

ツイートを地図上に表示する

JavaScript

前回の予告通り、取得したツイートを地図上に表示してみました！

作ったもの

近くのツイート検索（地図版）
現在地から半径1kmくらいのツイートを地図上に表示します。
前回作ったやつの使い回しです(´ω｀)

学んだこと

吹き出しの中身は、HTML&CSSが使える

吹き出しの中身はテキストだけじゃなくて、HTML＆CSSが使えるのでリンク設置したり色変えたりできます。
前回作ったのを使いまわして手を抜かせてもらいました。

苦労したとこ

Androidで何故か表示されないことがあった

Android/iOSでの表示確認をしてたら、Androidでなぜか表示されませんでした。
原因が分からなかったのでわざわざAndroidのデバッグ環境を整えて、さあ調べるかという所で再度アクセスしたら今度はちゃんと表示されました。。(´Д`)

解決できなかった課題

過去のツイートを取得できない
吹き出しが被ったら見にくい
アイコンに枠線付けて強調したかった

次は

HTML5とWebViewの組み合わせでモバイルアプリ開発するのが流行ってるそうなので、どんな感じか一度WebViewを使ってみようかなーと思います。

2012-04-06

ルート検索APIを使ってみる

JavaScript

前回まででTwitter Search APIの使い方が分かったので、
ここ最近はGoogleMapsAPIをちょこちょこ触ってました。

やりたかったこと

とりあえずルート検索APIを使ってみたかったのです。
２点間の経路を結ぶ事ができたら、徒歩ルートとか道順をテキストで表示とかは速攻でできます。超便利。

サンプル

ルート検索 - jsdo.it - share JavaScript, HTML5 and CSS

参考

GoogleMapsAPI
https://developers.google.com/maps/documentation/javascript/reference?hl=ja#DirectionsRenderer

■関連クラス
・DirectionsRenderer
・DirectionsRendererOptions
・DirectionsService
・DirectionsRequest

次は

適当にググって見つけたサンプルをちょっといじっただけですが、ルート検索することが出来ました。
これを使えれば色々応用が効きそうな気がします。
次は、取得したツイートを地図上に表示するのをやってみようと思います。

2012-03-22

近くの人のツイートを表示する

JavaScript

前回、近くのツイートを取得するところまでは出来たので、今回は取得した内容を表示する部分を作ってみました！

作ったもの

近くのツイート検索
現在地から半径1kmくらいのツイートを表示します。
外出した時にスマホから見ると楽しいと思う(*´ω｀)

機能

現在地の住所を表示

現在地の緯度・経度から住所を取得して「○○付近のツイート」と表示します。
現在地取得ができなかったら、新宿付近のツイートが表示されます。

ツイート場所の表示

ツイートの右下にある地図のアイコンをクリックすると、そのツイートがされている場所をGoogleMapsで表示します。

苦労したとこ

見た目

頑張ったのですが、結局プログラマっぽいデザインになってしまいました。。(;´Д`)
twitter bootstrapっていうのを使えば格好良くなるんでしょー！と思ってましたが、取得したツイートをリストで表示するだけのシンプルなページでは恩恵を得ることは出来ず、地道にぐぐりながらCSSを書きました。。＞＜
スマホで見るとそこそこイイ感じに見えるのでまあよし！

JavaScriptの書き方

JavaScriptを書いていると、これってどう書くべきなの？と悩む箇所が多々ありました。
文字列の連結は、 += でするよりjoinを使うべきとか、innerHTMLはパフォーマンスは良いけどあまり使うべきでないとか、jQueryで書いた方がもっとシンプルに書けるんじゃないの？とか。。
１個１個解決してくとすごい時間かかりそうなので、とりあえず一度動くものを作ってから徐々に良くしてこうと思います(´ー｀)