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

アンケートの回答数と出力結果が乖離する


Author

中村 和彦(シンプレッソ・コンサルティング株式会社 代表)が「ユーザ視点の SharePoint 情報」を発信します。元大手製造業 SharePoint 運用担当。現SharePoint コンサルタント。お仕事のお問い合わせはこちらまでお願いします。当ブログにおける発信内容は個人に帰属し所属組織の公式発信/見解ではありません。
Twitter : @saruhiko
FB : 中村 和彦
MS MVP SharePoint 2009/10-2011/9
MS MVP Office 365 2012/10-

FaceBook Activity