iPhone は表示に無理があるようなのでこちらのリンクをクリックしてください。

訳あって Embed したものだけ単独で載せています。
このフォトギャラリー「SimpleViewer」に関連する投稿は以下の投稿です。

» 無料のフォトギャラリー、SimpleViewerがバージョンアップしてカスタマイズも超カンタン

SimpleViewer

» SimpleViewer | Spectacular image galleries made simple.

過去に Google Picasa を利用した SimpleViewer の HTML エクスポートについて投稿したこともありますし、せっかくなので現行の SimpleViewer について個人的に「いいね！」と思った点を 3 つ取り上げてみます。

SimpleViewer、ここがバージョンアップしていた

1. svBuilder という Adobe AIR アプリが同梱されていて、画像も含めたファイル一式がカンタンにエクスポートできるようになった。

ダウンロードした ZIP ファイル内に同梱されている svBuilder をご自身のパソコンにインストールすることで、あっという間にどなたでも SimpleViewer による Photo Gallery が作れるようになりました。



したがって、以前ご紹介した「Google の Picasa 3 による HTML エクスポート」に頼らなくても WEB ページ作成が可能です。
また、svBuilder を使ってレイアウト、背景色などデザインのカスタマイズも行えるのでテキストエディタ等で XML ファイルを編集する必要もなくなりました。

オフィシャルサイトの svBuilder ユーザーガイドは以下にあります。

» svBuilder User Guide




2. バージョンアップした SimpleViewer は Flash をサポートしていない iPad、iPhone でも見られるようになった。

以前は Flash 使った Photo Gallery のみだったのですが、現行の SimpleViewer は HTML5、javascript を利用することで Flash をサポートしていない iPad、iPhone 等でも見られるようになりました。



下記のリンクに対して、パソコンでアクセスすると上の画像のような Photo Gallery が表示されます (上の画像もリンクになっています)

Demo

URL は http://www.photoclip.net/s/6v です。

それに対し、iPad、iPhone でアクセスすると下の画像のような Photo Gallery が表示されます。



ピンチによる拡大は出来ないようですが、スワイプ等の iPad、iPhone 的な操作は可能なので違和感なく閲覧できると思います。
Demo にはキャプションが入っていませんが、svBuilder に読み込んだときにキャプション欄に文章を入力すればパソコン、スマートフォンともに表示されます。




3. Flickr にアップロードしてある画像を使ってカンタンに Photo Gallery が作れるようになった。タグによるソートが可能。

svBuilder には Flickr にアップロードしてある写真を WEB ページ上に表示させるためのエクスポートメニューもあります。

SimpleViewer のサムネイルは正方形なので個人的には Instagram のスクエアな写真がピッタリくるのではないかと思いました。Instagram でのアップロード時に Flickr にも同時ポストしておけば、自動で画像が表示されます。

Demo

URL は http://www.photoclip.net/s/6w です。

ブログの投稿内に Embed したものはこちら。

» InstagramからFlickrに同時ポストしてSimpleViewerをつかって表示

なお、ブログの投稿内に Embed できるように Compact でエクスポートした場合 (幅と高さを指定して Embed した場合) iPad はそれっぽい表示になりますが、iPhone で見た場合にはわかりづらい表示になってしまうようです。

確か、Instagram から Flickr に同時ポストすると自動でタグが付与されるはずなので、そのタグを利用すれば Instagram の写真だけ抜き出せそうな気がします。実際やっていないのでなんとも言えませんが。。。

フォントサイズがちょっと大きいのが気になりますが、有料版だったら小さくできるのだろうか。。。

注） Flickr の写真を表示させる場合、ローカルでは表示されません。ファイル一式を WEB サーバーにアップロードしてブラウザでアクセスすることで閲覧可能となります。

以上、
バージョンアップしてさらにカンタンで便利になった SimpleViewer についてでした。

オフィシャルサイトの Compact Mode をご覧になりたい方は ここ をクリック

ひとつ前の投稿で SimpleViewer が 2.0 にバージョンアップしたことをお伝えしましたが、SimpleViewer のオフィシャルサイトに 「 Flickr にアップしている写真をブログやWEBページにembed する方法 」 というのが載っていたので試しにやってみました。

Picasa の HTMLテンプレートも便利ですが、これはこれで便利かもしれませんね。
メインのカラム幅 500px のこのブログだとちょっと狭いかなぁ。
、、、600px ぐらいは欲しいかも。

SimpleViewer のダウンロードは SimpleViewer Download でできます。また、Flickr の写真をブログにembed する方法は SimpleViewer 2.0 Support Home に載っています。

追記：2010.2.10
模様替えがてら Home (トップページ) にembed してみました。
Flickr から画像を引っぱってくると画質がイマイチだったので表示サイズに合わせた画像 (サムネイルも含む) をサーバーにアップロードしてそこからロードしています。

追記：2010.4.23
Home (トップページ) をリニューアルしたので現在SimpleViewer 2.0は使っていません。
いちおう Demo として残しておきましたので、よろしければご覧ください。

» トップページに Embed していた SimpleViewer 2.0

Flickr から画像を引っぱってくると画質がイマイチだったので表示サイズに合わせた画像 (サムネイルも含む) をサーバーにアップロードしてそこからロードしています。

入れ替え作業は、古いフォルダを削除して新しいフォルダをドラッグ & ドロップするだけなので使われている方はバージョンアップしてみてはいかがでしょうか。

全体的なレイアウトは旧バージョンと一緒ですが、ウィンドウ右上隅に画像へのリンクアイコンと全画面表示 (フルスクリーン) のアイコンが追加されたようです。あと、[ 進む ] [ 戻る ] のアイコンも小さめなものに変更されています。

ダウンロードは下記のページにアクセスすると赤枠のところにダウンロードのリンクがあります。

Download ダウンロードページ : Creating a SimpleViewer 2.0 Gallery with Picasa

オフィシャルサイトの Demo をご覧になりたい方は、以下のリンク先にアクセスすると赤枠のところに Demo のリンクがあります。

Demo : SimpleViewer 2.0 の Demo ページへ

先ほどちょろっと見てみましたが、Compact っていうのは Flickr から写真を引っぱってきて表示させることができるみたいですね。 Compact じゃなくてもできました。どうやってセッティングするんだろうか。
。。。ヒマな時にでも見てみます。

明日はお休みですね 。。。あっ、休みじゃない人もいるか

Demo

ちなみに以前の Highslide JS の Picasa HTMLテンプレートは以下のページでご覧いただけます。

• ブログで取り上げた『Picasa HTMLテンプレート』一覧 :: Highslide JS ver.4

Download

Download : Highslide JS v4.1.8 + Picasa HTML Template

インストール方法

ダウンロードした ZIP ファイルを解凍すると HighslideJSv418-Picasa-photogallery という名前のフォルダが生成されます。そのフォルダを丸ごと Picasa3 の templates フォルダに移動すれば HTMLテンプレートとして使用できます。

エクスポート時には [ テンプレートの選択 ] ウィンドウ (下の画像参照) で [ Highslide JS v4.1.8 + Picasa PhotoGallery ] という名のテンプレートを選択してください。

あとは [ 完了 ] ボタンを押せばエクスポートが開始されます。

不具合等ありましたら、コメント欄でお知らせください。

興味がわいたのでバージョンアップがてら使ってみましたが、これがおそろしく高機能。

左側の Option で選択した機能およびデザインは即座に右側の Preview 画面に反映されるのでストレスゼロのクイックレスポンス。すべて自分好みに調整できたら Preview 画面の上部にある Publish ボタンを押すと License がポップアップし、その先に進めばダウンロードリンクと設置手順が表示されます。

あまりにも高機能すぎて Highslide Editor の使い方をここでくわしく説明することは割愛させていただきますが、新規に導入される方はもちろんのこと、バージョンアップされる方もぜひ使ってみてはいかがでしょうか。

Highslide Editor にアクセスするには Highslide JS オフィシャルサイトのトップページ にある Highslide Editor というリンク (赤枠のなかにリンクがあります) をクリックすれば表示されます

かつては<header> ～ </header> 内に

<script type="text/javascript">
	hs.graphicsDir = '/highslide/graphics/';
	hs.outlineType = 'rounded-white';
	window.onload = function() {
	hs.preloadImages(5);
    }
</script>

Option に関する javascript を記述していましたが、この Highslide Editor はhighslide.config.js というファイルにスライドショー関連の Option もひとまとめにしてエクスポートしてくれるようです。

ちなみに私の highslide.config.js にはこのように記述されていました。

/**
*	Site-specific configuration settings for Highslide JS
*/
hs.graphicsDir = '/highslide/graphics/';
hs.showCredits = false;
hs.outlineType = 'custom';
hs.captionEval = 'this.a.title';
hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	useOnHtml: true,
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});

// Add the slideshow controller
hs.addSlideshow({
	slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '0.75',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '-10',
		hideOnMouseOut: true
	}
});

// gallery config object
var config1 = {
	slideshowGroup: 'group1',
	transitions: ['expand', 'crossfade']
};

注意しなければいけないのは赤字の /highslide/graphics/ (graphicsというフォルダはアイコンや枠となる画像類が入っているフォルダです) のところで、たとえば動的にページを表示する WordPress でこの Highslide JS を設置する場合は /highslide/graphics/ という記述を絶対パス (http:// から始まる記述で graphics フォルダの在りかを指定する) に書き換えないとサムネイル画像をクリックしたとき Loading の GIF 画像がず～っと回り続けるだけで画像が拡大表示されません。

それでは、すてきな週末を  

下の LOTO 6 の結果内にあるみずほ銀行オフィシャルサイトへのリンクにも Highslide JS のポップアップを使っています。WEB ページなどもポップアップさせることができるので便利ですよ。

2月4日：6個中2個 第482回抽選結果（みずほ銀行）
2個と1個、行ったり来たり。3個でいいから たまには来て

ファーストサーバで dfGallery 2.0 が使えるようになったのでインストール手順 (設置方法) をアップしておきます。

関連する投稿

• ファーストサーバでdfGallery2.0が使えるようになった

なお、私が契約しているファーストサーバのシリーズは 「ギガント2」 です。
「PHP モジュール追加のお知らせ」 (ファーストサーバから届いたメール) に記されていた対象シリーズは

エコノミー/ビズ/ギガントmini/ギガント2/ギガント/ウルトラビジネス2/ギガビジネス/ギガビジネスプラス/ビジネス/ライトビジネス/ウルトラビジネス/ビギーガ/ エントリービズ/エンタープライズ/エンタープライズ2/ギャラクティカ （エントリ・コース、オルテビズ・シリーズを除く）

とありましたので、上記のシリーズを契約している方であればどなたでもインストールできると思います。

Demo

カラムが狭いのでちょっと窮屈ではありますが。。。

Gallery 上にマウスカーソルを移動すると上のキャプションが隠れます。Photos をクリックするとサムネイルが隠れます。 Fullscreen をクリックすると全画面表示です。

dfGallery 2.0 のインストール手順＠ファーストサーバ

1. コンフィグレータの 「データベース管理」 をクリックすると

   

   「データベース管理」のページが開くので中段より少し下にある
   「◆データベース操作(phpMyAdmin)」 のリンクをクリックします。

2. phpMyAdmin のログイン画面が開きますので、ユーザ名とパスワードを入力し
   [ 実行する ] ボタンを押します。

   

   なお (1) のユーザ名と (2) のパスワードは dfGallery 2.0 のセットアップするときに必要になります。おぼえられないのであればメモしておきましょう。

3. (4) にわかりやすい名前を入力してデータベースを新規作成します。
   ここではオフィシャルサイトにあるインストールの手順を説明するムービーと同じように 「 dfg 」 という名前にしました。
   名前を入力したら [ 作成 ] ボタンを押してください。

   

   上記の (4) のデータベース名と(3) のホスト名も手順 2. の (1)(2) と同様に dfGallery 2.0 をセットアップするときに必要になります。おぼえられないのであればメモしておきましょう。

4. 「 dfg 」 という名前のデータベースが作成されました。

   

   おそらく、照合順序を latin1_swedish_ci のまま使うと文字化けすると思うので (以前、自宅サーバーにインストールしたときにキャプションに日本語を使うと文字化けしました) すべて utf8_general_ci にすると文字化けは解消できると思います。データベースに関しての作業はこれで終了です。
   次は dfGallery 2.0 のインストールです。

5. dfGallery 2.0 のオフィシャルサイトにアクセスして、dfGallery 2.005 をダウンロードします。

   
   dfGallery 2.0 — Free Flash Gallery : Official Site

   ダウンロードリンクはページ中段付近にあります。

   

6. ダウンロードが終了したら解凍し

   

   生成された dfgallery_v2.005 というフォルダ名を変更します。

   

   ここで付けるフォルダ名はそのまま WEB サイトの URL の一部となるので (失礼しました、勘違いしていました) 管理画面の URL の一部になるのでわかりやすい名前、もしくは意味をなす 短めな名前にしておいたほうがいいと思います。たとえばちょい長いですが photo-gallery なんていう名前でも構いません。
   ここではオフィシャルサイトにあるインストールの手順を説明するムービーと同じように 「 dfg 」 という名前にしました。
   ちなみに、Gallery を公開する時にはブログの投稿欄やサイドバー、もしくは WEB ページに EMBED します。dfGallery の管理画面には EMBED CODE を生成してくれる機能も備わっています。もちろん幅、高さも任意のサイズが指定できます。

7. FTP を使って上記のフォルダを WEB サーバーにアップロードします。
   ここではドメイン名の直下にアップロードしました。

   

   アップロードが終了したら、同梱されている INSTALL.TXT に

   2. provide Read write access for “app/config/database.php” and “app/config/dfg/upgrade_state.php” files.

   と、書いてありますので 上記の 2 つのファイル database.php と upgrade_state.php のパーミッションを [644] から [666] に変更します。

8. WEB ブラウザを立ち上げ、dfGallery のセットアップを開始します。
   ここではドメイン名直下に dfGallery をインストールしましたので、アドレスバーに http://www.あなたのドメイン名/dfg と入力し、その後ろに /admin/setup と入力、Enter キーを押してセットアップページにアクセスします。
   入力したアドレスは
   http://www.あなたのドメイン名/dfg/admin/setup
   です。

9. ここまでの作業が間違っていなければ以下の画面が表示されますので空欄になっているテキストボックスに必要事項を入力して [Install the Gallery] ボタンを押します。
   ( ↓ 拡大可)

   

   「データベースにテーブルが作成され、Gallery Module のインストールが完了しました」 というメッセージとともに 「 admin 」 という一時的なユーザー名とパスワードが発行されます。下段にある here というリンクをクリックすると

   

   もう一度ログイン画面が表示されますのでユーザー名とパスワードともに
   「 admin 」 と入力して

   

   [ login ] ボタンを押します。

10. 「アップグレードしてください」 とうながされますので、下段にある Run Upgrade のリンクをクリックしてアップグレードします。

    

11. この 「dfGallery管理画面」 が表示にされればゴールインです ( ↓ 拡大可)

    

12. 最後に、、、まだあるのか、、、あるんです。
    まず [ Profile ] ボタンを押して admin という一時的なパスワードを違うものに変更します ( ↓ 拡大可)

    

    もうひとつ、手順 7. でパーミッションを [666] に変更した database.php のパーミッションを [644] に戻します。

これで dfGallery 2.0 がファーストサーバで使えるようになりました。
おつかれさまでした。

dfGallery 2.0 – Free Flash Gallery : Official Site

関連する投稿：

• 『dfGallery 2.0』 ローカルでは設置成功

今日から ファーストサーバ で使えるようになりましたよ。
年明け 6 日、ファーストサーバから届いたメールに

この度ご利用のサーバにつきまして、お客様よりご要望の多いPHPモジュール
の追加作業を実施いたします。
下記に詳細をご案内しますので、ご確認ください。
記
■対象シリーズ エコノミー/ビズ/ギガントmini/ギガント2/ギガント/
ウルトラビジネス2/ギガビジネス/ギガビジネスプラス/
ビジネス/ライトビジネス/ウルトラビジネス/ビギーガ/
エントリービズ/エンタープライズ/エンタープライズ2/
ギャラクティカ
（エントリ・コース、オルテビズ・シリーズを除く）
■スケジュール 2010年1月12日(火) ～ 1月21日(木)　の間で順次
追加作業を行います。
■追加モジュール 下記4つのモジュールを追加いたします。
1) iconv
2) JSON
3) pdo_drivers
4) Exif

と書かれていたので、もしかしたら使えるようになるかもと思い
毎日一回アップロード済みのフォルダにアクセスして試していたんです。

昨日まではこのような画面が表示されていました。

JSON がインストールされていませんよという表示ですね。
ところが今朝アクセスしたところご覧のようなインストール画面が表示されました。

準備は整ったよ、あとはデータベースのセッティング等を行い運用してくださいという画面です。

ファーストサーバからのメールには

2010年1月12日(火) ～ 1月21日(木)　の間で順次
追加作業を行います。

とあったので、きっと昨日今日で
2) の JSON が インストールされたのでしょう。

まだセッティングできていませんが、近いうちにインストール手順や Demo などアップしてみたいと思います。

(長っ )

Live Demo

表紙中央のタイトルはエクスポートするフォルダ名から、各ページにある画像のキャプションは Picasa の編集モードにある 「 説明を記入して下さい 」 と表示されているところに説明を入力してそこから引っぱってきています (下記画像参照・拡大可)

   

Download

Picasa のみで完結版 ： ダウンロード
⇒ Megazine-3-v137b-Picasa-Template-500×375.zip

インストール方法は
投稿： 「 Picasa & MegaZine 3でクールにPageflip 」 の 『 手順 』 と一緒です。

ポイント

使用するにあたっていくつかポイントをあげておきます。

• Google が無料で配布している画像管理編集ソフト Picasa が必要です。
  Picasa のダウンロードは こちら です。
• エクスポートする際、[ ウェブページのテンプレートの選択 ] 時には
  [ MegaZine 3 (v137b) Picasa Template 500x375 ] を選択してください。
  
• このテンプレートもエクスポートされたフォルダ内にある megazine.xml というファイルを必ず [ megazine ] フォルダに移動してください。
  これは仕様なので避けられません m(_ _)m あとはすべて完結しています
  この作業を行わないとブラウザ左上角に赤い文字で .data:Error #2032 という警告が出ます。詳しくは投稿 「Picasa & MegaZine 3でクールにPageflip」 の 手順7. および 8. をお読み下さい。
  2011.9.30 追記【重要】:
  Flash Player の仕様が変わって、Firefox ではエクスポート後、.data:Error #2032 と表示されずに
  
  こんなアラートが表示されて、ビジー状態 (無反応状態) になってしまうようです。
  放っておくとこんな画面になりますが
  
  手順 8. の megazine.xml ファイル移動を行ったあとでリロード (再読込) すると正常に表示されます。他のブラウザでも同じような動作をするかもしれません。
• エクスポートする写真はコンパクトデジタルカメラの横位置写真を想定しています。
  写真がページの左側に寄ってしまうのを気にしないのであれば縦位置も問題なく入ります。
  ただし Picasa で説明を記入してあると写真上にキャプションが重なります。
  したがって、縦位置写真を入れる時には縦位置写真のみ説明を記入しないようにしたほうがいいと思います。
• キャプション内は改行も可能です。 Picasa の説明を記入するときに改行したいところに <br> と記述してください。
• 表紙と裏表紙の画像はお好きなものに替えられます。
  [ megazine ] フォルダ内にある top_page.jpg と last_page.jpg が表紙および裏表紙用の画像です。502px × 502px の画像を用意すると余白が出ません。 画像の名前は必ず同じにしてください。表紙用画像は top_page.jpg 、裏表紙用は last_page.jpg という名前にしてくださいということです。
• フォントサイズやフォントカラーは変更することができますが、変更するには XML ファイル (megazine.xml) をテキストエディタ等で開いて編集する必要があります。
• カスタマイズに関してはわかる範囲内でお答えさせていただきます。このページに立ち寄られた方の参考になりますのでご質問は必ずページ下段にあるコメント欄をご利用ください。メールフォーム等でのご質問には対応しかねます。

。。。 MegaZine 3 に関しての私の投稿もこれで完結か ？ 、、、な (笑)

画像に直接文字を入れるには Photoshop などのソフトとそれを使う知識がないとなかなか難しいですが、XML ファイルへの文字入力なら入力方法だけわかれば比較的簡単ではないでしょうか。何よりも、画像じゃないので読みやすいという利点があります。

MegaZine 3 ： Plain Text 使用例

上の使用例は Picasa の HTML テンプレートでエクスポートされた XML ファイル (megazine.xml) をテキストエディタ等で編集して作っています。

Picasa HTMLテンプレートのダウンロードは

• Picasa & MegaZine 3でクールにPageflip

の投稿内にダウンロードリンクがあります。

MegaZine 3 : 画像上 （ページ上） に文字を入力する方法

テキストを画像上に入力するにはXML ファイル (megazine.xml) の <page> ～ </page> のあいだに

<txt><content lang="ja"><![CDATA[ここに表示させたい文字を入力する]]></content></txt>

を挿入します。

たとえば一番シンプルに文字が入力されている 使用例の 5 ページ目 を例にとりますと
Picasa でエクスポートされた XML ファイル (megazine.xml) は

<page>
<img src="../images/r0012053.jpg"/>
</page>

画像のまわりに余白を作るためマージンを追加して (青字の部分)

<page>
<img src="../images/r0012053.jpg" left="5" top="5"/>
</page>

テキスト (Plain Text) はこのように入力されています (青字の部分)

<page>
<img src="../images/r0012053.jpg" left="5" top="5"/>
<txt color="0xFFFFFF" align="left" left="20" top="15"><content lang="ja"><![CDATA[<font face="メイリオ">オレンジのT-シャツを着て撮ったら<br>微妙なオレンジかぶりm(_ _)m</font>]]></content></txt>
</page>

フォント指定やフォントサイズ、フォントカラーも記述ごとに変更可能です。

テキスト入力も含め XML ファイル (megazine.xml) に関しての詳しい説明は

• MegaZine 3 – XML Documentation

に載っています。

行間 (line-height) を任意に変更する方法はないものでしょうか。。。
改行 <br> をふたつ繋げると広すぎるし、改行ひとつだと狭すぎるし。
日本語の場合、行間が狭い複数行の記述は読みづらくなりますよね。

行間の問題が解決できれば MegaZine 3 を使ったエッセイみたいなものも作れそう。