最近よく見かけるシングルページを作るデザイン塾。前回、インブラウザーデザインでシングルページを仕上げました。
完成したシングルページ「PROBONO PAPRIKA」
今回は、完成し たシングルページに、よく見かけるインターフェイス、モーダルウィンドウとスクロールスパイを実装する方法を紹介します。どちらもJavaScriptで書かれていますが、Bootstrapに用意されているサンプルを使って簡単に実装できます。
BootstrapのJavaScriptサイト
便利なモーダルウィンドウ
モーダルウィンドウとは、ユーザーの操作をウィンドウ内に制限する（モードが固定された）操作方式のことです。必須の操作を省略させたくないなど、よく使われているインターフェイスです。
BootstrapのJavaScriptサンプルの右側にある［Modal］→［Examples］から、「Live demo」を表示します。
右側の［Modal］→［Examples］を選んで表示した「Live demo」
「Live demo」の［Launch demo modal］をクリックするとモーダルウィンドウが表示されます。
［Launch demo modal］をクリックして表示されたモーダルウィンドウ
モーダルウィンドウを、次のような手順で実装しましょう。
- ボタンのHTMLをindex.htmlに追加する
- Modalのサンプルコードをindex.htmlにコピー＆ペーストする
1.ボタンのHTMLをindex.htmlに追加する
モーダルウィンドウを表示するためのボタンを、index.htmlの「使い方」ブロックの「プロボノしたい人」に追加します。
■元のソースコード（index.htmlの一部）
<section id="howtouse" class="howtouse">
<div class="worker">
<div class="target">
<div class="oval">
<span>プロボノ<br>したい人</span>
</div>
<p>フォームから必要な情報を入力しておくだけ。あとはページを見てくれた人から声がかかるのを気長に待つのみです。</p>
</div>
</div>
中略
</section>
■変更後ソースコード（index.htmlの一部、赤い部分が追記した箇所）
<section id="howtouse" class="howtouse">
<div class="worker">
<div class="target">
<div class="oval">
<span>プロボノ<br>したい人</span>
</div>
<p>フォームから必要な情報を入力しておくだけ。あとはページを見てくれた人から声がかかるのを気長に待つのみです。</p>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">詳しく見る</a>
</div>
</div>
中略
</section>
モーダルウィンドウを表示するための「詳しく見る」ボタンを追加した「プロボノしたい人」
2.Modalのサンプルコードをindex.htmlにコピー＆ペーストする
モーダルウィンドウ部分をHTMLに追加します。
BootstrapのJavaScriptサイト右側の［Modal］→［Examples］2つ目の「Live demo」で表示されているソースコードの「<!-- Modal -->」以下の部分をコピーします。
赤枠で囲った部分をコピー
コピーしたコードを、index.htmlの</footer>の下にペーストします。
■変更後ソースコード（index.htmlの一部、赤い部分が追記した箇所）
<footer>
<div class="copyright text-center">© The Mars Knowledge Inc.</div>
<!-- /.container -->
</footer>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
追加した「詳しく見る」ボタンをクリックして、下記のように表示されれば無事、実装ができています。
表示されたモーダルウィンドウ
作業したことは、ボタンのソースをindex.htmlに追加して、Modalのサンプルコードをindex.htmlにコピー＆ペーストしただけです。非常に簡単でしたね。
ただし、IDが「myModal」では何のことか分かりにくいので、data-targetとmodal自身のIDを分かりやすいもの、例えば「loginModal」や「dialogModal」のように変更しておくとさらに良いでしょう。
JavaScriptが理解できていなくとも、サンプルコードを貼り付けていくだけで、よく使うインターフェイスが実装できます。
「カスタムデータ属性」を便利に使っているBootstrap
モーダルウィンドウを表示するためのボタンにある「data-toggle="modal"」「data-target="#myModal"」は、HTML5のカスタムデータ属性を利用しています。
カスタムデータ属性は、HTMLの仕様であらかじめ定義されている属性以外に、制作者が属性を定義できる機能で、「data-」の後に任意の名前をつけられます。「=”value”」のように「=」をつけ、引用符で値を囲えば値を渡せます。定義したカスタムデータ属性はJavaScriptで取得して操作できます。
先のHTMLでは「toggle」というカスタムデータ属性を定義し、値として「modal」を渡しているのですね。「target」に関しても同様です。それらをbootstrap.js内で値として受け取り、modalの操作をしているんです。
bootstra.js内でのmodalの操作は、それぞれの属性に定義された値を取得して、処理しています。ここら辺は、理解できなくても大丈夫です。
- data-hogehogeはHTML5の「カスタムデータ属性」によって作られているもの
- それを使うとJavaScriptで値を取得して利用できる
この2つだけを覚えておけばOKです。
■bootstra.js内のMODAL DATA-APIソース
// MODAL DATA-API
// ==============
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
if ($this.is('a')) e.preventDefault()
$target.one('show.bs.modal', function (showEvent) {
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
$target.one('hidden.bs.modal', function () {
$this.is(':visible') && $this.trigger('focus')
})
})
Plugin.call($target, option, this)
})
}(jQuery);
