SharePointのアンケートで画像や書式、ハイパーリンクを利用する
SharePointの「アンケート」リストはお世辞にも使いやすいとは言えません。しかし、最低限の機能は備えていますし、SharePointのアクセス権コントロールやユーザ管理機能が利用でき、GUIからエンドユーザでもデザイン可能。そしてなにより追加コストゼロで利用できることを考えると、それなりに「使える」機能でもあります。
とはいえ、設問に利用できるのはテキストと改行のみ、という制限は実用面でやはり厳しい。例えば「商品画像を見て感想を答える」「資料を見て意見を述べる」といったおそらく典型的なアンケートには不向きです。そこで、Javascriptを使い、簡単なマークアップを実装してみました。
これが通常のアンケート。URLもテキストとして表示されます。
こちらがJavascriptを仕込んだアンケート(のスクリプト実行前)
スクリプトが実行されるとこうなります。(本来は画面を開くと同時に実行されるためユーザには判りません)
理屈はとてもシンプルで、Javascriptの正規表現で特定の記号に挟まれたURLを、HTMLのタグで置換しているだだけです。この例では =○○○= :パイパーリンク、-○○○- :画像、+○○○+ :リンクつき画像、#○○○#:やや強調、%○○○% :強調、になっています。
以下、サンプルスクリプトです。NewForm.aspx、EditForm.aspx、DispForm.aspx それぞれをDesignerで編集するか、コンテンツエディタWebパーツを挿入してこのソースを貼り付ければ動作します。ただしie8でしか動作確認していません。それ以外のブラウザの場合、スクリプトを若干修正する必要があると思います。
[code]
<style>
.ms-formlabel{font-weight:normal;}
H3.ms-standardheader{font-weight:normal;}
.spr01{font-size:1.3em;color:crimson;}
.spr02{font-size:1.6em;color:crimson;}
.SPDispForm{width:150px;overflow:hidden;}
</style>
<script type="text/javascript>
_spBodyOnLoadFunctionNames.push(‘SPReplaceSymbols’);
function SPReplaceSymbols()
{
alert(‘go’);
var arr_TD = document.getElementsByTagName(‘TD’);
for (t=0 ; t < arr_TD.length ; t++)
{
var SPclassname = arr_TD[t].getAttribute(‘classname’);
if (SPclassname == ‘ms-formlabel’)
{
var str_original = arr_TD[t].innerHTML;
//置換01 =xxxx=をハイパーリンクに
var str_mod = str_original.replace(/=(http:\/\/[\x21-\x7e]+)=/gi, ‘<a href="$1" target="_blank">$1</a>’);
//置換02 -xxxx-を画像に
var str_mod = str_mod.replace(/-(http:\/\/[\x21-\x7e]+)\-/gi, ‘<img src="$1" alt="">’);
//置換03 +xxxx+を画像+ハイパーリンクに
var str_mod = str_mod.replace(/\+(http:\/\/[\x21-\x7e]+)\+/gi, ‘<a href="$1" target="_blank"><img src="$1" alt="" border="0"></a>’);
//置換04 #xxxx#を強調表示に
var str_mod = str_mod.replace(/#(.*)#/gi, ‘<span class="spr01">$1</span>’);
//置換05 %xxxx%をとても強調表示に
var str_mod = str_mod.replace(/%(.*)%/gi, ‘<span class="spr02">$1</span>’);
//表示フォームの場合、divで挟む
if( location.pathname.match( /DispForm\.aspx/ ) != null)
{str_mod = ‘<div class="SPDispForm">’ + str_mod + ‘</div>';}
arr_TD[t].innerHTML = str_mod;
}
}
}
</script>
[/code]
また、実用面では、スクリプトはjsファイル、スタイルはcssファイルとして外部化し、どのアンケートリストも一箇所から呼び出すようにしたほうが、運用上良いでしょう。この場合、フォームに仕込むのは以下のような二行だけで済みます(※あくまで例です。実際にはURLを変更する必要があります)。
[code]
<link rel="stylesheet" type="text/css" href="http://server/sites/subsite/docs/replacesymbols.css"/>
<script type="text/javascript" src="http://server/sites/subsite/docs/replacesymbols.js"></script>
[/code]
こちらがサンプルファイルです:replacesymbols
login