headerを作っていく

まずcssなしの状態

<div id="header">
        <p class="logo"><a href="/"><img src="./src/img/logo.gif" alt="ZEUS" /></a></p>
        <h3>username1</h3>
        <ul id="helpNav">
            <li><a href="/">ホーム</a></li>
            <li><a href="/">ログアウト</a></li>
        </ul>
        <ul>
        <li><a href="/product/">アカウント情報</a></li>
          <ul>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
          </ul>
        <li><a href="/service/">hoge</a></li>
          <ul>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
          </ul>
        <li><a href="/company/">hoge</a></li>
          <ul>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
          </ul>
        <li><a href="/press/">hoge</a></li>
        </ul>
    </div>

さて、これからcssを触っていきます。

リッチテキスト

wordpressのリッチテキスト
b, i, link, b-quote, del, ins, img, ul, ol, li, code

classとidの違い

■class：
「種別名を割り当てる」
→ 同じclass名を、1ページ中に何度でも使える。

■id：
「固有の名前を割り当てる」
→ 同じid名は、1ページ中に1度しか使えない。

<!-- .content#title -->
<!-- /.content#title -->

phpで予約システムを作くろう3 予約時間

予約時間をselectできるようにします。

<b>予約フォーム</b><br>
<form method="POST" action="">
1.お名前(必須)<br>
<input class="form1" type="text" name="username" placeholder="　お名前"/><br><br>
2.メールアドレス(必須)<br>
<input class="form1" type="text" name="username" placeholder="　〇〇@gmail.com"/><br><br>
3.カレンダーから日付を選択してください<br>
<input type="text" id="date_val"　placeholder="　2018年〇月〇日"/><br>
<div id="datepicker"></div><br>
4.時間を選択してください<br>
	<select name="time">
	<option value=""> 選択してください</option>
	<option value="">9:00～</option>
	<option value="">10:00～</option>
	<option value="">11:00～</option>
	<option value="">13:00～</option>
	<option value="">14:00～</option>
	<option value="">15:00～</option>
	<option value="">16:00～</option>
	<option value="">17:00～</option>
	</select>

	<select name="time">
	<option value="">30分</option>
	<option value=""　selected>60分</option>
	<option value="">90分</option>
	<option value="">120分</option>
	</select>

	<br><br>
5.ご希望される弁護士を選択してください<br>
	<select name="lawyer">
	<option value=""> 選択してください</option>
	<option value="">松島</option>
	<option value="">小野</option>
	<option value="">草野</option>
	</select>
	<br><br>
	<input type="submit" value="予約する" class="submit">
</form>

あれ、これ、もしかして、valueをminuteで変換すればいいだけじゃないですかね？
おいおいおい、結構簡単ではないですか。

feildsetを使う

今回はMFI(mobile first index)で作っていきます。

0335670003.php

<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
fieldset{
	border:1px #C0C0C0 solid;
}
</style>
<fieldset>
<legend>オーナー情報</legend>
・事業者名:<br>
<?php echo $owner; ?><br><br>
・住所:<br>
<?php echo $address; ?>
</fieldset>

<br><br>
<fieldset>
<legend>電話番号情報</legend>
<table width="100%" cellpadding="5">
<tr>
	<td>市街局番</td><td><?php echo $num1; ?></td><td>市内局番</td><td><?php echo $num2; ?></td>
</tr>
<tr>
	<td>加入者番号</td><td><?php echo $num3; ?></td><td></td><td></td>
</tr>
</table>
</fieldset>

google mapを追加

<style>
#content{
	width:800px;
	margin:10px auto;
}
fieldset{
	border:1px #C0C0C0 solid;
}
</style>
<div id="content">
<h1>電話番号 <?php echo "　".$num1."-".$num2."-".$num3;?></h1>
<table width="100%">
<tr><td width="52%" valign="top">
<fieldset>
<legend>オーナー情報</legend>
・事業者名:<br>
<?php echo $owner; ?><br><br>
・住所:<br>
<?php echo $address; ?><br><br>
</fieldset>
</td><td width="48%" align="right" valign="top">
<div id="map" style="width: 350px; height: 250px;"></div>
</td>
</tr></table>
<br><br>
<fieldset>
<legend>電話番号情報</legend>
<table width="100%" cellpadding="5">
<tr>
	<td>市街局番</td><td><?php echo $num1; ?></td><td>市内局番</td><td><?php echo $num2; ?></td>
</tr>
<tr>
	<td>加入者番号</td><td><?php echo $num3; ?></td><td></td><td></td>
</tr>
</table>
</fieldset>
</div>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script>
    function drawMap(address) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode(
                {
                    'address': '（〒104-0061）東京都中央区銀座１丁目９−１８',
                    'region': 'jp'
                },
                function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        google.maps.event.addDomListener(window, 'load', function () {
                            var map_tag = document.getElementById('map');
                            var map_location = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
                            var map_options =
                            {
                                zoom: 16,
                                center: map_location,
                                disableDefaultUI: true,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            };

                            var map = new google.maps.Map(map_tag, map_options);

                            var marker = new google.maps.Marker({
                                position: map_location,
                                map: map
                            });
                        });
                    }
                }
        );
    }
    drawMap();
</script>

Nice

Speech Synthesisを応用する1

Speech Synthesisを応用。テキストではなく、音声で解説する。

<?php 
	$text = "e-POWERは日産の電気自動車「リーフ」に搭載されている大出力モーターのみで走行します。
トヨタプリウスに代表されるような、これまでのハイブリッド車は、エンジンとモーターのそれぞれを動力として、シーンごとに役割を分担。より効率のいい方を選ぶ、もしくは併用して走行しています。それに対して日産のe-POWERは、モーターのパワーのみで走行し、エンジンは発電専用となっています。したがって、エンジンは動力としては利用されません。まず、ここがハイブリッド車とe-POWERの一番の違いと言えます。";
?>
<h1>日産ノート</h1>
<img src="note.jpg" width="500px"><br>
<input type="hidden" class="text" value="<?php echo $text; ?>">
<button onclick="speak()">解説を聞く</button>
<script>
function speak(){
	var text = document.querySelector('.text').value;
	speechSynthesis.speak(
		new SpeechSynthesisUtterance(text)
	);
}
</script>

日産ノート

おおお、何を言ってるのか全く理解できないが、仕組みはなんとなく悪くはない気がします。

Speech Synthesis

<h1>demo1</h1>
<input class="text" value="web speech apiを使ってみよう">
<button onclick="speak()">speak()</button>
<script>
function speak(){
	var text = document.querySelector('.text').value;
	speechSynthesis.speak(
		new SpeechSynthesisUtterance(text)
	);
}
</script>

下のボタンを押してみてください。

demo1

※type=”hidden”とすれば、inputは非表示にできます。

<?php 
	$weather = "&#91; 東京都の天気概況 &#93; 本州付近は高気圧に覆われています。 【関東甲信地方】 関東甲信地方は、甲信地方は晴れている所もありますが、関東地方はおおむね曇りとなっています。 3日は、高気圧に覆われて晴れますが、湿った空気の影響により、朝晩中心に曇る所があるでしょう。";
?>
<h1>今日の天気</h1>
<?php echo $weather; ?><br>
<input type="hidden" class="text" value="<?php echo $weather; ?>">
<button onclick="speak()">音声再生</button>
<script>
function speak(){
	var text = document.querySelector('.text').value;
	speechSynthesis.speak(
		new SpeechSynthesisUtterance(text)
	);
}
</script>

ぎゃーーー　素晴らしいですね。

電話番号を発信する

tel:を使います。

<?php 

$fname = $_SERVER&#91;'PHP_SELF'&#93;;
$number = substr($fname, 1, 12);
?>
<a href="tel:<?php echo $number; ?>"><?php echo $number; ?></a>

iphoneで試してみましたが、上手くいきました。

電話番号の情報を表示

googleで「ぎんざ姿電話番号」を打ち込むと、

一発で出てくる。。終わった。

相対パス

相対パスは

../hoge.php

更に上は

../../hoge.php

json

{
	"frames": {

		"chaingun.png": {
			"frame": {
				"x": 1766,
				"y": 202,
				"w": 42,
				"h": 34
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 38,
				"y": 32,
				"w": 42,
				"h": 34
			},
			"sourceSize": {
				"w": 128,
				"h": 128
			}
		},
		"chaingun_impact.png": {
			"frame": {
				"x": 1162,
				"y": 322,
				"w": 38,
				"h": 34
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 110,
				"y": 111,
				"w": 38,
				"h": 34
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0000.png": {
			"frame": {
				"x": 494,
				"y": 260,
				"w": 22,
				"h": 22
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 113,
				"y": 108,
				"w": 22,
				"h": 22
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0001.png": {
			"frame": {
				"x": 1500,
				"y": 1904,
				"w": 34,
				"h": 30
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 104,
				"y": 104,
				"w": 34,
				"h": 30
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0002.png": {
			"frame": {
				"x": 888,
				"y": 366,
				"w": 38,
				"h": 32
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 106,
				"y": 105,
				"w": 38,
				"h": 32
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0003.png": {
			"frame": {
				"x": 990,
				"y": 84,
				"w": 32,
				"h": 28
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 113,
				"y": 109,
				"w": 32,
				"h": 28
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		}
	},
	"meta": {
		"app": "http://www.texturepacker.com",
		"version": "1.0",
		"image": "assets/grits_effects.png",
		"format": "RGBA8888",
		"size": {
			"w": 2048,
			"h": 2048
		},
		"scale": "1",
		"smartupdate": "$TexturePacker:SmartUpdate:a5e0b1932a348d048c58a625408c4276$"
	}
}

parseAtlasDefinition: function (atlasJSON){
	var parsed = JSON.parse(atlasJSON);

	for(var key in parsed.frames){
	var sprite = parsed.frames[key];

	var cx = -sprite.frame.w * 0.5;
	var cy = -sprite.frame.h * 0.5;

	// Define the sprite for this sheet.
	this.defSprite(key, sprite.frame.x, sprite.frame.y, sprite.frame.z)
	}
}
});

function drawSprite(spritename, posX, posY){
	
}

function __drawSpriteInternal(spt, sheet, posX, posY){
	
}

var gSpriteSheets = {};

SpriteSheetClass = Class.exnted({
	
});

function drawSprite(spritename, posX, posY){
	for(var sheetName in gSpriteSheets){
		var sheet = gSpriteSheetsd[sheetName];
		var sprite = sheet.getStats(spritename);
		if(sprite == null) continue;

		__drawSpriteInternal(sprite, sheet, posX, posY);

		return;
	}
}