コンテンツへスキップ
Tags

hifive 最初の一歩！Hello Worldを出してみる

by : 2014/06/03

あなたはJavaScriptで複雑難解な、保守できないコードに出くわしたことがありますか？私は何度もあります。個人のプロジェクトであればまだしも、業務で使われるコードでもそんなスパゲティなコードがたくさん存在します。

そんな現状に辟易しているプログラマな方にとって hifive はきっと一助になると思います。hifive はエンタープライズレベルの開発用途を踏まえたHTML5/JavaScriptフレームワークになります。多人数での開発も hifive を使うことでスムーズになるはずです。

そこでまず今回は hifive を使ってHello Worldを表示させるまでを行ってみたいと思います。コードは全て GitHub にアップされていますので不明点があればご覧ください。

まずは完成図

最初に完成図から。

最初の表示
最初の表示

ボタンを押すとアラートが出ます。

Hello, World!
Hello, World!

簡単ですね。ではコードを見ていきます。

HTMLファイル

HTMLファイルは次のようになっています（必要ない部分は除いています）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="//code.htmlhifive.com/h5.css" rel="stylesheet">
  </head>
  <body>
    <div id="container">
      <input type="button" id="btn" value="Hello World!" />
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="javascripts/hello.js"></script>
    <script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
    <script src="//code.htmlhifive.com/h5.js"></script>
  </body>
</html>

スタイルシートファイル、JavaScriptファイルは外部から取得しています。実際に書いたのはhello.jsだけです。hifiveの本体、モジュールになるのがh5.js/ejs-h5mod.jsです。jQueryとも連携しますので、これまでの使い慣れた開発スタイルが維持できます。そこも大きなメリットではないでしょうか。

JavaScriptファイル

では実際に処理を行っているコードを見てみましょう。CoffeeScriptから生成していますので javascripts/hello.coffee を見てみます。

$ ->
  helloWorldController = 
    __name: 'HelloWorldController'
    '#btn click': ->
      alert 'Hello, World!'
  h5.core.controller '#container', helloWorldController

コードはこれだけです。 __name はコントローラの名前です。実際の処理としては ‘#btn click’ がアクションの監視を行っています。#btnがクリックされたタイミングで指定された処理を行っている訳です。

そして作成したコントローラを h5.core.controller に登録します。その際どのDOM以下の監視を行うかの指定を行っています。このサンプルの場合は #container になります。

例えばこの処理を素のjQueryだけで書く場合は次のようになるでしょう。

$("#container #btn").on 'click', (e) ->
  alert 'Hello, World!'

1つだけのイベントであればjQueryのが簡単に見えますが、これが数十のイベントを管理したり、相互作用するようになれば話は全く違ってきます。さらに複数人で開発したりすれば…jQueryだけでは恐ろしいことになるでしょう。

サンプルの動かし方

最後にGitHub にアップされているコードの試し方です。hifiveはHTML5/JavaScriptフレームワークになりますのでサーバサイドは不要です。ただしローカルにWebサーバがある方が確認しやすいと思います。例えば筆者のMac OSXなどでPythonが入っている場合は次のように実行します。

$ wget https://github.com/moongift/hifive-examples/archive/master.zip
$ unzip master.zip
$ cd hifive-examples-master
$ python -m SimpleHTTPServer
$ $ open http://localhost:8000/

Windowsでは同様にPythonを使ったり、 QuickShare などを使うと手軽にHTTPDサーバが立てられるようです。またはIISなどを使っても良いかと思います。

今回はこれにて終わりです。hifiveの世界にようこそ、これからhifiveのさらなる使い方、魅力をどんどんお伝えします！

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive

HTML5企業Webシステムのための開発プラットフォーム

From → hifive

コメントは受け付けていません。

«
»
%d人のブロガーが「いいね」をつけました。