日別アーカイブ: 2012年6月28日

[HTML]さくらのブログでSyntaxHighlighterを使う場合の留意点

このブログではプログラムソースの表示に「SyntaxHighlighter」を使用しています。
しばらく使っていて色々分かったところもあるので、一度ここで確認をしておこうと思う。

○編集
preタグの中にHTML上影響の与える文字が含まれると、うまく表示されない場合があるので置き換え文字を使用する。
このサイトが便利。

「preタグ・メーカー」
http://www.mapee.jp/tools/pretagmaker/

○投稿
改行HTMLタグ変換
「改行をタグに変換しない 」に設定
URL補完
「補完しない」 に設定

○初期設定
１．SyntaxHighlighterを自分が所有するサーバスペースにアップ

２．HTMLの編集
管理パネル
「デザイン」→「HTML」→「HTMLの追加」

ここで、必要なタグの追加
※headタグ中

<!-- SyntaxHighlighter -->
<link type="text/css" rel="stylesheet" href="http://<自分が所有するサイトのドメイン>/syntaxhighlighter/styles/shCore.css">
<link type="text/css" rel="stylesheet" href="http://<自分が所有するサイトのドメイン>/syntaxhighlighter/styles/shThemeDefault.css">

※bodyの閉じタグの手前

<!-- SyntaxHighlighter -->
<script type="text/javascript" src="http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shAutoloader.js"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
'applescript            http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushAppleScript.js',
'actionscript3 as3      http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushAS3.js',
'bash shell             http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushBash.js',
'coldfusion cf          http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushColdFusion.js',
'cpp c                  http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushCpp.js',
'c# c-sharp csharp      http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushCSharp.js',
'css                    http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushCss.js',
'delphi pascal          http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushDelphi.js',
'diff patch pas         http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushDiff.js',
'erl erlang             http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushErlang.js',
'groovy                 http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushGroovy.js',
'java                   http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushJava.js',
'jfx javafx             http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushJavaFX.js',
'js jscript javascript  http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushJScript.js',
'perl pl                http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushPerl.js',
'php                    http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushPhp.js',
'text plain             http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushPlain.js',
'py python              http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushPython.js',
'ruby rails ror rb      http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushRuby.js',
'sass scss              http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushSass.js',
'scala                  http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushScala.js',
'sql                    http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushSql.js',
'vb vbnet               http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushVb.js',
'xml xhtml xslt html    http://<自分が所有するサイトのドメイン>/syntaxhighlighter/scripts/shBrushXml.js'
);
SyntaxHighlighter.defaults['toolbar'] = true;
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
※ご注意
掲載している内容についてはご自身の責任で参考にされてください。

[HTML]特定のブラウザで画面が真っ白に表示される

特定のブラウザで画面が真っ白になる場合があります。

ソースを表示させると、きちんとHTML自体はブラウザにダウンロードされている。
ブラウザのエンコードも問題ないし、ファイル自体の文字コードも合っている。
現象が確認できるブラウザでは再現率100%。
開発していたブラウザではちゃんと表示されていたのに、どうして？

そんな問い合わせが時々あります。

こういった場合は「文字化け」を疑います。
例えば次のソースを見てみてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
・・・以下略

一見すると正しい記述に見えますが、この記述だとmetaタグで「utf-8」が
指定される前にtitleタグ内のマルチバイト文字「タイトル」が現れます。

ブラウザがエンコードを認識する前にマルチバイト文字を読みこみ
一部のブラウザではタイトルの時点で文字化けが発生する場合があります。
結果としてブラウザには白い画面しか表示されなくなります。

解決策としてはタグの順番を入れ替えればOKです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>タイトル</title>
・・・以下略

titleタグに限らず、日本語（マルチバイト文字）が出力される前に
必ずエンコードを指定しておけば良いでしょう。

しかしながら、修正したファイルを本番サーバにアップしたときに
即時反映されない場合があります。

典型的ですが、こういった場合はサーバやクライアント側のキャッシュである可能性が考えられます。
クライアント側のキャッシュをクリアし、許されるならサーバキャッシュの削除、もしくは再アップロードで動作する場合があります。

いずれにしてもWebで開発する以上は、宿命的にブラウザ対応（主に文字化け）との戦いをしていくことになります。

仕様を統一してくれないかな、というのは世界中のWeb系エンジニアの願いです。。。

※ご注意
掲載している内容についてはご自身の責任で参考にされてください。