Cloud9 플러그인을 만들어 보았습니다.

Cloud9 플러그인 만들기

최근 개발은 가능한 한 Cloud9에서 수행됩니다.
(아직 aws가 아닌 분을 사용하고 있습니다)

플러그인을 만들 수 있다는 것을 알았으므로 시도해 보겠습니다.

htps : // cぉd9-sdk. 어 dme. 이오 / 드 cs / ぇ-c ぉ d9-c ぃ
공식 문서를 참조합니다.
"Create Your First Package"가 도중부터 Todo,,,

환경설정

Plugin Manager 사용

메뉴에서 Cloud9/Preferences를 열고Experimental/SDK 의 Plugin Manager 를 on 으로 합니다.

플러그인 프로젝트 만들기

메뉴에서 File/New Plugin/Empty Plugin를 선택하면,
빈 프로젝트의 폴더나 파일이 생성됩니다.

이번 플러그인은 ikezawa라는 이름으로 하기로 했습니다.
(후일 어쨌든 관련하는 재료로 할 예정)


plugins 폴더의 폴더 이름을 변경합니다.
(이미지는 변경 후입니다)
plugin.js 의 세 번째 줄과 38번째 줄의 myplugin 를 ikezawa 로 변경합니다.
(마지막으로 plugin.js 전체를 나열합니다)

플러그인 개발

플러그인 프로그램에 필요한 종속성을 추가하려면 두 번째 줄을 다음과 같이 변경합니다.

main.consumes = ["Plugin", "commands", "tabManager"];

이름
설명


플러그인
플러그인 생성자

tabManager
탭을 열고 조작하는 기능 제공

commands
명령을 작성하는 기능 제공


사용하기 쉽도록 7~9행에 변수를 추가합니다.

var Plugin = imports.Plugin;
var commands = imports.commands;
var tabs = imports.tabManager;

새 명령 작성

이번 플러그인을 실행하는 트리거를 명령으로 추가합니다.
Command-Shift-J(Ctrl-Shift-J)를 트리거로 하여 exec으로 정의된 함수가 실행됩니다.

/***** Add Command *****/
commands.addCommand({
　　name: "ikezawa_insert",
　　　　bindKey: { 
　　　　　　mac: "Command-Shift-J", 
　　　　　　win: "Ctrl-Shift-J" 
　　　　},
　　　　exec: function(){ 
　　　　　　alert("ikezawa!");
　　　　}
}, plugin);

실행 가능한지 여부를 결정하는 메서드 추가

이전의 addCommand에 전달한 객체에 다음을 추가합니다.

isAvailable: function(editor) {
　　if (editor && editor.ace)
　　　　return !editor.ace.selection.isEmpty();
　　return false;
 }

이 명령은 편집기가 존재하고 무언가가 선택된 경우에만 작동합니다.

실행 확인

Tools/Developer/Start in Debug Mode 에서 디버그 모드를 엽니다.



Cloud9는 디버그 모드에서 다른 탭(윈도우)으로 새로 시작합니다.


Open Plugin Explorer 를 클릭하고 자신이 만든 플러그인 ikezawa 를 선택하면 활성화됩니다.

Command-Shift-J를 누르면 경고가 표시됩니다.

일반 모드로 플러그인을로드하는 방법

Cloud9/Open Your Init Script를 선택합니다.
init.js가 열리므로 다음과 같이 작성합니다.

services.pluginManager.loadPackage([
    "~/.c9/plugins/ikezawa/package.json",
]);

브라우저를 다시 로드하면 플러그인이 로드됩니다.

좀 쓰자.

과연 이것만으로는 재미있지 않기 때문에, 선택하고 있는 텍스트내에 ikezawa 라고 하는 캐릭터 라인이 들어가 있는지 판정하는 것을 구현해 보았습니다.

plugin.js

define(function(require, exports, module) {
  main.consumes = ["Plugin", "commands", "tabManager"]
  main.provides = ["ikezawa"]
  return main

  function main(options, imports, register) {
    var Plugin = imports.Plugin
    var commands = imports.commands
    var tabs = imports.tabManager

    /***** Initialization *****/
    var plugin = new Plugin("Ajax.org", main.consumes);
    var emit = plugin.getEmitter()

    function load() {

    }

    /***** Add Command *****/
    commands.addCommand({
      name: "ikezawa_insert",
      bindKey: {
        mac: "Command-Shift-J",
        win: "Ctrl-Shift-J"
      },
      isAvailable: function(editor) {
        if (editor && editor.ace)
          return !editor.ace.selection.isEmpty()
        return false
      },
      exec: function() {
        // フォーカスされているタブから選択範囲と行ごとの文字列を取得
        const range = tabs.focussedTab.editor.ace.selection.getRange()
        const lines = tabs.focussedTab.editor.ace.selection.doc.$lines
        // 文字列を作成
        var str = lines.slice(range.start.row, range.end.row + 1).join('\n')
        str = str.slice(range.start.column, str.length - (lines[range.end.row].length - range.end.column))
        // 結果表示
        console.log(str) //普通にブラウザコンソールに表示される
        const result = str.toLowerCase().indexOf('ikezawa') >= 0 ? 'Yes!' : 'No...'
        alert(result + '\n\n-- Your selection --\n' + str)
      }
    }, plugin)

    /***** Methods *****/



    /***** Lifecycle *****/

    plugin.on("load", function() {
      load()
    })
    plugin.on("unload", function() {

    })

    /***** Register and define API *****/

    plugin.freezePublicAPI({

    })

    register(null, {
      "ikezawa": plugin
    })
  }
})

수정한 후 디버그 모드에서 열려 있는 Cloud9 환경의 오른쪽 상단에 있는 Reload ikezawa 를 클릭하여 플러그인을 다시 로드합니다.



선택한 문자열과 ikezawa가 들어 있는지 여부에 대한 결정이 표시됩니다.

감상

비교적 쉽게 플러그인을 만들 수있었습니다. 개발이나 디버깅이 나름대로 부드럽게 할 수있는 것이 좋은 곳입니다.

다만, 문서는 갖추어져 있는 것 같아 갖추어지지 않기 때문에(기술이 낡거나) 하기 때문에, API 레퍼런스와 콘솔이나 디버거와 망설이면서 개발하는 각오는 필요할 것 같습니다.

계속 만져봐 ikezawa 의 이름에 부끄러워하지 않는 무언가를 만들 수 있으면 좋구나.

옛날, 친구들과 기세로 만든 것에의 링크를 페타리.
"이케자와"와 중얼거림만으로 치유되는 슬랙 채널