2006年7月アーカイブ
2006年7月31日
先日とあるカード会社様のサイトを構築した際には運用ガイドラインを発行しました。クライアント側で運用する場合のトラブルはかなり多いのですが、今回はガイドラインにある工夫をする事で電話がかかってくる回数が確実に減ったと思います。
その工夫ですが、情報源はまたまたサイバーガーデンの益子貴寛様の資料から。いつもお世話になっております。
工夫といっても大した事ではないですが「ブラックリスト」から「ホワイトリスト」にスイッチした、という事。要するに「やってはいけないこと」を書くのではなく「やっていいこと」だけを書くという事。
詳しくは企業秘密ですがクライアントにどの様なガイドラインをお送りしたかというと・・・
------運用ガイドラインの項目--------
- 更新の際に修正すべき箇所（キャプチャ画像を添えビジュアルとソース双方の該当箇所を明示）
- ファイル構成
- 使用する文字サイズインデックス
- 使用するボタンインデックス
- 使用するカラーインデックス
- 使用するタグ一覧
- 更新該当箇所のCSSコード見本（変更箇所はclass名、id名背景のパスを変える程度）
- 使用可能なCSSハックインデックス
- 更新該当箇所のイメージの情報（フォント、カラー、サイズ）
- class/idの命名規則
ホワイトリスト方式でいくと大抵の更新作業はコントリビュートで十分可能であるし、新規ページの追加も専門家でなくても比較的容易に行えます。ガイドラインは身をたすくる。
ガイドラインを少しだけ
2006年7月29日
金曜なのに誰も遊びにさそってくれないので朝まで生テレビを横目にいくつかサイトに機能をプラスしました。
見た目無視で機能優先です。
- 投稿日時の横にhatenaとdel.icio.usの簡易にブックマークできるアイコンをつけました
- 左のカラムの最下部に色々ソーシャルブックマークへの簡易登録バナーをつけました
hatenaとdel.icio.usへのブックマークを簡単に行えるアイコンの設置は前から導入しようと思っていましたが、こんなに簡単にできるとは思いませんでした。
ちなみに以下の記事を参考にさせていただきました。
- JavaScript++かも日記様
- my del.icio.usへの追加リンク
- NDO::Weblog様
- Movable Type に「このエントリーを含むはてなブックマーク」ボタンを表示する
今後ともよろしくお願いします。
2006年7月28日
来週書くといった具体的なマークアップ方法です。
まず第一の工程としては
デザインから起こす場合は文章を抜き出して本来あるべき形に並べて下さい。イメージになっている文章等もなれ
この際注意する事というのは、文章としての妥当性。たとえば皆さんが普段読んでいる新聞の様に上から下に向けて文章を読んで意味が通じる形を心がけるとうまくいくと思います。
そして出来上がった文章をマークアップしていくわけですが、まず第一の目標地点は見出しを見つける、設定する事です。
見出しは必ず（不可能でない範囲で）h1から順番に下位へマークアップしていき、階層構造をキープしているのが理想です。この作業を滞りなく行いたい為、先週書いたライティングスキルが必須というわけです。気に入らなければここでリライトを行うのも一つの手です。
その他、リストはリスト、表はテーブル、段落は段落とマークアップしていくと、この時点でタグで囲まれていない箇所は無くなるはずです。そしてこの段階で＜em＞や＜strong＞等の強調箇所も明確にしておくのが明瞭でしょう。
全体を通してのコツとしては難しく考えない事、普段自分が読んでいる小説や新聞（正確には論文を意識すると良い）はたまた漫画等思い出して同じ感覚でやってみてください。大事なのはマークアップになれることだと思います。
※コメントやメールで質問していただけるとフォローアップし易いのでご遠慮なくお送り下さい。既に頂いております質問等は随時答えていきますので気長にお待ち下さい。
2006年7月25日
先日のエントリーで参考にした魅力ある花形か究極の3Kか？ Webデザイナーの明日はどっち？を見て思うこと。
最近WEBの仕事をしていて自分にも変化が生じている事に気づくときがある、
そんな変化を以下にリストアップしてみた。
：：：：WEBクリエイター：：：：働きすぎじゃないですか？チェックリスト：：：：：：：：
ワーカホリック2.0
- 買い物中「それ、デフォルトでこの大きさなんですか」や、彼女に「ちょっとリテラシーが低いなぁ」等業界の用語を日常生活でも使用してしまう
- 自分の部屋のインテリアまでグリッド配置だ
- コーラフロートでさえclearしないと気が済まない
- 小説を読みながらマークアップしてしまった
- 少年ジャンプでさえfeedを探してしまう
- 髪をセットする際も、style="wax-style:solid;"と思いながら髪をいじっている
- すれ違う女性の唇（#FF0000）、瞼の上のシャドー（#66CCFF）、チーク（#FF3333）、全て１６進数で見えてきた
- ホームに入る電車見て頭に「イージング[-100]」等思い描く
- 紙にメモをとりながら頭に「window.write・・・」と思い描く
このリストに半分以上あてはまる方がいたら改めた方がいいと思います。
僕はもう手遅れです
2006年7月20日
YouTubeの動画を貼り付けてみるテスト
モノはお気に入りの鷹の爪団
このアニメ実は全部Flash、ということは蛙男さんはアニメーターでなくFlashデベロッパーですね。Flashに新たな可能性を感じます
2006年7月20日
最近社内で「あのコーディングが早い人ね」とか「コーディングに詳しい人ね」と称され、一応お褒めに預かっているので光栄ですが、、、
最近まったくもってFlashやデザインやライティングの仕事がなくなってしまい寂しい限りです。典型的なコーダーディレクターになってしまう予感です。
今日も今日とて他人のコーディングのチェック、しかも遠隔で指示、チェックしてもどこから注意すれば良いやら。。。
さて、本題
分離型コーディングのワークフローの最大の特徴は「分業化が進むこと」であり、極みといえばデザインとコーディングが分離するというワークフローが理想です。
今までテーブルコーディングだったけどこれから分離型でコーディングをしようと思っている人に肝に銘じて欲しいことは「マークアップの大切さ」ということです。
HTMLは人間で表せば内蔵みたいなものなので顔がおなかにあったり背中に耳があってはだめですよ。
まずマークアップの基本として覚えなければいけないのは
「HTMLの構成は、見出し・段落・リスト・表からなりたっている」
ということ、これを頭に叩き込めば世間で猛威をふるっているdiv病の病床から復帰する助けになる事でしょう。
マークアップという作業はデザイナーにとってもコーダー（マークアップエンジニア）にとっても最も需要な工程といえます。近頃は猫も杓子もフィードフィードですがフィードの質はマークアップに依存しますしここが気合の入れ時、メインの作業です。
マークアップはディレクターがする場合もありますが本来はライターが見出しや強調箇所を前提としてライティングしてくれればガントチャートの横幅が更に短くなるんですが・・・なかなかライター2.0な方は現れません。
具体的なマークアップ方法はまた来週にでも、ではさよなら。
2006年7月19日
movizoで携帯動画の投稿をblogで公開するサービスやmovizoのAPIも公開されていた。
2006年7月19日
最近はコーディングに関しての質問が同僚からは勿論のこと、最近では他社からも質問メールがる始末で嬉しい反面かなり時間をとられてしまっています。
それでも本社の同僚からの質問ならタイムリーに答えられるが、一番厄介なのは東京支社からの質問。
電話、メールでこまごまと来る質問も積もり積もれば月で１人/２日くらいになってしまいます。
タイムイズマネー,これは月に２～３万のロスです！
そんなこんなで自分なりに質問者対応マニュアルを作成してちょっとでも楽しようと思いまたまた個人的なメモを作成します。
深刻な状況だと思っていてもただのセミコロンがコロンになっていたなどのケアレスミスだったという経験はみなさんも身に覚えはないでしょうか。
日々繰り返される問題を文字に起こす、これもLife Hackかな。
==== おかしいなとおもったらチェックすることリスト ====
- キャッシュはクリアしましたか？
- スタイルシート内のコロン、セミコロンは抜けていませんか？
（Dreamweaverで見ると不自然に青く表示されるので見つけやすい） - タグを閉じ忘れていませんか？
- スタイルシートへのパスはあっていますか？
- 全角スペースを挿入していませんか？
- DTDの記述は適切ですか？
これだけで６割方の問題は解決できる気がする・・・うちの会社だけか！？
2006年7月18日
気になったも何も行ってないのでなんともレビューのしようがありませんが、東京支社の方に聞いたりPodcastで講演を聞いてみたり、資料をプリントアウトしてファイリングしてみたりでバーチャル体験のみで全く利益を発生させない楽しみ方をしています。
早くも参加された方のレビューを多くのサイトで拝見させていただき利用価値の高い情報が集まってまいりました。
さて一つ気に入ったフレーズがあります
サイバーガーデン代表益子貴寛さんのプレゼン資料の中でディグダグテキストテスト（ビデオゲーム「ディグダグ」の中で、プレイヤーがモンスターをポンプで膨らませるのになぞらえている。文字サイズを大きくしてみるテストという意味）というフレーズが気に入って仕方ないので本日もさっそく使ってみました。
ゲームになぞらえてネーミングするセンスはなかなかキャッチーでいいですよね、そこでですが、私の抱えている案件にゲームポータルもありますし新しい用語を昔のファミコンゲームになぞらえて作ってみました。
スペランカーデザイン
スペランカーは自身の半分の高さの段差から落ちても死亡してしまうという非常に虚弱な主人公が特徴のゲーム。スペランカーデザインとは文字サイズを少しでもかえようものならすぐさまレイアウト崩れを起こすデザインである。
グラディウスクライアント
グラディウスは数時間かけて前面をクリアしてもエンディングがなく最終面をクリアするとまた難易度の上がった1面からやり直すというゲーム。グラディウスクライアントとはいくら案件のブラッシュアップを繰り返してもOKをださず何度もやり直しをさせられるクライアントの意。仲間にたけしの挑戦状クライアント（デスマーチ＝たけしの挑戦状）がいる。
と、適当に思いついたものをかいたけど使えないだろうな。
2006年7月18日
今日で連休も終わり、明日からまた仕事がはじめあるんですね・・・
個人的メモ
本日はエントリーページ（個別エントリー）
月別アーカイブページのテンプレートを更新
ほかのページはデフォルトのままですよ。
明日はカテゴリーページを更新しようかな。
後はタグのページ（検索結果）のページをゆっくりいじろうかな。
2006年7月17日
ハッピーマンデー嬉しいですね。
今週も３連休で怠け病にかかりそうです、家からでたくないです。
明日は彼女と会う約束をしているものの、この暑い中どこへでかければよいやらわかりません。
たぶん
集合→ランチ→冷房のきいた所をブラブラ→スタバ→漫画喫茶→晩御飯
って感じなんだろうなあ。世間一般のカップルって何してるんでしょ
一昨日夜海辺を二人乗りで散歩しました、
その時の写真
2006年7月15日
本日よりサイトオープンしました。
これから精進していきます。
尚、これより過去のエントリーは前サイトのアーカイブとなります
2006年7月12日
CSSを書くこと自体は誰にとってもそう難しい事ではないし
実務をこなすと数ヶ月でプロと言って充分な実力もつけられる。
しかししかしなかなか完璧な解決が見つからない問題もしばしば
「CSSの運用と管理」とうするに複数人でのCSSの記述にここ半年程試行錯誤しっぱなし
今SNSを作っているけどページ数がやたらと膨大で管理ができるかどうか心配になってきた
営業との兼ね合いもあるし、突発でスポンサーの都合でページを特別に作ったりする事も考えられる。
アルファ→ベータ→永遠にベータ？っていうリリースの順番だろうけど無駄な記述がザクザク残りそう。
どうしてもポータルやSNS等でかい案件だとページ数が膨大だし半年、一年、二年スパンで考えるとなると
せめて今できる事としてはガイドラインの策定くらいかな。
どうせコーディングするのは自分ひとりだろうから気合入れてガイドライン策定するぞ！
以下は自分に役立つ俺による俺のためのリンク集
「Web制作現場の対立を解消する！(X)HTML+CSSガイドライン作り」
「ビジネス・アーキテクツのCSSデザイン ～コンポーネント管理のフレームワーク～」
2006年7月11日
今日で一週間もあったお休みが終わります。
長い休みですっかり脳が軟化してしまいました。
明日から仕事ちゃんとできるか心配でしかたありません。
「アレのアソコをアレしといて」
「アレがアレなのアレでしたっけ？」
などなど
僕の発する言葉はボキャブラリーが極端に減り代名詞だらけになる事は容易に予想できます。
写真は南京町
2006年7月 4日
新規サイトを制作する際に必須の各UAのデフォルトスタイルのリセット
決まりきったものなので汎用性はあり。
@charset "utf-8";
/*
===== CONTENTS ==============================
1: universal reset
2: body and base setting
: general params
: acronyms and abbreviations styles
3: link setting
=============================================
*/
/*
===== 1: universal reset =================================
*/
*{
margin:0;
padding:0;
}
/*
===== 2: body and base setting ===========================
*/
body {
text-align:center;/* box centering */
font: normal 140% "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", HiraKakuPro-W3, Osaka, verdana, arial, sans-serif;
margin: 0px;
padding: 0px;
background: #E6E6E6;
color:#191919;
}
/* general params
--------------------*/
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{
padding: 0;/* margin&padding reset */
line-height: 1.4;/* base line height */
text-align: left;
display: block;
margin: 0px;
font-size:small;
}
table {margin : 0;empty-cells: show; font-size:small;}
hr,.areaAnchor,.anchor { display : none; }
img {
border: none;/* img do not want a border */
vertical-align: bottom;
}
li { list-style: none; }/* link do not want a dot */
/* acronyms and abbreviations styles
-------------------------------------*/
acronym,abbr{cursor:help;}
/*
===== 3: link setting ===========================
*/
a:link{
color: #0066CC;
text-decoration:underline;
}
a:visited{
color: #551A8B;
}
a:hover{
color: #FFF;
background:#0066CC;
text-decoration:none;
}
a:active{
color: #0066CC;
}
2006年7月 4日
今日から一週間夏休みです。
社会人になってからこんなに長く休むのは初めてなので楽しみ
かといって初日から用事がびっちりで休み気分でもないわけで。
でもエンジョイするよ。
この休みの内にMTでサイト構築する予定
はてなはMT形式でもエクスポートできるみたいなのでそのうち以降しようかな
あと目標、3kg痩せる
![CSS、HTML、SEO、Web広告の話題ならStopn' Listen[ストップンリッスン]](http://kennsu.jp/common/logo.jpg){kind=logo}
