descjop で遊ぼう day 7 : Hello Worldを出力してみるには
昨日は、ついにdescjopを使ってデフォルトのアプリケーションが起動しました。
Hello Worldも出たし言うことはないのですが、何かソースをいじった上でHello Worldを表示させてみたいものです。
ということで、コードを編集して、Hello Worldと表示させてみましょう。
./app/index.htmlをエディタで開きます。
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node.js <script>document.write(process.version)</script>
and Electron(atom-shell) <script>document.write(process.versions['electron'])</script>.
</body>
</html>
上記のコードを、下記のように書き換えて、アプリケーションを起動してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Hello World!</p>
</body>
</html>
すると、画面にはHello World!と表示されるはずです。
どこからか「バカヤロー!!」という声が聞こえてきそうです。
HTMLを編集したんだから表示が変わって当たり前ですよね。「もっとこう、動的に変えるようなやつをやりたいんだ!」というご要望もごもっともですが、実はここは結構重要なポイントです。
例えば、./src/helloworld/core.cljsの(.on app "ready" ...)の部分を下記のように変えてみましょう。
; ready listener
(.on app "ready"
(fn []
(reset! *win* (BrowserWindow. (clj->js {:width 800 :height 600})))
;; when no optimize comment out
;; (.loadUrl @*win* (str "file://" (.resolve path (js* "__dirname") "../index.html")))
(.loadUrl @*win* "https://designudge.org/ja/")
;; when no optimize uncomment
;; (.loadUrl @*win* (str "file://" (.resolve path (js* "__dirname") "../../../index.html")))
(.on @*win* "closed" (fn [] (reset! *win* nil))))))
変えた部分は、ロードするHTMLをファイルではなく、別のドメインのサイトにしている部分です。
するとどう表示されるかというと、サイトが表示されるはずです。
このブラウザウインドウは独立して普通のHTMLと同様にJavaScriptを読み込むことが出来ます。
つまり、動的にHello Worldを表示させたい場合は、HTML上で読み込むためのJavaScriptを出力させればいいわけです。
現在は、Electron用のClojureScriptのみがJavaScriptとして出力されていますが、ブラウザから読み込む用のプロジェクトを作成すれば良いのです。
ちなみに、デフォルトプロジェクトでは、ブラウザ向けのClojureScriptは用意してありません。
今から作成していっても良いのですが、最初からブラウザ向けのClojureScriptプロジェクトが用意されているテンプレートを利用しましょう。
descjopで、ブラウザ向けのClojureScriptプロジェクトを含んでいるプロジェクトは、OmベースのテンプレートとReagentベースのテンプレートの2つになります。
全体理解を深めるために、Hello Worldプロジェクトは置いておいて、こちらのプロジェクトを使ってみましょう。
Colophon
- 編集長
- Greative GK. 原一浩 ( kara_d )
- 製版システム
- Clojure / Compojure / Ring / Enlive / markdown-clj / Jetty / MySQL
- Share this magazine!
- Follow designudge
- Follow @designudge