あまなつ日記

前回のエントリー「Amazon商品画像を新しいものに切り替え中」で書いたように、あまなつのサービスで提供しているAmazonの商品画像を新しいものに切り替え中ですが、Adhoverを対応しました。

こんなやつです。
DEVICE クロスロード 口折れショルダー/カーキ(LCS-76033KH)

あと、
AmanatuAdassist
Adparts
Adslide
Selectあまなつ
以上のサービスが２００８年３月１６日現在、未対応です。

ECS3.0使っていない確認も含めて３／末までには終わらせたいところです。

Amazonで商品を見ていると商品の中には商品画像の下に「その他のイメージを見る」ってリンクがあり、違うアングルからだったり商品を説明するための画像が用意されているものがあります。
例えば
今度新しくなったiPod shuffle

Apple iPod shuffle 1GB MA564J/A

Amazonは同じ商品画像でもいろんな指定の仕方が出来るんですが
例えば
http://images-jp.amazon.com/images/P/B000FSBJO8.09.MZZZZZZZ.jpg

ってのが標準の画像だとすると
http://images-jp.amazon.com/images/P/B000FSBJO8.09.PT01.MZZZZZZZ.jpgと赤字の部分を追加すると他の画像が出てきます。
こんな感じ

PT01をPT02にすればまた違う画像が出ます。

そんなことでこの”その他のイメージを見る”の画像を使ってみようってことで
Adhover,Adparts,Adslideの3種類で利用できるようにしてみました。

”その他のイメージを見る”の画像のある商品の場合、作成ページに「●他の画像を利用する(画像クリックで選択)」の表示とその画像が表示されますので画像をクリックすることでその画像を選択することが出来ます。
再生時間だけが問題で。

ここまで、無駄なものをそぎおとしたデザインへ進めていったAppleはさすがだと思う。他のメーカーのmp3プレーヤーは、一見格好良さそうだが、ありゃダメだ。洗練されてない。飽きがはやい。今回のshuffleは、さすがに無印良品っぽいなあ、とは思ってしまうが、それ以上に、このコンパクトさと使用時に予想される軽快さには、驚いた。アルミ外装なので、PowerBookやbookProやminiを、メインとして使っている人ならなおさら気に入ると思う。清潔感を打ち出してきたホワイト色のラインナップに飽きてきたところで、この商品展開は、潔くて好ましいと思う。このような、次なにをやってくれるのか、といった期待感を常にAppleは与えてほしいと思う。そういった流れで、このshuffleには、ひどく驚いたし、勢いで予約してしまった。いままでmp3プレーヤーを買う切っ掛けはなかったけれど、こういうのもありだと思った。あとは、実物が期待以上の結果を生み出してくれれば、なおのこと良いのだけれど。Apple iPod shuffle 1GB MA564J/A←マウスを乗せると画像が表示されます。
ここから↑の作成ページへ行けます

いろいろと試してみてください。

テキストリンクにマウスを乗せると商品画像、ユーザーレビューを表示させることの出来るAdhoverの作成ページに商品情報を記載するようにしました。

右下に表示されますので、ユーザーレビューを選ぶ際の参考にそしてブログで商品を紹介する際の情報としてご利用ください。
ここで紹介している商品は、綾瀬はるかさんの価格:
純粋な女の子が好きです！

綾瀬はるかさんには金曜ドラマ「世界の中心で愛をさけぶ」のヒロイン役を見てからファンになりました。今度ＫＡＴ?ＴＵＮの亀梨和也さんと北川悦吏子さん脚本の純愛物のドラマをやるそうですが、とても楽しみです。さて、この曲の印象はといえば、綾瀬はるかさんの伸びのある声と歌詞、メロディを含めとても気に入りました。私は個人的にはＧＡＭの曲よりも綾瀬さんのセカンドシングル「交差点days」の方が現実味があって、日常の出来事に歌詞を乗せて、メロディもGoodなので、おすすめだと思います。交差点days(初回限定盤)(DVD付)です。前回のデビュー曲価格:
切なく爽やかな曲と声とがマッチ

小林武史さんらしい、ゆったりしたミディアムテンポのメロディーと綾瀬さんの透明感あふれる声がとても合っています。詩の方も持田香織さんと聞いて『あ、なるほど…』という感じです。どこかMY LITTLE LOVERの作品を思わせるような、優しく懐かしい雰囲気。恋の終わりの歌ですが、切なくも爽やかで前向きな感じが彼女に合っています。綾瀬さんは女優さんとしても素敵な方ですが、素直な歌い方にまた好感もちました。ピリオド(初回限定盤)(DVD付)とともにとっても素敵な曲ですね。

最近、ちょこちょこ使って頂いておりますAdhoverですが、新しくユーザーレビューも表示出来るように機能を追加しました。

今までのAdhoverはこんな感じです。
最近ちょっとほしいなぁと思ってるNational 乗馬フィットネス機器 ジョーバ 青 EU6441-Aです。テキストのリンクのところにマウスを乗せると画像が表示されます。

これが今度は、価格:
女性ライダーのヒップラインが美しい秘密

乗馬は詳しく有りませんが、バイクに乗る方にはピンとくると思います。この前後左右に動くシートに載っているには太腿でシートを挟みこんでいる必要があります。つまりライディングフォーム。安全装置が働いて15分で切れてしまいますが、鈴鹿4時間耐久トレーニングと思って続ければプロの女性ライダーのような引き締まったヒップラインになるのはまちがいないでしょう。取っ手は安全のためあったほうが安心かなとも思いましたが慣れれば必要ないです。あえて要望を言えば走っている気分を演出するため、もう少し前方にももう一つハンドルがあるとうれしいです。National 乗馬フィットネス機器 ジョーバ 黒 EU6442-Kのテキストリンクの上にマウスを乗せて下さい。レビューが表示されると思います。

こんな感じで、マウスを乗せるとAmanatuAdassistの表示が出てくるような感じです。とりあえず今はユーザーレビューのみですが他の情報も表示出来るようにしようかと考えています。

よろしければ使ってみてください。

スタイルシートの設定だけでテキストリンクにマウスを乗せると画像が表示されるAdhoverに画像のサイズを選択できる機能を追加しました。
小、中、大を選択出来ます。

他に、
商品名の前の小さな画像サイズの設定を入力だけではなくボタンで設定できるように改良
[表示なし]：サイズを０にして表示しないようにする。
[標準]：初期値１２ｐｘにする。
[↓]：１ｐｘ小さくする
[↑]：１ｐｘ大きくする

輸入画像も選択出来るようにしました。チェックすると　.09.MZZZZZZZ.jpgが.01.MZZZZZZZ.jpg になります。

「らくらくまねっこサービス」（命名：”ブログパーツを探せ”様）を追加しました。
テキスト最後のあまなつ画像をクリックすると、その表示と同じリンクが作成出来ます。
SONY VAIO typeF light FJ11ホワイト(C-M370, 512MB, 60GB, 14

Adhoverで価格表示を選択した場合に表示される価格の画像を白ふち付きの透過画像に変更しました。

こんな感じ（リンクにマウスを乗せてみて下さい。画像と価格が表示されます。）
Apple iTunes Music プリペイドカード 5,000円 [MA164J/A]

今まではこんな感じ
Apple iTunes Music プリペイドカード 5,000円 [MA164J/A]

う～ん、画像によっては見にくくなったかも^^;

Adhoverで画像に価格を表示出来るようにしました。

Adhover作成ページで価格の表示にチェックを入れると
テキストリンクにマウスを乗せた時に表示される画像の左上に価格が表示されます。

これはAmanatuAdassistと同じ価格表示機能でリアルタイムに画像で価格を表示しています。（若干キャッシュしてますが・・・）
価格表示には色で意味が変わります。
赤は在庫あり、黒は在庫なしです
「AmanatuAdassistの価格表示の仕様変更」に説明があります。

表示例
価格有りの場合榮倉奈々写真集 「free」
価格なしの場合榮倉奈々写真集 「free」

2006.3.21追記
価格ありの価格画像を白ふち付きの透過に変更しました。

以前からテキストでAmazonの商品を紹介するようにもしたいなぁと考えてまして、文中に「商品名」や「ある言葉」でAmazonの商品へリンクできる形がほしいなぁと

まぁ、Apple iTunes Music プリペイドカードみたいな感じで

ただ、やっぱりこれだとちょっと淋しくて、これじゃ商品は売れないかなぁとか考えて
で、やっぱり小さい画像だけでも商品の前に付けるか方がいいかなって
Apple iTunes Music プリペイドカードてな感じで考えてみたんですが
やっぱインパクトがない！

やっぱり色々考えて画像がポップアップするような形式がいいかなぁと思って色々調べてたんですが
例えば、音ログなんかは　あれこれポップアップを使ってかっこよく作られています。
スタイルシートとjavascriptをダウンロードして自分とこのサーバースペースにアップしてリンクすれば簡単に出来るんですが、
自分とこだけで使うのにはとってもかっこよくていいんですが、やっぱり「あまなつ」のサービスとしてなんとか似たようなことが出来ないかと考えると、そのまま利用するわけにもいかないし中身見ると結構複雑だしｗ

もっとシンプルな感じでできないものかとまた、色々調べていると
Lucky bag::blog: CSS で画像ポップアップ・・・
いい情報を見つけました。
javascriptを使わずにスタイルシートだけで出来るシンプルなポップアップ

ここを見てると

最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。

最初に1×1に画像を小さくしておいて、a:hoverを使いリンクにマウスが乗ると画像サイズが大きくなるようにスタイルシートを設定してある。

これを参考に色々試行錯誤をして、Amazonの画像がポップアップするようにしてみました。
こんな感じで
Apple iTunes Music プリペイドカード 2,500円 [MA163J/A]

hoverでポップアップするってことで、adhoverって名前で簡単にリンクが作成出来るようにはじめます。
まだ、ちょこちょこ調整が入ると思いますがよければ使ってみてください。

スタイルシートを利用したポップアップなので利用するには
スタイルを指定する必要があります。
htmlファイルに直接指定するなら、<head>・・・ </head>の間に下記内容を追加して下さい。
<style type=”text/css”>
<!–
.img_adhover{top:-5000px; left:-5000px;position:absolute;}
a.a_adhover:hover {background-color:#FFFFFF;z-index:1000;position:relative;}
a.a_adhover:hover .img_adhover{top:16px; left:0px;}
–>
</style>

また、スタイルシートに追加するなら、（例えばstyle.css）
.img_adhover{top:-5000px; left:-5000px;position:absolute;}
a.a_adhover:hover {background-color:#FFFFFF;z-index:1000;position:relative;}
a.a_adhover:hover .img_adhover{top:16px; left:0px;}
を付け加えて下さい。

あとはAdhoverのページで出力されるタグを貼り付ければOKです。

2006.2.15追記
　a.a_adhover:hover のbackground-color:#FFFFFF;は必要ないようです。