2016年3月28日月曜日

HTML ページめくり であなたの本を

以前、 HTML Blog でお馴染みのHTML って何? の中で、
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



本の形式は 見開き と 片めくり と 2種類 が可能ですが、
写真を想定して、 ここからは、 片めくり で ご紹介します。

見本は 4枚の写真 の 本 です。  そう、この投稿の後半に図示。.

各ページの四隅が、前や次への ページめくり 機能を実現します。  さぁ、クリック。  そう、この投稿の後半に図示。.


では、素材の準備。
ペイント で行きます。  う~、GIMP 使いの私としては GIMP で行きたい処ですが ... 。
ペイント でサイズを決めて、 背景を作ります。  ここでは、淡いピンク 1色の 600 x 600 px 。
これを Base.png と言う名前で ひとまず 保存します。
次にこれを開き、 お目当ての写真や文字を貼り付けて行きます。
貼り付けたら、 1.png 等と言う名前で保存して行きます。 1.png4.png まで4枚。

これで、本 の材料は完成です。
後は、 ブラウザに表示させる ファイル(フォルダ)の作成に移ります。

今度は、メモ帳ですね。
その前に、フォルダを作ります。
適当なフォルダを作成し、そこにサブフォルダとして、 pagesjscripts とを設けます。
先程の  1.png4.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 件のコメント:

コメントを投稿