2011-11-08

Apacheで複数ドメインの設定

サーバ

思ったより物凄く簡単だったのでメモ。
環境はさくらVPS, CentOS, Apacheです。

参考：ここで躓いた：さくらのVPSでVirtualHost、複数ドメイン - ぼくんちのバックステージ

httpd.confを編集

NameVirtualHost xxx.xxx.xxx.xxx:80

DocumentRoot /var/www/html/root
ServerName xxxx.sakura.ne.jp

DocumentRoot /var/www/html/test
ServerName test.zzz.com

こんな感じに、サーバのIPアドレスと、割り当てるドメイン名、ドキュメントルートを設定するだけです。
ちょー簡単。

今回は必要ないかと思ったんでDocumentRootとServerNameしか使わなかったのですが、
他にも色々あるみたいなので調べてみると良いと思います。

参考になりそうなの

2011-08-25

Box2DJSおもしろいよ！

JavaScript

達人出版会という、電子書籍出版のサイトを見つけて見てたら、
ふと、はじめる！ Box2DJS - 達人出版会という本が目に入りました！

Box2Dは前から興味を持っていたし、しかもそれのJavaScript版って使い道ありそうだなー！
と思ったので本買って色々触ってみました。800円て安い(´ー｀)

Box2DJSとは

Box2DJSとは、2次元物理エンジンのActionScript版であるBox2DFlashAS3をJavaScriptに移植したものです。
物理エンジンていうのは、物理演算とか衝突判定とかをやってくれるものです。

実物見るのが早いと思うので使用例↓

全部Box2DJSを使用してるみたいです。いいね！

ライブラリの入手先

２個目のリンクの方が、ソースが読めるし、ミニファイされたものもあるので良いです。

Box2DJSを使う

詳細書くのは大変＆著者の方に悪いので省略しますが、基本的な流れとしては以下のようになります。

エンジンを初期化
エンジンに物体を配置
配置された物体の座標をエンジン内の時間経過に従って更新
エンジン内の物体を描画

サンプルまとめたので興味ある方はどうぞ。
Box2DJS Sample

似たような他のJSライブラリ

box2dweb

ゲームでも使えそうなJavaScriptで作られた物理エンジン·box2dweb MOONGIFT
Box2DJSと機能は同じだが、単体ファイルで使うのが楽。かつこっちはアップデートされてるらしい。

box2dnode

GitHub - jadell/box2dnode: A port of the box2djs library into a nodejs module
サーバサイドのbox2d。Box2DJSは結構処理が重いので、それをサーバでやって軽くなる感じ？

おわり

色々ライブラリがあるようだけど、どれもベースはBox2Dなので使い方は同じっぽいです。
軽く調べた感じ資料が少ないので、とりあえずはじめる！ Box2DJS - 達人出版会買って勉強するのが良いんじゃないかなと思います。安いし。

これを使ったアクションゲームを作ってみたいんだけど、そうなるとbox2dnodeになるのかなー。
サーバサイドJavaScriptの本ほしい。。
とりあえずサーバ使わない簡単なの１個作ってみようと思います(｀д´)ﾉ

2011-08-21

サイト作ってみたらCSS3の便利さが分かった

CSS3

今日は友だちの家でハッカソンしてきて、http://u1fukui.com/ のページ作ってきました！
ようやく脱Apacheのテストページ！

格好いいサイトを作りたいなーと、前からサイト作るのには興味があったんですけど
実際に作ることはほとんど無かったので、大分手こずりました(;´Д`)

それで、最近丁度興味があって調べていたCSS3を使ういい機会だなーと思い使ってみたら
思いのほか便利だったので軽く紹介していこうと思います。

ウェブフォントで格好いい文字を使う

なんと言っても１番便利だなーと思った機能はこれでした！

今まではユーザのPCに入ってるフォントしか使えなかったのですが、
フォントファイルをURLで指定することによって、どのPCからも同じフォントで表示されるようになる機能です。

サイトを作る時にやっぱりデフォルトの文字だけだと素人っぽさがあるし、
だからと言って何かのフォントを使った画像を作るのも面倒くさいので、ほんとこの機能は助かります。
http://u1fukui.com/ では、画像は１つも使ってなく全てウェブフォントを利用してます。

詳しい使い方

CSS3のWeb Fontを使ってみたよ。 | Ginpen.com

ウェブフォント提供サービス

Google Fonts
- 英語ならこれを使う
デコもじ｜ウェブフォントで、ホームページが、ブログが、もっと楽しくなる♪
- 日本語のフォントファイルは大きいので読み込みに時間かかる

影をつける

ウェブフォントには負けますが、これも手軽に格好よくできるので感動しました。
作ったページで言うと、タイトルの「u1fukui.com」のところですね。
今回使ったのはテキストに影をつける機能ですけど、ボックスに影をつけることも出来ます。

参考

CSS3のtext-shadowを使ったテキスト装飾のサンプル集 | かちびと.net

おわり

他にもグラデーションとか角丸とか簡単に使えるようになってたのですが、
今回作ったページにはうまく取り入れることができませんでした(´・ω・｀)

というかCSS3より、もっと基礎的なHTMLやCSS部分に苦労したのでそっち勉強しようと思います。
段組とか相当苦労した。。floatとかpositionとかさっぱり┐(´д｀)┌

近いうちにサイトをもっと形になるように頑張ります。
何か気になる所とかありましたら指摘お願いします( m _ _)m

参考

タブナビゲーションの参考にしたページ
http://jsdo.it/event/topics/2011/07/css3showcase

先週買った参考書

CSS3デザイン　プロフェッショナルガイド

作者: 秋葉秀樹,秋葉ちひろ,小山田晃浩,外村和仁,蒲生トシヒロ,宮澤了祐
出版社/メーカー: 毎日コミュニケーションズ
発売日: 2011/05/28
メディア: 単行本（ソフトカバー）
購入: 1人クリック: 254回
この商品を含むブログ (3件) を見る

2011-08-08

HTML5 for Mobile Hackathon#1

イベント

ハッカソンやりました

iPhoneやAndroid, iPadなど、モバイル端末で動くHTML5を使ったWebアプリを作ろうというハッカソンを開催しましたー！
今まで東京事務所でそういうイベントをした事がないというのと、東京⇔鯖江間で同時開催という今までにない試みもあり、
どうなるのか不安でしたが、なんとか無事皆さんに楽しんで貰えたようで良かったです。

と、この辺の主催側のふりかえりは別のとこに書くとして、参加者としてハッカソンで何をやったのかを書いときます。

アイディア出し

最初90分くらい何を作るかのアイディア出しをしてたのですが、
最終的に「せっかくのハッカソンなんだから、こんな時にしか作らないようなくだらないもの作ろーぜ」という事になり、
僕が前からぼんやりと作りたいと思っていたオンラインアクションゲームを作る事になりました。

「1日で作るもんじゃないだろｗ」と思われるかもしれませんが、ハッカソンではそこまでちゃんとしたとこまで作ろうとは考えてなくて、
そのページにアクセスしたら、現在見てる人たち分のキャラクターが表示されて、各自が自分のキャラクターをそれっぽく動かせるという、それくらいのものを作りたかったんです。

WebSocket + enchant.js

で、何をしたかというと、ほとんどenchant.jsを触ってました。

enchant.js - HTML5 + JavaScript Game Engine
http://enchantjs.com/ja/

簡単にゲームを作れるライブラリですね。
前に少し触った事もあったので、これを使ってサクっと作れないかなーと思ったのですが結論から言うと無理でした(´Д｀)

アクションゲームのベースになるようなenchant.jsのサンプルがあるので、
これにWebSocket機能を追加できないかなーと思って色々試みてみたのですが、他のユーザの接続を取得は出来てもそれをゲームに反映させる事ができませんでした。

おそらくEventTargetのaddEventListenerやdispatchEventを使えば出来ると思うのですが、
イベント処理の知識があまりにもなく、今回のハッカソンでは時間が足りませんでしたorz

出来たもの

同じチームのもう１人のプログラマーの方がCanvasで作ってくれたゲームイメージ図
http://www.huntway.jp/hack/stage.html

そして僕が作ったenchant.jsのサンプルをちょっといじったキャラクターが沢山表示されるようにしたものでした。
（アップは出来てなくてローカルで動かして発表した）

形にならなくて残念(´・ω・`)

感想

仕事の振り分けがうまくできてなかった
短時間で出来る事の見極めができてなかった
プレゼンの時に使った技術を説明する時間が必要だった
やはり各チームにデザイナーが居ると違う
楽しかった！！またやりたい

そういえば東京に来て初めてのイベントだったかもしれません。（次に参加するのはXP祭り）
ハッカソンは長時間一緒に作業をするので仲良くなれていいですね( ´∀｀)bｸﾞｯ!

2011-08-04

JettyでWebSocket

WebSocket Jetty

今週末にあるHTML5 for Mobile Hackathonに向けて、何か作れないかなーと考えていたところ、
やっぱりサーバ使わないと無理(>_<)ということで、WebSocketの勉強がてらチャットアプリを作ってみました。

WebSocketとは

WebSocketをあんまり知らない人はこちらの資料が分かりやすいと思います。

WebSocketことはじめ

View more presentations from Kohei Kadowaki

チャットアプリ作成の参考にした記事

Jettyで始めるWebSocket超入門：特集｜gihyo.jp … 技術評論社

やったこと

m2eclipseのインストール
参考にした記事を元にチャットアプリ作成
- Jettyのバージョンの違いに苦戦
サーバにJavaとJettyインストール
8080番ポートを開放(参考記事だと使ってるポート8040かも)
デプロイ
- やり方が分からず焦る

引っかかったところ

すごい丁寧な記事だったのでコピペであっという間に終わるかなーと思ってたのですが、
予想以上に時間くってしまったので引っかかったところをメモしていきます。

m2eclipseのインストール
Jettyのバージョンの違い
デプロイ方法

m2eclipseのインストール

参考にした記事では、maven使ってたのでm2eclipseをインストールしました。
ちょい戸惑ったのですが以下の手順で出来るはずです。

手順

インストール
再起動
eclipse.iniの-vmと、インストール済みのJREにJDKを指定しろというダイアログが表示。
EclipseとMavenでGWTアプリケーションを作成する：01 事前準備 - paz3のおもいつきを参考に対応
再起動

Jettyのバージョンの違い

参考にした記事が結構前のだったので使われてるJettyのバージョンが古く、どうせ使うなら最新のにしちゃえと最新っぽい7.4.5.v20110725を使っていたら、
WebSocketクラスの中身が結構変わっていて戸惑いました。。

こんな感じ

package webSocketChat;

import java.io.IOException;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;

import org.eclipse.jetty.websocket.WebSocket;

public class MyWebSocket implements WebSocket.OnTextMessage {

	Connection outbound;
	private static Set<MyWebSocket> socketSet = new CopyOnWriteArraySet<MyWebSocket>();
	
	@Override
	public void onClose(int arg0, String arg1) {
		// TODO 自動生成されたメソッド・スタブ
		socketSet.remove(this);
	}

	@Override
	public void onOpen(Connection outbound) {
		// TODO 自動生成されたメソッド・スタブ
		this.outbound = outbound;
		socketSet.add(this);
	}
	
	@Override
	public void onMessage(String data) {
		for (MyWebSocket socket : socketSet) {
			try {
				socket.outbound.sendMessage(data);
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
}

Jettyのファイル置き場

Central Repository: org/eclipse/jetty

作ったもののソース

ソースはGitHubに置いといたんで参考にしてください。変なとこあったらおせーて＞＜
GitHub - u1fukui/WebSocketChat: websocket/jetty sample

あと、Eclipseで実行したあと、起動したサーバを終了することなく、コードを修正して再実行！とかしてたんで、コードの修正が反映されなくてしばらく悩んでたりしました(´Д｀)

デプロイ方法

ローカルで動かしてるだけだと面白くないよねーってことで、
さくらVPSにデプロイしよう！と思ってここでもハマりました。

JavaとJettyのインストールはすんなりいったのですが、作ったチャットアプリを動かす方法がさっぱりでした。
結論から言えば、参考した記事に書いてある通り「java -jar WebSocketChat-0.0.1-SNAPSHOT.jar」でいけたのですが、
実行する場所がおかしかったせいでエラーが発生して、そこからpom.xml, web.xml, Jettyのデプロイ方法, warの作り方とか色々調べたりしちゃいました。

で色々調べてるうちに、

このチャットアプリはjarファイル単体で動く
jarファイルは、jettyのlibディレクトリと同じディレクトリ層に置いて実行する
- META=INFの下にあるMANIFEST.MFに書いてあるクラスパスを見て気づく

という事が分かり、無事動きました。

感想

WebSocketのプロトコル早く決まってほしい(もうLastCallみたい)
Jettyの情報少ない
というかServletとか基本的な知識が足りない(´Д｀)
Node.js使ってみたい
やたら手間取ったけど、結果的にJettyとMavenの理解が深まってよかった
WebSocket面白い

その他参考にしたもの

2011-05-16

中古車の買い取り

学んだこと

車売るときに色々初めて知ることが多かったのでまとめときます。

結論

車の買い取り価格はめちゃくちゃ安い

70万で買った車が15万になりましたー(T_T)
2年しか乗ってないので、20〜30万くらいいくかと思ってたのでショック。。

あと業者に買い取ってもらう時は、当然ですが複数で査定して貰って比較するといいです。
カーセブンで査定してからガリバーで査定をしたら、どうやら買い取り業者の１位と２位だったらしく
「向こうに買い取り価格で負けたら何してんだって話ですよ！」とか言ってあっさり査定価格を上げてくれました。これで3万位アップ。

買い取り業者に売る時の流れ

カーセブンとガリバーしか行ってませんが大体同じでした。

入店
アンケートを書かされる
車の状態を見てもらう(10分くらい)
査定金額を計算している(10分くらい)
「買い取りの希望額はおいくらですか？」と聞いてくる。全然相場知らないから答えられなかったら困ってた。
「予め決められてる審査基準ですとあの車はこれくらいの価値になるんですよねー」とめちゃくちゃ安い金額の紙を見せてくる（僕の場合２万ちょいでした）
「ただそれだと余りにもひどいのでうちではこれくらいで買い取りさせて頂こうと思います」と一気に金額をあげた査定結果を見せてくる（僕の場合１０万）

で、他の店の査定金額を言ってみたら、急に一気に上がった。

それでどうしたか

上手く交渉すればもっと上げることは出来ると思うんだけど、知識ないし、
どうせ友達に売る予定だったから、結果聞いてすぐに帰りました。

あの車が15万で買えるなら、相当買う人居ると思うので、個人で売るのが一番高く売れると思います。（めんどくさそうだけど

2011-05-12