このBlogは、BnSのことを書くつもりで、門派創設と同時に始めたが、
意外なほどに、最近のWebテクノロジーの学習にも役立っている。
CSSをカスタマイズしたり、jQuery導入について調べてきたからだ。

jQueryは、動きのあるWebページを書くためのJavaScriptライブラリ。
jQueryをベースに、数多くのスクリプトが公開されている。

このBlogでは、画像処理にColorbox、fancyBox、Galleriaの3つを導入した。
このページで分かるように、複数のスクリプトは共存させることができる。
他に、コード装飾のSyntaxHighlighterと、表計算のHandsontableを導入した。

備忘メモを兼ねて、各スクリプトの導入方法、調整方法について書く。

jQuery
まず、jQuery本体を読み込む必要がある。
ここでは、jQueryのCDNから読み込む形にしている。
liverdoorの場合、デザイン設定(PC)のカスタムJSのhead内に記載する。

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

Colorbox
Colorboxは、サムネイルをクリックすると、ポップアップ表示するスクリプトの一つ。
モーダルウィンドウ系とか、Lightbox系スクリプトと呼ばれている。
ポップアップ枠に収まるよう、自動的に最適なサイズに縮小表示される。

Colorbox Sample Gallery
jin jin(HD)

headタグ内に、cssファイルとjavaスクリプトを読み込む。
colorboxには、5種類のcssがあるので、demoを見て好みの表示を選ぶ。
一般的に、cssファイルはjavaスクリプトより先に読み込ませるべきとされている。
class名はcolorboxとし、サイズとアニメーションスピードを調整している。

<link type="text/css" rel="stylesheet" href="/colorbox/colorbox.css">
<script type="text/javascript" src="/colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function() {
$(".colorbox").colorbox({ maxWidth:'90%', maxHeight:'90%', speed:'100' });
});
</script>
記事のリンク画像に class=colorbox を指定することで、ポップアップにColorboxが適用される。
rel=グループ名 を指定することで、前後に移動可能なギャラリーとして表示される。
ここでは分かりやすいように、小さい画像とHDサイズの画像の2つをグループ化した。

<a class=colorbox title=jin href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da.jpg" target=_blank rel=colorbox_sample>
<img class=pict alt=jin src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da-s.jpg" border=0 hspace=5></a>
<a class=colorbox title=jin(HD) href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725.jpg" target=_blank rel=colorbox_sample>
<img class=pict alt=jin(HD) src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725-s.jpg" border=0 hspace=5></a>

fancyBox
fancyBoxも、サムネイルをポップアップ表示するスクリプトの一つ。
マルチデバイスに対応した、いわゆるレスポンシブなスクリプト。
ブラウザのサイズに合わせて、自動で最適なWeb描画をする機能を持っている。

と言っても、livedoor Blogのスマートフォン用スキンはスクリプトをロードしないので、
敢えてスマートフォンで表示する場合は、PC用ページを表示する必要があるが。

ともかく、スマートデバイスの普及を受けて、レスポンシブがトレンドのようだ。
PCでのブラウズでも、fancyBoxのポップアップはウィンドウサイズが変更された場合、
自動で再描画して追従するのが分かる。

fancyBox Sample Gallery
jin jin(HD)

fancyBoxも、headタグ内に、cssファイルとjavaスクリプトを読み込む。
class名はfancyboxとし、前後のアニメーション効果を無効にしている。

<link type="text/css" rel="stylesheet" href="/fancybox/jquery.fancybox.css?v=2.1.5">
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<script>
$(document).ready(function() {
$(".fancybox").fancybox({ prevEffect:'none', nextEffect:'none' });
});
</script>
記事のリンク画像にclass=fancybox を指定することで適用される。rel=グループ名 も同様。
どちらを適用するかは、表示枠などのスタイルの好みやレスポンシブの要否次第。

<a class=fancybox title=jin href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da.jpg" target=_blank rel=fancybox_sample>
<img class=pict alt=jin src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da-s.jpg" border=0 hspace=5></a>
<a class=fancybox title=jin(HD) href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725.jpg" target=_blank rel=fancybox_sample>
<img class=pict alt=jin(HD) src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725-s.jpg" border=0 hspace=5></a>

Galleria
Galleriaも、イメージギャラリー用のスクリプト。
Galleriaも、レスポンシブデザインに対応している。

ColorboxやfancyBoxは、サムネイルを記事に配置する使い方に適しているが、
Galleriaは、サムネイルをナビゲーションに含めたギャラリーを作ることができる。
フルスクリーン拡大やスライドショーの作成にも適している。(有償機能を含む)

数10枚の画像をBlogに載せるなら、Galleriaの方が見やすいのではないかと思う。

Galleria Sample Gallery
jin jin(HD)

headタグ内でスクリプトとcssを読み込む。
<!-- Galleria -->
<link type="text/css" rel="stylesheet" href="/galleria/themes/azur/galleria.azur.css"> <script type="text/javascript" src="/galleria/galleria-1.4.2.js"></script> <script type="text/javascript" src="/galleria/themes/azur/galleria.azur.min.js "></script>

記事側では、
リンク画像・サムネイル画像を、divクラス内に配置し、
ギャラリー作成のスクリプトも記事内に配置する形だ。

<div class=galleria>
<a title=jin href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da.jpg">
<img class=pict alt=jin src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da-s.jpg"></a>
<a title=jin(HD) href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725.jpg">
<img class=pict alt=jin(HD) src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725-s.jpg""></a>
</div>

<script type="text/javascript"> Galleria.loadTheme('/galleria/themes/azur/galleria.azur.js'); option = {width: 640, height: 400, autoplay: 3000,} Galleria.run('.galleria', option); </script>

SyntaxHighlighter
SyntaxHighlighterは、ソースコードを装飾表示するスクリプト。
このBlogでは、HTMLとJavaを、装飾表示する形で導入している。

<link rel="stylesheet" href="/syntax/styles/shCoreDefault.css">
<script src="/syntax/scripts/shCore.js"></script>
<script src="/syntax/scripts/shBrushXml.js"></script>
<script src="/syntax/scripts/shBrushJScript.js"></script>
<script>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
記事内では、preタグ内にソースコードをエスケープ処理してペーストする。
エスケープとは、「<」は「&lt;」、「>」は「&gt;」と書き換えることを意味する。
読み易さのため、コード内のリンクを無効にするなどの調整をしている。

<pre class="brush: js; html-script: true; toolbar: false; auto-links: false">

エスケープ処理したソースコード

</pre>

Handsontable

Handsontableは、 こちらのように、表計算を描画するスクリプトだ。
表の形式で数字を書いたのとは違い、表計算そのものを書いている。
Handsontableの実装は単純ではないので、この記事では割愛する。

gbr_banner
B&Sブログランキング参戦中!
クリックしてやってください!