飛耳長目

写真ツール

〔追記〕
prototypeやmootoolsはやめてJQueryに一本化しようとしている。ところがJQueryプラグインごとに動作可能なJQuery versionが異なる。最新版になると動かない(上位互換なし)プラグインがあるので厄介だ。現在は、1.8.1を採用している。

  1. JQuery Cycle Plugin (cycle.min.js 24KB) 
    JQuery 1.2.6(2008/6/4 サイズ55KB)以降が必要。ただし、1.9.0以降では動かない。
    開始・停止ボタンはあるが、キーボード(特に←→)、マウスホイールが使えないのが不便だ。
  2. Bootstrap3
    IE8以下には未対応だが使うことにした。2013年10月時点でのIE8/7/6シェア合計が27%くらい。
    JQueryは、v1.9.0以降が必要だというが、機能のほとんどは1.8.1(サイズ91KB)でも動くようだ。carouselは1.9.1で
  3. fancybox
    新規に書き直されたV2は、JQuery2.1.5以降で最新版をサポートするようになったが1.8.1でも動くようだ。
    オプションでmousewheel, thumbnail, button, mediaが使えるようになった。→スマホ用に改造
  4. JQuery popup plugin
    Interactive Elementの後継として使用。jpopup.min.cs (13KB)と名付け、互換をとるためclass="popup"にした。
  5. Imagerotator 写真ファイルがないと、そこでストップする。
    またフラッシュなのでスマホでは動かない。→JQueryプラグインに置き換える。

---------------------------
写真の管理、編集、アルバム作成、Web写真共有などに関する情報です。管理人がサイト構築で学んだことの備忘録です。画像ライブラリ

パソコンに加えて、スマホやタブレットでも表示できる写真スクリプトを評価している。機種モデル、OSバージョン、ブラウザなどによって動いたり動かなかったりで、まだ決定版がない。かつてはパソコンではフラッシュが普及し99%大丈夫だったが、この数年で事情が変わった。Android2.xで動いたものがAndroid4.xでは動かなくなったりした。同じスクリプトでも、たとえばSimpleviewerは、HTML5をサポートする最新バージョンはChromeローカルで動かなくなった。

2013年現在もっとも確実に動きそうなのは、Jqueryとそのプラグインだ。パソコンでもスマホ、タブレット、AppleでもAndroidでも動きそうだ。写真はFancybox, 動画はFlowplayerに移行するつもりだ。写真スライドショーはJqueryプラグインのCycle.js改造版に置き換えていく。ImageRotatorを気に入っていたが、Flashベースのため2011年に打ち切られた。

写真アルバムの作成

フリーウェアの写真アルバム作成用アプリケーションで作ったサンプルです。ほとんどがオープンソース開発のため、無料で使用、複製、改変、再配布できます。Linuxでは各種のアプリが標準で使える。→http://agorian.com/help/linux/graphics/

F-Spot 0.5.0.3

説明 ♦Sample
F-Spot 

  • 標準サイズ480x360に自動変換
  • 右下の「スタイルを表示」をクリックして「明るく」、「暗く」を選べる。
  • HTMLで作成されているのでWeb/ローカル両方で表示できる。

SimpleViewer 1.9

説明

SimpleViewer
SimpleViewer
AutoViewer
AutoViewer
PostcardViewer
PostCardView
TiltViewer
TiltViewer
TiltView
組み込み
Embed
 
  • サンプルを開くと、5種類の写真アルバムを選べます。
  • 表示する写真は gallery.xml で指定する。写真フォルダから自動的に作成する時は、digiKam を使う。
  • Flashを使っているため、写真のダウンロードはできない。
  • Postcardviewerで日本語キャプションが表示されない。

Image Rotator

Linkブログ

以下のファイルを同じフォルダに保存して、
写真ファイルをXMLファイルで指定する。
imagerotator.swf
swfobject.js
flower.xml (写真ファイル名を書く)
index.html(表示するHTML)
  • 写真ファイルは相対アドレスまたはWebのURLアドレスで指定する。
  • httpで始まるURLを指定した場合はローカルでは表示できない。
  • これまで使用してきたのはswfobject v1.5だが、GoogleからV2.0(旧SWFFix)がリリースされている。Google Ajax Libraries siteに直接リンクすればよい。
    http://ajax.googleapis.com/ajax/...

iWebAlbum

Web共有の写真アルバムを生成するツール
 ♣EunQ.comから入手できる。V2.02はzipで660KBと軽量。
 ♣Sample1 Sample2 Sample3
 ♣language_ja.xmlをlanguageフォルダーに保存すれば日本語化できる。

ThumbStudio

arclab.com ♣Samples

HTMLだけでなくJavaスライドショーも作成できる。機能豊富で、スキン選択の幅も広い。選択肢が多いのでかえって使いにくいかも知れない。英語版しかない。有料版にはWatermark機能がある。

phpSlideshow

 ♣Sample

お気に入りのスライドショーツールである。フォルダに写真ファイルとslide.phpおよびslide.tmplを保存するだけで良い。写真のファイル名は何でも良いが、必ずJPG形式で保存する。

→V0.9.9からJPG, GIF, PNGが対象とtなった。

 

フォルダー構成(例)

 slide.php
  slide.tmpl
  photo/001.jpg
        002.jpg
        003.jpg

ブラウザから、/slide.php?directory=photo を開くとphotoフォルダのスライドショーを表示できる。パソコンに保存された写真を表示するときはApache/PHPが必要である。

slide.phpとslide.tmplをphotoフォルダーに保存したときは、/photo/slide.php を呼び出すだけでスライドショーを表示できる。Webに保存した大量の写真ファイルをブラウズするのに大変便利である。

表示する写真の大きさ、サムネイルの大きさ・数、画面の配色や配置などを自分好みにカストマイズできる。

 

PHPスライドショー

phpSlideshowプログラムを使うとフォルダ内の写真のスライドショーを表示できます。

〔例〕http://agorian.com/album/demo/slide.php?directory=photo

Flashスライド

フリーウェアのImage Rotator使用。写真ファイルはXMLファイルで指定する。 ♣LinkDemo

<embed src="imagerotator.swf" width="280" height="210" flashvars="file=flower.xml"/>

スライド切り替え効果: random

スライド切り替え効果: blocks

スライド切り替え効果: fade  表示時間:2秒(&rotatetime=2)

スライド切り替え効果: bubbles

スライド切り替え効果: circle

スライド切り替え効果: fluids

スライド切り替え効果: flash

スライド切り替え効果: bgfade

スライド切り替え効果: lines

Slide.com

写真をアップロードするだけでスライドショーを表示できる無料のサービス。 


 

Guestbook

Slide Video

YouTube動画をSlide.comのプレイヤで表示できる。

 
 
※2009年4月頃、投稿すると下記のようなスクリプトが自動的に挿入されるようになった。Twitterかfacebookに自動投稿するスクリプトの気がする。いまだになぜ挿入されるのかが分からないが、いつの頃からか挿入されなくなった。システムの設定を変えたからだが、どこを変えたからかが分かっていない。
※Monthly Archiveで2009年4月分は、このSlide Videoしか表示されないのも変だ。履歴を見るとこの月は112件投稿したことになっている。
⇒スクリプトを削除したら表示された!しかし、この投稿がMonthly Archiveに表示されなくなった。ログイン状態では表示される。
※ログインした状態では、Monthly Archiveメニューが表示されないのも変だ。
 
 

testtest

挿入されたスクリプト

<script type="text/javascript">window.addEventListener('load', function () {
    var f = window.updateStreamsHeight;
    window.updateStreamsHeight = function () {f();$("#streamScrollContent").height($("#streamScrollContent").height() + 65);$("#streamBoxesContainer").width("");};
    var f2 = hs.statusObj.update;
    hs.statusObj.update = function (message, type, isAutoHide, hideTimeout) {f2.call(hs.statusObj, message, type, isAutoHide, hideTimeout);if (message == "Message posted") {$("#messageBoxMessage").focus();console.log("set focus");}};
    window.showLessProfiles = function () {};
    $("#messageBoxMessage").live("keydown", function (evt) {if (evt.keyCode == 13 && evt.shiftKey) {var selected = false;var first = null;$("._multiImgSelectorContainer a._selectAll").closest("._multiImgSelectorContainer").find("._imageCheckboxes a._imageLink").each(function () {if (!first) {first = $(this);}if ($(this).hasClass("selected")) {selected = true;}});if (!selected && first) {first.addClass("selected");}createMessage();}});
    $(".comment").live("click", function () {var tid = $(this).next().find("input").val();if (!tid) {tid = $(this).parents(".message").find("input[name='originalTweetId']").val();console.log(tid);}var uid = $(this).find("a:first").attr("title");newActionTweet($("#messageBoxForm ._imageCheckboxes input:first").val(), "@" + uid + " ", tid, uid);});
}, false)</script> <script type="text/javascript">window.addEventListener('load', function () {
    var f = window.updateStreamsHeight;
    window.updateStreamsHeight = function () {f();$("#streamScrollContent").height($("#streamScrollContent").height() + 65);$("#streamBoxesContainer").width("");};
    var f2 = hs.statusObj.update;
    hs.statusObj.update = function (message, type, isAutoHide, hideTimeout) {f2.call(hs.statusObj, message, type, isAutoHide, hideTimeout);if (message == "Message posted") {$("#messageBoxMessage").focus();console.log("set focus");}};
    window.showLessProfiles = function () {};
    $("#messageBoxMessage").live("keydown", function (evt) {if (evt.keyCode == 13 && evt.shiftKey) {var selected = false;var first = null;$("._multiImgSelectorContainer a._selectAll").closest("._multiImgSelectorContainer").find("._imageCheckboxes a._imageLink").each(function () {if (!first) {first = $(this);}if ($(this).hasClass("selected")) {selected = true;}});if (!selected && first) {first.addClass("selected");}createMessage();}});
    $(".comment").live("click", function () {var tid = $(this).next().find("input").val();if (!tid) {tid = $(this).parents(".message").find("input[name='originalTweetId']").val();console.log(tid);}var uid = $(this).find("a:first").attr("title");newActionTweet($("#messageBoxForm ._imageCheckboxes input:first").val(), "@" + uid + " ", tid, uid);});
 

 

FunPix

Slide.comにお遊び画像を合成できる機能があった。

4Images Gallery

Fantasticoを使ってインストールした。

Sample

Short description: An Image Gallery system featuring unlimited categories/subcategories, web-based and FTP images upload, auto-thumbnails, comments, send a picture, rate a picture, random pictures, extensive administration panel. Homepage: http://www.4homepages.de/ 4Images Gallery support forum (We are not associated with the support forum) Purchase a license for commercial/profit use (You need a license, in order to use 4Images Gallery on commercial or profit oriented websites). New Installation (1.7.6) Disk space required: 3.56 MB Disk space available: Unlimited MB

Anfy Java Applet

Gallery 2.3

しばらく放置していたGallery2.2.3を、昨年10月にリリースされたGallery 2.3 (Skidoo)にアップグレードした。サブドメインgallery.agorian.comでアクセスすると正常に表示されないという問題が発生した。それ以外の問題はいまのところない。

現在、Gallery3のプロジェクトが進行している。ほとんどの開発メンバーがGoogleキャンパスに集結して議論を重ねている。最初のリリースは今年2月1日の予定だ。

一方Gallery1はまったく別のプロジェクト(Jallery)になった。 Joomla!の中にGalleryを取り込むGallery 2 Bridgeというプロジェクトもある。CMSのコンテンツに写真やアルバムを取り込みたいという要望に応えたものだ。

 

Gallery3.0.4

2011年、syskaiob用にテスト的にSimplescriptを使ってインストールした。基本部分は機能するが、不具合がいくつかあったので放置した。

Gallery3.0.8

2012/6 事務局引継ぎのため再度チェック。3.0.8がリリースされていた。いくつかの不具合が修正され、動画投稿も可能になった。Simplescriptは3.0.4のままなので、開発元からソースを入手してインストールした。FFMPEGを入手し、これもセットアップした。動画投稿(html5/mp4)が可能で再生もできたが、サムネールが生成されない。バグなのか、設定ミスなのか調査中。とりあえず手動でサムネールを作成、アップロードした。

Gallery3.0.9

動画をアップロードできるようになった。mp4, 3gp, mov, flv, mpg, HTML videoなどをアップ可能にした。最大サイズは100MBに制限した。
YouTube動画を表示するためには、embed_videos モジュールが必要だ。ダウンロードしたzipを解凍し、サーバにアップ。管理画面の「モジュール」でembed_videosを有効にすると、「追加」メニューに Embed Video が表示される。これをクリックして、YouTube動画のURLアドレスを入力すればよい。共有のURLではなく、ブラウザーのアドレス欄のURLを使う。

 

Lightbox2

1.サーバへ設置
Lihtbox2からzipファイルをダンロードし解凍する。解凍したファイルをWEBにアップロードする。
 

2.使い方
(1)スクリプト
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

(2)スタイルシート
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

(3)リンク
画像へのリンク(aタグ)で、rel="lightbox" を追加する。
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

複数表示するときは同じグループ名を、lightbox[グループ名] という形で書く。
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

3.サンプル

※popup.jsと共存することが出きない。

Pixelpost

公式サイト
写真ブログ Demoサイト

シンプルな写真ブログサイトを作れるオープンソースソフトウェア。Simplescriptでもインストールできる。

About

オープンソースのPixelpostを使った写真ブログです。Pixelpostの機能を評価するためにインストールした。
日々撮った写真で、お気に入りを掲載しようと思う。

写真ブログに必要な最低限の機能しかないがシンプルでよい。標準テンプレートがいくつか提供されている。
ここではGoogle Code Page にあるthe world in 35mmテンプレートを採用した。

Pixelpostカストマイズ

Vista写真編集ソフト

Google Picasa2

picasa

 コンピュータ内の画像や写真を検索して、整理できる。写真を編集したり、視覚効果を追加したりできる。また、メール、 印刷、またはウェブ アルバムで簡単に写真を共有できる。DL Win版(6MB)

Windows Photo Gallery

Win Photo Gallery

 Vista標準の写真の管理・編集ソフト。Picasa2と類似。どちらを選ぶかは嗜好の問題だが、筆者は Picasa2を愛用している。

BlogSite   ※Windows Live フォトギャラリーと混同しないように注意。

Paint Shop Pro 95

psp3

 95年版を使っている。画像の編集(明るさ、色、彩度、トリム、拡大縮小、効果、合成、レタッチなど)が簡単。画面の 任意の場所を切り取ることができる。最新版はPaint Shop Pro Photo X2 (13,800円)

BlogCorel版

Gif Animator

Gif Animator

 アニメーション作成、編集、特殊効果、最適化処理ができる。最新版はシェアウェア。古いWin95用1.5版が使いや すい。

MemoUlead Gif Animator 5.0.5 Win版 (674KB)

IBM WebArt

WebArt

 グラフィック・タイトル、ロゴ、ボタン、ベクター・グラフィック描画 (vector graphic drawings)、フォトフレームなどを作成できる。IBM HPB付属ソフト。

解説IBM ホームページ・ビルダー12

Shukusen 縮小専用

縮小専用

 多量の写真を簡単に縮小できるありがたいソフトだ。デジカメ写真ファイルをドラッグ&ドロップするだけで縮小 されたJpegファイルを作ることができる。彩度アップ→綺麗に縮小→鮮鋭化も可能だ。

解説

Snanail すなねぃる!!

すなねぃる

 デジカメ写真のWebアルバムやスライドショーを簡単に作成できる。写真フォルダの整理に便利である。Web用には PhpSlodeShowが便利だ。

MemoSiteDL Win版 V218d (897KB)

QuaJpg 画像品質比較

QuaJPG

 元の画像と圧縮後の画像を左右に同時に表示してくれるので、画像を確認しながら圧縮率を決められる。品質を90%にす るだけで1/3にきれいに圧縮してくれる。

MemoVector Win版 V1.52 (305KB)

PhpSlideShow (Web用)

phpSlideshow

 ★

MemoSiteDL Win版 V★ (★MB)

Webスライドショー作成

Javascriptを使ったスライドショー表示

Snanailという古いフリーソフトのツールがある。写真ファイルを選択し、いくつかのパラメータを設定してボタンを押すと写真の一覧あるいはスライドショーを表示するHTMLページを生成してくれる。スライドショーはJavascriptを使っているので、携帯でも表示できる。

このJavascriptを改変してテンプレートにした。ファイル名を001.jpgから連番で作っておけば、このテンプレートでスライドショーを表示できる。phpSlideshowの場合はファイル名がなんでもよいし、ファイル数も問わないので便利だが、ローカルでは使えない。

Javascriptを使ったHTMLファイルだとWeb/ローカル兼用で使えるのが便利だ。ファイル名をすべて指定しないといけないが、001からの連番にしておけば大した手間はとられない。

※ページを開いたときにスライドショーを開始するときは、bodyタグで onLoad="animate();" を追加する。
※embedタグでBGMにmidiを使った場合、Quicktimeプラグインが必要だ。

Slideshow 

[1]開始 [2]停止 [3]前 [4]次

Image Rotator

HTML5にも対応したスライドショープレイヤー。JW Playerのひとつ。

★ブログに書いた→http://agorian.com/web/photo/000335.html

WS-Slideshow

phpSlideshowとJWPlayerを合わせた感じのFlashを使ったスライドショー。本体のws-slideshow.swfファイルサイズは70KB。非商用の個人用途では無料。画面にロゴが表示されて目障りである。実際に使うためには購入しないといけない。エレナ・レンスカヤは購入版を使用。

絶景くん





Webカメラ


2008年ベストショット(12月15日午前6時50分)


©2006 Sigma Social Network