開発者ブログ

デモ一覧

一般デモ

対面販売

出先での顧客情報の参照や、訪問履歴の更新

勤怠管理

勤怠管理デモアプリです。カレンダー上に複数人の出退勤時刻をグラフ表示することで、チームの勤怠状況をわかりやすく確認できます。

自在拡縮画像表示

マウスホイールで、任意の大きさに滑らかに画像を拡大縮小して表示できます。複数の解像度の画像を予め用意しておくことで、縮小して全体表示にしても高速に動作し、かつ拡大しても高精細画像に切り替えて細部まで確認することができます。Open Seadragonというライブラリを使用しています。

理解度確認クイズ

hifiveの理解度確認クイズ。自習室で公開している理解度確認クイズです。 ブラウザ上で自分の書いたコードを実行し、その場で正解かどうかを確認できます。

手書き認識(簡易文字認識)

3層パーセプトロンを用いた、手書き数字を認識するサンプルです。(written by Isao Sonobe.)

書道サンプル

タッチまたはマウス操作で書道のように文字を書けるサンプルです。(written by Jo Kanemori.)

Uram

隠れている敵を時間内にすべて見つけるゲームです。(written by Kazuhito Kojima.)

pump demo

端末を振ると風船が膨らみます。(written by meganetaaan.)

承認・申請ワークフロー

よくみられる承認・申請のワークフローのサンプルアプリです。

スマートデバイス活用

棚割り支援

自動販売機のレイアウト作成支援アプリ

営業支援

GoogleMapと連携して、近隣の営業先の検索を行う。

店舗巡回

店舗を巡回し、自社製品の補充や陳列情報の確認

日報作成

写真に手書きメモを追加して報告書を作成できます

お絵かきボード

canvasを使ったお絵かきボードです。選択した画像に対して書き込むこともできます。

加速度センサーサンプル

加速度センサーを使って物理演算オブジェクトを動かすサンプルです。

TontonLeapMotionをスマートデバイスの加速度センサーを使用するよう移植したものです。

チャート

チャート

ラインチャート・ローソクチャートを表示可能な部品です。

ダッシュボード

移動可能なポートレットを1画面に収めたダッシュボード。ローソクチャートを使用しています。

データグリッド

データグリッド

datagrid は巨大なデータを表形式で表示するためのコンポーネントです。

グラフ

グラフ

comming soon

hifiveの開発支援ツール

アプリ構造の視覚化

hifive開発者ツールを使用して、アプリケーション構造を実行時に視覚化します。イベントハンドラの実行回数やメソッドの呼び出しトレースを表示できます。

Geolocation - 座標データ生成ツール

テスト用のダミー座標を生成するツールです。

Geolocation - 確認画面

テスト用のダミー座標を生成するツールです。

Web SQL Database - レコード編集ツール

Web SQL Database内のデータを操作するツールです。

jQuery UIとの連携

Datepicker

hifveとjQuery Mobileの各ウィジェットの連携サンプルです。

Dialog

hifveとjQuery Mobileの各ウィジェットの連携サンプルです。

Tabs

hifveとjQuery Mobileの各ウィジェットの連携サンプルです。

Drag & Drop

hifveとjQuery Mobileの各ウィジェットの連携サンプルです。

Sortable

hifveとjQuery Mobileの各ウィジェットの連携サンプルです。

jQuery Mobileとの連携

hifive with jQuery Mobile

hifveとjQuery UIの各ウィジェットとの連携サンプルです。

YouTube検索サンプル

チュートリアルに掲載されている動画検索サンプルのjQuery Mobile版です。

jQuery Validateとの連携

hifive+jQuery Validate

hifiveとjQuery Validateの連携サンプルです。

KeyboardJSとの連携

hifive+KeyboardJS

hifiveとKeyboardJSの連携サンプルです。

HTML5 APIs

Web Storage

Web Storage(Local StorageとSession Storage)にデータを格納~復元するサンプルです

Web SQL Database - おこづかい帳アプリ

Web SQL Databaseを用いたおこづかい帳アプリのサンプルです。データを登録し、登録したデータの削除/更新を行うことができます。このアプリを例にh5.api.sqldbの解説を記述しています

WebGL - 降水量アプリ

WebGLを用いて全国の降水量を可視化したサンプルです。日付けを変更することでその日の各地の降水量を確認することができます。

データモデル・データバインド

todo

データモデル・データバインド機構を利用した、TODO管理アプリです。

schedule

データモデル・データバインド機構を利用した、スケジュール管理アプリです。

機能系(領域切替)

ボックス区切り移動

領域の境界移動を可能にするコンポーネントです。

機能系(その他)

右クリックメニュー

右クリックでメニューを表示するコンポーネントです。

タブ切り替え

comming soon

ArrowBox(吹き出し)

吹き出しを表示するコンポーネントです。

コンボボックス

多くのデータの中から絞り込みつつ選択することができるコンボボックスです。

仮想スクロール

巨大なリストや表をスクロールする際に表示されている部分のみを表示することを実現するためのコンポーネントです。

慣性スクロール

comming soon

外部リンク

Tweetping日本限定版

3bchさん作成の、Node.js、D3.jsを用いた Tweetping日本限定版を想定したサンプルです! 【ソースコードはこちら】

マインスイーパー

meganetaaanさん作成の、Reactを用いた マインスイーパーのサンプルです! 【ソースコードはこちら】

動画デモ(YouTubeのページが開きます)

ロウソクチャートによるデータ視覚化

HTML5の技術を用いて、Webブラウザ内でロウソクチャートを描画するサンプルです。

依存関係のグラフ視覚化

依存関係のグラフ構造を表示するサンプルです。大量のノード・エッジを高速に描画しています。

チュートリアル解説

HelloWorld

チュートリアル/step3

ビューテンプレートの利用

チュートリアル/step5

ロジックの利用

チュートリアル/step6

非同期処理1

チュートリアル/step7-1

非同期処理2

チュートリアル/step7-2

動画検索アプリ

チュートリアル/step10

AOPの適用1

チュートリアル/step13-1

AOPの適用2

チュートリアル/step13-2


Copyright (C) 2012-2017 NS Solutions Corporation, All Rights Reserved.