y.okano blog: 2月 2013

2013年2月27日水曜日

2013年2月22日金曜日

GAEでgoからstaticファイルを参照できない

　GAE(Google App Engine)でstatic_dirに指定したディレクトリ内のファイルをgoから読み込めない問題で詰まりました。

　以下の点に注意が必要です

ユーザがWebブラウザで直接開くファイルはstaticに設定する
goで読み込むファイルはstaticに設定しない

static_dirに設定したディレクトリ内のファイルはユーザがWebブラウザで直接参照するものであり、goから読み込むことはできません。

GAE公式ドキュメントより
For efficiency, App Engine stores and serves static files separately from application files. Static files are not available in the application's file system. If you have data files that need to be read by the application code, the data files must be application files, and must not be matched by a static file pattern.

　よって、templateパッケージを使ってhtmlファイル動的に出力する場合、htmlファイルをstatic_dir内に配置してはいけません。

2013年2月21日木曜日

Xcode4.xでGoのソースに色を付ける

Xcodeはデフォルトでは Go 言語のシンタックスハイライトを行いません。

Google App Engine などで Go を使うときに Xcode で色をつける方法を調べました。

手順

シェルスクリプトのダウンロード
パスの設定
シェルスクリプトの実行
確認

1. シェルスクリプトのダウンロード

XcodeにGoのシンタックスハイライトを追加するためのスクリプトが配布されています。

http://golang.org/misc/xcode/4/

こちらから go4xcode.sh をダウンロードします。

go.xclangspec はGoogle App Engine のツールキットに初めから入っているため落とさなくてよいです。

デフォルトでは

/Applications/google_appengine/goroot/misc/xcode/4/go.xclangspec

にあります。

2. パスの設定

スクリプトでは環境変数 $GOROOT を使用しています。

$GOROOT に正しいパスが設定されているか確認します。

$ su
$ echo $GOROOT

gorootディレクトのパスが表示されたら問題ありません。

何も表示されない場合はパスを改めて設定します。

$ export GOROOT=/Applications/google_appengine/goroot/

3. シェルスクリプトの実行

スクリプトを実行します。

$ sh go4xcode.sh
Backing up plugindata file.
Adding Go language specification entry.
Duplicate Entry Was Skipped: Xcode.SourceCodeLanguage.Go
Installing Go language specification file for Xcode.
Run 'sudo rm -rf /var/folders/*' and restart Xcode to update change immediately.
Syntax coloring must be manually selected from the Editor - Syntax Coloring menu in Xcode.

メッセージに従いゴミを削除します。

$ rm -rf /var/folders/*

これでインストール完了です

4. 確認

Xcodeを起動します。

インストールが成功していれば、

メニューの Editor -> Syntax Coloring に Go があるはずです。

これを選択するとGoの文法に合わせてソースに色がつきます。

Goファイルを開いた時に自動で設定されないので、毎回手動で選ぶ必要があるので注意してください。

2013年2月15日金曜日

ソフトウェアをMITライセンスにする

自作のソフトウェアを誰でも利用できるようにするためにMITライセンスとして公開する方法です。
ソフトウェアライセンスを宣言するためには

ソースコードの冒頭にコメントとして記述する
テキストファイルとして添付する
インストーラーに表示する

などの方法があります。

ライセンスファイルを同梱するのが簡単です。
MITライセンスのテンプレートは以下のウェブサイトで公開されています。

Open Source Initiative
http://opensource.org/licenses/mit-license.php

Open Source Group Japanによる日本語訳
http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license

これらのテンプレートをコピーし、<year>に開発した西暦、<copyright holder>に自分の名前を入れます。このファイルに"LICENSE.txt"などの名前を付けて配布すればMITライセンスとしてソフトウェアを公開したことになります。

2013年2月13日水曜日

enchant.jsでBGMをループ再生

enchant.jsでBGMをループ再生する方法です。

// BGMのループ再生
game.assets['bgm.mp3'].play();
game.assets['bgm.mp3'].src.loop = true;

loopは再生後に設定しなければ適用されないので注意が必要です。

// この場合はループ再生されない
game.assets['bgm.mp3'].src.loop = true;
game.assets['bgm.mp3'].play();

2013年2月12日火曜日

Mountain Lion のプレビューで画像をトリミングする

MacOSX Mountain Lion のプレビューで画像をトリミングする方法です。

画像の不要な部分を削除するのに使えます。
編集したい画像をプレビューで開きます。

ウィンドウの上側にある鉛筆マークをクリックしてツールを表示します。

魔法のスティックのアイコン（インスタントアルファ）をクリックします。アイコンが表示されていない場合は、ウィンドウの幅を広げると表示されます。

消したい部分をドラッグすると選択状態になります。

deleteキーを押すと選択した場所を削除出来ます。

また、⌘ + Shift + I を押すと選択した範囲を反転させることができます。

余白を選択します。

⌘ + Shift + I で選択範囲を反転します

⌘ + K を押すと選択した場所以外の部分を削除することができます。

余白を削除したい場合などに便利です。

2013年2月11日月曜日

Canvasでline-heightは無視される

HTML5 の Canvas では行の高さを指定できません。CSS の font と同じように指定できると説明されていますが、line-height に相当する数値は無視されるので注意が必要です。

enchant.js のメッセージ表示部分で行の高さが反映されず詰まりました。

// テキスト表示部分の処理は省略しています
var message = 'Where is a pig! I am very hungry... Give me a pig!';
var label = new Label();
label.color = 'black';
label.text = message;

// フォントサイズを75px, 行の高さを75pxに指定するが無視される
label.font = '75px/75px fantasy';

game.currentScene.addChild(message);

Canvas APIの仕様では line-height に相当する値は 'normal' に固定されるようです。
配列を利用して１行ずつ手動で行間を開けることにしました。

var messages = [
    'Where is a pig!',
    'I am very hungry...',
    'Give me a pig!'
];
for(var i = 0; i < messages.length; i++) {
    var label = new Label();
    label.color = 'black';
    label.text = message;
    label.font = '75px fantasy';
    label.y = 75 * i;  // 手動で高さを調整
    game.currentScene.addChild(message);
}

参考
- W3C HTML Canvas 2D Context, Level 2 Nightly
http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#text-styles

2013年2月10日日曜日

マインスイーパー逆式を公開

ブラウザゲーム「マインスイーパー逆式」を公開しました。
PC・スマートフォン・タブレットどれでも遊べます。

普通のマインスイーパーは、数字を見て爆弾の位置を当てるゲームですが、逆式では爆弾を見て数字を当てます。

最初からすべての爆弾の位置が表示されており、空いているマスに入る数字を素早く入力するゲームです。

オンラインランキングに対応しており、他のプレイヤーのタイムと競い合うことができます。

HTML5対応のゲームライブラリ enchant.js を使って開発しました。

ソースコードは github にて公開中です。

2013年2月8日金曜日

Inkscapeのフィルタ機能で簡単な模様・立体感を付ける

Inkscapeのフィルタ機能を使うと、オブジェクトに対して簡単に模様や立体感をつけることができます。まず、Inkscapeでオブジェクトを作成します。

次にオブジェクトを選択してから、メニュー→フィルタ→バンプ→凸版印刷をクリックします。

すると、このようにオブジェクトが立体的に変化します。
フィルタによって様々な効果があり、手早く何かの模様を付けたい場合は便利です。

2013年2月7日木曜日

オカタイマーを公開

こちらから：http://yokano.github.com/okatimer/

オカタイマーはタスクをより早く終わらせるためのWebアプリです。
目標時間と経過時間が画面に表示されます。
PCでもスマートフォンでも利用できます。

使い方

URLを開きます
http://okatimer.appspot.com/
タスク名と目標時間を入力してスタートボタンを押します
トグルスイッチで時間の一時停止、実行を切り替えられます
タスクが完了したら経過時間をチェックしましょう
次のタスクを実行したい場合は戻るボタンを押してください

注意

このウェブアプリは単一のタスクにしか対応していません
制限時間は 5分〜24時間55分まで対応しています
スマートフォンがスイープ状態だとアラートが鳴りません。

連絡先

yuta.okano@gmail.com

2013年2月6日水曜日

じゃんけんシューティングを公開

　GitHubにてじゃんけんシューティングをリリースしました。
http://yokano.github.com/JankenShooting/

GoogleChrome用のブラウザゲームでJavaScriptで書かれています。
GitHub pageからソースコードを見ることができます。

2013年2月4日月曜日

Returnキーを押した時にキーボードを消す方法

　UITextFieldをタップすると、ソフトウェアキーボードが画面下から現れます。しかしデフォルトではキーボードを消すことができません。Returnキーをタップした時にキーボードが消えるようにしてみましょう。

　以下の４ステップで出来ます。

ViewControllerをUITextFieldのデリゲートに設定する
UITextFieldDelegateプロトコルに対応する
UITextFieldからReturnキーが押されたというメッセージを受け取る
キーボードを消す

1. ViewControllerをUITextFieldのデリゲートに設定する

　Returnキーがタップされた時、UITextFieldオブジェクトはデリゲートへメッセージを送信します。

　Xcodeを起動して、storyboardファイルを開いてください。次にcontrolキーを押しながら、UITextFieldをViewControllerの上にドラッグします。controlキーを押しながらドラッグしている間、画面に青い線が表示されます。

　ポップアップメニューの "delegate" をクリックします。

　これで設定できました。デリゲートの設定状態はUtilitiesパネルで確認できます。

2. UITextFieldDelegateプロトコルに対応する

　UITextFieldとそのデリゲートはUITextFieldDelegateプロトコルに従って通信します。ViewControllerをUITextFieldDelegateプロトコルに対応させてみましょう。以下のコードを追加してください。

#import &lt;UIKit/UIKit.h&gt;
@interface TaskViewController : UIViewController &lt;UITextFieldDelegate&gt;
@end

ここではUIViewControllerがUITextFieldDelegateプロトコルに対応していることを宣言しています。

3. UITextFieldからReturnキーが押されたというメッセージを受け取る

　Returnキーが押された時、UITextFieldは "textfieldShouldReturn:" メッセージをデリゲートへ送ります。実際にメッセージが送られているかどうかを確認してみましょう。以下のコードをViewControllerへ追加してください。

◯◯ViewController.h

#import &lt;UIKit/UIKit.h&gt;
@interface TaskViewController : UIViewController  &lt;UITextFieldDelegate&gt;

// ADD HERE
- (BOOL)textFieldShouldReturn:(UITextField *)textField;

@end

◯◯ViewController.m

#import "TaskViewController.h"

@interface TaskViewController ()

@end

@implementation TaskViewController

// ADD HERE
-(BOOL)textFieldShouldReturn:(UITextField *)textField {
 NSLog(@"tapped return key!");
 return YES;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

@end

　コードを実行して、Returnキーをタップしてみてください。デバッグエリアにログが表示されるはずです。

4. キーボードを消す

　最後にキーボードを消しましょう。textFieldShouldReturn:メソッドを以下のように編集してください。

-(BOOL)textFieldShouldReturn:(UITextField *)textField {
 [textField resignFirstResponder];
 return YES;
}

　resignFirstResponder:メッセージをキーボードオブジェクトへ送れば、キーボードが消えます。

参考資料 - iOS Developer Library

登録: 投稿 (Atom)