業務用Webアプリを開発する際にはプログラマーの方でも簡単に使えるUIコンポーネントの存在が必須です。特にカスタマイズ性の高さやフレームワークとの親和性が大事になります。
hifiveはフレームワークはもちろん、UIコンポーネントも合わせて提供しています。ボタンやチェックボックスといった基本的なUI部品というよりも、業務アプリで良くありがちな込み入った仕様の部品を提供することを目標としています。これらhifiveが提供する部品を使うことで、UIも素早く実装ができるはずです。今回はまずボックス区切りを紹介します。
ボックス区切りとは
まずは画像で見てもらった方が早いでしょう。
各ボックスにある区切りはマウスでドラッグして移動できます。
こちらが実際にブラウザで試しているところです。マウス操作でスムーズに幅を変更できます。
よくあるニーズ
業務アプリを作る際には必要に応じて左右の幅を自分で変更したいと言ったニーズが出るかと思います。また、情報を動的に隠したり、その逆で表示したいと考える場合も多いでしょう。そんなときに使ってみてください。
使い方
では実際の使い方です。HTMLは次のようになります。
<div class="dividedBox horizontal">
<div class="box fill"></div>
<div class="box fill autoSize"></div>
<div class="box fill "></div>
</div>
そしてJavaScriptは次のようになります。
$(function(){
$('.dividedBox').each(function(){
h5.core.controller(this, h5.ui.container.DividedBox);
});
});
h5.core.controller に h5.ui.container.DividedBox として登録していくだけで使えます。
縦方向にも
クラスに horizontal を指定すると横方向に、vertical を指定すると縦方向にボックスが並びます。
<div class="dividedBox vertical">
<div class="box fill"></div>
<div class="box fill"></div>
<div class="box fill"></div>
</div>
区切りは上下に動くようになります。
ボックスの幅は個別に指定できます。幅が足りない分は、親要素である dividedBox の内容が表示されます。
スマートフォンにも対応
HTML5ということもあり、スマートフォンでの表示、操作にも対応しています。
タッチ操作で区切りを起動できます。
こちらはiPhoneで試したところです。
その他
変更した区切りを元の位置に戻す場合は dividedBoxController.refresh() のようにrefresh メソッドを使います。
dividedBoxController.refresh();
区切りを動的に追加する場合は insert メソッドを使います。
this.dividedBoxController.insert(1, '<div class="box"></div>');
ボックスを追加することもできます。
dividedBox.append(addDiv)
こちらにデモがありますので実際に触れてみてください。
ボックス区切り移動サンプル(ボックス追加機能、リセット機能あり)
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
Webアプリケーションはリリース時には特に問題がなくとも、更新が重なっていくと徐々に構造的、ロジック的に破綻することがよくあります。その最たるものとしてはUI部分ではないでしょうか。
HTMLは手軽に修正できる反面、適切な管理、運用を心がけないとあっという間にごちゃごちゃになってしまいます。
そこでhifiveではテンプレートエンジンを設けることでロジックとビューを分離して管理できるようになっています。今回はそんなビューを使ったサンプルを紹介します。なおソースコードはGitHubにアップロードされています（view.htmlです）。
まずは完成図
最初の表示です。
例えば5を入力して出力ボタンを押します。
このように奇数は赤、偶数は青で表示されます。
ソースをみる
実際にこの処理を行っている部分のソースを見てみましょう（CoffeeScriptです）。
$ ->
# コントローラの元となるオブジェクトを作成
controller =
__name: "NumListController"
# 使用するテンプレートのパスを書く（HTMLファイルからのパスです）
__templates: "./views/list.ejs"
"#output click": ->
# 入力値を取得
to = $("#to").val()
# 値がなければ処理を終了
return unless to
# StringからNumberへ変換。変換に失敗したら終了
try
to = parseInt(to)
catch e
return
# テンプレートに値を渡してHTML文字列を取得する
numList = @view.get("list",
num: to
)
# 結果を画面に出力
$("#list").html numList
# id="container"である要素にコントローラをバインド
h5.core.controller "#container", controller
入力値は $(“#to”).val() で受け取っています。これはjQueryを使っていますので分かりやすいかと思います。大事なのは、 @view.get() の部分です。
hifiveではEJSをテンプレートエンジンとして用いています。EJSはEmbedded JavaScript の略で、Ruby on Rails標準のテンプレートエンジンであるerbに似た構文が使われています。
__templates のところでテンプレートを定義しており、@view.getでテンプレートを指定しています。この時のテンプレートlist.ejsは次のようになっています。
<script type="text/ejs" id="list">
[% for (var i = 1, len = num + 1; i < len; i++) { %]
<li>
<span style="[%= 'color: ' + (i % 2 === 0 ? 'blue;': 'red;') %]">[%= i %]</span>
</li>
[% } %]
</script>
scriptタグのところにある id=“list” がコントローラ側で呼び出す際の list に相当します。また、numというのはコントローラから与えられている変数になります。下のコードがテンプレート処理を行っているところになります。
numList = @view.get("list",
num: to
)
このようにしてテンプレートとそこに渡す変数を定義することで更新に強いWebアプリケーション開発をサポートしています。この辺りの仕組みはサーバサイドの開発では一般的になっていますが、クライアントサイドではついおろそかにされがちです。しかしUI周りの安直な実装は後々の更新、機能追加の際に必ず負債になってきます。hifiveでは予めMVCの枠組みが決まっていますので、テンプレートエンジンに悩んだりすることもなく実装が進められるでしょう。
今回のソースコードはGitHubにアップロードされています（view.htmlです）。ぜひご覧ください。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
あなたはJavaScriptで複雑難解な、保守できないコードに出くわしたことがありますか？私は何度もあります。個人のプロジェクトであればまだしも、業務で使われるコードでもそんなスパゲティなコードがたくさん存在します。
そんな現状に辟易しているプログラマな方にとって hifive はきっと一助になると思います。hifive はエンタープライズレベルの開発用途を踏まえたHTML5/JavaScriptフレームワークになります。多人数での開発も hifive を使うことでスムーズになるはずです。
そこでまず今回は hifive を使ってHello Worldを表示させるまでを行ってみたいと思います。コードは全て GitHub にアップされていますので不明点があればご覧ください。
まずは完成図
最初に完成図から。
ボタンを押すとアラートが出ます。
簡単ですね。ではコードを見ていきます。
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
みなさまこんにちは。
hifive-ui-library のデータグリッドコンポーネントの開発を担当している 3bch こと みつぶち です。
今回は現在開発中のデータグリッドについて簡単に紹介をしたいと思います。
サンプル（IE8 以上 or Google Chrome で見てください）
http://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/datagrid/sample/
世の中にはさまざまなデータグリッドライブラリがありますが、「大量のデータを表示したい（編集はなし）」という場面では、以下のような理由などでなかなかピッタリしたものが見つかりませんでした。
- 大量データの表示しようとすると遅い
- 閲覧において足りていない機能がある（ヘッダ列固定、スクロール表示）
そのため、大量データの表示に特化したデータグリッドを自前で作ってしまおうと考えたわけです。このデータグリッドコンポーネントの以下のようなモノを目指して開発しております。
- 大量データ（数10万件、数100万件、数1000万件…）を表示できる
- データを必要な部分だけサーバに都度取りに行くことができる
- ページングだけでなくスクロールによる表示もサポートする
- 表示形式を柔軟に変更できる(複雑にセル結合した表、横に伸びる表)
- IE7, IE8 をサポートする（現在はIE8以上対応）
まだドキュメント含めてあまり整備できておりませんが、
いまのところはデータの表示機能に特化しており以下のような機能が実装してあります。
- ヘッダ列、ヘッダ行の固定
- 行の選択
- ソート
- フィルタ（UIにはないですが内部的には呼べるようになっております）
将来的にはスマートデバイス対応や編集機能の追加なども予定しておりますので、このデータグリッドに興味がある方は是非期待しながら開発を見守っていただければと思います。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
みなさまこんにちは。hifive開発者のしもだです。
新日鉄住金ソリューションズは、html5jが主催するWebサイト・Webアプリコンテスト「HTML5 Japan Cup」にゴールドスポンサーとして協賛しています。
同コンテストにおいて、hifiveを使用して開発されたアプリ・Webサイトに対して与えられる賞として「Webの未来とハイファイブ！賞」を設立しました。受賞された方には、賞金10万円を贈らせていただきます！
この賞は、アプリの種類や動作プラットフォームを問わず、hifiveを使って開発された全てのアプリが審査対象となっています。また、最優秀賞との同時受賞の場合なんと110万円を獲得することができます。
対象となるためのハードルが低い（ライブラリを使っていればよい）ですので、「どうせjQueryでコード書くならついでに使っておくか」くらいの勢いで、お使いいただければと思います。
皆様奮ってご応募ください！
また、4/23(水)19:30-22:00にHTML5 Japan Cup 2014 アイデアソン#1 が、4/26(土)10:00-18:00にはHTML5 Japan Cup 2014 ハッカソン#1が開催されます。両イベントとも、hifiveの開発関係者も参加予定ですので、こちらも是非ご参加ください。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
ifconfigしても”lo”しかなく、仮想NICが見えない（”eth0″がない）時がある。
# きちんと確認していないが、Minimalで入れるとなる？？
こんなときは、（Linuxの通常のお作法にのっとって）ネットワークインターフェースの設定を記述すればよい。
1. /etc/sysconfig/network ファイルを作成し、ホスト名、ゲートウェイ等を設定。たとえば以下のような感じ。
NETWORKING=yes HOSTNAME=myserver GATEWAY=192.168.0.1
2. /etc/sysconfig/network-scripts/ifcfg-eth0 ファイルを作成し、IP等を指定。
ONBOOT=yesにすれば、VM起動時からeth0のインターフェースが有効になる。
DHCPを使っている場合はBOOTPROTO=dhcpにすればよい。
DEVICE=eth0 IPADDR=192.168.0.2 NETMASK=255.255.255.0 NETWORK=192.168.0.0 BROADCAST=192.168.0.255 ONBOOT=yes BOOTPROTO=static
設定が終わったら、Linux Integration Services Version 3.4 for Hyper-Vなどの導入も。
# 3.4はCentOS6.3、Hyper-V 2012にも対応している
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
こんにちは、しもだです。
Wii U、発売されましたね。
私は予約はしていなかったですが、たまたま朝早く起きたので
近くのビックカメラに行ってみたら、
kuroい方があったので買ってしまいました。
「初回更新には1時間以上かかる場合があります」という事前情報の通り、
初期設定の後何も考えずすぐにアップデートしてみたら、本当に1時間かかりました。（ダウンロード約50分、インストール約10分）
なお、購入時に店員さんが渡してくれる「重要なお知らせ」の裏面をよく読むと書いてありますが、更新しますか？の画面で「やめる」を選択すれば、バックグラウンドで自動的にダウンロードが始まるそうです。
ゲーム中でもバックグラウンドでダウンロードされるそうです。・・・されるそうです。
やっぱり、重要なお知らせ、ですからよく読まないとダメですね。
Wii UはHTML5対応
ブラウザを搭載しています（ようやく本題）。だから買ったんです。半分仕事です。
Wii UのHTML5対応度は結構イイという巷の噂でしたし、この分野に足を突っ込んでいる人間としては試さざるを得ないわけです。仕事として。
Wii Uの公式サイトにも「社長が訊く」インターネットブラウザー篇というページがあるくらいで、気合いが入ってます。
さて、Wii UのレンダリングエンジンはWebKitです。ChromeとかSafariとかのやつですね。
User-Agentはこんな感じでした（本体更新後）。
Mozilla/5.0 (Nintendo WiiU) AppleWebKit/534.52 (KHTML, like Gecko) NX/2.1.0.8.23 NintendoBrowser/1.1.0.7579JP
ちなみに、iOS6.0.1＝536.26、Nexus7(4.2.1)＝535.19、iOS5.1.1＝534.46 です。
WebKitがすべてのAPIを提供するわけではないので単純な比較はできませんが、それなりに新しいですね。
こんにちは、しもだです。
jQueryでイベントハンドラをDOM要素にバインドする場合、bind(), live(), delegate()と
いくつかの方法があるのはみなさんご存じと思います。
おおざっぱにいうと、
- bind()は対象要素に直接addEventListener()するのとほぼ同等、
イベント発火⇒ハンドラ実行 - live/delegateはイベントのバブリングを拾って
セレクタのマッチングを行いながら（マッチしたら）ハンドラ実行
という動きをします。
# 注： jQuery1.7からはon(), off()ができたため、関数名的には同じになってしまいました。
DOM要素が動的に追加されるような場合、あるいは対象要素が多い場合には
delegate()が大変重宝しますが、これをスマートフォン/タブレットで使うと
条件により少し困ったことが起こります…というのが今日のお話です。
iPhoneやAndroidでリンクやボタンを押すと、グレー/オレンジ/青などの影がタッチした要素につきます。
# 正式な名前は知らないのですが、この表示を制御するCSSのプロパティが-webkit-tap-highlight-colorなので
# 以下tap-highlight（or ハイライト）ということにします
…そうです、delegate()を使うと、このtap-highlightが実際の対象要素でなく
delegate()でイベントハンドラを仕掛けている要素についてしまうことがあるのです。
というわけで、手元にある端末で試してみました。
しもだです。
風邪をひきましたと書いたまま20日以上も放置して
「どんな大病を患ったんだ」と各方面にご心配をおかけしました。
# 数日後には直ってました。3日ほど絶食してたときはそれなりにしんどかったですが。
さて・・・、
5/25にver.1.0.2をリリースしました。
トップページに変更履歴へのリンクがなく「出した、けど何が変わったかわからない」になってしまってごめんなさい。
現在、変更の一覧はgithubのマイルストーンとしてまとめてあります。
https://github.com/hifive/hifivemain/issues?milestone=1&state=closed
「特に重要な変更」や「新機能の説明」など、特に気づいてほしい変更については
別途（ナルハヤで…）まとめたいと思っています。
今後のバージョンについて、ですが、もちろん「現在鋭意開発中です。」
hifiveは「MVC型のフレームワークだ」と言っているわけですが、
ver.1.0では「M」は「処理層（Logic）」という役割分担を規定しているにすぎず、
データレイヤーのサポートがありません。
次バージョンからは、M層の機能を追加する予定です。
第一弾として、M⇒Vへの更新伝搬（データバインド）の仕掛け、および
それに関連してバリデータ・コンバータ等の枠組みを構築し、
いわゆる「データ駆動型アプリケーション」の開発をしやすくする仕組みを追加しようと考えています。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
お疲れ様です。
先日スーパーでトマトジュースを買っていると
ふと、オマケを手渡されました。
よくよく見ると、小さなトマトの苗木が4本
慌てて揃えた家庭菜園のセット、
大きすぎると思っていた10号鉢に、
今でははみ出さんばかりに葉を生い茂らせています。
さて、hifive
連休前に慌ただしく公開してから早１カ月
何度かマイナーver. upも経て、ようやくOSSっぽさが出てきたかと思います。
これから、どんな花が咲き、実がなりますやら。。。
↓もちろん、開発リーダの風邪も、もぉ癒えていますよ(笑)
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
hifive開発者ブログ 