2013年04月12日(金)
実は3月から生活環境が変わって、これまでよりも自分の時間を取れるようになりました。体力の追いつかない多忙な日々よ、さようなら。というわけで、長いことメールフォームやらTwitterやらで体調を気遣われまくる日々を送っていましたが、最近は割と平和な日々を過ごしています。
そんな平和なはずの日々に切羽つまりながら制作していた今回のM3新作が、こちら！
ばーん！
特設サイトにも書いたのですが、今回は以前参加していた個人の方主催のゲームのシナリオをモチーフにしていて、元ネタが大変個人的なものだったので自分でできる範囲のことは自分で手がけて作りたいなあ、と。
前回の「そらもよう」も「初めて作るから流れを把握するためにできるだけ自分でやろうプロジェクト」だったので、あんまり事態が変わっていない気もするのですけれども。
でも、今回は、前回よりも色んな部分を自力でどうにかしてみました。ソフトや教本を買ってきたり、webで検索してみたり、使い慣れないペンタブも買ってみたり、このひと月でこれまでやったことのないことにたくさんチャレンジしたので頭のなかから学んだ事がどんどん抜けていきそうです。
自分の備忘録がてら、参考にさせていただいたサイト様のリンクをぺたり。
【mix関係】
・がるばにっくなけり
Audacityでリップノイズを除去することをこちらのサイト様で知りました。
・朗読オーレ！ 別館
こちらもノイズ除去の参考に。波形の画像など上のサイト様より詳しめに解説されています。
リップノイズの除去は地味に達成感があって面白かったです。
【印刷物関係】
・Painter@Wiki
使い方の分からないPainterの機能を学ぶのにお世話になりました。ペンタブについてくる廉価版のソフトだと使えない機能があったりしますが…。
・CG背景講座 BLANK COIN
こちらもペンタブについてくる廉価版（以下略）ですが空気遠近法の考え方とかめちゃくちゃ参考になりました。ここを見ながら背景描くの楽しい。
CDのバックインレイのイラストの背景部分はこちらのサイトを参考にさせて頂きました。
【webデザイン関係】
つい最近まで作業してたからか、今回web関係一番頑張ったんじゃないかなという気がしなくもない。（実際はまんべんなく頑張っています）
azure studio webを作るときにcssのリファレンス本買った程度の私が下記を参考してあの特設サイト作れたよ、という内容なので、私みたいなよくわからない人がサイト作る時の参考にもなればいい。
・NEO HIMEISM
今回お世話になった素材サイト様。こちらのサイトのすごいなと思うところは、同人音楽サイト向けの素材まで用意されているところ。あんまり素材サイト見ないけど「Discography」のメニューボタン配布されているところは初めて出会いました……。
後述の理由で全体的にカスタマイズを加えさせていただいたのですが、CSSのソースがとてもわかり易く整理されていてものすごく助かりました。
前回「そらもよう」のサイトを作るときも思ったのですが、きれいに整理されているCSSはカスタマイズしていてとても勉強になります。
・HTMLもCSSも書換不要！気持ちいいスクロール
サイト内リンクをぬるっと動かしたいなあと思って、こちらのjavascriptを使用。javascriptは全く理解できないので解説記事があるとても助かります。
あと画像のフェード表示に「jquery.cycle.all.js」というjQueryを使用したのだけど、どこのサイトを見たか忘れてしまいました。同じくよくわからないのでサイトの例文コピペでほぼそのまま使用してしまいましたが、なんだか高機能なもののようです。
jQueryそのものはTwitterのウィジェットをサイトに設置するとき使用せざるを得なくなって以前ちらっと調べたのですが、その時はこちらのサイト様を参考にさせて頂きました。
・7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
・CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
さて、ここから先は私も勉強中の項目なので更に何がなんだかよくわからない内容のご紹介になりますよ。
上記素材サイト様のテンプレートをカスタマイズした際、ヘッダーとメニューの箱を{ position:fixed }にしてしまったせいで、画面の小さなブラウザやスマホ（というか私の手持ちのiPod touch）で表示した時にとんでもなく見栄えが悪くなる事案が発生しました。
webデザインについては素人なので、あんまりできることは多くありませんと日頃開き直っているのですが、自分がよく見る環境でしょんぼりな見栄えなので芳しくない。でも{ position:fixed }は解除したくない。
というわけで、最近なんだか耳にする機会が増えてきたレスポンシブデザインなるものに挑戦してみました。
・レスポンシブWebデザインにする為に行った事のまとめ
基本的にはこちらのブログを参照させて頂きました。こちらからリンクが貼られている参考記事とかこちらのブログの他の記事もめちゃくちゃ読みました。
今回の特設サイトではメディアクエリなるものを使用して画面サイズによってデザインを切り替えています。具体的にはブラウザの横幅750px。テンプレートが横幅750px固定だったので、スマホでなくてもブラウザのサイズを変えた時にデザインが変わるようにしたかったのです。
ただこちらの記事ではIE対応について触れられていなかったので、アップする直前でメディアクエリがIE8以下では非対応だったことが判明。泣きました。（アップする直前までIEで見られるかチェックしなかった私が悪いのですが）
調べるとIE8にメディアクエリを読みこませるためには「css3-mediaqueries.js」というのを使えばいいらしいのですね。Google先生が魔法の呪文付きで公開されています。そのままヘッダーにコピペ。あら動かない。
そこでこちら。
・css3-mediaqueries.jsが効かなくて困った時のまとめ
・Media QueriesがIE8で効かない場合の対処法
最初外部スタイルシートを複数用意して、link要素のmedia属性で振り分けてたんですが、@media規則で指定しないといけなかったのでこの時点で外部スタイルシートまるごと編集しなおしになりました。この作業が一番泣いた……。
素材サイト様のテンプレートのCSSがとてもわかり易かったのでなんとかなったのですが、自分で書いた「とにかく見られればいい」ごちゃごちゃしたCSSだったら途中でぶん投げてたと思います。
ただ、今思い返すと外部スタイルシートへのリンクはmedia属性抜きにしてそのまま貼って、外部CSSをまるごと@media規則で囲っちゃえばよかったのではという気がしています。よくわからない人が色々やろうとするとこういうつまづき方をします。
で、ここまで対応してもIEはうんともすんとも言わないのですが、それは試しにサーバーにアップロードしたら解決しました。「css3-mediaqueries.js」はローカルでは動かないのかな。それに気付くまでに3時間くらいかかってやっぱり泣きましたがともあれ解決。
こんな感じで今現在はIE8以下でもスマホでもだいたい問題なく見られているのではないかな、と。
色々調べているうちに、azure studio webや無名の群れのサイトの方も作り直したいなーというやる気が芽生えて来なくもなかったのですが、IEの対応をしているうちにやる気がしぼみました。手探りのIE対応はとても疲れた……。
でも折角覚えたことなので少しは活用してみたいですねー。サイト全体作り変えるのとっても大変そうですが！
何故私はこんな興味のある方にしか伝わらないジャンルについて素人知識で熱く語っているのだろうか。自問自答したくなりました。
なんだかんだと元気に生きています。
M3は4/29です。CD作り頑張ったのでご興味ある方は是非ぜひ遊びに来てくださいね！