さぶろクリエイトブログ:ブログ設定

2008年07月28日

LSL色付けツールをバージョン1に、あと設置簡易化とか

いつのまにか、SyntaxHighlighter2が効かなくなってると思ったら、Jvnさんのブログに壊れたって書いてありました。ソラマメの仕様が変わったのかな？（￣o ￣）

なので、バージョン1に戻してみました。



default

{

	state_entry()

	{

		llSay(0, "ご存じ、ないのですか!?　これがSyntaxHighlighterです!!");

	}

}

ちなみに今までは、javascriptやcssファイルなどは、各使用者が個別にHPスペースなどにアップロードする必要があったのですが、今回からGooglePageCreatorに置いておいて、どこからでも参照できるようにしてみました。これで、いちいち別途ファイル置き場を用意しなくても、ソラマメのテンプレートからGooglePageCreatorを参照するだけで、色つけ出来るようになります。

このような使い方は、他のHP作成サービスでは、たいてい規約で禁止されていますが、GooglePageCreatorの規約を翻訳して読んでみた限りでは、特に問題ないように感じました。（もし勘違いしていたら教えてください）

使ってみたいなら、テンプレートのheadタグ内に、設定を追加しましょう。
以下、設定例です。

<head>
・・・
・・・

<link type="text/css" rel="stylesheet" href="http://public.webkai.net/SyntaxHighlighter.css" />
<script language="javascript" src="http://public.webkai.net/shCore4SLMaMe.js"></script>
<script language="javascript" src="http://public.webkai.net/shBrushLsl.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'http://public.webkai.net/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

</head>

URLのホスト名が、public.webkai.netになっていますが、これはwebkai.netというsabroが持ってるドメインをGoogle Appsに登録し、その上でGooglePageCreatorを使っているのでこうなっています。つまり、ドメインこそsabroが持っているものですが、実際のホスティングはGoogleで行われています。

テンプレートの設定追加が終わったら、あとはLSLを書く時にPreタグで囲んで、いくつか属性を設定するだけです。

↓ こんなかんじ
<pre name="code" class="lsl">
default
{
    state_entry()
    {
        llSay(0, "ご存じ、ないのですか!?　これがSyntaxHighlighterです!!");
    }
}
</pre>

最近は、LSLのブログも増えたようですが、うちがマイナーなので、あんまりこのツール使っている人っていません。設置も楽になったことですので、これを機に誰かに使っていただけるとうれしいです（＾＾）

関連エントリ
LSL色付けツール

Posted by sabro at 00:28 │Comments(6) │TrackBack(1) │ブログ設定

2008年02月21日

LSL色付けツール2.0をJvn Writerさんがリリース

以前、私が作ったLSL色付けツールですが、Sabroは他にもやることがたくさんあるので、特に機能追加の予定はありませんでした。

そんなところに、Jvn Writerさんから、やる気に満ち溢れたコメントをいただいたのです（やらせて下さいとか一言も書いてないのですが、コメントを通してやる気オーラが見えるほどでした＾＾）。このまま自分の手元で腐らせてても仕方ないし、やる気がある人が開発を続けた方が、ツールも良いものになるだろうと、開発を引き継いでもらって3週間。まだ1ヶ月も経ってないのに大幅機能追加してVer2.0がリリースされるようです。

追加される機能

ポップアップでリファレンス参照
公式WikiやMakapuさんのサイトへのリンク表示
ワンクリックコピー（Ver1.0ではうまく動いてませんでした）
行番号、表示・非表示切替
LSL定義情報の自動更新
必要なときのみjsファイルを読み込むことで負荷低減
SLMaMeで改行が余分に入る問題を修正

↓ うちは先行導入させてもらいました。



default

{

    state_entry()

    {

        llSay(0, "Hello, SL World!");

    }

}

まだ公式ページはないようですが、そのうち一般に公開されると思います。この手のツールとしては決定版だと思いますので、ブログにLSLを書く人は、ぜひ導入してみてください＾＾

2008/02/23　追記

公開されました＾＾
http://jvn.slmame.com/e151297.html

Posted by sabro at 21:18 │Comments(1) │TrackBack(0) │ブログ設定

2007年12月13日

ソラマメから返事きました～

昨日のエントリで、ソラマメに記事自動改行の機能追加要望を出したのですが、今日早速返事がありました。対応早いですね～。

今回の要望については、機能増強時の検討材料にしていただけるそうです。

ブログシステムの都合等、いろいろ考えないといけないことがある中、前向きに検討していただけるようでありがたいかぎりです＾＾

Posted by sabro at 21:23 │Comments(0) │TrackBack(0) │ブログ設定

2007年12月12日

ソラマメにブログ自動改行の要望出しました

LSLのコードを書く場合、普通はpreタグで囲ってスペースや改行をそのまま表示させるようにしますよね。でも、ソラマメのブログ環境設定で、改行をbrタグに変換するようにしているとpreタグ内の改行も変換されるので、通常の改行＋brタグの改行でpre内は2回改行されてしまうことになります。

私は、改行をHTML実体参照の「＆＃１０；」に変換することでしのいでいたのですが、毎回変換するのは結構大変でした。

そこでソラマメに要望を出してみました。ブログ環境設定の「記事の自動改行」に「自動で改行する(pre内部以外の改行を<br>にする)」を追加してくださいというものです。単純な機能追加なので、仕様が変わって困る人もでませんから、ぜひ実装して欲しいと思ってます。

Posted by sabro at 21:46 │Comments(2) │TrackBack(0) │ブログ設定

2007年11月28日

ブログタイトルとデザインを変更

このブログを開始した時点では、どんなゲームを作るか決めてなかったから、「ヒマをみつけてSecond Life」なんていうタイトルつけてたけど、ゲームのタイトルもSpirittanで確定したことだし、ブログ名を「Spirittan開発ブログ」に変更してみた。

こっちの方が、ブログの内容が明確になっていい感じだ＾＾

ついでにデザインも変更。今までドノーマルだった分、見栄えよく見えるかな?

website

Posted by sabro at 02:24 │Comments(0) │TrackBack(0) │ブログ設定

2007年08月31日

LSL色付けツール

※ Jvn Writerさんが、高機能版のLSL 色付けツール２をリリースされているので、そちらを使用することをオススメします。

※ 必ず追記部分も読んでからご使用ください。

LSLのシンタックスハイライトツールを公開します。

ツールといっても、SyntaxHighlighterという、フリーのシンタックスハイライトツールの、LSLプラグインを作っただけです。

必ず最後の注意書きを読んでから導入してください。
shBrushLsl.js

導入方法

1.ダウンロード
ここから、syntaxhighlighter_1.5.1本体をダウンロードします。次に、shBrushLsl.jsをこのリンクの右クリックメニューから保存します。

2.ファイルをWebサーバへ配置
ダウンロードが済んだら、shBrushLsl.jsと、syntaxhighlighter本体の以下のファイルを、無料ホームページスペースなどにアップロードします。

・dp.SyntaxHighlighter\Scripts\shCore.js
・dp.SyntaxHighlighter\Scripts\clipboard.swf
・dp.SyntaxHighlighter\Styles\SyntaxHighlighter.css

3.ブログテンプレートを修正
ブログ管理画面　→　ブログの設定　→　テンプレート　→　カスタマイズ　と辿って、「トップページ、個別記事、アーカイブ」の各テンプレートheadに、以下を追加します。○○○は、アップロードしたファイルのパスに置き換えてください。

<head>
・・・
・・・

<link type="text/css" rel="stylesheet" href="http://○○○/SyntaxHighlighter.css" />
<script language="javascript" src="http://○○○/shCore.js"></script>
<script language="javascript" src="http://○○○/shBrushLsl.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'http://○○○/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

</head>

4.LSLを含んだ記事を書く
LSLは、<pre>または<textarea>の中に書き、name属性に「code」、class属性に「lsl」とセットすれば色分けされます。

<pre name="code" class="lsl">
default
{
    state_entry()
    {
        llSay(0, "Hello, SL World!");
    }
}
</pre>

↓



default

{

	state_entry()

	{

		llSay(0, "Hello, SL World!");

	}

}

あれ、<br />が入ってしまいました（今は修正版を使ってるので入ってません）。ブログ環境設定で、改行を<br />に変換する設定にしておくと、このようなことになってしまいます。でも、変換しない設定にすると、今まで書いてきた記事を直さないといけないみたいです。

詰んだ・・・orz　　　　と思わせておいて、俺が華麗に解決＼(^o^)／

改行を実体参照の「」に変換すればいいのです。よく分からない人は、「」は改行を文字で表したようなものだと思ってください。私はフリーのサクラエディタで、以下のように変換してます。

1.メニューから置換を選択
2.正規表現にチェック
3.置換前に、\r\nと入力
4.置換後に、と入力
5.すべて置換を押す

改行が置換されて、1行の長い文字列になるので、preタグの間に貼り付けてください。

<pre>
　　ソース
</pre>

だと、1行目と最終行に<br />が入るので、

<pre>ソース</pre>

こう書きましょう。

改行の変換で1手間かかるので微妙ですが、よかったら使ってやってください。

※ 2008/01/30 1:00頃追記
<br />を消すだけであれば、Syntaxhighlighterの設定だけで出来るようです。ただ、その場合は1行余分に改行が入ります。
・・・
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'http://○○○/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();　　← headの設定にこの行を追加
dp.SyntaxHighlighter.HighlightAll('code');
・・・

※ 2008/01/30 23:00頃追記
Jvn Writerさんが、余分な改行が入らない方法を教えてくれたので、修正済みのファイルを公開します＾＾　今回修正したのは、SyntaxHighlighter本体付属の「shCore.js」ですが、混乱をさけるために「shCore4SLMaMe.js」というファイル名にしてあります。
shCore4SLMaMe.js

ちなみに、shBrushLsl.jsは修正していないので今までのものを、そのまま使ってください。shCore4SLMaMe.jsを適当なサーバにアップロードしたら、ブログテンプレートでのheadの設定で、shCore.jsを参照していた部分はshCore4SLMaMe.jsに直しておいて下さい。また、BloggerModeの設定も行う必要があります。

<head>
・・・
・・・

<link type="text/css" rel="stylesheet" href="http://○○○/SyntaxHighlighter.css" />
<script language="javascript" src="http://○○○/shCore4SLMaMe.js"></script>
<script language="javascript" src="http://○○○/shBrushLsl.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'http://○○○/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

</head>

あと、shBrushLsl.jsのリンクが切れていたので修正しておきました。

※ 2008/07/29 00:40頃追記
javascript、cssファイル等を、各使用者が個別に設置する必要がなくなりました。詳しくは、以下のエントリをご覧ください。
LSL色付けツールをバージョン1に、あと設置簡易化とか

＜注意事項＞
・javascriptには、LSLの関数をすべて記述してあるので、結構重いです(12kB)。
・ライセンスは、本体と同じでLGPLです。自分のブログで使うだけであれば問題ないので、分からない人は気にしなくてもいいです。
・shBrushLsl.js、shCore4SLMaMe.js、または今回の記事内容から発生した損害について、このブログの運営者は一切の責任を負わないものとします。

Posted by sabro at 01:28 │Comments(11) │TrackBack(2) │ブログ設定

このページの上へ▲