ブログ・エス技研

当ブログは引越しをしました。10秒後に自動で転送しますが、転送されない場合は、http://blog.s-giken.net/ をご覧ください。
ブログ・エス技研 TOP  >  プログラミング関連技術

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --年--月--日 --:-- ] カテゴリ:スポンサー広告 | TB(-) | CM(-)

SyntaxHighlighterを導入してソースコードを見やすくしてみました

PHPのソースコードを始め、ソースコードの部分が見にくいなぁ、と以前から思っていましたが、ブログを再開後しばらくして便利なツールがあることを知りまして、今回、それを入れてみることにいたしました。

その便利なツールが「SyntaxHighlighter」です。

現在は、Ver 3.0になっているようで、機能的にも徐々にバージョンアップしてきているようですね。
設置の方法もブログなどを探していただくと、いろいろと情報提供をしてくれている方も増えてきていて、それほど苦労せずに設置できるんじゃないかなぁ。と思い....たいですね。


設置の方法としては、下記のサイトに分かりやすく説明がしてありました。
http://www.netyasun.com/syntaxhighlighter/

http://controlkey.blog.fc2.com/blog-entry-16.html

最初は上の方のサイトを見て「SyntaxHighlighter」の基本的な使い方を勉強して、2コ目のサイトで FC2ブログへの設置方法を勉強しました。

しかしっ!!
私は、2週間前の三連休の時に 2日間ほど設置に時間を費やしたあげくに「'SyntaxHighlighter'は宣言されていません。」という JavaScriptのエラーから脱出できずに断念。


http://www.872style.com/872/memo/web/SyntaxHighlighter.php

そして、今日、改めて上記のサイトを参考にしながらやり直してみました。
このサイトには、Headの部分に書くものと、bodyの最後に書くものと、その理由も含めて書いてありまして、非常に参考になりました。

まずは、ローカルに HTMLファイルを作成し、ローカルで動くことを確認しました。
そして、ブログ上に CSS、JSファイルをアップロードして、相対パスで書いていたソースの場所を URL形式の絶対パスに切り替えて動作を確認。

そして、動作することを確認した上で FC2ブログ上のテンプレートの修正と、記事の修正を実行。
そして、動作確認......

でも動かないっ!!!!!

2時間ほど悩んでみましたがよく分からず、仕方がないからと、違うテンプレートファイルに同じソースを貼り付けてみると...今度は動作しましたっ!!!

つまりは、テンプレートによっては CSSの設定なのか、JSの記述の仕方なのか分かりませんが、正しく動作しない場合があります!って言うことですね。
そこまで分析する気がありませんので、テンプレートを変えてよしとします。

もし、「SyntaxHighlighter」がブログでうまく動かない場合は、テンプレートを変えてみてください。
動くかもしれません。

そんなわけで、このサイトもテンプレートを変更しました。


ちなみに、最初に参考にしたサイトがありましたが、そのサイトは、トップページの画像のバージョンは、3.0.83となっていたものの、ダウンロードのファイルのバージョンは 1.5.1。
で、最初に参考にしたサイトだったこともあって、よく分からずにそのまま進めて行ってもうまくいかず、表示が崩れてそこでようやくバージョンが違っているということに気づきました。
みなさんもバージョン違いには気を付けましょうっ!!


また、IEではスクロールバーが出る際に最後の 1行が欠けてしまう不具合がありまして、こちらも参考にして対応しました。
http://blog.remora.cx/2010/07/new-function-of-syntaxhighlighter-3.html

でも、これを対応しても半分くらい欠けていたので、「margin-bottom: 1em !important;」の部分の「1em」を「2em」にしています。なので、スクロールバーがない場合や、IE以外の場合は、多少余白が多く見えますが、欠けてしまうよりいいでしょう。


ちなみに、ローカルで動作確認した際の HTMLは以下の通りです。
大したものではないですが。

-----------------------
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>SyntaxHighlighter Brushes Tests</title>

<!-- /ここから/ -->
<link href="./styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="./styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./scripts/shCore.js"></script>
<script type="text/javascript" src="./scripts/shAutoloader.js"></script>
<script type="text/javascript" src="./scripts/shBrushXml.js"></script>
<!-- /ここまでは head内/ -->

</head>
<body>

<pre class="brush: php;">
<p> 表示したいソースを <em><pre> ~ </pre></em>でかこみ、HTMLの表示であれば、<br />
<em>class="brush: html;"</em> を記入します。</p>
</pre>

<pre class="brush: text;">
<p> 表示したいソースを <em><pre> ~ </pre></em>でかこみ、HTMLの表示であれば、<br />
<em>class="brush: html;"</em> を記入します。</p>
</pre>

<pre class="brush: css;">
<p> 表示したいソースを <em><pre> ~ </pre></em>でかこみ、HTMLの表示であれば、<br />
<em>class="brush: html;"</em> を記入します。</p>
</pre>


<!-- /ここから/ -->
<script type="text/javascript">
SyntaxHighlighter.autoloader(
      "css                      ./scripts/shBrushCss.js"
     ,"js jscript javascript    ./scripts/shBrushJScript.js"
     ,"perl pl                  ./scripts/shBrushPerl.js"
     ,"php                      ./scripts/shBrushPhp.js"
     ,"plain text               ./scripts/shBrushPlain.js"
     ,"sql                      ./scripts/shBrushSql.js"
     ,"html xml xhtml           ./scripts/shBrushXml.js"
);
SyntaxHighlighter.all();
</script>
<!-- /ここまでは bodyuの前/ -->

</body>
-----------------------
スポンサーサイト
[ 2013年07月27日 19:50 ] カテゴリ:プログラミング関連技術 | TB(0) | CM(0)

日本語は2バイト文字?3バイト文字?

前回の日記の最後に少し文字のバイト数の件を書きましたので、ついでに今日は文字のバイト数のお話です。

最近の Webサイト製作、PHPのプログラム開発は Unicodeでの開発がほとんどで、以前ほど文字コードによる文字化けに悩まされることは減って来ているのではないかと思います。
また、かつて、半角カタカナは非常に厄介な問題でもあったわけですが、こちらも技術の進歩でかなりの部分問題なく対応されて来ています。


そんなわけで、最近はあまり文字コードのことを気にしなくなりつつあるわけですが、今日の日記の主題は「日本語の 1文字は果たして何バイトなのだろうか?」ということです。


SHIFT-JIS、EUCを主に使っていた頃は、全角文字は 2バイト文字とも言われるように、1文字は 2バイトだったわけです。
ですが、Unicodeなるとやや事情が異なってきてしまいます。

Unicodeでもこれまでと同様 2バイトのものもありますが、文字によっては 3バイト、4バイトのものが存在するわけです。

詳しくは、下記のサイトが参考になりました。
PHPのstrlen関数で全角文字が3バイトになる件
 http://hamamuratakuo.blog61.fc2.com/blog-entry-421.html


そして、「文字ごとにバイト数が違う場合、どのような影響があるのか?」ということについては、フォームなどから文字を入力してもらう際に行う文字数チェックで、意図しない結果になる可能性が出てくる、というわけです。

PHPで文字数をチェックする際には「strlen」で文字のバイト数を取得して計算するわけですが、文字によって返ってくるバイト数が違ってくるために、一概に「入力は何文字まで」と言う制限が出来なくなってしまうわけです。

DBに日本語を保存する場合、char型などで桁数を指定しようとした場合にも不具合が起こる可能性があるわけです。


詳しい説明などは書きのサイトなどが参考になるかと思いますのでご覧いただければ、今後の参考になるかと思います。

日本語文字列のバイト数取得にstrlenだけではダメな理由-PHP
 http://www.cpa-lab.com/tech/0144

Script雑感
 http://zombiebook.seesaa.net/article/33192046.html
[ 2013年01月20日 17:20 ] カテゴリ:プログラミング関連技術 | TB(0) | CM(0)
プロフィール

エス技研

Author:エス技研
性別:男性
職業:Web系エンジニア
エンジニアになって 15年ほど経ちますが、その途中で 5年ほどディレクタ、マネジメントを中心とした業務を行っていたためにやや現場を離れていましたが、転職をきっかけに 2012年に現場に復帰し、新たな技術を楽しみながら勉強しています。
メインの環境は LAMP環境です。

FC2ブログランキング
FC2カウンター
FC2拍手ランキング
GoogleAdWords
カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
検索フォーム
ブロとも申請フォーム
QRコード
QR
フリーエリア


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。