yucatio@システムエンジニア

趣味で作ったものいろいろ

bootstrapとjQueryの設定 (KATAMINOを解くプログラムを作成する)

KATAMINOを解くプログラム

★前回の記事

yucatio.hatenablog.com

はじめに、bootstrapとjQuery, jQuery-UIのライブラリを読み込んでおきましょう。 ひな形をbootstrapのページからコピーします。前回までの内容は一旦全て削除します。

Introduction · Bootstrap のページ内のStarter Templeteをコピーします。

index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

jQueryのライブラリとbootstrapのライブラリが読み込めました。

表示はこのようになりました。

f:id:yucatio:20191004225552p:plain

jQuery-UIも読み込んでおきましょう。バージョンは2019年8月時点での安定版の1.12.1にしています。ここで1つ注意点があります。boostrapで読み込んでいるのは、jquery-3.3.1.slim.min.jsです。slimと付いているのは、jQueryのコアな機能のみを提供しているためです。jQuery-UIを使用するには、slimの機能だけでは足りないので、jQueryの全ての機能が入ったjquery-3.3.1.min.jsを使用するように変更します。

<!-- 前略 -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <! -- 変更 -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <! -- 追加 -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  </body>
</html>

最後に、lang="en"の部分を直しましょう。lang="en"は、"このページは英語で書かれている"という意味なので、日本語を表すlang="ja"に変更します。また、タイトルも"KATAMINO SOLVER"に変更しておきましょう。

<!doctype html>
<html lang="ja"><! -- 変更 -->
  <head>
    <!-- 中略 -->
    <title>KATAMINO SOLVER</title>
  </head>
<!-- 以下略 -->

画面とデベロッパーコンソールを表示して、エラーが出ていないことを確認します。

以上でbootstrapとjQuery, jQuery-UIの設定をしたhtmlファイルの準備が整いました。


★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com