javascript:ace [ともやん・どっと・ねっと]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
<html>
  <script src='/_media/javascript/ace/src-noconflict/ace.js'></script>
  <script src="/_media/javascript/ace/src-noconflict/ext-static_highlight.js"></script>
  <!--[if lt IE 9]>
    <script src="/_media/javascript/ace/src-noconflict/ext-old_ie.js"></script>
  <![endif]-->
  <script src="/_media/javascript/ace/src-noconflict/mode-json.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/mode-html.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/mode-javascript.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/ext-emmet.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/ext-language_tools.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/snippets/text.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/snippets/javascript.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/snippets/html.js"></script>
  <script>
    jQuery(function($) {
      const editor = ace.edit("ace_editor");
      editor.setTheme("ace/theme/chrome");
      editor.session.setMode("ace/mode/javascript");
      editor.setValue(editor.getValue().trim(), -1);
      const lines = editor.getSession().getDocument().getLength();
      editor.setOptions({maxLines: lines});
    });
  </script>
  <style>
    #ace_editor {
      margin-bottom: 20px;
    }
  </style>
</html>
====== Ace - The High Performance Code Editor for the Web ======
Ace はJavaScriptで記述された、Webシステムに組み込み可能なコードエディタです。\\
\\
本家: [[https://ace.c9.io/|Ace - The High Performance Code Editor for the Web]]\\
ソースコード: [[https://github.com/ajaxorg/ace|GitHub - ajaxorg/ace: Ace (Ajax.org Cloud9 Editor)]]\\

===== エディタデモ =====
<WRAP prewrap 100% #ace_editor>
%%/**
 * In fact, you're looking at ACE right now. Go ahead and play with it!
 *
 * We are currently showing off the JavaScript mode. ACE has support for 45
 * language modes and 24 color themes!
 */

function add(x, y) {
    var resultString = "Hello, ACE! The result of your math is: ";
    var result = x + y;
    return resultString + result;
}

var addResult = add(3, 2);
console.log(addResult);%%
</WRAP>
<code html>
  <script src='/_media/javascript/ace/src-noconflict/ace.js'></script>
  <script src="/_media/javascript/ace/src-noconflict/ext-static_highlight.js"></script>
  <!--[if lt IE 9]>
    <script src="/_media/javascript/ace/src-noconflict/ext-old_ie.js"></script>
  <![endif]-->
  <script src="/_media/javascript/ace/src-noconflict/mode-json.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/mode-html.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/mode-javascript.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/ext-emmet.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/ext-language_tools.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/snippets/text.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/snippets/javascript.js"></script>
  <script src="/_media/javascript/ace/src-noconflict/snippets/html.js"></script>
  <script>
    jQuery(function($) {
      const editor = ace.edit("ace_editor");
      editor.setTheme("ace/theme/chrome");
      editor.session.setMode("ace/mode/javascript");
      const lines = editors[i].getSession().getDocument().getLength();
      editor.setOptions({maxLines: lines});
    });
  </script>
</code>

===== インストール =====

==== ビルド済みファイルからのインストール ====
ビルド済みファイルを取得する。
<code>
$ git clone https://github.com/ajaxorg/ace-builds.git
</code>

==== ソースコードからのインストール ====
Ace をソースからビルドするには [[javascript:nodejs|node.js]] が必要です。\\
\\
ソースを取得する。
<code>
$ git clone git://github.com/ajaxorg/ace.git
</code>

npm (node package manager) で Ace のビルドに必要な依存パッケージをインストールする。
<code>
$ cd ace
$ npm install
</code>
※npm は ace ディレクトリ直下の package.json を参照して自動でインストールしてくれます。

Ace をビルドする。
<code>
$ make build
</code>

ビルドが終わると実行に必要なファイル群が ace/build に生成されます。

=== 更新 ===
<code>
$ cd ace
$ git pull
$ make build
</code>

===== //#region [リージョンの説明] 〜 //#endregion までをデフォルトで折り畳む方法 =====
実際のデモは以下にある。\\
[[javascript:ide|IDE Labo - 総合開発環境の実験的実装]]\\
<code javascript>
  //#region [Ace Editor fold all region]
  isCommentFold = (line) => {
    var isAFold = false;
    if (/^\s*(\/\*|\/\/)#?region\b/.test(line)) { isAFold = true; }
    if (/\/\/(.*)\{/.test(line)) { isAFold = true; }
    return isAFold;
  }
  ace.EditSession.prototype.foldAllRegion = function(startRow, endRow, depth) {
    if (depth == undefined)
      depth = 100000; // JSON.stringify doesn't hanle Infinity
    var foldWidgets = this.foldWidgets;
    if (!foldWidgets)
      return; // mode doesn't support folding
    endRow = endRow || this.getLength();
    startRow = startRow || 0;
    for (var row = startRow; row < endRow; row++) {
      if (foldWidgets[row] == null)
        foldWidgets[row] = this.getFoldWidget(row);
      if (foldWidgets[row] != "start")
        continue;
      if (!isCommentFold(this.getLine(row))) continue
      var range = this.getFoldWidgetRange(row);
      // sometimes range can be incompatible with existing fold
      // TODO change addFold to return null istead of throwing
      if (range && range.isMultiLine()
          && range.end.row <= endRow
          && range.start.row >= startRow) {
        row = range.end.row;
        try {
          // addFold can change the range
          var fold = this.addFold("...", range);
          if (fold)
            fold.collapseChildren = depth;
        } catch(ex) {}
      }
    }
  };
  //#endregion
  
  jQuery(function($) {
    const editor = ace.edit("ace_editor");
    editor.setTheme("ace/theme/chrome");
    editor.session.setMode("ace/mode/javascript");
    const lines = editors[i].getSession().getDocument().getLength();
    editor.setOptions({maxLines: lines});
    
    // #region をデフォルトで折り畳む
    editor.session.foldAllRegion();
  });
</code>