mt-galleryでタグ「JavaScript」が付けられているもの

いろいろなサイトやblogを見ていると
コードの部分をきれいな表形式で見せているサイトが多いのに気がつきました。
とても読みやすく、しかも、どれも同じデザインです。

これは何かのScriptで表現してるんではないかと思いｗ調べてみると

do.SyntaxHighlighterというJavaScriptを使っていることが分かりました。

しかも2年以上前から配布されていたようです。

さっそく自分もダウンロードして設置しました。

MT上ではなかなか上手く表示できず苦労しましたが、なんとか設置できました。

まず、SyntaxHighlighter - Alex Gorbatchev

からdp.SyntaxHighlighterをダウンロード。

下記のコードをテンプレートのヘッダーモジュール内に記述します。

<link type="text/css" rel="stylesheet" href="<$MTBlogURL$>SyntaxHighlighter/styles/shCore.css" /> 
<link type="text/css" rel="stylesheet" href="<$MTBlogURL$>SyntaxHighlighter/styles/shThemeDefault.css" />
<script language="javascript" src="<$MTBlogURL$>SyntaxHighlighter/scripts/shCore.js"></script> 
<script language="javascript" src="<$MTBlogURL$>SyntaxHighlighter/scripts/shBrushCss.js"></script> 
<script language="javascript" src="<$MTBlogURL$>SyntaxHighlighter/scripts/shBrushJScript.js"></script> 
<script language="javascript" src="<$MTBlogURL$>SyntaxHighlighter/scripts/shBrushPhp.js"></script> 
<script language="javascript" src="<$MTBlogURL$>SyntaxHighlighter/scripts/shBrushSql.js"></script> 
<script language="javascript" src="<$MTBlogURL$>SyntaxHighlighter/scripts/shBrushXml.js"></script> 
<script type="text/javascript"> 
SyntaxHighlighter.config.clipboardSwf = '<$MTBlogURL$>SyntaxHighlighter/scripts/clipboard.swf'; 
SyntaxHighlighter.config.strings.expandSource = 'ソースを展開'; 
SyntaxHighlighter.config.strings.viewSource = 'プレーン表示'; 
SyntaxHighlighter.config.strings.copyToClipboard = 'クリップボードへコピー'; 
SyntaxHighlighter.config.strings.copyToClipboardConfirmation ='クリップボードへコピーしました'; 
SyntaxHighlighter.config.strings.print = '印刷'; 
SyntaxHighlighter.config.strings.help = 'help'; 
SyntaxHighlighter.all(); 
</script>

そして記事内のSyntaxHighlighterを使用する前後に

<pre title="code" class="brush: xhtml;">

</pre>を入れるだけなんですが、

今回、上手くいかずにハマってしまったのは、

設置後にMT内のブログ記事編集で記事を記述するとき

フォーマットをリッチテキストで記述して保存すると

うまく表示されず、HTMLモードで記述して保存するとOKでした。

それと、もう一つは、もう少し幅の広いブログで使用しないと

逆に読みづらいことも判明しました。ｗ

この間から学習をはじめたInDesignでのJavaScript（自動処理）。

とにかく何か１つ造ってみたいと、挑戦してみました。

会社で購入していただいた、InDesign自動処理実例集（降籏一浩著）を読んでみたり、
ネットで調べ廻ったりしながら、自分なりにいろいろ試行錯誤しながら造ってみました。

つくったのは、見出し文字をライン文字にしてその下に2重に重ねた
同じ文字の線設定の太さやカラーを変えて一番下のフレームに影をつける処理。

いままでは当たり前ですが手作業で造っていました。





打ち込んだテキストフレームの文字の塗りや線設定を手動で調整して
そのフレームをコピー、そしてカラーパレットを開けて塗りと線の設定を変更。
これを3回くりかして、最後に一番したのフレームに効果パレットを開いて影をつける調整。

手動だと結構面倒くさいです。
これからは、スクリプトボタンをポチっと押すだけでこの処理を自動でしてくれます。

たったこれだけですが、結構時間かかりました。
でも、動いたときはうれしかったです。

まだまだ、行き当たりばったりで意味不なソースも...。

ではそのJavaScriptのソースの中身。

(function(){
var docObj=app.activeDocument.selection;


//ここで影ラインという新しいレイヤーを作成して一番下に移動しています。
    
var layerObj = app.activeDocument.layers.add();
layerObj.name = "影ライン";
var moveObj =app.activeDocument.layers[0].move(LocationOptions.atEnd);


//そして見出し文字のフレームをカットして同位置に3回貼り付けます。

    app.cut();
     for (i=0;i<3;i++)
     {
     app.pasteInPlace();
     }
 

/*  1番上のフレーム内の文字の色と線の設定。
　  ここでの色設定はネットでいろいろ調べました。  */

var texObj=app.activeWindow.activePage.textFrames[0];
setColor = [0, 0, 0, 0];
var colorOption=app.activeDocument.colors.add
({model:ColorModel.process,space:ColorSpace.cmyk,colorValue:setColor});
texObj.paragraphs[0].fillColor=colorOption;

var texObj=app.activeWindow.activePage.textFrames[0];
setColor = [0, 0, 0, 100];
var colorOption=app.activeDocument.colors.add
({model:ColorModel.process,space:ColorSpace.cmyk,colorValue:setColor});
texObj.paragraphs[0].strokeColor=colorOption;


/*  ここでは級数に合った丁度いい具合の線の太さを自動で調整。
    例えば48Ｑの文字なら線設定のスケールは
    私のInDesignならデフォルトでmmになっているので
    48mmに0.0125％掛けなさいって感じです。  */

var poinObj=texObj.paragraphs[0].pointSize;
texObj.paragraphs[0].strokeWeight=poinObj*0.0125;



/*  2番目のフレーム内の文字の色と線の設定。
　  1番上のフレーム設定とほとんどおなじ。  */

var texObj2=app.activeWindow.activePage.textFrames[1];
setColor = [0, 0, 0, 30];
var colorOption=app.activeDocument.colors.add
({model:ColorModel.process,space:ColorSpace.cmyk,colorValue:setColor});
texObj2.paragraphs[0].fillColor=colorOption;

var texObj2=app.activeWindow.activePage.textFrames[1];
setColor = [0, 0, 0, 30];
var colorOption=app.activeDocument.colors.add
({model:ColorModel.process,space:ColorSpace.cmyk,colorValue:setColor});
texObj2.paragraphs[0].strokeColor=colorOption;

var poinObj2=texObj2.paragraphs[0].pointSize;
texObj2.paragraphs[0].strokeWeight=poinObj2*0.0229166;


/*  3番目のフレームの位置を相対的にずらすソース。
　  ここでも級数に合った丁度いい移動距離にしています  */

var texObj3=app.activeWindow.activePage.textFrames[2];
texObj3.move(undefined,[poinObj2*0.0125,poinObj2*0.0125]);

setColor = [0, 0, 0, 60];
var colorOption=app.activeDocument.colors.add
({model:ColorModel.process,space:ColorSpace.cmyk,colorValue:setColor});
texObj3.paragraphs[0].fillColor=colorOption;

var texObj3=app.activeWindow.activePage.textFrames[2];
setColor = [0, 0, 0, 60];
var colorOption=app.activeDocument.colors.add
({model:ColorModel.process,space:ColorSpace.cmyk,colorValue:setColor});
texObj3.paragraphs[0].strokeColor=colorOption;

var poinObj3=texObj3.paragraphs[0].pointSize;
texObj3.paragraphs[0].strokeWeight=poinObj3*0.0229166;


/*  ここでは3番目のフレームに効果でドロップシャドウをつけています。
　  ここでも級数に合った丁度いいドロップシャドウにしています  */

texObj3.transparencySettings.dropShadowSettings.mode=ShadowMode.drop;
texObj3.transparencySettings.dropShadowSettings.opacity=60;
texObj3.transparencySettings.dropShadowSettings.distance=poinObj3*0.030625;
texObj3.transparencySettings.dropShadowSettings.size=poinObj3*0.025;


//ここで最初に造った影ラインという新しいレイヤーを一番上に移動しています。

var BegObj=moveObj.move(LocationOptions.atBeginning);

})();

おしまい。