駆け出しwebデザイナーのつぶやき　 200710

テーブルレイアウト

今週は2度の会社泊まりを経験。金曜は2時に終わりタクシーで帰宅しようと思ったら上司が車で送ってくれました。いい上司だ！

そんな一週間を過ごしたのはECサイトでの必要な更新がたまっていたわけで、それらをやるにはどうがんばっても泊まらないと終わらない量だったわけで。

泊まるという事が決していい事ではないのだけれど、日中はクライアントの問い合わせがあったり、引継ぎ案件の説明や相談をしなければならず、集中して自分の作業にかかれないという事情もあり、夜ははかどるので好きになってしまいます。

そんなこんなの作業の中で改めてイロイロ考えたのはテーブルレイアウト。

今担当するサイトはテーブルレイアウトでOKという事なので基本はスイスイとスライスをして製作していけるのでCSSで組むよりも全然早いです。

しかし、テーブルで組んでも最近の流れについて行くことは必要なわけで。そんな中で考えるのは
【文字が大きくなってもレイアウトとして狂わない構造】
です。

最近のブラウザはctrlを押しながらマウスのホイールをクルクル回せば文字が大きくなったり小さくなったりするものも増えました。

もちろんこれは「ユーザビリティを考えた事なわけで、テーブルレイアウトが古い技術だと言われても、きちんと対応している事が望ましいわけです。

単純な構造ならばいいのですが、それが複雑にからみあうレイアウトの中でどう組めばいいのかというのは結構悩みます。

どれが正解、というものはなく、どうすればより効率が良いか、編集がやりやすいか、またテーブルの入れ子の数は少ないことが望ましいのでどこまで減らせるか、などイロイロと課題があります。

なので、今回は該当するデザイン部分をプリントアウトし、どうスライスして構造を組めばいいのかを考えることに一番時間を使いました。

今回苦労したのは背景が単純な白ではなく、柄つきの背景にしてその上に柄つきの枠を敷いていたせいなのですが、自分でデザインしておきながら、自分を恨みました(笑)

余談ですが、某SNSのクリエイターコミュニティで

「今時テーブルレイアウトなんてダサい」と知り合いのデザイナーに言われたけどそうなんですか？

という感じの質問に対していろんな見解があり、いい議論のスレッドになっていました。

自分としては古いかしれませんが、悪い技術ではないと思いますし、タグやaltをきちんと入れれば拾ってくれているし、そんなに悪くいうものではないと思います。その言葉を投げたのははやりモノを習得して浮かれすぎなのでは？と思ったり。

表現方法はひとつではなく、イロイロなものがあり、どれをどう選択するかは作るものの技術と知識によって変わります。

「君に頼んでよかった」

と言ってもらえるようにがんばりたいですね。

Pagetop

ヤンデレ

金曜の夜にかつて学んだwebスクールの仲間たちと久しぶりに集まってきました。

6人の集まりはとても性格の濃い集まりなのでもう大変。
『ヤンデレ』という単語を知らなかった自分は疎外感。悔しいので検索して内容を把握。おまけでタイトルにしてみました。

メンバーのみんな、少なからずwebとつながりのある場所でそれぞれがんばっている状況。モチベーションもあがります。

スクール時代に同じインターン先になった二人は意気投合よろしく、その後の進路も仲良く二人で決めてがんばっています。仲が良すぎて冷たい態度を取るその姿に周りの人達は仲が悪い二人と誤解している模様。
いやいや、このやりとりは信頼無くしてなりたちませぬ。うらやましいですな。

印刷系の前職を持つ一人は印刷+webもできるという状態で奮闘中。印刷系で忙しくて大変なご様子。自分とはサッカーについても語り合うお仲間。熱いハートはスポーツでも何でも一緒です。

webマスターとして働いている紅一点。
いつも元気なその姿にみんな癒される存在。というかこの濃いメンバーでいて全然負けてない強力なキャラクターの人。魅力的です。

スクールのアシスタントとして活動中の某氏。
今回の企画お疲れ様でした。とても楽しかったので某氏が「真の意味のデュアル」であるという事は公表しないで胸に秘めておきます。　　　　　　ｾｲﾄｻﾝﾀﾁｷｦﾂｹﾃ
そのコアな部分がだんだんと生徒さんたちにも理解されはじめているご様子。なによりです。

なんでしょう、こういう仲間と共にこうして合うとやぱりテンションあがります。
仕事もがんばろうという気になります。
さらに仕事をこなす事は大切だけど、与えられる事をこなしていくというだけじゃなしに自分が最初に描いた志や目標のようなものを再認識。
やっぱり苦楽を共に過ごした仲間ってスバラシイ！

そんなことで今後も磨き合い、語り合い、深めあい（何を？）よろしくです～。

Pagetop

safari(2)

前回の内容のもう少し詳しい内容。

今の所、対応をソースを作った所へお願いしている状態なのでその後の結末まではまだわからないけれども、バグ（と呼ぶのか微妙）のおそらくここらへんという参考データ等を。

案1：safari2だと改善されているので、アップデートをお願いすればいい

　＝safari2はmac os X 10.4以降でなければ入らない模様。という事は10.4以下のosはダメ？

案2：safari1.○をjavascriptによりブラウザ判定させて、その対象のみをoffにしてしまう

　＝同じ動作ができないという点では問題が残る。

案3：問題個所の判定ソースを同じ結果で別の書式等を使い書き込む

　＝これが一番の理想だが、そう簡単は思い浮かばず、また試してみたがうまくいかない。

案4：同じように表示・非表示ができる仕組みを別の仕組みで作り直す

　＝これが実は一番いいと思われる。のでうちにこの問題がまたくるなら提案する。

●調べていてわかった事

　・ブラウザ判別を行う場合は「Safari」ではなく「AppleWebKit」という文字で。
　※さらにバージョン判定をするなら、その次にある数字で振り分け。

　・safariのバグはけっこう多い模様
　　http://blog.8-p.info/articles/2006/04/30/safari-is-evil

等など、イロイロと難題がある。

けれども、ある意味いい経験となったのでこれからに役立てたいと思う今日この頃。

ついでに言うと、safariはデフォルトのフォントがwindowsと違ってキレイ。
それは良いが、そのせいでフォントの幅がwindowsと異なり、windowsできれいに収まるような幅のレイアウトを組んでもsafariでは異なる改行位置になる事が多い。

なので同じ見栄えを考えるときは、あるていどゆとりの幅をもったレイアウトで作ることが必要。

あ、今日のニュースで今度出るmacの新しいpsはwindowsが動くらしい。

ほほぅ･･･

Pagetop

safari

先日、クライアントから電話がきて一部ブラウザにて不具合が起きている模様。

調べてみると、safari1.3(2以下対象)で運用しているサイト内でAjaxを使って特定条件の元であるページを見るとブラウザが強制修了してしまうという現象。

サイト自体は自分の会社で作ったものではないのですが、調べて欲しいという事でさらに解析。

どうやらAjaxを使用する為のjavascriptの記述が原因の模様。

でもそこからが問題。そのソースにてsafariの引く低いバージョンのみ除外するという設定もしんどいもの。
結局原因となる行までは特定したものの、それが間違っているというわけでもないわけで、対処は難航。

・・・と、いうかあまり他所が作ったソースはいじりたくないもの。動作の保証ができないしどこに何が潜んでいるのか未知数でもあるので。

もとい、社内でも協力してもらいながらイロイロな対処法を模索していたら、

「そもそも、この動作をAjaxで作る必要がるのか？」

という事になってきました。

css+javascriptで同じような表示・非表示機能を持ち、なおかつSEO的にも有効だと思われる代替方法がありました。

という事で、とりあえずは現状の解析結果と、ソースを作った所で対処してもらうのが一番という説明と、それでも弊社に対処を求めるのであれば、別の形で同じ動作をするものの提案をしますという事で了解してもらいました。

というか、その問題のソースが無事に解決できるならそれも知りたい状況。

なんにせよ、今後の反応を楽しみにしています。

Pagetop

Website Explorer

新しい担当の案件で特集ページの構成をしている中で、以前の担当案件を引き継ぎ中。

そんな中で以前の担当案件の製作中の部分でリンクエラーがあると指摘を受ける。

元は一つの解説ページだったものをレイアウト等の変更をして複数ページに切り分け、さらにフォルダを作って階層をひとつ下げる作業。

確かめてみると、リンクが前のママになっていました（そりゃリンクできないわけだ）

なんて事をしちゃいけません。

リンクのエラーチェック等もできるだけ毎回やらないといけません。

というわけで思い出したかのようにツールを使ってチェックしました。

使ったツールはWebsite Explorer

リンク解析、エラー一覧ができます。
他にもサイトのツリー表示等、イロイロ解析してくれて便利です。

リンク先が内容に合った正しいものかどうかとかは、最終的には自分で判断・確認しなければいけないという部分はありますが、でもリンクでnot foundを出さないように気をつけるという意味ではとても重宝します。

ちなみにリンク解析は飛ぶページだけでなく、cssやjavascriptの外部ファイルとかも含まれています。余計なソースが見つかったりもするので一通り確認すると便利デス。

さて、クライアントに修正完了メール出します・・・

Pagetop

某SNSのリニューアル

某SNSがリニューアルデザインしました。

全般的に評判は良くない模様ですが、まぁ特に困ることも無く良くなった事もなく（元からそんなに活用してない）いたのですが、とあるマイミクの人の日記に

『リニューアルしてから画面もめちゃくちゃ、コメントも書き込めずに落ちてしまったりもうボロボロ。今やっとなんとか少し書けている』

という感じの日記が出ました。

自分の周りでは特にそんな事を聞かなかったけれども、なにやらそのSNS内ではそういう現象が起きている人もちらほらいる模様。

原因も特定していないし何も調べていないけれど、リニューアルに際しての告知で推奨環境が発表されていて、けっこうバッサリやったな感があったので、

『推奨環境の対象に入っているかどうか確かめたほうがいいかもしれませんね推奨環境の内容はこちら（アドレス）』

というような書き込みをしたですよ。

んで、次の人の書き込みが

『CSSの読み込みをはじいているのかもしれませんね。ブラウザでそういう設定をしているとそうなってしまいます　詳しくはこちら（アドレス）』

みたいな感じで。他、その現象を心配したマイミクの方の書き込みがいくらか。

そんな感じでいくらかたった後に日記の本人がコメントを書いてくれていて

『コメントをくれたみなさんありがとうございます
・・・さん（cssと書いた人）、お詳しいんですね』

という内容。
え？私よりもその人の方が的確ですか？？？

・・・CSSはレイアウトをコントロールしているだけであって、画面が落ちるとかコメントが書けないとか、そういう事に関係するものでは無いし、むしろcssが読めなくても内容がわかるようにしているのがHTMLとCSSの分離なのだからありえないでしょその原因の可能性は。

一応私本職なわけだし、現象から察するにあきらかに推奨環境の対象ではない可能性のほうが高いと読んだわけだし、どう考えても私のほうが的確な事をコメントしたつもりなのですが！

・・・っと、思いながらも大人としてグッとその言葉を飲み込んでスルーしました。

現に、その現象を運営局に問い合わせたけれど、『推奨環境以外は対象外です』という返事が返ってきたと本人もコメントで書いていました。

ほら！私のほうが的確だもん！
と一人勝ち誇りながら、このまま何事も無く流れていくのがちょっと悔しいのでここで自己満足的に書き込み。

ちっちぇーな自分（笑）