他人のアカウントのサムネイルにハイパーリンクをつける方法

yamagenii 66views 更新:2015年3月19日

現在各ポートレットからメッセージにリンク出来る開発を行っていますが、 サムネイルの表示がある場合は

・サムネイル画像を持っているかどうか

・他ユーザかどうか

という4つの分岐です。 これをVelocityで綺麗に書いているコードを見つけたので紹介します.

<div class="avatar mr10">
#if(!$!result.isMatch($!{result.UserId} , $!{record2.OwnerId.Value}))<a href="javascript: void(0)" onclick="aipo.message.openDirect(${record2.OwnerId})">#end
#if(${record2.hasPhoto()})
<img src="http://hacknote.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="$!utils.escapeXML($jslink.getTemplate("FileuploadFacePhotoScreen").addQueryData("uid", ${record2.OwnerId}).addQueryData("t", ${record2.PhotoModified}))" alt="$!{record2.OwnerName}" width="32" height="32" /><noscript><img src="$!utils.escapeXML($jslink.getTemplate("FileuploadFacePhotoScreen").addQueryData("uid", ${record2.OwnerId}).addQueryData("t", ${record2.PhotoModified}))" alt="$!{record2.OwnerName}" width="32" height="32" /></noscript>
#else
<img src="http://hacknote.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="images/common/avatar_default3.png" alt="$!{record2.OwnerName}" width="32" height="32" /><noscript><img src="images/common/avatar_default3.png" alt="$!{record2.OwnerName}" width="32" height="32" /></noscript>
#end
#if(!$!result.isMatch($!{result.UserId} , $!{record2.OwnerId.Value}))</a>#end
</div>

書き直すと

<div>
#if(他人である)<a href>#end
#if(プロフィール写真を持つ)
<img>
#else
<img>
#end
#if(他人の条件)</a>#end
</div>

といった形になります

リンクのタグであるをそれぞれifの中にいれるという手法です 一番わかりやすくてシンプルだと思いました. 結構一般的なのでしょうか・・・

綺麗に書かれたコードは開発効率に関わるので重要です. 自分も綺麗で読みやすいコードを書けるように心がけます


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

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

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