2011年8月

●HTML5のタグ(28) 　 2011.08.31
プレースフォルダーという概念がある。入力フォームに予め補助的な説明文が薄いグレーで表示されているというもの。入力窓をクリックで文字を入力しようとするとこのグレーの文字は消去される。

name：<input name="text" type="text" placeholder="ローマ字で入力">
価格<input name="text" type="text" placeholder="税込の価格を入力">

というような使い方になり、今まで入力フォームページにところ狭しと書かれていた注記文がだいぶ省略できそうだ。 		[有名人の似顔絵]
●ただ待っていてもダメ 　 2011.08.30
ホームページを開設したのだが一向に反応がない。というのはよくある話、いや、もはやデフォルトとも言える。今の時代サイトに訪れる人を増やすのは並大抵のことではないのだが、未だ多くのクライアントが「ホームページは公開すればすぐに効果がある」と思っているようだ。同時に公開したからといって、ただ待っていても客は来るものではない。自ら営業にでかけてPRをしないといけないわけだ。そして反応がない状態が半年ぐらい続くと「もうやめたい」ということになる。まあ、やめても構わないのだが、そこまでに費やした時間と労力は全く無駄になってしまうのだ。 [夢]
●HTML5のタグ(27) 　 2011.08.29
フォントを回転させることができるようになった。例えばこんな感じだ。→<font style="font-size:16px;color:#000;position:absolute;left:0px;top:150px;-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);">この文字が270度回転して表示されます</style>といった感じだが、left:0px;top:150px;の基準がどこになっているのかはよく分からない。 [有名人の似顔絵]
●大人はめんどくさい. 　 2011.08.28
例えば学生が何かヘマをやらかして叱責される。怒られている間はシュンとして項垂れて説教を聞いているが、多くは次の日にはケロッとしてきゃぴきゃぴと友だちと戯れている。しかし大人はそうはいかない。ずど〜んと落ち込み作業能率は落ちるは話しはしなくなるはで回復までに数ヶ月かかったりもする。学生は例え辛くても明るく振る舞おうとする努力をするし、そのことが回復の早道であることを本能的に知っているようだ。しかし大人は口をきかないことや極めて事務的な反応に徹することや不機嫌さを醸し出すことで批判を表現するのだ。あーめんどくさい。 [コンビーフ]
●HTML5のタグ(26) 　 2011.08.25
SVGは実はAdobe Illustratorで作った種類を別名保存で生成することができる。ただしこれは非常に複雑で長いソースになるようだ（そうならない方法もあるはずだが）。逆にテキストエディタで以下のように書いて一旦.htmlで保存してから拡張子を.svgに書き直すことでIllustratorでも開くことができるようになる。つまりIllustratorで行ってきたことがブラウザでも出来るようになるということだ。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect style="fill:red;" x="0" y="0" width="200" height="200"/>
</svg>

尚、明日より2日間出張につき、次回投稿は8月28日になります。 		[有名人の似顔絵]
●印刷 　 2011.08.24
クライアントから会員一覧表のExcelデータをもらう。これをHTMLに変換してウェブにアップしてほしいとのこと。よくあるパターンだ。そしてそのウェブページの完成後、しばらくして「ホームページの一覧表を印刷すると印刷範囲内にうまく収まらないし背景に色がついたりつかなかったりするので修正して欲しい」とのリクエスト。印刷するんだったらExcelからすれば？　たまにあるパターンだ。 [爆笑！SF短編集]
●HTML5のタグ(25) 　 2011.08.23
HTML5ではSVGとCanvasの2種類の描画方式があるわけだが、さてどちらをどのように使い分けたら良いか？まだ規格が進行中ということもあり、最終的な判断はもっと先になりそうだが、現時点で一般的に言われているのは「アニメーションやゲームのような高速なレンダリングが要求される場合にはCanvas」「インタラクティブが要求されるマップとかインターフェイスの場合はSVG」ということのようだ。いずれにしても複雑なJavaScriptを書かなければいけないので、ゼロから作るのは簡単ではない。ウェブ上にも既に色々なサンプルがアップされているようなので、それらを部分的に書き替えながらいじくってみるのもいいだろう。スティーブジョブスが「Flash Playerは必要ない！」と言った意味が分かる気がしてくるだろう。 [有名人の似顔絵]
●〜が悪い. 　 2011.08.22
音楽CDが売れなくなるのは動画サイトのせい、本が売れなくなったのはインターネットのせい、といったように何かと「何かのせい」にしたがるが、基本的にはそのような 世の流れを読んでいなかった自分のせいだろ！ということを理解すべきだろう。産業の中には発展するものもあれば衰退するものもある。衰退には色々な要因があって、何かのせいにしようとすればいくらでもあるだろう。少子化のせい、リーマンのせい、中国の産業発展のせい、地球温暖化のせい。しかしA級戦犯は自分たちだ。 [天声人誤]
●HTML5のタグ(24) 　 2011.08.21
SVGによる描画の例（入門HTML5プログラミング 翔泳社より）が以下である。この場合はChromeでは正しく表示されたが、FireFoxでは星形が崩れてしまっている。

<?xml version="1.1" standalone="yes"?>
<svg version="1.1"
viewBox"0.0 0.0 720.0 540.0"
fill="none" stroke="none"
stroke-linecap="square"
stroke-miterline="10"
xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="http;//www.w3.org/1999/xlink">
<path d="M240 148L298 148L316 96L334 148L392 148L345 180L345 180L363 232L316
200L269 232L287 180Z"
fill-rule="nonzero"
fill="#ff9900"
stroke="#ff0000"
stroke-width="2.0"
stroke-linejoin="round"
stroke-linecap="butt">
</path></svg>

 [有名人の似顔絵]
●ストレステスト 　 2011.08.20
伸子首相夫人が原発に例えて「政治家にはストレステストが大事だと思う。それがクリアできない人にはとても首相はできない」と言ったとか。確かに国会で「あなたは歴代でサイテーの首相だ！即刻退陣すべきだ！」などと言われ続け、メディアにはコキおろされ、まるで史上最悪の政治家みたいに言われてきたわけだ。まあ総理から見れば、上司に怒られた、ユーザーからクレームを受けた、クライアントから批判された、などという些細なことでストレスを感じているような人は可愛いもんだろうな。 [すっとこどっこいな森の動物たち]
●HTML5のタグ(23) 　 2011.08.16
HTML5で新たにサポートされるベクタ描画形式がSVG（Scalable Vector Graphics）だ。ブラウザ側でベクタ形式の描画ができてしまうということは、つまりFlashPlayerが不要になるということにつながる。ベクタデータなのでアニメーションも可能なわけだ。ただし現時点ではXMLでかなり複雑なソースを書く必要があり、デザイナにとってはAdobe IllustratorやFlashで作ったほうが数倍早いということにもなるだろう。今のところ対応可能なブラウザはChromeとFireFoxのみ。例えばデザイナは任意に描いたパターンやアニメーションをSVGのXMLに変換してくれるようなツールが世に出回ってきた時には、このSVGがFlashにとって代わるものになるのだろう。

明日から出張のためこのコラムはお休みします。次回投稿は8月20日予定。 		[有名人の似顔絵]
●機嫌 　 2011.08.15
「今日は部長、機嫌が良くって企画書も一発でOKだった。」などという会話。機嫌が良かったわけではない。前回しぼったから、今回は優しく対応しただけなのだ。飴と鞭を使い分けているだけだ。機嫌の善し悪しで企画書の評価が変わるようでは管理職はやってらんない。まあ、企業規模にもよるが。 [ウェブデザイナの苦言]
●HTML5のタグ(22) 　 2011.08.14
inputタグの中に属性requiredを追加することで必須項目となる。今まではCGIでコントロールしていた部分なので制作はグンと楽になる。未入力のまま「送信」とか「確認」ボタンをクリックすると「入力してください」という旨のコーション吹出しが出るというもの。emailとurlは記述が正しくない場合も同じく吹出しが出るので、下手をすると2回注意されることもあるわけだ。コーション文はブラウザによって異なりFireFoxでは「このフィールドは入力必須です。」Operaは「入力を必要とする項目です」Chromeでは「このフィールドを入力してください。」といった具合だ。Operaではピンクの吹出しがプルりながら出てくるのでちょっと可愛いが頻繁に出るとウザいかもしれない。 [有名人の似顔絵]
●悪循環. 　 2011.08.13
納期を守れと口うるさい上司。納期に遅れようものならこの上司の説教を延々と聞くハメになる。説教が辛いのではない。延々と続く間に仕事ができなくことが辛いのだ。その分を取り返すために残業をすると、今度は「仕事が遅い！」と怒られる。そしてまた説教が始まる。結果、ろくに作業ができずに納期に間に合わなくなる。悪循環だ。 [電車に関する色々な疑問]
●HTML5のタグ(21) 　 2011.08.12
オンマウスのテキストの色がゆっくりと変化していくというCSS。<style type ="text/css">p{-webkit-transition:color 2s linear;font size:12px;color:pink;}p:hover{font size:12px;color:red;}</style>と書いてbodyのpタグのついたところに反応する。この場合はピンクから赤に2秒で変わる。2sを5sにすれば5秒だ。今のところSafariとChromeのみの実装のようだ。さてどんな場所に使うか？ということになるがlinkに使うのはちょっともどかしい。またポインターは指マークではなくテキスト挿入バーのような形状に変化するので使う側にとっては「何だろう？」というものだ。ただの遊びにしてはあまり意味がないし…。まあデザイナが考えるということだろう。 [有名人の似顔絵]
●詳しいからといって 　 2011.08.11
地域の会合や講演会に出ると、大抵1人2人はコンピュータやインターネットに詳しい人間がいる。そして彼らはそのことだけで同等に話をしようとする。確かに君等は詳しいかもしれないし専門的な知識を持っているだろう。しかし今までにいくつのウェブサイトを作ったことがあるのかな？5個や10個で対等と思われては困る。こちらは毎月2〜5個ぐらいは作っているのだ。ここ何年間の間ずうっと。しかもクライアントからお金をもらって。 [夢]
●HTML5のタグ(20) 　 2011.08.10
markタグというのがある。強調したいテキストを<mark>と</mark>で挟むといういたってシンプルなものだ。強調されるというのは、その背景部分が黄色のベタになって丁度蛍光ペンでマーキングしたような状態だ。ブラウザ画面上でテキストに検索をかけたときの結果のような感じだ。ではmarkした文字列を検索したらどうなるか？Chromeではmarkが黄色、検索結果はオレンジ。Operaではmarkは同じく黄色、検索結果はシャドーのついたグリーンで、それぞれちゃんと区別できるようになっている。しかし常にmarkは背景が黄色なので当然ながらbgcolorが黄色の時には見えなくなる。ではChromeの検索結果がbgcolorがオレンジのときはというと、やはり見えなくなるようだ。そういえばCSSで<span style="background-color: yellow;"></span>というのがあったが、こっちのほうがmarginも設定できるし色も変えられるので用途は広い。ちなみに<mark>に対応している前記のChromeとOperaだけのようだ。 [有名人の似顔絵]
●広報活動 　 2011.08.09
そりゃあ色々とアドバイスもするし、公開後の告知がいかに重要かという話しもする。ただしこちらはウェブサイトを作るのが本職であり、店舗設計と建築を担当している。開業したその店舗の売上げが悪いというのは、そのほとんどは運営方法や品揃えの問題だろう。建築設計者に文句を言うのは筋違い。というか、それ以前に店の中に座って待っているだけじゃ売れるわけがない。少しは広報活動したらどうなんだ。 [コンビーフ]
●HTML5のタグ(19) 　 2011.08.08
例えばフォームコントロールで<input name="number" type="number" min="0" max="100">と書く。minとmaxが属性で入力窓右側に▼▲が表示され、この範囲外の数字を入力しようとすると「100以下の数字を入力してください」というコーションの吹出しが出る。入力した数字は▼▲で1つずつ可変できる。これにstep="5"と追加すれば5単位で加減できるようになる。しかしこれもまたブラウザによりまちまちである。WinのOperaでは正確に動作するが、type="date"と同様に▲→▼、又は▼→▲と2クリック必要になる。MacのOperaでは入力窓右側に▼▲のボタンは出てくるのだが▼▲マークはなぜか出てこない。MacのSafariは動作は正しいが、なぜか数字が窓の左寄せで出てくるのでちょっと不自然。ChromeはWin、Macともこれと同じく左寄せ。WinのSafari、IE、FireFoxはただの入力窓だけ。統一の道は簡単ではないようだ。 [有名人の似顔絵]
●何度も書いてきたことだが 　 2011.08.07
何度も書いてきたことだが、まだこんなことを書かないといけない。というのはウェブサイトを作る。それなりのコストをかけて作ったのだが、半年経ってもほとんどアクセスもなくサイトを通じての問い合わせもない。そこで「ホームページは効果がない！」「毎月ドメイン料とサーバ使用料を払わなければいけない！」「大赤字だ！」「こんなもん止めてしまえ！」ということで本当に閉鎖してしまう。聞けば自らの告知活動は一切やっていない。当たり前の結果でもある。 [爆笑！SF短編集]
●HTML5のタグ(18) 　 2011.08.06
日本語のルビを振ることができる。Safari、Chromeが対応しているようだが漢字のほうのフォントサイズは14pixぐらいにしておいたほうが良さそうだ。漢字のフォントサイズが小さくなると、当然ルビのほうも小さくなって識別が困難になってくる。タグはこんな感じ。→「<ruby>憂鬱<rt>ゆううつ</rt></ruby>な日は外出も<ruby>躊躇<rt>ちゅうちょ</rt></ruby>する」漢字1文字毎にルビを振りたい場合はこんな感じ。→<ruby>憂<rt>ゆう</rt>鬱<rt>うつ</rt></ruby>な日は外出も<ruby>躊<rt>ちゅう</rt>躇<rt>ちょ</rt></ruby>する」これをルビだけではなく、二乗の小さい2とかウムラウトのダッシュには使えないものかとやってみたら、どうも距離が離れ過ぎでダメなようだ。 [有名人の似顔絵]
●また売れないものを… 　 2011.08.05
民放5社と電通がインターネットに接続したテレビ向けに有料の番組配信を始める。2012年春からだそうだ。過去のアーカイブから番組を選び１番組3百円程度の有料コンテンツになるとのこと。もちろん無料なら誰もが見るだろう。しかしカネ払ってまで見たいような番組なんてそうそうないはず。無料と有料にはその額にかかわらず雲泥の差がある。しかもこのサービスを受けるには専用のインターネットテレビ受像機が必要になる。あれだけ大騒ぎして地デジに移行して、多くの視聴者がテレビを買い替えた直後の話だ。ナニを考えてんだろ？ [天声人誤]
●HTML5のタグ(17) 　 2011.08.04
フォームコントロールにcolorというtype属性がある。これも今のところopera限定のようだが、なかなか面白い機能だ。<input name="color" type="color">と書くとプルダウンから20色のピッカーの中から選択でき、さらに「その他」をクリックで5種類のカラーピッカーの中から任意でカラーが選択できる。では色を選んでどうやって使うのか？ということにもなるが送信フォームでは#be1225というようにウェブ用カラーコードが送られるようだ。まあ、そこから先の使い道は用途に応じて考えるということなのだろう。 [有名人の似顔絵]
●自分可愛がり過ぎ 　 2011.08.03
納期を守れと口うるさい上司。納期に遅れようものならこの上司の説教を延々と聞くハメになる。ところがこの上司、いざ自分の仕事となると納期を守らない。必要以上に忙しいフリをして「あ、そうだそうだ！」などとトボける。そして最後には「オレみたいになるなよ！」ときたもんだ。説得力無さ過ぎ。というか自分可愛がり過ぎ。 [すっとこどっこいな森の動物たち]
●HTML5のタグ(16) 　 2011.08.02
動画のタグが簡単になった。<video controls autoplay><source src="008.mp4"></video>←これだけでいいのだ。属性controlsを入れることで画面オンマウス時にコントローラーが表示される。そのデザインはブラウザによって違っているところも面白い。ただしブラウザ間での動画コーデックぼ規格が統一されていないため上記で動画が再生できるのは今のところChromeとSafariだけのようだ。さてタグが簡単になったとは言うが、確かにFlashからHTMLを書き出すと何十行ものソースになるわけだが、今までも<embed src="xxx.swf">とか<embed src="xxx.mov">で再生できる環境はけっこう古くからあったにはあったのだが。 [有名人の似顔絵]
●画策. 　 2011.08.01
自分が有利になるため、他人の行動を制限するために姑息な画策をする人間。多くの場合こういった画策は周囲の誰かに見抜かれる。そして多くの場合、見抜いた人間はそのことを本人に伝えたり指摘したりはしない。そんなことをしても何も良い方向に向かわないからだ。しかし画策した本人は誰からも嗜められないことで、その姑息な画策が上手くいったものと勘違いし、いずれまた何か自分にとって不利な状況が発生しそうになったときに同じような画策を図る。こうして周囲からの信頼を徐々に失っていく。 [ウェブデザイナの苦言]
過去記事

メニュー



























.