ローカルでも動くように、ちょっとファイルを書き換えた。
以下のフォルダ構成にすることで、ローカルでも動くようにした。
- index.html(本記事のソースをコピペしただけのHTMLファイル)
- AdminLTE-3.0.2(フォルダ)
- css
- img
- js
- plugins
css, img, jsはAdminLTE3をダウンロードしたときにdistフォルダ直下に入ってるもの。
pluginsはAdminLTE3をダウンロードしたときにindex.htmlとかと同じフォルダに入ってるやつ。
結論から言うと、確認画面以外はそれっぽく作成できた。
ソースは以下。(クリックするとソースが表示されます)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>テストページ</title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="AdminLTE-3.0.2/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="AdminLTE-3.0.2/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body>
<div class="split-input-form container-fluid">
<div class="Title">分割入力フォーム</div>
<div class="docking">
<div class="docking-body p-3">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#tab1-content" class="nav-link" data-toggle="tab">基本</a>
</li>
<li class="nav-item">
<a href="#tab2-content" class="nav-link" data-toggle="tab">住所</a>
</li>
<li class="nav-item">
<a href="#tab3-content" class="nav-link" data-toggle="tab">連絡先</a>
</li>
<li class="nav-item">
<a href="#tab4-content" class="nav-link" data-toggle="tab">確認</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1-content" class="tab-pane active">
<div>
<span>基本の情報を入力します。</span>
</div>
<br />
<div class="font-weight-bold" style="margin: 10px 0px;">基本情報</div>
<div>
<span>あなたの名前と年齢を入力します。</span>
</div>
<br />
<div class="row form-group">
<label class="col-xl-1 d-flex align-items-center">
名前
</label>
<input type="text" class="col-xl-11 form-control" onchange="InputNameFunc(this.value)" id="InputName" placeholder="名前を入力" />
</div>
<br />
<div class="row form-group">
<label class="col-xl-1 d-flex align-items-center">
年齢
</label>
<input type="text" class="col-xl-11 form-control" id="InputAge" placeholder="年齢を入力" />
</div>
</div>
<div id="tab2-content" class="tab-pane">
<div>
<span>あなたの住所を入力します。</span>
</div>
<br />
<!-- general form elements -->
<div class="row form-group">
<label for="selectPrefectureLabel" class="col-xl-1 d-flex align-items-center">
都道府県
</label>
<select class="form-control" id="selectPrefecture">
<option>北海道</option>
<option>本州</option>
<option>四国</option>
<option>九州</option>
</select>
</div>
<br />
<div class="form-group">
<label for="selectAreaLabel" class="col-xl-1 d-flex align-items-center">
地域
</label>
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" id="AreaRadioWest" name="AreaRadio" checked="" value="どちらかというと西">
<label for="AreaRadioWest" class="custom-control-label">
どちらかというと西
</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" id="AreaRadioEast" name="AreaRadio" value="どちらかというと東">
<label for="AreaRadioEast" class="custom-control-label">
どちらかというと東
</label>
</div>
</div>
</div>
<div id="tab3-content" class="tab-pane">
<div>
<span>希望する連絡手段を選んでください。(複数選択可能)</span>
</div>
<br />
<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="customboxMobile" value="携帯電話" />
<label for="customboxMobile" class="custom-control-label">
携帯電話
</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="customboxPhone" value="固定電話" />
<label for="customboxPhone" class="custom-control-label">
固定電話
</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="customboxFax" value="FAX" />
<label for="customboxFax" class="custom-control-label">
FAX
</label>
</div>
</div>
</div>
<div id="tab4-content" class="tab-pane">
<div>
<span>入力した内容を確認します。以下でよろしいですか？</span>
</div>
<br />
<div class="form-group">
<div class="row">
<label class="col-xl-1 d-flex align-items-center">
名前
</label>
<p class="col-xl-11" id="InputNameResult" />
</div>
<br />
<div class="row">
<label class="col-xl-1 d-flex align-items-center">
年齢
</label>
<p class="col-xl-11" id="InputAgeResult" />
</div>
<br />
<div class="row">
<label class="col-xl-1 d-flex align-items-center">
都道府県
</label>
<p class="col-xl-11" id="InputPrefResult" />
</div>
<br />
<div class="row">
<label class="col-xl-1 d-flex align-items-center">
地域
</label>
<p class="col-xl-11" id="InputAreaResult" />
</div>
<br />
<div class="row">
<label class="col-xl-1 d-flex align-items-center">
連絡先
</label>
<p class="col-xl-11" id="InputContactResult" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="AdminLTE-3.0.2/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="AdminLTE-3.0.2/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="AdminLTE-3.0.2/js/adminlte.min.js"></script>
<script>
function InputNameFunc(value) {
document.getElementById("InputNameResult").innerHTML = value;
}
</script>
</body>
</html>
できていないところは、言わずもがな確認画面。
今のソースだと、[基本]タブの「名前」に入力したテキストは、[確認]タブの「名前」に反映されるようになっている。
他の項目に対しても、あとは同じようなことをやれば確認画面は作れる。ここまできたら、ぶっちゃけもうそんなに時間もかからないと思う。
けど、いちいち項目ごとに
document.getElementById("InputNameResult").innerHTML = value;
みたいなコード書くのが究極にだるい。ついでに、保守性とか考えたらどうなんだろう、という感じ。
というわけで、こういうときはAzureのソースを見てみよう！
と思い、ジロジロソースを参照。すると、なんかやたら
<!-- /ko -->
みたいなコメントがあちこちにあることに気づく。なんだこれ････と思って調べてみたら、
どうやら「knockout.js」というライブラリで使う表記(コメント)であることがわかった。
(実際にAzureがこれを使用しているのかは知らないが)
なので、ちょっとコレがなんなのか調べつつ、使えそうなら取り入れてみよう！と決意したぴよぴよくんであった････
つづく(たぶん)