Home > Archives > 2007-05

2007-05

IEでSWFObjectを使うときの一つの注意点

2009-05-19追記 対処法をちょこっと書きました http://katapad.com/wp/2009/05/19/stage_size_zero_issue_with_swfobject_on_ie

IEでwidth: 100%、height: 100% のswfを埋め込むときにハマったのでメモ。

IEのムチャクチャな描画速度は、SWFObject を軽く凌ぐようで見事にハマってしまった。リスト化してメモ。

  • IEのflash設置速度が速い
  • しかし、SWFObjectの処理速度は遅い
  • SWFObjectで設定した幅、高さを計算する前に、FLASHの1フレーム目を描画してしまう
  • 結果、Stageの幅、高さが0の状態でswfを描画してしまう。

だいたいこのような感じ。IEは描画だけは恐ろしく速い。

解決策は、Flashの1フレーム目に空のフレームをおくことで対処できた。 以前、スーパープログラマに似たような現象を教えて頂いてたのだが、半信半疑だったのでやってなかった。 半信半疑で本当にすみません。額を床につけるほうの土下座をします。

  • Comments (Close): 0
  • Trackbacks (Close): 0

dreamweaverテンプレートでTOPと下層ページのh1タグを受けわたせる変数

Topページと下層ページでサイトID(ロゴ)のマークアップを変えたいのだけれど、dreamweaverテンプレートを使うとタグの変更ができません。かといってここを編集可能領域にすると、更新するときに検索→置換をせねばならず、やっかいになります。

そこでテンプレート変数を使います。テンプレート変数とは簡単にいうと編集可能領域の外にあるものを変更できるものです。今回は変数のtype="text"、つまり文字列の操作をします。

テンプレート変数の定義

以下をdwtファイルの/head直前に記述します。

<!-- TemplateParam name="tagName" type="text" value="p" -->

テンプレート変数のnameがtagName、typeがtextでvalueがpという意味です。nameはhtmlタグのnameやid属性と同じ意味です。name、valueともに任意の値を取れます。

変数を編集可能領域の外に仕込む

変数の適用先は編集可能領域の外側でしか使えません。領域外のサイトIDの部分に以下のように設定します。

<@@(tagName)@@ id="siteID"><a href="../index.html">サイトID</a></@@(tagName)@@>

このdwtを使用し、新しくページを作ってみましょう。@@(tagName)@@の部分が変数の値であるpに変更されます。つまり<p>サイトid</p>となります。

h1にしたいとき

このdwtが適用されているページを開き「修正」メニュー→「テンプレート」→「テンプレートプロパティ」を開いてください。tagNameという項目があるので、ここにh1と入れてください。これでタグがpからh1に変更されます。

このようにしてうまく使えば一つのdwtでいくつものバリエーションを作ることができます。

  • Comments (Close): 0
  • Trackbacks (Close): 0

すぃ~えすえす クォ~ディング カンテスツでの作り方ー設計篇

Hello World。そしてありがとうございました!みなさまおつかれさまでした。いやーblog書くのめっさ久しぶりです。懐かしいですね~。まあ、ドリで書いてるんですけどね!

さておき、スーパー肩パッドが何回かに分けてhtml・css・JavaScriptコーディングのワークフローをエントリしちゃいます。まずは設計篇

めっさ大事な最初の設計

どういうコーディングフローを踏んだかをかいつまんで書きますね!ここすっごい大事なので設計にはすこし時間をかけましょう。

  1. まずデザインを一通りみる
  2. ワイヤーフレームレベルをさらっと紙に書く
  3. ワイヤーフレームの背景指定も紙に書いとく
  4. コンテンツエリアで共通項をだいたい考える
  5. このへんでテレビを見る
  6. ナビゲーションで軽く悩む
  7. 見切り発車でテンプレ部分をスライス
  8. テレビで「落合のモノマネ」を見て、いたく感心する。シュールとベタの融合。
  9. ロゴのコーディングがヤバいことに気づく
  10. テレビという現実逃避が心地よくなる
  11. ロゴはなんとかなるだろうと思い、さらりとすすめてしまう。

ここで大事なのはほんのすこし頭で考えて、紙にサラサラと書くことです。あまり細かくする必要はないです。あと、テレビは消すこと!

コーディングポリシーを決める

これもめちゃめちゃ大事です。htmlに魂を込めるんです。カズはフランスに魂を置いてきてますけど、カズ以外のみなさんは魂を込めてください。僕の魂は以下です

  • あっちはdlでこっちはtableとかだと、あとの人が大変です。ガイドラインはしっかり立てましょう
  • 難しくても、取り立てて必要ないdiv,spanは使わない
  • 文字サイズ変更は敏感に
  • div.sectionの相対配置、絶対配置系は恐れず使う
あっちはdlでこっちはtableとか

これは難しい問題です。僕の極論を言ってしまうとtableは巨大なフォーム以外、あまり使いません。新着情報はレイアウト次第ではdlのデフォルトがそっくり当てはまるときもあれば、表組みが当てはまるときもあります。今回のレイアウトだったらたまたまtableだったけど、リニューアル時にはdlのレイアウトだったら…。あるいは、逆のときは…。

必要ないdiv,spanは使わない

縛りですね。IE6がなければ、div.section以外でdivはほとんど使わなくても済みます。

文字サイズ変更は敏感に

これも縛りですね。ctrl+マウスホイールでコロコロやるのを趣味にすると、いろんな発見ができます。とはいえ、IE7のズームはひとくせあるみたいで、いま調査中です。絶対配置あたりのズームがチョーヤバい。

div.sectionの相対配置、絶対配置系は恐れず使う

見出し以下の本文やらは若干paddingが付いてるレイアウトってたくさんあると思います。いちいちcssでひとつひとつpadding入れたり、classにpadと入れるのも面倒で複雑です。そのときにdiv.section内の見出しを絶対配置!なんもこわくないです。思い出したら使ってみてください。

たぶん、みなさんも似たような魂なりポリシーは持っていると思います。僕よりもっとすばらしいポリシーを持っているひともたくさんいますね。そういう人はソースからプンプン臭ってくるのですぐわかります。

こんなに偉そうに言ってる僕ですが、print対応をほぼしていなかったり細かいミスはいっぱいあったりと、なんやかんやあります。これが俗に言う恥じらいですね。

さて、長くなったので次回に持ち越しましょう。またね!

  • Comments (Close): 0
  • Trackbacks (Close): 0

Home > Archives > 2007-05


Search
Feeds
Meta

Return to page top