knockout.jsとTwitter Bootstrapの相性

JAVASCRIPT

knockout.js（以下KO とTwitter Bootstrapを併用していて、良い面もあるのですが、動かなくなるケースがいくらかあります。

主にBootstrapのDocument内にあるjavascriptの一覧に載っているものにKOでバインドするとclickなどのevent絡みでどうも動かない時がある。なぜなんだろうといろいろconsole.logしてみました。

コード例
<div class="btn-group" data-toggle="buttons" id="toggleBtn" data-bind="foreach: btnList">
	<label class="btn btn-default" data-bind="click: $root.clickEvnt" >
		<input type="checkbox" data-bind="value: id,checked: $root.checkedList" /><span data-bind="text: val">1</span>
	</label>
</div>
<script type="text/javascript">
$(function() {
	function ViewModel() {
		var self = this;
		self.btnList = [
			{id: 1, val:1},
			{id: 2, val:2},
			{id: 3, val:3}
		];
		self.clickEvnt = fuction(data, event){};
		self.checkedList = ko.observableArray(["2"]);
	}
	vm = new ViewModel();
	ko.applyBindings(vm);
});
</script>

上記のソースで、Bootstrapのtoggleボタンにバインドした時の思うようにいかない例です。

  • KOでcheckedをバインドしていてるのですが、toggleボタンの初期状態が反映されない
  • クリック時には、checkedList内の値が更新されない
  • その割にはlabelにバインドしたclickEvnt()は効いてる
  • ちなみにlabelにclickEvnt()をバインドしなくても同じ

結局これらは、バッティングして両者ともに途中で処理が中断しているわけではありませんでした。KOもBootstrapもそれぞれ正常に動いています。

KOでcheckedしていてもlabelのclassに'active'を追加しないと押された状態に見えていなかった。

Bootstrapのマニュアルどおり初期化でクラスを追加してください。ということで、KOの初期化が終わったらjQueryでinputのcheckedを見てaddClassで'active'にして解決。

後はクリック時Bootstrapが通常どおり判断してくれます。

KOでバインドしていたはずのobservableArrayに反映されないのは、KO通してinputを変えているわけではない。

Bootstrap側で直接inputを変えているみたいで、inputElementへはちゃんと反映されてます。やってることに気づいたらそりゃそうだよねという話。
ですが、これをどうやって、ViewModelへ反映させるか？困っていたのですが。結局、jQueryで$(element).on('change', function(){})を使って値をjQueryでさらいまとめてVMのobserbableArrayへ入れるイベントを登録しました。


解決方法がスマートではなく、対症療法でしたが、jQuery使えばそんなに手間でもないわけで、両方とも使わないよりはわりと楽なんですよね。

CentOS7が出たのでVMWarePlayerで使う

Linux

各ミドルウェアなどが主流のものよりだいぶ古くなりすぎていて残念だったCentOSも7.0がリリースされたのでとりあえずVMWareで動かしていたのですがWeb開発はCentOSのデスクトップでやっているのでちょっと困ったことに遭遇しました。

VMWare Toolsが入らない

正確には、desktopGroupには open-vm-tools-desktopが入っていて、競合するからとエラーになっていたんですね。
それならそれで、open-vm-tools使っていようかと思ったらホスト側からゲスト側にドラッグアンドドロップでファイルコピーできないんですね。
ということで、やっぱりVMwaretools使おうってことで、いつもどおり./vmware-install.plでやったらエラー。理由は最初に書いたとおりでした。
そんなこんなで手順をまとめると

VMwareToolsインストール手順

#open-vm-tools-desktop削除
yum remove open-vm-tools-desktop

#必用なパッケージをインストール
yum install gcc kernel-devel

#いつもの
cd vmware-tools-distrib/
./vmware-install.pl

#後は、いつもよりメッセージ多いですがデフォルト選択どおり

以上のようになりました。
これで、ドラッグアンドドロップでのファイルの行き来ができるようになりました。

ZF2 ServiceManagerをPimple風に使う

PHP

Service-LocatorモデルでやりたいことはPimpleのようなスマートさなんですが、ZF2は公式ドキュメントがいまいちわかりづらいので、ソース見ながら調べたらこんなんできました。

まずはcomposerでインストール
composer.json

{
    "repositories": [
    {
        "type": "composer",
        "url": "https://packages.zendframework.com/"
    }
    ],
    "require": {
        "zendframework/zend-servicemanager":"2.*"
    }
}

Pimple風な使い方

require_once 'vendor/autoload.php';

$sm = new \Zend\ServiceManager\ServiceManager();

$sm->setFactory('hoge', function ($locator, $cName, $rName) { 
        $obj = new \stdClass();
        $obj->hoge = 'hogehoge';
        $obj->cName = $cName;
        $obj->rName = $rName;
        return $obj; 
    });

$sm->setFactory('var', function ($locator) {
        $hoge = clone($locator->get('hoge'));
        $hoge->var = 'varvar';
        return $hoge;
    });

var_dump($sm->get('hoge'), $sm->get('var'));

出力結果

object(stdClass) {
  ["hoge"]=>
  string(8) "hogehoge"
  ["cName"]=>
  string(4) "hoge"
  ["rName"]=>
  string(4) "hoge"
}
object(stdClass) {
  ["hoge"]=>
  string(8) "hogehoge"
  ["cName"]=>
  string(4) "hoge"
  ["rName"]=>
  string(4) "hoge"
  ["var"]=>
  string(6) "varvar"
}

上記のようにしても一箇所にFactoryクラスをまとめて作っておいても、お好きな組み込み方で

PHPExcel 1.7.8で罫線が適用されないケース

PHP WEB

PHPExcel 1.7.8で罫線引いたはずなのに出力してみると適用されていないケースがありました。


そのケースとは、シートをコピーした時です。


セルの値関連は何も考えなくても良いのですが、恐らく書式については順序を守らないと適用できません。
なんでかといいますと


・addSheetした時にそれまで操作したStyleは挙動がおかしくなるか、多くの場合適用されていない
・addSheetした最新のシートは次にシートを追加/削除するまでStyleでは参照できない状態


この2つが原因です。
なので対処法は


・Style操作はコピーしたシートをaddSheetした後で操作する。
・最初にいらないシートを用意して置いて最後にそのシートを消す


具体的には以下のとおりです。

//事前にテンプレートとして
//excelファイルを読み込ませてます

//テンプレートをコピー
$template = $excel->getSheet(0)->copy();
$excel->addSheet($template);

//テンプレート用シートを消して
//最後のaddSheetした内容を反映させる
$excel->removeSheetByIndex(0);

//操作したい対象のシート(index指定)
$sheet = $excel->getSheet(0);

//A1セル指定したStyle操作
$cell = $sheet->getStyleByColumnAndRow(0,1);
$borders = $cell->getBorders();

$borders->getBottom()
        ->setBorderStyle(PHPExcel_Style_Border::BORDER_THIN);

バッドノウハウでしかありませんが、これで罫線が反映しました。

PHPExcel 1.7.9 で思うように罫線引けないバグ

PHP WEB

PHPExcelはWebでデータをExcelにしてダウンロードするという時になにかと頼っているライブラリなんですが
現時点で最新版の1.7.9ですが1.7.8と比べ

  • 処理が明らかに早くなっている
  • composerに対応し公開中
  • マニュアルが読みやすくなった

など良い点があるのですが
1.7.8と1.7.9の間でちょっと仕様変更とバグっぽいものが混ざってました。

指定したセルだけに罫線が反映されないバグ

これは、場合により他のセル全体にも罫線が引かれるという予想がつかないものでした。
恐らくwriterでの反映のさせ方に問題がありそうです。今回writerはExcel5を使用しましたがXLSM形式でも起こるかは試してません。


あと、その時気づいた仕様変更がこれ

//A1セルの下に罫線を引く
//1.7.8
$phpexcel->getActiveSheet()->getStyle('A1')->getBorders()->getBottom()
    ->setBorderStyle(PHPExcel_Style_Border::BORDER_THIN);

//1.7.9
$phpexcel->getActiveSheet()->getCell('A1')->getStyle()->getBorders()->getBottom()
    ->setBorderStyle(PHPExcel_Style_Border::BORDER_THIN);

というようにセルを指定してから要素を取りにいくという流れに変更されています。

シムシティ（2013）攻略TIPSアップデート

ゲーム

基本的には前の記事（http://d.hatena.ne.jp/reioto/20130311/1362980483）での通りなのですが
前回あいまいになっていたものの中でわかったことがあったのでBlogにアップしておきます。


・公害について

  • 大気汚染で風向きは関係なく都市全体に影響？

→風向きに関係あり、風下に向かって大気汚染が流れるので工業地区の立地を考える際風マップも参考にしましょう


・道路について

  • 高密度街路と中〜路面電車付き高密度大通りは制限なし？

→高所得者層まで含めるとそれぞれに制限と必要なマスの設定がありました。高密度街路から大通りは切り替えられないので再開発で狙うかマップ内衛星都市を新規に作る際に狙うかになります。
ただマップが狭いので高密度街路でうまくデザインすれば詰めこめられます。

  • 公式アナウンスの通りアップデート後AIがちょっと改善されました。

シムシティ(2013)をやってみたよ＆攻略TIPS

ゲーム

ゲームをプレイするためにスケジュールを組み発売前日までの間出回っている情報の中で考えられる限りのことを考え発売日に備える。実際にやってみるとおもしろくて一日もっていかれるそんなゲームがあります。


それが「シムシティ」


初めてシミュレーションというジャンルを体験したのはSFC版のシムシティでした。そこでシミュレーションって奥が深いなーと思ったわけですがそれから年月が過ぎ更に進化して新しいシムシティが発売されました。

ネットワークが必須のオンラインゲーになってしまい発売日から連日アクセスが多いためサーバーがダウンしてセーブデータが壊れたりしてましたがなんだかんだプレイできる状況です。
それでも相変わらずこれはこれでおもしろいと言えるゲームです。


このゲームのすごいところは楽しみ方が人それぞれにあり目的毎に攻略の仕方が違うためそれを模索すればするほど新しい発見があったりして予算が破産しない限り終わりがないところだと思います。
おもしろすぎるのでついつい時間を吸われがちなれいおとです。
知らない人はニコニコ動画とかにプレイ動画を公開している人がいるので見て頂けるとお手軽に楽しさがわかると思いますよ。


ということでプレイしてみたのでさらっと箇条書きすると

  • 広いマップってどこよ？と思うほど前シリーズと比べると狭い
  • 現時点ではパッチあたったりするとセーブデータは壊れることもあるのでセーブしててもなくなるものと思え
  • 資源は儲かるけど加工するとなると条件難しい
  • バランスの良い開発が色濃くなっている感触
  • 渋滞が公共機関の効果を下げる
  • 4よりも少ないツールで渋滞を避けなければならないが道路は必須。
  • 鉄道が貿易港建設するまで完全に脇役
  • 飛行場が意外と場所をとらないサイズになり国際空港はマップ外につくるようになった
  • 3区画は低密度から高密度へ時間で育てるものになった。どこまで成長するかはそれなりの条件がある
  • どうやらシミュレートはPC自身でやっていてデータはサーバーに同期してるみたい
  • サーバー同期完了後で他の都市へ自分の都市の情報が更新される？

とまぁ延々と書き続けられるほどハマれるゲームなのですよ･･･


以下は現時点でわかってきた攻略に関するTIPSです。


3区画について

  • 高密度になるには3×3マスの面積が必要
  • 成長制限はくっつく道路で決まる
  • 砂利道と低密度は同じ成長制限
  • 高密度街路と中〜路面電車付き高密度大通りは制限なし？
  • 地価は密度に関わらず住むシムのヒエラルキーに対応
  • 公園の効果は共通で地価上げその個体に需要限界上昇効果がある？
  • スペースが足りなくて成長しない場合3×3のスペースに区画を補充することで後々合体して高密度になる

道路について

  • 道路アップデートツールでは次ランクとの差額の費用ですむ
  • 安い道路から必要に応じてアップデート推奨
  • 渋滞で緊急車両、バス、清掃車の公共の効果が悪化する
  • 十字路つくるだけで渋滞がすごいのでT字路にする
  • バスも車も全て渋滞を起こす要因になる
  • AIのルート選択の賢さがいまいちだがガチガチにルートを選ばせるつくりにしなくてもある程度思ったとおりに動いてくれる
  • AIは方向転換が苦手
  • AIの都合上道路のデザインで公共の効果が悪化するので迷路のような部分は作らない
  • 高密度区画建つと渋滞の原因になるので幹線道路には区画作らない（大通りと街路の役割）
  • AIの都合上高密度区画から大通りまでの道にはループになるようにすると分散できる
  • バイパス作る意味はあるけど効率は怪しい。作るときはキャパを考えて
  • 公共交通機関は車の量を減らす
  • 朝夕の通勤ルートの違いはあるが経路ツールがないので渋滞になってから自力で認識

特化について

  • 貿易の貿易センターは工場発展の拠点でもある。これがないと商品の流通ができない→工業が発展しない
  • どれも3万シムリオン〜のクラスなのでそれまでは地道に稼がないといけない
  • 資源の多いマップはそれだけで儲かる
  • 観光は観光局で1万以下のも作れるけどその前に交通インフラのために交通局
  • 資源輸入しての加工貿易は利益が出ない？→ごみからの調達では利益出る

教育について

  • 犯罪や火災が目に見えて減る。特に火災対策として初等教育は重要
  • 教育機関はまわりの地価を上げる
  • 小学校→高校→大学でテクノロジー研究が可能+原発運用可能に
  • 中卒で原発を運用するとメルトダウンの危険性が高いなど公共機関によっては教育レベルを求められる
  • 毎時ランニングコストが高い傾向にあるのがネック
  • リサイクルは中卒でもできる
  • 社会人用教育施設（図書館など）は工業の技術にも影響？例えば公害→製造とか

公共交通機関について

  • 貿易港以外は全てシムの流通
  • ユニットによってシムのヒエラルキーに対応する
  • 鉄道は貿易港に引き込むことで工業製品の流通になる
  • 都市内バス、路面電車は都市内の低、中所得の車を減らすため人口爆発の際ある程度必要？
  • 都市間バス、旅客鉄道、フェリーは労働者と観光客の輸出入のため

公共ユニットについて

  • 必要になってくる順番は病院・ごみ→消防→警察
  • 消防、警察、病院は周りの地価が上がる
  • 強力な消防、警察、病院は公安局が必須
  • 高密度が建ってしばらくすると高度医療が必要になってくる
  • ごみで電力は発電できないが焼却炉で集積ごみをなくすこともできる

公害について

  • 大気汚染で風向きは関係なく都市全体に影響？
  • 全て病気に直結する
  • シムの車は大気汚染源にはならない