소개

기술 작업에서는 제품 문서에서 메모를 받을 때까지 markdown의 사용 범위가 넓어지고 있습니다. 그 때문에, 거기서 사용되는 서비스·제품에서는 markdown의 서포트가 진행되고 있습니다만, 휘두르고 업무계의 서비스·제품을 바라보면, markdown의 그림자도 형태도 없습니다.

markdown으로 끝나는 문서를 Word나 방안지 Excel로 작성하게 되는 것은 고행일 뿐이고, 수식이 없다고 설명할 수 없는 문장이라며 첨부파일을 붙이고 싶지 않습니다.
물론, 10년 내 진보가 없는, Web 어플리케이션의 빌어 먹을 잡어 「리치 텍스트」텍스트 에리어 등 소원입니다.

동기

kintone에서도 표준 기능으로는 markdown에 대한 지원이 없습니다.
그러나, 공식의 Tips에서도 에이스 에디터 내장 방법 이나 markdown의 렌더링 방법 를 소개하고 있어, 몇행의 문장이라면, 이것들을 활용해 충분히 실용적인 markdown 편집·표시를 할 수 있는 것을 알 수 있습니다.
그러나 편집 대상이 장문(e.g. 회의록)이 되면(화면의 좁음 때문에) 상위 화면과 텍스트 영역 모두 스크롤이 발생하거나 미리보기 표시 위치를 확보할 수 없게 됩니다.

차라리 외부 편집기로 편집할 수 있으면 고생이 없다고 생각한 대로입니다.

준비

에디터에는, 졸작의 mdne 를 사용합니다.
mdne 자체는 carlo 을 사용한 데스크톱 앱입니다만, 로컬 파일에의 액세스등 이외는 Chrome로 동작하고 있으므로, web에서도 움직일 수가 있습니다. 실제로 playground로 작동합니다.

이 웹 버전의 영속화 처리 부분을 kintone에 대한 액세스로 바꾸면 좋다.

좌절

kintone은 REST API 있고 OAuth2도 베타 버전이면서 기능 제공되고 있다 그리고 여유!
라고 생각했던 시기도 있었습니다. 달콤했다. 타피오카 밀크티 정도 대단했습니다.
Authorization Code Grant 만 지원합니다.

OAuth2에는 여러 사용 사례와 각 시퀀스이 정의되어 있지만 백엔드 서버가없는 웹 응용 프로그램에서는 Authorization Code Grant를 사용할 수 없습니다. client_secret 를 안전하게 유지할 수 없기 때문입니다.

해결

kintone의 REST API는 실제로 세션 인증을 지원하며 쿠키조차 전달할 수 있으면 인증이 통과합니다. 이를 위해서는 에디터 앱 자체가 킨톤 도메인에서 작동해야합니다.
앱의 사용자 정의 기능으로 무리한 창 전체에 div를 겹쳐서 그 위에 렌더링합니다.

완성

markdown 항목이 있는 화면입니다.

이전 화면에서 Edit 버튼을 누르면 외부 편집기가 시작됩니다.
2 창에서 미리 보기하면서 편집할 수 있습니다.Ctrl+S 에서 kintone에 저장됩니다.


기록 관리도 가능합니다.


인쇄도 OK

사이고에게

이번 코드는 mdne-for-kintone에 있습니다.

참고문헌

OAuth 2.0 & OpenID Connect 사용 사례 및 관련 사양 요약

OAuth 클라이언트 사용(β)