« 2007年8月 | トップページ | 2007年10月 »

2007年9月の6件の記事

2007.09.30

ブラウザに合わせて背景画像が拡大縮小

noscale 最近、Flashの勢いが復活してきたようだ。一時期はSEOに弱いと言われ、Webにとって諸悪の根元のように嫌われていたのだが、映像を取り込むという伝家の宝刀を手に入れたコトによってWeb表現の可能性が飛躍的に上がった。その影響が大きいんだろう。やっぱり見ていて楽しい方が良いからね。
作り手にとっては、技術やセンスが今まで以上に問われるので厳しい時代だが、面白い時代に突入してきたと思ってちょっとワクワクだ。

さて、前置きが長くなってしまいましたが、今回はブラウザのサイズに合わせて背景画像は拡大縮小、しかし、その他の要素は各ポジションを保つというサンプルです。htmlの方でもエラスティックレイアウトという手法が出てきているけれど、ディスプレイ解像度がドンドン高くなっている現在、知ってて損はないスキルだと思います。

→サンプルを新規ウィンドウで開く
→このFlashデータをダウンロードする

下記のサイトに詳しく説明されていますので、一度ご覧ください。
FLASH-JP.COM - フォーラム|背景は画面サイズで可変、メニューは固定にするには

多分、あまりFlashに明るくない方はデータを見ても作り方が分からないと思います。ポイントとしては、背景・メイン画像などの各MCは_rootのフレーム上には置かず、フレームアクションattachMovie();を_rootの1フレーム目に記述して読み込みます。

| | コメント (2) | トラックバック (1)

2007.09.27

Snap Shots でリンク先表示

JavaScriptはサイトで入手|Snap Shots

Snapshots いろいろサイトを見ていると、小さなウィンドウが出現して、リンク先のプレビュー画像が表示するモノがある。
なんでもSnap Shotsというモノらしい。
専用のAjaxライブラリがあるのかな?と思っていたら、Snap Shotsのサイトでいくつかのフォームに答えるとJavaScriptが入手でき、それをHTMLソースにペーストで簡単にできあがってしまう便利な代物だと分かる。
このブログは、ココログのプラスなのでHTMLテンプレートは編集できず、試せないのが残念なのだが、ウチのサイトの制作実績のページで試してみていますので、良かったら見てください。(※近頃リンク先のサムネイル表示というモノがあまり喜ばれていないようなので一旦取り外します。08.04.23)

ちなみに各種設定方法はヘルプ/FAQページに載っています。内部リンクにもSnap Shotsを表示させたり、Snap Shotsを表示させないリンクを作るコトもできます。
さて、最後に1つ重要なコト!
htmlがcharset=Shift_JIS"の場合は、WindowsのIEで表示されませんが、入手したJavaScriptにcharset="utf-8"と追加してあげると問題なく表示されるようになります。
(参考:「RYD-blog」より)

興味のある方は一度試してみるのも面白いかと思います。祈健闘!

| | コメント (0) | トラックバック (0)

2007.09.24

JavaScriptでプルダウンメニュー

ドロップダウンメニュー|DropDownMenu.js

プルダウンメニュー化する方法もいろいろあるみたいですが、今回紹介させてもらうのは、JavaScript + Ajax 実践サンプル集さんのドロップダウンメニューです。
タブの「分割コード」をクリックすると、JavaScript、css、htmlのソースが記述されているので、コピー&ペーストで使えるようになっています。
いままでプルダウンメニューをいろいろと試してみたんですが、ブラウザによる表示のズレもなく、画像も問題なく使えました。何よりいつも使っているJavaScript(画像のロールオーバー時に使用)との相性も良かったので気に入っています。
編集も簡単なのでオススメの一品です。

では、サンプルです。

続きを読む "JavaScriptでプルダウンメニュー"

| | コメント (101) | トラックバック (5)

2007.09.21

なんでも表示できるマルチメディアビューア

マルチメディアビューアで動画を表示(2)

9月号のWeb Designingに載っていたAjaxライブラリ、LightWindowです。
前回も言いましたが、画像イメージだけでなく、Quicktime Movies、Flash、PDFなどもリンクタグだけでスライド表示にするコトができ、非常に便利なライブラリです。
今回は、flvファイルを読み込んだswfファイルのビューアとして使ってみます。

サンプルはこんな感じです。

続きを読む "なんでも表示できるマルチメディアビューア"

| | コメント (5) | トラックバック (1)

2007.09.20

ストリーミングビデオプレイヤー

マルチメディアビューアで動画を表示(1)

よく使うAjaxにlightboxがあります。画像の拡大表示がポップアップウィンドウやFlashを使うより簡単にできるので、よく利用させてもらっています。
ただ、画像の替わりにswfファイルやhtml、動画などを表示できないかと思い、うってつけのAjax、thickboxを試したりも…。
しかし、9月号のWeb Designingにもっと使い勝手の良さそうなAjaxが出ていました。こちらも大変便利なようです。これを使えば、画像データはもちろん、swfファイルや動画ファイル、外部htmlやpdfまでなんでもビューアの中に表示させるコトができてしまう!…世の中、いろいろ便利なモノを作ってくれる人がいて感謝します。
…で、早速使ってみようという訳ですが、今回は動画の表示に絞り、準備段階として動画をFlashで扱えるflvファイルに変換するコトから始めてみます。

flvファイルの作り方、Flashに読み込んでの制御の仕方は右の本に詳しく出ています。まあ、Flash Player7/Flash MX2004の時代の技術ですので、このページでは詳しく説明しませんが、動画をFlashに取り込んで他のmcと同じように扱えるというのは画期的ですよね。
(以前かかわった仕事でサイトのトップページに自社のCM動画を入れたいという案件があって、この方法を提案したんですが理解されず、納入先でwmvファイルを埋め込まれてしまいました。…残念。)
…という訳で、flvファイルを組み込んだ簡単なswfファイルを作ってみました。

サンプルはこんな感じです。

続きを読む "ストリーミングビデオプレイヤー"

| | コメント (0) | トラックバック (1)

2007.09.17

Webサイト作りとは

Webサイトを作るコトは、家を作るコトと似ている。
各ページを適切にマークアップするコトはまさしく図面を描く作業だし、cssでレイアウトを調整するコトは目に見えない配線や配管工事をするコトに似ていると思う。
しかし、tableでレイアウトを整えたり、htmlに直接スタイルを書き込んだり…、僕に言わせるとプレハブの仮設住宅しか作れないのにWebサイトを作っているつもりの輩や会社もまだまだ多い。

見取図とリビングの仕様しか用意してないクセに、「図面と配線・配管工事をやってくれ」、「明日お客さんが見に来たいと言ってるからとりあえず作ってくれ」と無理な注文を言ってくる。
また何か不具合があった時も単に「水が出ないんだけど」としか言わない。台所なのかトイレなのか洗面所・風呂場なのかも分からない。状況が分からないからこっちはすべての水廻りを調べる。するとトイレのウォシュレットの水が出ないコトだったりする。

認識のズレが大きいとお互いストレスを溜めるだけなんだよね。プレハブしか想定できないのならプレハブ専門業者に頼めばいい。こっちは自分の腕一本で仕事している職人のつもりなので、今持っている技術をすべてつぎ込んで作り上げるだけ。

そういう僕もまだまだ勉強不足なので他の人から見ればどう映るか分かったモンじゃないけどね。日々勉強、やっぱりこれしかなさそうだ。

| | コメント (0) | トラックバック (0)

« 2007年8月 | トップページ | 2007年10月 »