HTTPS SSH
=================================
簡易Webスライドショーシステム
T. Yamamoto
=================================


スライドショーを簡単に実現するための仕組みです。

サンプルを実行してみるには、python2.x と それに対応する
PIL(Python Imaging Library) があらかじめインストールしてあることが必要です。

PIL: http://www.pythonware.com/products/pil/

ただし、PILのほうは、サンプル画像を作るためだけに必要で、スライドショー
自体には要りません。HTML + Javascript だけで動作します。


スライドショー動作仕様
----------------------

左矢印、右矢印のリンクをクリックすると、画像が変化します。
キーボードの左右移動キーにも同様に反応します。

画像それ自体は、フルサイズ表示へのリンクとなっています。



設置方法
----------

スライドショーに使う画像を、ひとつのディレクトリ内にまとめます。
同じディレクトリ上に、javascriptの呼び出しを含むHTMLをひとつ置きます。
HTMLはUTF-8エンコードにするのがよいでしょう。

javascriptは、jqueryと、スライドショー実行用のオリジナルスクリプトをふたつ、
画像ディレクトリの「ひとつ上」の階層に置いておきます。

さらに、HTMLと同ディレクトリ上に、 info.txt という名前で、スライドショーの定義を
JSON形式で記述したものを置きます。

まとめると、下図のような配置になるでしょう。


 +- slideshow.html
 +- slideshow.js
 +- jquery-1.7.1.min.js
 +- (スライドショーの名前)
     +--- 001.jpg (適当なファイル名)
     +--- 002.jpg
     +--- ...
     +--- info.txt


info.txtは、下のような記述内容を持つJSONです。UTF-8で記述します。
本配布物の sample/ ディレクトリ下にある、info.txt の内容を参照してください。

  ※ サンプルの info.txt の各画像情報は二要素のリストとなっています。
     ひとつめは画像の相対URLで、ふたつめは画像の名称です。画像の名称は現在
     スライドショー内では使われていません。

  ※ JSON形式は、リストの最後の要素を「,」記号で終えることができません。
     記述するときには注意しましょう。


これで、Webサーバーにすべてをアップロードして、HTMLにアクセスすれば
スライドショーが実行されます。
アクセスするときのURLは、..../slideshow.html#(スライドショーの名前) とします。

ローカルコンピュータ上でHTMLを表示しても、javascriptの動作を可能にして
おけば、動作を試せます。


サンプルの試しかた
-------------------

sample/ ディレクトリ下で、make_random_imgs.py を実行してください。
python と PIL が正しくインストールされていれば、同ディレクトリ内に
src_01.jpg から src_20.jpg の20個の画像が生成されます。

しかるのちに、add_stamp.py を実行します。
すると、今生成した20個の画像をリサイズし、さらに四隅にスタンプ画像を
半透明に埋め込んで、001.jpg から 020.jpg の20個の画像を生成します。

サンプルディレクトリにあらかじめ置いてある info.txt と slideshow.html は、
ここでできる予定の画像を使うように記述してあります。
ここで、slideshow.html を、InternetExplorer や Firefox でローカルに表示
してみて、スライドショー機能が動くようなら成功です。

python + PIL がなくても、適当な画像を持ってきてサンプルスライドショーを
ためすことはできます。


make_random_imgs.py は PIL で新規画像に図形を書くためのサンプル、
add_stamp.py は、PIL で画像をリサイズし、また画像の半透明合成を行うための
サンプルスクリプトとしての意味も持っています。