Tag Archives: JavaScript

Unityビルド後の処理について

0
Filed under Unity
Tagged as , , , ,

UnityでiPhoneビルドした後、その処理で同時にファイルの処理をしてほしいことがあります。
Unity PostprocessBuild
例えば、xcodeprojファイルの中をいじるとか、ですね。
その方法を調べてみたら、まず見つかったのは、PostProcessBuildAttribute という方法。

PostProcessBuildAttributeで後処理

上記リンク先をみてみると、C#とJavaScriptの処理が書かれているので、これを適当なスクリプトファイルとして、 /Assets/Editor/に配置すればよいということらしいです。
例えば、JavaScriptで処理を書く場合、下記のような内容のスクリプトを /Assets/Editor/myPostprocessBuild.js と保存してビルドすれば、OnPostprocessBuild が実行されるわけです。

1
2
3
4
5
6
7
8
9
10
11
12
// myPostprocessBuild.js
#pragma strict
import UnityEditor.Callbacks;
@PostProcessBuild
 
static function OnPostprocessBuild(target : BuildTarget, pathToBuiltProject : String )
{
  Debug.Log( "myPostprocessBuild ---" );
  Debug.Log( pathToBuiltProject );
 
  // pathToBuiltProject は、Unity-iPhone.xcodeproj のあるディレクトリへのパス.
}

確かに実行されることを確認しました!

が、
なんか、
使いにくい。。

書き出されたファイルとかを処理するのは、Unity JavaScript(と私の力量)じゃ無理な気がします。。

他に方法がないかと調べたら、Perlとかで処理する方法がありました!
それが次の方法。
unity postprocessbuild scripts

PostprocessBuildPlayerで後処理

上記リンク先によると、“PostprocessBuildPlayer”という名前(拡張子なし)のファイルを /Assets/Editor/ 以下に配置しておくと、そのファイル内に書かれた、シェルスクリプトかPerlスクリプトが実行される、というわけです。
shスクリプトなら、そこから色々なスクリプトやプログラムを呼び出せると思うのですが、もう一気にいろいろ処理しちゃいたいので、今回はperlを選んでみました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#!/usr/bin/perl
 
use strict;
 
my $installPath = $ARGV[0];
 
# The type of player built:
my $target = $ARGV[1];
 
# What optimizations are applied.
# At the moment either "" or "strip" when Strip debug symbols is selected.
my $optimization = $ARGV[2];
 
# The name of the company set in the project settings
my $companyName = $ARGV[3];
 
# The name of the product set in the project settings
my $productName = $ARGV[4];
 
# The default screen width of the player.
my $width = $ARGV[5];
 
# The default screen height of the player 
my $height = $ARGV[6];

これですね!
しかし、私の環境ではprintの出力がUnityのコンソールに書きだされなかったので、ついでに下記のようなスクリプトを追記しました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Build Time.
my $buildTime = localtime(time);
 
# Debug print to log.txt
open( LOGFILE, "+>>log.txt" );
 
print LOGFILE "BUILD LOG --- $buildTime\n";
print LOGFILE "Install Path: $installPath\n";
print LOGFILE "Target      : $target\n";
print LOGFILE "Optimization: $optimization\n";
print LOGFILE "Company Name: $companyName\n";
print LOGFILE "Product Name: $productName\n";
print LOGFILE "Width       : $width\n";
print LOGFILE "Height      : $height\n";
print LOGFILE "\n";
 
close( LOGFILE );

プロジェクトフォルダにlog.txtというファイルが作成され、無事、下記のような出力がなされていることが確認されました!

1
2
3
4
5
6
7
8
BUILD LOG --- Wed Jun 26 15:58:20 2013
Install Path: /prj/201306-Test/Test
Target      : iPhone
Optimization: strip
Company Name: DefaultCompany
Product Name: 201306-Test
Width       : 1024
Height      : 768

これでできることが色々増えました!


[AD]

↓ちょっとした空き時間にiPhoneで見るのにベスト!

↓面白かったので全4巻購入しちゃいました!

限界集落(ギリギリ)温泉第一巻

限界集落(ギリギリ)温泉第一巻

カテゴリ:Kindle版

発売日:2013-01-05


relaxin’ リラクシン の地図表示が履歴対応しました!

0
Filed under JavaScript, ウェブサービス
Tagged as , ,

「relaxin’ リラクシン」は、弊社が制作、運営しているリラクゼーションサロンのポータルサイトです。

去年の7月末にリリースしてから地道にデータを追加したり、デザインを調整したりしています。
店舗データについては当初100店舗程度でしたが、現在は約1,300店舗となっています。
昨日、リラクシンをPCから見た時の使い勝手を良くしました!
という紹介記事です!
relaxin back button

「近所の店舗を探す」機能

「relaxin’ リラクシン」の最大の特徴は、全ての店舗情報に位置情報があることです。
これにより自分のいる場所などから近くの店舗を探すことが出来るようになっています。
そして、この度、この地図周りの機能を修正し、PCのブラウザの『戻る』『進む』ボタンに対応しました!
概要などを下記の動画にて紹介していますので、ぜひご覧ください。

ちなみに、relaxin’ リラクシンへの店舗掲載/情報修正の依頼等はこちら→http://relaxin.info/contact/

技術メモ

この機能について当初どうやればいいのか分からなかったのですが、弊社のパートナーに聞いた所 “window.location.hash” で出来るということが分かり、早速実装してみたのでした。
JavaScriptでwindow.locationをいじると基本的にリロードされてしまうのですが、window.location.hashの変更ではリロードされない、という特性を活かしたもので、Gmailなどでも広く使われている手法のようです。
あとはハッシュの変化を監視し、変化のタイミングで内容を変化させる、という仕組みですね。
※参考にしたサイトはこちらです→「AjaxでUnique URLを使い、戻る/進むボタンにも対応させる | TM Life」
ありがとうございました!


[AD]

↓Kindleで読めるJavaScriptの解説書

よくわかるJavaScriptの教科書 教科書シリーズ

よくわかるJavaScriptの教科書 教科書シリーズ

カテゴリ:Kindle版

発売日:2012-03-24


↓スタートアップといえばYコンビネーター。これは是非読みたい!

Yコンビネーター シリコンバレー最強のスタートアップ養成スクール

著者/訳者:ランダル・ストロス

出版社:日経BP社( 2013-04-25 )

定価:

Amazon価格:¥ 1,944

単行本 ( 456 ページ )

ISBN-10 : 4822249468

ISBN-13 : 9784822249465


Google Maps JavaScript API v3がChromeでボケる問題と対応

0
Filed under Google, ウェブサービス
Tagged as , ,

株式会社トルクスでは、GPS情報などを使って近くのリラクサロンを探せるポータルサイト「relaxin’ リラクシン」を提供しています。
「リラクシン」では、店舗情報を地図上に表示するためにGoogle Maps JavaScript API v3を使っているのですが、先日から何故かChromeで見るとボケて表示されてしまう現象が発生していました。
今回のエントリはその対処方法について、です。
blurry google maps
(↑クリックして等倍で見てください)

実は、、

このパラグラフは読み飛ばしてもらって結構ですが、実は、「リラクシン」のリリース時にも同様のバグが発生していました。
その時にもChromeのみで発生していました。(同じWebKitのSafariでは問題なかった!)
いろいろとchromeのデバッガツールで調査していたら、Twitterの公式ウィジェットの3D関連のCSSと相性が悪いことが判明したので、Twitter公式ウィジェットを使うのをやめた経緯があります。
これは覚書ですが、その問題を引き起こしたTwitterウィジェットのcssは、-webkit-transform:translate3d(0, 0, 0); というようなコードで、基本的にこれでボケるのはブラウザの浮動少数演算の誤差バグで、Twitterは悪くない!実際Safariでは問題発生しないし!と憤慨していました。
まぁ、それはさておき、今回の問題はまたちょっと違うものでした。

同志を探して解決!

今回もChromeのみで発生していたので、前回と同じような現象かと想像していたのですが、若干違っているようで、怪しいDOM要素を消してもGoogle Mapsの表示はボケたまま。
これは怪しいなぁ、と、”blur google maps v3″というキーワードで、期間を最近1ヶ月にして検索して見つけたのが次の情報です。

まさに同じような情報!
根本解決にはいたっていませんが、Google Mapsで呼び出すAPIのバージョンを指定できるので、それでAPIのバージョンを3.5を指定したら直った!と書いてあります。
下記のように呼び出しパラメータを追加することでバージョンを指定できるようです。

1
http://maps.google.com/maps/api/js?v=3.8&sensor=false

これを参考に、自分の環境でテストしてみたら、「3.8でOK、3.9でNG」という結果になりました。
最新バージョンを追いかける理由はあまりないので、とりあえず3.8で固定のまま運営していきたいと思います。

Google Maps APIに関するリンク集

にほんブログ村 IT技術ブログ IT技術メモへ

[AD]

↓これはかなり面白そう!マピオンの書いた地図システムの作り方!

Mapion・日本一の地図システムの作り方 (Software Design plus)

著者/訳者:株式会社マピオン 山岸 靖典 谷内 栄樹 本城 博昭 長谷川 行雄 中村 和也 松浦 慎平 佐藤 亜矢子

出版社:技術評論社( 2012-09-28 )

定価:

Amazon価格:¥ 2,786

大型本 ( 256 ページ )

ISBN-10 : 4774153257

ISBN-13 : 9784774153254


↓こういう脳内情報を外に出す技術ってなかなか面白いし、実はすごいんじゃない!?

バカ日本地図―全国のバカが考えた脳内列島MAP

著者/訳者:一刀

出版社:技術評論社( 2004-09 )

定価:

Amazon価格:¥ 1,166

単行本 ( 126 ページ )

ISBN-10 : 4774121258

ISBN-13 : 9784774121253


enchant.jsを理解して、Labelの中央そろえを実現!

0
Filed under JavaScript
Tagged as , ,

enchant.jsでLabelというクラスがあるのですが、他のGUIライブラリのように、プロパティやメソッドは揃っていません。
例えば、センタリングやフォントサイズの指定とかそういうのはないのです。

しかし、enchant.jsは、HTMLのDOMを操作するライブラリである、ということを理解しておくと、普通HTMLでできることは大体なんでもできます。
今回調べたのは、Labelで作ったものを中央そろえにしたい、ということですが、それを実現するために、まずはその前に、enchant.jsのソースを覗いてみましょう。

enchant.jsの基本構造:Entity

Labelクラスですが、次のような構造になっていることが分かります。

enchant.EventTarget
 ↑
enchant.Node
 ↑
enchant.Entity
 ↑
enchant.Label

で、ポイントは、enchant.Entityクラス。
ドキュメントにも『DOM上で表示する実体を持ったクラス.』と書かれていますが、実際enchant.js内を見ると次のようになっています。

1
2
3
4
5
6
7
8
9
10
11
12
enchant.Entity = enchant.Class.create(enchant.Node, {
    /**
     * A class with objects displayed on DOM. Not used directly.
     * @constructs
     * @extends enchant.Node
     */
    initialize: function() {
        enchant.Node.call(this);
 
        this._element = document.createElement('div');
        this._style = this._element.style;
        this._style.position = 'absolute';

ありました!
ポイントは、この this._element ですね!
つまり、誤解を恐れずに言えば、enchant.jsとは、div要素をabsolute(絶対位置)に配置し管理しているライブラリなのです!
その下に、styleとかも見えるので、自由に触れそうな感じがします。
ということで、今回の目的を達成するために、これをいじってみましょう。

Labelの中央そろえ

JavaScriptでは、DOM要素に、style.textAlignを設定できるはずなので、設定してみましょう。
そのテストコードを、jsdo.itに投稿してみました。

How to center text of Label – jsdo.it – share JavaScript, HTML5 and CSS

ポイントは、次の1行です。

1
labelTest._element.style.textAlign = 'center';

これでもいいですが↓

1
labelTest._style.textAlign = 'center';

問題なく設定できていますね!
ただ、内部変数を直接いじっていることになるので、今後のバージョンアップとかで使えなくなる可能性があるのは注意しておく必要があります。


[AD]

↓売れまくっているらしい!

HTML5とJavaScriptでスマートフォンゲーム作成! ゼロからはじめるenchant.js入門【公式ガイド】

著者/訳者:布留川英一 伏見遼平 田中諒

出版社:KADOKAWA/アスキー・メディアワークス( 2012-02-18 )

定価:

Amazon価格:¥ 3,240

大型本 ( 272 ページ )

ISBN-10 : 4048862588

ISBN-13 : 9784048862585


↓その場しのぎの積み重ね学習を繰り返してきたJavaScriptも基礎からやってみたいなぁ。

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで

著者/訳者:山田 祥寛

出版社:技術評論社( 2010-11-27 )

定価:

大型本 ( 424 ページ )

ISBN-10 : 4774144665

ISBN-13 : 9784774144665