MB-Support

パソコン初心者のサポートページ

2.ホームページにフルスクリーンスライドショーを設置する方法

 無料で使える PicLens Publisher は、ウィザード形式でスライドショーが作成できるツールです。スライドショーで利用する元画像を保持したまま、オリジナル画像とサムネイルを自動に作成でき、それらの画像を関連付ける RSS ファイルとサムネイル一覧を表示するトップページを作れます。


前回 の続きです。PicLens Publisher のインストールが完了したところまで説明しました。 今回は、PicLens Publisher でサーバーに転送するために必要なファイルを作成します。



スライドショーに使用する画像を選択します。

PicLens Publisher は、スライドショーに利用する写真を新しいフォルダに自動でコピーしてくれ、サムネイルも自動で作成してくれます。ゆえに、元になる写真は移動、変更される事はありませんが、ここでは作業を分かりやすくするために、あらかじめ利用する写真を別フォルダにコピーします。この作業をする理由はもう一つあり、PicLens Publisher は元画像の解像度の変更、作成されるサムネイルの解像度の変更、ファイル名の変更ができません。 デジタルカメラ からパソコンに写真を移動する時に、タグを入力する場合、日本語が混じったファイル名になる可能性があります。



実際、管理人は日本語が含まれたファイル名の画像を、PicLens Publisher で利用してみたところ、実行可能である事は分かりましたが、XML 形式の RSS を使うため、日本語は避けた方が無難です。後から変更するのも面倒ですし。



1.デスクトップの何も無いところにポインタを移動して、右クリック→「新規作成」→「フォルダ」を左クリックします。



2.新しいフォルダが作成できました。この中にスライドショーに利用する写真をコピーします。



3.C ドライブ以外のドライブから写真を移動する場合は、ドラッグアンドドロップで元画像をそのままにできますが、同じドライブに保存していある写真を使う場合は、コピーアンドペーストします。ドラッグアンドドロップしてしまうと、 元画像を別フォルダに移動してしまう事になります。と言っても、このフォルダに移動したオリジナルファイルは削除、変更されないため元に戻せますが。



4.スライドショーに利用する画像を別フォルダにコピーしたら、次はファイル名と解像度を変更します。 スライドショーはフルスクリーンにする事もできるので、解像度は高い方が良いのですが、クライアントがダウンロードする事を考慮すると、なるべくファイルサイズを節約した方が良いでしょう。 ここでは、 Microsoft Office System(マイクロソフトオフィスシステム) に付属する Microsoft Office Picture Manager を利用しますが、面倒であるものの、Windows に付属するペイントでも可能です。

利用する画像のどれか一つを右クリックして、「プログラムから開く」→「Microsoft Office Picture Manager」を起動します。



5.左上の「縮小表示」ボタンを左クリックすると、フォルダ内の画像が全て表示されます。



6.フォルダ内の画像全てを選択した状態にして、「画像の編集(I)」をクリックします。 さらに、右メニューで「サイズ変更」をクリックします。デジカメから転送した状態の解像度は、2048 × 1536 となっています。



7.今回は 32 % に縮小させ、解像度を 655 × 499 に変更します。パーセントを指定して「OK」を押すと、全ての画像に適用されます。 Windows に付属するペイントで同じ作業をするには、1 枚づつ開いて縮小を実行する必要があります。

写真、または、画像を縮小する方法



8.次に、数字がバラバラで、日本語が含まれるファイル名を調整します。全ての画像を選択した状態で右クリックして、「名前の変更(M)」を左クリックします。



9.今回はファイル名に半角「hamaki」として、3 桁の連番に変更します。作成したら上書き保存します。 「新しいフォルダ」にコピーした画像なので、デジカメから転送した元画像が変更される事はありません。



10.以上でスライドショーで利用する画像の準備ができました。ファイル名が「hamaki001.jpg」「hamaki002」〜と連番になっています。 このファイルは PicLens Publisher を実行してもそのまま残ります。



11.さらに、デスクトップにフォルダを作成します。今回は半角「hamaki」と名前を付けました。 このフォルダ名も半角英数字する事をおすすめします。 この作業は必要無い場合もありますが、このフォルダ無いに PicLens Publisher で生成されたファイルを保管したいと思います。 また、フォルダを作成する事で、いくつかのスライドショーを作る事になった時に重複する事が無くなります。 完成したらこのフォルダをサーバーに転送すればスライドショーが機能します。



PicLens Publisher

1.PicLens Publisher を起動します。



2.スライドショーに利用する画像が保管されたフォルダを指定します。「Select Folder...」を左クリックします。



3.先ほどデスクトップに作成した「新しいフォルダ」を指定して、「OK」を左クリックします。



4.デスクトップを指定する事ができました。「Next」を左クリックします。



5.ここで利用する写真を選択します。今回はあらかじめデスクトップに「新しいフォルダ」を作成して、その中に利用する画像をコピーしました。 つまり、ここに表示された写真を全て利用する流れとなります。 各画像を選択して、「↑」「↓」ボタンをクリックすると、スライドショーで表示する順番を変更する事ができます。 例えば、右のスクリーンショットでは、先頭が「hamaki001」になっていますが、この写真を 3 番目に表示させたい場合は、「hamaki001」を選択して、「↓」ボタンを 2 回押します。順番が確定したら、「Next」を左クリックします。

ここで 「Add Files」ボタンを押して、新たにスライドショーに組み込む画像を指定できますが、ファイル名に日本語が含まれる場合は注意しましょう。



6.サーバーに移動するフォルダを指定します。ここで「Select folder...」を左クリックして、デスクトップを指定すると、デスクトップに「PicLensMediaFiles」フォルダが作成され、その中に必要な情報が保管されます。



7.今回は葉巻の写真なので、デスクトップに「hamaki」と名前を付けたフォルダを作成しました。そこに保管してみます。



8.「Next」を左クリックします。



9.「Finish」を左クリックします。



10.指定した「hamaki」フォルダにスライドショーに必要なファイルが作成されています。 デスクトップを指定した場合は、「PicLensMediaFiles」フォルダに全てのファイルが含まれます。 管理人は「hamaki」フォルダを指定したので、その中に「PicLensMediaFiles」フォルダ → 各種ファイルが保管されています。

さて、instructions.html はデスクトップに移動しましょう。これは一読した方が良いですが、サーバーに転送しません。



11.「Pl_images」フォルダにはオリジナルサイズの写真がコピーされています。 これに関しては、デスクトップに作成した「新しいフォルダ」に保管されている画像と同じです。



12.「pl_thumbs」フォルダに、縮小画像がコピーされています。オリジナル画像とサムネイルを保管するフォルダが別になり、サムネイルのファイル名には「_thumb」が付加されています。



13.「photos.rss」は、RSS ファイルなので、メモ帳で開けますが、現時点では開かなくても良いと思います。 このファイルは「Pl_images」「pl_thumbs」フォルダ内の画像へのパスと、3D ビューアへ移動するための重複しない guid が含まれています。 RSS ファイルとしての title 、link 、description は未記入ですが、一般的に利用されるブログの RSS みたいな使われ方はしないのでそのままでも問題ありません。 この説明は後のページでします。このファイルを直接作る事も可能で、それが可能であれば PicLens Publisher を使わずにスライドショーを作れます。 今は開かなくて良いでしょう。



14.gallery.html は、サムネイル一覧を表示するページでもあり、このページからサムネイルの拡大画像、スライドショー、Piclens がインストールされた環境では 3D ビューアへと発展します。 サーバーに転送したらこのファイルをブラウザからアクセスします。 ローカルでダブルクリックすると、Windows で標準設定されたブラウザが起動します。 情報バーが表示されるので左クリックして、「ブロックされているコンテンツを許可(A)」を左クリックすると操作可能ですが、スライドショーはサーバーに転送しないと動きません。 PicLens Publisher で作成した gallery.html は、すでに必要なリンクが埋め込まれています。 実際加工するのはこのページですが、とりあえずサーバーに転送して、スライドショーが動作するか試してみましょう。



15.PicLens Publisher で作成したフォルダをそのままサーバーに転送します( instructions.html は転送しない )。 管理人の場合は複数のスライドショーを設置する可能性があるので、「hamaki」フォルダごと転送しました。 転送したら ブラウザで gallery.html にアクセスして、スライドショーが動作するか確認しましょう。 次はスライドショーの使い方やファイルの変更方法などをご紹介します。また、管理人が作成したサンプルは次のアドレスです。

PicLens Lite TEST - Sample Page




戻る 一覧表示 次へ


Copyright © 2019 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人のご挨拶プライバシーポリシー著作権/免責事項