オープンソースカンファレンス
2020 Hokkaido

HTML5プロフェッショナル認定試験 レ
ベル1解説セミナー〜 実務経験者も見落としがちなポイント解説します 〜
2020年6月27日（土）@OSC 2020 Hokkaido

株式会社フォーク齊藤 涼
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

自己紹介

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

2© LPI-Japan 2016. All rights reserved.

自己紹介

齊藤 涼
株式会社フォーク 札幌ブランチ所属
フロントエンドエンジニア

2010

デザイン（紙媒体）の仕事をする

2013

Web業界に転職

2017

株式会社フォーク入社
Webページ制作などの案件に携わりながら、
HTML5プロフェッショナル認定試験レベル1取得

2020

レベル2取得に向けて勉強中

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

3© LPI-Japan 2016. All rights reserved.

自己紹介
株式会社フォーク
＠渋谷、札幌（ HTML5プロフェッショナル アカデミック認定校）

HTML5プロフェッショナル認定試験の合格者

41名
Lv2: 13名

51名
Lv2: 14名

Lv1:

Lv1:

※2019年6月時点※2020年6月時点

私が所属する札幌ブランチでは、8名がレベル1に合格しています

https://www.fork.co.jp/
https://4009.jp/
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

4© LPI-Japan 2016. All rights reserved.

本日解説する内容★ 試験概要、学習方法、対策の紹介
○

試験概要

○

学習方法

○

試験のポイント★ 実務経験者でも見落とすポイント○

実務と比較しての落とし穴★ 資格を取得して活用できたこと○

実務での活用○ステップアップ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

5© LPI-Japan 2016. All rights reserved.

試験概要

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

6© LPI-Japan 2016. All rights reserved.

HTML5プロフェッショナル認定資格とは

特定非営利活動法人エルピーアイジャパン（LPI-Japan）が、
HTML5、CSS3、JavaScriptなど
最新のマークアップに関する技術力と知識を、公平かつ厳正に、中立的な立場で認定する認定制度

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

7© LPI-Japan 2016. All rights reserved.

2つのレベルHTML5 レベル1
マルチデバイスに対応した静的なWebコンテンツを HTML5を使ってデザイン・作成できる。

HTML5 レベル2
システム間連携や最新のマルチメディア技術に対応した Webア
プリケーションや動的Webコンテンツの開発・設計ができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

8© LPI-Japan 2016. All rights reserved.

2つのレベル

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

9© LPI-Japan 2016. All rights reserved.

試験の概要試験実施方式

コンピュータベーストテスト（CBT）※ほとんどの問題が選択式

合否結果

試験終了と同時

所要時間

90分（機密保持契約とアンケートの時間を含む）

問題数

約60問

合格ライン

約7割

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

10© LPI-Japan 2016. All rights reserved.

学習方法

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

11© LPI-Japan 2016. All rights reserved.

学習方法
公式サイトの学習方法を参考にする
セミナーの紹介や、メールマガジン、サンプル問題があるので活用する
https://html5exam.jp/measures/

教本を使う
認定教材を読み込む
サンプル問題があったら、全問正解するまで挑戦する

実際にコードを書く
CodePenなどの、即座に確認できるものを使えば捗ります

わからないところは検索
HTML5の仕様などが掲載されているサイトがあるので、教本などと合わせて理解を深める
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

12© LPI-Japan 2016. All rights reserved.

試験のポイントThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

13© LPI-Japan 2016. All rights reserved.

出題範囲

1.1 Webの基礎知識
1.2 CSS
1.3 要素1.4 レスポンシブWebデザイン
1.5 APIの基礎知識

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

14© LPI-Japan 2016. All rights reserved.

1.1 Webの基礎知識

1.1 Webの基礎知識
1.1.1 HTTP, HTTPSプロトコル
1.1.2 HTMLの書式
1.1.3 Web関連技術の概要

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

15© LPI-Japan 2016. All rights reserved.

1.1 Webの基礎知識
HTTP通信とはHTTP通信とは、ブラウザとサーバー間で、HTML文書などのテキストメッセージを受け渡すためのプロトコルです。
ブラウザ側から、リクエストメッセージを送信し、サーバーからレスポンスメッセージを受信します。
これにより、ブラウザにWebサイトの表示を行うことができます。
リクエストメッセージ（URL、パラメータなど）

レスポンスメッセージ（HTMLなど）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

16© LPI-Japan 2016. All rights reserved.

1.1 Webの基礎知識
HTMLの構造<!DOCTYPE html><html><head><title></title></head><body><header></header><main></main><footer></footer></body></html>

先頭にDOCTYPE宣言をし、そのあとにhtmlタグを設置し、各中身を設置します。
DOCTYPE宣言は、大文字で書いても小文字で書いてもOKです。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

17© LPI-Japan 2016. All rights reserved.

1.2 CSS

1.2 CSS
1.2.1 スタイルシートの基本
1.2.2 CSSデザイン
1.2.3 カスケード(優先順位)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

18© LPI-Japan 2016. All rights reserved.

1.2 CSS
カスケード(CSSの優先順位) - 1
CSSの優先順位は右の図のようにな

高ブラウザのスタイル !important付きります。
ユーザー !important付き

基本的には、HTMLで読み込んだHTMLで読み込んだ CSS !important付き

CSSが適用されますが、!important
を付けた場合は、強制的に優先度がHTMLで読み込んだ CSS

あがります。
ユーザー

ブラウザのスタイル低The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

19© LPI-Japan 2016. All rights reserved.

1.2 CSS
カスケード(CSSの優先順位) - 2
セレクタによる優先順位の設定
1桁目 → 要素
2桁目 → クラスセレクタ、属性セレクタ、擬似クラス
3桁目 → IDセレクタ
その個数によって、桁ごとに1が足されることになり、数値が高いものが優先されます。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

20© LPI-Japan 2016. All rights reserved.

1.2 CSS
カスケード(CSSの優先順位) - 3
セレクタによる優先順位の設定
例）
body div#wrapper

102

div#wrapper

101#wrapper100

p.subtitle

011.subtutle

010

p

001

優先度が設定され、数値が高ければ優先されます。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

21© LPI-Japan 2016. All rights reserved.

1.2 CSS
ボックスの構造 - 1
HTMLの要素は、ボックスと呼ばれる四角い領域で表示されているのがほとんどです。
ボックスの余白をあけるCSSは、marginとpadding、borderになります。

margin → borderの外側の余白
padding→ borderの内側の余白
border → ボックスの境界線 （太さが幅に影響します）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

22© LPI-Japan 2016. All rights reserved.

1.2 CSS
ボックスの構造 - 2
marginborderpadding要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

23© LPI-Japan 2016. All rights reserved.

1.2 CSS
ボックスの構造 - 3
marginとpaddingは、認識の違いで表示に大きな影響を与えることがあります。

例）
width: 240px;
padding: 0 10px;

実際の表示では260pxになります。
paddingではなくmarginを使うと、240pxのままとなります。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

24© LPI-Japan 2016. All rights reserved.

1.3 要素

1.3 要素1.3.1 要素と属性の意味（セマンティクス）
1.3.2 メディア要素
1.3.3 インタラクティブ要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

25© LPI-Japan 2016. All rights reserved.

1.3 要素
セクショニングコンテンツ - 1
セクションとは章・節・項のような文章のまとまった範囲のことを指します。
article、section、nav、aside の4つがセクショニングコンテンツとなります。

article → 章・節・項のような通常は見出しからはじまる一般的なセクションを示すための要素
section → 独立した内容となっているセクションを示すための要素
nav → ナビゲーション部分のセクションを示すための要素
aside → 補足情報などのメインコンテンツではないセクションを示すための要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

26© LPI-Japan 2016. All rights reserved.

1.3 要素
セクショニングコンテンツ - 2
セクションニングコンテンツは、直接見た目に出るものではありません。
しかし、アウトラインというのが形成され、検索エンジンの解釈に影響がでます。
<body><h1>見出しA</h1><h2>見出しB</h2><h2>見出しC</h2><section><h3>見出しD</h3></section></body>1.見出しA
1.見出しB
2.見出しC
3.見出しDThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

27© LPI-Japan 2016. All rights reserved.

1.3 要素
インタラクティブコンテンツ
インタラクティブコンテンツは、ユーザーが操作可能なコンテンツです。
a、audio、button、details、embed、input などなどが該当します。

細かいルールとして、・a要素は、href属性が指定されている場合のみ
・input要素は、type属性が「hidden」以外の場合のみなど、ユーザー側が操作できない状態の時は、含まれないので注意しましょう。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

28© LPI-Japan 2016. All rights reserved.

1.4 レスポンシブWebデザイン

1.4 レスポンシブWebデザイン
1.4.1 マルチデバイス対応ページの作成
1.4.2 メディアクエリ
1.4.3 スマートフォンサイト最適化

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

29© LPI-Japan 2016. All rights reserved.

1.4 レスポンシブWebデザイン
レスポンシブのメリット・デメリット
メリット
・画面サイズでの切り替えとなるため、どのデバイスにも対応できる
・1つのHTMLで完結するため、リダイレクトの設定が不要
・URLが同じになるためSEO的に有利
デメリット
・1つのHTMLにまとめるため、設計や構造を考える必要がある
・設計によっては、画像やCSSの読み込み量が多くなるため重たくなる可能性がある

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

30© LPI-Japan 2016. All rights reserved.

1.4 レスポンシブWebデザイン
メディアクエリ
メディアクエリとは、デバイスの特性によってCSSを切り替えるものになります。
例）＜link rel=”stylesheet” media=”screen and (max-width: 480px)” href=”style.css”＞

上記は、幅が480pxまでのデバイスに、style.cssを適用することができるようになります。
また、CSS内の記述によって分岐することも可能です。
@media screen and (max-width: 480px){.foo{
margin: 100px 0;}}
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

31© LPI-Japan 2016. All rights reserved.

1.4 レスポンシブWebデザイン
Fluid Grid
ウィンドウ幅に合わせてコンテンツ幅を変更する技術となります。
幅に合わせることになるので、コンテンツ幅は、pxではなく%などの固定されない単位での設定が必要となります。
スマートフォン

PC

100%
50%

50%
100%

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

32© LPI-Japan 2016. All rights reserved.

1.5 APIの基礎知識

1.5 APIの基礎知識
1.5.1 マルチメディア・グラフィックス系API概要
1.4.2 デバイスアクセス系API概要
1.4.3 オフライン・ストレージ系API概要
1.4.4 通信系API概要

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

33© LPI-Japan 2016. All rights reserved.

1.5 APIの基礎知識
そもそも、APIとはwikiによると....

nに

アプリケーションプログラミングインタフェース（API、英: Application
Programming Interface）とは、ソフトウェアコンポーネントが互いにやりとりするのに使用するインタフェースの仕様である↑ よくわからないですね。

ざっくり言うと、誰かが作った便利な機能を、自分の製作物に取り込むことが出来るものとなります。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

34© LPI-Japan 2016. All rights reserved.

1.5 APIの基礎知識
Web Storage
ローカル環境（ブラウザ）にデータを保存するための仕組みです。
cookieに似てはいますが、大きな違いとして、保存できる容量が違います。
cookie → 4KBytes
Web Storage → 5MBytes

sessionStorageとlocalStorageの２種類のストレージが用意されています。
sessionStorage → ウィンドウやタブを閉じるまでデータを保持
localStorage → ウィンドウやタブを閉じてもデータを保持

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

35© LPI-Japan 2016. All rights reserved.

1.5 APIの基礎知識
XMLHttpRequest
javascriptを用いてHTTP通信を行うAPIです。
画面遷移を行わずにHTTP通信を行い、各種データを取得することができます。

↓例えば、よく見る地図アプリケーションが想像しやすいです。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

36© LPI-Japan 2016. All rights reserved.

実務経験者でも見落とすポイント

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

37© LPI-Japan 2016. All rights reserved.

実は....
実は私、試験に1度落ちております。
「見落とすポイント」というタイトルでしたが、私自身の見落としたところ、反省点に寄ったお話をいたします。

失敗したけど...

再チャレンジで合格！

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

38© LPI-Japan 2016. All rights reserved.

普段使うことがない範囲
この試験は、HTMLやCSSだけではなく● HTTP, HTTPSプロトコル● APIの基礎知識といった、コードを書くこととは直接関連することが少ない部分があります。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

39© LPI-Japan 2016. All rights reserved.

では、何をしたか.....

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

40© LPI-Japan 2016. All rights reserved.

勉強範囲の拡大
教本を元に勉強範囲を拡大
HTTP通信での例
5XX → サーバー側でのエラー
あとは重要そうな番号だけ覚える↓
503 → サーバーはリクエストを処理する準備ができていない
504 → サーバーが時間内にレスポンスを得られない
505 → リクエストで使用した HTTP のバージョンをサーバーが対応していないというように、1つ1つ詳細に覚えるようにし、勉強の範囲を拡大しました。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

41© LPI-Japan 2016. All rights reserved.

勉強範囲の拡大
ブラウザで使うことができる検証機能を使用
添付画像は、Chromeのデベロッパーツールを使ったものになります。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

42© LPI-Japan 2016. All rights reserved.

勉強範囲の拡大
APIは、教本に書いてあるようなAPIが・何に使われているのか
・他にどんなAPIがあるのかということを中心に調べ直しました。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

43© LPI-Japan 2016. All rights reserved.

勉強範囲の拡大
Geolocation API
ユーザーの位置情報を扱うためのAPIです。
下記の情報を取得することが出来ます。
●
●
●
●
●
●
●

緯度
経度
高度
緯度・経度の精度
高度の精度
方角
速度

これにより、地図アプリでは、現在位置の表示や、ナビゲーションに活用されることがあります。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

44© LPI-Japan 2016. All rights reserved.

勉強範囲の拡大
実際にやってみるのもオススメです。
例えば、Geolocation APIは下記のようにJavaScriptを設定すれば、緯度と経度をHTMLに書き出せます。
<script>//ユーザーの現在の位置情報を取得
navigator.geolocation.getCurrentPosition(successCallback);/***** ユーザーの現在の位置情報を取得*****/
function successCallback(position) {var gl_text = "緯度：" + position.coords.latitude + "<br>";gl_text += "経度：" + position.coords.longitude;
document.getElementById("id").innerHTML = gl_text;}</script>※document.getElementById("id")のidには、HTMLに設定したidを入れてください。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

45© LPI-Japan 2016. All rights reserved.

勉強範囲の拡大
HTMLやCSSは、あまり使わないところを補強
CSSも普段使っている時は、それぞれに下記のような名称があることを意識して使うことは少ないと思います。
セレクタ
宣言ブロックh1{color: red;font-size: 14px;

宣言
宣言

}

文字にして説明するのは難しそうなところは、補強して勉強していくことがオススメです。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

46© LPI-Japan 2016. All rights reserved.

わかっていても対策を「わかっている」という感覚に陥りがちになるので、下記3点をしっかりやっていくことをオススメします。

・いつもやっていることの補強
・いつもやっていないことは、教本より範囲を広げて勉強
・目に見えないことは実践して実感

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

47© LPI-Japan 2016. All rights reserved.

資格を取得して活用できたこと

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

48© LPI-Japan 2016. All rights reserved.

実務での活用●

今までは、実務の中で勉強してきたので、改めて教本などを通して勉強することによって、理解が深まり、より正確な文書構造が書けるようになった●

今まで使っていなかったタグを使うようになった●

使う頻度が少なかった動画や音声の設置も、苦手意識が無く使えるようになった●

CSSの書けるプロパティの数が増えた●

CSS3のアニメーションの活用幅が広がった●

APIの活用方法を意識するようになった●人に教える時の引き出しが増えたなど、出来ることが大きく変わりました。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

49© LPI-Japan 2016. All rights reserved.

実務での活用
違う仕事でも活用できる場面は大いにあります。

デザイナー→ UIに配慮のあるデザインが作成できる
コードを配慮したデザインが作成できるディレクター → 出来る出来ないの判断が早くなる
見積もりを暫定的に出せるようになる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

50© LPI-Japan 2016. All rights reserved.

ステップアップ

今は他言語への勉強も....
活用とは違うのかもしれませんが、HTMLが次に繋がるきっかけになってくれました。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

51© LPI-Japan 2016. All rights reserved.

最後に未来のためにリモートでの開催となりましたが、今回の出来事が、こういったリモートのような技術や、Webでの買い物などの、ITに関連したことが、災害が起きた時に役に立つというのが、知れ渡ることになったのかなと思っております。
HTMLだけでは、直接そうゆう役に立つことが出来るわけではないのですが、他の技術に隣接しているものだと思います。
今後、役に立つツールを作る、または、役に立つものが世の中に出てきた時に活用できるように、ぜひ受験して資格を取得していただければと思います。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

52© LPI-Japan 2016. All rights reserved.

ご清聴ありがとうございました。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

53© LPI-Japan 2016. All rights reserved.

ご質問

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

54© LPI-Japan 2016. All rights reserved.

公式アカウント、URL

HTML5プロフェッショナル認定試験のサイト
http://www.html5exam.jp/

Twitter@html5Cert

Facebook
https://www.facebook.com/html5exam

過去のセミナーでの配布資料や、イベント情報などが配信されています。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

55© LPI-Japan 2016. All rights reserved.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

56© LPI-Japan 2016. All rights reserved.