ライブラリを使ってみる

今日は、クライアントサイドのJavaScriptライブラリを使ってみよう。

その家庭を一緒にランスルーすることで、初めてライブラリにとっついてみる時の敷居を低くしよう、というのが目的。
何を使うかは、適当なおすすめサイトから１つ選ぶことにする（典型的な使用例となる筈なので）。
- おすすめサイトとしては、「おすすめ javascript ライブラリプラグイン」で検索した結果、 2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選から選んで実演することにした。

作業の流れ

（典型的な）作業の流れ

テキストエディタを開き、HTMLファイルを作成（内容は次節に）
- 保存のとき、名前は適当でいいが、
- 拡張子 .html にすること、と
- どこ（どのフォルダ）に保存したか、あとで見失わないように。
ブラウザでそのHTMLファイルを開いて動作の確認
- それに先立って、上記HTMLファイルを保存した場所（フォルダ）をファイルマネージャ（エクスプローラ）で開いておくといいだろう
エラーへの対処、と少しずつの改良
- 基本的には上の1. 2. を繰り返すことになる
- エラー検出などにはブラウザの「開発ツール」が役にたつ

書くべき内容

HTMLファイルに以下のものを記入していく。

HTMLの先頭部
ライブラリで提供されるファイルの読み込み
- JavaScript
- CSS
操作対象となるDOM要素（を生成するHTMLタグ）
起動のためのスクリプト

先頭部

<!doctype html>
<meta charset="utf8">

まずはこの２行だけイディオムとして先頭に入れておこう

以下の例では、前述のおすすめサイトの中から、 Flipsterを選び、使い方を一緒に見ていくこととする。

flipster のトップページ

ライブラリとプラグイン

JavaScriptのライブラリとして最も広く普及した代表格が jQueryであり、
- このjQueryは、さらにjQuery用プラグインを追加して機能拡張することができる（右図）。
前述のおすすめサイトは、ライブラリとjQuery用プラグインとが混在している。
- flipsterもjQuery用プラグインの一種。

情報源

プロジェクトのトップページに、入手方法と使い方の解説（またはそのページへのリンク）は必ずある。
小規模なオープンソースのプロジェクトの場合、github（というサイト）にプロジェクトのページを持つことが多い。

Basic Usageの章
- Flipsterもその１つ。
- drien/jquery-flipster と表記されているが、
  drien が開発者（またはグループ）の githubでのログイン名、
  jquery-flipster がプロジェクト名
githubの場合、ページの下半分に ReadMe と呼ばれる解説文章が置かれている。以下はこれ（Basic Usage の章）に沿っての作業ということになる。

ライブラリの読み込み

ファイル指定：　開発元などからダウンロードして、
- HTMLファイルと同じ場所（同じフォルダ、或いはサブフォルダの場合もある）に置き、
- src または href属性の値としてファイル名を指定する
URI指定：　ネットから読み込む。（URLを記述する）
- ブラウザでページを開く都度ネットアクセスが発生する
- オフラインの時は使えないことがある（キャッシュに残っていれば使えることもある）
- というデメリットはあるが手間としては楽
URI指定の際の読み込み元として、大別して２つの方法がある
1. 開発元のダウンロードページ
2. CDN（メジャーなライブラリに限定されるが、速度や安定性の点では安心）

何を読み込むか

一般には
1. JavaScriptによるプログラム
2. CSSによるスタイル指示
の２つのファイルを読み込む。 * 歴史的事情により、この２つは、HTMLでのタグが違う。

Flipsterの場合は以下のようなタグを書くことになる
（ここでは、ダウンロードする前提で、ファイル指定の書き方での例を載せた）。

  <!-- CSSの読み込み
       githubのReadMeの例では cssフォルダに置いているが
       HTMLと同じフォルダに置いた場合 -->
  <link rel="stylesheet" href="flipster.min.css">

  <!-- スクリプトの読み込み ReadMeと同じ -->
  <script src="/js/jquery.min.js"></script>

コメント（ で囲まれた部分）は、解説のためなのでスキップしてください。

githubの場合のダウンロード元

ダウンロード

（本節は、srcやhref属性の値をファイル指定で与える場合の話）

一般的なWebサイトではそのサイトの指示に従う。
githubの場合、distディレクトリに必要なファイルが置かれている場合が多い

圧縮版と可読版

これらの配布物には、名前の末尾（.css や .js といった拡張子のすぐ左）に、’min’ という付加的な名前がつくものとつかないものがある（ことが多い）。
- minつきは圧縮（minify, uglify, compress などの名称がある）されたもので、
  - 人間の可読性を犠牲にして（勿論コンピュータでの実行には支障がない範囲で）
  - スペースや改行などの冗長な部分を削り落としてあるもの。
  - 普通の使用にはこれで支障ない。
- minなし（uncompressed などの記号がついたものも）は、人間が読めるようプログラマがコーディングしたままの姿。
  - トラブルが起きた時などはこちらのほうが対処しやすい
  - （いずれにせよ他人が書いたコードなのでそう簡単にソースを読解できる訳ではないだろうが）

githubからのダウンロードとリンク

zipダウンロードの方法

githubは個別のソースファイルを見られる構造になっていて、
ここからのダウンロードは一般の（Windowsなどの）アプリケーションと勝手が違うので注意。
いくつかのファイルをダウンロードする必要があるなら、右図のように（トップページ右端）から Zip Download を選ぶ。
- その後、展開して、必要なファイルをしかるべき場所に移動させる必要があるだろう。
- なお、zip以外の一括ダウンロード方法を使うには、クライアント側にgit（という開発者向けのツール）がインストールされている必要がある。
個別ダウンロードの方法
個別のファイルを表示させた上でソースコードの部分（右図矢印）をすべて選択して、
ローカル側でエディタを開いて貼り付ける、という保存方法も（手間がかかるが）ある。
或いは、ソースコード表示の右上部の「RAW」のボタンで、ソースコードを単独のブラウザ窓に表示させて、
そのページを「名前をつけて保存」してもいい。　　* この状態でブラウザのアドレスバーに表示されるURLを　　そのまま URI指定に使う、ということも（一般には）可能だが、
- githubのRAW表示はその目的で提供されているものではなく、
githubの状況
- 現実には、HTTPのレスポンスヘッダのContent-type属性として不適切な値を返す造りになっていて、結果的にURI指定には使えないようだ。

jQueryプラグインの場合

jQueryプラグインの場合、jQuery本体も読み込む必要がある。
- もちろんメインで使用するライブラリから（ものによっては）、他にも依存するライブラリがあるかもしれないので、
- 必要なものを追加で読み込むこと。
slimとは
最近の（3版以降の）jQueryは、スリム版とフル版の２種類のビルドが提供されている。
- 名前に slim が入っているのがスリム版で、主要な機能に限定して１つのファイルにしたもの。
- slimが入っていないのがフル版。jQuery本体の全機能を含む。
- そのそれぞれについて圧縮（min）と可読（minなし）があるので、2×2= 4つのファイルが置かれている筈。
  - slim版で割愛された機能として何があるかについては、たとえばこの記事を参照。
slimビルドで足りないケース
slimで機能的に満足できればslim版のほうが軽くていい筈。
- だがそうでないケースもある。
- 実際、flipsterはslim版にない機能を使っているので、開発ツール（コンソール）に右図のようなエラーメッセージが表示される。
- fadeIn などのメソッド（slimにない）が、flipsterでは使われているようだ。
- slimで足りないとわかったら、フル版に切替よう。
```
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"</script>
```
jQueryのダウンロード方法はここでは省略する。
jQueryを提供するCDNはいくつかあり、jQueryのダウンロードページからもリンクされている、が
ここでは「jQuery CDN」でヒットしやすいサイト jQuery CDNで例示する。
前述のように slimでないmin版（上図左）をクリックすると、
オーバーレイ窓が現れ、HTMLに貼るべきコードが提示されるので、
それをコピペすればいい。
- 選択してコピー操作でもいいが、右側のボタンでワンタッチでコピーできる。

その他のHTMLでの準備

コンテナ

外側コンテナとして、たとえば div を使ってみる。
```
  <div class='flip'></div>
```
- ここでクラス名またはid名をつけておくのが望ましい。
- そういう指定をせずタグ名だけでもプログラムは動作するが、 divタグを多数使うページでは混乱が生じるだろう。
その中に内側コンテナを複数置く。
```
  <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
  </ul>
```
- これらのコンテナがフリップ動作のそれぞれのページとして扱われるようだ。
- ここではきわめてシンプルなものにした。
あまり寂しいようなら、CSSで文字サイズを大きくしておこう。
```
  <style>
  li {font-size:150pt}
  </style>
```

起動

jQueryの文法で、外側コンテナを指定し（以下の $(....) の部分）、
そのオブジェクトに対するメソッドとして、flipster() を呼ぶ。
```
  <script>
  $('.flip').flipster();
  </script>
```
ここではクラス名（CSSセレクタの記法に倣ってピリオドを前置する）を指定した。
基本的には、この部分はHTMLファイルの末尾に置くのがのぞましい。

動かないときは

開発ツール（F12)でコンソールを表示させ、
エラーメッセージを仔細にチェックすること。

動作するファイルの例

外側コンテナを２つ用意し、両方に同じクラス名をつけた。
ページ内にフリップ動作するエリアが２つできることがわかる。

<!doctype html>
<link rel=stylesheet href="jquery.flipster.min.css">
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
 <script src="jquery.flipster.min.js"></script>
<style>
li {font-size: 150pt}
</style>
<div class="flip">
  <ul>
  	<li>あ</li>
  	<li>い</li>
  	<li>う</li>
  	<li>え</li>
  	<li>お</li>
  </ul>
</div>
<div class="flip">
  <ul>
  	<li>あ</li>
  	<li>い</li>
  	<li>う</li>
  	<li>え</li>
  	<li>お</li>
  </ul>
</div>
<script>
$('.flip').flipster();
</script>

上記をコピーするか、ここからダウンロードできる。