[Ubuntu18.04 표준 기능]gnome-shell의 확장 기능 만들기 (그 1)

16732 단어 UbuntuJavaScriptgnome
  • 그 1
  • 저것
  • 셋째
  • Ubuntu18.04가 정식으로 발표된 지 한 달이 되었다.
    Ubuntu18.04부터 표준 데스크톱 환경은 Unity에서gnome-shell로 바뀌었다.
    하지만 이 gnome-shell은 잘 들리지 않는 소문이다.
  • 나는 더 이상 gnome-shell을 쓰지 않겠다.
  • Umm, GNOME Shell Has a Rather Big Memory Leak
  • GNOME 3 Is Bad For Your Health As a Developer
  • 사실 나도 메모리 사용량을 좀 더 줄이고 싶지만, 그래도 유니티에 비해 확장성이 뛰어난 gnome-shell이 더 편리하다.

    gnome-shell이 뭐예요?


    데스크톱 환경이 달라진다고 하지만 초기 상태에서는 외관과 Ubuntu 16.04는 거의 변하지 않았다.
    개인적으로 큰 변경점은 다음과 같은 두 가지라고 생각합니다.
  • 표준 키보드 단축키는 Ubuntu16.04와 달리 취향에 따라 사용자 정의 가능
  • gnome-shell 확장을 설치하기 쉽습니다!
  • 설치를 확장하는 방법은 매우 간단하다.좋아하는 브라우저 확장 기능을 설치한 후 확장 목록 페이지에서 좋아하는 기능을 선택하면 버튼을 클릭합니다!

    참고로 저는 총 7개의 확장 기능을 추가했습니다.너무 많이 놓으면 책상이 일어나는 데 시간이 오래 걸리기 때문에 적당히...
    ↓ 자신의 데스크톱 환경이 바로 이런 느낌이다.

    설치된 확장자:
    - Dash to dock
    - Icon hider
    - Noannoyance
    - Openweather
    - User themes
    - System-monitor
    - Dropbox(자작)
    Ubuntu 16.04 때와는 완전히 다르다.
    아, 데스크톱에 검은색 문자로 표시된 시계는gnome-shellconky의 독립된 데스크톱 소부품 엔진을 사용하지 않습니다.만약 시간이 있다면, 나는 이것에 관한 보도를 쓸 계획이다.
    gnome-shell은 자신이 좋아하는 확장 기능을 추가할 수 있기 때문에 모든 사람의 취향에 따라 데스크톱을 맞춤형으로 만들 수 있습니다.다음은 몇 가지 사용자 정의 예시를 소개한다.
  • Ubuntu16.04LTS의 GNOME Shell을 Mac 스타일로 사용자 정의
  • [Ubuntu18.04LTS] Windows Like 데스크톱 만들기 [메모]
  • Customizing Gnome 3 (Shell)
  • 스스로 기능을 확장하기로 결심한 이유


    gnome-shell의 확장 기능 요약 페이지에서 상당한 수량의 확장 기능을 찾을 수 있지만, 실제로는 대부분 현재의 gnome-shell 버전을 지원하지 않습니다.
    따라서 실제로 Ubuntu18.04에서 이동하는 확장 기능의 수량은 제한되어 있다.
    따라서 자신의 수요에 더욱 부합되는 맞춤형 제작을 위해서는 반드시 자체 제작 확장 기능이 필요하지만 실제 자체 제작 방법을 조사해도 보도는 전혀 환영을 받지 못한다.
    몇 편의 기사가 자신이 제작한 도입부를 언급했지만 안타깝게도 한 편의 기사는 자신이 실제 제작한 오리지널 확장 기능을 잘 보여주고 이를 공개하기 전의 과정을 보여준다.
    따라서 이 글은 gnome-shell이 이미 설치된 상태라고 가정하고 gnome-shell 확장 기능을 만드는 일련의 과정을 소개한다.

    이번에 만든 거.


    이번에는 Dropbox 동기화 상태를 첫 페이지에 표시할 수 있는 확장 기능을 만들고 싶습니다.

    미리 설치한 물건

  • Dropbox의 Linux 공식 클라이언트
  • Dropbox 클라이언트를 사용하지 않은 사람에게 사용 방법을 간단히 설명하는 경우
  • dropbox start 동기화 시작
  • dropbox stop 동기화 중단
  • dropbox running 동기화 상태(0 또는 1) 획득
  • 이런 느낌으로 사용하세요.
    사실 이 소프트웨어를 설치하면 Dropbox의 동기화 상태가 상단 표시줄에 표시되지만 왜 안 뜨는지 알 수 없을 때 맞습니다. 표시해도 틀린 것 같습니다.
    따라서 정확한 상태를 표시하기 위해 gnome-shell의 확장 기능을 직접 만듭니다.

    준비


    우선gnome-shell에 첨부된 도구를 사용하여 확장 기능의 모형을 만듭니다.
    $ gnome-shell-extension-tool --create-extension
    
    Name should be a very short (ideally descriptive) string.
    Examples are: "Click To Focus",  "Adblock", "Shell Window Shrinker".
    
    Name: dropbox
    
    Description is a single-sentence explanation of what your extension does.
    Examples are: "Make windows visible on click", "Block advertisement popups"
                  "Animate windows shrinking on minimize"
    
    Description: Dropbox status indicator
    
    Uuid is a globally-unique identifier for your extension.
    This should be in the format of an email address ([email protected]), but
    need not be an actual email address, though it's a good idea to base the uuid on your
    email address.  For example, if your email address is [email protected], you might
    use an extension title [email protected].
    Uuid [Dropbox@dynabook-T55]:
    
    여기서 확장 기능의 기본 설정을 사용합니다.각 질문 항목의 내용은 다음과 같다.
  • Name: 확장자
  • 설명: 확장 (1 줄)
  • Uuid: 확장 식별자
  • Uuid의 값은 기본적으로 자유롭지만, 이후의 디버깅을 위해 "<확장 기능의 이름>@<메일 주소의 @를 로 바꿉니다."는 것은 나무랄 데가 없습니다.
    설정이 끝나면 $XDG_DATA_HOME/gnome-shell/extensions라는 디렉터리에서 이전 Uuid에서 지정한 이름을 가진 디렉터리를 생성합니다.
    $ ls -lF $XDG_DATA_HOME/gnome-shell/extensions/[email protected]
    total 20K
    drwxr-xr-x  2 kogia-sima kogia-sima 4.0K May 29 20:46 ./
    drwxrwxr-x 12 kogia-sima kogia-sima 4.0K May 29 20:46 ../
    -rw-r--r--  1 kogia-sima kogia-sima 1.5K May 29 20:46 extension.js
    -rw-r--r--  1 kogia-sima kogia-sima  106 May 29 20:46 metadata.json
    -rw-r--r--  1 kogia-sima kogia-sima  172 May 29 20:46 stylesheet.css
    
    확장자를 보면js야.css 등은 모두 웹 페이지에서 흔히 볼 수 있는 확장자를 배열하고 있다.
    네, gnome-shell은 웹 페이지를 편집하는 것과 같은 인상으로 확장 기능을 만들 수 있습니다.
    웹과 엔지니어들에게는 반가운 일이고 자바스크립트가 다양한 장소에서 이용되기 때문에 많은 사람들에게 제로부터 공부하는 것보다 상당한 스트레스를 줄일 수 있을 것 같다.

    디버그 환경 시작


    확장 기능을 개발할 때 디버깅 환경을 자주 시작해서 잘못된 내용을 표시하는 것이 좋습니다.
    현재 상태에서 다른 터미널을 열거나 gnome-terminal의 경우 Ctrl + Shift + T에서 다른 옵션 카드에 다른 세션을 생성합니다.
    세션에서 다음 명령을 수행합니다.
    sh -c 'gnome-shell --replace 2>&1 |grep <拡張機能の名前> -A 2'
    
    이것은 원래 실행되었던 gnome-shell 프로세스를 닫고 터미널에서 새 프로세스를 생성합니다.즉, 표준 출력과 표준 오류 출력의 내용이 터미널에 표시됩니다.
    로그아웃하기 전에 이 세션을 닫지 마십시오.
    gnome-shell 프로세스가 중단되면 키보드 작업이 응답할 수도 없고, 로그아웃할 수도 없고, 심지어 어떤 경우에도 닫을 수 없습니다.세션을 절대 닫지 마십시오.
    nohup 명령을 사용하면 걱정하지 않아도 될 것 같지만 사용 방법은 잘 모르겠어요.

    모형을 이동해 보세요.


    제작된 모형을 유효하게 하려면 아래 명령을 실행하십시오.활성화하면 톱니바퀴 아이콘이 맨 위에 표시됩니다.
    $ gnome-shell-extension-prefs
    
    톱니바퀴 아이콘을 누르면 화면 중앙에 Hello, world! 이 표시됩니다.

    기본 소스 코드 보기


    그럼 원본 코드가 어떻게 된 건지 볼게요.
    extension.js
    
    const St = imports.gi.St;
    const Main = imports.ui.main;
    const Tweener = imports.ui.tweener;
    
    let text, button;
    
    function _hideHello() {
        Main.uiGroup.remove_actor(text);
        text = null;
    }
    
    function _showHello() {
        if (!text) {
            text = new St.Label({ style_class: 'helloworld-label', text: "Hello, world!" });
            Main.uiGroup.add_actor(text);
        }
    
        text.opacity = 255;
    
        let monitor = Main.layoutManager.primaryMonitor;
    
        text.set_position(monitor.x + Math.floor(monitor.width / 2 - text.width / 2),
                          monitor.y + Math.floor(monitor.height / 2 - text.height / 2));
    
        Tweener.addTween(text,
                         { opacity: 0,
                           time: 2,
                           transition: 'easeOutQuad',
                           onComplete: _hideHello });
    }
    
    function init() {
        button = new St.Bin({ style_class: 'panel-button',
                              reactive: true,
                              can_focus: true,
                              x_fill: true,
                              y_fill: false,
                              track_hover: true });
        let icon = new St.Icon({ icon_name: 'system-run-symbolic',
                                 style_class: 'system-status-icon' });
    
        button.set_child(icon);
        button.connect('button-press-event', _showHello);
    }
    
    function enable() {
        Main.panel._rightBox.insert_child_at_index(button, 0);
    }
    
    function disable() {
        Main.panel._rightBox.remove_child(button);
    }
    
    첫 번째 imports 부분에서 필요한 모듈을 읽고 있습니다.Node.js와 PHP 등에서 말한 리퀴어와 거의 같은 캐릭터라고 볼 수도 있다.
    init 함수는gnome-shell 프로세스를 생성한 후 바로 호출되는 함수이고,enable 함수를 호출합니다.
    또한 enable 함수는 확장 기능이 활성화될 때도 불린다.따라서 버튼 표시 등 UI와 관련된 설정이 함수 내에서 수행됩니다.
    확장을 사용하지 않거나gnome-shell 프로세스가 끝날 때disable 함수를 호출합니다.
    사실 이 모형을 설명할 수 있지만, 이번 확장 기능은 이 코드를 거의 사용하지 않기 때문에 상세한 설명을 생략할 수 있도록 허락해 주십시오.
    모형 코드에 대한 상세한 설명을 알고 싶은 사람은 아래 페이지를 참고할 수 있습니다.
    http://gihyo.jp/admin/serial/01/ubuntu-recipe/0492?page=2

    확장 기능 사양 결정


    어떤 소프트웨어 개발에 놓아두든지 요구를 잘 정의하고 규격서를 만들어야 한다.
    이번 확장 기능에서
  • Dropbox의 로컬 폴더가 원격으로 동기화되면 상단 표시줄에 Dropbox 아이콘이 표시되고 동기화되지 않을 때 숨겨집니다.
  • 상단 표시줄에서 Dropbox 아이콘을 클릭하면 두 개의 Open folder와 Turn off 버튼이 포함된 패널 메뉴가 나타납니다.
  • "Open folder"단추를 누르면 로컬 동기화 대상 디렉터리를 열 수 있습니다.
  • Dropbox 동기화 중단 버튼 클릭
  • 이것을 목표로 삼다.

    TO BE CONTINUED...


    계속 -> 저것

    좋은 웹페이지 즐겨찾기