logoMemo クラウド環境でのメモ帳
「青春ぶらり旅」作成時(2012-10)に書いた記事Scriptsをここに転記する。スクリプト/CSS設定が未完である。

写真の拡大表示やスライドショー、動画の再生などに関するスクリプトはたくさんあり、この数年で大きく変化している。各種ブラウザやOSへの互換対応だけでなく、かつて主流だったフラッシュプレイヤーをiPhone/iPadなどApple製品ではサポートされないことへの対応、HTML5/CSS3国際標準の進展への対応、PCだけでなく急速に普及しているスマホやタブレットに対応する必要がある。

数年前に使っていたスクリプトが陳腐化したり、ときには動かなかったりすることがある。PCブラウザでは動くがスマホ・タブレットでは動かないといった問題も生じている。何を使えばどんなブラウザ(IE/Chrome/Firefox/Safari/Opera)でも、どんな端末(PC/スマホ/タブレット)、どんなOS(Windows XP/Vista/7/8,iOS,Android,Unix/Ubuntu)でも動くことを確認・保証することは素人には至難の業だ。

本サイトでは、管理人の好奇心、趣味の一環でいろんなスクリプトを見よう見真似でカストマイズして使っているので、端末やブラウザによっては動かないことがある。

Interactive Elements

オープンソースのJavascript Libraryから入手したAjaxスクリプトで、本文でマウスを重ねて注釈を表示したり、クリックして指定したパラグラフをインラインで表示したりできる。とくに便利なのは、縮小画像をクリックするとポップアップで拡大表示できる機能、HTML5 videoやYouTube動画をポップアップ画面で再生できる機能だ。

画像・動画だけでなく、HTMLページやインラインのパラグラフもポップアップ表示できるので、ページを移動することなくいろんな機能を実現できる。ページ移動がないということは機能別にHTMLページを作成しなくて良いということで、増え続けるHTMLページを少なくして管理しやすくなるということだ。

※Memoサイトではbootstrapを採用したので、従来のpopupなどのスクリプトは競合があって動作しない。今後はbootstrapを基本に再構成する。以下のスクリプトは、このページで popup.js を呼び出して動作させている。

  • カーソルを重ねると簡単な説明が表示 〔例〕tooltip?

    <a href="#" class="tooltip" title="...">tooltip?</a> 書式は #help_tooltip で設定する。

  • 写真の拡大表示:Aタグで class="popup" と書く。 〔例〕縮小画像

    <a class="popup" href="/script/popup/sample.jpg">

  • 写真だけでなく、リンク先にウェブページや動画のURLを指定しても良い。

    〔例1〕デジタル移民の冒険を開く
    〔例2〕MP4動画を再生する

    HTML5 video/mp4に対応したブラウザChrome/Safariで再生できます。IE9/Firefox/Operaの場合、Quicktimeプラグインで再生できます。

  • ページ内のID属性のセクションを表示 〔例〕<a href="#header" class="popup">#headerセクション表示</a>
  • 属性にclass="toggle"と書くと次のパラグラフがトグル表示。〔例〕<p class="toggle">...</p>
  • ここがトグル表示される

  • IDがtogglerのパラグラフをトグル表示 〔例〕<a href="#toggler" class="toggle id" title="...">...</a>
  • ここが id="toggler" と書いた部分

  • #headerにジャンプする。〔例〕<a href="#header" class="jump">...</a>
  • <ul class="rotate">のリスト項目が順番に表示される。※表示間隔は5秒に固定。popup.jsで変更できる。
    • 最初のテキスト
    • 二番目のテキスト
    • 終わりのテキスト
  • 画像を順番に表示する例。ul.rotate {margin:0;padding:0;} li { list-style:none }にした。


jQuery呼び出し

先に例示した、tooltiptogglepopuprotateはいろんなサイトで使ってきた。とくにポップアップ機能を多用したので、一部カストマイズし、jquery1.3.2(2009-2-19)を含んだ popup.js を作成して使ってきた。jQueryプラグインなので、Bootstrap(jQuery1.8.1利用)と併用できると思ったが、jQueryのバージョンの違いが原因だと思うが、片方(後に呼び出したスクリプト)しか動かない。

jQueryプラグインによって使っているバージョンが違う。プラグインごとのバージョンをサーバにアップしメンテするのが面倒なときは、CDNホストのjQueryを呼び出すのが便利だ。現在、利用可能なCDNはつぎの三つだ。
 ・Google:  https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js 
 ・Microsoft: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js 
 ・ jQuery: http://code.jquery.com/jquery-1.8.1.min.js

Google Ajax APIを使うと、たとえば1.8系の最新バージョンを呼び出すことができる。
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">google.load("jquery", "1.8");</script>

有名なJavascript Library

javascript-poll-results.png
数年前にInteractive Elementスクリプトを入手したサイトが閉鎖されたため最新版を入手できない。ここ数年のJSライブラリーはPrototype, Mootools, jQueryが有名だが、2008年の時点での投票結果ではjQueryを使っている人が半分以上を占めていた。

それ以来、jQueryプラグインをよく利用するようになったが、Mootoolを使ったJSもいまだに使っている。その代表例が、Lightbox, Slimbox, Videoboxなどだ。数年前からは写真も動画も扱えるMediaboxAdvancedに切り替えたが、2009年以前に作成したサイトではいまだにLightboxなどを使っている。jQueryプラグイン/Bootstrapで類似のことができるので切り替えようと思って検討したが、Bootstrapは冗長が多く重くて、コードを書くのが面倒である。

MediaboxAdvanced

写真・動画のギャラリーを作成するのに利用している。動画をポップアップ再生するときは、NonveBlasterまたはJWPlayerプラグインが必要である。問題はフラッシュを使っているのでiPhone/iPad/iOSでは動作しないことだ。Androidでもv4.xでは動かなくなった。いずれもフラッシュをサポートしないからだ。

代替スクリプトとしてjQueryプラグインのFancybox, Blueimpなどの利用を検討している。

Event Handler

ボタンを押すと背景色が変わる 

マウスを重ねると背景色が変わる
<div style="background-color: skyblue;" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='skyblue'"></div>
Javascript
<div style="display:block;background-image:url(/test/thumb/001.jpg);
 onmouseover="this.style.backgroundImage='url(/test/thumb/002.jpg)'"
 onmouseout="this.style.backgroundImage='url(/test/thumb/001.jpg)'">
</div>
CSS
#mover { display:block; cursor:pointer; }
#mover:hover { background-image:url(/test/thumb/002.jpg);}
#mover:hover img { visibility:hidden; }
<div id="mover"><img src="/test/thumb/001.jpg" /></div>

Assets BACK | HOME | ARCHIVE Style