WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

W3C 検証にパスしない

by WebSurfer 2011年6月13日 22:58

ページングする際に &page=n(n はページ番号)というクエリ文字列がページャーのリンクの URL に追加 される場合があります。しかしながら、& のままでは W3C Markup Validation に通りません。HTML エンコー ドして & にする必要があります。この問題には今まで気がつきませんでした。(汗)

この問題を解決するには、User controls/PostList.ascx.cs の InitPaging メソッドを以下のように修正しま す。

private void InitPaging()
{
  string path = Request.RawUrl;

  if (!(Request.QueryString["year"] != null || 
    Request.QueryString["date"] != null))
    path = REMOVE_DEFAULT_ASPX.Replace(path, string.Empty);

  if (path.Contains("?"))
  {
    if (path.Contains("page="))
    {
      int index = path.IndexOf("page=");
      path = path.Substring(0, index);
    }
    else
    {
      path += "&";
    }
  }
  else
  {
    path += "?";
  }

  int page = GetPageIndex();
  string url = path + "page={0}";

  // 下記の追加のみ
  url = url.Replace("&", "&");

  hlNext.HRef = string.Format(url, page);		
  hlPrev.HRef = string.Format(url, page + 2);

  if (page == 0)
  {
    hlNext.Visible = false;
  }
  else
  {
    (Page as BlogBasePage).AddGenericLink(
      "next", 
      "Next page", 
      hlNext.HRef);
    Page.Title += " - Page " + (page + 1);
  }

  if (hlPrev.Visible)
    (Page as BlogBasePage).AddGenericLink(
      "prev", 
      "Previous page", 
      string.Format(url, page + 2));
}

Tags:

BlogEngine.NET

BlogEngine.NET 2.0 の導入

by WebSurfer 2011年6月11日 15:49

今年の 1 月にリリースされた BlogEngine.NET バージョン 2.0 を導入しました。

BlogEngine.NET 2.0 の導入

と言っても、既存のバージョン 1.6.1 のブログ(ここがそれです)をアップグレードしたわけではなく、ここは 1.6.1 のまま残しておいて、BlogEngine2 という名前の別アプリケーションとして構築しました。

まだ試験段階ですので、試験のための記事しかありませんし、スタイルもデフォルトのままですが、以下の URL から入れます。

http://surferonwww.info/BlogEngine2/default.aspx

今回は、、データストアとして、今まで使っていなかった MySQL を使うことにしました(現在のホスティングサービスでは SQL Server と MySQL がそれぞれ 300MB ずつ使えます)。ちなみに、既存のブログ(ここ)は SQL Server を使用しています。

Forms 認証にはサイト内で共通の SQL Server を利用した SqlMembershipProvider, SqlRoleProvider を使って、サイト内でアプリケーション間を移動するとき再認証を受けなくても済むようにしました。

とりあえず見つけた問題はすべて解決できましたので、どのような問題があったのか、どう解決したのかを備忘録として書いておきます。

データベース構築の問題

BlogEngine.NET/setup/MySQL フォルダの中にデータベースを構築するためのスクリプトファイルが用意されており、これを走らせて必要なテーブルを生成します。このスクリプトは各テーブルを DEFAULT CHARSET=latin1 で作るように指定しています。(latin1 が MySQL のデフォルトらしい)。

一方、MySQL 全体とデータベースのキャラクターセットはすべて UTF-8 で設定しており、その状態で日本語を使うと、Incorrect string value というエラーが出て投稿できませんでした。

結局 latin1 で作ったデータベースはドロップして、スクリプトの DEFAULT CHARSET=latin1 を utf8 に書き換えてテーブルを作り直して解決しました。

バージョン 1.6.1 の諸問題

以下の致命的な問題(詳細はリンク先の記事を参照ください)はすべて解消されていました。(1) については Encoding.Default が Encoding.UTF8 に変更されていました。(2), (3) は大幅にコードが書き換えられており、1.6.1 で問題だったコードは見つからず、実際に試して不具合は出ませんでした。

(1) 日本語の文字化け

(2) SyntaxHighlighter のコードの間違い

(3) reCaptcha のコードの間違い

以下は見栄えなどの軽微な問題です。1.6.1 の場合と同様な修正が必要でした。問題の詳細および修正方法はリンク先の記事を参照ください。

(4) 各記事の左上の日付の表示が 31. 5月 2010 12:15 のようになる

(5) Search の結果、タイトルの表示が「の検索結果 'XXXX'」となる

(6) 「関連するブログ」でテキストの折り返しがされない

(7) ウィジェットのカレンダーが月曜日から始まっている

(8) タイトルが 5月 31. 2011 のように表示される

以下の問題は 1.6.1 の場合(詳細はリンク先の記事を参照ください)より悪化していました。詳細は CodePlex の Discussions のページにアップしました。まだ検証中ですので、サーバーには修正済みファイルはアップしていません。検証が終わって修正版をサーバーにアップしたら、詳しい話を書きます。

(9) Tag cloud 中の日本語の Tag の問題

最後に、以下の問題は、SyntaxHighlighter のバージョンが変わったためか、解消されていました。

(10) SyntaxHighlighter とフラグメント識別子

------------ 2011/6/14 追記 ------------

上の (9) で書いた日本語の Tag の問題の解決策は BlogEngine.NET 2.0 の Tag cloud の問題 に詳細を書きました。興味がありましたらそちらを参照ください。

Tags:

BlogEngine.NET

Lightbox Plugin

by WebSurfer 2011年2月20日 18:21

jQuery 版の Lightbox plugin を実装してみました。以下の画像はダウンロードしたサンプルに含まれていたもので、サンプルと同様に、次の画像、前の画像を連続して表示できます。

gallery という id を持つ div タグの中に、a タグで囲った img 要素を 5 個並べて表示しています。jQuery のセレクタ $('#gallery a') で gallery の中にある a タグを探し、それに対して lightBox() というスクリプトで href 属性に指定した画像ファイルを Lightbox 中に表示するようにしています。


湘南

左の画像は、上の gallery という id を持つ div タグの外にあり、単独で表示される(上の画像と連続して表示されない)ようにしたものです。

a タグで rel="lightbox"(任意で可)として、$('a[rel^=lightbox]') という属性セレクタで rel 要素に lightbox という文字列を含む a タグを探し、それに対して lightBox() というスクリプトで href 属性に指定した画像ファイルを Lightbox 中に表示するようにしています。

BlogEngine.NET へのスクリプトファイルと css ファイルの指定の追加は、以下の Extension を用いました。マスターページに直接書き込む方が簡単ですが、その場合はすべてのテーマのマスターページに書かなければならず、スマートではないので。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BlogEngine.Core.Web.Controls;
using BlogEngine.Core;
using System.Web.UI.HtmlControls;

[Extension("Enable jQuery Lightbox plugin 0.5", 
"1.0", 
"<a target=\"_blank\" href=\"http://surferonwww.info/Default.aspx\">WebSurfer</a>")]
public class Lightbox
{
  private string extensionName = "LightboxPlugin";
  private static string scriptsFolder = "Scripts";
  private static string jQueryFilename = "jquery-1.4.1.min.js";
  private static string lightboxScriptFilename = 
    "jquery.lightbox-0.5.pack.js";
  private static string stylesFolder = "css";
  private static string cssFilename = "jquery.lightbox-0.5.css";
    
  public Lightbox()
  {
    BlogEngine.Core.Post.Serving += 
      new EventHandler<ServingEventArgs>(EnableLightbox);
  }

  private void EnableLightbox(object sender, ServingEventArgs e)
  {
    HttpContext context = HttpContext.Current;
    if (context.CurrentHandler is System.Web.UI.Page)
    {
      if (context.Items[extensionName] == null)
      {
        System.Web.UI.Page page = 
          (System.Web.UI.Page)context.CurrentHandler;

        page.Header.Controls.Add(JavaScriptInclude(scriptsFolder + 
          "/" + jQueryFilename));
        page.Header.Controls.Add(JavaScriptInclude(scriptsFolder + 
          "/" + lightboxScriptFilename));

        HtmlLink lightboxCss = new HtmlLink();
        lightboxCss.Attributes["type"] = "text/css";
        lightboxCss.Attributes["rel"] = "stylesheet";
        lightboxCss.Attributes["href"] = 
          Utils.RelativeWebRoot + stylesFolder + "/" + cssFilename;
        page.Header.Controls.Add(lightboxCss);

        context.Items[extensionName] = 1;
      }
    }
  }

  #region Private helper methods

  private HtmlGenericControl JavaScriptInclude(string url)
  {
    HtmlGenericControl script = new HtmlGenericControl("script");
    script.Attributes["type"] = "text/javascript";
    script.Attributes["src"] = ResolveScriptUrl(url);
    return script;
  }

  private string ResolveScriptUrl(string url)
  {
    return Utils.RelativeWebRoot + "js.axd?path=" 
      + Utils.RelativeWebRoot + url; 
  }

  #endregion
}

jQuery のスクリプトは、ブログの中に直接書き込んでいます。今回の場合は以下の通りです。なぜかと言えば、今回の例で使った gallery や lightbox という名前を、ブログの記事を書くときに自由に指定したかったからです。

<script type="text/javascript">
//<![CDATA[
$(function () {
  $('#gallery a').lightBox({
    imageLoading: '/BlogEngine/Images/lightbox-ico-loading.gif',
    imageBtnClose: '/BlogEngine/Images/lightbox-btn-close.gif',
    imageBtnPrev: '/BlogEngine/Images/lightbox-btn-prev.gif',
    imageBtnNext: '/BlogEngine/Images/lightbox-btn-next.gif',
    imageBlank: '/BlogEngine/Images/lightbox-blank.gif'
  });
  $('a[rel^=lightbox]').lightBox({
    imageLoading: '/BlogEngine/Images/lightbox-ico-loading.gif',
    imageBtnClose: '/BlogEngine/Images/lightbox-btn-close.gif',
    imageBtnPrev: '/BlogEngine/Images/lightbox-btn-prev.gif',
    imageBtnNext: '/BlogEngine/Images/lightbox-btn-next.gif',
    imageBlank: '/BlogEngine/Images/lightbox-blank.gif'
  }); 
});
//]]>
</script>

Tags: ,

BlogEngine.NET

About this blog

2010年5月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。

Calendar

<<  2024年4月  >>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

View posts in large calendar