2012年ももう終わり

2012年も最後の日って事で、今年最後のBlog更新です。

まぁ最後ですから、今年一年を振り返りましょう。

まず、ニコニコ動画での活動。
動画投稿はもう出来ていないのですが、生放送はほぼ毎週やってきました。
L4D2にGears of War 3など、その他にもスパIVやPSO2などなど、息が長いゲームばかりやっていましたね。
来年もたぶんそんな調子だと思います。
よっぽど面白いゲーム出てこないと移行出来ないんじゃないかと思っています。

ただ単発ゲーム配信はやっていくと思います。
来年の予定としては、2月にDead Space 3、3月にシムシティです。
特にシムシティは、かなり期待しているので、今から楽しみな作品です。

次にプライベートですが、今年一年は少し仕事が忙しめで、例年より徹夜した日が多かったです。
ただ、自分中では充実感は無く、あまり満足出来ない一年でした。
ここ数年の仕事でのスキルアップの速度が遅くなってきているので、来年はもっともっと加速させようと思いました。

それのきっかけを与えてくれたのが、11月に行きましたSQUARE ENIXのオープンカンファレンスでした。
他の業界の方々と技術交流などが出来て、すごい刺激を受ける事が出来たんです。
自分の力不足での悔しさと、新しい技術へのモチベを、両方感じたイベントでしたね。
それを受けてモチベが急上昇したので、来年はその力でスキルアップしていこうと思いました。
オープンカンファレンスの事は時間が出来たらまとめようと思っていますので、今しばらくお待ちください。

という事で、短いまとめになりましたが、今年はこれでおしまいです。
今年交流出来た方々、有難うございました。

自分は、来年も同じ感じでマイペースでやっていくと思いますので、来年交流出来た方々も、またよろしくお願いします。
それでは、みなさん良いお年を!

jQueryを使用したjExpandの導入方法

本日は、Blog関係の記事を書きたいと思います。
随分前から自作PCの記事を書いてきましたが、そこで使用されている「表組み」について解説します。
以下が、実際に表組みが使用されている記事のリンクです。

 大関の自作PCへの道!電源とCPUクーラーとOS編

表組みを作るにあたって、各製品を比較しやすいものが良かったのですが、比較しやすいように詳細を記載すると表組みが長くなってしまうので「折りたたみ」で必要な情報を任意に見れるようにする必要がありました。
このような動的な表組みを実現するには「jQuery」が必要でした。
jQueryは、JavaScriptとHTMLを相互に使用するWEBプログラムの一つです。

プログラムというと難しい印象がありますが、テンプレートやサンプルが多く配布されているので、それを使用するだけでも簡単に導入出来ます。
実際に今回の表組みは「jExpand」というものをベースに使用しました。

さて解説ですが、以下の内容で解説していこうと思います。

 1. jExpandのファイル
 2. CSS
 3. HTML
 4. WordPressのカスタマイズ

ただ、今回解説する導入方法は、jExpandのサンプルファイルのままでは無く、通常の表組みに実装するという、完全とは言えない状況なので参考程度に留めておいて下さい。
それでは、以下に導入方法を記載します。

1. jExpandのファイル
 まずはjExpandのファイルを公式サイトからダウンロードします。
  jExpand

 解凍すると、色々ファイルが入っていますが、重要なのは以下の2点です。

  ・arrows.png
    表組みの展開を示す「矢印のアイコン画像」です。
    これを必ずしも使用する必要はありませんが、便利でしたのでそのまま使用します。
  ・jExpand.js
    jExpandを実装させるために必要な「JavaScriptのファイル」です。
    ただし、どのようなスクリプトになっているか内容を確認するだけで構いません。

 ここでは、とりあえず「arrows.png」のみを任意のフォルダに入れてWordPressが置かれているサーバーにコピーします。
コピーする場所はどこでも構いませんが以下の2点がオススメです。

  ▼/wp-content/themes/(任意のテーマフォルダ)/
    テーマフォルダに入れるので、WordPressを引っ越す場合も忘れにくいです。
    ただ、違うテーマに変更した時にjExpandが機能しなくなるので注意です。
  ▼/wp-content/uploads/jexpand/
    テーマに左右されずjExpandを機能させる事が出来ます。
    WordPressの構成が変更になったり、引っ越した場合に機能しなく恐れがあります。

2. CSS
 今回はWordPressで標準で使用している表組みに組み込む事と、自作PCのスペック表のために文字等を装飾する必要がありました。
そのため独自にCSSを少し追加しました。

ですので、普通の表組みで使用する場合は必要がない部分もあると思いますので、その時は的然、該当する箇所を削除する事をオススメします。
以下がCSSの内容です。
数字で指摘している部分は、後述する表組みの装飾されている箇所です。

#table {
	border-collapse:collapse;
	}

/* 1.テーブル全体の文字等の装飾 */
#table td {
	color:#555;
	font-size:90%;
	}
#table tr.odd td {
	cursor:pointer;
	}

/* 2.矢印画像 */
#table div {
	position:relative;
	left:14px;
	}
#table div.arrow {
	background:transparent url(http://(サイトURL)/wp-content/uploads/jexpand/arrows.png) no-repeat scroll 0px -16px;
	width:16px;
	height:16px;
	display:block;
	}
#table div.up {
	background-position:0px 0px;
	}

/* 3.製品画像 */
#table img {
	float:right;
	}

/* 4.詳細項目文字(「スペック」「参考サイト」) */
#table h4 {
	margin:0px;
	padding:0px;
	}

/* 5.スペック 文字 */
#table p {
	font-size:80%;
	margin:0px 0px 0px 20px;
	padding:0px;
	}
#table p span {
	font-weight:bold;
	display:inline-block;
	width:150px;
	}

/* 6.参考サイト 文字 */
#table ul {
	margin:5px 0px 0px 15px;
	padding:0px;
	}

jExpand 「CSS装飾」

各箇所の文字の大きさや配置等をCSSで指定しています。
矢印画像をクリック出来るようにしているのも、このCSSでの指定となっています。
矢印画像へのリンクは、サーバーにアップロードした場所を指定して下さい。

また、各タグの先頭文字に記載されている「#table」ですが、これはiExpandを適用させたい表組み毎に、違うものを指定する必要があります。
つまり、表組みが二つあれば、「#tableA」「#tableB」というように違うものを指定しなくてはいけません。
文字自体は任意のもので構いません。

3. HTML
 実際に記述するHTML自体は通常のものと殆ど変更ありません。
ただ、一部CSSを適用するための指定が必要です。
以下が、サンプルのHTMLになります。

<table id="table">
	<tr>
		<th></th>
		<th>製品名</th>
		<th>価格</th>
		<th>詳細</th>
	</tr>
	<tr>
		<td>ビデオカード</td>
		<td>GTX680-DC2T-2GD5</td>
		<td>70,700円</td>
		<td><div class="arrow"></div></td> //空のセルに矢印画像を表示
	</tr>
	<tr> //折りたたみで表示される項目
		<td colspan="4"> //セル何個分を結合するか指定。上記のtdタグの数と同じにする
			<img src="画像URL" alt="画像の説明" /> //右側に表示される画像
			<h4>◯題名1</h4> //左上に表示される題名
			<p><span>"左の項目"</span>"右の項目"</p> //それぞれ左寄せで表示される文字。簡易表組みみたいな感じ。

			<h4>◯題名2</h4> //二つ目に表示される題名
			<ul> //リスト表示
				<li>リスト文字</li>
			</ul>
		</td>
	</tr>
</table>

基本的には通常表組みタグで構成されます。
「table」の後に「id=table」と記載し、前述したCSSを指定するためのidを指定します。
つまり前述のCSSと、ここのidは一緒でなくてはならないわけです。

そして「矢印画像」が入る場所には「div」を追加し、「class=”arrow”」を記載する必要があります。
これで矢印画像がクリック出来るようになり、詳細項目がプルダウンします。

詳細項目は、実はセルが結合されて一つになっているように見えているので、全体のセルの数を「colspan=”セルの数”」とい風に指定する必要があります。
項目は、画像を「img」で、項目名を「h4」で、通常の文字は「p」でくくります。
「p」の中で「span」を指定すると、左寄せの文字で空間を空けて簡易表組みのように出来ます。
同様に「ul」と「li」でリストも使用出来ます。

4. WordPressのカスタマイズ
 jExpandを使用するのに、WordPress側のカスタマイズも必要になります。
ただ、普通の方法で行うとBlog全体に影響してしまうので、jExpandを使用する記事単位などの、影響が最小限になる方法を解説します。

まずは、jExpandで使用するCSSとJavaScriptを任意の記事だけで使用する方法です。
これを実現するためにはWordPressのPluginである「add css js」が必要です。

 add css js

このPluginは、任意の記事に対して、指定したCSSの記述やファイル、JavaScriptの記述やファイルを指定出来るというものです。
これで、他の記事に余計なCSSやJavaScriptが入るのを防ぐ事が出来ます。
インストールは解凍したファイルをWordPressのPluginフォルダに入れるだけです。

さて、インストールが完了しましたら、記事投稿画面の「カスタムフィールド欄」に以下のルールで記述します。

add css jsのルール
名前
css 任意のCSSを記述
cssfile CSSファイルまでのパス
js 任意のJavaScriptを記述
jsfile JavaScriptファイルまでのパス

具体的にjExpandを使用するためには、以下のようにカスタムフィールドに入力します。
 名前:css 値:(前述したCSSを記述)
 名前:js  値:(以下のJavaScriptを記述)

jQuery(document).ready(function()
	{
		jQuery("#table tr:odd").addClass("odd");
		jQuery("#table tr:not(.odd)").hide();
		jQuery("#table tr:first-child").show();
		jQuery("#table tr.odd").click(function()
	{
		if(!$(this).next("tr").hasClass('shown'))
			{
				$(this).next("tr").show()
				$(this).find(".arrow").toggleClass("up");
				$(this).next("tr").addClass("shown");
			}
		else
			{
				$(this).next("tr").hide()
				$(this).find(".arrow").toggleClass("up");
				$(this).next("tr").removeClass("shown");
			}
	});
//jQuery("#table").jExpand();
	});

ここでも「#table」となっている所は、CSSやHTMLで記述したものと揃える必要があります。
もし、二つ以上の表組みを使用したい場合は、CSSやJavaScript、HTMLを改行して、同内容をペーストし、「#table」の部分を違うものに書き換えれば二つ目以降の表組みも機能するはずです。

最後に、jExpandを機能させる重要な「jQuery」を読みこませる設定です。
WordPressには標準でjQueryが搭載されていますが、これを使用するとjExpandが上手く動作しない事が多いです。
ですので、Googleが提供しているjQueryを読みこませる設定をします。
ただし、これをサイト全体で使用してしまうと、他のページで不具合が出る可能性(特に管理画面)があるので、管理画面ではGoogleのは使用しないという設定をします。

以下の記述を、使用しているWordPressのテーマにある「function.php」に追記します。
テーマが変更になった場合は、同様にfunxtion.phpに記述する事を忘れないようにしましょう。

<?php
	// jExpandのために追記
	// 管理画面以外ではデフォルトのjQueryは読み込まずGoogle APIのものを読み込む
	function load_cdn()
		{
			if ( !is_admin() )
				{
					wp_deregister_script('jquery'); // WordPressデフォルトで読み込まれるjQueryをキャンセル
					wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'); // Google APIからmin版の最新のものを読み込んでいる
				}
		}
	add_action('init', 'load_cdn');
?>

以上で、全ての設定は終了です。
jExpandを正常に動いている事を確認しましょう。
かなり専門的な話しになってしまいましたが、自分で色々調べてみたのですが、jExpandを実際に導入する手法が詳しく書いてあるサイトがあまり無かったので、まとめがてら記事にしてみました。
それでは今回はこの辺で!

自作PCでベンチマーク

本日は、先日に引き続き自作PCの話題です。

今回は性能面、つまりベンチマーク中心にお届けしたいと思います。
性能の参考にでもしてください。

以下は、自分の自作PCのスペック環境です。

スペック
マザーボード ASROCK 「Fatal1ty Z77 Professional」
CPU Intel 「Core i7 3770K」
メモリ Corsair 「CMX16GX3M2A1600C11」 16GB (8GB x 2)
ビデオカード ASUS 「GTX680-DC2T-2GD5」
SSD Intel 「SSDSC2CT120A3K5」 (128GB)
電源 Corsair 「CMPSU-750AX」
CPUクーラー Cooler Master 「TPC 812」
OS Microsoft 「Windows 7 Professional 64bit SP1」
ビデオカードドライバー Nvidia 310.80(Beta)

今回試したベンチマークは以下になります。

 ▼Crystal Disk Mark
   HDDやSSD用のベンチマーク。
   データの読み込みや書き込み性能が数値として分かります。

 ▼3DMARK 2011
   3D表現に特化したベンチマーク。
   主に、最新の3D表現の場合でのビデオカードの性能が数値として分かります。

 ▼PSO2 ベンチマーク
   SEGA開発のオンラインゲーム「Phantacy Star Online 2」のベンチマーク。
   主に、少し古めの3D表現の場合でのビデオカードの性能が数値として分かります。

それでは以下にベンチマーク結果を掲載していきます。

◯Crystal Disk Mark
 まずは、OSをインストールしているSSDのベンチマークです。
ソフトウェアの実行速度や、OSの起動速度などを分かることが出来ます。
Crystal Disk Markは、512KBと4KBのデータを、50MB〜4000MBまで読み書きしてストレージの実行速度を調べます。

 ・50MB
   CrystalDiskMark 「50MB」

 ・100MB
   CrystalDiskMark 「100MB」

 ・500MB
   CrystalDiskMark 「500MB」

 ・1000MB
   CrystalDiskMark 「1000MB」

 ・2000MB
   CrystalDiskMark 「2000MB」

 ・4000MB
   CrystalDiskMark 「4000MB」

 さすがSSDです。
読み込みは毎秒300MB以上、書き込みは毎秒130MB以上を安定して出しています。
ベンチマークの容量別に見てみると、基本的には「50MB > 4000MB」の順で性能が下がっていくのですが、4KBの時にその下がり具合が随所に現れています。
つまり、「少ない容量(4KB)のデータを大量(4000MB)に処理する時に性能が落ちやすい」という事になります。
もっと性能の良いSSDの場合は、この4KBの所が安定しているものが多いようです。

◯3DMARK 2011
 続いて、3D性能をベンチマークします。
3DMARKは最新の3D表現に対応しているので、ビデオカードの性能をフルに使用してベンチマークする事が出来ます。

 ・総合スコア
   3DMARK11 「総合スコア」

 ・詳細スコア
   3DMARK11 「詳細スコア」

 比較するものが無いので、何とも言えないのですが、スコアが10000超えているって事は、たぶん相当良い方だと思います。
ちょっと前までのビデオカードだと7000〜8000が多かったようですので。
各グラフィックテストの結果も、30FPS以上出ているので、殆どのゲームで快適に出来ると予想出来ます。
ベンチマークは負荷が高めに出来ているので、普通のゲームですと60FPSは維持出来るんでは無いでしょうか。

◯PSO2 ベンチマーク
 今回試したベンチマークで唯一、実際にゲームがあるPSO2のベンチマークです。
実際にこのビデオカードで、このゲームをプレイした時の基準が分かる事になります。
ベンチマークは以下の設定をしました。

 簡易描画設定:5
 描画(テクスチャ):高解像度
 描画(シェーダー品質):標準 

そして、ウィンドウモードの違いで、以下の2点で試しました。

 1.
  解像度:1920×1200
  ウィンドウモード:フルスクリーン
    PSO2ベンチマーク 「1920x1200 フルスクリーン」

 2.
  解像度:1920×1200
  ウィンドウモード:ウィンドウ
    PSO2ベンチマーク 「1920x1200 ウィンドウ」

 かなり良いスコアが出ました。
PSO2は少し古い3D表現ですので、多くのハードウェアで良いスコアが出やすいです。
ゲームをするには2000〜3000程度のスコアが出れば良いらしいので、20000近くのスコアはトップクラスと言っても良いみたいです。
ウィンドウモードは、やはりフルスクリーンの方が若干良いスコアが出ています。
ただ、自分はフルスクリーンだと、CPU使用率や時間が見れないので、基本ウィンドウモードでプレイしています。
ここまでのスコアだとゲーム中も、この若干のスコアの影響は殆ど無いと言って良いでしょう。

さて、色々ベンチマークしてましたが、いずれも良い結果が出まして、やはり最新のPCのは良いもんだと実感しましたね。
この性能を眠らせることが無いように、フル活用していこうと思います。

これで自作PCの話題は一段落します。
後は使用し続けて、気になった事が見つかりましたら、また記事にしたいと思います。
それでは!
 

自作PCご報告

本日は、購入してから3ヶ月たってからのお知らせになりましたが、購入した自作PCの性能面や問題点などのレビューをメインに記事にします。

自作PC 「全パーツ」

パーツを購入後、組み立ててみたのですが、初めての組み立てという事で結構時間かかりました。
たぶん半日くらい作業していたと思います。

マザーボードにCPU付けて、続けて、CPUファン、メモリを付けた後、ケースにマザーボードを固定しました。
ここまでは順調。
プラスドライバー一本で作業出来るので、思ったより楽でしたね。

次に、電源ユニットを取り付けまして、マザーボードに電源ケーブルを配線。
その後、各ファンケーブルやUSB、ストレージケーブルなどの配線作業をおこないました。
ただ、この配線作業がかなり苦労しました。

電源ユニットからのケーブルや、ケースから出ているファンやUSBケーブル、マザーボード付属のストレージ関係のケーブルなどなど。
とにかくケーブルを何処に付けるのかを確認するのに殆ど時間使っていましたね。

自作PC 「ケース内部」

何とか組み終わって、Windowsをインストール。
さすがのSSDの早さで20分くらいでOS入れ終わります。

それから、普段使用しているフリーウェア類やPSO2のインストールをして、一応使える状態まで持って行きました。
しかし!しばらく使っていると、だんだんPCの調子が悪くなっていきます。

具体的な症状としては、ブルースクリーン連発、WIndows Update失敗などが主なもので、OSのをいくら入れなおしても症状が変わりませんでした。
色々ネットで調べても分からないし、メモリを最低限の一枚にしたり、ビデオカードも抜いたり、余計なドライバー類を入れない状態で試したりと、あらゆる事は試しましたが症状は変わりませんでした。
しかもPSO2にいたっては、インストールしただけでもうブルースクリーン出るし、デュアルディスプレイで使用していると片方赤いディスプレイになるしと、もう分けわからない状態です。
SEGAのサポートに連絡してもデュアルディスプレイはサポートしていないという定形文の返信を貰い、お手上げ状態でした。

もうこうなったら、ハードウェア的な故障しか考えられないという結論に達しました。
ですが、どこが壊れているのか、まずは切り分けをしました。

 ◯メモリを1枚交互にさして検証
   結果:症状変わらず
   結論:メモリは不具合無し

 ◯SSDとHDD両方にOSをインストールして検証
   結果:症状変わらず
   結論:両方不具合無し

以上の検証結果から、これはもうマザボードかCPUくらいしか考えられないという結論をしました。
てことで、さっそくパーツを購入した秋葉のTSUKUMOに各パーツを持って行って診断してもらう事にしました。

症状を伝えると、「メーカーに送って検証後、修理か新品交換」という対応になると言われました。
でもそれだと2週間近くかかるらしいので、少し粘ってもう少しその場で診断してもらいました。
すると、店の在庫とその場で交換してくれるという結論を出して貰える事に!

そこまで急いではいなかったんですが、やはり早く使いたいですからね、嬉しい対応でした。
で、交換してもらったのは、CPU、マザボード、メモリの3点になりました。
一番怪しかったものです。

帰宅後、さっそく組み直してみたら、すっかりブルースクリーンの症状はおさまって、現在も問題なく使えています。

という事で、いきなりつまずいた自作PCだったんですが、原因を見つけ、解決する事が出来たので、凄い勉強になりましたね。
この報告見ると敷居が高いと思われるかもですが、周りに少し詳しい人がいれば、問題無いくらい簡単ですので、新しくPC購入を検討している方は、自作PCも検討してみてはどうでしょう?

さて、組み立ての話しをした今回でしたが、次回は性能面でご報告しようかなと。
各ベンチマーク結果や、ゲームやっている時の環境などですね。
それではまた次回!

Blog更新再開

まただい〜ぶ更新が滞ってしまったんですが、ようやく仕事が落ち着きまして、長期休暇を取る事が出来ている状況です。
良い機会だったので、Blogの方も少し整理しました。

 ・テーマの変更
 ・テーマ変更に伴い記事の不具合修正
 ・Pluginの整理
 ・解説ページの一部を最新の情報に
 ・タグを追加

少しだけですが、以上の内容で修正しました。

テーマは変更しましたが、前回のものと制作されている方が一緒なので、シンプルなテーマとなっています。
前回のはBlogの幅が決められていたのですが、今回から可変幅に対応しています。
後は、テーブル周りとかPlugin周りとかをカスタマイズしていたので、それを新しいテーマに適応して、既存の記事に不具合出ないようにしています。

次に、Pluginの整理です。
TwitterのPluginがバージョン新しくなって不具合が出てしまったので、新しいものに変更しました。
今回は「WP to Twitter」というものを使用しました。
問題無ければ正式に使っていこうと思っています。

解説ページの方は、新しいPCを購入したので、それの情報を追加したくらいです。

タグは、今まではカテゴリーのみの分類をしていたのですが、カテゴリーだけでは分類しにくい記事もあったので、今回からはタグでも整理する事にしました。

Blog部分に関しては以上ですが、これからはもう少し更新間隔を以前に戻して行こうと思います。
サボっちゃいけませんね。
これからの主な記事は、雑記、PSO2、PC関連、動画制作・配信解説、CG関連、などを扱っていこうと思います。
それではまた!