HTML / XHTML ブログ記事 一覧

【こちらの記事は、約5分程でお読みいただけます。】

いつもITブログをご覧いただき、ありがとうございます！

皆さん、普段「コメント」を使うことってありますか？？

ＨＴＭＬ言語など、プログラムに触れたことがある方は、ご存知ですよね＾＾
そもそもコメントって、どのようなもので、いつ使用するべきなのでしょうか？

「コメント」とは、『注釈』を意味します。
注釈とは、補足・説明・解説のことですので、
コメント内に記載した内容 ＝ コンピュータが処理を行う際に補足と認識するもの
として、無視の対象となります。

なので、

・ 自分だけではなく、他人にも分かりやすい説明を記載する
・ その領域が何の領域を意味するのかを記載する
・ 一時非表示にする
・ 違うコードを割り当てる際に、消さずに一旦隠す

などなど、その時々により使い方は多種多様です。

そんなコメントは、実は下記の2種類に分割されます。

・ 行コメント
・ ブロックコメント

行コメントは『//』や『'』などがありますが、HTMLでは使うことができません。
HTMLやCSSのコメントは、「ブロックコメント」に分類されます。

■ HTML
『<!-- ～ -->』 で括る
（バージョンによって <comment> ～ </comment>も使用できる）

■ CSS （C言語、Java、JavaScript、PHPなども同じ）
『/* ～ */』で括る

というように、コメントは言語により記載方法は多々あります。

では、やってしまいがちなコメントを記載する際の注意点を、ご説明します。

■ 正しい書き方
 『<!-- ～ -->』で括ります。

■ 間違った書き方

・ 開始コメントを『<!-->』のように書いてはいけません。
　『>』で閉じず、あくまで『<!--』のように書きます。

・ コメントを入れ子にすることはできません。
　『<!--<!-- ～ -->-->』とすると、最初の終了コメントまでが
　コメントとみなされ、後ろの終了コメントが浮いてしまいます。

・ 終了コメントを『--!>』のように書いてはいけません。
　必ず『-->』のように書きます。

この他にも、注意点として、
<title>タグの中に、タイトルとされるテキスト以外を含めては
いけませんので、コメントも記載できません。

終了コメントを『--  >』のように、『--』と『>』の間に空白を入れる
ことは禁じられていませんが、
逆に開始コメントには『<!  --』のように『<!』と『--』の間に空白を
記載するのは禁じられています。

また、HTMLの中に『JavaScript』というプログラムを
組み込む際は、コメントアウトします。

「あれ？コメントは非表示にしたりする時に使うのでは・・・？」
と思われたかも知れませんが、JavaScriptを過去のブラウザのバージョンで
開いた際、コンピューターに認識して欲しくない時に使用するのです。

このように、一言に「コメント」と言っても、
様々な使い方があったり、間違った書き方があったりします。

正しいコメントの記述を心がけましょう♪＾＾

--------------------------------------------------------------------------------

Webサイトを一から作成するスキルを、KENスクールで学習してみませんか？

⇒【Web就職・転職対応コース一覧】
就転職を実現させるために現場で必要な実践的なスキルとノウハウを
基礎からバランスよく効率的に学習します。
マンツーマン形式の授業ですので、初めての方でも安心して学習できます！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 間部

【こちらの記事は、約5分程でお読みいただけます。】

いつもITブログを見ていただき、ありがとうございます！

今回はHTML5に関するツールのご紹介をしていきますね。

最近話題のスマートフォンのOSは、「iOS」や「Android」などが有名です。
iOSでFlashが使えないことは、皆さんご存知かと思います。

またApple側の主張としては、今後もFlashに対応する予定は無いようです。
その理由としては、Flashの代わりに、HTML5の活用が見込めるためです。

HTML5は今までのHTMLに比べ、様々な拡張機能や新機能があります。
その中にはアニメーションやグラデーションといったものがあります。

この機能により、ブラウザのみでFlashのような動きが可能になります。

スマートフォンのブラウザは完全では無いですが、HTML5に対応しています。
今までiOSでは見られなかったFlashのような動きが、
HTML5でなら見ることが可能になります！＾＾

そこで、FLASHをHTML5に変換してくれるツールが数々発表されています。
いくつかご紹介しましょう。

・Wallaby

http://labs.adobe.com/technologies/wallaby/

Adobeが公開したFlashのアニメーションをHTML5に変換するツールです。
以前にもこちらのブログで紹介しております。ぜひお読みください＾＾

Adobe「Wallaby」でFlashをHTML5に変換!

・Swiffy

http://swiffy.googlelabs.com/

Googleが開発したSwiffyです。

こちらはブラウザさえあれば簡単にFlashをHTML5に変換してくれます。

上記のWallabyとの違いは、Wallabyは「.fla」ファイルから変換するのに対し、
Swiffyは「.swf」ファイルを変換します。

さて、上記のURLをクリックすると以下の画面が出てきます。

(画像はクリックで拡大します。)

また、次に載せたものが変換前と変換後の比較の画面です。

上部に表示されているのが、元の「.swf」ファイル、
下部で表示されているのが、変換後のHTMLの表示になります。

実際の画面では星マークを回転させるにあたり、
多少速度は変わってしまうのですが、どちらもきれいに回っています。

私が使用している、iOSのデバイス上での動作確認も出来ました。

しかし、残念ながらActionScript3.0や、複雑なタイムラインを持った
ファイルに関しては変換が出来ませんでした。
この辺りが、今後の課題になりますね。

その他にも、HTML5関連のツールは沢山出ています。
以下は、FLASHのようにHTML5の開発が出来る作成ツールです。

作成ツール

・Adobe Edge

http://labs.adobe.com/technologies/edge/

HTML5, JavaScript, CSS3 ベースのアニメーションをFlushのような
描画ツールやタイムラインを使って制作できる、オーサリングツールです。

・hype

http://tumultco.com/hype/

こちらも、HTML5, JavaScript, CSS3を元に作る
アニメーション作成ツールです。

Mac OS X用ソフトで、価格はUSストアでは29ドル、
日本だと3500円とお手ごろです。

App Storeで販売されております。

これからのWebの技術はどれだけツールを使いこなせるか、
知っているかが鍵になりそうですね。

Webの技術に関心がある皆さんは、
色々なツールの使い方に注目していきましょう！＾＾

--------------------------------------------------------------------------------

KENスクールで「プログラム」を一から学習していきませんか？？

⇒【無料のマンツーマン体験レッスンを受けてみよう！】
KENスクールでは、プログラムが初めての方でも、
安心して学習していただける環境です！
プログラムとは何か？から始まり、
様々に利用されているプログラミング技術を分野ごとに紹介します。

是非、無料体験レッスンを受けてみてください！

本日の更新者：
パソコンスクール KENスクール Programコース
インストラクター 金替

【こちらの記事は、約6分程でお読みいただけます。】

ITブログを見てくださっている皆さん、こんにちは！

前々回は、canvas要素を紹介し、前回は、form要素の新機能を紹介しました。
今回は、HTML5の新要素の『video要素』について、ご紹介していきますね＾＾

video要素は、Webページ内で動画を再生されるための要素です。

video要素に対応するブラウザは、動画再生にFlash Playerなどの
プラグインが、必要ないという特徴を持っています。

さらに属性だけで、動画ファイルの指定、自動再生の設定、再生と再生位置の調整と
音量調整などができるコントローラーを表示することができます。

HTML5に対応しているブラウザも徐々に増えています。
これから紹介するサンプルページは、以下の環境で動作確認ができました。

【OS】

・Windows7

【ブラウザ】

・Internet Explorer 9.0

・Firefox 5.0

・Chrome 12.0

・Safari 5.0

それでは、video要素を使用したサンプルページを紹介します。

最初にサンプルページをChrome12.0で表示すると以下のような結果になります。

次にサンプルページのソースコードの紹介です。
video要素は9～13行目です。

【video要素を使用したサンプル】

最後に、video要素の属性とsource要素について解説していきます。

9行目で、video要素にcontrols属性とautoplay属性を記述しています。
この2つの属性は、属性値は不要です。

controls属性で標準のコントローラーを表示し、
autoplay属性で動画が自動再生する設定をしています。

この他に、video要素にはsrc属性があります。
この属性で再生する動画ファイルを指定できます。

しかしサンプルページでは、10、11行目のように、
source要素で再生する動画ファイルを指定しています。

なぜかというと、ブラウザごとに再生できる動画ファイルの形式が異なるため、
video要素のsrc属性では対応しきれないためです。

そこで、複数の動画ファイルを指定できるsource要素を使用します。

source要素は、src属性で再生する動画ファイルを指定し、
type属性で動画ファイルの形式も指定します。

拡張子が.mp4のファイルは、
Internet Explorer 9.0、Chrome 12.0、Safari 5.0で再生するためで、
拡張子が.ogvのファイルは、
Firefox 5.0で再生するために設定しています。

source要素で複数の動画ファイルを指定すると、
上から順番に再生できるファイルか試していくことになります。
最後まで再生できるファイルがない場合は、何も表示されません。

画像だけでも表示したい場合は、
video要素のposter属性に画像ファイルを指定します。

12行目の文章は、video要素に対応していないブラウザで
サンプルページを閲覧したときに表示されるメッセージです。

以上が、上図サンプルコード画像の解説となります。

ブラウザに合わせた動画ファイルを用意する手間はありますが、
video要素を使用すれば、標準のコントローラーを活用して簡単に
Webページ内で動画を再生させることができます。

さらに、JavaScriptを活用することで、
video要素の動画の再生や停止などの制御を、
Webページ上のマウス操作やキーボード入力などさまざまな
操作に合わせて行うこともできます。

video要素に限らず、 HTML5の力を最大限に引き出すためには、
JavaScriptが必須です。

KENスクールで、JavaScriptの基本を学んでみてはいかがですか？

これからも新機能をご紹介していきますので、
皆さん楽しみにしていてくださいね！

--------------------------------------------------------------------------------

KENスクールで「プログラム」を一から学習していきませんか？？

⇒【無料のマンツーマン体験レッスンを受けてみよう！】
KENスクールでは、プログラムが初めての方でも、
安心して学習していただける環境です！
プログラムとは何か？から始まり、
様々に利用されているプログラミング技術を分野ごとに紹介します。

是非、無料体験レッスンを受けてみてください！

本日の更新者：
パソコンスクール KENスクール Programコース
インストラクター 杉山

こんにちは、HTML5委員会です。

前回 HTML5の新要素 に引き続き、これから凄まじい進化を迎えるであろう

HTML5の新機能について紹介していきます。


そもそもHTML5が開発された経緯は何か？？を簡単にご説明しましょう。
 

HTMLは、元々文書構造などを記述するために使用されることが目的

でしたが、現在のWebのすさまじい進化により、

もっと複雑な機能が要求されるようになりました。

AJAXなどの動的なサイトなどがそれにあたりますが、

現行のHTMLでは十分その要求に応えることが難しくなってきました。


そのような要求に答えるため、Apple、Mozilla、Operaなどのブラウザベンダーが

もっと優れたWebアプリケーションに応えることが出来る次世代のHTML

を作ろうと立ち上げたのが

WHATWG（Web Hypertext Application Technology Working Group）

という団体です。
 

これが現在のHTML5のベースを作ることになります。


現在はW3CとWHATWGは協力してHTML5の仕様を色々と計画しています。
 

HTML5ではFLASHやFLEX、Sirverlightなどに替わる

RIA(Rich Internet Applications)の要素が多く含まれており、

動画や音楽再生の要素を始め色々な機能が追加されています。


HTML5に対応しているブラウザはまだまだ少ないですが、

今後各ブラウザベンダーはHTML5をサポートするブラウザを

開発することになるでしょう。
 

まだまだ正式な勧告はされていないのですが、

今後もどんどん新機能が追加されるでしょう。
 

少し長くなりましたが、本題に入ります。
 

本日はHTML5で機能追加されたFORM要素についてご紹介させて頂きます。
 

HTML5ではinput要素にのtype属性に沢山の属性値が増えました。
 

今までもJavaScriptを使うことで文字入力をチェックしたり、

select要素の中身を動的に生成したりすることは出来ましたが、

JavaScriptを使わなくても、より優れた入力フォームを作れる

ようになりました。
 

もちろんJavaScriptを使うことでさらに便利に使うことも出来ます。


サンプルコードを作成したので、まずは完成例から見て下さい。


 

これがHTMLとは驚きでしょう？？
 

多少JavaScriptは使っておりますが、

見た目の部分はすべてHTML5で出来ています。

まるでFLEXの入力フォームのようです。


サンプルコードがこちらです。

html5_form.html

注目するのは16行目からのtype属性の属性値！！
 

今までに見たことがない属性値が並んでおります。

それでは解説です。 

• 16行目 type="text" required

  今までと同じテキストですが　required　という属性を付けることにより、
  自動で必須項目にすることが出来ます。
  
  もし未入力で送信ボタンを押すと以下のような画面になります。
  
   

• 17行目　type="date" 18行目　type="datetime"

  こちらはテキストのどこかをクリックすると以下のようなカレンダーが
  表示されて日付を指定すると自動で日付や日時が入力されます。
  
  
   

• 19行目　type="email" 20行目　type="tel"

  見た目は普通のテキストですがそれぞれEMAILや数字が
  入力されていないとrequiredと同じように以下のような画面になります。
  
  
   

• 21行目　type="number"

  こちらはVisualBasicでおなじみのスピンボタンです。
  
  ボタンを押すと自動で数字が入力されます。
  
  上向きボタンを押せば増えて、下向きボタンを押せば数字が減ります。
  
  
   

• 22行目　type="text" autocomplete="on" list="list"

  こちらも只のテキストのように見えますがテキストをクリックすると
  オートコンプリート機能が付いているので、候補が表示されます。
  
  候補はdatalist要素で指定し、id属性で関連付けをします。
  
  
   

• 29行目　 type="range" name="range" min="0" max="10" value ="5" onchange="slider(this.value);" >

  こちらはFLEXのスライダーのような機能になります。
  
  min 、max属性で最小と最大を決めます。
  
  今回はJavaScriptを使って変更した値ををoutoput要素
  (こちらもHTML5の新要素です)で表示しています。
  
  今回は新属製の紹介なので細かいJavaScriptの説明は割愛します。
  
  こちらは動画や音楽再生が出来るvideo要素やaudio要素で
  使われることが多くなるのではないでしょうか？？
  
  (クリックで拡大します)
  
  
   

 以上がサンプルコードの説明になります。
 

今回ご紹介させて頂いたFormの新機能は、まだ一部に過ぎません。
 

残念ながらまだ実装されているブラウザは少なく、

今回のサンプルもOpera10でしか上手く動かすことが出来ませんが、

これからはより多くのブラウザでの実装が期待出来るでしょう。


HTML5委員会では、これからも新機能をご紹介していきますので

皆さん楽しみにしていて下さい。

--------------------------------------------------------------------------------

パソコンスクール KENスクール横浜校　Programインストラクター
http://www.kenschool.jp/school/yokohama/index.html

KENスクールでJavaScriptを学びたい方は、Program講座へ！
http://www.kenschool.jp/Program/index.html
 

こんにちは、HTML5委員会です。

各校舎のインストラクターからメンバーを募り、最近発足された委員会です。

今後も、たまに顔を出すと思いますので、よろしくお願い致します。

委員会の名前の通り、HTML5についていろいろ紹介していきます。
 

今回は、Webページ上で、グラフなどの図を描画するために作られた

canvas要素を紹介します。

canvas要素の紹介の前に、 HTML5から記述方法が変わった要素があります。
こちらから紹介します。

まずは、要素の前に文書型宣言が変わっていて、

下記の通りXHTMLと比べてかなり短くなります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
↓↓↓↓↓
<!DOCTYPE html>

次に、文字エンコーディングの設定も変わっています。

meta要素にcharset属性が新しく出来たので、次の通りだいぶ短くなります。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
↓↓↓↓↓
<meta charset="UTF-8" />

最後に、style要素とscript要素にtype属性がいらなくなり、次の通り記述できます。

<style type="text/css"></style>
↓↓↓↓↓
<style></style>

<script type="text/javascript"></script>
↓↓↓↓↓
<script></script>

それでは、本題のcanvas要素を使って、

次の完成例ように星を描画する方法を紹介します。

完成例(実物大)

次のサンプルコードが、HTML5を使って作成した、星を描画するサンプルコードです。

サンプルコード
(クリックで拡大)

サンプルコードを作成して、

完成例と同じようにできているか確認する際に注意があります。
 

うまく表示できるブラウザとできないブラウザがあるので、

もしご覧いただけないようでしたら、
 

Google Chromeか Firefoxの最新版で確認してみてください。

続いて、サンプルコードの内容を確認します。


皆さんが星を書く時には、ひと筆書きで書くと思います。

やり方は同じです。

ただ、パソコンに書いてもらうので、表現の方法が違います。
 

線の書き始める位置や終わりの位置を、x座標(横)、y座標(縦)で表現していきます。

それでは、手順に沿って解説します。

1．事前準備

まず、body要素内にcanvas要素を記述します。

canvas要素にid属性を記述し、特定できるようにしておきます。
 

次に、id属性を元に、どのcanvas要素に描画するか指定します。

document.getElementById('××') という命令です。
 

最後に、平面(2D)描画をするため準備をします。 getContext('2d') という命令です。
 

今回は平面ですが、今後は立体(3D)も出来るようになるかも知れないそうです。

2．スタート地点の決定

スタート地点をxとｙがともに0の位置に指定します。 beginPath() という命令です。

3.一筆書き

まず、一筆書きの開始地点へ移動します。 moveTo(x, y) という命令です。
 

次に、1本ずつ5本の線を引きます。 lineTo(x, y) という命令です。
 

最後に、一筆書きが終わったことを伝えます。 closePath() という命令です。

4.図形の塗りつぶし
 

塗りつぶす色を指定をします。 fillStyle = 'rgb(0, 0, 0)' という命令です。

図形を塗りつぶします。 fill() という命令です。
 

色を指定しないと、黒で塗りつぶされてしまいます。

命令の出し方は、それほど難しくなかったと思います。

ただ、HTMLで作ったというよりも、JavaScriptで作ったという印象が残ったと思います。

HTML5には、そのタグだけでは力を発揮しきれず、

CSSやJavaScriptを使わないと、そのタグ自体を活かせないというものがあるようです。


少しだけ変な感じがしますね。

昔に比べて、Webページに求められていることが複雑になってきていて、

HTMLだけでは対処しきれないということなのだと思います。
 

一つの技術だけはなく、色々な技術を組み合わせていかないと、

良いものは出来ないということですね。

これから、どんどん新しい情報を紹介できたらと思っています。

以上、HTML5委員会でした。

 --------------------------------------------------------------------------------

パソコンスクール KENスクール蒲田校　Programインストラクター
http://www.kenschool.jp/school/kamata/index.html

KENスクールでJavaScriptを学びたい方は、Program講座へ！
http://www.kenschool.jp/Program/index.html

インターネットを利用していて、ページの表示が遅いと嫌になりませんか？
統計では、表示待ち時間が平均３秒以上でそのサイトへの訪問者数が激減するそうです。
 

普段見ているサイト（=Webページ）は、画像がよく使われていると思います。
企業のロゴであったり、広告であったり、小さい飾りの画像であったり。
 

実は、画像をどれだけ使っているか、もページの表示時間に
与える影響のひとつとして挙げられるんですね。
 

｢これの画像が必要だから送って。｣という（HTML文書から）注文がくると、
ネット上のサイト専用の箱から、必要な画像を注文ごとにデリバリーします。
お店から荷物を小出しに配送（分割配送）しているようなものですね。
荷物（画像）が多ければ多いほどすべての荷物がそろうには時間がかかり、
つまりはページの表示が遅れる要因に。
もちろん荷物の重さ（画像情報）にもよりますので一概にはいえませんが。
 

画像に注目してお話をすると、
実はこの分割配送を一括配送する方法が誕生しました。
「CSS Sprites（CSSスプライト）」というテクニックになります。
 

■　CSS Spritesとは？
 

実は、新しい技術というわけではなく、ちょっとした"小技"的なことだったりします。
なので、一括配送するための便利なソフトが誕生した、と言うほうが的確かもしれません。
 

方法は実に単純で、
個々の画像をまとめて一枚の画像にして、必要な部分だけを
CSS（スタイルシート）で位置を座標チックに指定して使う…というもの。
 

実はこの方法、Googleで採用されています。
ちょっと見てみますか？
Googleの検索結果ページにて、左上のロゴを保存しましょう。
（ロゴの上で右クリック⇒｢名前を付けて背景を保存｣⇒保存）
保存した画像をダブルクリックして開いて見てみると、
ロゴ以外にも小さいイラストがありませんか？
でも検索画面で表示されていたのはロゴだけでしたよね？
これはロゴの部分だけを座標のように位置を指定して表示していただけなんですね。
 

Google以外でもYahoo!やYouTubeなどでも採用しているようです。
 

■　実際の作り方とは？
 

画像を一枚にし、CSS側で必要な部分のbackgroundに設定し、
background-positionで位置を指定します。
 

方法は２通りあります。
 

（1）ソフトを使用する。
◎ メリット ： 指定した個々の画像を自動的に一枚にし、個々の位置を示したCSSを自動生成する。
△ デメリット ： 画像容量が決められている場合がある。画像に無駄な余白ができてしまう。
 

☆ソフト紹介（フリーソフト）
　　　・CSS Sprites Generator　※ シンプル
　　　・CSS Sprite Generator　 ※ 詳細設定可能
 

（2）あくまで自力で。
◎ メリット ： 無駄な余白を作ることなく、処理能力を上げられる。
△ デメリット ： 画像の作成や位置の把握に手間がかかる。
 

■　サイト高速化への挑戦！
 

このように個々の画像を一枚ずつ読み込むよりも、一枚の画像にまとめることで
リクエスト（注文）数を減らし、ページ読み込みをスムーズに行うことができます。
 

デメリットとしては画像サイズの修正が一ヶ所でもあった場合、
すべての画像位置に影響する可能性があることです。
 

画像が多く、ページ表示が遅い場合の解決策のひとつとして
知っておくのもいいかもしれません。ページ表示の負担が減れば、
ユーザーにとってストレスフリーなネット環境になり、相乗効果も期待？！
 

ひと手間はかかりますが、けっこう楽しいので是非試してみて下さい♪