Rustでゲーム開発 - 個人的まとめ

この記事は TUT Advent Calendar 2020 5日目の記事です。

豊橋技術科学大学 M1のrekzと申します。普段は研究でテキスト処理とかのプログラムを書きながら,息抜きにゲームとか作ったりしています。
と言うと嘘になるかもしれない。最近はよく寝ています。すぴー

私のお気に入りのプログラミング言語にRustというものがありまして,これがなかなかストイックではありますがうまく使えれば高速で安全で再利用性の高い最強のプログラムが書ける最高のプログラミング言語です(主観)。Rustの技術的詳細についての説明は省きますが,普通のプログラミングに飽きた物好きな人たちが良く使っている言語という印象があります(偏見)。実社会でもパフォーマンスと安全性の両方が重視される分野では採用されていたりしますね。

ゲーム開発でもパフォーマンスは重要だろ!ゲーム開発にこそRustだ!ということで,Rustでゲーム開発を行うためのライブラリや環境の整備が各所で進められています。Rust Game Development Working GroupAre we game yet? といったページでは,Rust製のゲームやライブラリ,教材などの情報がまとめられています。今のところ,UnityやUnreal Engineのような統合開発環境的なゲームエンジンがあるわけではありませんが,ゲーム開発用のクレート(Rustではライブラリをパッケージにしたもののことをクレートと呼びます)は大量に存在しています。以下,私がチラッと触ったことのあるライブラリや注目しているライブラリを少しだけ紹介していきます。

Piston

PistonはRust製ゲーム開発ライブラリとしては昔から存在している老舗のライブラリです。正確には,Pistonというひとつのクレートで機能が完結しているわけではなく,PistonDevelopers organization にあるような大量のクレートから必要な機能を選んで使う感じです。公式には A modular game engine written in Rust と表現されていますね。

特に,ウィンドウの初期化・描画・イベント処理といった基本的な機能をまとめた便利クレートとして piston_window が用意されています。機能としてはクラシックな感じのシンプルなAPIで,メインループをユーザーが書く必要があります。公式のサンプルコードを以下に引用します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
extern crate piston_window;

use piston_window::*;

fn main() {
let mut window: PistonWindow =
WindowSettings::new("Hello Piston!", [640, 480])
.exit_on_esc(true).build().unwrap();
while let Some(event) = window.next() {
window.draw_2d(&event, |context, graphics, _device| {
clear([1.0; 4], graphics);
rectangle([1.0, 0.0, 0.0, 1.0], // red
[0.0, 0.0, 100.0, 100.0],
context.transform,
graphics);
});
}
}

複雑なグラフィック処理やサウンド,ゲームオブジェクト管理などは別途ライブラリを使うか自分で実装します。上記のorganizationなどを探すとPiston用のライブラリが色々あります。とはいえ,ちょっと凝ったことをしようとすると依存関係の深い沼に嵌りやすい印象があるので,あくまで簡単な描画処理を行うための基礎部分として使うのがいいかもしれません。

Amethyst

Amethystは Entity Component System(ECS) モデルを採用したデータ指向設計のRust製ゲームエンジンです。

ECSやデータ指向といった言葉は説明が難しいのですが,最近ではUnityの新しい中核基盤であるDOTSが採用していることで話題になっていたりします。"Unity ECS"などで検索すると解説記事がたくさん出てくるので本記事では詳しく説明しませんが,雑に言うとオブジェクト指向的な考え方とは違った設計を採用することでメモリ効率やプログラムの並列性を向上させることができるというものです。

何を隠そう私はこのECSが大好きで,2年くらい前からAmethystを使ってゲームを作っていたりします。ECSを触りたいだけならUnity DOTSでもいいと言えばいいのですが,Rustはもともと低レベルなメモリ制御ができることやデータとアルゴリズムを分離させる書き方ができることなどから,特にECSと相性が良いと思っています。

また,AmethystはECSエンジンだけでなく,Vulkan/Metalベースの高機能な2D/3Dレンダリングエンジンや,各種入力デバイスからのデータ取得,非同期なアセット読み込み機構など,ゲームエンジンに必要な様々な機能を備えています。ユーザーが書くコードはそこそこ長くなりますがいろいろな設定が可能で,実行状態の管理はAmethystが行います(メインループは書きません)。公式ドキュメントからSystemの記述例の一部を以下に引用します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
struct MakeObjectsFall;

impl<'a> System<'a> for MakeObjectsFall {
type SystemData = (
WriteStorage<'a, Transform>,
ReadStorage<'a, FallingObject>,
);

fn run(&mut self, (mut transforms, falling): Self::SystemData) {
for (transform, _) in (&mut transforms, &falling).join() {
if transform.translation().y > 0.0 {
transform.prepend_translation_y(-0.1);
}
}
}
}

このプログラムではTransformFallingObjectといった型がコンポーネントとして使われていますがこれらは別に定義されます。AmethystではコンポーネントはComponentトレイトを実装した普通の構造体です。Unity DOTSでの書き方と見比べてみると面白いかもしれません。

なお,Amethystバージョン0.15におけるECSエンジンの正体はSpecsというライブラリであり,現在,Legionという別のECSエンジンへの移行作業が進められています。移行が完了するとSystemの記述含め多くのAPIに変更が入る予定です。さらに,Amethystで実装したゲームをブラウザ上で動かすためのWebAssembly/WebGL対応も進められているようです。

ちなみに,最近出てきた別のRust製ECSゲームエンジンとしてBevyがあります。これについてはまだちゃんと触っていないのでよくわかりませんが…。

glow

glowは様々な環境で同じコードでOpenGLを呼び出すためのOpenGL/WebGLバインディングです。

これはゲームエンジンではないです。何らかの方法でウィンドウの初期化を行い,OpenGLのコンテキストを生成した後に使うライブラリで,最大の特徴はWebGLに対応していることです。つまり,ネイティブとウェブ上の両方で同じOpenGLアプリケーションを動作させることができます。

glowを使うためにはまずウィンドウの初期化を行う必要がありますが,これにはwinitなどを使えばOKです(SDL2などでもいいですが,どうせならpure Rustにしたいですよね)。winitはnative/web両対応のウィンドウ初期化ライブラリで,ウィンドウイベントのハンドリングも行うことができます。webの場合は単にcanvas要素をウィンドウとして扱うことができます。nativeの場合はウィンドウを初期化した後にOpenGLのコンテキストを生成しなければならないので,winitにOpenGLコンテキスト生成機能を追加したライブラリであるglutinを代わりに使用します。実際のプログラムは公式のサンプルコードのようになります。初期化とイベントループはターゲットによって切り替えられていますが,OpenGLを叩くコードは共通になっています。

ネイティブ・ウェブ両対応のGUIライブラリはもっと高レベルなものもありますが,ゲーム開発には向いていなかったり,あまりこなれていない気がしたりするので,OpenGLを叩くレベルからコードを書いてもいいならglowは選択肢になると思います。より低レベルなものだとrendywgpu-rsgfx-rsなどがありますが,これらは直接使うためのものではない気がする…。

Nannou

Nannouはクリエイティブ・コーディングのためのRust製フレームワークです。ゲーム開発とはちょっと毛色が違いますが,まあゲーム開発もできるということで紹介します。公式ページにはProcessingやOpenFrameworks,Cinderの影響を受けたと書かれており,最小限のコードでウィンドウを表示できる基本機能や高度なグラフィック処理機能などを備えています。OSC(Open Sound Control)に対応してたりするところもクリエイティブ・コーディング用らしい感じがします。もちろんシェーダーも書けます。

非常に親切な公式ドキュメントがあるのでそれを読むのが手っ取り早いと思いますが,一応最小限のコード例を以下に示します。基本的なAPIの雰囲気が分かるかと思います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
use nannou::prelude::*;

fn main() {
nannou::app(model).update(update).run();
}

struct Model {
_window: window::Id,
}

fn model(app: &App) -> Model {
let _window = app.new_window().view(view).build().unwrap();
Model { _window }
}

fn update(_app: &App, _model: &mut Model, _update: Update) {}

fn view(app: &App, _model: &Model, frame: Frame) {
let draw = app.draw();
draw.background().color(PLUM);
draw.ellipse().color(STEELBLUE);
draw.to_frame(app, &frame).unwrap();
}

内部状態を持たず,時間やマウス入力などの情報だけで各フレームの描画を行う場合は,描画部分のコードだけを記述する「スケッチ」として実装することもできます。

1
2
3
4
5
6
7
8
9
10
11
12
use nannou::prelude::*;

fn main() {
nannou::sketch(view).run()
}

fn view(app: &App, frame: Frame) {
let draw = app.draw();
draw.background().color(PLUM);
draw.ellipse().color(STEELBLUE);
draw.to_frame(app, &frame).unwrap();
}

ぶっちゃけたところ,私は最近このライブラリを知ったのであまり機能を把握していないのですが,使いこなせるようになると便利だと思うので使っていきたいです。


おわりに

遅刻しました。気づいたらなんかそこそこ書いてた。

いい機会なので,去年豊橋技術科学大学コンピュータクラブから頒布したAmethyst製自作ゲーム"Tofu on Fire"をソースコードごと公開しようと思います。しました。こんなゲームです:

頒布したときのバージョンはAmethyst 0.10.0を使っていたんですが,そのあともこっそり最新バージョンに追従したり変な機能を追加したりしています。自己満足!

今年はなんか全然公開できるもの作れてなかったんで来年こそはという気持ちです。それでは。

高専でゲームを作ったりした話

この記事は 苫小牧高専 Advent Calendar 2017 の14日目の記事です。

はじめに

こんにちは。情報工学科5年のrekzです。ネタの仕込みが終わらなかったり頭痛が酷くなったりで投稿が遅れてしまいました。ごめんなさい。

今回は,僕が5年間所属した学科展ネットワークゲーム班で制作したゲームについて話したいと思います。

豆腐戦車,襲来

こんなゲームを作りました。

これは高専祭(学園祭)の出し物として班で協力して作ったゲームで,実際に今年と去年の高専祭でお客さんに遊んでいただいたものです。一応,ネットワークゲーム班ということで,複数台のマシンで対戦することができるオンライン対戦型ゲームとなっています。実際には開発の遅れなどからオフラインで展示したりもしましたが。

で,これが地味にお客さんから好評で(本当か?),ぱっと見クソゲーだけど微妙にハマる,というような評価をちょいちょいいただきました。

僕は今年で高専を卒業するはずなので,来年度からの活動については申し訳ないくらい優秀な後輩たちに任せたいところなんですがそれはそれとして,自分達が作り始めたゲームの開発にはもう関われないのかーそうなのかーと思うところも多少ありまして。まあ豆腐戦車なんかは来年度以降もきっと展示されると思うのですが,それでも高専祭でしか遊べないっていうのはちょっともったいない気がしていました。クソゲーだけど。

というわけで(?),豆腐戦車のオフライン限定版を公開することにしました。

豆腐戦車

↑からダウンロードできます。

ゲームの内容についてはまあ,ここでは深くは語りません。やればわかります。クソゲーです。

なぜオフライン限定なのかというと,オンライン版を公開するとバグとかが心配なのもありますが,一番はやはり実際に高専祭に来てオンライン版を遊んでほしいという思いがあります。クソゲーだけど。
いや,素がクソゲーでも対戦ゲームになるとなんでも面白くなるっていう現象があって……

豆腐製作秘話?

クソゲーではありますが,これでも製作開始から展示版完成までの間には色々ありました。

僕は学科展ネットワークゲーム班に一年生の時から所属していましたが,当初は先代から代々受け継がれた秘伝のゲーム「電脳戦士サバトマン」を展示するだけ~みたいな感じでした(余談ですがサバトマンは今でも展示し続けていて,毎年これを遊びに来る熱狂的なファンも僅かに存在するようです)。

それから,僕が三年生の時に紆余曲折あってネットワークゲーム班の班長になりまして,どうせならなんかやったろうと思って新規ゲームの開発を始めようとしました。ただしUnityを学内マシンに導入してもらうも学内プロキシに阻まれ,ろくに活動できずに結局サバトマン班になりました。班員には色々と迷惑をかけた気がします。ごめんちゃい。サバトマンは偉大……サバトマン万歳……

僕が四年生の時も班長でしたが,この年の初めの活動で豆腐戦車のアイデアが出た気がします(自分が出したような気もする)。Unityを諦めてC#とDXライブラリを用いて開発を始め(余談ですがサバトマンはC++とDxlib製で俺には読めない),なんとか高専祭ではオフライン限定で展示することができました。
この年も班員には多大なるご迷惑をお掛けしたような気がします。集まって活動する日をほとんど設けなかったせいで,高専祭の前日にひたすらゴリゴリと作業する羽目になったり,でもそれ以上に申し訳ないのは班員が豆腐戦車のために書いてくれたコードを修正してもらう時間がなかったせいで結局僕が書き直してしまったことです。ごめんなさい。プログラムについては殆ど僕が書いた感じになってしまいました。

なんか謝罪記事めいてきましたが,今年の活動では班長を後輩に託したので,色々と楽でした。僕は黙々と豆腐戦車のオンライン対応を進めていました。後輩たちはUnityを何とか動かして新規プロジェクトの開発を始め,しっかりした役割分担の上で計画的に作業を進めていました。去年一昨年とは比べ物にならないくらい見事なチーム開発だったと思います。すごい 天才

さいごに

ぶっちゃけると,今回のACで豆腐戦車を公開しようというのはただの思い付きだったんですが,ついでにネットワークゲーム班での活動について思い返してみると色々ありましたね。

もともと五年前のネットワークゲーム班は殆ど動いていなくて,正直僕もやる気はあまりなかったんですが,ここ1~2年の活動で頑張ってゲーム作ったりお客さんに喜んでもらったりしたのを思うと,ゲーム作ってよかったなあと思いますね。僕が作ったのはクソゲーですが。

実際に高専祭に来て豆腐戦車を遊んでくれる人がこの記事で一人でも増えると嬉しいです。が,それ以上に,今年から後輩が頑張って作っているレースゲームのほうも遊んでくれる人が増えるともっと嬉しいです。

おまけ

去年の開発中のようす

自作曲の高音質版を公開したり

ブログ久しぶり過ぎる


以前からSoundCloudにアップロードしていた自作曲について,高音質版を別途アップロードすることにしました。
OneDriveにflac形式で突っ込んであります↓

ファイル保管所 - OneDrive

SoundCloudって無料アカウントだとけっこう音質が悪くて高音が潰れやすくて,ハイハットとか明らかに別の音になったりする。ジャリジャリ
でもその音源だけを聴いているとそうそう気づくことも無いもので,この前研究室の友人に自作曲の高音質音源を聴かせたらびっくりされたんで,それならまあ高音質版も上げるかという話の流れ。


というかしばらく曲を上げてなくてだいぶアレだなあ。今年中にあと一曲ぐらいは作って公開したい。

とりあえず,こないだTwitterに投げた習作を置いて誤魔化す(´・_・`)

Windows上でVimやUnixコマンドが使えるコンパクトな環境の構築

この記事は 苫小牧高専 Advent Calendar 2016 の17日目の記事です。

はじめに

ネットワークスペシャリスト試験落ちました。rekzです。

この記事は苫小牧高専ACの記事ですが,テーマは自由ということなので,今回は制限されたWindows環境でVimとかをいい感じに動かす方法について書きたいと思います。

今更Vimネタかよっていうツッコミは無しで……

TeraPadを使うことを強いられているんだ

(TeraPadは話の大筋とは関係ないです)

苫小牧高専にあるクライアントマシンは,そのほとんど(全て?)がWindowsマシンです。情報工学科の中にあるPCや全学生が使えるPCなど色々ありますが,どれもWindowsの,それも移動プロファイル環境になっています。普通ですね。

ここで問題になるのが,エディタ環境です。クライアントにはエディタはTeraPadしかインストールされておらず,Cygwinも使えますがエディタはemacsの古いバージョンしかありません。Unix系サーバー(LinuxとかBSDとか…)にログインすればVimが使えますが,いちいちvimrcを持っていくのも面倒ですし,そもそもクライアント内にあるファイルの編集はどうしたらいいんだという問題があります。

というわけで,管理者権限のないWindows環境で,移動プロファイルを考慮したコンパクトな構成でVimを動かす環境を考えました。

(容量を気にしないならMSYS2使うのが一番いいと思います)

WindowsでVim

要するにKaoriYa版Vimを使えという話なんですが……

vimrcファイルは基本的に環境変数HOMEで指定されたディレクトリに置きます。しかし,Windows環境だと環境変数HOMEの値は割とまちまちです。特にCygwin環境だと謎な場所が指定されていることがよくある気がします。

というわけで,Vimのバイナリと設定ファイルを近いところに置くコンパクトな構成を考えよう,というのが今回のアイデアです。 (追記)ぶっちゃけVimと同じディレクトリにvimrcを置けば解決なんですが,次に紹介するBusyBoxとか拡張性とかを考えて,小さなUnix互換環境のようなものを作ってみよう,というのが今回のアイデアということにします。


何はともあれ,新しくディレクトリを作ります。とりあえずディレクトリ名はTomoriNaoにしました。このディレクトリを仮想的なホームディレクトリにします。

この中にKaoriYa版Vimのバイナリを突っ込みます。ダウンロードは以下から。

Vim — KaoriYa

さらに,シェル起動用のバッチファイル(start.cmd)を作ります。必要に応じてVimの設定ファイルも。こんな感じ。

start.cmdの内容:

1
2
3
set HOME=%CD%
set PATH=%PATH%;%HOME%\vim80-kaoriya-win32
cmd

start.cmdがやっていることは以下の通りです。

  1. ホームディレクトリをスクリプト実行時のカレントディレクトリ(start.cmdがある所)に設定する
  2. VimがあるディレクトリにPATHを通す
  3. コマンドプロンプトを実行

start.cmdを直接実行すると,いい感じに環境変数が設定されたコマンドプロンプトが起動します。ここでvimもしくはgvimを実行すると,ちゃんと.vimrcや.gvimrcの設定が適用されることが確認できるはずです。やったね。

注意点としては,start.cmdは必ず直接実行する必要があります。他のプログラムやシェルから実行すると,カレントディレクトリが変わっておかしなことになる恐れがあります。

WindowsでUnixコマンド

これでひとまずVimを動かすという目標は達成できましたが,どうせならもっといい感じの環境にしたいですよね。

特に,このままではコマンドプロンプトを使うことを強いられていて精神衛生上よろしくないです(Vimですべての操作を行うなら関係ないですが……)。せめてUnix風のコマンドを使わせて欲しい感じです。lsコマンドを使いたいだけなら,ls.cmdなるファイルを用意(中身は dir %1)するという方法もありますが,ここではbusybox-w32というソフトウェアを使ってUnixコマンドを使う方法を紹介します。

BusyBoxは,主要なUnixコマンドを一つのバイナリに詰め込んだ軽量なソフトウェアで,もともとは組み込みのLinuxなどで使われる事が多いようです。そのBusyBoxをWindowsで動作するようにしたものがbusybox-w32です。以下のリンクの下の方にあるbusybox.exeからダウンロードできます。超軽いです。

busybox-w32

このbusybox.exeもTomoriNaoディレクトリに置きます。ついでに実行ファイルをbinディレクトリにまとめてみました。

start.cmdの内容:

1
2
3
4
set HOME=%CD%
set PATH=%PATH%;%HOME%\bin\vim80-kaoriya-win32
set PATH=%PATH%;%HOME%\bin
busybox bash

Unixっぽい環境が使えるようになりました。

ただし,上記したstart.cmdでは busybox bash というようにあたかもbashを起動しているような感じになっていますが,その実体は実はbashではなくashという軽量なシェルっぽいです(詳しく調べてませんが)。ちゃんとしたbashを使いたい場合は諦めてMSYS2などの高機能なUnix風環境を使いましょう。今回は移動プロファイル環境を考慮して,ファイルサイズの小さいbusybox-w32を選びました。

さいごに

お約束ですが,この記事を参考にする場合は自己責任でお願いします。(ぶっちゃけ共有PCではあまり変なことしないほうがいいと思います)

次回の苫小牧高専 Advent Calendar 2016の記事は cueikusuta さん担当です。よろしくお願いします。


追記(2016/12/18 2:41)

ネタが無ぇ~~~~アッッ思いついた!って感じで勢いで書いてから気づいたけど,Vimの設定ファイルを読み込ませるだけならVimと同じディレクトリに_vimrcを置けば読み込むっぽいな?

まあ,自分で$HOMEを設定しておけば他のコマンドを追加したり設定ファイルを追加するときも都合がいいよねってことで,無理やり訂正しました ガハハ

p(´・_・`)q

この記事は ぱくとま Advent Calendar 2016 の7日目の記事です。

前回は potato4d さんの ぱくとまとクソの関係性について です。


始めになんですが,このブログの更新がもう10ヶ月近く途絶えた感じになってしまっていてとてもつらいです。

ぱくとまのブログ ですら毎月更新していることを考えると断腸の思いです。なんてこった。

プロコン

僕とぱくとまは今年・昨年・一昨年と3年連続で高専プログラミングコンテストに出場してきたので,その話をします。

一昨年

僕とぱくとまとホモメイドで初参加した年です。会場は一関でした。
このときのぱくとまは,画像処理とかでそれなりに貢献してました。
その後蒸し焼きにされました。

去年

この年も不穏な3人組でした。会場は長野でした。
ぱくとまは仕事したようなしてないような微妙な感じでした。多少は仕事してたような気がします。
ただしホテルのスリッパを履いたまま会場に来たのでダメです。

今年

僕とぱくとまで参加しました。地獄か。会場は伊勢でした。
ぱくとまは仕事しませんでした。

ぱくとま in 伊勢神宮


何書けばいいんだこれ?

とりあえず,僕が今までに加工したぱくとま画像をまとめて置いておくことにします。

明日は mktakuya さんです。強そう。

それでは。

新生jprekz.xyz

めっちゃ久々の更新,つらい

…|^・ω・)/  … … …

このブログを構築するCMSをMovable TypeからHexoに移行した。HexoはCMSというより静的サイトジェネレータだけど。
ついでにサーバーもロリポップからGitHub Pagesに移行。これでデータをgitで管理できるうえに静的サイトなのでセキュリティ的にもよろしい。安心感が違うぜ

ブログのデザインは,去年の今頃作ったこのデザインが割と気に入っているのでそのまま続投した。といっても,Movable TypeのテーマとHexoのテーマに互換性はあるはずがないので,自分でゴリゴリと書き直した。元々のテーマが自作なので,ササッと書き直せるかなーと思ってたけど,結局のところ作業に丸三日掛かった。誰だこんなコードを書いた奴は(´・_・`)

移行に当たってのトラブルを最小限にするため,個別記事のパーマリンク(URL)を変えないようにしたりはしたけど,めんどくさいところは色々妥協した。CSSにベンダープレフィックスを付けるのも止めたので,さらに閲覧できるブラウザが減った。対応は苦情が来たら考える()


高専特有の長い春休みに入ったはいいものの,やりたいことがあまり進んでいない気がする。何か作ったものといえばひなまつりリミックスくらいか(´・_・`)

そういえば,去年の末に一曲作ってたんでそれ貼っておきます リミックスだけど

あと,基本情報技術者試験に受かったりBMSの発狂初段に受かったりしてたけど,ブログの更新をサボっていたので書いてなかった。つらいね

BMS段位 通常十段

やったぜ。

またしても1年以上かかったけどな!


ここ数週間のうちにプロコンとか高専祭とか基本情報技術者試験とか色々あったけど, このブログは全然更新してなかったので, 後で少しくらいは何か書き残しておきたい。

後で(フラグ)

めうになりそう(n回目)

夏休み中の進捗報告!デデン

曲作った:

製作期間2日間, 総トラック数14トラック。REAPER5のスキンが気に入ったから作った(?)

夏休み中の進捗報告, 以上!デデドン

夏休み中にプロコンのコード書いたり学校のアレコレでコード書いたりしないとアレなんだけど, 一向に手がつかない。めうになりそう(´・_・`)

サイトいじった

このブログのアドレスとサイト名を変更しました。その名もjprekz.xyz やったぜ独自ドメイン
ブクマとかしてる人は更新をお願いします…といっても今までのアドレスもまだ生きてるんだけれども。

今まではロリポップサーバーのドメインを使っていたんだけど, なんかダサいし, もしサーバー移転することになった時にはアドレスが変わることになるし, あとxyzドメインが期間限定で安かったので(重要), さっさと独自ドメインを取ってそれに変更した。ついでにサイト名も変更した。完璧。

あと, サイト名の rekz’s website の部分

どっちでもいいんだよね…? (あとから不安になるパターン)

あ, どうでもいいけどムームードメインではウェブマネーカードが使えることを確認したので, ドメイン取りたい人はご参考までに(?)
地味に使えないところ多いんだよね, wmカード

ひと目で、尋常でないCSSだと見抜いたよ

サイトちょっと新しくしました(´・_・`)

ってことで, この前の記事で言っていたようにHTML5 + CSS3ベースになった。bootstrapはなんか気に食わなくなってきたので排除, 自分でCSSを書いた。流石に生のCSSをバリバリ書くのはつらみがあったので, CSSプリプロセッサとしてLessを採用してみた。

Movable Typeのテンプレートもそれに合わせてHTML5仕様で書き直し, できるだけシンプルになるようにしてみた。idやclassの記述も最低限にしたつもり。あんまりシンプルにしすぎてもあれだけど, bootstrapみたいにいちいちclassつけるのもHTMLが汚くなる感じがして嫌だなあ(´・_・`)

CSSを書くにあたって, CSS3の便利そうな新機能は躊躇せず使いまくった。特にFlexible boxはほんとつよいと思う。コレがなかったら脱cssフレームワークしようと思ってなかっただろう…

こういう新機能使うと対応ブラウザとかベンダープレフィックスとかが絡んでくるんだけど, 今回はChromeとFirefoxの最新バージョン, あと一応IE11ぐらいしか対応する気はなかったので好き放題にやった。念のため, 最終的に吐き出されるCSSには自動でベンダープレフィックスをつけてくれるツールを適用してあるけど, さっきAndroid4.1内臓ブラウザで見たら見事にぶっ壊れてた。あとOpera miniとかIE9以下とかひどいことになってると思う。個人ブログなんでそのへんを深く考える気はない。

あと, WebフォントとしてWebKoruriを採用してみた。このKoruriというフォント, Windowsでもアンチエイリアスが掛かるようになったと聞いて, あともともとちょっと気になっていたフォントでもあったのでササッと使ってみた。とても良い。どうしてもwebフォントを使うとページのロード時間が長くなったりするけど, そのへんは全く考えていない。良いものは良いのだ