iPhoneだけで持ち歩けるコーディング環境を作る！外部ライブラリ編
前回は iPhoneでプログラミング にチャレンジという事で、簡単なHTMLを作成しました。今回は、プレーンなHTMLだけではつまらないので、BootStrap を用いて少しカスタマイズしていきたいと思います。外部ライブラリがちゃんと読み込めるかの確認です。
プログラミングの実行環境は、iPhone6、MS Universal Mobile Keyboard(bluetoothキーボード)、Textastic(エディタ)です。過去記事にMS Universal Mobile Keyboardについて書いてます。
準備
iPhone でプログラミングを始めるための準備は、前回の記述を参考に環境を作ってみてください。今回は、HelloWorld2という事で進めていきますので、ディレクトリとindex.html の作成までは各自でお願いします。
Bootstrap とは
言わずもがな、老舗レスポンシブなサイトを作成するためのフレームワークです。Bootstrapを使うと、どれも同じようなサイトになってしまうとか言われていますが、使い方次第だと思うので、積極的に活用していきます。最新バージョンは、4.0.0-alpha.6 です。まだalpha版ですが、コアな使い方しないので問題はないでしょう。
BootStrap の組み込み
外部ライブラリの利用方法は色々ありますが、1番簡単な方法でまずはやってみたいと思います。外部ライブラリを CDN から読み込みます。CSSが1種類、BootstrapのCSSです。JavaScriptが3種類、JQuery、tether、BootstrapのJavaScriptです。この辺りは公式に書いてある指定方法をそのまま活用していきます。
CSSは、headタグの中で指定します。
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
JavaScriptは、body閉じタグの直前に記述するのが慣習です。
<!-- jQuery first, then Tether, then Bootstrap JS. --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Bootstrapはレスポンシブデザインなので、viewportもheadタグ内で設定しておく必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
index.html のカスタマイズ
準備は完了したので、HelloWorldの文字の見た目を変えてみましょうか。上手くいくのかどうなのか。pタグにclass指定します。text-primaryは、テキストの色を変えるBootstrapに定義されたclassです。
<p class="text-primary">Hello World!!</p>
動かしてみる
さて、実行してみましょう。編集画面のメガネボタンをポチッと押してみます。
色変わりましたね。ちゃんと読み込めていそうです。外部ライブラリは普通に利用できることがわかったので、これで色々なライブラリを使って開発できそうですね。
最後に今回のindex.htmlの全体を載せておきます。ほぼBootstrapのサンプルコードの流用です。参考にどうぞ。
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<title>Welcome</title>
</head>
<body>
<p class="text-primary">Hello World!!</p>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
