HTML5・CSS3のすごさ「次世代の可能性」
以前このブログで【「CSS3 ドラえもん ver3」って知ってます？】という記事を書きましたが、今回は見ていて “すごいなぁ” と思うサイトの紹介です。
HTML5・CSS3の勉強をしていて、いろんなサイトを見ていると驚く程すごいページを目にします。もちろんそれはWebに携わっているから、すごいと思うのかもしれません。なぜならこれから紹介するサイトは、Flashとかを利用すれば表現できるものなので、普通の人がそれを見て、なぜそれがすごいのか理由が分からないと思うのも当然だからです。
じゃあFlashってなに？というところから教えてほしいと思うかもしれませんが、面倒くさいので省きます。難しく考えずにHTML5・CSS3（テキストに記述するだけ）で、こんな表現ができるんだなあと思って頂ければ十分です。
HTML5 花火大会
HTML5 花火大会
まずはこれからの季節にはぴったりの花火をHTML5で表現しているサイトです。
JavaScriptやCSS3で書かれたコードが美しい花火となって夏の夜空を鮮やかに彩ります。
HTML5 Fireworks：http://jsdo.it/event/html5hanabi
WebGLを使ったデモ
WebGLを使ったデモ
もう一つはWebGLを使ったデモです。とってもきれいです。
three.js webgl – dynamic procedural terrain
キーボードで n を押すと夜と昼が入れ替わり、m を押すと大地がうねり始めます。b を押すとサウンドの on off が可能です。
（残念ですが、IEではご覧になれません。）
blogテーマのリニューアル
ケイビーエス 社員ブログのテーマをリニューアルしました
以前のテーマに比べて文字を若干大きく設定し、記事を読みやすくしています。レイアウト的に目立った変更は特にありませんが、文章構造（タイトルとかリストの定義）の作りをHTML5の基準に沿って作っています。
ブログリニューアルの主な変更点
- HTML5の基準に沿った文章構造
- ログイン画面の変更
- 自動リンクの生成
HTML5の基準に沿った文章構造というのは、先日私が書いた「セマンティックWeb」の記事をご覧ください。ログイン画面の変更は、社員のブログらしくちょっと手を加えただけです。自動リンクの生成というのは、記事の中でケイビーエスと書けば、自動的に会社のホームページにリンクを張る設定にしています。
この文章は、タイトル、段落、リスト表示、ブロックを使用して書いています。参考にしてください。段落は一文字落ちのインデントを設定しています。中国語などをで二文字下げる場合は、全角スペースを一つ追加してください。
セマンティックWeb
Webデザイナーはページを作成するとき、以前にも増してセマンティックとか、アウトラインとか、多くのことを考えながらコーディング作業をしているんですよ。それだけでなく4種類、5種類とブラウザの見え方もチェックして、ようやくページが完成となるんです。
突然いったい何を言い出すんだと思ったでしょ。それにタイトルの「セマンティックWeb」って耳慣れない言葉だし…。
今年のはじめ、会社のホームページをリニューアルしました。リニューアルだから当然見た目のデザインは変更されたのですが、実は目に見えないところでも大きなリニューアルをしたのです。
それはなにかというと HTML5 で作成したということなんです。「HTML5？ それが何？」って思う人も多いでしょう。確かに普通ホームページを見るときにそんなことを考えながら見る人はいないでしょう。そもそもそれまでのHTMLといったい何が違うの？ってことですよね。一口でいうと「HTML5っていうのは、文章構造に意味を付けたんだよ」ってことなんですが、「文章構造に意味？何のことだかさっぱりわからない」って人の方が多いかもしれませんね。
例えば一つのページがあったとします。その中には本文のアウトライン（文章の構造、階層のようなもの）をはじめ、社名やページのタイトルが書かれている部分、その他メニュー項目やリンクボタンなどがあったりします。そういった部分的な項目にそれぞれ意味を持たせて、「ここからここまでが本文（記事）ですよ」「ここの部分はメニュー（ナビゲーション）ですよ」などと、わかりやすく定義したものがHTML5なんです。
「でもそれってページを見る人にとって特別必要なんですか？」って疑問に思う人もいますよね。実は、これはページを見る人よりも「コンピュータが効率よく解釈できるようにしましょう」ってことなんです。人が判断するためのものではないんですね。じゃあHTML5で作成するとどんなメリットがあるの？……人が判断する為のものではなく、機械が判断する為のものって書いたけど、でもそうすることによって正しい検索結果が出たり、最終的には使いやすいWebサイトにするためのものってことなんですね。
私個人のサイトもリニューアル
ゴールデンウィーク中、私はずっと家にこもりっきりで、自分のホームページをリニューアルしていました。HTML5+css3で作成しましたが、それに加えモバイル用にも対応させてみました。 つづきを読む…
桜切る馬鹿梅切らぬ馬鹿
出勤途中のある家の玄関先に桜の枝を水にさして置かれていた。きれいに咲いていたので持ち帰ったのだろう。でもそのときふと子供の頃聞いた「桜切る馬鹿梅切らぬ馬鹿」という言葉を思い出した。
これは庭木の剪定法をいったことばで、桜は枝を切るとそこから腐りやすくなるので切らないほうがよく、梅は枝を切らないとむだな枝がついてしまうので切ったほうがよいとされることから、そういうそうだ。
今年は桜の花が長く咲いているように感じる。いつもは一斉に咲いて一斉に散ってしまう、そんなイメージだが、今年は早いところと遅いところがあって、ちょっとお得な感じです。
美味しいニオイ？
会社の帰り道、家に近づくとどこからかいい匂いがしてくる。晩御飯の支度だろう。このいい匂いというのは美味しい匂いだ。なんだか急にお腹がすいたと思うようになる。美味しい匂いを嗅げばそれを食べたくなるのは、みなさん感じたことがあるでしょう。でも逆に嫌な臭いを嗅いでしまったら…。
先月KBSまだんの研修旅行で韓国に行った時、納豆鍋を食べました。そのお店は北村にある別宮食堂。地下鉄3号線安国駅の1番出口から윤보선길を北に少し歩き、左に折れて細い路地裏にそのお店はあります。お店の門をくぐると急に鼻をつくニオイ。私の中では、美味しい匂いとは到底かけ離れたニオイだ。さて一体どんな味がするのだろう。
納豆鍋
お店の中にいるとだんだんニオイにも慣れてくる。写真は、その納豆鍋。一口食べてみる。取り立てて美味しいとは思わないし、ちょっと薄味に感じる。だがその後食べているうちに、薄味に感じた一口目とは違い、素材の甘みが感じられる。まろやかでとてもバランスがとれた味わいだ。もうニオイは気にならない。なんだかとても得した気分。美味しい。次機会があれば、また食べてみたいと思う味に変わっていた。しかし、食事が済んでお店を出るとき、またちょっと鼻をつくニオイ。どうやらニオイと味は一致しないようだ。
韓国旅行に行った時の様子は、ハングルネットのブログに載せています。
http://www.hangul-net.com/blog/
「CSS3 ドラえもん ver3」って知ってます？
webの仕事をしている人には結構有名な、「画像を使わずcss3で描いたドラえもん」
もうだいぶ前になりますが、html5 + css3の勉強をしているとき、css3で描いたドラえもんを見つけました。
ブログに何か書かなきゃいけないと、思いついたのがCSS3 ドラえもん。久しぶりにサイトを訪れてみると、ver3に進化していました。初代バージョンは、IE8がオチを担当してくれていましたが、もうそれもだんだん少なくなっていくのですね。
まだ見たことない人は、一度ご覧になってはいかがでしょう。
http://shopdd.blog51.fc2.com/blog-entry-1013.html
今までIEの表示に悩まされていたコーディング。これからhtmlのコーディングはだいぶ効率よく書けるかもしれません。とはいえ今でもIE8は多いから、まだまだ先の話かな…。
意外と知られていないメール署名のルール
個人で使用するメールの署名（シグネチャ）は無くてもいいかもしれませんが、仕事で使用するメールには、署名は必須ですよね。もし会社に届いたメールに“至急連絡ください”などと書かれてあっても、どこの誰からメールが来たのかわからなかったら、返事のしようもなかったり…。まあ、そんなことはないとしても、メールの署名はきちんとつけたいものです。
メールの署名部分には ========== や、+-+-+-+-+-+-+-+ など、記号などを使ってわかりやすく表示したものが多いですよね。そういったメールの署名にも、ちょっとしたルールがあるのをご存知でしたか？メールの本文と署名部分を区別してくれる ”-- ” (dash dash space)です。
“-- ” は、「これ以降は署名ですよ」というようなもので、メール本文の最後で改行したら一行開けて-- を記入して改行、その後に署名を記入しておく。そうすれば “-- “（sig-dashesと呼ぶらしい）に準拠したメールソフト、例えばThunderbirdやGmailなどでは、”-- ” を認識して以降の署名部分をグレイ表示してくれます。ちょっとしたことだけど、本文と署名部分がハッキリしてわかりやすくなります。
またそれだけでなく、メールを返信や転送・再編集する際に、署名部分を引用しません。だから他人の署名を引用することもなく、自分のメールを再編集したときに、署名が二重になることを防いでくれます。
これって結構優れものじゃないですか？この署名のしきたりについて記述された文書としては、RFC 3676（RFC 2646の更新版）のセクション4.3. ‘Usenet Signature Convention’ があります。
There is a long-standing convention in Usenet news which also commonly appears in Internet mail of using “-- ” as the separator line between the body and the signature of a message. When generating a Format=Flowed message containing a Usenet-style separator before the signature, the separator line is sent as-is. This is a special case; an (optionally quoted or quoted and stuffed) line consisting of DASH DASH SP is neither fixed nor flowed.
必ず必要というものではありませんが、知っていて使えばちょっと便利になるかなってお話でした。
マッチを知らない子供たち
先日ラジオを聴きいていたら、「マッチを知らない子供たち」の話をしていました。“へぇー、そうか、今の子供たちはマッチを知らないんだ”と、時代の移り変わりをしみじみと感じてしまった。確かにマッチって見たこともない子供もいても当然かもしれません。だって家にマッチが無いですもんね。見たことも無ければ当然使い方など知らないわけで、学校で理科の時間にマッチの使い方を教えると、子供たちは怖がるそうです。
私が働きだしたころは、会社の仕事でもお店のオープン時にＤＭと一緒にマッチのデザインもしたことがありました。そういう仕事もなくなってしまいましたからね…。
考えてみると会社での仕事も、以前に比べればまったく違いますよね。制作で使っていたデザインや版下の道具は今は使うことなく、そんな名前も知らない道具があったということすら今の若い人たちは知らず、そして私もやがて忘れてしまう日が来るのでしょうね。
アンデルセンの「マッチ売りの少女」なんていう童話がありましたが、そういうのもいつしか消えてしまうのでしょうかね…。
“KBSまだん”での韓国語教室
ケイビーエスで運営している「KBSまだん 韓国語教室」のお話です。
毎週火曜日の夜七時から韓国語教室が開かれています。
今の教室では、従来の教科書だけではなく、韓国のKBS NEWSよりニュースを選んでそのビデオ放送を見ながら、それを授業に取り込んでいます。
授業のようす
これはただ単に文字を追いかけるのではなく、耳から入った韓国語をできるだけ理解できるように、また韓国の今の状況などを知って、新しい変化に敏感になるようと先生の薦めで始めました。
はじめは聞きなれない省庁の名前や、辞書にも載っていない単語が出てきたりもして難しく感じていましたが、韓国社会の仕組みや興味深いニュースに出会うと、教室の雰囲気が盛り上がって、以前の教室より活気が感じられます。
興味のある方はお気軽にお問い合わせください。
http://www.hangul-net.com/school/index.html
※受講を検討されている方のための無料見学を受け付けています。
もう梅雨明け
今朝目覚めると同時に、今日は暑くなるなぁと直感…。そしたらお昼には梅雨明けのニュース。今年は梅雨の入りが早かったから、明けるのも早いのかな？
ニュース記事で確認してみると、昭和26年の統計開始後近畿では３番目の早さだそうだ。もう一日梅雨明けが早かったらよかったのに…。なぜって、夕べは星の節句「七夕」でした。まあ本来は太陽暦の８月６日頃がそれにあたるから、当然梅雨明けしているんですけどね。それに時間的にもまだ早いんですよ。暗くなったばかりでは、まだ天の川は東の空で、頭の上に見上げるには、夜遅くにならないとダメなんです。星の話は、また別の機会にしましょう。
さて、夏になると甲子園。そろそろ沖縄以外でも、地方大会が始まるころですね。自分の田舎の大会が気になるところで、実際に試合は見れなくても結果はチェックするようにしているんです。今年はどの高校が出場するのか、それを予想するのも楽しいですね。