hvc-001

1年齢は？

31歳

2パソコン歴は？

16年

3コーダー歴はどれくらいですか？

3年くらい

4初めてwebを作ったのはいつですか？

13年くらい前に windows 付属の Frontpage expres で日記サイトを。

5コーダーになろうと思ったきっかけは？

成り行き

6コーディングは誰に／どこで習いましたか？

独学

7web業界以外の友達・家族とコーディングの話をしますか？

ほぼしません

8ご両親はインターネットユーザーですか？

アナログ人間です

9視力はいくつくらい？メガネ・コンタクトどちらですか？

一番上がみえません。メガネと1dayコンタクトを兼用。

10本はAmazonで買いますか？

プライム会員だけど利用するのは時々

11ネットショッピングをしますか？主に買うものは何ですか？

そこそこする。フィギュアとＰＣパーツ、音楽の機材

12携帯サイトで買い物をしたことがありますか？

ない

13お酒は強いですか？

つい先日放送中に飲んだビール１缶で吐いた。

14休日の過ごし方を教えて下さい。

アウトドアならカメラ持って散歩、雑貨屋めぐり。インドアならネトゲ、ファミコン、配信。

15今、欲しいものは何ですか？

忘却スイッチ

16平均睡眠時間を教えて下さい。

5～6時間

17平日の起床時間は何時ですか？

まちまち、昼前後

18なにかスポーツをしていますか？

下手なスポーツより汗だくになるので、バンド。

19パソコンと関係ない趣味がありますか？

音楽

20コーディングに役立つ資格、パソコン関係の資格を持ってますか？

全く無い

21昼と夜、どちらの方が仕事がはかどりますか？

時間よりもメンタリティ。スイッチが入れば何時でも。

22ブラインドタッチは教本通り10本の指を使いますか？

はい

23眠い時の対処法はありますか？

大声を出せる場合は出す。

24息抜きについ見てしまうサイトはなんですか？

twitter、フィードのチェック

25他に息抜きにしていることがあったら教えて下さい。

ギターか自慰

26仕事上で得意なことはありますか？それは何ですか？

まだまだありません。

27仕事中にBGMは聞けますか？能率が上がるのはどんな音楽ですか？

まったりするならアニラジ、能率を求めるならレトロゲーBGM、思案の必要がある場合は音楽は切ります。

28作業パソコンはWin?Mac?

Windows

29作業パソコンはデスクトップ？ノート？

デスクトップ

30作業パソコンのマウスは標準マウスですか？

intellimouse （BT） 非常に使いづらい、買い替え予定

31マウスパッドは使っていますか？

パチュリーのむきゅんマウスパッドを楽しげに使用

32作業パソコンにAdobe製品は何が入っていますか？

PSとAI（CS3）

33作業パソコンはモニタは何インチですか？

24インチワイドと17インチスクエアの２枚

34自宅にパソコン持ってますか？いくつありますか？

デスクトップとノートを各１台

35自宅に作業環境はある？

自宅兼職場です。

36会社と自宅、作業はどちらがはかどりますか？

あるならきっと会社

37自宅パソコンは家族と共用ですか？

家族は全くＰＣを使いません

38自宅パソコンはWin?Mac?

Windows。マックも１台持っときたい。

39自宅パソコンのメーカーは何ですか？

自作

40自宅パソコンはデスクトップ？ノート？

メインはデスクトップ

41打ち合わせのメモは手描きとテキストどちらがいいですか？

場合によるが手書きが圧倒的に多い。

42スケジュール管理は何でしてますか？（手帳・アプリケーション・webツール・モバイルなど）

Googleカレンダーとiphoneのtodoアプリの連携

43メーラーは何を使ってますか？

主にgmail、昔はedmax使ってました

44RSSリーダーは何を使ってますか？

Google reader

45好きなポータルサイトはどこですか？

google appsでスタートページ作ってるのでポータルサイトは利用しません。

46ブックマークは何で管理していますか？

はてブ。なんとなくdeliciousと同期してます

47不得意だけど使わねばならない技術はありますか？

flash

48web系の雑誌を購読していますか？

ウェブクリ、ウェブデザを１年程買って、今は立ち読み。

49webの参考書は何冊くらい持っていますか？

２０冊くらいあるけど内容だいぶかぶってる。

50お薦めの参考書があったら教えて下さい。

MdNのムック。あとははじめたばかりの頃、web制作についての考え方の指標になった『「XHTMLマークアップ＆スタイルシート」リフォームデザインガイドブック』

51参考にしているおすすめサイトがあったら教えて下さい。

コリス、CSS HappyLife

52コーディングに使ってる、便利なツールを教えてください。

terapad

53コードにコメントはつけてますか？

全て一人で作業することがほとんどなので、div閉じのコメントくらいしかつけない。

54制作過程で、どの作業が一番好きですか？(コーディング、画像作成、検証、打ち合わせ)？

CSSハック以外ｗ　まぁ、打ち合わせが一番好きです。テンション上がるので。

55画像切り出しに使うソフトはなんですか？

PS。効率化考えてFireworksは勉強したい。

56webデザインに使うソフトはなんですか？

PSとterapadで手打ち。作業としては好きだけどFW導入は真剣に考えてます。

57検証対象ブラウザは何個ありますか？

6個くらい。モダンブラウザは最新バージョンしかしません。

58一から新規制作とリニューアル、どちらが好きですか？

新規制作

59定期運用と新規制作、どちらが好きですか？

どちらも

60テーブルコーディング業務はありますか？

ほぼない。テーブルレイアウトのサイト修正の時くらい、リフォームしたい。

61新規制作の割合はどれくらいですか？

８割くらい？かな

62iPhoneサイトのコーディングをしたことはありますか？

無いです

63よく使うJavaScriptがあったら教えて下さい。

スムーススクロール、ロールオーバー。ああいう動きはwebにあまり触れてないクライアント受けがやたらいい、もしくはそーいったものを求められる。

64携帯サイトのコーディング業務をしていますか？

１回やったけどしんどかった。

65FLASHはどのくらいできますか？

ほとんど出来ないレベル

66いま興味がある技術はありますか？

js。html5とcss3も気になってはいる

67自分の書いたコードは美しい？

制作開始から（度重なる仕様変更で）締切までに二次関数的に酷くなる。（ことが多い）

68ソーステンプレートを作っていますか？

パーツによっては

69単語登録にタグを登録していますか？

してない、したい。

70HTML5、早く実務で使いたい？

んー、まだ様子見

71CSS3、早く実務で使いたい？

使いたい。

72コーディングで伸ばしたい技術は？

もっと上手にブロックレベルを扱いたい

73コーディング以外で伸ばしたい技術はありますか？

デザイン

74職場にコーダー専門職は何人いますか？兼務は何人ですか？

フリーです

75職場のコーダー男女比はどのくらい？

フリーです

76勤務時間は何時から何時までですか？

起きてから夜食の準備まで。

77通勤時間はどのくらいですか？

自宅

78月の残業時間は最高何時間でしたか？

無し

79現在の仕事環境で良いところはどんなところですか？

自室は落ち着く

80デザイナなど他の仕事とコーディングを兼務してますか？

はい。デザイン苦手なんでどうにかしたい。

81職場は服装自由ですか？何か規則はありますか？

自由

82休日出社や徹夜作業はありますか？

休日は自分で設定。徹夜は締切次第。

83プライベートでサイト／ブログを持ってますか？

ここです。

84プライベートでドメインを持っている。

はい

85プライベートでサーバーを持っている。借りている。

コアサーバー。cron使える、（ロリポに比べて）MTの再構築がはやい、何より安い。

86CSS Niteには何回行きましたか？

０回

87地方のCSS Nite行ったことありますか？

広島でも月末あるみたいだが......。

88尊敬するwebクリエイターがいたら教えて下さい。

技術とそれを支えるメンタリティを持つ人全て

89旅行に行く時パソコンを持っていきますか？持っていきたいですか？

持っていかないし、持って行きたくない。iphoneで十分すぎます。

90好奇心を満たす面白い仕事を無償でやったことがありますか？どんな仕事でしたか？

配信を見た人から話は持ちかけられたけど、メールの内容が不愉快だったのでキレ気味に断った。

91ディレクターなどキャリアチェンジを考えてますか？一生コーダーを貫きますか？

コーディングだけじゃ食えないのでデザインをもっと頑張りたい。

92特定のパートナー（彼女・彼氏・夫・妻）がいますか？相手は同業者ですか？

特定のパートナーは二次元だったりPVC製だったりします。

93パートナーは同業者がいい？別の職種がいい？

別の職種がいい

94コーダーをやっててよかったなあと思うときは？

狙い通りのSEOの結果が出た時

95何年後／何歳までコーダーをやるつもりですか？

現在コーダーが専業じゃない（というかそれだけで食えない）のだけど、実際それだけで食えるようになっても（webの将来的に）怖いので新たな技術には貪欲でありたい。

96次の締め切りはいつですか？

データ待ちの状態

97コーダー以外だったらどんな職に就きたいですか？

ファミコンショップ

98よいコーダーの条件を３つあげてください。

バランス感覚の良い人？かな。柔軟な対応力と潔い諦めができる人。

9910年後、あなたは何をしてると思いますか？

思うように生きていると思います。

100コーダーとしての自分を100点満点で評価してください。

65点。IE6が無くなったら75点くらいにはなる。

このブログは W3C の validator にて xhtml css共に合格していたんですが、another html-lint では満点をとっていなかったので、ちまちまと修正を加えて100点に修正しました。

• Markup Validation Service（このサイトの結果）
• CSS Validation Service（このサイトの結果）
• another html-lint（ゲートウェイ）

スッキリ☆

これはすごい！すごいすごい！

web制作をする上でクロスブラウザのチェックは必須作業なんですが、そのために多くのブラウザを導入する必要があります。
自分もIE7/6,FF,Opera,Safari,そしてメインで使っているchromeを入れてます。

ですが、どーも複数のブラウザを入れるのは精神衛生上あまり良くないです。気持ち悪いというかなんというか。

そこでこの Browser Sandbox です。
XENOCODE の仮想化技術を応用して、windowsであれば、インストールすることなしに指定のウェブページからブラウザを起動することができます。

IEの複数のverの共存もこれでずいぶん敷居が低くなりますね。

しかしこのプログラムの仮想化技術はブラウザ検証に留まらず、とても興味深い技術です。
仕事で利用するアプリケーションがどんどんクラウド化する中、プラットフォームが流動的になりがちな自分には強い味方になりそうです。（どのＰＣでも簡単に検証ができる）

いや、まんまなんだけど一応ね。
すっかり携帯の方に拍手つけるの忘れとった。

個別記事のエントリ下に拍手をつけます。
mt4i3.0 の個別記事テンプレートは individual.tmpl なのでその中にぶちこみます。 mt4i3.0 のテンプレートは HTML::Template が使ってあるので、iTMPL_IF タグの中に突っ込んで表示されないなんて事にならないようにね。

<a href="http://webclap.simplecgi.com/clap.php?id=16shot&page_id=mt4i">web拍手</a>

せっかくの携帯なんでアクセスキーも設定します。
拍手だけに８（ぱち）にしたかったけど位置的に邪魔だからやめたｗ
とりあえず無難に２をチョイス。ソースはこんな感じ。

<TMPL_VAR NAME="ICON_NO_2"><a href="http://webclap.simplecgi.com/clap.php?id=16shot&page_id=mt4i"<TMPL_VAR NAME="ACCESS_KEY_2">>web拍手</a>

無事、設置完了。
問題は拍手後はブラウザバックしなきゃ駄目ってトコロ。
web拍手はテンプレもっと弄れたらいいのにな。

拍手には色々と種類あるけど、やっぱこのスタンダードな拍手が一番好きです。
FC2拍手はなんかもっさりだし、めんどい。ＧＪなんかがカナリ良い感じだったけど、js 必須ってのでアウト。

んー。もっと良い拍手cgi無いかな。

すっかり携帯のページに解析つけるの忘れてた。

mt4i3.0 からテンプレートが利用可能になって随分カスタマイズしやすくなってます。
タグ埋め込みタイプの解析なら tmplディレクトリ内に mt4iディレクトリがあるので、その中の該当テンプレートにタグを埋め込みます。

ボクが使ってるのは body の終了タグ直前にタグを埋め込むタイプのものだったので、 footer.tmpl にタグを記述。

無事に解析してくれました。

アクセス解析については忍者をずっと使ってたんだけど、futomi's cgi cafe のアクセス解析が個人利用で1,000円、商用でも2,000円でなかなか優秀です。 Google Analytics が携帯サイトに対応してくれたら乗り換えるんだが...

打ち消し線を引いてみたらバリデーターでＮＧが出た。
というのもＭＴの打ち消し線は strike要素 を使っているからで（ strike要素 や s要素 での打ち消し線は非推奨要素）、宣言をしてる割にこんな初歩的な見落としでＮＧ出してる自分ってどうなんだと思うんだけど、まぁそれは日々勉強ということで。

実際、準拠した取り消し線はどう書くのかというと、 del要素 や css を用いるわけだけど、文法的に「これはもう削除しています」という内容を明示したければ del要素 、自分へのツッコミも兼ねた小声効果としての打ち消し線なら装飾扱いとして css を使った方がよさそうですね。

つか、そもそも 「打ち消し線を出したい」 って考えが間違っているわけで、装飾って意味で打ち消し線を出したいなら css での打ち消し一択になるわけですよね。（ html での装飾って考え自体が間違っているわけだから。）

本来の意味で del要素 を使用する場合は、混乱を避ける為にも del要素 でマークアップした内容を display: none で非表示にして、 ins要素 にて追記、文書内に削除訂正した旨を併記、がいいのかな？？
とはいえ、スタイルシート無効の環境もあるわけだし。

うーん、煮え切らない。

いや、すっかり罠にはまってました。前回のエントリで紹介した、

target="_blank"を使わずに新しいウインドウを開く方法

だけど、これがメインページからは機能するのに個別記事では機能しない。
何でだろ？と調べてみたら小粋空間さんのテンプレートでは mt.cgi の中に window.onload の記述があって、アーカイブや個別記事で先に動いちゃってるみたいなんです。

window.onload は１ページに１回しか機能しないって事なんで、代替案として prototype.js の Event.observe を使ってみました。

前回紹介した target="_blank"を使わずに、rel="external"、rel="external nofollow"で新しいウィンドウを開く方法 （ 海外のSEO対策・SEOツールをわかりやすく解説するブログ さん）で紹介されている js ファイルの最後を

window.onload=externalLinks;

から

Event.observe(window,'load', externalLinks, false);

に変更、prototype.js をヘッダー内に追加する事も忘れずに。

<script type="text/javascript" src="/パス/prototype.js">

これで無事個別記事でも動きました。
いや、これ当然の事なんだろうけど、すっかり見落としてました。
MT で window.load 指定して動かなかった方はチェックしてみてください。

web制作の仕事をしてると言葉ばかり先行して web2.0 や、最近だと クラウドコンピューティング なんて実体があるのかないのかよくわからない言葉が蔓延してるどころか、クライアントがそれを理解しようともせずに 「とにかく新しくて良さそうなものだから盛り込んでいこう」 的なノリで発注してくることもあったり。（しかしこっちも殺し文句としてそういった言葉を使ってしまうこともあるが。）

まぁ皆が幸せになる（なれる可能性のある）方法をとるならば新しいウインドウなんて開くようにする必要は無いわけで、古い話これはもう４年以上前から言われてるんだけど。

原則論を貫けば怠惰な閲覧者に「ユーザビリティが低い」と罵られ、現実論で突き進んでも理論派に「ユーザビリティが低い」と批判されます。絶望的な状況です。趣味でやっている製作者は、純粋に自分の好きな方を選べばいいと思う。私は原則論を重視したい。だから、こういう。

バカな閲覧者は勝手に不幸になればいい

新しいウインドウを強制してしまうと同一ウインドウで開くという自由を奪われてしまう（shiftクリックしてくれよ！）って話です。

でも４年以上たった今でも相変わらず閲覧者の殆どは学ぼうとせず、同一ウインドウは不親切！！といわれるわけで。
（タブブラウザも普及してきて新しいウインドウもさしてウザくはなくなったとは思うんだけど）

まぁそれはおいといて！

とりあえずファッションでも何でもなく、xhtmlでvalidと評価される状態にしたいってことで targetを使わず新しいウインドウを開くようにしてみました。
現在 target="_blank" を使わない選択肢はいくらかあるんですが、今回はこちら

target="_blank"を使わずに、rel="external"、rel="external nofollow"で新しいウィンドウを開く方法 （ 海外のSEO対策・SEOツールをわかりやすく解説するブログ さん）

のやり方でやって......って、けっきょくコレだと _blank つけてんじゃん！！！

まぁそこらへんは検索してみたら window.open を使うやり方もあるみたいだし、同じく JavaScript で「同一ウインドウで開く」と「新しいウインドウで開く」を並べてのせる方法とかもあるみたい。
でもさ、文字列で同一ウインドウで開いて文字列の隣のアイコンで新しいウインドウで開いたとして、その判りやすくて便利な機能を果たしてどれだけの閲覧者が理解してくれるのか。

いや、マジな話、新規ウインドウで開くアイコンを並べたとして、そのアイコン無視で文字列クリックして「同一ウインドウじゃねーか！」とか言う閲覧者もそこそこ居ると思うんだ。
そのうち「新しく開くアイコンは小さいから押しにくい！」とか言いそうだし、まだ新規ウインドウで開く事を望む人が多い中で結局どないせーと。
だからもうそこらへんの匙加減はお好みでいいんじゃないかと思う、というか作る人、会社の好みとか信念で。
つか正直どれがベターなのかいまいちわからんとです。（併記するのがいいとは思うんだが......）

ちなみに外部リンクにはアイコンをつけて区別するようにしました。
CSS で外部リンクにだけアイコンを表示
↑こちらを参考にしました。

valid にさえなればいいのか......？と考え出すとちょっとスッキリしない、ううむ。

いかにもウェブログ！な機能ですよ。
投稿したエントリーから以前投稿したエントリーに関連付けするプラグインです。
リンク、被リンク、両方向と選べます。

エントリーの関連付けを行うプラグイン（ＭＴ４専用版）

プラグインをアップして、テンプレートの関連付けリストを表示したいに部分にタグを挿入すればokです。
cgiファイルのパーミッション変更をお忘れなく☆

携帯電話でも表示出来る様に、ということでmt4iを導入しました。

自分が使ってるサーバー（ロリポップ）ではmt4i3.0に必須のperlモジュールである Encode と HTML::Template は既に入っているので、そのままアップするだけでokでした。 wiki のインストール説明がわかりやすいので、詳しくは wiki で。
3.0以降はデザインテンプレートも編集可能なので、そのうち弄ろうと思います。

後は携帯からのアクセスを生成されたモブログのurlへ飛ばすだけです。
以前のエントリ Canonicalization（正規化）でも使用した mod_rewrite に以下を追記

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank)
RewriteRule ^$ http://www.hvc-001.com/mt/mt4i.cgi [R,L]

これで携帯からのアクセスはモブログのトップに誘導できます。

ＭＴをＰＨＰ化すれば、携帯での各エントリへのアクセスをそのまま対応するモブログのエントリに飛ばすスクリプトを使えるんですが、まだＰＨＰ化する気もないしとりあえずは以上で。

所謂オタク系サイトではweb拍手ってのはかなりのシェアを誇っていて、多くのブロガーや同人作家がweb拍手を設置しています。
（コメントやメール・メールフォームがあるにもかかわらず！）

たぶんココも「web拍手」のインターフェイスに慣れ親しんだ人たちが訪れるだろうと予測して気軽にコメント出来る様にとブログ記事のメタデータ部分にweb拍手を設置しました。

が！

このままでは 「いつコメントした」 かは判りますが、 「どのエントリを見てコメントした」 かは判りません。
そこでweb拍手のページidを表示する機能を使ってみようと思ったんですが、エントリ毎に本文にいちいちidを記入したソースを貼るのは面倒だし、メタデータ部分に CM や TB とまとめておいて置きたいという思いもあり、自動にidを割り振る方法を考えてみました。

方法は簡単で、MTの変数タグ（現在のファンクションタグ）を使います。
web拍手のidは10桁の英数字で登録可能で、登録方法は拍手urlの末尾に「&page_id=【ページID】」と追記するだけ。
ページIDの部分に変数タグを利用します。このサイトだとこんな感じ。

<a href="http://webclap.simplecgi.com/clap.php?id=16shot&page_id=<$MTEntryDate format="%y%m%d%H%M"$>">web拍手</a>

投稿日時を参照してみました年（下二桁）月日時分の合計10桁。
もっと良い方法無いものか...。

ちなみにコレ、エントリ毎にページＩＤは振れるものの、コメントしか区別できません。
どのエントリを見て拍手したかはわかりません。web拍手さん、有料登録でもいいから解析で拍手の区別出来るほうにしてください！

※レンタルブログを利用してる人も、ブログの独自タグで10桁までの英数字を吐き出すタグがあれば同様の事が出来ると思います。

【favicon（ファビコン）】
favicon ってのは Favorite icon の略で、その名の通り、ブラウザのアドレスバーやブックマーク時にサイト名の横に表示される小さなアイコンです。
これは16×16の ico ファイルを使用するんですが、この ico ファイルは photoshop で画像をつくってもそのまま指定し保存できません。
一度 png なり gif や jpg で作成し FavIcon from Pics にて ico に変換すると良いと思います。

※ちなみにphotoshopでicoの読み込み、書き出しをそれぞれ可能にするプラグインがあります。

Photoshop icoformatICO (Windows Icon) Format Plugin

が、残念ながら現在はダウンロードできないみたい、残念。

後は作成したicoファイルをサーバーにアップロードし、htmlのhead要素内に

<link rel="shortcut icon" type="image/x-icon" href="アイコンファイルのURL" />

を追加すればＯＫです。

【www有り無しの統一】
Canonicalization（正規化）と言うそうです。
このサイトでいうと http://www.hvc-001.com/ か http://hvc-001.com/ ですね。
これは www の有り無しで別サイトとして扱われてしまう為、同一コンテンツを複数のurlで展開させない為に（SEO的にも）統一した方が良いという事です。

方法は301リダイレクトを使います。
.htaccessファイルに

RewriteEngine on
RewriteCond %{HTTP_HOST} ^あなたのサイト\.com
RewriteRule (.*) http://www.あなたのサイト.com/$1 [R=301,L]

と追記するとwww有りに統一されます。無しの場合は

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www/.あなたのサイト\.com
RewriteRule (.*) http://あなたのサイト.com/$1 [R=301,L]

でOKです。
ちなみにwwwの有り無しはSEO的には「どちらでもかまわない」そうです。