【메모 효율화】Scrapbox를 Apple 순정 메모 수준의 간편함으로 사용하는 방법 (Chrome PWA & 확장 기능)

(이 기사에서는 PC에서 Scrapbox를 사용한다고 가정합니다)

Scrapbox란?

개인이든 팀이든 이용할 수 있는 정보 공유 서비스입니다. 계층 구조로 정리하는 것이 아니라 위키처럼 정보끼리를 연결해 정리하는 스타일로, 사고의 흐름에 맡기고 자유롭게 쓸 수 있는 것이 좋은 곳이라고 생각합니다.

Scrapbox

Scrapbox를 더 쉽게 사용하고 싶습니다!

Scrapbox는 클라우드 도구이므로 브라우저에서 사용하는 것이 기본입니다 (타사 앱 제외). 그러나 브라우저에서 매번 액세스하는 것도 약간 번거롭기 때문에 이번에는이 문제를 해결하고 싶습니다.

Chrome에는 웹 앱을 OS에 설치하고 네이티브 앱처럼 사용할 수 있도록 하는 Progressive Web Apps(PWA)라는 편리한 기능이 있습니다.

Scrapbox를 독립 앱화한다.

Scrapbox ( htps : // sc 등 p 보 x. 이오/)에 Chrome으로 액세스

Chrome 오른쪽 상단의 '...'에서 'Install Scrapbox'를 찾아 클릭합니다. (아래 그림에서 Install Qiita가 되어 있는 곳입니다)

이제 독립 앱화되어 있기 때문에 Mac이라고 스포트라이트 검색 [Cmd + Space]에 걸릴 것입니다. 이제 어디서나 Scrapbox를 열 수 있습니다.

단축키 추가

(추기 2021/12/31: 이하의 순서로 쇼트 컷을 자작해도 좋지만, Vim풍 키 바인드로 Chrome을 조작할 수 있다 Vimium 라고 하는 플러그인이 매우 사용하기 쉽기 때문에 추천입니다.)

기동은 빨라졌지만, 노트의 신규 작성까지 할 수 있으면 간단하게 하고 싶네요. 다음은 PWA에서도 Chrome 확장 프로그램을 사용할 수 있으므로 Chrome 확장 프로그램에서 Scrapbox 바로 가기를 추가합시다.

Chrome 확장 프로그램은 디렉토리를 만들고 그 안에 두 개의 파일을 만드는 것만 큼 간단합니다.

manifest.json (Chrome 확장 프로그램 설정 파일)

{
  "manifest_version": 2,
  "name": "myShortcutsScrapbox",
  "description": "Shortcuts for Scrapbox",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": [
        "https://scrapbox.io/*"
      ],
      "js": [
        "content.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}

content.js

window.onload = function () {
    document.addEventListener('keydown', function (e) {
        if (e.ctrlKey == true) {
            switch (e.keyCode) {
                case 188:
                    // Key: (ctrl +) ","
                    document.getElementsByClassName('project-home')[0].click();
                    return false;
                case 190:
                    // Key: (ctrl +) "."
                    document.getElementsByClassName('new-button')[0].click();
                    return false;
            } 
        }
    });
}

내가 원했던 것은 「신규 작성」과 「홈으로 돌아온다」의 2개뿐이었으므로 content.js는 이렇게 되어 있습니다만, 자신에 맞추어 좋아하게 커스터마이즈 해 주세요.

Chrome 확장 프로그램 로드

chrome://extensions/로 이동하여 왼쪽 상단에있는 "Load Unpackd"(일본어로 "패키징되지 않은 확장 기능로드")를 클릭하여 방금 만든 두 개의 파일이 들어있는 디렉토리를 선택하십시오. 로드합니다. 로드하면 Scrapbox에서 자작 신규 작성 단축키 (Crtl + m)가 효과가 있다고 생각하므로 한 번 시도해보십시오.

요약

조금 궁리해 보았으므로 Qiita에 정리해 보았습니다. 좋은 Scrapbox 생활을!

＊참고＊
Chrome PWA로 Scrapbox를 독립적으로 앱화

추가
2020/06/27 : 기존의 바로 가기로 덮여 있었기 때문에 ctrl + ,와 ctrl + .로 변경했습니다.
2020/07/06: 조금 보충. ScrapBox는 마지막 줄 아래에 한 줄 자동으로 추가 해주기 때문에 Mac은 "Ctrl + m"에서 일본어 변환 확정, "Ctrl + n"으로 다음 줄로 이동. 의 2개를 사용하면 Enter 키를 많이 사용하지 않아도 되므로 좋을지도 모릅니다.