MacBookAir11インチで開発はちょっと厳しい

最近、MacBookAir 11(MC505J/A)でXCODEで開発を始めたわけですが、画面が狭過ぎて無理です。こんな時は外部ディスプレイ接続が安上がりです。
手持ちの液晶ディスプレイとつなぐことにしました。ただ入力がHDMIが1個しかないので、切替機を使うことに。
まあ、うちのAirがサンダーボルト非対応なので、シネマディスプレイに手を出して散財しなくて済んだとも言えます。

接続はこんな感じです。
AIR –
 (minidisplayport/HDMI変換アダプタ) –
 (HDMIケーブル) –
 (HDMI切替機-HDMIケーブル付き) –
液晶ディスプレイ

新たに買ったのは、以下のとおり。
・Mini DisplayPort-HDMI変換アダプタ / AD-MDPHDMIWH
  サンダーボルトではないので注意。
・HDMI切替器 / HEAC対応 2台用 BSAK202 BUFFALO
  HDMIケーブル付きなのはお得。ACアダプタ不要。
・HDMIケーブル 0.7m /DH-HD14ES07WH
  あえて短めをチョイス

ELECOM miniDisplayPort変換アダプタ forAPPLE HDMI ホワイト AD-MDPHDMIWH
エレコム (2011-10-19)
売り上げランキング: 10956
iBUFFALO HDMI切替器HEAC対応2ポートBSAK202
バッファロー (2011-01-18)
売り上げランキング: 120
ELECOM HDMIケーブル イーサネット対応 スリム 0.7m ホワイト DH-HD14ES07WH
エレコム (2011-01-19)
売り上げランキング: 38215

結果:解像度がめちゃ広くなりました。これで開発しやすいです。




ワイヤレスキーボードとマウスならAirの移動時に取り回しが楽

Airを外部ディスプレイにつないで開発するときは、有線のキーボードとUSB接続のワイヤレスマウスを使っていました。ただAirを移動するときにいろいろついているので不便です。ここはワイヤレス化だろうということで、Buletooth対応のキーボードとマウスを購入しました。

新たに買ったのは、以下のとおり。
・マウスは、Apple Magic Mouse MB829J/A
・キーボードは、Apple Wireless Keyboard (JIS) MC184J/B

Apple Magic Mouse MB829J/A
Apple Magic Mouse MB829J/A
posted with amazlet at 12.04.19
アップル (2009-10-31)
売り上げランキング: 262
Apple Wireless Keyboard (JIS) MC184J/B
アップル (2011-07-22)
売り上げランキング: 556

やっぱりApple製はデザインいいですね。これでディスプレイケーブルを抜くだけでAirの持ち運びができるようになりました。こりゃスマート!
今、さらに欲しいのは、Airを閉じて立てれるスタンドです。これがあれば完璧ですね(笑)

BookArc for Air TWS-ST-000005
BookArc for Air TWS-ST-000005
posted with amazlet at 12.04.19
Twelve South (2011-04-30)
売り上げランキング: 1435

前回のエントリでソーシャルゲームで必要なポイントをあげましたが、
今回はもう少し技術的な部分にも触れたいと思います。

ゲームの構成は簡単に説明すると、モバゲーのフューチャーフォン(=ガラケー)、インフラは、クラウド環境(IaaS)上に構築、ゲームプログラムは、PHPとFlashliteといった感じです。


(1)インフラ:3系統用意

本番系とステージング系とローカル系の3系統を構築しました。
・本番は名前のとおり実際のゲームが動作する環境です。
・ステージング系は障害時や新機能を追加する際の確認用の環境です。本番系とは極力同じような環境にします。
・ローカルは普段の開発環境です。
・リリースの流れとしては、ローカル→ステージング→本番のようになります。

本番系のシステム構成

サーバ:I社のIaaS WEBサーバ2台、予備WEBサーバ1台、DBサーバ2台、ロードバランサー1台+予備1台
OS:CENTOS64

ステージング系のシステム構成

サーバ:GMOクラウドPublicのIaaS WEBサーバ・DBサーバ1台
OS:CENTOS64

ローカル系のシステム構成

サーバ:開発用PC、XAMPP
OS:Windows


(2)インフラ:運用監視ツール

サーバの監視は、予算不足から常時監視はできないため、障害時に迅速に対応するポリシーとしました。
・キャパシティの確認のためにリソース監視を導入しました。
・サーバとサービスの死活監視のためにプロセス監視を導入しました。

リソース監視

ツール:Munin(http://munin-monitoring.org/)
定期的にグラフを参照し、CPU負荷やメモリとHDDの残量を確認しました。

死活監視

ツール:Monit(http://mmonit.com/monit/)
サーバの生死確認とサーバ上のサービスの生死確認をするツールです。なにか起きると担当者の携帯へメールを通知するようにしました。WEBサーバは自動で再起動するようにしました。


(3)インフラ:高負荷、高速化

サーバの高速化や負荷軽減も予算制約があるので、ミドルウェアを導入しました。
・PHPの実行速度向上のためにPHPアクセラレータを導入しました。
・データベースにKVSを導入しました。

PHPアクセラレータ

ツール:eAccelerator(http://sourceforge.net/projects/eaccelerator/)
PHPを中間コードに変換しメモリ上にキャッシュします。

データベース

ツール:TokyoTyrant(http://fallabs.com/tokyotyrant/)


(4)プログラム:ゲームエンジン

PHPで携帯サイトを作る時と特に変わりはありません。ですのでいつもの組み合わせにしました。
・速度が求められるのでフルスクラッチと悩みましたが、メンテナンス性を考慮して、結局フレームワークを導入しました。
・HTMLコーディングを分離するためにテンプレートエンジンを導入しました。
・アプリケーションログを導入しました。

PHPフレームワーク

ツール:ZendFramework(http://framework.zend.com/)
ViewとControllerのみ使いました。

PHPテンプレートエンジン

ツール:Smarty(http://www.smarty.net/)
絵文字変換ライブラリを使うことで、3キャリア共通テンプレートで作成しました。

ログライブラリ

ツール:log4php(http://logging.apache.org/log4php/)



まとめ
予算的制約が何事にも優先する(笑)ので、いろいろなオープンソースやライブラリにお世話になりました。また、サービス直後の負荷が読めないのでクラウドの利用は安心感がありました。一応報告すると、サービス直後に落ちることはなかったです(実はオーバースペックだったw?)




mixiアプリ開発&運用コンプリートブック -ユーザをつかむソーシャルアプリのつくり方!育て方!
株式会社ミクシィ 田中 洋一郎
技術評論社
売り上げランキング: 73303


mixiアプリをつくろう!OpenSocialで学ぶソーシャルアプリ
神部 竜二
ソーテック社
売り上げランキング: 122509


iPad2のWifiモデル16GBを購入

iPadは買う予定はなかったのですが、iPadを使う開発案件のために急きょ購入しました。次期モデル(iPad3)が出るぐらいに買おうかなと思っていたぐらいです。すでにキャラかぶりのAirの11インチがあるしw

いじってみた感想としては、画面の解像度もそこそこ広いですし、アプリもそろって来ましたし、一通りの作業はできそうですね。これでAir11がますますいらなってきました(汗)

購入はソフトバンクの追加キャンペーンにするかAppleストアで買うか迷いましたが、次期モデルが出た時の手離れの良さを考えてAppleにしました。オンラインストアで2/2に発注、2/4の午前に届きました(速っ!)

モデルはWifiの16GBの黒。wifiスポットのオプションだけつけました。サポートのケアは後日買うか決めることにしました。

関連アクセサリーはやっぱり高いですねー

とりあえず買ったアクセサリーは3点です。
・液晶保護フィルター:1730円(バッファロー)
・クリアケース:2080円(エレコム)
・SmartCover:3980円(アップル)

液晶保護フィルター

液晶保護フィルターは気泡が入る失敗にビビリ、失敗しないと評判のバッファローの「iBUFFALO iPad2用 液晶保護フィルム 気泡「0」イージーフィット(黒)」にしました。

iBUFFALO iPad2用 液晶保護フィルム 気泡「0」イージーフィット ブラック BSEFIPD2BK
バッファローコクヨサプライ (2011-04-25)
売り上げランキング: 87

↑これは本当に簡単です!おすすめ

背面用クリアケース

クリアケースはエレコムの「TB-A11MPV2CR」。背面を保護するだけなのでiPAdの色を生かすためにもクリアにしました。

ELECOM iPad2 2011 9.7in シェルカバー スマートカバー対応 クリア TB-A11MPV2CR
エレコム (2011-05-20)
売り上げランキング: 30204

風呂蓋

最後は、アップル純正のSmartCover。ってこれ高いですよね。私の価値観でいうとこれに3980円は高過ぎます。これだからアップルは・・・(笑) 良く考えたらアップルストア限定の赤のSmartCoverにしておけばと今頃気づきました(汗)

ネット環境がないとつらいので、イー・モバイルのGP02に決めました


Pocket Wifi GP02 [イーモバイル]

いまどきは仕事するにはネット環境が必須です。

モバイル用のノートパソコンを持っているのですが、ネット環境がないと開発はできないでし、仕様書を書くにもググれないのはハンデありです。

モバイル向け通信というとwifiスポットという選択肢もありますが、都下は駅前中心なのがネックです。しょうがないので自前しかないかなと思い、モバイルwifiルーターを導入することに決定。

これで場所を選ばなくなるので開発効率はあがると思います!(たぶん) 
とりあえず、キズがつくからシリコンケースを買ってこないと(笑)

(追記)
自宅で測ったら下りの速度が6-7Mぐらいでした。

ヨドバシで買ってきたシリコンケース。GP02のストラップホールって微妙・・・
 ↓

[EMOBILE Pocket WiFi(GP02)専用]シリコンカバー(クリア)
ブライトンネット株式会社
売り上げランキング: 1122

(さらに追記)
上のカバーをつけるとこのような感じです。

明けましておめでとうございます。

昨年は大震災などを初めてとして色々なことが世界中でありました。
特に3.11をきっかけに価値観・人生観・仕事観を変えた方も多かったのではないでしょうか。
そして私も生まれ変わりの元年とするべく行動したいと思います。

2012年がみなさまにとって、幸せな年でありますように!

本年もよろしくお願いいたします。

平成24年1月3日 加藤清二

自分も含めて殆どの方がLinux環境で使うのでしょうね。
Windows版もあるとなにかと便利なのでインストールしてみました。

Windows版のnode.jsをインストール

node.jsのサイトからWindows版のインストーラをダウンロードします。
「node-v0.6.4.msi Windows installer」をダウンロードします。
node.jsサイト
ダウンロード

インストールが完了すると、C:\Program Files (x86)\nodejsにセットアップされます。
node.exeをクリックして実行するとコマンドラインが立ち上がります。
これで完了。

続いてnpmをインストール

■参考:npmサイト
■参考:ドキュメント

まずGit環境が必要です。
無い場合は、先にインストールしましょう。
自分は「msysGit」を使いました。
msysGit

> git clone https://github.com/isaacs/npm.git
> cd npm
> git submodule update --init --recursive
> node cli.js install -gf

これでnodejsの環境にnpmがセットアップされました。

モジュールがインストールされるか動作確認

コマンドプロンプトを起動します。
※管理者権限で起動しないとインストールでエラーになりますのでご注意ください。
 例)[スタート]-[プログラムとファイルの検索で「コマンドプロンプトを入力」]
  選択して、右ボタンメニューで管理者権限で実行を選択する

動作確認も兼ねてmysqlをインストールします。

> C:\Users\ccraft>cd C:\Program Files (x86)\nodejs
> C:\Program Files (x86)\nodejs>npm install mysql

おしまい。

ソーシャルゲームを開発した上で気づいた点をあげたいと思います。
“まだ”1本しか作っていませんが(笑)

※参考までに私がソーシャルゲームを開発する前のスキルは以下のとおり。
・業務やウェブシステムの設計経験多数
・PHPプログラミング経験
・携帯サイトの制作経験(携帯のHTML、CSSの勘所も知っている)
・ゲームは好きだが、携帯のソーシャルゲームはやっていない(笑)

例えば、以下のような開発体制の場合は、
サーバプログラマ ←今回のエントリ対象はココです
・Flashプログラマ
・デザイナー
・ディレクター

携帯サイトの制作経験 [必須]

パソコン用のサイト制作経験だけだと、厳しいと思います。
Flash画面を除く画面の大多数はサーバプログラマが作るからです。
さすがに最終的な仕上げはデザイナーにやってもらいますが。

携帯ならではの特性は知っていないと作れません。
代表的なところでは、
・文字コード
・3キャリアの違い
・絵文字
・サイズの制限
・画像ファイル
・URL長
・キーの特性(決定キー・上下キー)
・デバッグ環境

3キャリア対応のHTML・CSS・絵文字はめんどうですね。
今は便利なライブラリも出ていますので利用することをお勧めします。

Flashとの連携

昨今の携帯ゲームでは、UI部分はFlashで作成されています。
当然、Flash単体ではゲームとして成り立ちませんので、
サーバ側のプログラムとの連携が必要になります。

連携の方法にはいろいろ方法があります。
シュチュエーションに応じて使い分ける必要があります。

不正対策を想定する

実装に影響してくる部分なので、最初に意識するとしないとでは大きな差が出るでしょう。
例えば、ブラウザバック、URLパラメータ書き換えなどです。

当たり前のようにやられる所なので想定して開発すべきでしょう。
この辺の実装がなければ楽なんですがね(笑)

ソーシャルゲームの設計知識

リリース後も開発が続くので、機能追加が可能な設計が求められます。
ガチガチに作ると後で苦労します。
おそらくデータベースの選定にも影響がでるはずです。

マルチプラットフォームを実現できる設計も重要でしょうね。
MからGとかGからMとか。
プラットフォームに依存しすぎると移植で苦労すると思われます。
→まだやっていませんがw

そのほか

プラットフォームと切り離しても動作する設計も負荷試験のときに便利ですね。

普段の開発時は以下の工程が想定されます。

ローカルパソコンでの実行
 ↓
サンドボックスでの実行
 ↓
本番での実行

設定で簡単に切り替えられる実装が求められます。





技術的な話までは踏み込みませんでしたが、参考になればうれしいです。

Google+の準備

まずはGoogle+に自分のアカウントを作っておきます。
続いて、Google Developersにサインインします。

Google+のAPI利用登録(OAuth)

API Consoleのページを開きます。

API Project > Services
Google+APIを選択し、StatusをONにします。

API Project > API Access
Authorized API AccessでCreateClientIDで作成します。
アプリケーションタイプは、ウェブアプリケーションを選択します。
Authorized Redirect URIs にコールバックするURLを記述します。
JavaScript OriginsにURLを記述します。
CreateClinetIDボタンを押します。

Google+のサンプルプログラムの実行

Google+ Platformホームページを開きます。
Downloadsを選択すると、クライアントライブラリ一覧が表示されます。
ここではPHPを使用するので、PHP版のクライアントを選択します。
メニューのダウンロードから最新版をダウンロードします。
google-api-php-client-0.4.X.tar.gz

解凍したら、/google-api-php-client/examples/plus/のindex.phpを開きます。

この部分※を先ほど、取得したClientIDなどに置き換えコメントを外します。
$client->setClientId('insert_your_oauth2_client_id'); ←※
$client->setClientSecret('insert_your_oauth2_client_secret'); ←※
$client->setRedirectUri('insert_your_oauth2_redirect_uri'); ←※
$client->setDeveloperKey('insert_your_developer_key'); ←※

修正したら、サーバなどにアップして実行します。

http://[ほげほげ]/google-api-php-client/examples/plus


 【ConnectMeをクリック】


 【サンプルアプリが情報を取り出していいか聞いてきます】


 【許可すると私のプロフィール写真がゲット!】

macbook AirにVirtualBoxをインストール


macbook AirにCentOSの実行環境を構築したかったので、VirtualBoxをインストールすることにしました。
仮想環境の方が後々便利かなと思った次第です。当然bootcampはスルーで。
まずはAirにVirtualBoxをインストールするところから。

VirtualBoxホームページ
VirtualBox ダウンロードページ
VirtualBoxホームページに行き、最新版をダウンロードします。
今回は、VirtualBox 4.1.4 for OS Xを選択しました。
画面の指示に従ってインストールを終わらします。

VirtualBoxにCENTOS5.7をインストール

まず最新版のCENTOSをダウンロードします。
CENTOS5 ダウンロードページ
以下の2つのファイルをダウンロードします
 CentOS-5.7-x86_64-bin-DVD-1of2.iso
 CentOS-5.7-x86_64-bin-DVD-2of2.iso
 でかい!4.7GB相当
VirtualBoxを起動し、新規を選択します
Linux、Redhat64でVMを作成します
設定を選択し、ストレージを選択します。IDEコントローラに先ほどダウンロードした2つのファイルをセットします。
起動を選択すると、CENTOSのインストールが始まります。
※DHCPからIPアドレスを割り当てられない場合は、ネットワーク設定をブリッジアダプタに変更します


搭載が2Gメモリだとキツイ。

アナログ放送終了

2011年7月24日の正午にアナログ放送が終了しました

テレビ放送が地デジに変更されることにともない、アナログ放送が終了しました。

終了後は、終了のお知らせの画面がずっと流れています。
#BGMと終了しましたのアナウンスが流れています。

電波自体も、24時に止まりまして、砂嵐に変わりました。[追記]

[動画]切り替わる瞬間(mov形式)

各局、放送終了のお知らせ

どんだけ、暇なんだよ!と言われそうですが、記念に各局の画像をアップしておきます。

Read the rest of this entry