Blogengine.net 1.6で、できるだけ携帯に対応してみる

Blogengine.netには、Mobileでアクセスした場合、設定でMobile用のテーマで表示できるようにありますが、悲しいかな、Windows Mobileなどのスマートフォン向けなんですよねぇ。

これは、Blogengine.netというよりも、ASP.NET自体でして・・・
日本のガラパゴス携帯ですと、携帯として認識せず、そのまま表示しようとして撃沈します(号泣

IIS6.0だからかもしれませんし、.Net Frameworkのバージョン(たぶんこれ?)によるかもしれませんけどね。
もし、現状で普通に携帯から表示できてるのであれば、こんなことをする必要は全くありませんよ~

できるだけ、ガラパゴス携帯でも表示できるようにするためにいじってみようと思います。

尚、ぶりちゃんの携帯はT-01Aです。スマートフォンなので、実機でのチェックはできません(こら
iモードシミュレータII Ver.8.4のみでの検証です。

すべて対応というのは、かなりの変更が必要そうですので、今回は以下の点に絞ります。

  • 携帯からアクセスした場合に、Mobile設定で指定したテーマで正常に表示できるようにする
  • JavaScript非対応携帯で、スクリプトが見えないようにする

今回対象としないのは、サイズを小さくする対応(画像も含みます)
また、ここで使用しているSyntaxHighlighterなどのソース表示も通常のHTMLとして表示となります(JavaScriptが使えませんので)

また、今回の修正は、Blogengine.net 1.6.0.1で、かつ、ソースコードを使用します。
VisualStudioでビルドする必要があることにご注意ください。

まず、Mobile設定で指定したテーマで正常に表示できるようにするには、ASP.NETのエンジンがガラケーのUser Agentを認識し、Mobile機種だと判定できればOKです。
以前は、DeviceProfile Updateとして配布されていましたが、現在は、Microsoftのオープンソースプロジェクトサイト、Codeplexに登録されています~

CodePlex - Mobile Device Browser File

これは、Mono上でも動くのでとっても重宝してますねぇ。

さて、ここから最新のソースコードを取得、解凍した中にmobile.browserファイルが存在します。

このファイルを特定の場所にコピーするだけで解決できます。

場所は、Blogengine.net/App_Browsers/Devices/になります。
デフォルトではフォルダはありませんので、Visual Studio上で、新規作成-ASP.NETフォルダでApp_Browserを追加し、その下にDevicesフォルダを作り、mobile.browserファイルを入れます。

つぎに、JavaScript非対応携帯でスクリプトを見えなくする・・・ですが、BlogEngine.net 1.6.0.1のシステム上で1か所、スクリプトが表示されてしまう箇所がありました。
(これはNet Frameworkランタイムバージョンにより、もしかするとちがうかもしれませn)

BlogEngine.Coreプロジェクト内の

Web/Controls/BlogBasePage.csファイルの120行目あたりのAddLocalizationKeys()メソッドです。

ClientScriptManager.RegisterStartupScriptメソッドでスクリプト開始終了タグを自動出力する第4パラメータtrueですと、出力時のタグのコメント指定が//のみとなっているようです。
これですと、コメントと認識しない携帯がありますのでここをどうにかします。

以下、変更後のコード(抜粋)です。変更(追加)箇所は反転表示にしています。(携帯表示では・・・ごめんなさい)

		/// <summary>
		/// Adds the localization keys to JavaScript for use globally.
		/// </summary>
		protected virtual void AddLocalizationKeys()
		{
			StringBuilder sb = new StringBuilder();
            sb.Append("<script type=\"text/javascript\">\n<!--//");
			sb.Append("function registerVariables(){");
			sb.AppendFormat("BlogEngine.webRoot='{0}';", Utils.RelativeWebRoot);
			sb.AppendFormat("BlogEngine.i18n.hasRated='{0}';", Utils.Translate("youAlreadyRated").Replace("'", "\\'"));			
			sb.AppendFormat("BlogEngine.i18n.savingTheComment='{0}';", Utils.Translate("savingTheComment").Replace("'", "\\'"));
			sb.AppendFormat("BlogEngine.i18n.comments='{0}';", Utils.Translate("comments").Replace("'", "\\'"));
			sb.AppendFormat("BlogEngine.i18n.commentWasSaved='{0}';", Utils.Translate("commentWasSaved").Replace("'", "\\'"));
			sb.AppendFormat("BlogEngine.i18n.commentWaitingModeration='{0}';", Utils.Translate("commentWaitingModeration").Replace("'", "\\'"));
			sb.AppendFormat("BlogEngine.i18n.cancel='{0}';", Utils.Translate("cancel").Replace("'", "\\'"));
			sb.AppendFormat("BlogEngine.i18n.filter='{0}';", Utils.Translate("filter").Replace("'", "\\'"));
			sb.AppendFormat("BlogEngine.i18n.apmlDescription='{0}';", Utils.Translate("filterByApmlDescription").Replace("'", "\\'"));
            sb.AppendFormat("BlogEngine.i18n.beTheFirstToRate='{0}';", Utils.Translate("beTheFirstToRate").Replace("'", "\\'"));
            sb.AppendFormat("BlogEngine.i18n.currentlyRated='{0}';", Utils.Translate("currentlyRated").Replace("'", "\\'"));
            sb.AppendFormat("BlogEngine.i18n.ratingHasBeenRegistered='{0}';", Utils.Translate("ratingHasBeenRegistered").Replace("'", "\\'"));
            sb.AppendFormat("BlogEngine.i18n.rateThisXStars='{0}';", Utils.Translate("rateThisXStars").Replace("'", "\\'"));
            
			sb.Append("};");

            sb.Append("//-->\n</script>");

            ClientScript.RegisterStartupScript(this.GetType(), "registerVariables", sb.ToString(), false);
		}

 

ClientScript.RegisterStartupScriptメソッドの第4パラメータをfalseに指定し、直接開始終了タグを追加しています。

タグのコメント指定も直接追加しています。(<!--//と//ーー>です)

本体はこれでいいのですが、SyntaxHighlighterを導入していた場合、スクリプトソースを出力してしまう箇所があります。

SyntaxHighlighter.csファイル (2.1.634)
導入済みであれば、Blogengine.net/App_Code/Extensions/SyntaxHighlighter.cs
168行目あたりのAddOption()メソッドになります。

こちらも行っていることは、本体のBlogPageBase.csと変わりません。

    private void AddOptions()
    {
        StringBuilder sb = new StringBuilder();

        sb.AppendLine("\n\n<script type=\"text/javascript\">\n<!--//\n");
        sb.AppendLine(string.Format("\tSyntaxHighlighter.config.clipboardSwf='{0}';", GetUrl(ScriptsFolder(), "clipboard.swf")));

        if (_options != null)
        {
            sb.AppendLine(GetOption("gutter"));
            sb.AppendLine(GetOption("smart-tabs"));
            sb.AppendLine(GetOption("auto-links"));
            sb.AppendLine(GetOption("collapse"));
            sb.AppendLine(GetOption("light"));
            sb.AppendLine(GetOption("tab-size"));
            sb.AppendLine(GetOption("toolbar"));
            sb.AppendLine(GetOption("wrap-lines"));
        }  
        
        sb.AppendLine("\tSyntaxHighlighter.all();");
        sb.AppendLine("//-->\n</script>\n\n");
        _page.ClientScript.RegisterStartupScript(_page.GetType(), "SyntaxHighlighter", sb.ToString(), false);
    }

また、GoogleAnalyticsなどを使用している場合、ページに解析用のスクリプトを埋め込んだりします。デフォルトではコメントタグは入っていないようなので、同様に埋め込むことで、JavaScript非対応ブラウザでスクリプトソースが出力されなくなりますね。

尚、スクリプトソース表示に関しては、Sugishita’s Blogの記事を参考にさせていただきました。

コメントを書く

カレンダー

<<  11月 2017  >>
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

View posts in large calendar

タグ クラウド