Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@piyo8810

Azureみたいなウィザードっぽい入力フォームを作りたい Phase2 とまどいの確認画面実装編

Posted at

ローカルでも動くように、ちょっとファイルを書き換えた。

以下のフォルダ構成にすることで、ローカルでも動くようにした。

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がこれを使用しているのかは知らないが)

なので、ちょっとコレがなんなのか調べつつ、使えそうなら取り入れてみよう！と決意したぴよぴよくんであった････

つづく(たぶん)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?