俺屍２サイトに搭載

サイトに俺屍2のコーナーを作りました。
まーだ改装がぜんぜん進んでないんだけど、プレイ記録でネタバレかましたくて！！
（ブログのほうはネタバレ抑えめにしているので）

改装ではjavascriptを遠慮会釈なく使っています。
他にもいろいろ、モダンブラウザとスマホのことしか考えてないデザインです。
いやー、さすがにXPサポート終了でIE6だの7だのは駆逐されつつあると思うし、
大体、そんなアンティークなブラウザでWebを見るような方々はこんなニッチな辺境サイトに来ないでしょ。
そんなわけです。あしからず。

タッチパネルとの戦い

サイトの改装、第一弾やってみましたが。
PCでは問題ないけど、タッチパネルだとメニューが機能しない…！
やっぱhoverアクションはあきらめようか…
ご飯食べてからjsでなんとかなるかやってみよう。うん。

とりあえず応急処置でトップページにドロップダウンメニューの中身を出してリンク貼っておきました。
根本的な改善にはちょっと時間がかかりそう。

※追記2014/07/14
なんとかなりました。jQuery を導入したサンプルを利用しました。

明日だー

俺屍２の製品版に引き継げる体験版が明日（ていうか日付変わってるから今日の昼）配信です。
新作ほやほやをプレイするなんてずいぶん久しぶりな気がするよ…

でも今わざわざ、サイトの改装作業に追われて倒れそうになってる…
（←何も今やる必要はまったくありません）
引き継ぐつもりでやってるご新規体験版の一族も、まだ黒ズズさんとの連戦がキツい状態だし。

…ま、いっか。
あくまで、やりたいことをやるだけだ。

ぬこなま

某所で○コ生の番組の概要を知ったんだけど…
世間的にはあれくらいのスタンスが標準なんだろうか。

一族の子が要らない子と公言されちゃうなんて、私にも正直なじめないものがある。
リセット縛りなら能力の引きが悪い子とかが出たらその子に合わせて進行を緩めるし、
諸々思い通りにならんのが嫌ならリセット解禁するよ！
セーブするまでは歴史が確定していないからやり直しありだけど、
セーブしちゃったら確定した歴史として受け入れて大事にする。

結論。私も妄想プレイヤーの端くれみたいです。

CSSスプライト

家系図のアイコンがたくさんあるので、読み込み速度低減のためCSSスプライトなる方法を使ってみました。
一般的には、メニューとして使う画像をリンク移動に応じて切り替えたり、ツイッタやFacebookなどのアイコンのように同じページに何度も使われるアイコンをたくさんひとまとめにして読み込んで、必要な箇所に必要な範囲だけ表示するという技術です。

果たしてうちのようなページにそんな技術必要かと言われると疑問符が出ますが、要はやってみたいからやる、そんだけです。（開き直り）

1. アイコンを背景画像としてまとめる
   家系図の顔アイコンを作ります。それを大きな画像にびっしり並べます。画像作成ソフト（うちではFireworks使用）のグリッド機能を使うと楽です。家系図アイコンは大きさが一緒なので後で表示位置の指定を行うのも割と簡単。
2. CSSを書く
   アイコンの数に応じてclass指定を作り、backgroundのURL指定と描画範囲、表示位置の指定などを行います。spanタグなどにつけるため、display属性をblockにしてアイコンの大きさ分の幅と高さを指定します。
   もうちょっとスマートな書き方があるんじゃないかって気はするんですが、とりあえずこれでうまくいったので…
3. HTMLの該当箇所にspanタグ（とりあえず改行無しスペースを中に入れる）を挿入し、それにclass指定で背景画像（アイコン）を表示させます。
   

この方法だと代替テキストaltが使えないので、画像が見える環境専用になってしまうのと、背景画像はデフォルトで印刷されないのが欠点です。
でも今回の場合、アイコン自体に何の機能も無い（本当に絵を表示したいだけ）のと、もとがフリー素材を借りた画像なのでむしろ印刷されたりしないのは再配布防止になるのかも、ということで、この方法でいってみることにしました。

あと、2．のCSSを書くときにちょっとでも間違うと、うまく表示されません。class指定の.（ピリオド）抜けとか、コピペで記述を増やしたあとの修正忘れなどに気をつけたいものです。