ClojureでElectronアプリを作ろう
•
16 likes•5,339 views
ClojureでElectronアプリを作るために欠かせない（かもしれない）descjopの紹介と、実装周りのいろいろ、あとClojure自体の紹介など
Recommended
More Related Content
What's hot
What's hot (20)
Similar to ClojureでElectronアプリを作ろう
Similar to ClojureでElectronアプリを作ろう (20)
More from Kazuhiro Hara
More from Kazuhiro Hara (20)
ClojureでElectronアプリを作ろう
- 1. Clojureで Electronアプリつくろう {:company “Greative GK” :name “Kazuhiro Hara” :twitter “kara_d” :github “https://github.com/karad”} Electron(旧:Atom-Shell)勉強会 #1
- 2. #atom_shelldescjop.org 自己紹介 2 原 一浩 ハラ カズヒロ ClojureScript + Electronの プロジェクトテンプレdescjopの作者 http://greative.jp/ ( @kara_d ) http://descjop.org/
- 3. #atom_shelldescjop.org ちょっと前の著書 ➡ Play Framework 2徹底入門 - JavaではじめるアジャイルWeb開発 3 実践編（4章∼7章）を担当 ✦ サンプルアプリの企画から設計、構築、テ スト、管理画面作成までを一通り マニュアルにはない詰まりポイントとかも ちりばめられてます。
- 4. #atom_shelldescjop.org アジェンダ ➡ Clojureについて ➡ ビルドツールについて ➡ ClojureでElectronアプリをつくるには ➡ demo ➡ Clojureならでは話 ➡ ClojureScript & Node.jsハマりどころ ➡ 今後の課題 4
- 6. #atom_shelldescjop.org Clojureってなに？ ➡ Lisp方言 S式 データとしてのコード 成長可能な言語 ➡ 関数型プログラミング 第一級関数 イミュータブルなデータ構造 6 (println (+ 1 2 3)) ; => 6
- 7. #atom_shelldescjop.org Clojureってなに？ ➡ 豊かなビルド環境 Leiningen REPL Clojars Javaのライブラリ or Nodeのライブラリ ➡ 複数のビルドターゲット Java環境 JavaScript環境 .NET環境 7
- 8. #atom_shelldescjop.org Clojureあれこれ ➡ Clojureは新しいけど、すごく古くもある Clojureが生まれたのは、2007年 LISPは、2番目に古い高級言語 ➡ ClojureScriptはJavaScript向けコンパイル環境 JavaとJavaScriptの関係とは、ちがう 同一シンタックスで書ける 拡張子は、Clojureが.clj、ClojureScriptが.cljs ➡ ClojureScriptは、AltJSとしては、そこそこ古い Jun 3, 2011に最初のコミット 8
- 10. #atom_shelldescjop.org Clojureは読みやすい（他のLispよりちょっとだけ） ➡ JavaScript ➡ Clojure 10 function hoge (param) { console.log(“Hello world!”); } (defn hoge [param] (println “Hello world!”))
- 13. #atom_shelldescjop.org ビルドツールについて ➡ ClojureとClojureScriptの ビルドツール、Leiningen Node、Npm、Grunt/Gulp/Bowerや テストランナーがくっついたようなもの 13 $ lein new アプリ名 $ lein cljsbuild $ lein test
- 14. #atom_shelldescjop.org ClojureScriptのコンパイル ➡ project.clj ビルド情報を書く package.jsonみたいなもの ➡ lein-cljsbuildを使う leinコマンドからClojureScriptのコンパイルができる ➡ ClojureScriptのコンパイル Google Clojure関係がライブラリとして使われていたり、 コンパイラとして使われたりしている 14 $ lein cljsbuild once
- 15. #atom_shelldescjop.org JavaScriptにコンパイルされた時のサイズ ➡ :optimizations :simple 400KB∼2MBくらいになっちゃう これは重い ➡ :optimizations :advanced 数十から百KB程度 これならなんとか 15
- 17. #atom_shelldescjop.org Electronアプリ用のLeiningenツール ➡ http://descjop.org ➡ リリース後の顛末 公開したのが4/17 その日にAtom-Shell -> Electron リポジトリも変更 Gruntタスク周りで本家にissue作成 無事パッチが当てられ、再リリース 17
- 18. #atom_shelldescjop.org ClojureでElectronアプリをつくるには ➡ descjop.orgを使って開始すると楽 ➡ 使ってみて良い感じだったら★ください∼ 18 $ lein new descjop アプリ名
- 19. #atom_shelldescjop.org 何が生成されるのか? 19 ├── README.md ├── app │ ├── index.html // トップページ │ ├── js │ │ └── main.js │ └── package.json // アプリ用package.json ├── package.json // コンパイル用package.json ├── project.clj // Clojureのコンパイル設定 └── src └── NAMESPACE └── core.cljs // ClojureScriptを置く
- 20. #atom_shelldescjop.org descjopのしくみ : その1 ➡ lein cljsbuildをすると、src/###/core.cljsが app/js/cljsbuild_main.jsとしてコンパイルされる /src/###/core.cljs ↓ コンパイル /app/js/cljsbuild_main.js 20
- 21. #atom_shelldescjop.org descjopのしくみ : その2 ➡ cljsbuild_main.jsは、app/js/main.js から呼ばれる /app/js/cljsbuild_main.js ↑ 呼ぶ /app/js/main.js 21
- 22. #atom_shelldescjop.org descjopのしくみ : その3 ➡ Electronは、app以下のpackage.jsonを通じて main.jsを呼び出す /app/js/cljsbuild_main.js ↑ 呼ぶ /app/js/main.js ↑ 呼ぶ /app/package.json 22
- 23. #atom_shelldescjop.org descjopのしくみ : その4 ➡ cljsbuild_main.jsからは、BrowserWindowとし て、index.htmlをloadUrlする /app/index.html ↑ ロードする /app/js/cljsbuild_main.js 23
- 26. #atom_shelldescjop.org demo 26 $ npm install -‐g grunt-‐cli $ npm install $ grunt download-‐electron $ lein externs > app/js/externs.js $ ./electron/Electron.app/Contents/MacOS/Electron app 5 4 3 2 1 $ lein new descjop アプリ名
- 27. #atom_shelldescjop.org ビルド終了後の構成 27 ├── README.md ├── app │ ├── index.html // トップページ │ ├── js │ │ ├── cljsbuild-‐main.js // コンパイル済JS │ │ ├── externs.js │ │ └── main.js │ └── package.json // アプリ用package.json ├── package.json // コンパイル用package.json ├── project.clj // Clojureのコンパイル設定 └── src └── NAMESPACE └── core.cljs // ClojureScriptを置く
- 29. #atom_shelldescjop.org こんな構文あったらいいな ➡ appに対して、イベントハンドラ設定めんどい ➡ こんな構文が欲しいとする 29 (var的なもの app名 app生成 :イベントハンドラ (関数) :ほかのハンドラ (関数) ... ...)
- 30. #atom_shelldescjop.org ちょいとマクロ ➡ マクロは、ClojureScriptではなく、 Clojureとして書く ➡ ただし、関数でできる場合は関数で書こう 30 (defmacro defatomshellapp [name app & clauses] `(loop [cl# [~@clauses]] (if (and (not (nil? cl#)) (first cl#) (next cl#)) (do (.on ~app (name (first cl#)) (second cl#)) (recur (next (next cl#)))) (defonce ~name ~app))))
- 31. #atom_shelldescjop.org こんな風に呼び出せる ➡ 欲しかった構文を拡張できる 31 (defatomshellapp app (nodejs/require "app") :ready (fn [] ( 処理 )) :window-‐all-‐closed (fn [] ( 処理 ))))
- 32. #atom_shelldescjop.org 32 ClojureScript & Node.jsハマりどころ
- 33. #atom_shelldescjop.org 注意ポイント ➡ externs advancedオプションにてサイズを小さくするときに、 必要な変数名などの書き換えをさせないための指定 js/externs.jsとかに記述する lein-externsを使うと楽 33 $ lein externs > app/js/externs.js
- 34. #atom_shelldescjop.org 注意ポイント ➡ externs js/externs.jsは、こんな風になる 34 var TopLevel = { "BrowserWindow" : function () {}, "console" : function () {}, "loadUrl" : function () {}, "log" : function () {}, "on" : function () {}, ... }
- 36. #atom_shelldescjop.org 注意ポイント ➡ pathまわり 開発時と、ネイティブアプリケーションとしてパッケージングした時の 取得可能なパスがメソッドによって異なるので注意 36 (str "file://" (.resolve path (js* "__dirname") "../index.html"))
- 37. #atom_shelldescjop.org 注意ポイント ➡ その他 よくJavaScriptの関数を渡す場面で、へんなものが渡るときがある。 きちんと無名関数を渡そう オブジェクトは、clj->jsを使って渡す 37 (clj-‐>js {:width 800 :height 600})
- 38. #atom_shelldescjop.org 今後の課題 ➡ NW.js用のスカフォルディングの提供 ➡ gruntタスクからgulpへの移行 ➡ UI周りで構成をいろいろ考え中 ➡ 今は遊びがてら 学習サイクルまわし中 38 学ぶ 作る問う
- 39. ありがとうございました!! Electron(旧:Atom-Shell)勉強会 #1 ClojureでElectronアプリつくろう {:company “Greative GK” :name “Kazuhiro Hara” :twitter “kara_d” :github “https://github.com/karad”}