まめしみ

やったことを淡々と書く

Archive for 9月, 2011


 

240px基準で作成してある携帯サイトをスマートフォン対応させる方法

携帯サイトをスマートフォンでみたら画面いっぱいに表示した画像が小さくてレイアウトが崩れた経験ありませんか?

PCサイトがあるならそちらに割り振るほうがいいのですが、
スマートフォンの画面サイズに合わせて拡大縮小すればそこそこ見栄えよくなります。
ついでに左右に余白いれて見やすくしてみます。
 

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.6, user-scalable=yes>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(function(){$("html").hide();});
$(window).bind('resize load orientationchange', function(){
  $("img").css("zoom" , ($(window).width() - 10)/240 );
  $("body").css("padding", "0px 5px");
  $("html").show();
});
</script>
<head>

今回は240px基準で作成してある前提です。
まずはmetaタグのviewportを追加します。

(画面サイズ - 余白) / 240

こんな感じに比率を求めてzoom処理します。
あとは余白をつけてお終いです。

これだけでいい感じになります。
「orientationchange」にもbindしてるので画面を横向きにしてもOK!!

 

※追記
画像がズームされるときの動きが気になったので、ズーム処理は非表示状態で行うように調整。


 

当然のことながらアプリを再起動すると変数が初期化されます。
Bear : まめしみGAMEでは累計アクセス数をリセットしたくないので変数の値をファイルに保持して永続化してみました。

app.jsから抜粋

//import
var express = require('express');
var app = module.exports = express.createServer()
var io = require('socket.io').listen(app);-
var fs = require('fs');

var totalFile = __dirname + '/tmp/total.txt';
var total = function(){
    var ret = 0;
    //ここは起動時の処理なので同期処理を使用する
    //一度a+モードで開く。
    //ファイルがなければファイルが作成される。
    var fd = fs.openSync(totalFile, 'a+');
    fs.closeSync(fd);
    //totalファイル読み込む。
    data = fs.readFileSync(totalFile, 'utf-8');
    if(data){
        ret = parseInt(data);
    }
    return ret;
}();

//イベント
io.sockets.on('connection', function(socket){
    total++;
    //totalファイルに記録しておく
    fs.writeFile(totalFile, ''+total, function(err){
        if(err){
            throw err;
        }
    });
}

起動したときに変数totalの値をファイルから読み込んでいます。

コメントにも書いてありますが起動時の処理なので同期処理にしています。
ここで非同期にするメリットは何もありません。
totalの値を確定させることが大事。

connectionイベントでtotalをインクリメントしてファイルに書き込むようにします。

 

DBを使うよりお手軽に永続化できます。


 

nodejs + express + socket.io でゲーム作った

Bear : まめしみGAME
 

ゲーム内容はあれですが、、、
以下のことが気になっていたのでそこそこデータのやり取りしているゲームつくりました。

  • どれくらいリアルタイムなのか?
  • websocketとxhr-pollingでどれくらい違うのか?
  • 3G回線ではどうか?
  • 各ブラウザの挙動は?
  • サーバーの負荷は?

 

通信方式、サーバーのload average、メモリ使用量とかも表示しています。

敵、アイテム位置情報はサーバー側で管理しているので当たり判定はサーバーでしています。
なかなかリアルタイムで出来てると思いますがどうでしょう?
さすがにスマフォで3G回線カクつきます。。。

 

みなさんも複数ブラウザ立ち上げてどんなもんか見てみてください。

 
Bear : まめしみGAME


 

centOSでsocket.ioをnpmインストールするとエラーになった。

npm install socket.io

=====
npm ERR! tar "-mvxpf" "-" "-o" "-C"
=====

 

centOSのtarはバージョンが古い。
yumでインストールできるのは1.1系。
1.2系が必要なのでソースからtarを入れた。

cd ~/parts
wget http://ftp.gnu.org/gnu/tar/tar-1.26.tar.gz
tar zxf tar-1.26.tar.gz
cd tar-1.26

#古いものをuninstall
sudo rpm -e --nodeps tar

./configure
make
sudo make install

インストールできたがtarコマンドのパスがおかしくなって使えなくなった。
ついでにOSアップデートもしてたのでrebootしたらパス通りました。。。

 

sokect.ioインストール

npm install socket.io

うまくいきました!


 

以下のサイトを参考にさせていただきました。
gitやcurlやwgetでGitHubにアクセスするとcertification errorになる原因を調べてみた

 

DigiCertのEV SSL用ルート証明書(DigiCert High Assurance Ev Root CA)が標準パッケージに含まれていない。ってのが問題なようなので証明書追加しました。

 

とりあえず.crtファイルを探す。

sudo find / -name *.crt

 

「/etc/pki/tls/certs/ca-bundle.crt」が見つかった。
OpenSSLパッケージに含まれているものらしい。

 
追加する。

cd ~/parts/
wget https://www.digicert.com/testroot/DigiCertHighAssuranceEVRootCA.crt
sudo chmod 666 /etc/pki/tls/certs/ca-bundle.crt
sudo cat DigiCertHighAssuranceEVRootCA.crt >> /etc/pki/tls/certs/ca-bundle.crt
sudo chmod 644 /etc/pki/tls/certs/ca-bundle.crt

 
エラーでなくなりました!!


 
gitをインストールします。
 
Git – Fast Version Control System

 

gitインストール

1.gitインストール

cd ~/parts
wget http://www.kernel.org/pub/software/scm/git/git-1.7.6.tar.gz
tar zxvf git-1.7.6.tar.gz
cd git-1.7.6
./configure --with-curl=/usr/local
make
sudo make install

 

2.補完設定

mkdir ~/etc
cp ~/parts/git-1.7.6/contrib/completion/git-completion.bash ~/etc/

vi ~/.bashrc
===========================================
#git completon
source $HOME/etc/git-completion.bash
===========================================
. ~/.bashrc

 
これでtabによる補完が効くようになります。

 
以下をやるとプロンプトにブランチ名を表示できます。
お好みで弄るといい感じです。

vi ~/.bashrc
===========================================
PS1='[\u@\h:\W]$(__git_ps1 "\[\e[32m\](%s)\[\e[0m\]")$ '
===========================================
. ~/.bashrc

 

3.gitの設定

git config --global user.name 'your name'
git config --global user.email  'abcdefg@sample.com'
git config --global core.editor vim
git config --global merge.tool vimdiff
git config --global color.status auto
git config --global color.branch auto
git config --global color.interactive auto
git config --global color.diff auto

Pro Git – Pro Git 1.5 使い始める 最初のGitの構成を参考にお好みの設定にしてください。


 
node.jsとnpm(node package manager)をインストールします。
 
isaacs/node – GitHub
isaacs/npm – GitHub

 

node.js & npmインストール

1.node.jsインストール

wget http://nodejs.org/dist/node-v0.4.11.tar.gz
tar zxvf node-v0.4.11.tar.gz
cd node-v0.4.11
./configure
make
sudo make install

 

2.npmインストール

curl http://npmjs.org/install.sh |sudo sh

 
こんなエラーが出た。。。

npm cannot be installed without nodejs.
Install node first, and then try again.

Maybe node is installed, but not in the PATH?
Note that running as sudo can change envs.

PATH=/usr/bin:/bin

 
sudoしたときにPATHが引き継がれていない模様。
sudoの設定にenv_keepというところがあるので、そこに「PATH」を追加します。

sudo visudo
===============================================
Defaults    env_keep = "PATH COLORS DISPLAY HOSTNAME HISTSIZE INPUTRC KDEDIR \
                        LS_COLORS MAIL PS1 PS2 QTDIR USERNAME \
                        LANG LC_ADDRESS LC_CTYPE LC_COLLATE LC_IDENTIFICATION \
                        LC_MEASUREMENT LC_MESSAGES LC_MONETARY LC_NAME LC_NUMERIC \
                        LC_PAPER LC_TELEPHONE LC_TIME LC_ALL LANGUAGE LINGUAS \
                        _XKB_CHARSET XAUTHORITY"
===============================================

 
リトライ!

curl http://npmjs.org/install.sh |sudo sh

 
うまくいきました。

/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm.js
/usr/local/bin/npm_g -> /usr/local/lib/node_modules/npm/bin/npm.js
/usr/local/bin/npm-g -> /usr/local/lib/node_modules/npm/bin/npm.js
npm@1.0.27 /usr/local/lib/node_modules/npm
It worked

 

jQueryMobileスタイルを適用したくなかったのでドキュメントを参考にやってみた。

 

//////////////////////////////////////////////////////////////////////////////////////////////////
追記
1.0rc2でkeepNative復活しました!
jQueryMobile(1.0rc2)でkeepNativeが復活
//////////////////////////////////////////////////////////////////////////////////////////////////

 

ドキュメントより抜粋。

 

Preventing auto-initialization of form elements

If you’d prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role=”none”. For example:

 

If you’d prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role=”none”. For example:

<label for="foo">
<select name="foo" id="foo"  data-role="none">
	<option value="a" >A</option>
	<option value="b" >B</option>
	<option value="c" >C</option>
</select>

Or, if you’d like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin’s keepNative option (which defaults to [data-role="none"]. Be sure to configure this option inside an event handler bound to the mobileinit event, so that it applies to the first page as well as subsequent pages that are loaded.

$(document).bind('mobileinit',function(){
	$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});

 

それぞれにdata-role=”none”を指定するか、keepNativeで除外するセレクタを設定できると書いてある。

が、、、、
data-role=”none”の指定は効いたがkeepNativeでのセレクタ設定ではダメだった。
ソースをみてみるとkeepNativeの扱いが1.0b2から大きく変更されてた。

 

1.0b1 (一部抜粋)

this.keepNative = ":jqmData(role='none'), :jqmData(role='nojs')" + (o.keepNative ? ", " + o.keepNative : "");

var allControls = this.element.find("input, textarea, select, button"),
    nonNativeControls = allControls.not(this.keepNative);

 

keepNativeに設定したセレクタを除外するようになっている。

 

1.0b2 (一部抜粋)

this.keepNative = ":jqmData(role='none'), :jqmData(role='nojs')";

$( $.mobile.slider.prototype.options.initSelector, e.target )
		.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
		.slider();

 

keepNativeは除外セレクタとして使われていない。
その代わりにinitSelectorで初期化するセレクタを設定できそう。
今までのkeepNativeでは一括設定でしたが、それぞれのタイプごとに設定できるようになってるっぽい!
※上の例では「slider」

 

//////////////////////////////////////////////////////////////////////////////////////////////////
追記
1.0rc2でkeepNative復活しました!
jQueryMobile(1.0rc2)でkeepNativeが復活
//////////////////////////////////////////////////////////////////////////////////////////////////

 

今回はdata-role=”none”で対応したので試していませんが、initSelectorについてChange log に書いてありました。

Change logより抜粋

Exposed automatic initialization selectors on most widgets – The new option, initSelector is accessed through each of the widget plugins (select, slider, etc.) that expose options through the widget factory. This is used to define the selectors (element types, data roles, etc.) that should be used as the trigger to automatic initialization of each widget plugin. This allows developers to apply auto-initialization in more flexible ways.

コミットログはこちら

mavenでAndroidプロジェクト作成


mavenでandroidプロジェクトを作成する方法。

archetypeがgithub公開されています。(感謝!)
3種類あるので詳しくは「akquinet/android-archetypes

 

サンプル

プロジェクト作成

mvn archetype:generate \
-DarchetypeArtifactId=android-quickstart \
-DarchetypeGroupId=de.akquinet.android.archetypes \
-DarchetypeVersion=1.0.5 \
-DgroupId=your.company \
-DartifactId=my-android-application

 

シミュレーターにデプロイ


mvn install android:deploy

続いてPHPをインストールします。

ソースからコンパイルしてインストールします。

 

PHPインストール

1.PHPのダウンロード & 展開

cd ~/parts
wget http://www.php.net/get/php-5.3.6.tar.gz/from/jp.php.net/mirror
tar zxvf php-5.3.6.tar.gz
cd php-5.3.6

wgetコマンドを使用してダウンロードします。

※URLは設定時点で最新のものです。PHP公式サイトで最新のダウンロードURLを確認してください。

ダウンロードしたファイルをtarコマンドで展開し出来たディレクトリに移動します。

 

 

2.PHP & ライブラリ インストール

//2~14行目までで1つのコマンドです。
./configure \
--enable-mbstring \
--enable-soap \
--enable-zend-multibyte \
--with-apxs2=/usr/local/apache2/bin/apxs \
--with-mysql=/usr/local/mysql \
--with-pdo-mysql=/usr/local/mysql \
--with-curl \
--with-gd \
--with-jpeg-dir=/usr/lib \
--with-png-dir=/usr/lib \
--with-zlib-dir=/usr/lib \
--with-mcrypt

オプションはご覧の通り。基本的にはmysql、GDを設定。

エラーでました。。。

エラー発生
configure: error: xml2-config not found. Please check your libxml2 installation.
ライブラリ追加
yum install libxml2-devel

エラー発生
configure: error: Please reinstall the libcurl distribution
ライブラリ追加
yum install curl-devel

エラー発生
configure: error: libjpeg.(a|so) not found.
ライブラリ追加
yum install libjpeg-devel

エラー発生
configure: error: libpng.(a|so) not found.
ライブラリ追加
yum install libpng-devel

エラー発生
configure: error: mcrypt.h not found. Please reinstall libmcrypt.
ライブラリ追加
yum install libmcrypt
yum install libmcrypt-devel

ライブラリがいくつか足りていないので追加。

make
sudo make install

インストールします。

 

 

3.設定

sudo cp ~/parts/php-5.3.6/php.ini-development /usr/local/lib/php.ini
sudo vi /usr/local/lib/php.ini

=============================
[Date]
date.timezone ='Asia/Tokyo'

[mbstring]
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = auto
mbstring.http_output = UTF-8
mbstring.encoding_translation = Off
mbstring.detect_order = auto
mbstring.substitute_character = none;
=============================

php.iniでタイムゾーンと言語の設定をします。

sudo vi /usr/local/apache2/conf/httpd.conf

=============================
AddType application/x-httpd-php .php
=============================

拡張子(.php)をコンテントタイプ(application/x-httpd-php)にマップ。
 

 

4.apache再起動

sudo service apache restart

 

インストール完了。