静岡WEB屋

移転

2009-01-02T03:50:00.001+09:00

諸事情にて移転します。

移転先→http://d.hatena.ne.jp/cyber-rouge/

個人の限界

2008-09-29T03:19:00.007+09:00

先日、某ウェブシステム開発会社からお仕事を頂きまして、その時に痛感したこと。

デザインカンプができているウェブサイトのコーディング（HTML化のこと）をします。
コードのチェックが終わり文章のチェックが終わり、次にやるのがブラウザ互換チェック。

ウェブ制作に従事してる方ならご承知のとおり、一般的なウェブブラウザであるIE（InternetExproler）にはCSSを正しく解釈しないという不具合があります。

要するに、ここに問題があると見る人（パソコン）によってレイアウトが崩れたりするわけです。

他のウェブブラウザにも大なり小なり「クセ」がありまして、それを解決する、即ちおおよそ流通してるウェブブラウザで同じように見える状態にして、はじめて「商品」「製品」として納品ができます。

ブラウザ互換が成されていないのに納品するヘチャなウェブ屋もたくさんいますが・・

ウチはデザインが弱いかわりにHTMLやCSSのコーディングはとりわけ強いと自負している（いた）のですが、今回の問題はなかなか解決しません。

6時間格闘の末、ついに発注者さんに泣きを入れました（恥）

と・こ・ろ・が・・・！

『ここの領域に入れちゃえばいいんでないの？』

・・・まったく盲点

その方法でやると別の箇所に新たな不具合が出たものの容易く解決。
なんでこんな単純なコトに6時間以上も気づかなかったか・・・・

まぁ、こういうのが１人（正確には今は1.5人）でやってる限界なんだと思う。
頭脳は質もそうだが数も大事だということをあらためて痛感した瞬間でした。

人欲しいな・・・・

というわけでもないですが本格的に技術者募集。
現在DTP上がりのお手伝いさんがいますが、今度の募集はウェブ屋の経験者に限定するつもり。
詳細はウェブにて・・・っていうか、まだ詳細煮詰めてないので・・

立て込んでます

2008-08-28T03:57:00.004+09:00

たくさんのお仕事を頂戴いたしまして嬉しい悲鳴状態です。

新規制作２件、
リニューアル３件、
ページ追加１件、
ＳＥＯ２件、

それに着付け屋もやらんといかんな。いまだに浴衣出しっぱなしだし。。。

既に30代後半のオッサンには体力的にムリですっ
完全にキャパオーバー

という現状ですが、
特にこの１ヶ月（びじねす上の）新たな出会いが多いです。
新規のお客さんであったりデザイン屋さんであったりウェブ屋さんであったり○○○であったり・・

最近入っている仕事はそういう中で頂いているわけで、間違いなくウチのまわりには上向きの突風が吹いているように感じます。

であれば、流れに乗ればいい・・・と思うわけです。

いずれにしてもウチの仕事が転機を迎えているのは間違いないみたい。

さぁて、六本木ヒルズの空き部屋状況でも訊きに行くかぁ
ってなことにはなりませんが・・・

EF50/F1.8 被写界深度実験

2008-08-18T02:43:00.014+09:00

知らん人も見てるかもしれないので書いておくと、被写界深度とは「ピントの合う範囲」のことです。

カメラはレンズに付いてる「絞り」という機能で入り込む光量を調節しますが、同時にそれはピントの合う範囲の調整にも用いられます。
グラビアとかの人物写真では背景がボヤっとした写真をよくみかけますが、そういうのが被写界深度を利用した撮影技術です。

とまぁ、撮影テクニック記事じゃないのでこれくらいにしておきます。
本題は次。

僕はキャノンのEOS-KISS/XにEF50/1.8というレンズを付けた状態で常用しています。

デジイチエントリー機に単焦点レンズという組み合わせが既にシロウトっぽくない（？）のですが、この組み合わせはとにかく機動性に優れます。
標準域の単焦点なのでそれなりに絞りが開くため、薄暗い場所や室内でもストロボ無しで撮れてしまいます。
何より軽いので取り回しがいいのがお気に入り。

が・・ピントが甘い
ウチの姫様を撮るとほとんどの写真でピントの芯がズレているように感じます。（というか間違いなくズレてる）

ウェブ用は少々ピントが甘くても画像そのものが小さく何とでも誤魔化せる（！）ので問題はないすが、チビの写真は印刷したいのが親バカってものです。

F3を下回る絞り値を使うとピントの合う範囲は距離は5ミリとか10ミリとか言われるので確かに技術を要しますが・・・

そこまでヘタじゃないぞ（・・・たぶん）

10枚撮れば2～3枚はあたってもいいはずである。（・・・たぶん）

というわけで、僕の技術が未熟なのか機械のせいなのか検証してみました。

ちなみに撮影条件は・・

カメラから約50センチ離した箇所に定規を置き・・

三脚に載せ・・

オートフォーカスでピントを合わせた後にオートを解除

シャッターはリモコンで操作

絞り優先モードで露出は固定

撮影のために定規は斜めに設置しており、ピントが合ってる付近の定規１センチの間隔は実寸3～5ミリ前後です。（もちろん遠い箇所はもっと狭いです）

なお、定規がキレイじゃないのは思いつきでやってるからです。

一体型やズームレンズで「明るい」と呼ばれるのはこれくらいです。
画像が小さいのであんまりわかりませんが、原寸画像で見るとF1.8との違いはハッキリとわかります。

技術参考書曰くの「高打率なF値」はこれくらいみたい。

キットレンズや廉価のズームレンズは開放でこれくらい。

人間が「眺めて見た状態」がF8からF11くらいらしい。
この写真は接写の部類なので背景がボケてますが、普通にとると画面全体のピントが適度に合います。
ハズせない写真を撮るときもだいたいコレくらいの絞り値を使います。（僕は）

EF50/1.8の限界絞りです。
背景が草木であることがわかります。
F22はスナップとかで使うと距離感がなくなる程なので通常は使わないです。

ところで実は、ピントはこの画像にある矢印の箇所に合わせています。（縦に入っている目盛りにコントラスト差があるので合わせやすかったため）

最初のF1.8をもう一度見てみると・・・

思いっきりズレてるやんけ・・・・

実寸で１センチくらい前寄りになってる。

ということでネットで調べてみると・・・

EF50/1.8は5ミリほど前ピンになる

という情報がたくさん出てるじゃぁありませんか！
いろいろ読んでみると固体毎の欠陥ではなく「そういうもの」らしい。。

とりあえずピンボケは機械のせいであることが判明（？）したとゆーことで。。。。

・・・・レンズ欲しいな

SBSの取材がやってきました

2008-07-27T19:03:00.005+09:00

他の写真は画像をクリック

ウチで運営してる着付け屋にテレビの取材が入りました。

集客の100％がホームページ。
そのアクセスルートの100％が検索エンジンである着付け屋は、ウチのSEO技術のサンプリングモデルでもあります。

着付け屋は今回のSBSを含めて過去に５回のメディア露出をしています。

メディアの制作会社さんも取材先の抽出は検索エンジンを使うことが多いので、SEOを施しておくと思わぬカタチで効果が出るといった、小規模事業紹介系サイトにおけるSEOの可能性のようなものを垣間見ます。

とはいえ、それを狙ってコンテンツ作ってるんですがね。

その着付け屋のアクセスはというと、
全国的に花火大会が集中する先週（～26日）１週間の平均PV数は1日あたり6000超。
これは非通販・個人規模の美容業サイトの中では（おそらく）全国的にもトップクラスになるのでは？？と思っています。

まぁ、比較対象に通販を含めると全然足りませんがね。

とかいう着付け屋ですが、
ホームページのイメージで「来店」するお客さんは、まずビックリです。
なんたってお店と思って来た先は自宅権兼のマンションの一室なんですから。

しかも今回はテレビ＝動画であり、しかもウチを映すとゆーのですから・・・・・
ライティングの電源入れた途端にブレーカーがオチたり（笑

・・事務所ほしいな

目指すもの

2008-07-11T23:36:00.024+09:00

先日、某遊技機メーカーに勤務する友人と久々に呑みまして、年相応なお話をしてまいりました。

某遊技機メーカーの新製品

友人は僕と同じく転職の繰り返しで履歴書真っ黒の高卒でありますが、いわゆる「努力する天才」って奴で、今やたくさんの子分と重責のあるポジションでがんばっています。

そんな彼曰く・・・
伝手も人脈も無い土地で自身の才覚だけで４年以上喰ってるなんて「ありえん」らしい。

まぁ、この話に流れる経緯はどうでもいいですが、最近はコレを自覚し、あるいは人前でも堂々と言うようにしてる。

客：『（社交辞令で）アンタ凄いね！』
僕：『ええ、自分でもそう思います』

ってな感じ。

お客さんは凄い人間に仕事を出している
↓↓↓
僕は凄いと思われるに相応する仕事をしなければならない

・・・とまぁ、善意に解釈してもらえるとちょっと嬉しいかも。

カブトムシ

2008-06-28T02:19:00.010+09:00

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

♂１　♀４

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

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

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

K-MIXの取材

2008-06-23T03:37:00.008+09:00

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

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

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

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

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

2008-06-13T02:10:00.016+09:00

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

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

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

試験問題（別窓で画像が表示されます）

解答例（別窓で画像が表示されます）

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

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

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

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>

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

<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">応募されたかたの中から抽選で２０名様に苗をプレゼント！<br>３種類の苗の中から。お好きなものを選んでください</p>

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



<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">３株</label>

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

<input type="radio" name="su" id="su3" value="7" tabindex="6"><label for="su3">７株</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>



</div>

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

</div>



</body>

</noframes>

</frameset>

</html>

これなら１級の名に恥じないかな？

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

2008-06-10T02:12:00.012+09:00

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

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

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

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

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

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

三代目ブログ開始

2008-06-04T03:44:00.009+09:00

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

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

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

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