www.20thingsilearned.com と言うページめくり機能のあるサイトを ご紹介 しました。
これが、割と簡単に、実現出来るのですね。 似た様な形で、 ですが ... 。
あなただけの ブラウザ上で開ける 写真帳 の出来上がり！ です。
もう一度、リンクを貼って置きましょう。
20 Things I Learned About Browsers and The Web - Google Chrome Team 2010/11
これを見付けた当時、 こんな凝ったものは 素人 には 手が出せないもの と傍観していました。
でも、つい最近、 Internet 検索していて、見付けたのです！。
割と簡単に、 実現出来るものを！。
特別なソフトや 専門的な知識は 基本的なものを作るのならば 必要ありません。
Windows で言えば、 恐らく、 メモ帳 と ペイント とで、作れてしまうでしょう。
個人的に楽しむのなら、 収めたフォルダーを 他の環境に持ち込めば、 何処でも その 本 を開く事が出来ます。
少し工夫すれば、 Interet 接続環境の無い マシン にも載せられます。
そのサイトとは ここ です。
https://github.com/blasten/turn.js
本の形式は 見開き と 片めくり と ２種類 が可能ですが、
写真を想定して、 ここからは、 片めくり で ご紹介します。
見本は ４枚の写真 の 本 です。 そう、この投稿の後半に図示。.
各ページの四隅が、前や次への ページめくり 機能を実現します。 さぁ、クリック。 そう、この投稿の後半に図示。.
では、素材の準備。
ペイント で行きます。 う～、GIMP 使いの私としては GIMP で行きたい処ですが ... 。
ペイント でサイズを決めて、 背景を作ります。 ここでは、淡いピンク １色の 600 x 600 px 。
これを Base.png と言う名前で ひとまず 保存します。
次にこれを開き、 お目当ての写真や文字を貼り付けて行きます。
貼り付けたら、 1.png 等と言う名前で保存して行きます。 1.png ～ 4.png まで４枚。
これで、本 の材料は完成です。
後は、 ブラウザに表示させる ファイル（フォルダ）の作成に移ります。
今度は、メモ帳ですね。
その前に、フォルダを作ります。
適当なフォルダを作成し、そこにサブフォルダとして、 pages と jscripts とを設けます。
先程の 1.png ～ 4.png を pages に移動しましょう！。
以下のコードをコピーして、 index.html と言う名前で 適当なフォルダに 保存します。
保存の際に、ファイルの種類(T) は 全て を選択して置いて下さい。
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jscripts/turn.min.js"></script>
<style type="text/css">
body{
background:#ccc;
}
#magazine{
width:600px;
height:600px;
}
#magazine .turn-page{
background-color:#ccc;
background-size:100% 100%;
}
</style>
</head>
<body>
<div id="magazine">
<div style="background-image:url(pages/1.png);"></div>
<div style="background-image:url(pages/2.png);"></div>
<div style="background-image:url(pages/3.png);"></div>
<div style="background-image:url(pages/4.png);"></div>
</div>
<script type="text/javascript">
$(window).ready(function() {
$('#magazine').turn({
display: 'single',
acceleration: true,
gradients: !$.isTouch,
elevation:50,
when: {
turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});
$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#magazine').turn('previous');
else if (e.keyCode==39)
$('#magazine').turn('next');
});
</script>
</body>
</html>
さて、ここで、スクリプトがふたつ出て来ました。
jquery-1.7.1.min.js と、 turn.min.js と、です。
前者は指定された Internet 上のページにあるものを、 後者は自分のフォルダに収められたものを使っています。
さぁ、 後者のファイルをゲットしましょう。
冒頭にも記載したページ https://github.com/blasten/turn.js の 右上にある Download ZIP から 圧縮ファイルを入手して、
展開して下さい。
その中にある turn.min.js を サブフォルダ jscripts にコピーします。
尚、 ライセンスは
jquery-1.7.1.min.js ： MIT License と GNU GPL バージョン2 のデュアルライセンス。
（ https://blog.jquery.com/2011/11/21/jquery-1-7-1-released/ ）
MIT を選択すれば ご自分の著作権表示と、
Released under the MIT license http://opensource.org/licenses/mit-license.php の表記を。
turn.min.js (3rd release) ： Copyright (c) 2012, Emmanuel Garcia All rights reserved. 展開後の license.txt 参照。
https://github.com/blasten/turn.js/blob/master/license.txt
です。 配布する場合には、 著作権表記と共に、明記して下さい。.
尚、 画像枚数を増やすのは、
<div style="background-image:url(pages/4.png);"></div>
の部分を新しい行にコピーして、画像名称を変えるだけです。
2冊目を作るのは
適当なフォルダ 毎コピーして、pages フォルダの中の画像を差し替え、上の様に名称変更です。
こんな感じで出来上がります。 あっ、Google Account で Log-In していない状態では 何も 表示されませんね！。 *1..
あっ、Google Drive Host がサポートされなくなったので 何も 表示されませんね！。 *2..
はい、表示される様に html に直接 code を書きました。 *3..
やっぱり、 表示されません！。 お手上げ ... 。 *4..
実際には、ファイル index.html をダブルクリックして規定のブラウザで表示するか、
実行中のブラウザに ファイルを ドラッグドロップして表示されるか、 です。
上の方法で作成すると、この 画像 の部分だけが表示されます。
ここでは Blog 用に、一部の機能を外し、サイズも 380 px に下げています。
Google Drive にアップした画像を引いて来ています。 う～ん、面倒！。
でも、なかなか、面白いですね。
普通は、フォルダに収めたファイル群をダウンロードして貰って、ローカルで見て戴くのが、速度の点でも有利だと思います。
欠点は、 blog の場合、作成画面で画像が見られない事！。. 皆さんには関係ないですが。.
[2016/04/01] 見本の 本 の部分は Google Account での Log-In 必須の旨を追記 *1.
[2016/09/20] Google Drive Host 機能を使って書いてあったので、Blog での画面表示が X *2.
[2016/09/23] turn.min.js 3rd release (Copyright 2012 Emmanuel Garcia) を html 内に記述 表示できない？ *3.
[2016/10/06] このページの見本が表示出来ず お手上げ ... *4..
0 件のコメント:
コメントを投稿