業務用Webシステムと言えばテーブルタグが欠かせません。優れたデザイン性も大事ですが、まずその前に一覧性があって、業務が滞りなく遂行できるのがまず重要です。
そんな中でもテーブルタグのヘッダー部を固定したり、スクロールできたりすると業務効率がぐっと向上するはずです。今回はそんな業務補助につながるJavaScriptライブラリを紹介します。
Ex Table Filter
テキストや正規表現、プルダウンなどから選択して行をフィルタリングできます。
Ex Table Filter | jQuery Plugin :: Demo
Grid
ヘッダーと一番左の列の固定表示、チェックボックスによる複数行選択そして並び替え機能があります。
KoGrid
カラムの表示、非表示の切り替えや表示列の差し替え、ソート機能があります。選択した行の集計もできます。
Open JS Grid v2
テーブルの並び替えに加えてページネーションができます。行の中にテキストボックスやドロップダウンを埋め込んで編集も可能です。
Welcome to Square Bracket – Open JS Grid v2
Sticky Table Headers & Columns
ヘッダーの固定表示ができます。アニメーション表示が今風で格好いいです。
Sticky Table Headers & Columns | Codrops
Pivottable
Web上で簡単にピボットテーブルを実現します。ビジュアル的にドラッグ&ドロップを使えます。
StreamTable.js
Ajaxを使ってデータを随時読み込んでいきます。内容でフィルタリングしたり、表示件数を変更できます。
jiren.github.io/StreamTable.js/stream.html
FooTable
ソート、検索、ページネーションの機能があります。
tablesort
ソート機能を追加します。
CSV Viewer
CSVファイルを読み込んで表示します。並び替え、カラムごとのフィルタ条件指定ができます。
Free PHP Grid
PHPを使っています。ソート、フィルタリング、編集モード、ページネーションをサポートしています。
Free PHP Grid — Supercharge your Development Speed
TableTools2
任意のテーブルにソート、検索、フィルタリングさらにチャートまで描けるようにするFirefox機能拡張です。
Sigma Ajax Grid
並び替え、ページネーションといった機能の他、Excelでの出力や検索、オートフィルタもあります。インラインでの値の編集も可能です。
Sigma Ajax Grid – Ajax editable data grid – DHTML grid control with flexibility and user API.
sorttable
テーブルにソート機能を追加するのみです。テーブルを指定するだけなので簡単に使えます。
sorttable: Make all your tables sortable
いかがでしたか？JavaScriptだけで高機能化することができるのでサーバサイドの開発も不要でユーザビリティを高められます。ぜひ有効に活用してください！
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
当たり前ですが、JavaScriptでは this（コンテキスト）の扱いがスコープによって異なります。そのため、例えばAjax処理内でthisを使うと想定していたものと異なるレスポンスが返ってくることがあります。
h5.ajax({
url: '/javascripts/json/own.json'
}).done(function(data) {
console.info(this);
});
-> Object {url: "/javascripts/json/own.json", type: "GET", isLocal: false, ...
例えばこのような非同期処理を実行した場合、 this は jqXhr オブジェクトになります（hifiveのAjaxメソッドは jQuery.ajaxをラッピングしています）。そのため、thisでコントローラを使いたい場合はこのように書いたりします。
var me = this;
h5.ajax({
url: '/javascripts/json/own.json'
}).done(function(data) {
console.info(me);
});
-> Ea {__name: "sample.OwnController", __templates: null, rootElement: div#container, ...
コントローラをmeという変数に入れることで jqXhr オブジェクト内のスコープでも扱えるようにします。しかしあまり格好よくはありませんよね。そこで使ってみたいのが own メソッドになります。
ownメソッドの使い方
使い方は簡単で、this.ownで関数をラップするだけです。上記の例で言えば次のようになります。
h5.ajax({
url: '/javascripts/json/own.json'
}).done(this.own(function(data) {
console.info(this);
}));
-> Ea {__name: "sample.OwnController", __templates: null, rootElement: div#container, ...
this.ownで囲むことで、コンテキストが変更できます。スコープによるコンテキストの違いは余計な不具合につながったり、コードの分かりづらさにつながったりするので、ぜひownを使ってみてください。
今回の内容は moongift/hifive-examples の own.html になります。実際にコードを試してみてください。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
良くある処理として、画面描画を行う際に初期データを取得することがあります。そのような処理をhifiveで行うにはどうしたら良いでしょうか。
答えは簡単で、コントローラの __ready メソッドを使います。細かく書くと、hifiveのコントローラ初期化プロセスは全部で4段階あります。
var controller = {
__name: 'controller',
templates: ['views/index.ejs']
__construct: function() {
},
__init: function(){
},
__postInit:function(){
},
__ready(){
},
};
h5.core.controller('body', controller);
このようになっており、上から順番に呼ばれます。
__construct
変数contollerがコントローラ化（インスタンス化）したタイミングで呼ばれます。
この時点ではまだテンプレートは読み込まれていませんので、表示処理をするには適していません。また、イベントハンドラのバインドも行われていません。逆にテンプレートを動的に変更したりするのには向いていそうです。
__init
この時点ではテンプレートの読み込みは終わっています。イベントハンドラのバインドは未処理です。
__ready
イベントハンドラのバインドまで終わったのが __ready になります。ロジックも読み込まれていますので、この時点で初期データ取得、読み込みなどを行うと良いと思います。
var chatController;
chatController = {
__name: "ChatController",
__templates: "views/messages.ejs",
chatLogic: ChatLogic,
__ready: function() {
var me;
me = this;
return this.chatLogic.getData().done(function(messages) {
return me.view.append(".messages", 'messages_template', {
messages: messages
});
}).fail(function(data) {
return console.log('error', data);
});
},
};
h5.core.controller(".container", chatController);
例えばこれは一例ですが、__readyの中でロジックを使ってデータを取り出し、その結果を表示に反映しています。
jQueryではDOMが構築されたタイミングとして $(function() { 〜 }); が良く使われますが、hifiveでは __ready を使うのが良いでしょう。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
PhoneGap/Cordovaによって、Webアプリケーションをラッピングしてスマートフォンアプリとして開発するケースが増えてきました。HTML5の利用拡大として注目した動きだと思います。
そんな中、必要になっているのがテストフレームワークの存在です。特にスマートフォン、タブレットに対応した実機テストフレームワークが必要になっています。今回はそんなテストフレームワークをまとめて紹介します。
Appium
ネイティブ・ハイブリッド両方に対応したテスト自動化フレームワークになります。JSON Wire Protocolを使ってiOS/Androidアプリを操作する仕組みになっています。テストコードはPython/node.js/Java/Ruby/Objective-C/PHP/.NET/Perlなど様々な言語が利用できます。
Appium: モバイルアプリのテスト自動化はすごいことになった
Mobile Testing
iOS/Android/Windows Phoneに対応しています。JavaScriptでテストコードを作成します。実機テストが可能で、JailBreakは不要です。
Selendroid
AndroidをサポートしたSeleniumを使ったテストフレームワークになります。こちらもJSON Wire Protocolを使っています。テストの際には専用のアプリ内にHybridアプリを配置して実行します。ジェスチャーもサポートしているとのことです。
Selendroid: Selenium for Android
eggPlant
eggPlantは自動テストの商用製品で、iOS/Android/Windows Phone/BlackBerryなどに対応しています。フルデバイスコントロールが特徴になります。
eggPlant: Automated Testing for Improving Productivity & Quality
Remote TestKit
NTTレゾナントが提供している有償のスマートフォン実機リモートレンタルサービスで、Selenium WebDriver, NativeDriverと連携してテストを実行することができます。「実機での動作」を確認できる、のがポイントですね。
Amazon WebView SDK
Amazon製のモバイルテストSDKで、Fire OSをはじめとしてAndroid用となっています。
Building and Testing Your Hybrid App
MonkeyTalk
iOS/Androidに対応したテストツールです。エミュレータ、実機の両方に対応しています。テストシナリオを記述するためのIDEを備えています。一部の機能は有償向けになります。
MonkeyTalk | Mobile App Testing Tool
Testing your app – Ionic Framework
ハイブリッドアプリフレームワークのIonicでは独自のテスト機構を備えています。Cordovaをベースに実機でもテストができるようになっています。
Testing your app – Ionic Framework
Calaba.sh
Xamarinのバックアップをうけて開発されているテスト自動化フレームワークになります。ジェスチャー、アサート、スクリーンショットを撮る機能があります。Seleniumよりもモバイルに特化した機能を提供しているとのことです。
Calaba.sh – Automated Acceptance Testing for iOS and Android Apps
Xamarin Test Cloud
クラウドベースで数百のデバイスを使ったテストが行えます。C#またはRubyを使ってテストが記述できるようになっています。
Mobile App Testing On Hundreds Of Devices – Xamarin Test Cloud
medic
Cordovaアプリに対してCI（継続的インテグレーション）を追加します。iOS/Android/BlackBerryに対応していて、JavaScriptでテストを記述します。
PhoneGap Developer App
PhoneGapの専用アプリをインストールすることでローカルのコードを再コンパイルすることなく実機で確認ができるようになります。iOS/Android/Windows Phoneに対応しています。
grunt-cordova-jasmine
Cordovaのプラグインで、Jasmineの自動テストをエミュレータ、実機で実行できるようになります。
ios-driver documentation
Selenium/WebDriver APIを使って動作します。eBayが開発に協力しているのが特徴的です。iOSのエミュレータ、実機の両方で利用できます。
いかがでしたか。HTML5製とは言え、スマートフォンアプリになるとWeb技術によるテストがそのままでは使えません。特にスマートフォンは環境が閉じられており、アプリのUI周りを含めたテストはそう簡単ではありません。今回紹介したようなソフトウェアを使い、効率的にエミュレータ、実機テストを行ってください。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
HTML5で追加された新機能の一つにCanvasがあります。よく知られた使い方としてはブラウザゲームの描画がありますが、業務系システムとは縁遠い気がしてしまいます。そこで業務システムならではの活かし方としてチャート（グラフ）を紹介したいと思います。
Canvasタグを使ってグラフを描画するということは、Webブラウザだけで完結するということです。従ってサーバ側の準備は不要で、かつ負荷もありません。HTML5で業務システムを構築する上でCanvasを使ったグラフ描画は欠かせない存在と言えるでしょう。
Epoch
Epochはリアルタイムチャートに対応しています。描画できるグラフは、エリア・ヒートマップ・曲線、円グラフ、棒グラフ、散布図となっています。
Aristochart
Aristochartは折れ線グラフ専門のライブラリで、Canvasタグにグラフを描画します。負の値や0点を任意の場所に表示する、大量のデータを描画することができます。
Aristochart – Sophisticated Javascript charts.
Chart.js
曲線のグラフ、棒グラフ、レーダーチャート、円グラフ（パイまたはドーナッツ）、エリア円グラフに対応しています。
Chart.js | Open source HTML5 Charts for your website
envision – demos
Envision.jsは折れ線グラフに対応しています。Googleファイナンスのように一部だけをマウスでドラッグして拡大させると言った操作ができるようになっています。
flotr2
flotr2は実に多種多様なグラフが描けるようです。折れ線、某、積み上げ（縦横）、円グラフ、レーダーチャート、範囲、ローソク、曲線、タイムシリーズ、ガントチャートなどです。それらのグラフを組み合わせて使うこともできます。
Yokul
YokulはGoogle Image Charts API互換のJavaScriptライブラリです。同じ指定でCanvasタグを使ってローカルだけでグラフを描画します。今のところ棒グラフのみ対応しているようです。
Yokul – Google Charts Reimplemented in a Local JS Canvas – Matt Greer
Smoothie Charts: A JavaScript Charting Library for Streaming Data
ストリーミングで入ってくるデータをリアルタイム描画するのに特化したグラフライブラリです。CPUやネットワークの状況をチェックしたりするのに使えそうです。
Smoothie Charts: A JavaScript Charting Library for Streaming Data
Protovis
Protovisは折れ線、積み上げ、円グラフなどに対応しています。なお開発は終了しており、現在はD3.js開発に移っているとのことです。D3.jsはグラフだけに留まらないデータビジュアル化ライブラリと言えます。
nextreports/nextcharts
NextChartsは棒グラフ、円グラフ、エリアグラフ、円グラフなどに対応しています。表示する際にアニメーションするのが特徴です。
rendro/easy-pie-chart
easy pie chartは名前の通りシンプルな円グラフです。インジケータになっていて、アニメーションしながら一つの数字を表示します。
いかがでしたか。Canvasタグを使うことで高度なグラフを描画できるのが分かっていただけたかと思います。若干の難点としてはCanvasタグを使う場合、動作が重たくなってしまう場合があるということでしょうか。
なおhifiveではグラフ描画ライブラリを開発中です。
IE8などのHTML5非対応ブラウザでも利用できるライブラリもありますので、業務システム上でグラフを描画する際に役立ててください！
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
hifiveを使って実際にWebアプリを作ってみるチュートリアルになります。徐々に作り込んでいきますので、hifiveがどのように動いているかも分かっていただけるかと思います。まず今回は、hifiveの基本的な仕組みを使って、YouTubeを検索して動画を再生できる、そんなWebアプリケーションを作ってみましょう。
完成図
まずは完成図を見てみましょう。
Webページが表示されたら適当なワードで検索してみましょう。今回はhtml5としています。
検索結果が表示されました。YouTubeのWeb APIを使ってデータを取得し、それをリスト表示しています。
再生ボタンを押せば動画が再生されます。なお動画プレーヤについては表示されている部分だけレンダリングしていますので、大量の動画プレーヤがあっても素早く結果が表示できています。
ページの一番下まで移動すると検索結果の追加読み込みが行われます。都度インジケータが表示されるので処理状態が分かりやすいです。
ではここから実際に作っていきます。
ベースのHTMLを作る
まずはベースになるHTMLを作ります。 index.html とします。全体像としては以下のようになります。
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta name="viewport" content="width=device-width">
<!-- 必要なライブラリを適時読み込んでください -->
<title>hifive YouTube検索サンプル</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//code.htmlhifive.com/h5.css" rel="stylesheet">
</head>
<body>
<!-- header -->
<div class="navbar navbar-inverse">
<div class="container">
<p class="navbar-brand" >hifive YouTube検索サンプル</p>
</div>
</div>
<!-- container -->
<div id="container" class="container theme-showcase">
<!-- 検索窓 -->
<div class="page-title jumbotron">
<p>キーワードを入力し検索ボタンを押下すると、関連する動画を表示します。</p>
<form id="search" class="search-form corner-all search">
<div class="search search-form-content">
<input type="text" id="keyword" class="corner-all form-control search-keyword" placeholder="キーワード"/>
</div>
<div class="search-form-content">
<input type="submit" class="corner-all btn btn-info" value="検索"/>
</div>
</form>
</div>
<!-- 検索結果 -->
<div class="page-header">
<h3 class="result-message">検索結果: <span id="totalCount">0</span>件</h3>
<ul id="result" class="result-lists list-group"></ul>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
</body>
</html>
Bootstrapを使っていますので、そのためのスタイルシートとhifiveのスタイルシートを読み込んでいます。HTMLのデザインはBootstrapに則った形になっています。また、JavaScriptのライブラリ（jQuery、hifive）もHTML下部で読み込んでいます。こちらを表示させてみましょう。
JavaScript、スタイルシートの表示を // からはじめていますので何らかのHTTPサーバが必要です。例えばPythonが入っているコンピュータであれば、HTMLファイルの置いたディレクトリで、
$ python -m SimpleHTTPServer
とすることで http://localhost:8000/ でアクセスできるようになります。
コントローラを実装する
次に検索ボタンを押した時の処理を実装していきます。まずはJavaScriptファイルを追加します。パスは自由ですが今回は javascripts/controllers というフォルダを作成し、その中に youtube-controller.js というファイルを作成しました。そのファイルをHTML側で読み込みます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
<script src="javascripts/controllers/youtube-controller.js"></script> <!-- ← 追加 -->
youtube-controller.jsの中身は以下のようになります。
(function($) {
var youtubeController = {
__name: 'youtube.sample.YoutubeController',
_keyword: '',
'#search submit': function(context, $el) {
context.event.preventDefault();
alert(context);
}
};
h5.core.expose(youtubeController);
})(jQuery);
$(function(){
h5.core.controller('#container', youtube.sample.YoutubeController);
});
__nameは適当ですが、〜Controller となっている必要があります。jQueryのreadyになったタイミングでhifiveのコントローラとして定義されます。
h5.core.expose(youtubeController);
の処理はコントローラをグローバルに公開するための処理になります。 __name で定義した名前でアクセスできるようになります。今回は youtube.sample.YoutubeController という定義なので、
youtube.sample.YoutubeController
// または
window.youtube.sample.YoutubeController
でアクセスができるようになります。
イベント処理
HTML側の #search を押したタイミングで定義したイベントが呼ばれるようになっています。先ほどの内容で実行すると次のようになります。
確かにアラートが表示されました。
alert(context) を console.log(context) にするとデベロッパーツールには次のように出力されます。
z
controller: Ea
#search submit: function (){var j=this;return La.call(j,{target:j,func:a,funcName:b,args:arguments,proceed:function(){return a.apply(j,this.args)}})}
__controllerContext: Object
__name: "youtube.sample.YoutubeController"
__templates: null
_keyword: ""
initPromise: Object
isInit: true
isPostInit: true
isReady: true
log: l
parentController: null
postInitPromise: Object
preInitPromise: Object
readyPromise: Object
rootController: Ea
rootElement: div#container.container.theme-showcase
view: Xa
event: m.Event
:
なので context.event に イベントオブジェクトが入っているのが分かります。同様に $el は #search のDOMがjQueryのオブジェクトとして入ってきます。そのため、検索キーワードが取得したい場合は、
$el.find("#keyword").val()
とすればテキストが取得できます。今回はコントローラの _keywordに検索キーワードを入れておくため、次のようになります。
'#search submit': function(context, $el) {
context.event.preventDefault();
this._keyword = $el.find("#keyword").val();
}
さらに入力が何もなかった場合はその後の処理自体を行う必要がありませんので次のような条件を追加しましょう。
'#search submit': function(context, $el) {
context.event.preventDefault();
this._keyword = $el.find("#keyword").val()
if (!this._keyword || $.trim(this._keyword).length === 0) {
return;
}
}
これでコントローラの基本的処理の完了です。
ロジック処理を実装する
今回のロジック処理とは、YouTubeからの動画検索になります。まず、javascripts/logics/youtube-logic.js というファイルを作成します。まずは以下のような内容とします。
(function($) {
var URL = 'http://gdata.youtube.com/feeds/api/videos';
var youtubeLogic = {
__name: 'youtube.sample.YoutubeLogic',
search: function(keyword, startIndex, maxResults) {
console.log("Search youtube")
}
};
//ロジックを単体で実行できるように公開する
h5.core.expose(youtubeLogic);
})(jQuery);
先ほどのコントローラと大きくは変わっていないかと思います。
ロジックを単体で実行する
ロジックはUIと切り離して作ることで、その部分だけをテストしたり繰り返し実行ができるようになります。今回もまずはロジック単体で実行してみましょう。まずはHTML側でロジックのJavaScriptを読み込みます。後ほど、コントローラでロジックを使いますのでロジックを先に読み込んでください。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
<script src="javascripts/logics/youtube-logic.js"></script> <!-- ← 追加 -->
<script src="javascripts/controllers/youtube-controller.js"></script>
HTMLを再読み込みして、さらにデベロッパーツールを開きます。コンソールで実行してみます。
> youtube.sample.YoutubeLogic
Object {__name: "youtube.sample.YoutubeLogic", search: function}
このようにロジックに直接アクセスできます。ではsearchメソッドを実行してみましょう。
> youtube.sample.YoutubeLogic.search("HTML5", 1, 10);
Search youtube
undefined
このように表示されるかと思います。
YouTubeの検索処理を追加する
では次にロジックにYouTubeの検索処理を追加してみましょう。YouTubeのWeb APIアクセスは次のようになります。
http://gdata.youtube.com/feeds/api/videos?q=html5&start-index=11&max-results=10&v=2&alt=json-in-script&callback=test
パラメータは以下です。
- q : 検索キーワード
- start-index : 検索開始インデックス（1始まり）
- max-results : 何件取得するか（結果の最大件数）
- alt : レスポンスのフォーマット（今回は’json-in-script’を指定）
- v : バージョン。2固定。
JSONPを使う場合、callbackを別途指定する必要があります。jQueryの場合、デフォルトでcallbackという名称を使いますので指定は不要です。
ではロジックのsearchメソッドを書き直してみましょう。
search: function(keyword, startIndex, maxResults) {
var promise = h5.ajax(URL, {
dataType: 'jsonp',
data: {
'q': keyword,
'v': 2,
'max-results': maxResults,
'alt': 'json-in-script',
'start-index': startIndex
},
cache: true
});
// Promiseオブジェクト(jqXHRオブジェクト)を返す
return promise;
}
コツとしてはpromiseを返しているところでしょうか。これでdoneやerrorでメソッドを引き継げるようになります。
この状態でブラウザを再読み込みして、コンソールで実行してみましょう。
> youtube.sample.YoutubeLogic.search("HTML5", 1, 10).done(function(data){console.log(data);});
k {readyState: 1, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
Object {version: "1.0", encoding: "UTF-8", feed: Object}
返ってくる Object の内容は次のようになります。
Object {version: "1.0", encoding: "UTF-8", feed: Object}
encoding: "UTF-8"
feed: Object
author: Array[1]
category: Array[1]
entry: Array[10]
gd$etag: "W/"CEQDQXgzfip7I2A9XRZUEk0.""
generator: Object
id: Object
link: Array[6]
logo: Object
openSearch$itemsPerPage: Object
openSearch$startIndex: Object
openSearch$totalResults: Object
title: Object
updated: Object
xmlns: "http://www.w3.org/2005/Atom"
xmlns$gd: "http://schemas.google.com/g/2005"
xmlns$georss: "http://www.georss.org/georss"
xmlns$gml: "http://www.opengis.net/gml"
xmlns$media: "http://search.yahoo.com/mrss/"
xmlns$openSearch: "http://a9.com/-/spec/opensearch/1.1/"
xmlns$yt: "http://gdata.youtube.com/schemas/2007"
__proto__: Object
version: "1.0"
data.feed.entry が今回使いたい検索結果の一覧になります。
コントローラに組み込む
ではこのロジックをコントローラに組み込んでみましょう。
__name: 'youtube.sample.YoutubeController',
_youtubeLogic: youtube.sample.YoutubeLogic, // ← 追加
_keyword: '',
をコントローラに追加します。そしてsearchメソッドを追加します。
_search: function(keyword, index) {
//検索ロジックが返すpromiseオブジェクトを変数に保持する
var promise = this._youtubeLogic.search(keyword, index, NUMBER_TO_LOAD_AT_ONCE);
//検索ロジック完了
promise.done(function(data) {
//総件数を表示
alert(data.feed.openSearch$totalResults.$t);
});
// promiseオブジェクトを返す
return promise;
},
NUMBER_TO_LOAD_AT_ONCEは別途、
var NUMBER_TO_LOAD_AT_ONCE = 6;
として定義してあります。
続いてイベント側のメソッドも修正します。
'#search submit': function(context, $el) {
context.event.preventDefault();
this._keyword = $el.find("#keyword").val();
this._search(this._keyword, 1);
},
この状態で実行すると、トータルの検索結果件数がアラート表示されます。
今回はここまでの実装となります。後編では表示周りを処理していきます。
今回までのコードはGitHubにアップロードしてあります。うまく動かない場合などはこちらでご確認ください。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
こんにちは、しもだです。
今回は、7/26(土)に行われたHTML5 Japan Cup 2014の最終審査＆表彰式の様子をお伝えしたいと思います。
このコンテストでは、hifiveも（新日鉄住金ソリューションズとして）スポンサー協賛し、「Webの未来とハイファイブ！賞」という賞を設定させていただきました。
賞の応募条件は「hifiveをなんらかの形で使うこと」だけ！…だったのですが、ツールやフレームワークの場合どうしてもその学習コストが多かれ少なかれかかってしまうので、それを嫌ってこの賞への応募が全くなかったらどうしよう…と内心ドキドキしていました。結果としては多数のご応募をいただくことができました。
ご応募いただいたみなさま、ありがとうございました！
さて、当日の模様です。まずは、HTML5界隈では知らない人はいないであろう白石さんから、今回のコンテストの振り返り。
4月に始まり6月30日に締め切られるまでの約2か月半で、応募総数は289作品（たくさん！）でした。
続いて、第1部の表彰式。次々と各賞の受賞者が発表されていきます。中には12歳（！）の受賞者もいらっしゃいました。後で行われたLTでも、とてもしっかりと自分のアプリを紹介し技術的課題を説明されていて、拍手喝采を浴びていました。
私たちが設定したhifive賞は、mpkさんの「NFC-Checkin+LOCA」に贈らせていただきました。
「NFCを用いた入室管理を可能にするシステム」というもので、現在シェアハウスに住んでいるmpkさん自身のニーズから生まれたものだそうです。
身近に使っているスマホやNFC対応カードなどを使って、簡単そして安価に地域通貨システムを実現するものとして、発想・実装ともに素晴らしい作品と判断し、賞を贈らせていただきました。
hifive Student Challengeでご協力いただいた朝日新聞社さんの賞は、SUGARとチェさんの「新聞クエスト」に贈られました。
懐かしさを感じるドット絵で表現された、新聞のアーカイブ記事を使った推理ゲームとのこと。やはり、犯人はヤス、なのでしょうか…。
表彰式に続いて、第2部は最優秀賞を決める最終審査です。
優秀賞として選ばれた4チームが、審査員の前で順番にプレゼンテーションを行います。
最初の発表は、technohippyさんのEnraged Fowls。
名前は某ゲームからの連想でつけたそうですが、スマホの加速度センサーとカメラをうまく使ってスリングショットの仕組みを実現するなど、高い実装力を感じさせるアプリでした。
続いては、jThree合同会社さんのYouTubeそっくりなWebGLプレーヤー。
この作品の応募者でありjThreeの作者でもある松田さんは、このコンテストの最初のアイデアソンから参加されており、そのときからすでに注目を集めていました。
作品は、一見YouTubeの動画プレーヤーにみえるんだけど、実は中は全てWebGLでリアルタイムレンダリングされているので自由に視点移動できちゃう…！というもの。
実装で使っているjThreeは、jQuery的なお作法でCGモデルを操作できたり、MMDのモデルデータを読み込んでさくっと表示したりできるそうです。今度使ってみよう…。
3番目の発表は、fokaさんのコトバツナギ。
Web Speech APIを使って音声認識をしつつ、しりとりや連想ゲームができるというアプリです。Flasherな方ということで、デザインや画面遷移などがとてもオシャレでした。
最後のプレゼンはknockknock.jpさんのJS Racing。
見た目的には、80年代終わり～90年代初めくらいにあったちょっと懐かしいアーケードのレースゲーム、といった感じでしょうか。20余年の月日を経て、今やブラウザでこんなゲームまで動くようになったんですね。
もちろん、現代のゲームらしくWebSocket(Socket.IO)によるオンラインバトルも可能になっていて、こちらも完成度の高い作品でした。
来場者全員による投票ののち、休憩と審査員特別賞の表彰をはさみ、いよいよ最優秀賞の発表です。
審査委員長である吉川さんと各チームの代表4名が壇上へ。発表を控え、皆さん緊張した面持ち。
最優秀チームは…「TOKYO！」
「やっちゃったぜ…！…でもやりきったぜ…！」という複雑な心の声が聞こえた気がしました。
…気を取り直して、最優秀賞の発表です。
全289作品の中から選ばれたのは、fokaさんのコトバツナギでした！
表彰状とトロフィー、そして賞金100万円の授与。HTML5で何ができるか？を競ったコンテストが、ここに幕を閉じたのでした。
閉会にあたり、白石さんからhtml5jのリーダー退任のご挨拶。
ゼロをイチにするのが好きだという白石さんは、自分の役目は果たしたということで、新たな道に進むことを決意されました。
新たなhtml5jのリーダーは、吉川さん。
私たちも、1を10、100に大きくしていく活動に少しでもお手伝いができればと思っています。
コンテストの後は、懇親会と、受賞者によるLT大会が行われました。
hifiveのPMたっての希望（？）で、審査員としていらっしゃった池澤あやかさんと、hifive賞を受賞されたmpkさんとで記念写真。
白石さんとも。
最後は、スタッフ、スポンサー、受賞者、みんなで集まって記念写真。
今回、個人的にも映像記録ボランティアとしてこのコンテストに関わらせていただきましたが、皆さんの様々な面白いアイデア、Web界を盛り上げていきたいという想いに触れることができ、とてもよい経験になりました。
このコンテストの”たぎった勢い”を背中に受けつつ、hifiveの開発を一層頑張っていきたいと思いました。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
Webベースの業務システムを開発する場合、えてして管理画面が必要になります。とは言え、ユーザ向けの画面であればともかくシステム管理者や開発者だけが触る画面に対してあまりユーザビリティの高いUI/UXが提供されることは多くありません。
そこで使ってみたいのがBootstrapです。同じように考える人たちは多く、Bootstrapを使った管理画面テンプレートは実に数多く存在します。ぜひ好みにあったものを選んで、使いやすい管理画面を構築してください。
SB Admin 2
大きなアイコンが印象的なダッシュボードです。グラフ、テーブル、フォームなどの機能があります。
SB Admin 2 – Free Bootstrap Admin Theme – Start Bootstrap
AdminLTE
地図のグラフやメニューへのバッジ表示、ツールバー部分のアイコンなどの機能があります。
Free Admin Template For Bootstrap – AdminLTE | Almsaeed Studio
Bootstrap Admin Theme v3
カレンダー、グラフ、テーブル、ボタン、WYSIWYGエディタのサポートがあります。
SIMINTA
パステルな色使いが特徴で、大きなアイコンで分かりやすい作りになっています。
Bootsrtap Free Admin Template – SIMINTA | Admin Dashboad Template
Binary Admin
メニューなどの項目に大きなアイコンが表示されています。コントラストのはっきりした色使いになっています。
Free Bootstrap Admin Template : Binary Admin
BCORE Admin
3カラムのテンプレートになっていて、より多くの情報を詰め込めるようになっています。
BCORE Admin Dashboard Template | Dashboard
Metis
黒基調のテンプレートになります。ファイルマネージャ機能や地図、多数のコンポーネントと実に多機能です。
Simple Dashboard
すっきりしたデザインのシンプルな管理画面です。スマートフォンやタブレットからでも利用しやすそうです。
Dashboard – Bootstrap Admin Template
グラフ、カレンダー、ステータス表示などが可能です。メニューは上にアイコンで並ぶ形になっています。
Dashboard – Bootstrap Admin Template
hierapolis
角丸なフラットUI系テーマになります。パステルカラー基調ですっきりとした見た目になっています。
Admin Home Page
ウィジェットに分かれているので様々な情報が盛り込めるようになっています。テーブルも細かく分けて表示できます。
Free HTML5 Bootstrap Admin Template
角丸で淡い配色が特徴になっています。陰付きなデザインはちょっと前のトレンドだったデザインになります。
Free HTML5 Bootstrap Admin Template
いかがだったでしょうか。今回は特に無料で配布されているものに厳選してご紹介しました。Bootstrapの管理画面で有料のものもたくさんあるのですが、なかなか自分たちが使う管理画面に対してお金を支払えるケースは多くないように思います。無料で高機能なものも多いので、ぜひこちらを使うべきでしょう。
なおBootstrapはテンプレートであってそのままでは動きません。ぜひhifiveと組み合わせて高機能な管理画面を実現してください。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
hifiveではテンプレートエンジンとしてEJSを採用しています。EJSは次のような構文で記述します。
<table>
<tbody>
[% for(var i = 0, l=list.length; i <l ; i++) {
var row=list[i];%]
<tr id="[%= name %]_[%= row.userId %]">
<td>[%= row.userName %]</td>
<td>[%= row.marks %]</td>
</tr>
[% } %]
</tbody>
</table>
そしてデータはJSON形式で次のようになります。
{
"name":"test_data",
"list":[
{
"marks":"11",
"userName":"Test user",
"userId":"2"
},
:
],
:
}
テンプレート側で list と指定している箇所がそのままEJSの list という変数で定義されている形になります。JSONフォーマットがそのまま使えていると考えられると思います。
そのJSONデータとEJSを組み合わせてHTMLを生成するのですが、JSONデータを変更するたび、EJSを変更するたびに再読み込みしているのでは開発効率が悪いはずです。そこで今回、EJSのテンプレートエディタを提供開始しました。GitHubで公開されていますが、オンラインでもお試しいただけます。
テンプレートエディタはテンプレート（EJS）とデータ（JSON）を使って、リアルタイムにHTMLへ変換してプレビューできるソフトウェアになります。詳しい説明はこちらで確認いただけますが、主な特徴は次のようになります。
- EJSとJSONを使ってその場でHTMLプレビュー
- テンプレート、データはWeb上で編集できます
- テンプレート、データの編集はリアルタイムに反映
- Bootstrap/jQueryなどのライブラリを選択して利用可能
となっています。対応ブラウザはChrome/FirefoxそしてIE8以上となっています。ぜひ一度お試しください！
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
WebGLの普及にともないWebブラウザ上でお手軽に3Dデータを扱えるようになってきました。そこで今回はWebGLを活用したツールとして、Webブラウザ上で動作する3Dモデリングツールについてまとめてみました。
Webブラウザで動作するということもあり、お手軽に3Dモデリングを試してみることができるので、3Dモデリングに興味がある方はぜひ試してみてください。
Tinkercad
3Dモデリングを始めようと思い立ったものの、モデリングツールの使い方が分からないという方にオススメです。チュートリアルで3Dモデリング手順が解説されており、ツールの操作方法を覚えながら3Dモデリングのコツを学べる内容になっています。立方体や円柱、三角錐といった基本的なオブジェクトの他にアルファベットや「！」「？」といった記号のオブジェクトも用意されており、ちょっとしたロゴをモデリングする用途にも活用できそうです。
作成したデータはSTL、X3D、VRML97といった3Dプリンタで出力できる形式でダウンロード可能です。また、MinecraftのSchematicデータとしても出力できます。チュートリアルはアカウント登録不要なので、まずはツールの使い方を一通り覚えてから本格的な活用を考えてみてはいかがでしょうか。
Tinkercad | Create 3D digital designs with online CAD
Tridiv
3DモデリングデータをHTMLとCSSのみで表現するという、一風変わったアプローチが特徴です。作成した3DモデリングデータはHTMLとCSSとして出力される他、EMBEDタグで参照できます。HTMLとCSSでデータを表示した場合は一枚の止め絵になりますが、EMBEDタグ経由でデータを表示した場合は、拡大縮小、回転などのビューア機能が付与されます。
TRIDIVに用意されているオブジェクトは立方体、円柱、三角柱、三角錐といった基本的なもののみであり、他のツールに比べ、思い通りのモデリングには練習が必要かもしれません。
Clara.io
作成した3Dモデルデータを活用して3Dコンテンツを作成したい場合に便利です。3Dデータ作成にとどまらずアニメーション作成やレンダリングといった機能が提供されており、β版と銘打っているものの、Webブラウザ上で一通りの3Dコンテンツ作成が行える完成度の高いWebアプリケーションです。
面白い特徴として、操作内容が全てJavaScriptとして記録されるという点があります。3Dモデルデータの作成をJavaScriptから自動化したり、計算結果のシミュレーションを3Dアニメーションで表現するといった活用法方が考えられるでしょう。
Clara.io: Online 3D Modeling, 3D Rendering, Free 3D Models
3DTin
3DTinは手軽に3Dモデリングを行えるWebアプリケーションです。用意されている3Dオブジェクトを用いて、ペタペタとスタンプを押していく感覚でモデリングできます。チュートリアル動画も提供されていますが、シンプルなインタフェースであるため操作方法で迷うことは少ないでしょう。また、動画撮影機能が提供されており、3Dモデルデータを用いたアニメーションも作成が可能で
す。
3Dモデリングデータのエクスポート機能は他のツールにもありますが、3DTinでは3Dデータのエクスポート先として、i.materialiseなどの3Dプリントサービスを直接指定できます。
Sketchfab
Sketchfabを利用すると3Dモデリングデータの公開と共有が簡単に行えます。3Dデータ共有をメインにしたWebサイトであり、27種類以上のデータフォーマットのアップロードに対応しています。また、3D Coat、Blender、Photoshopといったアプリケーションから直接Sketchfabにデータをアップロードすることも可能です。
Sketchfab自体には3Dモデリング機能はありませんが、簡単な3DモデリングツールとしてScriptGLというツールが用意されています。
Sketchfab – The web platform for publishing your interactive 3D models
Away3D TypeScript
WebGLを利用したWebアプリケーションを作成する場合に便利なのがAway 3DTypeScriptです。Adobe Flash用の3Dエンジンとして提供されているAway 3Dを移植したもので、JavaScriptまたはTypeScriptから利用可能なライブラリとなっています。
Away 3D TypeScriptはAway3Dで作成したアプリケーションをHTML5とWebGLによるWebアプリケーションに移行しやすくすることを目標としており、Away 3DとActionScript3を使ったことがあるユーザには馴染みやすいライブラリになっています。
csg.js
CSG(Constructive Solid Geometry)は3Dモデリング用のJavaScriptライブラリです。Webブラウザ上で3Dモデリングを行うのではなく、JavsScriptから3Dオブジェクトを操作して3Dモデルを作成します。例えば、土管のような3Dモデルを作成したい場合は、円柱オブジェクトに対して一回り小さな円柱オブジェクトで引き算の操作を行うことで、中がくり抜かれて空洞になった3Dデータを作成できます。
使用できる操作はunion、subtract、intersectの3種類ですが、CSGのWebサイトではこれらの操作を組み合わせた複雑な形状の作成例が示されています。
Project Shapeshifter
3Dプリンタ向けに少し複雑なモデリングデータが欲しい人には、AutoDeskがテクノロジプレビューとして公開しているShapeshifterがオススメです。テンプレートとなる3Dモデリングデータとパターンデータが用意されており、Webブラウザ上から3Dモデリングデータのパラメータを変更することで、3Dモデルを捻ったり圧縮したりできます。
表面の形状は豊富に用意されているパターンデータから変更可能です。例えばフラットな表面の形状からゴルフボールの表面のようなデコボコした形状に変更したりできます。
いかがだったでしょうか。3DプリンタやUnityゲームエンジンなど、一般ユーザーの間でも3Dデータを利用する場面が少しずつ増えてきています。自分で作った3Dデータを活用するとより楽しみの幅が広がるかと思います。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
hifive開発者ブログ 