descjop で遊ぼう day 7 : Hello Worldを出力してみるには

descjop (Electron + Clojure) Advent Calendar 2015 - Adventarの7日目です。

Story Permalink

昨日は、ついに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を編集したんだから表示が変わって当たり前ですよね。「もっとこう、動的に変えるようなやつをやりたいんだ!」というご要望もごもっともですが、実はここは結構重要なポイントです。

helloworld-site-view

例えば、./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

Magazine Archives

vol.122

2016-2-01

Cover

台湾に行ってきました。

今回のカバーは、台湾にて撮影したものです。

自治体Webデザイントレンドこぼれ話 : ここだよマップ

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 16 : Windows版のメニューを表示する

2015年の振り返り的な一人レトロスペクティブ

そういえば、まだ2015年の振り返りをマガジンに掲載していませんでした

編集後記

vol.121

2016-1-14

Cover

今回のカバーは、、、UFO?

自治体Webデザイントレンドこぼれ話 : 予告

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 11 : Omのコンポーネントで遊ぼう

descjop で遊ぼう day 12 : Omのコンポーネントで遊ぼうその2

descjop で遊ぼう day 13 : Clojure ワークショップでTAしてきた話

descjop で遊ぼう day 14 : アプリケーションメニューを作ろう

descjop で遊ぼう day 15 : descjop 0.5.3をリリースしました

編集後記

vol.120

2016-1-14

Cover

今回のカバーも、初詣に行ったときのショットです。

descjop で遊ぼう day 6 : Electronがうまくダウンロードできないとき

descjop で遊ぼう day 7 : Hello Worldを出力してみるには

descjop で遊ぼう day 8 : Om basedテンプレートを使ってみる

descjop で遊ぼう day 9 : Om basedテンプレートにボタンをつける

descjop で遊ぼう day 10 : Om basedテンプレートにボタンをつけるその2

編集後記

vol.119

2016-1-10

Cover

今回のカバーは、初詣に行ったときのショット。

「descjop で遊ぼう」について

「descjop で遊ぼう」というのは年末にやったアドベントカレンダーのシリーズなのですが、前段としてまずはその解説をば。

descjop で遊ぼう day 1 : はじめに

descjop で遊ぼう day 2 : 3つのテンプレート

descjop で遊ぼう day 3 : 環境構築をしよう

descjop で遊ぼう day 4 : Helpを見てみよう

descjop で遊ぼう day 5 : デフォルトアプリケーションのビルドと起動

編集後記

vol.118

2015-10-22

Cover

今回のカバーは、Stack Overflow DevDaysのイベントをお手伝いしたときの窓からのショット。

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

ミカヅキClojure : ゼロからはじめるClojure入門第2回

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.117

2015-10-07

Cover

今回は散歩道からのショット

Editor’s Picks

designudgeで扱っている内容に近いジャンルのリソースのうち気になったものなど

U.S. Web Design Standardsを見てみる

今話題となっているU.S. Web Design Standardsの周辺情報など見てみました

Bootstrap 4徹底攻略 (3)

Bootstrap 4のアルファ版がでているので使おう

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.116

2015-9-28

Cover

今回は帰省した際に通った三島からのショットです

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

みそじ過ぎからの英語再学習

40を目前に今までサボっていた英語学習をはじめました

Bootstrap 4徹底攻略 (2)

Bootstrap 4のアルファ版がでているので使おう

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.115

2015-9-13

Cover

前回と同じ開発合宿のショットから一つ

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

開発合宿へ行こう! : Python mini hack-a-thon 夏山合宿 2015

先週末に行ってきた開発合宿について書きました。

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記