Archive for 2月, 2007

このページの目次

長いURLを強制改行(折り返し)するJavascript

水曜日, 2月 28th, 2007

こんにちは、なかわけです。

今日は仕事中にすごいいい情報を手に入れました。今日1日の価値はかなり高いです。

ウェブデザイナーのほとんどの人が悩んだことがあるんじゃないでしょうか。長いURLを表示したときにレイアウトが崩れてしまう症状。ほぼ全てのブラウザでレイアウトを崩す長いURLですが、今日イチバンいいと思われる回避策を発見しました。

行う作業はIE用の処理とそれ以外のブラウザ(Gecko系)用の処理の2つです。

まず、IE用の処理としてIE独自のCSSプロパティ word-break を設定します。html全体もしくは適応箇所に

word-break:break-all;

を設定すれば、親要素の幅内で自動的に改行(折り返し)してくれます。(IE独自のCSSプロパティというところがシャクな気がしますがこれがもっとも簡単安定したものと思います)

次にGecko系用の処理ですが、これがすごい!サーバにアップしてリンクするだけでできちゃうJavascriptがあったんです。書いてくれた人に感謝。サンプルも公開されてます。詳しい分かりやすい説明は小粋空間さんのページに紹介されてますので簡単に説明しますが、url_breaker_plus.user.jsというJavascriptファイルをダウンロード、自分のサーバにアップロードして適応したいページの<html>の直前に

<script src=”url_breaker_plus.user.js” type=”text/javascript”> </script>

と挿入するだけ。とても簡単。

ただ1点うまくケースを発見しました。それは、長いURLが<table>内に含まれるときにこのJavascriptが無効化されてしまいます。たぶん、table要素が特殊なためJavascriptでうまく処理されないものと思われます。
なかわけが考えた対処法としましては、長いURLの親要素の<td>に

display:block;

とスタイルをつけてあげればうまく処理されます。

この今日の発見によりいままで悩んでたレイアウト崩れが全て解決されました。あーうれし。あー今日はもう満足。

FlashにPhotoshopファイルを読み込み

金曜日, 2月 23rd, 2007

こんにちは、なかわけです。

またFlashネタです。背景が透けてる(透過)画像をFlashで動かしたいときの話。

透過gifを使うと画像のふちにジャギー(ギザギザ)が見えてしまったり、画像をパスでなぞってマスクをつくるのが面倒くさかったり・・・。そんなときはPhotoshopファイルをそのまま読み込みます。

画像の処理はFlash上でするよりいくらか加工しやすいのでPhotoshopで行って、くり抜きたい画像を作ってそれをpsd形式で保存(このとき背景レイヤーは削除しておきます)。それをそのままFlashで読み込みとすれば、レイヤーを保持したまま透過した画像が読み込めます。あー便利。

このときに注意!読み込むpsdファイルがネットワークサーバーなど、作業中のパソコン以外の中にある場合エラーが発生して読み込みに失敗します。対策としては作業中のパソコンにpsdファイルをコピーするというそのままの方法で解決します。

あー、ちょっと悩んじゃったよ。『FLV書き出しについてのバグ』のバグと同じだったよ。しょぼん。

FlashPlayerのアンインストール

木曜日, 2月 22nd, 2007

こんにちは、なかわけです。

先日の『FlashPlayerのダウングレード』の話の続き。

FlashPlayerの旧バージョンを手に入れてもそのままダウングレードできないことがあります。windowsの場合、コントロールパネルから、プログラムの削除としてもうまくブラウザのプラグインまで削除されないのです。Macintoshの場合はlibraryのpreference(だったかな?)から削除すればたぶん削除できます。

でも、わからん!という人も多いと思うし、いちいちめんどくさい。で、調べてみたら、英語版だったけどAdobe社さん(旧macromediaさん)がアンインストーラを配ってました。

▼英語版FlashPlayerアンインストーラ
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14157

英語版ではありますが、英語読めなくても使えます。大丈夫。知っておくと便利。持っておくと便利。

IEのCSSバグ「これはなにハック?」の続き

水曜日, 2月 21st, 2007

こんにちは、なかわけです。

先日の『IEのCSSバグ「これはなにハック?」』の原因がわかりました。やっぱりこれです。

文字コード!!!

ちゃんとhtmlファイルと同じ文字コードで(このときはEUC-JPでした)で保存すれば大丈夫でした。

はー。かなり苦しめられます、こいつに。そもそもこのサイト「oops!nakawake」も文字コード処理がうまくできてなくて時折文字化けするし。文字化けさんには気ぃ使うわ~。

FlashPlayerのダウングレード

木曜日, 2月 15th, 2007

こんにちは、なかわけです。

今日はFlashPlayerのダウングレードの話。
ウェブデザインをしていると動作確認のためにFlashPlayerが必要なときがあります。
お客さんから「Flashが見れないんですけど~・・・」と言われても「アップグレードしてください」とはなかなか言えず、「すいません。」のときが多いハズ。
一回アップグレードしちゃったFlashPlayerはダウングレードできないのかな~といままで思ってましたが、実は古いFlashPlayerがアーカイブとして取ってあったんですね、macromediaさんのサイトに。

▼コレがそのFlashPlayerのアーカイブのURL
http://www.macromedia.com/support/flash/ts/documents/oldplayers.htm

いやいや、偶然見つけてラッキー☆(←死語)でしたよ。知らない人結構いるんじゃない?
FlashPlayerのダウングレード、試してみてください。

Javascriptの読まれるタイミングと実行のタイミング

日曜日, 2月 11th, 2007

こんにちは、なかわけです。

昨日、仕事で発見した(というか仲間と話してて見つけた)Javascriptの話。

まずなかわけは、とあるページを制作していてチェックボックスにチェックを入れた後にページを更新するとチェックが残っていることに気が付きました。そのとき作っていたページの仕様上チェックが残っているのがまずかったので、更新したときにはチェックが外れるようにしようとJavascriptを書きました。

最初に書いたのは下のような感じ・・・

▼HTML側

<html>
<head>

<script type="text/javascript" language="JavaScript" src="file.js"> </script>

</head>
<body>

<input type="checkbox" id="CheckBox">

▼外部Javascriptファイル

document.getElementById(“CheckBox”).checked = false;

簡単な解説をしますと、htmlファイルが外部のJavascriptファイルと読み込んでいて、そのJavascriptファイルには、htmlファイルに書いてあるチェックボックスをfalse(外せ!)と書いていたんですが、うまく動きませんでした。
その後近くの仲間となんでかね?と話していながら解決した書き方がしたみたいな感じ・・・

▼HTML側

<html>
<head>

<script type="text/javascript" language="JavaScript" src="file.js"> </script>

</head>
<body onLoad="CheckBoxFalse()">

<input type="checkbox" id="CheckBox">

▼外部Javascriptファイル

function CheckBoxFalse() {
   document.getElementById(“CheckBox”).checked = false;
}

要はどういうことかというと、ソースが読み込まれる順番だったんですね。
最初に書いた書き方だと、

htmlファイルを読み込み
 ↓
Javascriptファイルを読み込み(チェックボックスを外せ!)
 ↓
<body>読み込み
 ↓
チェックボックスを表示

これだとチェックボックスがまだ表示される前にチェックボックスを外せ!と処理されてしまいます。ばかですね、なかわけって。後の書き方だと、

htmlファイルを読み込み
 ↓
Javascriptファイルを読み込み(チェックボックスを外せ!っていう命令があるよ)
 ↓
<body>読み込み(と同時にチェックボックスを外せ!命令を実行してね)
 ↓
チェックボックスを表示(と同時にチェックボックスを外す)

となり、意図した通りに動いてくれます。気づけば当たり前のことだし、こうしてまとめて書いてるとまぬけな自分が悲しい・・・。

プログラムは上から下に処理されるんだっつーの!!

IEのCSSバグ「これはなにハック?」

火曜日, 2月 6th, 2007

こんにちは、なかわけです。

IEのCSSバグ(ハックなのか・・・?)を発見しました。これは、ヒドイ。。かなり苦しんだ。2時間苦しんだ・・・。

セレクタ {/*日本語のコメント*/
プロパティ: 値;
プロパティ: 値;
}

上記の赤字の部分がバグを引き起こす。
セレクタの{(始めカッコ)の後に日本語文字(つまり2バイト文字)でコメントを書くと、IE6でこのセレクタの以下のプロパティが無効になってしまいます。cssハックとかいいますが、これは明らかにバグです。
というか、ここにコメントくらい書く人なんてわんさかいるはず!IEがちょくちょく更新するせいなのか?
それとも、作業してる環境(サーバ・ファイル・拡張子・文字コード・HTML構造・・・など)のせいなのか?

とにかく、赤字部分のコメントをはずしたら問題なく表示された。なんだこれ、わからないよ。だれか~~!

<textarea>をクリックすると内容が選択されるJavascript

木曜日, 2月 1st, 2007

こんにちは、なかわけです。

最近見かけたちょっと親切なJavascript。自分のために覚書き。

サイトでソースコードをコピーしてもらいたいときにテキストエリアを使用しますが、そのまま使ってしまうとそのテキストエリアに入力できてしまったり、テキストを選択するときにドラッグしないといけませんよね。
今日紹介するのは(といってもなかわけが発見したわけじゃないけど)、テキストエリアをクリックするとテキストが選択できちゃうサンプルです。

▼下の<textarea>をクリックするとテキストが選択できちゃうサンプル

初めてみたときに、お!と思いました。実際どう書くかは下のソースコードをコピーして参考にしてください。といいつつもう使ってみたり。

▼サンプルソースコード

あ~こういうの見つけると、いいサイト作りたいって思う・・・。Javascriptってめんどくさいけど楽しい。