2012年09月20日

[Web] Facebookページのウィジェット(Like Box)を設置してみた

Facebookページを作ってみました。

be-styleのFacebookページ:
http://www.facebook.com/bestyle.jpn

ここではリリース情報の告知や、be-styleとして収集している情報の共有を目的としています。
アプリづくりをするとき、運用やマネタイズを考えるときににどんな情報を集めているのか、
ここで共有できたらと思います。

あとは、Facebookページへの導線をどうするか考えたときに、
Twitter同様、ブログの右メニューにウィジェットを表示してみようと思い設置してみました。
使ったのは、「Libe Box」。

Like Box:
http://developers.facebook.com/docs/reference/plugins/like-box/

設定は簡単で、上記ページで遷移先ページのURLや幅や高さを設定するだけでした↓

20120920facebookwedgit.png

サポートされている横幅の最小値が292pxという点に注意です。
ウチのブログの右メニューの横幅はそれより狭いので、表示がバグってもサポート外です orz

まずはこの形で運用してみよう。
posted by be-style at 01:19| Comment(0) | Web

2012年05月03日

[Web] WEB+DB PRESS Vol.68 を読んでみた

今気になっている「node.js」「ゲームAI」「リーンスタートアップ」について特集が組まれていたので買ってしまいました。
どれも触り程度という内容ですが、それぞれがどういうものかを知るには丁度よかったです。



(1) node.jsについて
概要説明と簡単なプログラム例が掲載されています。
記載しているのはサイバーエージェントの方でした。
なんとなく触っているnode.jsですが、イベント処理の特性とかエラー処理の書き方とか、
何が得意で何が不得意なのかがざっくり理解できたと思います。

現在興味を持っているリアルタイム通信についても触れていて、現在の問題点や
スマホで実装するときの注意点が掲載されてあって勉強になりました。


(2) ゲームAIについて
ゲームを作っていく上で、敵が登場する場合には必ずAI(人工知能)が必要になります。
本格的なゲームAIの参考書を買う前に「人工知能ってどういうものか」を知るには丁度よかったです。
記載しているのはスクエニの方でした。

ゲームを面白くするのは「適度な強さの敵」なんですよね。
まだこの分野に手を付けるのは早いかなー。


(3) リーンスタートアップについて
最近目にすることが多くなった単語の1つに「リーンスタートアップ」があります。
自分で調べてもあまりピンとこなかったのですが、
この雑誌ではクックパッドの方が実例を挙げて説明しているので、
具体的なイメージが伝わってきてよかったです。


常に新しい技術や方法論が生まれているので、どれが最適な方法なのかはいつも手探り状態です。
そういう状況で、出来るだけ効率よくものづくりが出来ればなぁと思っています。

効率よくアプリを作って、アプリが安定動作して、ユーザー満足度が高くて、長く遊んで貰える!
これが理想です。
posted by be-style at 12:49| Comment(0) | Web

2012年04月22日

[Web] OpenStreetMapのOpenLayersを使って図形を描画してみる

Google Map APIの利用制限と有料プランが発表になってから、
いつか別APIを使ったものに移行いしないとなぁと考えていました。

Google Maps APIの有料化・料金・利用制限まとめ:
http://matome.naver.jp/odai/2131976887859594401

Yahoo Map APIも同じく利用制限があるので、
Foresquareで使われているという「OpenStreetMap」が良さそうということで使ってみました。
今回も、Webサイトで実現しようということでJavascriptでの実装となります。

日本語ドキュメントが少ないので調べるのに時間がかかってしまいましたが、
意図したことが出来たので備忘メモ。

OpenStreetMap 日本語サイト: ←OpenStreetMapのサービスを利用してみたいとき
http://openstreetmap.jp

OpenStreetMap API 実験室 ← OpenStreetMap APIの基本的な使い方
http://openstreetmap.piyolab.net

↑API実験室をひととおり読むと、基本的な使い方がわかります。
地図を表示するだけなら簡単でした。

問題はここから、地図上に図形を描画したい。
ということで、参考にしたサイトはこちら↓

Debianでka-Mapのメモ プラスOpenLayers とGeoExt:
http://nobmob.blogspot.jp/2009/03/openlayers-17a.html

この中のプログラムをそのまま使ってもうまく表示されません。
理由は、座標の変換が必要だったからでした。

それでは、はじめから手順を追ってみます。

(1) OpanLayersライブラリを使用
図形を描画するには、OpenLayersライブラリを使用します。
OpenLayersのサイトから、tar.gzまたはzipファイルをダウンロードします↓
http://openlayers.org

OpenLayersのリファレンス(日本語)
http://mapabc.wikidot.com/openlayers:menu

解凍したら、OpenLayersを動作させるために必要なファイルだけをnginxにアップロードします。
アップしたのは以下の3点です。

・imgディレクトリ
・themeディレクトリ
・OpenLayers.js
※「OpenLayers.js」「img」「theme」は相対位置が決まっているようです。
 3点とも同ディレクトリに置く必要がありました


コーディング内でOpenLayers.jsを参照すれば、OpenLayersが使用可能になります。
↓こんな感じ
<script src="http://[取得したドメイン]/js/OpenLayers/OpenLayers.js"></script>

詳細は割愛しますが、OpenStreetMapを表示したい箇所のタグはこのようにしました↓

<div id="canvas" style="width:320px; height:480px"></div>

(2) Javascriptでの実装
OpenStreetMapを表示するJavascript部分は↓のとおりです。
ほとんど参考サイトのままです。
--------------------------------------
// マップのオプション設定
var options = {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ZoomPanel(),
new OpenLayers.Control.Attribution()
],
restrictedExtent:new OpenLayers.Bounds(139.7, 35.6, 139.8, 35.8)
.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
)
};

// マップの初期化(オプション付与)
var map = new OpenLayers.Map("canvas", options);
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);

var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);

// 点のプロパティ
var style_point = {
strokeColor: "#FF6347",
fillColor: "#FF6347",
fillOpacity: 0.2, // 内側の透明度
strokeWidth: 4, // 外周の太さ
pointRadius: 10 // 半径
};

var vectorLayer = new OpenLayers.Layer.Vector("描画テスト", {style: layer_style});

// 点の座標を決める
var point = new OpenLayers.Geometry.Point(139.760, 35.680);

// 座標を変換 ※この処理が新たに必要だった
point.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);

// 点を生成
var pointFeature = new OpenLayers.Feature.Vector(point, null, style_point);

// レイヤの追加と描画する図の指定
map.addLayer(vectorLayer);
vectorLayer.addFeatures([pointFeature]);

// 地図の中央座標を指定
var lonLat = new OpenLayers.LonLat(139.76, 35.68)
.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
);

// 中央とズーム値を指定
map.setCenter(lonLat, 15);
--------------------------------------
実行結果↓

20120422openstreetmap.png

テストがうまくいったことだし、次はアプリに適用してみよう。
posted by be-style at 19:03| Comment(0) | Web