haruka.sugawa

sugar.hacca.jpをリニューアルしました。これまで利用していたテーマは自作のものではなく無償配布サイトからの借り物でしたので、Web制作に携わる者としてどうよ？と思って自作のものに変更しました。ついでに？、開発終了のWordPress MEからWordPress 2.6.2への鞍替えも実施。インポートでつまずくと予想していましたが、スムーズに移行できました。

テーマ名は「highschool」。
なんでかって、このデザインは私が高校2年生（2003年ごろ？）のときに作ったもののリバイバルなのです。当時はwordpressではなくnicky!という日記CGI（といってもトラックバック・コメントも可能かつ、お絵かき掲示板が設置できる優れもの）を利用していました。

自分的に「飽きの来ないシンプルなものができたかもしれない！」と感じて、以来ずっと頭の中にあったので、ソースはとっくに紛失していましたが再構築することに。当時の知り合いで今も私のブログを見てくださってる方がどのくらいいらっしゃるかは分かりませんがｗ、記憶にある方はぜひ、懐かしんでいってください。

さらに、先日某所でエラスティックレイアウトに初挑戦したという文脈もあり、このテーマもまたエラスティックっぽい仕上がりになっています。
最近は効率化のためにPhotoshopでデザインを固めてからコーディングに移るケースが多かったので、今回と某所のものは久しぶりにコーディングを中心に捉えた設計ができて楽しかったです。私はこっちのやり方のほうにずっと慣れ親しんできているので、覚えたての頃のわくわくした興奮がよみがえってくる気がします。

あと何パターンか頭の中にレイアウトを考えているので、追々そちらも形にしたいと思います。

今まで知らなかったのですが、Flashなどを貼り付ける際に使うobjectタグやembedタグには通常状態だとz-indexが効かないようです。
そのため、JavaScript+CSSで表示させているプルダウンメニューがFlashの下にもぐりこんでしまいました。プルダウンメニューはユーザビリティ的にあまりよろしくなさそうなので個人的にはあまり使いたくないもののひとつなのですが、今はそれはさておき。
これを解決するにはobject,embedタグを使うときに一手間かける必要があります。

上記の太字で示した部分を追加することで、z-indexが有効になります。

制作の過程でprototype.jsやjQuery、mootoolsといったJavaScriptライブラリを利用する機会も増えてきました。しかし、調子に乗ってライブラリを複数使うと、なぜかうまく動かなくなった・・・スクリプトにはエラーはないはずなのに・・・ということが出てきます。
というのも、スクリプトを呼び出す際に利用する「$」記号が競合してしまう模様です。私も今回まんまとそれに引っかかった次第です。
調べてみたところ、prototype.jsあるいはmootoolsをjQueryと共有する場合、headタグの中で外部JavaScriptの読み込みを指定するときにjQuery→prototype.jsあるいはmootoolsという順番で記述し、jQueryの読み出しタグ<script type=”text/javascript” src=”js/jquery.js”>
</script>と二つ目のライブラリの読み出しタグ<script type=”text/javascript” src=”js/prototype.js”></script>の間に

という命令を入れ、jQueryで書いたスクリプト本体に登場する「$」記号を「jQuery」に置き換えると、２つのライブラリが競合するのを防ぐことができるようです。

本日のエントリーは以下の記事を参考にさせていただきました。

• jquery.jsとprototype.jsの念願の共存
  http://blog.chibatch.jp/articles/jqueryprototype.html
• mootoolsとjQueryを一緒に使う方法
  http://blog.chibatch.jp/articles/mootoolsjquery.html

Google Chromeの発表が世間を騒がせていますね。私もさっそくインストールして、描画の速さにびっくりしました。男友達のひとりは、「これで広告だらけのアレゲなサイト閲覧が快適になる！」といってうれしそうでした。笑
Chromeにはまだまだプラグインなどもありませんので、私は当分今までどおりFirefoxを使うことになると思いますが、Chromeがブラウザ戦争にどのように波紋を広げるのかが楽しみでもあります。

このように、Web制作にかかわる人にとってFirefoxを欠かせないツールたらしめているのがアドオンの存在なのではないでしょうか。なかでもWeb developerとFirebugのふたつは必携といっても過言ではありません。たぶん。
ただ、、、Firebugのあのアイコンは・・・。一度「昆虫Gに見える」といわれてしまうと、もうそれにしか見えなくなってしまう厄介な存在でした。私の制作はGに支えられているのかぁ・・・と頭によぎると、どうしても「くっ・・・」という複雑な感情にとらわれてしまいます。

すごくどうでもいい長い前フリになりましたが！koress.jpにて、そんな昆虫Gを視界から追い出す方法が紹介されていました。

koress.jp: Firebugの虫アイコンを変更する方法:
http://koress.jp/2008/07/firebug.html

なんて画期的。なんてラブリー。最強です。
さっそく芋虫のアイコンをダウンロードして使わせていただいております。
これで制作がだいぶハッピーなものになる気がします！テンションうなぎのぼり。

koress.jpさんありがとうございました！

しばらく更新が途切れていましたが、相変わらずあれやこれやとやっています。せっかくなので、今日のエントリでは最近取り組んだお仕事をご紹介させていただこうと思います。

• 彩都メディア図書館 コーポレートサイトリニューアル
  http://www.saito-medialib.org/
  アルバイトをさせていただくようになってすぐのころに制作したページをリニューアルしました。
  当時はMovable Typeを使うのも初めてで、とにかくテンプレートデザインへの挑戦ができたことが収穫でしたが、あれから1年経ち、もうちょっとは視野を広げてデザインをすることができるようになったように思います。今回はWordPress2.6で構築しました。WordPress自体のインターフェイスもものすごくリッチなものになっていて、ドッグイヤーをさらに実感しました。
• ピュアハウス甲子園
  http://www.purehouse-koshien.jp/
  知人からの依頼で制作した、ワンルームマンションのプロモーションを目的としたサイトです。
  写真撮影を含むディレクションに挑戦したのは今回が初めてでした。また、本格的なPPC広告でのマーケティングにも初挑戦で、成果を出すWebにするために今も奮闘中です。
  最終的にはメインイメージをFlashにしたり動画を見られるようにする予定です。

ほかにも1件制作中のサイトがあり、こちらは9月中旬ごろ公開予定です。
まだまだ課題も多くありますが、これからも全力投球でやっていきたいと思います！