정적 사이트 생성기를 GUI로 조작할 수 있는 앱을 Electron으로 작성했습니다.

정적 사이트 제너레이터를 GUI로 조작할 수 있는 앱 「 라이더 」를 Electron으로 작성했습니다.

터미널에서 명령 조작에 익숙하지 않은 사람이나 비 프로그래머도 쉽게 블로그를 작성할 수 있도록 본 앱을 작성했습니다.



소개 페이지 : h tps : // / 등 y 조의. 이 m/두 w응아 d. HTML

앱에서 사용하고 있는 기술이나 궁리한 포인트 등을 소개합니다.

사용 라이브러리

주요 사용 라이브러리는 다음과 같습니다.

Electron

기본 프로젝트는 electron-vue를 사용했습니다.

electron-vue는 Electron 등의 라이브러리 버전이 오래되었기 때문에 라이브러리는 수시로 스스로 버전을 올리면서 개발을 진행해 갔습니다.

Vue

이 앱은 Vue를 사용합니다.

또한 Vue와 관련된 라이브러리로 다음을 사용합니다.

Vuetify

Vuex

Vue Router

Vue i18n

Vee Validate

Vuetify는 UI 부분을 구현하는 데 매우 도움이되었습니다. 거의 모든 요소는 Vuetify의 구성 요소를 사용했으며 div 및 span과 같은 일반 html 태그를 구현하는 경우는 거의 없었습니다.

monaco-editor

편집자는 monaco-editor를 사용합니다.

웹 에디터라고 하면 Ace나 Codemirror가 자주 사용되고 있다고 생각합니다만, monaco-editor는 VSCode에서도 사용되고 있는 브라우저로 동작하는 에디터이므로, VSCode와 같은 조작성을 간단하게 브라우저상에서 실현할 수 있습니다 .

marked

이 앱에서 기사는 markdown으로 표시됩니다.

markdown의 라이브러리는 marked를 사용하고 marked를 기반으로 독자적인 기법도 추가하고 있습니다. (독자 기법은 사용하지 않는 사람으로부터 하면 번거롭다고 생각하므로, 무효로 하는 기능도 있습니다)

highlight.js

markdown의 구문 하이라이트 라이브러리는 highlight.js를 사용합니다.

highlight.js를 각 기사에 통합하여 강조 표시하는 대신이 응용 프로그램에서 빌드 할 때 강조 표시된 상태의 정적 HTML을 출력합니다.

따라서 각 기사의 페이지에서 JavaScript를 실행할 필요가 없으므로 로드 시간이 단축됩니다.

nunjucks

템플릿 엔진은 nunjucks를 사용합니다.

nunjucks는 mozilla에서 만든 JavaScript 템플릿 엔진으로, 기본 템플릿 상속 기능과 같은 유용한 기능이 많이 있습니다.

궁리한 포인트

기사 작성 화면

기사 작성 화면에서는 Qiita의 투고 화면과 같이 미리보기 화면을 나란히 기사를 작성할 수 있도록 했습니다. 또한 markdown에 익숙하지 않은 사람들을 위해 툴바를 준비했습니다.



툴바의 버튼을 클릭하면 편집기에 문자를 삽입하지만 monaco-editor에서는 다음과 같이 쉽게 구현할 수 있습니다.

// this.editorはEditorオブジェクト

// 選択範囲を取得
const sel = this.editor.getSelection();

// 選択したテキストを取得
const selectedText = this.editor.getModel().getValueInRange(sel);

// 指定した範囲にテキストを設定
this.editor.executeEdits('', [
  {
    range: new monaco.Range(
      sel.startLineNumber,
      sel.startColumn,
      sel.endLineNumber,
      sel.endColumn
    ),
    text: `**${selectedText}**`, // 選択中のテキストに強調スタイルを適用
  },
]);

이미지 붙여넣기

이미지는 다음 작업으로 추가할 수 있습니다.

파일 선택 대화 상자

드래그 앤 드롭

클립보드에 복사한 이미지 붙여넣기

클립보드에 복사한 이미지를 붙여 넣는 기능은 slack등을 사용하고 있어 매우 편리하다고 느꼈기 때문에 실장했습니다.

// pasteイベント
async pasteImage(e) {
  if (
    !e.clipboardData ||
    !e.clipboardData.types ||
    e.clipboardData.types.length !== 1 ||
    e.clipboardData.types[0] !== 'Files'
  ) {
    // 貼り付けたデータがファイルでない場合は処理終了
    return;
  }
  const { items } = e.clipboardData;
  const blob = items[0].getAsFile();
  // ファイルデータを読み込み
  const data = await new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      resolve(event.currentTarget.result);
    };
    reader.readAsDataURL(blob);
  });

  // 以降、画像を追加する処理

요약

Electron을 사용하는 것은 처음이었지만 웹 앱과 마찬가지로 구현이 진행되었습니다.

WEB의 기술로 데스크탑 앱을 만들 수 있는 것은 매우 편리하네요.