HTML5関連の記事一覧



20150417-Google-Codeの終了でhtml5shivがロードできなくなる-01

画像出典:Google Code


Google Codeがスパムや悪質なプロジェクトのために2016年1月25日に終了するというニュースが3月にありました。

 米Googleは3月12日(現地時間)、開発者向けにAPIなどを提供したり、オープンソースプロジェクトをホスティングするサービス「Google Code」を来年1月に閉鎖すると発表した。同日、新たなプロジェクトの作成はできなくなった。
「Google Code」、2016年1月25日に閉鎖へ GitHubへの移行を奨励 - ITmedia エンタープライズ


その時は「開発者向けのページが閉鎖か、別に開発者ではないし…(プロジェクトをアップしているわけでもないし)」という位にしか思っていなかったのですが、実はWeb制作者に影響があるかもしれません!(というか私は影響がありました(汗))


●IE8対応で…

Internet Explorer 8(IE8)でHTML5対応するために、こんなコードをheadタグ内に書いていませんか?

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


そう、IE8はHTML5の新しい要素に対応していないので、スクリプトで対応するようにしてくれる優れもの「html5shiv」です。ファイルを自分で用意しなくてもホスティングしてくれているので簡単ですよね。

老舗のサイト「TAG index」のページでもそう書かれています。


私も使っています。というか、このブログのPC版は現在そうなっています。


この素晴らしいスクリプトのhtml5shivですが、ホスト名をよく見てみると「html5shiv.googlecode.com」。

そう「html5shiv.googlecode.com」です。


ダメですね…。

2016年1月25日を過ぎたら、html5shivのファイルがロードできなくなって、IE8では体裁が崩れます。

記事の続きを読む




●ページの公開時間や更新時間はGoogleの検索結果に表示される

早速本題ですが、ページの公開日時や更新日時をHTMLタグでページ内に書いておくと、Googleで検索する際に表示されますよ、というお話。

パッと見で、新しい情報か、古い情報かがすぐ分かって便利ですね。


以下の画像は「授与品袋」で検索した結果。

スニペットの部分に「2010/50/21」と日付が表示されています。

20150227-HTML5のtimeタグでページの更新日時-01


これは、授与品袋・手提げ紙袋・たとう紙(吉田印刷所)のページのフッター部分にある「公開時間」が反映されています。横に更新時間もありますが、そこの日時はGoogleの検索結果では出てきていません。

つまり、検索結果をコントロールすることができるのです。

20150227-HTML5のtimeタグでページの更新日時-02


そのために使うのが、HTML5のtimeタグです。

timeタグは日付を表す際に使用します。それだけで特に公開日時や更新日時を表すものではありません。


細かなtimeタグの話は上記ページをご覧頂くことにして、記事タイトルにある「ページの更新日時をHTML5のtimeタグを使用して表現」してみましょう。

記事の続きを読む



★ざっくり言うと

  • YouTubeでは動画の速度を2倍まで速くできる
  • FirefoxではFlashプレイヤーでの再生になっているとオプションで出てこない
  • Flashプレイヤーの再生から変更するのはHTML5動画プレイヤーのページで行う



●YouTube動画を時短で見ましょう

ということでDTP TransitでYouTube動画を時短で見ようという記事がアップされていましたが、Chrome以外はダメとのこと。

私の環境(OS X Mavericks)では、Google Chromeのみサポートされているようで、FirefoxやSafariでは実現できませんでした。

YouTubeが「早聞き再生」をサポート - DTP Transit(Mac OS X, OS X Mavericks, 動画)

え? Firefoxで以前からできていますが…と思って調べてみたら、Firefoxでは設定次第で変わってくるようです。



●Firefoxで倍速再生できない状態のYouTube動画再生

FirefoxでYouTube動画を見る時に「歯車アイコン」をクリックし、再生速度を変更しようと思っても、設定項目が出てきません。自動再生とアノテーションと画質のみ。

20150108-Youtube-倍速再生-05

画像出典:瀬戸弘司が選んだ!2014年 本当に買ってよかったものランキング 5位→1位(YouTube)


その場合、動画上で右クリックすると、こんな感じになりませんか?

「Adobe Flash Player 16.x.x.xについて」

つまりYouTube動画はFlashのプラグインで再生されているわけです。

20150108-Youtube-倍速再生-06

記事の続きを読む



●videoタグは複数ソースが設定できて便利

HTML5のvideoタグでは以下のように書くことで複数のファイルソースを指定することができます。

<video>
    <source src="example.mp4">
     <source src="example.webm">
    <img src="example.gif">
 </video>


上記の例だと、

  • 最初に「example.mp4」の再生をトライ
  • 「example.mp4」を再生できない場合、「example.webm」の再生のトライ
  • 「example.webm」を再生できない場合、「example.gif」を表示

となります。

簡単な書き方で、再生できない場合の複数のソースの指定(フォールバック)ができて便利ですね。


でも、複数のソースの指定そのものが面倒ではないですか?

ファイルも複数用意しなければなりませんし…。今回の例の場合、MP4形式の動画・WebM形式の動画・アニメーションGIFの3種類と、常に時間がないWeb制作者には大きな負担です。

記事の続きを読む



このブログのフッター部分にはメッセージを送るフォームがあります。

このフォームで何も書かずに「確認する」ボタンを押してフォーム送信したらどうなるのでしょうか。

20140424-フォームコントロール-HTML5-01


ページが移動して(画面が遷移して)エラーが表示されます。

「名前を入力して下さい」「メッセージを入力して下さい」というエラーが表示されます。

20140424-フォームコントロール-HTML5-02


こういうパターン、一昔前にはよくありましたよね。フォーム送信した後にエラーが表示されるパターン。

一昔前のフォームであれば、これでも仕方が無いのですが、HTML5の時代です。フォームのエレメントに属性を付けるだけで、フォームを送信する前にエラーのチェックができるのです。

属性は5秒以内で付けられる簡単なものですので、フォーム入力がある場合、ぜひ付けておきましょう。

それではその属性を紹介します。Firefox 28・Internet Explorer 11・Chrome 34での動作も調べてみました。

記事の続きを読む



20131213-Firefox-YouTube-HTML5-06
画像出典:W3C HTML5 Logo



FirefoxでFlashを使っているサイトを開くと、結構な割合でこんなダイアログが出ませんか?
20131213-Firefox-YouTube-HTML5-01

警告:プラグインの応答がありません
 Shockwave Flashプラグインがビジー状態か応答を停止している可能性があります。今すぐプラグインを停止するか処理が完了するまで待機していてください。
 [待機] [プラグインを停止]



これで「待機」をクリックしても、多くの場合、Firefoxが「応答なし」となって、結局プラグインを停止することになるのですが、「応答なし」となっている間は、何もできないので、結構イラッとしますよね?


Flashを使っているページを開くのが怖いわ…と思ってしまうくらいです。


といっても、Flashプラグインがないと閲覧できないページもまだまだ多いので、Flashプラグインを外すわけにもいかないと思っているので、Flashをわざわざ使わなくても良いページはFlashを使わなくすることで、「応答なし」になるリスクを減らすことができます。


Flashを使っていてメジャーな所といえば、やはりYouTubeでしょう!
YouTubeの動画の多くは最近Flashプラグインを使わなくても見ることができます。


その設定を紹介しますね。

記事の続きを読む



20120406-jQueryのattrとprop-00

jQueryをロードする際のナイス!と思った書き方」でコメントを頂いたので返信がてら記事を書いてみようと思います。


シマダさんからコメントを頂きました。ありがとうございます。
フォールバックの違う書き方をCSS-Tricksで見つけました。
http://css-tricks.com/snippets/jquery/fallback-for-cdn-hosted-jquery/

Initializrが書き出すやつはHTML5用であり、HTML4やXHTML1.0ではHTMLの文法エラーを招くので、HTML4やXHTML1.0に書くのであればCSS-Tricksで紹介されているやつがいいでしょう。
jQueryをロードする際のナイス!と思った書き方

なるほど。まだ皆さんがHTML5になっているわけではないですから、重要な指摘ですね。


では文法エラーは何が出るのかから見てみましょう。
記事の続きを読む



20120618-HTML5のOGPにはxmlnsは不要-01

Geek_Tatoo by Massimo Valiani


HTML5でウェブサイトを作成していて、気になったことがありました。


気になった瞬間はFacebookやGoogle+で使用されるOGP(Open Graph protocol)のためのメタタグを設定していた時のことです。


ネットで検索すると必ずと言っていいほど「xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" を<html>のタグに追加しましょう」みたいなことが書いてあります。


こんな感じですね。

<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

この記述本当に必要ですか?


記事の続きを読む



20120610-htmlタグの書き方-00

HTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」ですが、テンプレートを使ってガリガリ制作を始めて見ると「これは本当にいいものだ!」というものが更にわかってきたので、その部分を紹介。


前回はjQueryのロードの方法がナイス!という話でしたが、今回はhtmlタグの書き方がナイス!という話。


いや、本当にさすがとしか言いようがない。

記事の続きを読む



20120518-Initalizr-jQuery-load-00

先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。


このブログも実はPC版は形式上HTML5のページになっているんです。
見た目はほとんど変わっていませんが…。


さて、CSS Niteのセミナーの中でHTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」が紹介されていました。


このサイトでテンプレートを作ってみて、そのテンプレートを開いたらjQueryをロードする時の書き方でこれはナイスな書き方だと思ったものがあったので紹介します。

記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索