소개

Common Lisp판 Electron인 Ceramic과 Caveman2를 사용하여 GUI 앱을 만들어 봅니다.
Ceramic에 대해서는 다음을 참조하십시오.

Ceramic Home page

Ceramic Github

Ceramic 설치

먼저 Roswell을 사용하여 설치합니다.

ros install ceramic/ceramic

이때 자신의 환경 (Ubuntu 18.04.1 LTS)에서uv.h: そのようなファイルやディレクトリはありません라는 오류가 발생했으므로 다음 명령으로 libuv-dev를 설치했습니다.

sudo apt install libuv-dev
sudo apt install libuv1-dev

Ceramic 설정

REPL을 시작합니다.

ros run

Ceramic을 Quicklisp로로드

(ql:quickload :ceramic)

먼저 다음 명령으로 Ceramic을 사용하는 데 필요한 것을 다운로드합니다.

(ceramic:setup)

샘플 프로그램 실행

다음 명령을 실행하여 샘플 프로그램을 실행할 수 있습니다.

(ql:quickload :ceramic)
(ceramic:start)
(ceramic-hello-world:run)

이하, 샘플 프로그램 실행 화면



또한 다음 명령을 실행하여 utweet이라는 트위터와 같은 앱을 실행할 수 있습니다.

;; Ceramicとutweetをロード
(ql:quickload '(:ceramic :lucerne-utweet))

;; Ceramicの設定と開始
(ceramic:setup)
(ceramic:start)

;; utweetを開始
(lucerne:start utweet.views:app :port 8000)

;; ブラウザウィンドウを開く
(defvar window (ceramic:make-window :url "http://localhost:8000/"))
(ceramic:show window)

이하, utweet 실행 화면

간단한 브라우저 창

간단하게 간단한 브라우저 창을 표시하면 다음 코드로만 실행할 수 있습니다.

;; Ceramicをロード
(ql:quickload :ceramic)

;; Ceramicの設定と開始
(ceramic:setup)
(ceramic:start)

;; ブラウザウィンドウ生成
(defvar window (ceramic:make-window :url "http://ceramic.github.io/"
                                    :width 800
                                    :height 600))

;; ブラウザウィンドウ表示
(ceramic:show window)

이하, 실행중인 모습

Caveman2와 결합

먼저 Caveman2 프로젝트를 생성합니다.

(ql:quickload :caveman2)
(caveman2:make-project #P"プロジェクトを作成するディレクトリのパス" :author "自分の名前")
(ql:register-local-projects) ; モジュールをlocal-projectsに登録

스켈레톤 프로젝트 안에서 만지는 것은 아래의 ★마크가 붙은 개소만입니다.

ceramic-app
  ├── README.markdown
  ├── app.lisp
  ├── db
  │    └── schema.sql
  ├── ceramic-app-test.asd
  ├── ceramic-app.asd   ★ Ceramicを使用するために一部追記
  ├── src
  │    ├── config.lisp
  │    ├── db.lisp
  │    ├── main.lisp
  │    ├── view.lisp
  │    └── web.lisp     ★ プログラムを記述
  ├── static
  │   └── css
  │        └── main.css
  ├── templates
  │   ├── _errors
  │   │     └── 404.html
  │   ├── index.html
  │   └── layouts
  │         └── default.html
  └── tests
        └── myapp.lisp

ceramic-app.asd 에 Ceramic을 추가합니다.

ceramic-app.asd

(defsystem "ceramic-app"
  :version "0.1.0"
  :author "fireflower0"
  :license ""
  :depends-on ("clack"
               "lack"
               "caveman2"
               "envy"
               "cl-ppcre"
               "uiop"

               ;; for @route annotation
               "cl-syntax-annot"

               ;; HTML Template
               "djula"

               ;; for DB
               "datafly"
               "sxql"

               ;; GUI
               "ceramic")  ; ★ここに追記
  :components ((:module "src"
                :components
                ((:file "main" :depends-on ("config" "view" "db"))
                 (:file "web" :depends-on ("view"))
                 (:file "view" :depends-on ("config"))
                 (:file "db" :depends-on ("config"))
                 (:file "config"))))
  :description ""
  :in-order-to ((test-op (test-op "ceramic-app-test"))))

web.lisp 의 패키지 정의 부분에 추가합니다.

src/web.lisp

(in-package :cl-user)
(defpackage ceramic-app.web
  (:use :cl
        :caveman2
        :ceramic-app.config
        :ceramic-app.view
        :ceramic-app.db
        :datafly
        :sxql)
  (:import-from :ceramic) ; ★ここに追記
  (:export :*web*))
(in-package :ceramic-app.web)

마지막으로 브라우저 창 표시 처리를 설명합니다.

src/web.lisp

(defparameter *port* 5000)

(defun ceramic-app-start ()
  (ceramic-app:start :port *port*)
  (ceramic:setup)
  (ceramic:start)
  (let ((window (ceramic:make-window :url (format nil "http://localhost:~D" *port*)
                                     :width  640
                                     :height 480)))
    (ceramic:show window)))

실행

다음 명령으로 실행합니다.

(ql:quickload :ceramic-app)
(ceramic-app.web::ceramic-app-start)

이하, 실행중인 모습

마지막으로

Ceramic 재미 있군요, Caveman2와 조합하면 여러가지 만들 것 같은 생각이 듭니다.