Beach Resort Photoclip

以前、投稿 「アクセスカウンター [77777] で写真集プレゼント」 の中でスクリーンショット（スクリーンキャプチャー・画面キャプチャー）について触れましたが、Picasa3 の新機能としてスクリーンショットを取得できるようになったそうです （Picasa3 を起動しておく必要があります）

使い方は簡単で Picasa3 を起動して、あとはPrintScreen キーを押すだけ。
アクティブなウィンドウ内だけ取得したい場合は Ctrl + PrintScreen キーを押せばOKです。

保存するフォルダは勝手に作ってくれる（インストールすると作られている？）ようで、Vista の場合は [ ピクチャ ]フォルダの中に [ Picasa ]フォルダ → [ スクリーンキャプチャ ]フォルダ というフォルダが作られてそこに保存されます。ファイル形式はビットマップ (.bmp)

もうしばらくすると「東南アジアのリゾートホテル写真集」のアクセスカウンターが、写真集プレゼントのキリ番 （80000） になりますので Picasa3 を使ってアクセスカウンターをキャプチャーする手順をご紹介しておきましょう。
（77777 をキャプチャされた方はいらっしゃらなかったので現在 80000 に持ち越し中）

Picasa3を使ってスクリーンショット（画面キャプチャー）する方法

1. Picasa3 を起動します

2. [ メニューバー ] → [ フォルダマネージャ ] をクリックします （初回だけ）

   

3. スクリーンキャプチャのフォルダを常時スキャンにしてOKボタンを押します
   これをやらないで12枚ほどキャプチャしたら Picasa3 のスクリーンキャプチャフォルダが更新されなくなりました

   

4. 東南アジアのリゾートホテル写真集のトップページにアクセスして、アクセスカウンターの部分がブラウザ上に表示されるようにして Ctrl+PrintScreen キー を押せばキャプチャされます

   

5. Picasa に戻るとスクリーンキャプチャフォルダに画像が保存されています

   

6. 該当するサムネイルをダブルクリックすると画像編集ウィンドウが開きます
   必要なのはアクセスカウンターまわりなので切り抜きボタンを押して切り抜き作業を行います

   

7. マウスカーソルを画像上に持って行き任意の場所で左クリックします
   クリックしたままマウスを右下方向にドラッグする（動かす）と切り抜きたいところが選択されます
   選択できたら左にある [ 適用 ]ボタンを押してください

   

   選択したぶぶんだけが切り抜かれました
   左上にある [ライブラリに戻る]ボタンを押して通常のサムネイル一覧に戻ります

   

8. ライブラリに戻ると [ ディスクに保存 ]ボタンが表示されていますのでそのボタンを押して切り抜いた画像を保存します

   

   ちゃんと元画像のバックアップも取ってくれるようでボタンを押すとこんなポップアップが出ます

   

9. 切り抜きが完了したファイルにアクセスするにはフォルダ名の左横にあるフォルダアイコンをクリックします

   

   PC 内のスクリーンキャプチャフォルダが開き、先ほど切り抜いた画像にアクセスできました

   

   なお、元画像（切り抜く前の画像）に戻すにはサムネイル上で右クリックしてコンテキストメニューの中にある [ 元に戻す ] をクリックしてください。切り抜いて保存されていた画像は削除されバックアップされていた元画像に差し替えられます。

よくぞココまでおつきあい下さいました 以上です。

80000 のアクセスカウンターをキャプチャーできましたら私に送って下さい。
無料で写真集をプレゼントさせていただきます。
詳細は投稿「アクセスカウンター [77777] で写真集プレゼント」をご覧下さい。

それではステキな週末を

12月19日：6個中0個 第425回抽選結果（みずほ銀行）
かすりもしない 商店街の福引きに賭けますかっ(苦笑)

このブログでもたびたび Picasa （のHTMLテンプレート）を取り上げてきましたが、Picasa2 が先頃 Picasa3 にバージョンアップし日本語にも対応したそうです。

さっそくインストールしてどんな感じか確かめてみましたが、機能が大幅に向上しているのは間違いないでしょう。正直なところ、普通に写真をたのしむだけなら Picasa3 があれば事足りてしまうのではないかと思います。 Picasa3 のオフィシャルダウンロードサイト

Picasa の基本 : Picasa 3 feature overview から Picasa3 に追加された新機能をいくつか拾い出してみますと

• Picasa 3 と Picasa ウェブ アルバムの編集内容を同期する

私は Picasa ウェブアルバムは使用していないので必要はありませんが、ヘビーユーザーは結構ありがたいのではないでしょか。

• 画像をレタッチする

切り抜き、傾き、色調整、明るさ調整、写真上に文字入力などの作業が簡単に行えます。

• ムービーを作成、編集する


作成したムービーを Picasa3 からダイレクトに YouTube にアップできます。さらにアップロードが終了するとモニターの右下にリンクがポップアップするのでクリックすることでブラウザ上でのプレビューやタイトル、タグなどの編集がすぐに行えます。

2～3秒見れば十分ですがPicasa3で作成した Demo Movie です。
写真と写真のつなぎの部分はいろいろな効果のなかから選択でき、最初のタイトル表示もいろいろなテンプレートがあります。

• Picasa フォトビューアで画像ファイルをプレビューする

これは Lightbox 風のフォトビュアーでなかなかいいと思います。

• 写真にテキストや透かしを追加する （透かしが簡単に入れられます）


アップロードする写真にとても簡単に透かし（クレジット）が入れられます。いままで手作業でやっていた方はきっと肩の荷が下りることでしょう。
メニューバーの[ ツール ] → [ オプション ] → [ ウェブアルバム]タブの一番下で設定
もちろんローカル（使っているPC）に保存するときにも透かしが入れられます。その場合は保存したい写真（透かしを入れたい写真）を選択し、ウィンドウ下にある [ エクスポート ]ボタンを押すと設定ウィンドウが開きますので、そのなかにある [透かしを追加] チェックボックスをオンにしテキストボックスに透かしのテキストを入力します。

• 顔が写っている写真のみ表示


Picasa3 の上部にあるフィルタ機能で、ボタンを押すと顔が写っている写真のみがソートされ表示されます。
試しにソートしてみたところ顔が写っていないものも含まれていたりするのですが(笑) きっと写真内のモノのレイアウトが 「顔」 に似ているんでしょうね。

などなど、機能満載でありました。
もちろんいままでこのブログでご紹介したHTMLテンプレートのエクスポートも問題なく使えます。

そうそう、なんでも Picasa ウェブ アルバムには「名前タグ」という新機能が加わり、ユーザーのフォトアルバムに写っているすべての人物を自動的に認識し、タグ付けしてくれるそうです。
はじめ何人かに名前を付けると、あとは候補に表示される名前から選ぶだけでタグ付け可能になるとのこと。同じ顔の写っている写真は自動でグループ化されるそうです。マジですか

背景を黒くしてサムネイルが 75×75 にトリミングされないものもアップしておきました。

Demo

これはサムネイルが実画像表示なのでカスタマイズしやすくなっています。

ファイルをダウンロードして解凍し生成されたフォルダごと Picasa のtemplates フォルダに入れて使います（他のHTMLテンプレートと一緒です）

Download

Picasaで Highslide JS v4 + Picasa Template を使って
HTMLページをエクスポートする際、
サムネイル画像の上にある説明文と拡大写真のコメントを編集する手順です。

説明文

Highslide JS v4 + Picasa Template の場合、説明文とはサムネイル画像の上にある文章です。

この部分に文章を入れるには

1. ライブラリに表示されているフォルダ一覧の中からエクスポートしたいフォルダ上で右クリックしてコンテキストメニューの一番上にある [フォルダ詳細を編集] をクリック

   

2. フォルダ プロパティの [説明] のテキストボックスに入力したものが説明文となります。

   

   なお、説明文中では<br /> （改行）や<a href=”◆◆”>●●</a> （リンク） などのタグも使えるようです。試しに
   <p style=”font-weight:bold;font-size:16px;”>16pxの太字</p>
   と入力したらちゃんと16pxの太字になりました。

3. 入力された文章は Picasa のサムネイル上部に表示されます。

   

拡大写真のキャプション

1. Picasa のサムネイル上でコメントを入れたい写真を選択してダブルクリック

   

2. 画像調整のウィンドウに変わるので下の赤枠の箇所にコメントを入力します。
   続けて他の写真のコメントを編集したい場合は上の赤枠のところにあるナビゲーションで移動します。

   

3. 入力したコメントをあとで編集し直すには右端にあるゴミ箱をクリックして一回削除し、その後もう一度入力しなおします。

   

4. ここで入力したコメントは拡大写真の左下に表示されます。

   

Highslide JS v4 を使った Picasa の HTMLテンプレート のインストール方法といくつかのカスタマイズ可能な箇所について簡単に説明しておきます。Demo

関連した投稿

• Highslide JS v4でPicasaテンプレートを作りました

注) Highslide JS v4 は個人での利用は無料ですが、商用で使う場合は有料となります。Highslide JS に関しては一度オフィシャルサイトを訪ねてみることをおすすめします。非常に丁寧に解説されていてシロウトの私でもどうにか理解できました。

Highslide JS : http://highslide.com/

ではさっそく。あっ、Picasa のインストールがお済みでない方は

• Picasa 2.7 : http://picasa.google.co.jp/

より、無料ダウロード可能です。

設置方法

1. Highslide JS v4 + Picasa Template をダウンロードします（zipファイル）
2. 解凍すると[ HighslideJS-Picasa ] というフォルダが生成されますのでそれを丸ごと Picasa2 のフォルダ内にある templates という名前のフォルダに移動します。
   templates フォルダにたどり着くには通常、ドライブC → Program Files → Picasa2 → web → templates です。
   
3. Picasa を起動すればすでにテンプレートは使える状態になっています。

HTMLページとしてエクスポート

1. Picasa でスライドショーとしてアップしたいフォルダを表示させます。

   

2. フォルダ一覧の選択したフォルダ上で右クリックして HTMLページとしてエクスポートをクリック

   

3. エクスポートするサイズ（拡大写真のサイズ）とフォルダ名を決めて [次へ]

   

4. テンプレートの中から Highslide JS v4 + Picasa Template を選択して [完了] ボタンを押す

   

5. 手順3 で指定した場所に、指定したフォルダ名でエクスポートされるのでそのフォルダを丸ごとサーバーへアップロードしてそのフォルダにリンクを貼る

   

   もちろんローカル（ご自身のPC）でスライドショーを見ることもできます。ぜひ、エクスポートされたフォルダ内にある index.html というファイルをクリックしてみてください。
   普段お使いのブラウザが立ち上がりHTMLスライドショーが手軽にたのしめると思います。

カスタマイズ

• スタイルシートはテンプレートフォルダ HighslideJS-Picasa → assets → scripts → highslide-for-picasa.css です。Highslide JS のスタイルシートもそこに含まれています。ページのレイアウトや背景色を変更する場合は highslide-for-picasa.css を編集します。

  拡大画像のキャプションの位置（デフォルトでは写真の外側に表示されていますが、写真の中に移動することも可能です）や縁取りを変更するには highslide-for-picasa.css の中の /* highslide JS css */ より下に記述されているスタイルシートを編集します。

• サムネイルは縦位置と横位置の写真が混在しても整然と並ぶように150×75（横）、もしくは75×150（縦）のサムネイル画像の中央部分を 75×75 のサイズで表示させています。

  サムネイル画像自体は背景画像として表示させてその上に 75×75 の透過 gif（透明な画像） を乗せたような状態になっています。したがって、サムネイル画像のサイズを変えるには highslide-for-picasa.css の編集と image-contents.html を編集、さらに変更したいサイズに合った透過 gif を作る必要があります。

  横だけの写真、縦だけの写真を載せるということであれば何もしなくても整然と並ぶのでサムネイルのサイズ変更は簡単です。

• Picasa がエクスポートしてくれるサムネイル画像のサイズを変更するには index.tpl というファイルの define thumbnailWidth 150、define thumbnailHeight 150 の数値を変更します。数値は長辺の最大値を指定しています。

  拡大画像の大きさも define imageHeight 数値、define imageWidth 数値、という記述を加えることで指定できますが、エクスポートする際サイズの変更がきかなくなります。
  ただし、エクスポートする際拡大写真のサイズは4種類ほどの決まったサイズ（1024、800、640、320）でしか加工できないので、たとえば 「絶対500px の写真が欲しい」 などという場合は記述してください。

• 最下段に私のサイトのリンクがありますが取っ払っていただいて構いません。テンプレートフォルダ HighslideJS-Picasa 内にある footer.html をテキストエディタ等で開き該当する箇所を削除してしまえば表示されません。
  Highslide JS へのリンクは無料で使わせていただいているお礼に残して置くべきでしょう。また、拡大写真左上に表示さる Powered by Highslide JS は無料で使用しているかぎり削除不可だと思います。

書き出していくとキリがないのでわからないことがありましたらコメントで質問してください。
私の「わかる範囲」というのは狭いのでお役に立てるかどうかはだいぶ謎です