HTML5 で Web コンテンツを書くのはまだ時期尚早なのか?

最近、複数の Web 制作会社さんにお邪魔する機会がありまして、そのたびに 「HTML5 でのお仕事って、けっこうありますか?」 と質問するのですが、いただく回答としては「スマートフォン用のものが 1~2 本くらいですかね」というのがほとんどです。 まぁ、HTML5 対応の Web ブラウザーの普及率と、古いブラウザーのサポートを考えるとしょうがないのかな、という気もします。 では、HTML5 を本格的に使うには、まだ時期が早いのか? というと、けっしてそんなことはないと思います。 「そうはいっても HTML5 でできることは今でも JavaScript + Flash でもできるし、それに、HTML5 をサポートしない古い Web ブラウザーにも対応させるための余計な工数がかかる」と考える人も多いでしょう。 しかし、そこでいうところの工数は単なる「コスト」 (出費) ではなく、のちのち回収可能な「投資」と考えていただきたいところです。 なぜならは、古いブラウザーはこれから消えていくばかりですので、それにかかる対応の費用や工数は、単なるコストにすぎません。しかし、HTML5 は将来的な可能性を広げてくれるものだからです。 ではそういった投資をしてまで Web コンテンツを HTML5 で記述するメリットとはなんでしょう?   HTML5 でコンテンツを書くメリット HTML5 のメリットは、「セマンティック Web で、検索エンジンとの親和性が高く SEO に優れる」とか、「『仕様による実装』のため Web ブラウザー間の互換性が高い」とか、「プラグインをインストールすることなくリッチな Web アプリケーションが作成できる」等々、さまざまなメリットが、さまざまなところで述べられていますが、一番のメリットはなにかというと、あたりまえのことなのですが 「最新バージョンの HTML」 であるということでしょう。 HTML5 を使用すれば、それ以前であれば Flash などのプラグインの力を借りなければ実現することができなかったさまざまな機能を…

3

HTML5 コンテンツを古い Internet Explorer に対応させるには?

HTML5 や CSS3 の新機能はすばらしく、その登場は喜ばしいものでありますが、残念な点がひとつだけあります。 それは Internet Explorer 6 のような古い Web ブラウザーでは動作しないということです。 実際のところ HTML5 で記述された Web コンテンツは、Internet Explorer 8 までの HTML5 をサポートしない古い Web ブラウザーでは HTML5 のタグが無視されてしまうので意図したとおりの表示にはなりません。 たとえば、以下のような HTML5 で新しく追加されたタグを使用しているページを、HTML5 をサポートしている Internet Explorer 9 と、サポートしていないそれ以前の  Internet Explorer で読み込んで比較すると明らかな表示の違いがあります。 <!DOCTYPE html> <html> <head>     <title>This is nice Web page.</title>     <style type="text/css">         header{color:blue;}         article{background-color:Aqua;}         aside{background-color:gainsboro;}…

1

border-radius とハートブレイク・カフェ(それと旧ブラウザ対応)

前々々回のブログ記事でお伝えしたとおり、セッションで使用するデモ用に、HTML5 + CSS3 を使った架空の喫茶店「ハートブイレク・カフェ」のページを作成しております。 そのページで使用している HTML5 や CSS3 といったイマドキの (表現は 80’ 年代風ですが)  Web 技術について紹介しております。 今回は border-radius についてです。   border-radius とは? border-radius は描画されるボックスの角を丸める、いわゆる角丸 (かどまる) を実現するための機能で、CSS3 でサポートされました。 border-radius の要素は、ボックスの四隅を一度に指定する border-radius と、個別に指定するための border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius、border-top-left-radius がありなかなか使い勝手が良いものです。 (border-radius の指定して角を丸くした h1 要素) /*フード、ドリンク メニューのバー*/ .menu-title {     font-family: ‘Lobster’, Tahoma, Arial, Helvetica, sans-serif;     font-size: 30px;     background-color: #461c0e;     color:White;    …


Visual Studio 2010 を現在最新の HTML5、CSS3 に対応させる方法

本日 (2011/06/16) Web Standards Update for Microsoft Visual Studio 2010 SP1 がリリースされました。 これには Visual Studio 2010、Visual Web Developer 2010 で使用可能な、現在最新の HTML5 と CSS3 のインテリセンスおよびターゲットスキーマが含まれています。 このタイミングでリリースされたのは、つい先日 HTML5 が Last Call Status に入ったのも無関係ではないような気がします。 とくに CSS3 のスキーマに関しては、Visal Studio 2010 の SP1 に含まるものと期待していたのですが、入っておらずがっかりさせられましたが、このアップデートで適用することで、最新の情報のインテリセンス、およびターゲットスキーマが使用できるようになりました。 今回のアップデートが含んでいる内容は以下のとおりです。 HTML5 · Video & related tags · Audio & related tag · New input types…


Web フォントとハートブレイク・カフェ

前回のブログ記事でお伝えしたとおり、セッションで使用するデモ用に、HTML5 + CSS3 を使った架空の喫茶店のページを作成しております。 その喫茶店の名は「ハートブレイク・カフェ」。 店のコンセプトは、「傷ついた街の天使が羽根を休める….、ということはどうでも良くて、前回の記事から、このサンプルに使用している ”いまどきの” Web 技術について紹介しております。 今日は Web フォントについて書きたいと思います。 「ハートブレイク・カフェ」のロゴは、画像ではなく  Web フォントの 「Lobster」 というフォントを指定して表示しています。 ちなみにこの「Lobster」というフォントは Windows には標準で含まれていませんが、Web フォントをサポートしている Web ブラウザーでアクセスすると、Windows はもちろん、Mac でも Linux でも「Lobster」 フォントが正しく表示されます。(※ コーヒーカップの絵は画像ですよ。)   Web フォントとは Web フォントは、クライアントにインストールされていないフォントであっても、Web からフォント提供することで、指定通りの字体の表示を行わせる技術で、CSS3 でサポートされています。(※) フォントというと、ほとんどの場合機種依存であり、異なるプラットフォームで同じ文字を表示をさせるには、形状が似たフォントを指定するなどの工夫が必要でしたが、 Web フォントを使用すると、こういった面倒はありません。 (※) 実は、Web フォントは CSS3 以前から存在しており、以前より CSS の @font-face から使用することができました。機能自体の実装もけっこう早くて、Internet Explorer では 4 の時代からサポートしていました。Web フォントの指定は CSS2.1 で廃止されていましたが、後方互換のためか多くの…


HTML5 とハートブレイク・カフェ(geolocation)

最近、Visual Web Developer 2010 を使って JavaScript を記述していくデモをする機会が増えてきたので、せっかくだから HTML5 とか CSS3 という 「キテる感」 満点の技術を盛り込んだデモを作っておこう、と思い立ち架空の喫茶店のページを作っています。 喫茶店の名は、「ハートブレイク・カフェ」。 お店のコンセプトは、簡単にいうと「休憩所」。格好つけていうと 「傷ついた街の天使が羽根を休める場所」。 香り高いコーヒーと、美味しいお食事、そして厳選した音楽で皆様のお越しを、…..ってことはどうでもよくて、今現在実装してある HTML5 と CSS3 を使用した機能についてメモがてら書いて行こうと思います。 ちなみに、こんな感じのページです。 図 : トップページ 図 : メニュー ページ 図 : 所在地ページ 図 : 現在位置の表示 デモページは、1 個の HTML ファイルで完結していますが、jQuery UI のタブコントロールを使用して表示を分割しています。 使用されている Web 技術 (?) は以下の通りです。 タイトル文字 ––– Web フォント (CSS3) メニューバーの装飾 ––– radius (CSS3)…


ビデオで見る MIX11 – THE FUTURE OF THE WEB

今月の 12 日から 14 日にかけて、マイクロソフトの Web 技術のイベント MIX11 がラスベガスにて開催されました。 MIX は、2006 年に “The Next Web Now”  をテーマとして開催された MIX06 を皮きりに毎年行なわれ、今回 6 回目を数えます。 ちなみにこの MIX というイベント名、「Adbe MAX のパクりでは?」 という声もありますが、その答えは MIX06 での Bill Gates のコメントにあるような気がします。 Bill Gates: Microsoft MIX06 Conference http://www.microsoft.com/presspass/exec/billg/speeches/2006/03-20MIX.mspx さて、今回の MIX11 では “THE FUTURE OF THE WEB” をテーマとして開催され、Internet Explorer 10 の Platform Preview 版や Silverlight 5…


なぜ、 IIS は PHP アプリケーションの実行に不向きとされてきたのか?

震災の影響と、業務が立て込んでいたために久々のブログの投稿となります。 あらためて、今回の震災で被災された皆様には、心よりお見舞い申し上げます。 私の実家も福島にありますが、会津地方ということで大きな被害はありませんでしたが、友人や同僚の実家などでは被害にあったところもあり、なかなか精神的にこたえるものがありました。 原発の問題など、まだまだ厳しい状況が続きますが、復興と再生を信じて頑張っていきましょう!   ということで (←なにが?) 、今回は、長い間囁かれてきたものの、その詳細についてはあまり語られることのなかった IIS と PHP にまつわる噂、「IIS で PHP を動作させるとパフォーマンスが悪い、安定しない」という件について、事実なのか否か、そしてそれはいかなる理由によるものなのか、掘り下げて書いてみたいと思います。   なぜ、 IIS は PHP アプリケーションの実行に不向きとされてきたのか? IIS はリリース当時から PHP を CGI  ( Common Gateway Interface ) として ホストすることができました。 PHP 4 からは PHP ランタイムがマルチスレッド対応となり、IIS 用として ISAPI  (Internet Server Application Programming Interface) モジュールも提供され、IIS 上でも効率よく高速に動作することが可能になりました。 また、XAMP が登場する以前の PHP の入門書をひも解いてみると、その多くで IIS  上で PHP を動作させるための設定が紹介されていることは、その当時に書籍で…


Visual Studio 2010 [発行]機能で配置可能とするためのサーバー設定

以前、お客様から “Visual Studio 2010 の [発行] 機能を使って ASP.NET アプリの配置を行いたいのだけれど、サーバー側の設定がわからない” との質問をいただき、”詳細をブログに書きますよ” とお答えしたものの、うっかり書いてなかったので記述します。 その前に Visual Studio 2010 の持っている発行機能について、簡単にご紹介しておきましょう。   Visual Studio 2010 ASP.NET アプリケーションの 発行 機能 Visual Studio 2010 は ASP.NET アプリケーション向けに 発行 (Deploy) と呼ばれるアプリケーションの配置機能を持っています。 この機能は、単にアプリケーションのファイルを配置先に展開するだけでなく、Web サーバー (IIS) の設定や、使用しているデータベースのスキーマからデータまでをパッケージングして、配置先に反映させることができます。 なお、Visual Studio 2010 は ASP.NET アプリケーション配置のより詳しい説明につきましては、以下のドキュメントをご参照ください。 ASP.NET Web アプリケーション プロジェクトの配置の概要 http://msdn.microsoft.com/ja-jp/library/dd394698.aspx   ASP.NET Web 配置によるインストールを可能にするサーバー設定 サーバー側で Visual Studio…


WebMatrix の Web ギャラリーにアプリが表示されなくなった場合の対処方法

先日、というか、よりによって OSC 2011 Tokyo Spring の前日、WebMatrix から新規のプロジェクトを作成する際の [Web ギャラリーからサイトを作成する] にアプリケーションリストが表示されなくなり、Web Platform Installer、WebMatrix ともに入れなおしても治らないという現象が発生しました。 こんなかんじ↑になりました。 OSC 終了後、じっくりと調べて復旧する方法を見つけたのでアップさせていただきます。ちなみに Web Platform Installer のリストのほうは問題なく正常に表示されておりました。   WebMatrix に Web ギャラリーが表示されなくなった場合の対処方法 WebMatrix から新規のプロジェクトを作成する際、 [Web ギャラリーからサイトを作成する] を選択してもアプリケーションリストが表示されない場合、とりあえず以下の点を順に確認してください。 インターネットに正しく接続されているか プロキシなどを使用している場合は、イーモバイルなどの接続に替えてどうか Web ブラウザーのローカルキャッシュを削除してどうか コンピューターを再起動してどうか WebMatrix をいったん削除し、入れなおしてどうか ここまで試しても WebMatrix に Web ギャラリーにアプリケーションの一覧が表示されない場合は、以下の方法をお試しください。 WebMatrix と Web Platform Installer をともに削除 以下のフォルダ下に残っている WebMatrix と Web Platform Installer フォルダを削除…