2008年6月28日土曜日

カブトムシ

カブトムシ画像
我が家にカブトムシが出現しました。
なんとなく・・・
なんとなく虫箱を見たら、居るじゃありませんか!

♂1 ♀4

角のない奴らばっかじゃないか・・・
これじゃ貰い手もつかん。

昨年ウチの姫様が貰ってきたカブトムシの子孫なわけですが、自分が熱中してた頃はどうやっても卵を産ませることや幼虫を孵すことができなかったのに、こんなにアッサリとは・・

成虫になりたてのようでサナギの抜け殻も一緒にありましたが、そちらはあまりに毒々しくてとても日記ブログのような場所で公開できるものじゃないので写真はナシで。。

2008年6月23日月曜日

K-MIXの取材


クルマ屋のお客さまにラジオの取材が入りました。

今回、僕は何の関係もありませんが、『K-MIXの取材入るんで写真ヨロシク』とのオーダーでのこのこ出撃し、おなじみ神谷さんと番組ディレクターさんの名刺ゲット。


調子に乗って写真まで撮ってもらうありさま・・・
他の写真はお客さまのウェブサイトにて・・


このお客さまはウチの開業と同時期に工場設立。
いよいよ来月は株式会社になるそうで。

2008年6月13日金曜日

ホームページ作成検定試験模範解答

ウェブサイト制作の民間資格や検定はたくさんありますが、いずれをとっても独占資格の類ではないので有形無実といたっところ。

先日、ホームページ作成検定の1級持ってます』と仰る方がおりまして、諸般事情にてスキルチェックをすることになったのですが、結果は「なにそれ?」な程度。
主催協会(?)のサイトに問題例と解答例が公開されているので、それを元にこの「1級」がどんなものをを書いてみます。

ソース:日本情報処理検定協会 ホームページ作成検定試験1級


ウェブ制作に従事する者ならコレがどういった性質のものか理解できると思います。
実際、この「回答例」は間違いだらけでして、これをもって答案を採点するなんてとんでもない話だと思います。もちろん求人募集の際のスキル評価の目安にもなりません。

これが「このHTMLソースの間違いを訂正せよ」というなら1級の名に恥じないかもしれませんが・・

多分この記事は検索で引っかかるので、「1級」という名に相応する目線で間違いの指摘をしてみます。
(解答例を上から順に端的に・・)

  • DTD宣言が抜けています。FRAMESETを使わなければなりません。
  • 特に指定があるものを除き、HTMLタグは小文字で記述すべきです。
  • <HTML>に言語属性が抜けています。
  • <HEAD>がありません。文字コード指定等、全て抜けています。
  • <BODY>の「BACKGROUNDはNGです。CSSで。
  • 「受験番号~」は文章ではないのでPタグは不適切です。
  • <P align="center">はNGです。CSSで。
  • <IMG>のBORDERはNGです。CSSで。
  • <IMG>に代替属性であるALTが含まれていません。
  • <CENTER>はNGです。CSSで。
  • <TABLE>のBORDERとBACKGROUNはNGです。CSSで。
  • <TABLE>に表の概要を記すSUMMARY属性が含まれていません。
  • <TBODY>は表をレイアウト目的に用いるときは使用する意味がありません。
  • <A>の「TARGET=BLANK」はNGです。
  • ALT属性の値に感嘆符(!)が含まれています。
  • リンクタグにメールアドレスを記述すると迷惑メールが増える原因になります。


  • <SCRIPT>タグのLANGUAGE属性はNGです。
  • (JAVAスクリプトをHTMLソースに直書きするのは好ましくありません)
  • <FONT>タグは使うべきではないタグです。CSSで。
  • <U>タグは使うべきではないタグです。CSSで。
  • <INPUT>にアクセスキーやタブインデックスが指定されていません。
  • <INPUT>のテキスト入力項目に初期値が含まれていません。
  • <SERECT>のOPTIONに初期値が設定されていません。
  • <INPUT>のRADIOに続く文字列がLABEL指定されていません。


  • フレーム未対応ブラウザ用の代替ソースが存在しません。
  • このHTMLは論理構造化されていません。

というか出題自体が間違ったことをせよ、、と指定してるし・・

模範?解答(サイト掲載解答例の補正のみ)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="Content-Style-Type" Content="text/css">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>回答例</title>

</head>

<frameset title="フレーム対応ブラウザ用">

<frame src="menu.htm" name="up" title="フレームの上">

<frame src="menu.htm" name="down" title="フレームの下">

<noframes title="フレーム未対応ブラウザ用">

<body>

<!--▼▼フレーム上部分▼▼-->

<div style="background:url(back1.gif)">

<div>受験番号 名前</div>

<div style="text-align:center"><img src="title.gif" width="536" height="88" alt="徳川種苗園"></div>

<div style="text-align:center">

<p>家庭菜園をはじめてみませんか?<br>自分で作った野菜で作る料理は格別です!<br>ほかにもハーブやガーデニング用の苗も扱っています。</p>

</div>

<div style="text-align:center; margin:0 auto">

<table style="border:5px; background:url(pic1.gif)" summary="この表はナビゲーションメニューらしい">

<!--この表はレイアウトに用いられているため見出しに相当するセルがありません-->

<tr>

<td style="text-align:center" rowspan="2"><img style="border:none" src="pic2.gif" width="150" height="96" alt="新鮮"></td>

<td style="text-align:center"><a href="page1.htm" target="down">家庭菜園</a></td>

<td style="text-align:center"><a href="page2.htm" target="_blank">ハーブ</a></td><!--TARGET=BLANKはNG-->

<td style="text-align:center"><a href="page3.htm" target="_blank">ガーデニング</a></td><!--TARGET=BLANKはNG-->

<td rowspan="2"><img style="border:none" src="pic3.gif" width="150" height="96" alt="安全"></td>

</tr>

<tr>

<td colspan="2"><a href="form.htm" target="down">苗のプレゼントを実施中!!</a></td>

<td style="text-align:center"><a href="mailto:*****">MAIL</a></td>

</tr>

</table>

</div>

</div>

<!--▲▲フレーム上部分▲▲-->

<!--▼▼フレーム下部分▼▼-->

<script src="script.jp" type="text/javascript"></script>

<div style="background:url(back1.gif)">

<p style="text-align:center; text-decoration:underline; font-size:xx-large; color:#0000ff">プレゼント申し込み</p>

<p style="text-align:center">応募されたかたの中から抽選で20名様に苗をプレゼント!<br>3種類の苗の中から。お好きなものを選んでください</p>


<div style="text-align:center; margin:0 auto">

<!--form-->

<table style="background:#00ff00; border:1px" summary="問い合わせフォーム">

<tr>

<th scope="row">名前</th>

<td><input type="text" name="name" size="20" accesskey="1" tabindex="1" value=""></td>

</tr>

<tr>

<th scope="row" abbr="メアド">メールアドレス</th>

<td><input type="text" name="mail" size="40" accesskey="2" tabindex="2" value=""></td>

</tr>

<tr>

<th scope="row">苗の種類</th>

<td>

<select name="plant" tabindex="3">

<option value="p1" selected>ピーマン</option>

<option value="p2">なす</option>

<option value="p3">トマト</option>

</select>

</td>

</tr>

<tr>

<th scope="row">株数</th>

<td>

<input type="radio" name="su" id="su1" value="3" tabindex="4"><label for="su1">3株</label>

<input type="radio" name="su" id="su2" value="5" tabindex="5"><label for="su2">5株</label>

<input type="radio" name="su" id="su3" value="7" tabindex="6"><label for="su3">7株</label>

</td>

</tr>

</table>

<div style="text-align:center">

<input type="submit" value="申し込む" accesskey="s" tabindex="7">

<input type="reset" value="リセットする" accesskey="c" tabindex="8">

</div>

<!--/form-->

</div>

<script src="plant.js" type="text/javascript"></script>

</div>

<!--▲▲フレーム下部分▲▲-->

</body>

</noframes>

</frameset>

</html>


これなら1級の名に恥じないかな?

2008年6月10日火曜日

便利だからといってもねぇ

SEO案件を引き受けたときに困るのがPHP。
ページレイアウト内の共通箇所の自動取り込みやケータイ端末等のキャリア分けで便利なので、最近引き受けるSEO案件はPHPが使われているケースが多いです。

がしかし、なんというかこう、使い方間違ってない?? といったケースが散見します。

↓コレはDreamweaverのテンプレート挿入機能


HTMLのヘッダまでインクルードしちゃうなんて何を考えてるんだか・・
しかもブラウザの文字サイズ変えただけで崩れまくるテンプレだし。

手ぇつけられせんがな・・・

何十万も獲っておいてこんなヘチャな設計で納品して平気なのですかね?大手は・・

2008年6月4日水曜日

三代目ブログ開始

suwsjp
三代目のブログです。
二代目ブログは検索キーワードに関するうんちくというテーマでどれだけアクセス拾えるか試してみよう!、といった実験的な企画を開始したした途端、ログインパスワードを忘れてしまう大失態で放置状態となってしまいました。

三代目ブログはアクセスも技術情報も意識せず、ゆるゆるだらだらと近況日記中心で書いていく方向で。。

三代目はグーグル提供のブログサービスですが、プロバイダ系ブログとはかなり使い勝手が違うように感じます。
操作画面とかアクセシブルな気配を感じますが、文字がかぶさって表示されたりするので使い辛いかも?というのが第一印象。

慣れるまで時間かかりそうです。