OneNote 추가 기능 (Add-in) 만들기

우리 회사는 팀 노트를 공유하기 위해 Microsoft Office의 OneNote를 자주 사용한다. 최근 OneNote에 추가 기능을 개발하면 좋겠다는 얘기가 나왔고, 그걸 내가 도맡아 하기로 했는데 인터넷에 자료가 많지 않아서 생각보다 애를 먹었다. 구글에 검색해보면 Word, Excel, PowerPoint의 추가 기능 개발과 관련된 글들은 많지만 OneNote와 관련된 자료는 찾아보기 힘들었다. 그도 그럴 것이 실제로 OneNote에서의 추가 기능 개발은 Word나 Excel 보다 훨씬 제한적이었다. VBA를 이용한 간단한 매크로를 만들 수도 없고, VSTO도 사용할 수 없다 (역사가 길지 않아서 그런가..?)

이것 저것 찾아본 결과 다음과 같은 두 가지 방법을 찾았다.

JavaScript API:
- Office Add-ins 프레임워크의 일부로, 공식 사이트에서 가장 먼저 찾을 수 있는 추가 기능 개발 방법입니다.
- 웹 기술 (HTML, CSS, JavaScript)을 기반으로 합니다.
- Windows, macOS, 웹 등 다양한 플랫폼에서 추가 기능을 실행할 수 있게 합니다.
COM Add-ins:
- 좀 더 전통적인 방법입니다. (그만큼 개발도 복잡하고 어렵습니다.)
- .NET과 같은 개발 환경을 사용합니다.
- 주로 Windows 환경에 특화되어 있으며, 데스트톱 버전의 Office 애플리케이션에서 사용됩니다.

즉, 데스크톱 버전에서는 COM Add-ins를, 그 외에는 JavaScript API를 사용하면 될 것 같다.

이번 글에서는 JavaScript API를 이용한 추가 기능을 만드는 방법에 대해서 알아보고, 나중에 기회가 되면 COM Add-ins도 작성할 계획이다.

준비물

Node.js (LTS 버전)
Yeoman, Yeoman generator for Office Add-ins

npm install -g yo generator-office

OneNote 웹버전 (데스크톱 버전에서는 사용 불가합니다!)

프로젝트 생성하기

다음과 같은 명령어를 실행해서 프로젝트를 생성해주세요.

yo office

그러면 다음과 같은 화면이 나올텐데, 원하시는 기능에 맞춰서 선택해주시면 됩니다. 저는 "Office Add-in Task Pane Project" → "JavaScript" → [프로젝트 이름] → "OneNote". 이렇게 선택했네요.

그럼 프로젝트가 생성 될텐데 눈여겨볼만한 파일들은 다음과 같습니다.

./manifest.xml 우리가 만들 추가 기능의 세팅값이 들어있습니다. 실제로 추가 기능을 불러올 때 해당 파일을 불러오시면 됩니다.
./src/taskpane 우리가 실제로 수정할 html, css, js 파일이 들어있습니다.

기능 구현하기

이제 taskpane 폴더에 있는 파일들에 기능을 구현하시면 됩니다. 저는 페이지의 개수를 세주는 간단한 작업창을 만들기 위해 다음과 같이 수정하였습니다.

taskpane.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Page Counter</title>
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>
    <link href="taskpane.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="header">
        <h1 id="title">Page Counter</h1>
    </div>
    <div id="body">
        <span id="button">Get count</span>
        <div>
            <span id="pageCount"></span>
        </div>
    </div>
</body>

</html>

taskpane.css

body {
    width: 100%;
    height: 100%;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

#header {
    width: 100%;
    background-color: #761ba7;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

#body {
    padding: 20px;
}

#button {
    background-color: #c461e4;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 25px;
    box-shadow: 0 9px #999;
    transition-duration: 0.4s;
  }
  
  #button:hover {
    background-color: #8f2fb9;
    box-shadow: 0 5px #666;
    transform: translateY(-4px);
  }
  
  #button:active {
    background-color: #8f2fb9;
    box-shadow: 0 2px #666;
    transform: translateY(4px);
  }
  

#pageCount {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
    color: #333;
}

taskpane.js

Office.onReady((info) => {
  if (info.host === Office.HostType.OneNote) {
    document.getElementById("button").onclick = getPageCount;
  }
});

export async function getPageCount() {
  OneNote.run(function (context) {
    var pages = context.application.getActiveSection().pages;           
    pages.load('id,title');

    return context.sync()
      .then(function () {                
        var pageCount = 0;
        $.each(pages.items, function (index, object) {
          pageCount++;
        });
        $('#pageCount').text(pageCount + ' pages');
      })
      .catch(function (error) {
        onError(error);
      });
  });
}

function onError(error) {
  console.log("Error: " + error);
}

JavaScript API의 객체 모델과 메서드들은 공식 문서를 참고하였습니다.

추가 기능 실행해보기

Office Add-ins가 웹 기반이라 먼저 웹 서버가 있어야 합니다. 간단히 테스트 목적으로는 로컬 서버를 돌릴 수 있습니다.

cd [프로젝트 폴더 경로]
npm run dev-server

서버를 실행시키고 OneNote 웹에 들어가서

Insert → Office Add-ins → Update My Add-in → Browse → manifest.xml 추가

하시면 Home 탭에서 Show Taskpane을 통해 아까 만든 작업창을 실행시킬 수 있습니다.

Office Add-ins의 문제점

웹 서버 또는 클라우드 기반 호스팅 서비스가 필요하다.
데스크톱 버전에서 사용 불가. (OneNote 2016 이후 버전에서는 지원된다 하네요)

사실 위 두 가지 문제점 때문에 저희도 Office Add-ins를 버리고 COM Add-ins로 넘어갔네요..

참고 자료:

https://learn.microsoft.com/en-us/office/dev/add-ins/onenote/

'etc.' 카테고리의 다른 글

[Jupyter Notebook] Bad file descriptor (C:\c\zeromq_1616055400030\work\src\epoll.cpp:100) (0)	2024.02.28
[Anaconda Prompt] OSError: [WinError 123] 파일 이름, 디렉터리 이름 또는 볼륨 레이블 구문이 잘못되었습니다 (0)	2024.02.28
한글 폴더 경로로 생기는 문제 해결법 (1)	2024.02.26

🚢

OneNote 추가 기능 (Add-in) 만들기 - JavaScript API

준비물

프로젝트 생성하기

기능 구현하기

추가 기능 실행해보기

Office Add-ins의 문제점

'etc.' 카테고리의 다른 글

티스토리툴바

OneNote 추가 기능 (Add-in) 만들기 - JavaScript API

준비물

프로젝트 생성하기

기능 구현하기

추가 기능 실행해보기

Office Add-ins의 문제점

'etc.' 카테고리의 다른 글

'etc.' Related Articles

티스토리툴바