月別表示 :: webデザイナーの為のブログ

先日FLASH ActionScript スーパーサンプル集という本を買ったんですがこれが結構良い出来。サンプルに使われている画像や目次などを見ると一見初心者向けかなと思ったんですが、結構濃い内容になっています。

as2.0対応ということなので、本書の多くのサンプルでカスタムクラスを使用しています。単純なサンプルでもあえてカスタムクラスを使用していたりするので、情報を吸収し易いつくりになっています。また、本書冒頭に「早わかりActionScript2.0」というものがあるのですが、クラスメンバーとインスタンスメンバーの違いなどが説明してあって、個人的にこれが案外役に立った。また、サンプルのバリエーションも幅広く、実用的なものばかりなので嬉しい限り。一応、Flash8向けに書かれていますが、Flash MX2004でも十分流用可能ものばかりなので一安心。（ただし、付属のサンプルCDはflash8形式で保存されているのでそれ以下のバージョンだと開けません…）

ただ、本書はあくまでサンプル集なので、オブジェクト指向言語の概念の説明や、各種クラスのメソッドやプロパティの説明はほとんど無いので、事前にある程度オブジェクト指向言語を知っておく必要があります。またメソッドやプロパティを調べるためにリファレンスブックは必須です。（リファレンスブックはActionScriptビジュアル・リファレンスがオススメ。プログラミング初心者には正直キツイですが…）

SOULHEAD待望のベスト盤「BEST OF SOULHEAD」買いました！内容は基本的にシングルコレクション的内容。このアルバムの最大の目玉は初回版のみについてくるPVが収録されたDVDでしょう。DVDではCDと異なるバージョンが収録されていたり、今まで制作された全てのPV（全18曲）が収録されているのでかなり得。というかPVの半分はこのアルバムじゃないと見れないハズ。もちろん最新曲である「Dear Friends」も収録されています。

興味をもたれた方は日本人離れした姉妹の歌唱力を堪能してみてはいかがでしょうか？購入ページで試聴できるので是非参考に！

xhtml+cssでプルダウン式ナビゲーションを作る際、 その部分が他のコンテンツと重なることになるわけだが、 その対象がFlashである場合、ブラウザによっては問題が起こる。 Flashの配置位置はブラウザが勝手に決めてしまい、z-indexプロパティで変更することができない為だ。そこで役に立ちそうな記事を発見。自分もまだ試してないけど、検討してみる価値はあるかも。

• http://www.koikikukan.com/archives/2006/03/17-021717.php
• http://web-conte.com/blue/200610/23_1952.php

以前「宇多田ヒカルと加藤ミリヤって…」という記事を書いたのですが、やっぱ二人の声質は似てるようだ。選曲によっては違いがはっきり分かるが、しっとりとしたバラードだと違いがほとんど分からないかと。

Flavor Of LifePVフルバージョン配信中

試聴は2007/03/08まで

なぜ再びこんなことを記事にしたかといいますと、うちのサイトのアクセスログを解析していたら、「加藤ミリヤ　花より男子」とか「加藤ミリヤ　花男　主題歌」とかで検索してうちに来る人が多かったためです。「宇多田ヒカル　花より男子」で検索してる人のほうが以前は少なかったぐらい。最近は、メディアでも色々と取り上げられているので、加藤ミリヤで検索してくる人は減りましたが。花より男子２の主題歌「Flavor Of Life」は宇多田ヒカルの曲ですよｗにしても、CDジャケットのおにぎりは何だろ？？

土曜の夜１１時頃に、「カワズ君の検索生活」っていう番組がやっているんだけどご存知でしょうか？くりーむしちゅーとかオセロが出てる番組。番組のコンセプトは人気検索キーワードに着目して、それに関連する情報を提供するっていうもの。以前から放送している「爆笑問題の検索ちゃん」と基本的なコンセプトはおなじだけど、カワズ君の検索生活のほうが人気動画やflashなども取り上げているので実用性ありかも。

で、今回取り上げられていた話題で気になったもの。

• パルクール
• オフィちゅラブ
• キリストの絵が浮かんでくるトリックアート

まず「パルクール」。
パルクール（Parkour /しばしばPKと略される）とは、一切の道具を使わず自らの肉体だけで障害を跳び越え、攀じ登り、またその上から飛び降りながら移動するフランスが起源の移動技術体系である。その性質上エクストリームスポーツに分類されることが多い。しかし、パルクールは「Art of movement（移動の芸術）」とも呼ばれ、エクストリームスポーツではないという考え方も存在する。また、スポーツや哲学などの幅広い側面を持っている。パルクールにおける障害物は主に壁やレールなど人工物が多く、その練習は主に都市部で行われる。パルクールの実践者はトレーサー (traceur) と呼ばれる。
この手のパフォーマンスはジャッキーチェンがよくやっているけど、実はフランスが発祥地なのか？？

「オフィちゅラブ」は上司の目を盗んでキスをし、その回数で得点を競うというFlashゲーム。単純明快なゲーム性だけど、デザインが洗練されているので安っぽさを感じさせない作りになっている。自分もFlashを作っているわけだけど、やっぱアイデア勝負の世界なんだなと実感。技術者指向の自分にとっては少々複雑な気持ち。。。この手のゲームなんて1日そこらで作れてしまうわけだし。

そして「キリストの絵が浮かんでくるトリックアート」。これは残像を利用してキリスト見えるというもの。実はこの絵、白黒反転させているだけだったりする。白黒反転させると普通にキリストが表示されます。

また「カワズ君の検索生活」では毎週「泣ける２ちゃんねる」というものを放送中。こちらのサイトで泣ける２ちゃんねる一覧が見れますのでご活用下さい。また、泣ける2ちゃんねるが書籍化されています。現在２冊発売されています。。興味を持たれた人は読んでみてはいかがでしょうか？

web標準に準拠したスマートなXHTML・CSSコーディングをポリシーとしている私ですが、プロとしてやっていくからには理想ばかり追求していられないわけです。XHTML・CSSコーディングはもちろんやりますが、その他にもテーブルレイアウトや、構文的にメチャクチャなページの更新とかもやってます（個人的には修正したいけど、規模が大きいサイトだとそういうわけにもいかないわけで、歯がゆい思いをしてます…）。

新規案件でXHTML・CSSを使いサイト構築する場合でもいろいろと制約が多いんですよね。基本的にはweb標準に準拠したXHTML・CSSコーディングを行うわけなんですが、基本的には背景画像を使用してはいけないなんて決まりがある。背景に指定した部分は印刷されないのがその理由。自分なんかは文字や挿絵が印刷できれば良いので印刷用CSSを作成するのがベストだと思うんですが、一般ユーザーはブラウザの表示まま印刷したいと考えるらしい。そういうわけで、見出しやナビゲーションバーなどもimg要素を使用することに。ま、この方法だとCSS側の指定が減るわけでIE5.0などのブラウザでも安定した表示ができるからターゲットブラウザが多い場合は楽なんだけど。

というわけで、仕事としてXHTML・CSSコーディングをする際のポイント（製作会社のスタイルにもよりますが）こんな感じでしょうか。

• ブラウザ表示のままの印刷に対応させるため背景画像は基本的に使用せず、img要素を使う。
• positionプロパティは印刷に影響与える（safariで確認）ので使用を避ける。
• swfはjavascriptから書き出す（アクティブ化対策）。
• altは画像に表示されているものを忠実に。
• 文言の全角半角統一を確認。

新しい技術は個人的に勉強するしかないかぁ～。。。

Web DesigningでCSS特集なるものをやっていたので、今回は「外部スタイルシートはいくつに分けたほうが良いか？」というお話。

いわゆる、よくあるコーポレートサイトでは合計3つほどCSSファイルを用意すれば十分だと思う。内訳はこんな感じ。

• common.css
  ヘッダー、フッターやタグの初期設定を記述したCSSファイル
• index.css
  TOPページ用CSSファイル
• content.css
  ２階層目以降のページ用CSSファイル

実際に各ページが読み込むのは、common.cssとindex.cssまたはcontent.cssの2つ。（読み込み順はcommon.cssが先にくるようにする）

ヘッダーやフッター、ナビゲーションなどは全てのページに共通する部分が多いためcommon.cssは全てのページに読み込ませる。

index.cssはTOPページ専用CSS。トップページのメイン部分は他のページと大きくデザインやレイアウトが異なる場合が多いため独立させたほうが良い。

content.cssは２階層目以降のページ用CSSファイル。１０ページほどのベーシックなコーポレートサイトではTOPページ以外のページの基本的な構造は共通しているので、１つのCSSファイルでまかなう。ページごとにスタイルを変えたい場合は、各要素にidを指定する。body要素にページごとのidを振ると便利。

少し前までは、フォント用CSS、レイアウト用CSSというように事細かにCSSファイルを分割しているサイトよく見かけたが、かえってメンテナンス性が低下するのでおすすめしない。

また、ページ毎にCSSファイルを用意するのもおすすめしない（特集ページなど独立したデザインの場合は除く）。CSSは複数のページで使いまわすことで、デザインの一元管理ができるわけで、それに加えおのずとデザインが統一されるというメリットもある。

と、ここまで話しましたが、これはあくまで一例です。デザイン要素が少なければ、common.cssだけのほうが良い場合もありますし、サイトの規模が大きくなればカテゴリごとにCSSを分けたほうがいい場合もあります。その他、印刷用CSSや特定のブラウザ用CSSを加えるのも良いと思います。

/*印刷用CSS*/
<link rel="stylesheet" href="print.css" type="text/css" media="print" />


/*IE5用CSS （条件分岐コメントを使用） */
<!--[if  IE 5]>
<link rel="stylesheet" href="ie5.css" type="text/css" />
<![endif]-->

条件分岐コメントは以前は使用を避ける傾向がありましたが、最近は使うサイトが増えてきたように思います。先を見据え、common.cssやindex.cssはハックを一切使わない正しい形式にし、IE5などハックが必要なブラウザには個別にCSSを読み込ませたほうが合理的なためだと思います。必要なくなれば、オーサリングツールで一括置換すれば簡単に取り除けますしね。

いままではナビゲーションボタンを作成する際、img要素を利用しそれをjavascriptでロールオーバー処理していましたが、ここ数年CSSを使ったロールオーバー処理がよく採用されています。その理由として挙げられるのが、手軽さとソースの合理性でしょう。

javascriptを全く使用しないので、html（xhtml）とcssの知識だけで制作可能なので、敷居が比較的低い（最もjavascriptを使用した方法はdreamweaverを使えばもっと簡単なのですが…）。そして、ソースの合理性。文書構造としてみれば、本来メニューにはボタンという概念は必要ないわけです。cssではimg要素を使用しなくてもボタンを作成できるので、xhtmlとcssの本質である文書構造とデザインの分離が可能になるわけです。

ここから本題となるわけですが、”cssでボタンを作成する際ベストな手法”。極論を言えば、ボタンの画像は背景だけ用意しておき、テキストはプレーンな状態がベストです。”display:none”、”text-indent:-9999px”でテキストを消す手法はスパムとして扱われる可能性があるためです。そのためか最近はプレーンなテキストを利用する手法を採用しているサイトを良く見かけます。

しかし、上記のようなデメリットがありつつも、テキストも画像化されたボタンを使いたい人も多いかと思います。では、この場合どの手法を採用するのがベストなのか？個人的には”text-indent:-9999px”でテキストを消す手法がベストだと思います。この手法だと余計なタグを使用しなくて済むからです。それでは実際に簡単な例を紹介。

/*htmlソース*/
<a href="sample.html">ボタン</a>


/*cssソース*/
a {
   display:block;
   width:100px;
   height:25px;
   background-image:url(btn.gif);
   text-indent:-9999px;
   overflow:hidden;
}

この方法が一番シンプルなソースでボタンが作成可能だと思います。簡単に解説しますとdisplay:block;でa要素をブロック要素化し、width、heightプロパティを有効化しています。background-imageで任意の画像を指定。text-indent:-9999px;でテキストを消しています。IEやOperaなどのブラウザではこれで正常に動作するのですが、firefoxではボタンを押した際、余計なアウトラインが表示されてしまいます。ここでoverflow:hidden;と指定してやることで意図する表示になります。

”display:none”を使う手法だと、a要素の中にspan要素を包含し、そのspan要素に対して”display:none”を指定してテキストを消すので、余計なタグを追加する必要があります。また、この方法だと、音声ブラウザでその部分が読み飛ばされるのでオススメできません。

今もっとも人気があるアーティストといっても過言ではない倖田來未ですが、昔からのファンとしてはデビュー当時のテイストのほうが良かったなと。音楽もPVも日本ではあまり見ないタイプだったのでそこに惹かれたわけです。ベスト盤を聴いて知っている人も多いかとは思いますが、あえてデビュー当時の倖田來未を紹介。

まずは倖田來未の原点でもあるデビュー曲「TAKE BAKE」。倖田來未を語るにはかかせない名曲ですね。「secret FIRST CLASS LIMITED LIVE」での演出には鳥肌が立ったｗ。当時18歳とは思えないくらいセクシーな歌声でしたね。実はこの曲が発売されたのは日本より全米が先なんです。

次にセカンドシングルである「Trust your love」。個人的に一番好きな曲。最近倖田來未の曲はほとんど聴かなくなってしまった私ですが、この曲は今でもよく聴きます。倖田來未自身もこの曲が一番好きだと明言しています。振り付けがまたカッコいいんだなぁ。これが。ちなみにこの曲も全米で発売されています。

最後に「so into you」。上記2曲はR＆Bテイストが強かったが、この曲は一般の人にも聴きやすい感じの曲ですかね。幻想的なPVが好きです。

これらの曲に加え、名曲ばかりを収録された1stアルバム「affection (CCCD)」もオススメです。個人的にはやっぱこの頃のテイストが好きだけど、一般うけはしないのかなぁ。。。

flash用コンポーネントGIZMO。仕事で使うかもしれないので、勉強がてら紹介。

GIZMOとはFlashの拡張機能で、今流行りの（？）ウィジェット（ガジェット）を作成することが出来ます。Flashでデスクトップツールを作っても需要無さそうだと思ったけれど、色々と調べてみたら、Flash単体では不可能であるディレクトリの作成やファイルの書き出し機能があるみたいで、本格的なアプリケーションも制作可能かも。ステージサイズの大きなアプリを作ると重いのが難点だけど。

XHTMLとCSSで構築したテンプレート[ view ]を作成してみました。個人・法人・商用かかわらず使用可能です。できれば当サイトにリンクを貼っていただければと思います。定期的にテンプレートの配布を行なう予定なので今後とも宜しくお願いします。

また、配布しているテンプレートの内容は基本的にTOPページのみとさせて頂きます。zipファイル内にfireworks.png（macromedia fireworksで編集可能）を同梱していますので、再編集にお役立て下さい。ちなみに、テンプレートに関するサポートは行っていませんのでご了承下さい。

前回の記事にも取り上げたくわがたツマミですが、ファンに朗報です！

1月19日より全ての作品が公開されることになった模様です。半年くらい前までも常時全話公開していたのですが、それ以降は毎週1話／数話の公開と制限がかけられていました。今回、再び常時全話公開となったので、好きなときに好きな話を見れますね～。嬉しい限りです（´ω｀*）

--追記--
先日、公式サイトがリニューアルされました。それに加え新作も追加されたので要チェックです！