Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ClojureでElectronアプリを作ろう

4,124 views

Published on

ClojureでElectronアプリを作るために欠かせない(かもしれない)descjopの紹介と、実装周りのいろいろ、あとClojure自体の紹介など

Published in: Internet
  • Be the first to comment

ClojureでElectronアプリを作ろう

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

×