サムネイルを詳細画面に表示する

reotogashi 112views 更新:2014年12月25日

サムネイル

http://capture.heartrails.com/free?

の「?」の後ろに自分が入力使いたいURLを入力する。

例えば、Facebookなら

http://capture.heartrails.com/free?https://ja-jp.facebook.com/

という具合である。

つまり、サムネイルを表示したい場合。

http://capture.heartrails.com/free?+(URL)

である。

このURLの部分を変数として、書いてあげればよい。

詳細画面なので、ajax-test-detail.vmにて

2日目の課題で

#ALtdcaption("URL")

と追加したように、

#ALtdcaption("サムネイル")

と入力する。ここで、

TestResultData.javaを見てみると、

public String getUrl() {
return ALEipUtils.getMessageList(url.getValue());
}

しかし、貼り付け用タグを見ればわかるが、下の「https://ja-jp.facebook.com/%22%3E%3Cimg」を変数としたい。

<a href="https://ja-jp.facebook.com/"        onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://ja-jp.facebook.com']);"><img title="Facebook - フェイスブック - ログイン (日本語)" src="http://hacknote.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://capture.heartrails.com/free?https://ja-jp.facebook.com/" alt="https://ja-jp.facebook.com/" width="200" height="300" /><noscript><img title="Facebook - フェイスブック - ログイン (日本語)" src="http://capture.heartrails.com/free?https://ja-jp.facebook.com/" alt="https://ja-jp.facebook.com/" width="200" height="300" /></noscript></a>

ここで、「」の部分を

<td><a href="$!result.Detail.Url"><img title="$!result.Detail.Url" src="http://hacknote.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif"        data-lazy-src="http://capture.heartrails.com/free?$!result.Detail.Url"  alt="$!result.Detail.Url" width="200" height="100" /><noscript><img title="$!result.Detail.Url" src="http://capture.heartrails.com/free?$!result.Detail.Url"  alt="$!result.Detail.Url" width="200" height="100" /></noscript></a></td>
</tr>

のように書いても、ダメ。

これだと、「$!result.Detail.Url」はリンク付きのURLとなってしまう。

そこで、

TestResultData.javaで

public String getUrl() {
return url.getValue();
}

public String getUrlHtml() {
return ALEipUtils.getMessageList(url.getValue());
}

のように、リンク有りで返すメソッドと無しで返すメソッドに分け、

ajax-test-detail.vmにて

#ALtdcaption("URL")
#ALtditem($!result.Detail.UrlHtml)
#ALtdcaption("サムネイル")
<td><a href="$!result.Detail.Url"><img title="$!result.Detail.Url" src="http://hacknote.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif"        data-lazy-src="http://capture.heartrails.com/free?$!result.Detail.Url"  alt="$!result.Detail.Url" width="200" height="100" /><noscript><img title="$!result.Detail.Url" src="http://capture.heartrails.com/free?$!result.Detail.Url"  alt="$!result.Detail.Url" width="200" height="100" /></noscript></a></td>
</tr>

とすることで、「URL」では、リンク有りのURLを、

「サムネイル」ではリンク無しのURLを取得できる。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません