Webを飾る技術

電気通信大学 M2J 稲津和磨

Webアプリ

最近といっても、数年前からだが、Webが熱い。ブラウザで地図アプリが動いたり、OSみたいなものが動いたり、最近ではオフィスみたいなソフトも動くようになっている。そこで、今回はその要素技術を少し紹介することにする。

要素技術

情報を記述するHTML、XML。見た目を記述するCSS、情報を操作するXSLT、ページに動きをつけるJavaScriptなどを紹介する。

HTML

皆さんご存知のHTML。タグで文章を装飾します。

<なんとか></なんとか>

という形式。

文章の「見た目」ではなく「意味」を表すために使われます。（ここは強調、ここは引用など）その見た目はブラウザに依存するが、後述するCSSを用いることで、見た目を指示することも出来る。

<html>
  <head><title>TestPage</title></head>
  <body>
    <h1>HTMLを書いてみる</h1>
    <p>pはパラグラフのP</p>
    <hr />  <!-- 水平線　これはコメント -->
  </body>
</html>

CSS

HTMLで装飾されたものについて、その見た目を定義する。色、大きさ、背景、枠、etc...

同じHTMLでもCSSを変えることでまったく別の見た目にすることも出来る。

<html>
  <head><title>TestPage</title>
  <style>
h1{
  color:red;
}
p{
  border:solid;
  background-color:#ffffdd;
}
  </style>
  </head>
  <body>
    <h1>HTMLを書いてみる</h1>
    <p>pはパラグラフのP</p>
    <hr />
  </body>
</html>

XML

個別の目的に応じたマークアップ言語群を創るために汎用的に使うことが出来る仕様である(wikipedia)。気分としてはHTMLのような書き方でもっと色々なものを記述するためのもの。

<DataSet>
  <Software>
    <title>Eclipse</title>
    <language>Java</language>
  </Software>
  <Software>
    <title>Linux</title>
    <language>C</language>
  </Software>
  <Software>
    <title>apt</title>
    <language>Perl</language>
  </Software>
</DataSet>

XSLT

XMLを変換する方法を定義するXML。XMLをHTMLに変換したりできる。

カンマ区切りテキストに変換するXSLT

<? xml version=”1.0” encoding=”UTF-8” ?>
<xsl:stylesheet version=”1.0” xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
 <xsl:output method=”html” encoding=”Shift_JIS” />
 <xsl:template match=”/DataSet”>
  <xsl:for-each select=”./Software”>
   <xsl:value-of select=”title” />,<xsl:value-of select=”language” />
  </xsl:for-each>
 </xsl:template>
</xsl:stylesheet>

HTMLに変換するXSLT

<? xml version=”1.0” encoding=”UTF-8” ?>
<xsl:stylesheet version=”1.0” xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
<xsl:output method=”html” encoding=”Shift_JIS” />
<xsl:template match=”/DataSet”>
  <html>
  <head><title>test page</title></head>
  <body>
    <xsl:for-each select=”./Software”>
    <h1><xsl:value-of select=”title” /></h1>
    <p><xsl:value-of select=”language” /></p>
    </xsl:for-each>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

JavaScript

HTMLに「動き」を与えるもの。ブラウザで動作する唯一の言語。見た目は少しJavaに似ていて、名前にもJavaとあるが、「まったく別の言語」です。

とりあえず書いてみる

for文とか使えます。document.write(“ほげほげ”) はdocumentクラスのwriteメソッド的なものを文字列を引数にして呼び出している。

<html>
<head><title>TestPage</title></head>
<body><script>
 for(i=0;i<10;i++){
  document.write("<h1>"+i+":Hello World</h1>")
}
</script></body></html>

関数を使ってみる

functionで関数を定義することが出来る。関数は普通はヘッダに定義する。

<html>
<head><title>TestPage</title>
<script>
  function sum(n){
    x=0;
    for(i=1;i<=n;i++){
      x+=i;
    }
    return x;
  }
</script></head>
<body><script>
  document.write(sum(10));
</script></body></html>

ブラウザのアドレスバー

javascript:(alert(1+2+3+4))

実はブラウザのアドレスバーでも実行できる。

イベントハンドラ

クリックすると文字を表示する。マウスを乗っけると色が変わる。などを実現できる。

オブジェクト.style.プロパティ名

でCSSにアクセス出来る（プロパティ名が微妙に異なるので注意）

<html>
<head><title>TestPage</title></head>
<body>
<input type="button" onclick="alert('Hello World')">
</body></html>

マウスが乗ると色が変わる

<html>
<head><title>TestPage</title>
<script>
  function over(obj){
    obj.style.backgroundColor = 0xFF0000;
  }
  function out(obj){
    obj.style.backgroundColor = 0xFFFFFF;
  }
</script></head>
<body>
Point<span onmouseover=”over(this)” onmouseout=”out(this)”>Here</span>!
</body></html>

スコープ

var重要。varを付けずに変数を宣言するとグローバルスコープになる。

var x=”global”;
function f(){
  var x=”local”;
  alert(x);  // local
}
alert(x);  // global
f();
alert(x);  // global

var x=”global”;
function f(){
  x=”local”;
  alert(x);  // local
}
alert(x);  // global
f();
alert(x);  // local!!

関数オブジェクト

関数の宣言や適応には何通りか書き方がある。

function hoge(){
  alert(“hello”)
}
----↑↓同じ意味------
var hoge = function(){
  alert(“hello”)
}

hoge();
------↑↓同じ意味-----
hoge=function(){
  alert(“hello”);
}()

関数を引数にすることが出来る。関数をreturnすることができる。

function calc(f,a,b){
  return f(a,b);
}
add=function(x,y){
  return x+y;
}
sub=function(x,y){
  return x-y;
}
calc(add,5,1); // =>6
calc(sub,5,1); // =>4

function addn(n){
  return function(p){return n+p};
}
add1 = addn(1);
add1(5) // => 6

JavaScriptとオブジェクト指向

avaやC++のようなオブジェクト指向とは少し趣きの違うものがJavaScriptにはある。正直使わなくても書けるがまぁ紹介。

new

クラスとかインスタンスの区別はない。あるのは全部「オブジェクト」

function Rectangle(w,h){
  this.width = w;
  this.height = h;
}
r = new Rectangle(100,50);
alert(r.width);

new Rectangleとすると、新たに空のオブジェクトを作成し（便宜上aと呼ぶ）、Rectangle()の処理を実行する。この時thisはaをさすようにする。

prototype

オブジェクトはprototypeというプロパティを持っている。これはnewした時にそのオブジェクトの親となるオブジェクトを指すプロパティである。何も指示していないとObject.prototypeを指しており、そこにはtoStringなど基本的な操作が定義されている。

function Rectangle(w,h){
  this.width = w;
  this.height = h;
  this.area = function(){
    return this.width * this.height };
}

function Rectangle(w,h){
  this.width = w;
  this.height = h;
}
Rectangle.prototype.area = function(){
     return this.width * this.height 
};

prototypeをうまく利用すると、余計な関数オブジェクトを作らずにメソッドを追加できる。

まとめ

駆け足でまとめましたが、これらの実験はエディタとブラウザさえあれば簡単に出きるのでぜひ遊んでみてください。