新サイトは「とりあえず動く」という段階で、まだまだディテールが甘いです。記事もまだ移行してませんが、動かしながら改善していく方向で。それでは、新サイトでお会いしましょう！
]]>おっかなびっくり組んでみると、なんだかんだで、とりあえず動きはするんですが... どうにもappendChild()でノードが追加されるというよりは置換されてるっぽい理屈に確信が持てません。「そういうプロパティなんだ」と言われれば、それまでなんですが。
ソースは以下
]]><table border="1" width="580" cellspacing="0" >
<tbody>
<tr>
<th onClick="sortRow(this,0);">グループ名</th>
<th onClick="sortRow(this,1);">今日</th>
<th onClick="sortRow(this,2);">昨日</th>
<th onClick="sortRow(this,3);">今週</th>
<th onClick="sortRow(this,4);">先週</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
<td>400</td>
<td>500</td>
</tr>
<tr>
<td>200</td>
<td>300</td>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
...
</tbody>
</table>var last_sort;
function sortRow(th,idx) {
// tbodyを特定する
var sec = th.parentNode.parentNode;
// trを特定する
var rows = sec.rows;
var N = rows.length - 1;
// 配列xを宣言
var x = new Array;
// 一時領域を定義
var marker = document.createElement('tbody');
// tdの値を配列xに格納。行番号を揃えた変数を用意する
for(var i=0; i<N; ++i) {
x[i] = Object(rows[i+1].cells[idx].firstChild.nodeValue);
x[i].row = rows[i+1];
}
// 配列xをソート
x.sort();
// 配列を逆順にする
if(last_sort == idx) {
x.reverse();
idx = -idx;
}
// secをmarkerにする
sec.parentNode.replaceChild(marker,sec);
// secにtrを追加する
for(var i=0; i<N; ++i) {
sec.appendChild(x[i].row);
}
// markerをsecにする
marker.parentNode.replaceChild(sec,marker);
// ソート情報を保存
last_sort = idx;
}要するにサンプルコピったは良いけど、イマイチ改造できないと。なんとなく手ごたえはあるんだけど、あと一歩のところで脳がJSモードに入ってないなぁ（汗
cf. Mata's Homepage, JavaScript テーブルソート
]]>簡単なので、ちょっとやってみたら、なんかメチャメチャ面白かった。
平面の空間設定をコントロールする遠近法には、大きく二種類ある。
今回やったのは、「透視法」。中でもごく単純な「二点透視法」にチャレンジしてみました。手順は以下。
]]>消失点を2つ定義するから、二点透視法。6.で引いた垂線が、構造物の一番手前の角になります。こんな感じ。
色つけてみた。
補助線を移動させれば、角度や距離感を変えることができます。上から見下ろすようにもできるし、消失点をもっと増やせば、もっと複雑な構造を描画できます。「屋根が三角」とか。
建築物のイラストとかで良く使う手法だけど、Webでも普通に使えます。たとえばメイン画像のグラデーションや、中身の構成を決めるときに意識しておけば、全体のバランスやユーザの視線をコントロールできますね。
]]>長いURL(半角英数字）を強制改行させるには、CSSで「word-break: break-all;」を指定すれば良い。これはIEの独自拡張で、IE5.0から対応しています。
通常のボックス要素の場合だと、Opera/firefoxではボックスを突き破りはしても、ボックスを拡張したりはしない。
幅が指定されたボックス要素を拡張してしまうのはIEのバグなので、通常は「word-break: break-all;」で大きな問題は無いです。（レイアウトが崩れない、て意味ね）
ただし、table要素に詰まっていると、ややこしくなります。table要素は特殊なブロック要素で、中身が溢れると問答無用でセル自体を伸縮してしまいます。↓みたく。
解決する方法は幾つかあるが、クロスブラウザとなると難しい。
]]>word-break: break-all;」を使用する<nobr>タグの中で、行がボックスから溢れたときの改行ポイントを指定するタグです。
そもそも手動改行するのと、ほとんど変わらない。システムが入った動的な環境だと、状況的に使用できない場合が多いだろう。個人サイトで、手間を無視するならアリ。
pre {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}<pre>タグ用として有名な手法らしいが、少なくともこの場合はOpera9、Firefox1.5.0.6、IE6でことごとく効果なし。
ま～それも当然で、この指定は本来、行末では改行しない<pre>要素を行末で自動的に折り返す為の指定。半角スペースすら挟まない英数字を強制改行するような指定ではないから。
cf. Tero Karvinen, Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE
url_breaker」を使用するFirefoxでのスタンダードな対処法らしい。構文解析して<wbr>タグを埋め込む拡張機能です。
Firefox専用なので、論外。
cf. 小粋空間, Firefox・Netscapeで連続した半角文字を折り返す
overflow:hidden;」あるいは「auto;」td/thに直接指定しても反映されない。td/th内のブロック要素（div/p等であらかじめ囲っておく）か、長いURLを囲んだ<a>なり<span>なりを「display:block;」にして使用する必要がある。
※見映えは悪くなるが、無難ではある。
入力時にCGIでエラーを出す。CMSツールのNucleusなんかはそうらしい。
要するにCGIなりJSなりでASCII文字列を監視して、文字数によってはどうにかする手法。最後の手段？
とりあえず、うちのサイトで使う分には<pre>タグ＋独自拡張タグで十分。何故なら、書くのも作るのも弄るのも俺だから。<td>の中に。そんな常識外な文字列は入れません。
仕事で使う分には、幾つか複合することになるだろうな～ ...ケース・バイ・ケースで。とりあえずword-break: break-all;と、<wbr />タグを使えたら使って、最後にoverflow:hidden;に頼る！ これでとりあえず一部のユーザによる表示崩れは防げる。
| 西暦 | 肩書き | 状況 |
|---|---|---|
| 2003 | 大学3年 | Sig's Archives設立。 ちょっと前の奨学金面接で「HTMLの勉強しようと思ってます」と言ってた記憶はある。そしてできたのが、このサイト。ちなみに無職。RO暦1年↑。 |
| 2004 | 大学4年 | 年明けくらいから急にアクセス数伸びてきて、8月ごろには何かの間違いで参照数7,000/dayを突破したりもした。急成長で、更新するのが一番楽しかった時期。 2月ごろから幾度かWeb系バイトに応募するも、採用なし。奨学金生活を送る。 |
| 2005 | Web職2ヶ月 | まともな就職活動はせず、ひたすら勉強しながら月1ペースでWeb系面接。別サイトのリニューアルを繰り返し、その流れでこのサイトも4月に『ROSS』と改名。大学卒業から少し遅れ、5月末にコーダとして今の会社に入社。 以後、充実したリアルを送るも、サイト更新頻度は縮小する。 |
| 2006 | Web職1年 | 年末に社員に昇格。面接担当、後輩の指導、幾つかのプロジェクトを経験し、最近ようやく会社の利益に（微妙に）貢献できるようになってきました。ちなみに昇給したようです。 サイトの方はなんとか週2ペースの更新を維持しつつ、水面下でリニューアル作業を進行中。 |
とゆ～ことで、新サイトを紹介。
新しいサイトは、『Archiva』といいます。といっても、まだ静的1枚しか用意できてませんっ ...ホントは３周年に間に合わせるつもりだったのだけど... ま、まぁ機能テストはさんざしたので、正式な公開ももうすぐですよっ！ たぶん。おそらく。きっと。
<p><img src="/other/archives/img/sample_no1.gif" alt="" id="photo" width="210" /></p>
<p>
<a href="/other/archives/img/sample_no1.gif" class="changeImg"><img src="/other/archives/img/sample_no1.gif" alt="1" width="60" /></a>
<a href="/other/archives/img/sample_no2.gif" class="changeImg"><img src="/other/archives/img/sample_no2.gif" alt="2" width="60" /></a>
<a href="/other/archives/img/sample_no3.gif" class="changeImg"><img src="/other/archives/img/sample_no3.gif" alt="3" width="60" /></a>
</p>window.onload = getSrc;
function getSrc()
{
var x = document.getElementsByTagName('a');
for (var i=0;i<x.length;i++)
{
if (x[i].getAttribute('className') == 'changeImg' || x[i].getAttribute('class') == 'changeImg')
{
x[i].onclick = function () {
return changeImg(this.href)
}
}
}
}
function changeImg(imgSrc) {
document.getElementById('photo').src = imgSrc;
return false;
}
<a href="#" onclick="winOpen('./popup.html')">...みたいな感じで起動するんですが、ふと思いたってonclickの代わりにclassでポップアップさせるよう改造してみました。これでどうなるかって言うと、
<a href="./popup.html" class="popup">...みたいな感じで、まんま普通のHTMLになります ...とりあえず、こんな感じ。
]]> サンプル<a href="aaa.com" class="popup">ポップアップ</a>window.onload=autoPOP;
function autoPOP()
{
var x = document.getElementsByTagName('a');
for (var i=0;i<x.length;i++)
{
if (x[i].getAttribute('className') == 'popup' || x[i].getAttribute('class') == 'popup')
{
x[i].onclick = function () {
return winOpen(this.href)
}
x[i].title += '(Popup)';
}
}
};
function winOpen(url) {
window.open(
url,
'popup',
'width=520,height=340,scrollbars=0,resizable=1'
);
return false;
};なんとなく作ってみたけど、なんかいろいろ応用が効きそうです。winOpen()だけでも使えるし。getAttribute()でページ内を走査する部分とか、onloadイベントにする部分とか、onclickイベントを付与する部分とか。
これが一番興味深いんだけど... トリガをclassにしたことで、対象へのピンポイントなCSS指定が可能となる。この場合だと、たとえば<a>によるリンクの中でもポップアップ・リンクだけにそれと判るアイコンを付けたりとか。
]]>window.open('url to open','window name','attribute1,attribute2');
window.open(
'http://www.aaa.com/',
'popup',
'width=400,height=200,
toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,
copyhistory=yes,resizable=yes'
);window.open('jex5.htm','mywindow','width=400,height=200,left=0,top=100,screenX=0,screenY=100')<a href="popup.html" onclick="return winOpen('popup.html')">Link to popup</a>function winOpen(url) {
window.open(
url,
'popup',
'width=520,height=340, scrollbars=0, resizable=1'
);
return false;
}参照 : QuirksMode, Popups
]]>現在、1枚コーディングしてみたとこ。なんとか8月には仮公開まで持っていきたい。
ん～時間かかった～＾＾；
やっぱデザインがネックですわ。既にあるものを追加・編集・改良するのは楽なんだけど、一から作るのってパワー要るね。コーディングは楽なんだけど... 今後はデザインもこなせるようにならなくてわ。
上記は、当日の服装および持っていったもの。
式自体は「気軽に楽しんでもらおう」という意向のもとで、特に格式ばったところもなく、二次会なしで、つつがなく終了しました。したがって特に失敗もなし。素直に料理と進行を楽しみました。良い料理出てたな～＾＾
以下、感想とまとめ、細かい反省点など。
]]>チーフにアイロンは、掛けとくべきだった。そして長財布が欲しくなった。そんな感じ。
]]>彼自信が運営するサイトにて'95年から掲載されているコラム『Alertbox』は（デザインはアレだけど）Web制作者のバイブルとして長年読み続けられています。Web標準で言うALAみたいなものかな？
『Alertbox』には日本語訳も用意されていますが、それはそれとして、今回取り上げるのは彼の著書『ホームページ・ユーザビリティ』（2002年）で纏められたホームページ（サイトのトップページね）におけるガイドライン。この名著を読み返すついでにサクっと抜粋してみました。
]]> サイトの目的を伝える数が数だし、リストにしただけなのでお世辞にも見やすくはないけれど。大丈夫っ！ 俺はすっごく勉強になった（違
あ、ちなみに。この本で一番凄いのは有名な米国32サイトの詳細な図付き解説なんで。ちょっと古いけど、今でもじゅうぶん通じるさ。いちおう宣伝しとくよ～。
作っといてなんですが、折り畳みメニューはユーザビリティ低いです。ちゃんと選択するのは、マウスの扱いに慣れた人でないと意外と難しい。嘘みたいですが本当です。卒論でユーザテストまでやった俺が言うんだから、間違いない（ぉ
はい、前置き終わり。それでも「俺は俺の道を行くぜっ」てな剛毅な方々は、続きをどうぞ。食わず嫌いも良くないしっ
]]> HTMLまぁ、普通サイズ。
<!-- navigation -->
<div id="navigation">
<ul>
<li id="n1"><a href="./">HOME</a></li>
<li id="n2"><a href="./service/research.html" onmouseover="openMenu('fm1');return false;" onclick="closeMenu('fm1');return false;" onmouseout="closeMenu('fm1');return false;">サービス概要</a>
<ul id="fm1" onmouseover="openMenu('fm1');return false;" onmouseout="closeMenu('fm1');return false;">
<li><a href="./service/research.html">マーケティングリサーチ</a></li>
<li><a href="./service/promotion.html">セールスプロモーション</a></li>
<li><a href="./service/sport.html">スポーツ事業</a></li>
<li><a href="./service/stuff.html">人材派遣</a></li>
<li><a href="./service/video.html">映像制作</a></li>
<li><a href="./service/goods.html">商品販売</a></li>
</ul>
</li>
<li id="n3"><a href="./about.html">会社概要</a></li>
<li id="n4"><a href="./policy.html">プライバシーポリシー</a></li>
<li id="n5"><a href="./inquiry.html">お問い合せ</a></li>
<li id="n6"><a href="./sitemap.html">サイトマップ</a></li>
</ul>
</div>
2006年07月11日、onclickを削除。これでこの部分のリンク有効となる。
ちょ～短い。5分で書いたテキトーコード。
function openMenu(a) {
document.getElementById(a).style.display = 'block';
}
function closeMenu(a) {
document.getElementById(a).style.display = 'none';
}
はい、本番。覚悟はOK？
/* navigation
-------------------------------------------------------------- */
#navigation {
position: relative;
z-index: 5;
width: 766px;
height: 40px;
background: #fff url(../img/bg_navigation.gif) no-repeat top center;
}
#navigation ul {
list-style-type: none;
}
#navigation li {
position: absolute;
top: 2px;
}
#navigation a {
display: block;
width: 123px;
height: 36px;
background: transparent url() no-repeat top right;
text-indent: -12300px;
}
* html #navigation a {
position: absolute; /* for IE-win */
}
/* --- hover --- */
#n1 a { width: 124px; }
#n6 a { width: 125px; }
#n1 { left: 5px;}
#n2 { left: 132px;}
#n3 { left: 258px;}
#n4 { left: 384px;}
#n5 { left: 510px;}
#n6 { left: 636px;}
#n1 a { background-image: url(../img/bg_n1.jpg); }
#n2 a { background-image: url(../img/bg_n2.jpg); }
#n3 a { background-image: url(../img/bg_n3.jpg); }
#n4 a { background-image: url(../img/bg_n4.jpg); }
#n5 a { background-image: url(../img/bg_n5.jpg); }
#n6 a { background-image: url(../img/bg_n6.jpg); }
#navigation a:hover,
.home #n1 a,
.service #n2 a {
background: none !important;
}
/* --- foldingMenu --- */
#navigation li ul {
display: none;
position: absolute;
top: 36px;
left: 0px;
width: 200px;
/* 半透明画像を使用する指定（モダンブラウザ用） */
background: transparent url(../img/transparent.png) repeat center !important;
/* 半透明画像を使用する指定（IE用） */
background: none;
}
#navigation li li {
position: static;
border: 1px solid #999;
border-width: 0 0 1px 1px;
padding: 0;
margin: 0;
}
#navigation li ul a {
position: static;
width: auto !important;
width: 200px; /* for IE */
height: auto;
border-right: 1px solid #ccc;
padding: 2px 5px 2px 15px;
margin: 0;
color: #333;
text-align: left;
text-indent: 0;
text-decoration: none;
font-weight: bold;
/* 半透明画像を使用する指定（IE用） ※絶対パスで指定しなければならない */
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://aaa.com/img/transparent.png", sizingMethod="scale");
}
#navigation li ul a:hover {
color: #fff;
background-color: #546a2e !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="false");
}
#navigation li:hover ul,
#navigation li ul:hover {
display: block;
}
あ、ちなみに。
元は背景画像を利用したナビゲーションなんで、コピペしただけだと真っ白ですよ～、と。使いたい人は該当部分をカスタムしましょ？ もっとちゃんとしたものが作りたい人は、このへんを参考にすると良いでしょう。
元ファイルが消えたわけではないので、こうして復帰できてるわけですが。広告表示されて初めて気づいた俺ってば... ＾＾； いや、XREAはご丁寧にも期限が近づくと何回かメールで警告してくれるんですが。光回線への変更でメアド変わってて気付けませんでした。はっはっは（乾
まぁおかげで気付いたんですが、このアカウント。ファイル数4842だそうです。おぉ、いつの間にっ。改めて数字にすると感慨深いものがあるね。
]]>コーダーであるならば、ブラウザ互換をクリアしていること、Web標準に準拠していること、サンプル画像を再現していることとかは当然として、さらに+αを提供しなければならない ...という話。もちろんスピードも大切です。考えすぎて時間喰ってるようじゃあ、意味がないよね。
HTML(CSS)コーディングはサイト制作の基礎の基礎にあたる部分で、この段階での設計は後の開発スピードにダイレクトに影響します。ぱっと見は同じように見えたとしても、巧く組まれたコードはプロジェクトの進行に確かに貢献しています。それを体験してもらうことが本職コーダーの醍醐味ではないかな、と思ったりするわけです。
]]>透過PNGってのは透明度を付加した画像のこと。「完全な透明」か「完全な不透明」かの二択しかなかった透過GIFと違い、もっと詳細に透明度を指定することができます。50%とか25%とか。巧く使えばデザインの自由度が凄く広がるシロモノなんだけど、IE-winはデフォルトでサポートしていません。
今回の纏めは、そのIE-winで透過PNGを使う方法。
といってもCSSにちょちょいとコピペするだけですけどね。以下みたく。
#overlay {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizingMethod="scale");
}| Attribute | Property |
|---|---|
| enabled | フィルターの有効、無効を指定します。 1（true）で有効、0（false）で無効。デフォルト値は1（true）。 |
| sizingMethod | 画像の貼り付け方を指定します。 cropはそのまま。imageは要素を画像の大きさに合わせ、scaleは要素の大きさに合わせて画像を拡大（縮小）します。デフォルト値はimage。 |
| src | 画像のURLを指定します。 デフォルト値は無し。 |
AlphaImageLoaderに対応しているのは、IE6とIE5.5のみ。モダンブラウザ(Opera. Mozilla, NN, Firefox, Safari, Camino, IE-macなど)はPNGに対応しているから良いとして、IE5.0を対象に入れている場合は効果がないので一考の余地あり。
AlphaImageLoaderを使用した要素内にリンクを設ける場合、リンクをクリックできなくなります。<a>領域を絶対配置にして要素の上に被せる必要があるでしょう。
追記: 2006/07/05画像へのパスは、絶対指定で記述する。相対だと巧くいかないことが多いようです。また、<a>領域自体にAlphaImageLoaderを使用したなら、この場合はリンクが有効になるみたいです。
]]>