MovableTypeの最近のブログ記事

ブログのレイアウトを2カラムから3カラムにしようとおもって、なんとなくスタイルを変更してみた。

内容をバックアップしろとか、保存しろとか何にも書いてなかったので「適用」をぽちってしてみたら、amazon検索ボックスとかPixivとかのウィジェットがもろもろ消えた( ´・ω・`)

さて、バックアップ漁る旅をするか(´-ω-`)

ひどいお( ´・ω・`)

 

と思ったら、ウィジェットセットを編集しなおすだけでよかった。
ふー。

JavaScriptのスリム化

| カテゴリ: , | トラックバック(0)

 はいはい。連続してMovableTypeのカスタマイズですよ。

今回は、タイトル通り、JavaScriptのスリム化です。

Ajaxで拡張ヤフー!! と、どんどん拡張してるのは良いんですが、読み込むJavaScriptの数とスタイルシートがいい加減増殖しすぎなのが気になっておりました。

見直してみると、prototype.js を 3回も読み込んでる!!
よく今まで動いてたナー。

というわけで、まずはそそくさと prototype.js を最新版のひとつに統一。

次はJavaScriptとCSSの圧縮を試みます。難読化ともいいますが、ウチが作ってるわけじゃないのでそのへんはどうでもいい。

検索すると、ありました。

Introducing the YUI Compressor

ここを参考にして、主要なJavaScriptとCSSファイルを圧縮しますた。
結果、約400KBあったファイル群が、約200KBまで減りました。なんと1/2。
(まぁそれでも多いんですがね・・・)

というわけで、ほんの少しだけレスポンスのアップしたサイトを、今後もよろしくお願いします。(o^-')b

見てるのはほとんど検索エンジンだけなんですがね!!

 はい。毎度どうも。今日もMovableTypeのカスタマイズです。

今回は、←のサイドバーに付いている検索を、MovableTypeデフォルトの検索ではなくて、Ajaxを使った超高速な検索にするという素敵な拡張です。(そればっかり)

これを導入すると、MovableTypeで管理しているWebページは検索できなくなるのですが、そっちはどうでもいいので取り入れました(*´−`)

参考にしたのは・・・

暴想 ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript

まずはここなんですが、そのまま導入したらハマりました。

NowLoading..................と延々とロードが続いて検索結果がでない。

ChromeのJavaScriptデバッガを駆使して死んでる箇所を探すと、Ajaxの非同期通信を呼び出してる部分がなんかおかしい。

さんざん調べると、使っている prototype.js が、いわゆる prototype.js ではなくて、mootoolsのそれのようで、うちで使ってるJavaScriptとバッティングしてそのままではアカンがなー。
試しにウチで使ってた prototype.js を上書きしてみると、ソースの色づけやらカレンダーやら続きを読むやらがまったく動かなくなる代わりに、検索はできるように。

しかも、文字化けしてる('A`) どうもUTF-8専用っぽい。

なので、本家の prototype.js を使い、なおかつEUC化する方法を探ります。

自分で解決するのは面倒なのでグーグル先生に聞きまくります。
ピッタリなサイトがありました。

「MovableType備忘録: ブログ内検索を高速化」をEUC化する

ソースを眺めると、prototype.js 用になっていて、なおかつコメントを含めて検索でき、なおかつEUC化もできている。至れり尽くせりなページ(o^-')b

ここを参考に、自分用に適当に変更して導入。実行。完了。

どこまで高速化するか謎だったんですが、死ぬほど速い。アリエナス。

←の検索ボックスからお試しくださいませ。2回目以降の検索速度にぶったまげますよ。

 暇人と呼んで(*´−`)

というわけで、タイトル通り Code syntax highlight plugin for FCKEditor を、さらに改良してみました。 

Syntax Highlighter 2の第2パッチ版コード入力画面

Syntax Highlighter 2の第2パッチ版コード入力画面

変更点は以下の通り

  1. タブの入力が可能になった
    (複数行まとめてタブ可、Shift+Tabでタブ消去も可)
  2. 行番号表示するようにした
    (Default line countを指定している場合は、先頭行がそれになる)
  3. Chromeでしかテストしてない

というわけで、スクリーンショットを見れば行番号が付いてるのが分かると思いまふ。
いままでハイライト行を設定するのが難しかったのですが、これで何行目をハイライトすればいいのか一目でわかるようになりますね。
(まぁ、可能なら範囲選択でハイライトできたりすると良いんだろうけど、それはいろいろ無理っぽいので・・・)

3項に注意して、動かなくても知りませんよバージョンをアップしておきますので、物好きな方はどうぞ。
ちゃんとバックアップしてから導入してくださいね。 

FCKEditor-syntaxhighlight_2.0.1_BoisPatch2.zip

動作報告とかコメントとか頂けると喜びます(たぶんだれもいないだろーなァ・・

(ちょっとテストしてみました。IE8ではキーを押すまで行番号が表示されないうえにめちゃくちゃ重い、OperaではTab入力するとなんかぐちゃぐちゃになる+行番号が表示されない、FireFoxは嫌いなので入れてないと、散々な結果でした・・・・・。Chrome使ってくださいスンマセン対応するつもりナス)

 ネタがもうないとか書いておきながら、またしてもMovableTypeのカスタマイズ日記です。

タイトル通り Syntax Highlighter 2 が5月3日にバージョンアップしたようです。
もちろん最新版(2.0.320)をダウンロード&インスコします。

大きな変更点は、

  1. ActionScript3の構文に対応
  2. JavaFXの構文に対応(ナニソレ)
  3. PowerShell構文に対応(ナニソレ)
  4. コントローラが、コードにマウスを合わせたときだけ表示されるようになった
  5. wrap(禁則処理)の停止に対応
  6. レンダリングの高速化

です。僕にとっては1,2,3,4はどうでも良いのでスルーするとして、5は ねんがんのなんとかをてにいれたぞ なので喜び勇んでアップデートしました。

どういうことかというと、従来は・・・

void main() {
	printf("長い文章を入力した際の禁則処理の確認。長い文章を入力した際の禁則処理の確認。長い文章を入力した際の禁則処理の確認。長い文章を入力した際の禁則処理の確認。長い文章を入力した際の禁則処理の確認。長い文章を入力した際の禁則処理の確認。");
}

こんな感じでしたが、wrap-lines: false を指定することで

void main() {
	printf("長い文章を入力した際の禁則処理の確認。長い文章を入力した際の禁則処理の確認。長い文章を入力した際の禁則処理の確認。長い文章を入力した際の禁則処理の確認。長い文章を入力した際の禁則処理の確認。長い文章を入力した際の禁則処理の確認。");
}

 こう、ラッピングされなくなるのでっす。あー、ブラウザのキャッシュに古いスクリプトがのこってるリピータの方は見れないかもしれないですね。 (シラネw)

ついでなので、Code syntax highlight pulgin for FCKEditor を勝手に改造しました。
改造点は

SyntaxHighlighter2パッチ版の拡張設定画面

SyntaxHighlighter2パッチ版の拡張設定画面

  1. 対応言語の追加
    (ActionScript3, Perl, PlainText)
  2. URL自動リンクを禁止できる
  3. 禁則処理(wrapping)を禁止できる
  4. XML/HTMLの混合可能(phpなどと併用するため)
  5. ハイライト行を指定できる(例: ひとつの数字、あるいは [3,6,8] などの配列)
    ※数字以外を入力したときとかはシラネ
  6. 適当な英語(poor english 

こんな感じです。以下動作確認のテスト。

テキストフォーマット指定のみ

http://wwww.boiscreative.com/

テキストフォーマット指定+オートリンク禁止

http://www.boiscreative.com/

PHP指定+HTMLミックス許可

<html>
<body>
	<div style="font-weight: bold"><?= str_replace("\n", "<br/>", $var)&nbsp;?></div>
	
	<?
	/***********************************
	 ** Multiline block comments
	 **********************************/
	
	$stringWithUrl = "http://www.boiscreative.com/";
	$stringWithUrl = 'http://www.boiscreative.com/';
		
	ob_start("parseOutputBuffer");		// Start Code Buffering
	session_start();
	?>
</body>
</html>

C++指定+行番号1000から+1001,1003をハイライト

void main() {
	printf("Hello world!!\n");
	printf("Hello world!!\n");
	printf("Hello world!!\n");
}

こんな感じ(*´−`)

あまり虐めてないのでバグが残ってるかもしれないけど、欲しいという奇特な方はどうぞ。
インストールの仕方とかは本家と全く同じです。日本語化もしてありません。
本家のバージョンアップを待った方がいいかもしれませんね。

FCKEditor-syntaxhighlight_2.0.1_BoisPatch.zip

 ※2009/05/04 17:41追記 さらに改良したものがありますので、こちらもご覧ください。お好きな方をどうぞ。

SyntaxHighlighter 2.0をMovableType4.25で使ってみる エントリで書いた、Code syntax highlight pulgin for FCKEditor は、確かに便利なのですが、現バージョンだと対応言語がいくつか不足していて、手作業で言語名を変更しなければならず、面倒です。

対応言語を増やすのはものすごく簡単なので、さくっとやってみました。

/mt-static/plugins/FCKeditor/fckeditor/editor/plugins/syntaxhighlight2/dialog/fck_syntaxhighlight.html
をテキストエディタで開き、

                    <select id="ddLang">
                        <option value="cpp">C++</option>
                        <option value="csharp">C# </option>
                        <option value="css">CSS </option>
                        <option value="delphi">Delphi</option>
                        <option value="java">Java </option>
                        <option value="jscript">Java Script</option>
                        <option value="perl">Perl</option>
                        <option value="php">PHP</option>
                        <option value="text">Plain Text</option>
                        <option value="python">Python</option>
                        <option value="ruby">Ruby</option>
                        <option value="sql">SQL</option>
                        <option value="vb">VB.NET</option>
                        <option value="xhtml">XML/HTML</option>
                    </select>

ハイライト部分を変更および追加します。C++のvalue値をcppにしたのは、SyntaxHighlighterのドキュメントにはc++が指定できるとは書いてないからです。気にしない方はc++のままで構いません。

しかし、よく使われそうな Perl や プレーンテキスト になんで対応してないんでしょうね・・・不思議です。

あとはブラウザのキャッシュをクリアして(必須)、ブログを書くからコードを挿入してみます。
以下テスト。

sub main {
	print "hello perl script!";
}
plain text foo bar hoge
test
void main() {
	printf ("hellp c++ code!");
}

 もう少し便利に出来ないか調べてみようかな〜(*´−`)
ではまたー。

※2009/05/04 8:47追記 改造版をアップしました。
興味のある方は、こちら SyntaxHighlighterのバージョンアップ をあわせてご覧ください。

MovableType4.25カスタマイズ日記もおそらく今回でやりたいことは一通りやっちゃった感じ。
多分最後のネタです。

今回は画像をページの切り替えなしにズーム表示したり、ドラッグで移動できちゃう素敵な拡張です。
とりあえずカスタマイズの内容は続きに隠しておきます。どうせ見る人いないだろうけど。

結果は↓こんな感じです。クリックしたりドラッグしたりしてみてくださいな。

komomo.jpg   空 巨大な多分ディズニーシー

巨大な多分ディズニーシー

 

こももたん(*´−`)

続きを読む ≫

 またしてもMovableTypeネタ。

FCKEditorを激しく便利に使っていまふ。DreamWeaverのWYSIWYGなエディタに匹敵するエディタで超楽ちん。
ソースでの編集にもすぐ切り替えられるので、小回りも利きます。

しかしながら、リンクを張ろうとすると毎回毎回ターゲット _blank を選択しなければならなくて、それが気になっておりました。

で、ちょっとソースを覗いてみると・・・
\mt-static\plugins\FCKeditor\fckeditor\editor\dialog\fck_link\fck_link.js
がそれっぽい。それを読むと

function SetDefaultTarget()
{
	var target = FCKConfig.DefaultLinkTarget || '' ;

	if ( oLink || target.length == 0 )
		return ;

	switch ( target )
	{
		case '_blank' :
		case '_self' :
		case '_parent' :
		case '_top' :
			GetE('cmbTarget').value = target ;
			break ;
		default :
			GetE('cmbTarget').value = 'frame' ;
			break ;
	}

	GetE('txtTargetFrame').value = target ;
}

FCKConfig.DefaultLinkTarget に _blank を指定してやればよさそうね。

ググったらドキュメントにも書いてあった(*´−`)

というわけで、
\mt-static\plugins\FCKeditor\fckeditor\fckconfig.js
の中を調べると

FCKConfig.DefaultLinkTarget = '' ;

なんだー、ちゃんと定義されてるじゃーん。これ直すだけでいいのね。ということで

FCKConfig.DefaultLinkTarget = '_blank' ;

に直してセーブしてアップロードして作業完了。

また一つ便利になりましたーヽ(o`ω´o)ノ

続きを読む ≫

ご機嫌になって記事を投稿し終わって、一息ついて、Chromium(ブラウザ)のアップデートをして、さてMovableType4にログイン!! と思ったら・・・・

続きを読む ≫

 今日もせっせとMovableTypeのカスタマイズ。

今回は、MovableTypeの「続きを読む」リンクを、ページの遷移なしにグリグリと見られる拡張でふ。
Ajax様々ですね。Ajaxというとコナミのシューティングゲームを連想ふがふがうわーなにをするー

テストを兼ねて、続きに書いてみます。

続きを読む ≫
1  2  3
TiltleGirl
illustration:壬生夏生

アーカイブ

Powered by Movable Type 4.25
http://www.jspeed.ne.jp/
boiscreativeをフォローしましょう
WebMoney ぷちカンパ

このアーカイブについて

このページには、過去に書かれたブログ記事のうちMovableTypeカテゴリに属しているものが含まれています。

前のカテゴリはMacです。

次のカテゴリはMSXです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。