スポンサーサイト

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

AppleScriptのシンタックスをハイライトしたHTMLを生成するWebフォームを作ってみた

AppleScriptの構文を色分けして表示させるためのHTMLを生成するWebフォームをJavaScriptで作ってみました。まだまだ対応しきれてない構文とかあると思いますが。

Syntax Highlighting for AppleScript

実用性を考えると、HTMLを生成するフォームではなくて、『SyntaxHighlighter』とか『GeSHi』みたいにblogに設置しておいて、例えば<pre>要素のclassを指定してやれば勝手にハイライトするようなのが良いんですが、まずは構文の色付けする部分をマトモに動かす事から…みたいな感じで。まあ一回やってみたかったんです。

『GeSHi』なんかはAppleScriptにも対応してるんですが、色分け出来る予約語も多くないし、スクリプト中に他の言語が混ざってたりすると表示がおかしくなってしまい、今ひとつ完全ではない感じでした。

フォームの上側のテキストエリアに、スクリプトエディタからコピーしたコードをペーストして『Highlight!』ボタンを押すと、下側のテキストエリアに『<span class="hoge">~</span>』の形で区切られたHTMLが表示され、さらにその下が実際に色分けされた表示になります。AppleScriptのコードをコピペ出来るように、行番号抜きのHTMLも生成出来ます。

ハイライト表示のために、以下のcssを追加する必要があります
.applescript {
	font-size: 11px;
	width: inherit;
	overflow: scroll;
}

/* 行番号ありの場合はol要素 */
/* 行番号なしの場合はdiv要素のclass名 */    
.ash_highlighted {
	white-space: nowrap;
	color: #999;
	background-color: #f8f8f8;
	list-style-position: outside;
	list-style-type:decimal;
}

/* 行番号なしの場合のdiv要素調整用 */
div.ash_highlighted {
	padding-left: 1.5em;
	padding-top: 1em;
	padding-bottom: 1em
}

span.ash_reserved { color: #33c; } /* 予約語 */
span.ash_variable { color: #383; } /* 変数名 */
span.ash_handler { color: #383; } /* ハンドラ */
span.ash_quoted { color: #c3c; } /* クォートされた文字列 */
span.ash_symbol	{ color: #000; } /* 記号類 */
span.ash_normal	{ color: #000; } /* 上記以外の数字など */
span.ash_comment { color: #757; } /* コメント */

/* 行番号ありの場合のコード部分との境界 */
.applescript li { border-left: solid 1px #ccc; padding-left: 1em; }

/* 奇数行の背景色 */
li.odd { background-color: #fff; }

生成されたHTMLをblogに貼り付けるとこんな感じになります。
  1. property work_folder : "Images for Web" as Unicode text --保存先のフォルダ名(デスクトップに作成) 
  2. property jpeg_quality : 10 as integer --JPEGの画質(0-12) 
  3. on open drop
  4.     tell application "Finder"
  5.         if not (exists folder work_folder of desktop) then
  6.             make new folder with properties {name:work_folder} at desktop
  7.         end if
  8.         set dest_path to ((path to desktop folder) as Unicode text) & work_folder
  9.         set img_size to text returned of (display dialog "生成する画像の長辺のサイズ(ピクセル数)を入力。" default answer "") as integer
  10.     end tell
  11.     
  12.     (*ディスプレイプロファイル取得*)
  13.     tell application "ColorSyncScripting"
  14.         set profile_name to name of display profile of display 1
  15.     end tell
  16.     
  17.     repeat with theFile in drop
  18.         tell application "Adobe Photoshop CS2"
  19.             open theFile showing dialogs never
  20.             set theDoc to current document
  21.             tell theDoc
  22.                 if width > height then
  23.                     resize image width img_size as pixels resolution 72 resample method bicubic
  24.                 else
  25.                     resize image height img_size as pixels resolution 72 resample method bicubic
  26.                 end if
  27.                 change mode to RGB
  28.                 convert to profile profile_name intent relative colorimetric with blackpoint compensation and dithering
  29.                 set save_opts to {class:JPEG save options, embed color profile:false, quality:jpeg_quality}
  30.                 set new_name to my replaceExtension(name of theDoc, "jpg") as Unicode text
  31.                 set dest_file to dest_path & ":" & new_name
  32.                 save in file dest_file as JPEG with options save_opts appending no extension with copying
  33.                 close without saving
  34.             end tell
  35.         end tell
  36.     end repeat
  37. end open
  38. (* 拡張子を変更したファイル名を返す 簡易版 *)
  39. on replaceExtension(fName, new_ext)
  40.     tell application "Finder"
  41.         set base_name to (do shell script "echo " & quoted form of fName & " | sed 's/\.[^.]*$//'") as Unicode text
  42.         return base_name & "." & new_ext
  43.     end tell
  44. end replaceExtension
関連記事
スポンサーサイト

コメント

非公開コメント

かじわらと申します。

こちらのフォームを使わせていただいています。
SyntaxHighlighterをAppleScript用に
設定しようとしていたのですが
なかなかうまくいかず困っていたところでしたので
たすかりました。

ありがとうございます。
Profile
choco
Author : choco

印刷・製版の現場を経て、広告制作会社でPhotoshopを使ったビジュアル制作を担当。

→現在は車載機器開発ベンダにて、組み込み3Dデータ作成やUIデザインなどを行っています。

Categories
Favorites


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