コンテンツ クエリ Web パーツ (3.更新日時と本文を取得する)
コンテンツ クエリ Web パーツ (5.表示部分を整える)

コンテンツ クエリ Web パーツ (4.本文から不要なタグを削除する)

前回は更新日時と本文のデータを取得しましたが、本文は HTML タグのエスケープ処理のために表示される内容に HTML タグがそのまま残ってしまっています。今回はこのマークアップタグを削除するよう変更します。

[今回の目標画面]
Removehtmltags

作業内容

  1. ItemStyle.xsl に "<" から ">" までのタグを取り除く処理を追加する

不要なタグ表示を取り除く

  1. SharePoint Designer 2007 を起動し、コンテンツ Web パーツを追加したサイトを開きます。
  2. [フォルダ一覧]から[Style Library (スタイル ライブラリ)] - [XSL Style Sheets] を展開し、ItemStyle.xsl を右クリックし、チェックアウトします。
  3. ItemStyle.xsl をダブルクリックします。
  4. コード内の一番最後の"</xsl:template>タグの直後に次のようなテンプレートを記述します。このテンプレートが "<" から ">" までを再帰的に削除するコードになっています。

    <!--不要なタグを取り除く-->
    <xsl:template name="removeMarkup">
      <xsl:param name="string" />
      <xsl:choose>
       <xsl:when test="contains($string, '&lt;')">
        <xsl:variable name="nextString">                                    
        <xsl:call-template name="removeMarkup">
                        <xsl:with-param name="string" select="substring-after($string, '&gt;')" />
        </xsl:call-template>
                 </xsl:variable>
        <xsl:value-of select="concat(substring-before($string, '&lt;'), $nextString)" />
       </xsl:when>
       <xsl:otherwise>
        <xsl:value-of select="$string" />
       </xsl:otherwise>
      </xsl:choose>
    </xsl:template>
  5. "すべてのお知らせ用スタイル" テンプレート内で本文を取得する次のコードを探します。

    <div class="description">
                        <xsl:value-of select="@Body" />
    </div>
  6. 以下のように追記および変更します。

    <xsl:variable name="bodyContent">
    <xsl:call-template name="removeMarkup">
    <xsl:with-param name="string" select="@Body"/>
    </xsl:call-template>
    </xsl:variable>

        <div class="description">
        <xsl:value-of select="$bodyContent"/>
        </div>
  7. ItemStyle.xsl を上書き保存し、マイナーバージョンとしてチェックインします。

IE で再びコンテンツ クエリ Web パーツを表示してみると次のように不要なタグが取り除かれたことが確認できるはずです。

次回は、 本文から30文字分のみを表示し、New ! のアイコンを表示するように変更します。

コメント

コメントの確認

コメントのプレビュー

プレビュー中です。コメントはまだ投稿されていません。

処理中...
コメントを投稿できませんでした。エラー:
コメントを投稿しました。コメントは記事の投稿者が承認してから表示されます。 さらにコメントを投稿する

入力された文字と数字は画像と一致していません。再度入力してください。

最後に、下の画像の中に見える文字と数字を入力してください。これはプログラムを使ってコメントを自動的に投稿するのを防ぐために行われています。

画像を読み取れない場合は 別の画像を表示してください。

処理中...

コメントを投稿

コメントは記事の投稿者が承認してから表示されます。

アカウント情報

(名前とメールアドレスは必須です。メールアドレスは公開されません。)