東京本社 TEL : 03-5728-5580

支社連絡先一覧

mypage

フェローズe-ラーニングログイン

何故スマートフォンでHTML5なのでしょうか?

「それは、いち早くHTML5に対応したのがスマートフォンだからです。」

PCでは足並みが区区(まちまち)なHTML5も、スマホならば問題なく使えるわけです。

本当の意味でのスマホアプリはSDK(Software Development Kit)と呼ばれるソフトウェア開発環境を用意しJava等の言語を使い、いわゆるプログラム開発をしなければなりません。
そして、できたオブジェクト(プログラムの最終形態)を登録したりなどの手続きが必要になる場合もあります。
しかしながらHTML5はブラウザで閲覧するだけのものですから、通常のHTMLに埋め込む形で提供可能です。

本格的なプログラムを組むには難しい面もありますが、ちょっとした機能ならば比較的ラクに作ることができます。

とは言ってもプログラムにはなりますので

「JavaScriptの知識は必要となります。」

それを勉強していこうというのが本講座の目的です。

まずは「HTML5」の雛形を用意してしまいましょう。

<!DOCTYPE html>
<meta charset=”utf-8″ />
<title>タイトル</title>
<head>
</head>
<body>
コンテンツ
</body>
</html>

基本的にはコレ↑だけです。

下記 QR コードからスマートフォンでアクセスしてみてください。

スマホ用HTML5雛形
sample1

必要に応じて js を読み込む場合は

<!DOCTYPE html>
<meta charset=”utf-8″ />
<title>タイトル</title>
<head>
<script src=”●●●.js” type=”text/JavaScript”></script>
</head>
<body>
コンテンツ
</body>
</html>

の様になります。

ただ、このままだと文字がとても小さく表示されてしまいます。

「そこで <viewport> の登場です。」

スマートフォンは機種毎に画面サイズがことなりますが、それぞれの画面サイズに合わせて作っていては大変です。

<viewport>はそんな悩みを解決してくれます。

例えば

<meta name=”viewport” content=”width=320, user-scalable=no” />

という<viewport>を指定すると…

<viewport>
sample2

だいぶ見やすくなったと思います。

■ <viewport> で指定可能なプロパティ

プロパティ 機能
width 幅(ピクセル単位)
デフォルト値:980
200~10000
height 高さ(ピクセル単位)
デフォルト値:980
223~10000
initial-scale 最少スケール
minimum-scale 最大スケール
デフォルト値:0.25
0~10.0
maximum-scale 初期スケール
0~10.0
user-scalable ピンチイン・ピンチアウトによる拡大・縮小を許可するかどうか
yes または no で指定

上記の例では

width を 320 に
usser-scalable を no で拡大縮小を不可に指定しています。

画面サイズを調整して見やすくするのはもちろんのこと、ユーザーに何らかの操作を促す際、画面が勝手に拡大したり縮小したりしてしまうのは鬱陶しいものですからね。

まずは初級編ということで3か月の講座を予定しています。

「この3か月で形にするアプリとして考えているものは…」

1.指で描くフリーハンド・ドロー・アプリ

フリーハント・ドロー・アプリ
drawing

drawing

2.15パズル

15パズル
15puzzle

15puzzle

の二つです。

「1.指で描くフリーハンド・ドロー・アプリ」は、スマホのタッチイベントを利用して画面上にフリーハンドで線を引くというもので、いわゆるお絵かきソフトの簡単なものになります。

「2.15パズル」は15個の数字をずらしながらそろえていくという、昔懐かしい(?)パズルです。