HSPTV!掲示板

タイトルの通り、HTML内にHSPのコードを書くと色分けして表示するjavascriptを公開しました。
HSPに関する情報を載せるサイトは多いのですが、世界的で無いためか
ブラウザ上で色分けするプラグインがありませんでした。(私の知る限り)
そこで、個人的な練習にも、と思って作ってみました。

デザインはHSPエディタとほとんど同じ感じにしました。
ただし、数字は赤色で表示されるようになっています。

ダウンロードはこちらからできます。
http://cats.genin.jp/download/tool.html

一応名前はHSP Syntax Highlighterとしていますが、
色分け用のrainbowというjavascriptを基盤にしています。
https://github.com/ccampbell/rainbow

こちらに確認用サンプルHTMLがあります。
http://cats.genin.jp/download/get/sample/sample.html

javascriptや正規表現はほとんど使ったことが無い領域でしたので、
動かなかったり、バグがあったりするかもしれません。
バグを見つけた方や、HSPエディタと異なる表示になる部分があった場合、教えていただけると幸いです。
また、追加してほしい機能などあったら是非ここに書き込んでください。

サンプルを見てみました。
確かにこのようなのはあまり見ません。
今度使う機会があれば使いたいなと思います｡
それで、追加して欲しい機能というより、アイデアなんですけど、
ソースを見る限り、標準命令・関数しか色分けしないように思えます。
そこで、ユーザー定義命令や、読み込んだモジュール内用の色分けがあると、
便利だと思えます。ソース解析の必要が出てきますが、
正規表現でなんとかなると思います。
そうでなければ、色分けするキーワード、色を外部ファイルで指定できるとか。

>kanamaru様
ご要望ありがとうございます。
私自身も、需要があればユーザー定義の単語を色分けする機能を付けようと考えていましたので、
今後の修正とともに、この機能を追加しようと思います。
(外部ファイルで定義、という形になると思います。)
あと、行番号の表示も実装しようと考えています。

DLして少し使ってみました。いいですねこれ。

既に要望として挙がっていますがユーザー定義関数/命令への対応、それから行番号表示ができるようになると嬉しいです。
期待してます。

>motchy様
ありがとうございます。
行番号については近いうちに終わらせるつもりです。

いくつかの修正を行いました。とりあえず安定したので、これをバージョン1.0とします。
修正点：
・ベースをrainbowからSyntaxHighlighterに変更しました。
・行番号を設定しました。
・ダブルクリックで全選択を可能にしました。
・複数行の文字列の色分けに対応しました。
・特殊記号のエスケープに対応しました。
・色分け速度が大幅に上昇しました。

Google Chromeでダブルクリックで全選択したスクリプトをコピーして
エディタに張り付けると、空行部分に C2 A0（UTF-8の半角空白）が
混入して、正常にコンパイルができないですね。

http://cats.genin.jp/download/get/sample/sample.html
のスクリプトだと、4行目にUTF-8の半角空白が混入します。

また、IE11では全選択時のレイアウトが崩れます。

同じ SyntaxHighlighterを使っている、codetter.comでも発生しているので、
SyntaxHighlighter の問題な気がしますが。

・CSSのフォントファミリ指定を少し改良（もしかしたら、改悪？）してみました。

"Source Code Pro", "Ricty", "Ricty Discord", 'Liberation Mono', Consolas, Courier, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "migu 2m", "migu 1m", "VL ゴシック", "VL Gothic", "メイリオ", Meiryo, "モトヤLシーダ3等幅", MotoyaLCedar, "モトヤLマルベリ3等幅", MotoyaLMaru, "Droid Sans Japanese", monospace;

【CSSの仕様】
左に書いたフォントが優先される。
左に書いたフォントに無い文字（欧文フォントの場合、和文等）は
後に書いたフォントに含まれていた場合、それにより補完される。
ブラウザによっては、
フォントの英語表記と日本語表記どちらかしか認識されないので
日本語の名前が付いている日本語フォントの場合は両方表記する。
日本語名を先に表記する事を推奨。

【変更点とその理由】

・Windowsで日本語フォント指定をしていないと
　ドットフォント（アンチエイリアシングのかからない）MSゴシックが
　読み出されるのでアンチエイリアシングがかかる
　Vista以降の内蔵フォント「メイリオ」

・MacOSXとiOS内蔵の非常に綺麗なフォント「ヒラギノ角ゴProN W3」
　iOSで等幅の欧文は「Courier」か「Courier New」しかないのでこれは元のCSSのまま

・LinuxではIPAフォントやTakaoフォントがデフォルトで内蔵されているOSが多く、
　アンチエイリアシングありのMSゴシックのような
　落ち着いた印象のフォントなのですが、
　コーディングではメイリオのように視認性の高いフォントが好まれる傾向があるので、
　Linuxで比較的多くのOSで内蔵されている中で
　モダンで視認性の高い「VL ゴシック」

・Androidでは等幅の欧文が無いので、等幅欧文付き日本語フォントとして
　4以降（たぶん）で内蔵されている、
　それ以前でも日本の端末には内蔵されている事が多い、
　丸ゴシック体「モトヤLマルベリ3等幅」
　コーディングで丸ゴシックを好む人はおそらく、多くはないので、
　一部の端末に内蔵されている角ゴシックの「モトヤLシーダ3等幅」
　4以前（たぶん）の海外の端末用に「Droid Sans Japanese」

・一部好みでインストールする人がいるフリーフォント等の対応として
　Adobe製でフリーのコーディング欧文フォント「Source Code Pro」
　フリーのコーディング欧文フォント「Inconsolata」をに和文を追加した
　人気のある派生フォントの「Ricty」や「Ricty Discord」
　「M+」というフリーの日本語フォントの
　濁点や半濁点を大きく加工したコーディングフォント
　「migu 2m」と若干の欧文デザイン違いの「migu 1m」
　但し、miguは他のフォント

【CSSのフォントファミリは左に書いた物が優先される事の活用】

・MacでOffice（ワード、エクセル、パワポ）を入れると
　メイリオがインストールされるの他、フリーでダウンロード出来る
　モトヤマルベリやシーダ、VLゴシック等を
　入れている人もいるかと思われるので、
　非常に綺麗な　「ヒラギノ角ゴProN W3」を優先するため、
　他日本語フォントより先に表記。

・欧文フォントに含まれていない日本語の文字は後の表記が適用されるので
　日本語フォントより欧文フォントを先に。

・「migu 2m」や「migu 1m」は和文部分が評価されている印象を受ける他、
　欧文の横幅が狭いのでデザインが崩れやすくなるため
　欧文は他の欧文フォントを使うために、欧文より後に表記

・「Souce Code Pro」は「Ricty Discord」や「Ricty」愛用者で
　嫌いな人もいるが、そのような場合はアンインストールしていると
　考えるのが自然かと思われる他、有名なフリーコーディングフォントとして
　「Ricty Discord」や「Ricty」を入れたが「Souce Code Pro」に乗り換えた
　人にとっては「Ricty Discord」や「Ricty」を
　インストールしたままにしている人が多いかと思われる。また、
　「Souce Code Pro」の方が低ptでの使用時に潰れにくい印象を受けるので
　「Ricty Discord」や「Ricty」より先に表記。

【問題点】

・ウィンドウズのデフォルトフォントレンタリング（GDI)の場合、
　デフォルトでインストールされているフォント以外で
　特に和文フォントは描画がかすれたり、ボケたりするため、
　わざわざ、和文フォントにメイリオ以外を指定する必要があるか？
　（「ヒラギノ角ゴProN W3」や「モトヤLマルベリ3等幅」は別）
　しかしながら、最近のブラウザ上では
　フリーの和文フォントがメイリオよりも綺麗に描画される場合もある
　（ChoromeやOpera等）

・「myrica」や「myarica M」等の和文＆欧文コーディングフォントについては
　和文が異常に細いのが気になる（自分だけでしょうか）、
　欧文はウィンドウズのデフォルトフォントレンタリング（GDI)でも綺麗。
　しかしながら、和文フォントのため、欧文だけを使う事ができないので
　採用は見送り。

・個人的には「Consolas」よりも「Liberation Mono」の方がモダンな印象で
　見やすく感じたので先に表記していますが、
　皆様の意見をお聞きしたいところです。

長文失礼しました。
採用して頂けると幸いです。

>inovia様
詳細なご報告ありがとうございます。
chromeを使用したところバグが確認できました。
ソースコード(html)の
<script type="text/javascript">SyntaxHighlighter.all();</script>
を
<script type="text/javascript">
SyntaxHighlighter.config.space = ' ';
SyntaxHighlighter.all();
</script>
に変更したところchromeでもコピーが正常に行われました。
明日readme.txtに追加し、サンプルも修正します。
ありがとうございます。

>空気様
詳しく書いていただき、ありがとうございます。
開発環境がLinuxなこともあり、フォントについては全く考えていませんでした。
書かれているfont-familyで適応したところ、アンチエイリアスのない状態になりました。
なお、Linux標準ですと、採用されたフォントは「Liberation Mono」のようです。
私はフォントについては、あまり詳しくないので、他の意見が無い限りそのまま採用させていただこうと思います。
明日cssを更新します。
ありがとうございます。

あ、もう一つありました。
タブ文字が半角スペースに変換されてますね。

mes "tab→	←tab"
	mes "←tab"

いえいえ、どういたしまして。
どうしても、私はこういう細かいところが気になってしまうので
採用の方向へ進めて頂けることに感謝します。

早速なのですが、少し変更点が出ました、
Androidにはコーディング用の欧文を搭載している機種もあるようので
（普及（内蔵）率は不明ですが。）
「Droid Sans Mono」というフォントを追加しました。

"Source Code Pro", "Ricty", "Ricty Discord", 'Liberation Mono', Consolas, Courier, "Droid Sans Mono", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "migu 2m", "migu 1m", "VL ゴシック", "VL Gothic", "メイリオ", Meiryo, "モトヤLシーダ3等幅", MotoyaLCedar, "モトヤLマルベリ3等幅", MotoyaLMaru, "Droid Sans Japanese", monospace;

>inovia様
明日shCode.jsを更新します。
ご報告ありがとうございます。

>空気様
フォントを追加しておきます。
ありがとうございます。

これまでに確認されたバグをすべて修正しました。
あと複数の機能を追加しておきました。
とりあえず使えるレベルには安定したと思います。
これ以降は大きな変更が無い限り、更新に関しては報告しません。

	// 	ブロック崩し(3)
	if (coly>=bary)&(bly<(bary+16)) {	; ボールY座標のチェック
	}

; ボールY座標のチェック
の色がつかないですね。
下はエスケープ済みのソース。

	// 	ブロック崩し(3)
	if (coly>=bary)&(bly<(bary+16)) {	; ボールY座標のチェック
	}

>inovia様
ご報告ありがとうございます。
特殊記号の変換が原因でした。
rainbow使用時にもあったのですが、今回は正規表現側で修正しました。
javascriptが標準で否定後読みが出来れば楽なのになぁ。

これって中身を編集できるようにはできないんですか？
リアルタイムに色を更新しているわけではないから無理でしょうか？
しかもクリックしたとき背景が白になるし。(background-colorに黒指定しておけば大丈夫かな？)
ちなみにサンプルをAndroidで見た時の動作なので、windowsなどと、動作が違うかも知れません。
明日、windowsで同じようになるのか調べてみます。

方向性が若干違いますがtry-hsp(あと多分hsproomも)の編集に使ってるACEエディタ用のシンタックスハイライトを公開しています。

http://peppermint.jp/products/hsp/try.html
https://github.com/zakki/try-hsp/blob/master/ace-builds/src-noconflict/mode-hsp.js

>kanamaru様
エディタを目的に作っているのではなく、あくまでもコンセプトは構文の色分けです。
コードの閲覧用なので、編集機能を付ける予定はありません。
HSPのソースコードを紹介するようなサイトで色分け機能を簡単に付けることができる、ということを目的としています。
クリックすると全選択されるのも、コピーを簡単にするための仕様です。
このテキストエリアの背景色および文字色はcssで指定できます。(background-color, color)

>zakki様
こんな便利なものが公開されていたとは知りませんでした。
参考にさせていただきます。

ご参考です。2010年当時のものですが、過去ログに同じ方向性のものがありました。
ニーズは高いようですね、

HSPエディタのような色分けでWEBページに載せたい
http://hsp.tv/play/pforum.php?mode=pastwch&num=34945

>HSPの化石様
既に同じコンセプトの物が存在したとは知りませんでした。
しかも予想以上に高機能で驚きました。
今後の開発でも参考にさせていただきます。

HSP部屋(http://hsproom.me)で使わせていただきました。

http://hsproom.me/program/view/?p=60
などで確認できます。

ライセンス的な問題など、何かありましたらよろしくお願いします。

クリックすると改行が消えてレイアウトが崩れるのは仕様なんでしょうか。
IE11です。

>mjhd様
ご利用いただき、ありがとうございます。
HSP部屋で使っていただけるとは驚きです。
私の作った部分に関してはライセンスはフリーです。
SyntaxHighlighterはMIT LicenseかGPLに従えばいいようで、特に作者等の情報を明示する必要もありません。
http://alexgorbatchev.com/SyntaxHighlighter/about.html
そのため、何の明示も無く組み込んでいただいて構いません。

>tona様
ご報告ありがとうございます。
こちらのIEでも同じ現象を確認しました。
SyntaxHighlighter側の問題と思われますので、しばらく解決策を探してみます。
一応コピーしたときに、改行文字もクリップボードへコピーされますので、そのままエディタに貼り付けても実行できます。
解決しましたら私のサイトの方で更新致します。

私も「highlight.js」というJavascriptライブラリのHSP用色分けソースを書いていました。
すでに作者さんに送ったのでv9.0.0から使えます(DLページで「HSP」のチェックボックスをONにしてください)
・highlight.js https://highlightjs.org/
・Add HSP language by prince-0203 · Pull Request #991 · isagalaev/highlight.js · GitHub https://github.com/isagalaev/highlight.js/pull/991

各色分けスクリプトを比較できるページを作りました。
https://prince-0203.github.io/hsp-syntaxhighlight/
↑のページのソースコードはGitHubにありますので導入の際はご参考に。
https://github.com/prince-0203/prince-0203.github.io/tree/master/hsp-syntaxhighlight

highlight.jsを使用してHSPTV!掲示板のスクリプトを色分けするChrome/Firefox用のユーザースクリプトを今書いてます。

>prince様
highlight.jsのサイトにHSPがあるとは知りませんでした。
比較サイトも見ましたが、そもそもこんなにたくさんあったことに驚きです。

>>highlight.jsを使用して
さっそく使わせていただいています。

久しぶりにiOSやMacの等幅フォントを調べていたら
少し変更点が出ましたので、CSSに採用していただけたら幸いです。

"Source Code Pro", "Ricty", "Ricty Discord", "Menlo", Monaco, 'Liberation Mono', Consolas, "Droid Sans Mono", Courier, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "migu 2m", "migu 1m", "VL ゴシック", "VL Gothic", "メイリオ", Meiryo, "モトヤLシーダ3等幅", MotoyaLCedar, "モトヤLマルベリ3等幅", MotoyaLMaru, "Droid Sans Japanese", monospace;

iOS7以降や新しめのMacOSXで搭載された、
0とOやIとl等が見分けられるフォント
「Menlo」

少し古いMacOSXから搭載されている
0とOやIとl等が見分けられるフォント
「Monaco」
を追加しました。

優先順位についてはWindowsには無いフォントなので
WindowsやWIN/MAC両用フォントより高くしました。

「Courier」は等幅ですが、
0とOやIとl等が見分けられる訳では無いので
欧文の中では優先順位を最低に変更しました。

>空気様
細かい点までご報告いただき、ありがとうございます。
サンプルページとダウンロードファイルを更新しました。