Column | コラム

web製作におけるテクニックや話題

IE7がタブブラウザに!

Internet Explorer 7(IE7) にタブブラウズ機能が搭載される事になったそうな。
参考:IEBlog

ちょっと遅いような気がしますが、さすがにfirefoxの猛攻に重い腰を上げたようですな。

タブブラウズだけでなく、CSSへの対応も強化されるようです。(変に対応されると困るんだが…どうだろね)
透過pngへの対応もちゃんとしていただきたいです。

仕様に沿ったブラウザが増えれば、製作者の余分な事への苦労も少しは軽減されるかも?

ブックマークレットがけっこう使える

次の文字列をコピーしてアドレスバーにペーストして、エンターキー押すと…

JavaScript:document.body.innerHTML=document.body.innerHTML.split('ー').join('━━━(゚∀゚)━━━');focus();

サイト内の文字(ー)が某掲示板郡で見られるアレに!
(※このサイトで使うとJavaScriptが動かなくなるんで注意してください)

このようなスクリプトをブックマークして使ったりするのがブックマークレットなのだそうだ(多分)
詳しい事は適当にググッて下さい(いい加減ですみません)
参考:適宜覚書

フザケたスクリプトをサンプルに出しましたが、まじめに使えば結構使い物になります。
例えば、仕事でフォームの動作チェックを何十件も繰り返すようなタスクだった場合、同じ動作を何度も入力していくのは結構ダルイ!!
それをブックマークレットで一発。
一瞬にしてあなたの手間を無にして、1時間かかるものを10分に縮めます!(大げさかも)
興味があったらやってみてください。

あなたは大丈夫?言いたいこと伝えられてますか?

人に物事を伝えるテクニックとして5W3H(2H)ってのを聞いたことありますか?
僕は入社するまで知りませんでした。社会人には基本中の基本らしいです…

What:なにを
Why:なぜ
Who:だれが
When:いつ
Where:どこで
How:どうやって
How long:いつまでに
How mach:いくらで

…これを普通に使うには慣れが必要だなぁ

あと、仕事とかやってて、何か問題が起きたときにディレクターに相談しにいったんですが、「お前の話はごちゃごちゃしててサッパリ意味分からん」と言われてしまいました。

何がマズかったかと言うと、先に一番言いたいことを先に提示しなかった事にあるという事です。
事象をダラダラと続けてしまった為に「一番重要な事」が話の中に埋まってしまって話の内容がつかめない状態に…

よく「起承転結」とか昔習ったけど、「結起承転(結)」でないとなかなか人には分かってもらえんそうな。
うーん難しい

これからの予定

CMSとAjaxを組み合わせたシステム

自分なりのこれからやりたい事。コンテンツの管理とかはCMSで一括で管理して、カテゴリーごとにHTMLに吐き出しておく(静的?or動的?)。

ユーザーにリクエスト(ボタンとか押す)されたらAjaxで必要な情報を読み込んでダイレクトに出力。このときページのリロードはされないのでユーザーのストレスは減らせる?と思う。

Ajax(httprequest)に対応してない古いブラウザ又はケータイ等は代わりにCMSが書き出す個別のページへ誘導すればアクセシビリティは保てるかなと。
余分な情報は読まないんで、軽くなるし一石二鳥!?

Ajaxの導入

まだ、テスト段階だがAjaxを一部導入してみた。Info,Linksは外部のHTMLのコンテンツを読み込んで表示させている。
一部のブラウザでは、XMLHttpRequest に対応しておらず読み込めないようだ。その場合はソースとなるHTMLに直接リンクして、対応している。これなら、このままの状態でケータイでも閲覧しても負担は軽いかな?

便利なAjaxだが、問題点が少々。たまにちゃんと読み込んでくれず、いつまで待っても表示されない事がある。環境によっては何度リロードしても動作しないかもしれないなぁ。あ~まいった。

話題のAjax?のテスト

今話題のAjaxっぽいのに挑戦してみた。"Asynchronous JavaScript + XML" の略称なんだとか…。非同期で情報を外部から持ってこれるので、このサイトにはピッタリな技術だと思う。テストでやっているのは外部のテキストを読み込んでいて、XMLを扱うAjaxとは違ったものだ。
XMLを読み込んでみるテストもしてみたが、Macのsafariで動かなかったので、もう少し試行錯誤してみようと思う。
だいたいXMLとかRSSの事も良く知らないので、まずはそこからやらねば!

ここに読み込みます。

HTML構文、CSSの検証

Valid XHTML 1.0! Valid CSS!

見た目では分からないサイトの仕組み

このサイトはJavaScriptでレイアウトの変更等をコントロールしています。
通常JavaScriptの動作には、
<p onmouseover="swapimg()">テスト</p>
と、イベントハンドラと言われるモノも一緒に記述しなくてはなりません。

もし、更新時に誤って一字でも消してしまったりすると、JavaScriptは動かなくなってしまいます。タグが長くなってしまい読み取り辛いソースになってしまう恐れもあります。

ソースを見て頂くと分かりますが、HTMLソース中には一切イベントハンドラが記述されていません。これによって「振る舞い」が完全に分離でき、別で管理することが可能になります。

別で管理できると、HTML製作者とプログラマーが別々に効率よく製作でき、ミスを減らす事ができます。