Skip to content

hifiveのUIライブラリ紹介「ArrowBox(その1)」

hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はArrowBoxを紹介します。ArrowBoxは指定したDOMの上下左右、任意の場所に対してツールチップを出すライブラリです。

動作デモはこちらで確認できます。使ってみているところは下の画像を参照してください。

使い方

HTMLはとてもシンプルなものです。ただし、h5arrowboxというIDのDOMを用意しているのが特徴になります。

そして、JavaScriptのコントローラは次のようになります。view.registerが特徴です。

そして、ボタンをクリックした時のイベントを作成します。directionはHTMLのdata要素で指定した、up/downまたはright/leftが指定できます。

さらに吹き出しを消すためのイベントも作成します。

このような実装によって、ツールチップが好きな場所に出せるようになります。


動作デモはこちらで確認できます。ヘルプとしてぜひ使ってみてください。

 

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

banner_02

TrueType Fontが配布されているアイコンフォントまとめ

Webサービス内でアイコンを挿入する際に、アイコンフォントが使われることの多くなってきました。アイコンフォントとはWebFontのアイコン版のことです。

アイコンフォントを使用することにより、

  • ベースラインを合わせるのが容易
  • CSSで拡大縮小・色の変更を容易にできる
  • iPhoneなどの解像度の高いデバイスでもぼやけることなく表示可能

といったメリットがあります。

そんなアイコンフォントには様々な種類があります。今回は巷に出回っているアイコンフォントについて、特にTrueType Fontが配布されているものを網羅的に紹介したいと思います。なお、紹介したアイコンフォントに関する情報はブログ執筆時のものです。最新の情報についてはリンクしてあるページからご確認ください。

Font Awsome


  • 634種類
  • 種類
    Webアプリケーション
    アクセシビリティ

    交通機関
    性別
    ファイルタイプ
    回転系
    フォームコントローラ
    支払系
    グラフ系
    通貨
    エディタ系
    方向系
    プレイヤー系
    ブランド
    医療系
  • ライセンス
    原則はMIT License。詳細はこちら

もっとも知名度が高いといっても差し支えないアイコンフォントです。一般的なアイコンからブランド、医療系まで634種類と様々なバリエーションがあります。

フォントの挿入方法は、

<i class="fa fa-camera-retro"></i> 

というスタンダードな記載方法で挿入できます。

またサイズ変更は、

<i class="fa fa-camera-retro fa-lg"></i> 

とクラスにfa-lgを加えるだけでCSSを触ることなく簡単に変更できます。

そしてダウンロードせずともCDNで利用できるのも魅力です。

アイコンの数、柔軟な変更機能やその知名度や日本語のドキュメントも豊富なことから、使い慣れてない方ならばFont Awsomeがオススメです。

WebHostingHub Glyphs


  • 1000種類以上
  • 種類
    ビジネス
    コミュニケーション
    PCおよび携帯
    デザイン・ライティング
    開発
    エンターテイメント
    食べ物
    ホスティング
    メニュー
    マルチメディア
    スポーツ
    ゲーム
    シンボル
    時間
    場所関係
    その他
  • ライセンス
    Creative Commons Attribution 3.0

数の面で圧倒的に他に勝っているアイコンフォントです。公式サイトの使い方のページによると、Bootstrapで使うことを勧めています。

<i class="icon-filter"></i>

という風に記載するだけで簡単に挿入できます。Bootstrapを用いたページを作成する際にはお勧めです。

Batch.

数は厳選されていますので、実際のアイコンを確認しつつ作成するページのイメージに合っているか確認する必要があるでしょう。アイコンは角のない優しいデザインとなっています。

Ligature Symbols

製作者がsymbolsetに影響を受けて、Ligature機能を使ったSymbol Web Fontを自作しようという試みの元に作成されたフォントです。意味ある合字(リガチャ)で表示できるように設計してあります。そのため、意味不明な文字や空の文字を使うことで生じるSEO面でのデメリットを回避することができます。作者が日本人ということもあって日本語の環境に対応しています。日本語のドキュメントがあるので海外製のアイコンフォンを避けていた方にオススメです。

typicons

角のない可愛らしいアイコンが特徴的です。

<span class="typcn typcn-arrow-left"></span>

という風に、クラス名の頭に「typcn-」を指定することでアイコンを挿入することができます。線が太めの分かりやすいデザインなので、小さめな表示で多数のアイコンを使いたい時に使えそうです。

Foundation Icon Fonts 3


  • 283種類
  • 種類
    一般的
    ページ系
    矢印
    人型
    デバイス
    エディタ
    メディア系
    コーマス系
    アクセシビリティ
    ソーシャル・ブランド系
    その他
  • ライセンス
    MIT License

デザインフレームワークの有名なものの一つにFoundationがありますが、Foundationを提供しているZURBによるアイコンフォントになります。

数は他に比べると多くないですが、ソーシャルネットワーク系のブランドアイコンが多いのが特徴的です。Foundationを使う際にはFoundation Icon Fonts 3を使用すると良いでしょう。

Genericons


  • 145種類
  • ライセンス
    GPL

WordPressのデフォルトテンプレート「TwentyFourteen」にも使用されているアイコンフォントです。数は145種類とあまり多くないですが、WordPressのデフォルトテンプレート内で使用されていることもあり、TwentyFourteenを使って統一感のあるページを作りたいならば、Genericonsがお勧めです。

Simple Line Icons Webfont


  • 160種類
  • ライセンス
    個人および商用で利用可

名前の通りシンプルな線で描かれたアイコンフォントです。シンプルなので小さな画面から大きな画面(作成者によると1660pxまで)問題なく使用できます。洗練されたシンプルなアイコンを使いたい場合は、こちらと次のStroke Gap Iconがお勧めです。

Stroke Gap Icon


  • 200種類
  • ライセンス
    個人および商用で利用可

こちらもシンプルなアイコンです。Simple Line Icons Webfontと比べると食べ物系のアイコンがやや多いのが特徴です。

42 Weather Icons


  • 42種類
  • ライセンス
    個人および商用で利用可

名前の通り42種類の天気に特化したアイコンです。次に紹介するClimaconsと比較しながら、天気に関するサービスで使われることをお勧めします。

Climacons


  • 75種類
  • ライセンス
    個人・商用利用可

こちらも天気関係に特化したアイコンです。42 Weather Iconsアイコンと比較するとやや数が多く線が太いのが特徴的です。

Themify Icons


  • 320種類
  • 種類
    矢印・方向
    ウェブアプリ
    コントローラ系
    エディタ系
    レイアウト系
    ブランド
  • ライセンス
    GPL

AppleのiOS7のアイコンに影響を受けて作成されたアイコンフォントです。以下のように指定します。

<span class="ti-download"></span>

WordPressの公式プラグインになっていること、IE7対応な点が魅力です。

Linea Free Iconset


  • 730種類以上
  • 種類
    基本
    音楽
    コマース
    ソフトウェア
    推敲系
    矢印
    天気
  • ライセンス
    Creative Commons

シンプルなアイコンです。線で描かれたシンプルなアイコンが各種、満遍なく充実しているところが特徴です。

Feather


  • 130種類
  • ライセンス
    MIT License

UX/UIデザイナーのCole Bemisが作ったシンプルなアイコンです。なお、ダウンロードの際にはメールアドレスの登録が必要です。

Freebie


  • 130種類
  • ライセンス
    MIT License

適度に書き込まれた線描写が特徴的です。昨今はやりのフラットデザインとは少しだけ雰囲気の違ったデザインとなっています。


今回はアイコンフォントについて紹介しました。アイコンはテキストを減らし、ユーザビリティを向上させます(あまり使いすぎるとよくありませんが)最適なウェブフォントを選び、より使いやすいページを作成してください。

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

banner_02

JavaScriptを別な言語で書くためのライブラリまとめ

JavaScriptはWebブラウザで動く唯一のプログラミング言語です。そのためWebシステムに関わるプログラマはJavaScriptの習得が必須と言えます。

しかし仕様が慣れないという声や、スクリプト言語が苦手という人もいるでしょう。そうした方に向けて、JavaScript言語を別なプログラミング言語で書けるライブラリを紹介します。

Python

この手のライブラリで多いのがPythonです。Pythonの構文は括弧が少なく分かりやすいこともあってCoffeeScriptにも反映されています。それをさらに進めてほぼPythonの構文を使えるようにしています。

Pyjs

特にリッチなWebアプリケーションを開発するのに向けて開発されています。Web Tool KitのPython版という位置づけで開発が開始しました。

MSHTMLをサポートすることで、Webはもちろんデスクトップも対象としたWebアプリケーションが開発できます。

Transcrypt: Lean and mean Python 3.5 to JavaScript compiler

TranscryptはWebブラウザでそのまま動くのではなく、PythonのコードをJavaScriptに変換するライブラリです。そのため、ビルドツールなどを使ってPythonファイルが更新されたら自動生成するような仕組みを使うのが良さそうです。

Brython

Python3の構文でJavaScriptとして動きます。Ajaxはもちろん、SVGの描画、グラフなどグラフィックスにも強いのが特徴となっています。

Ruby

Pythonと並んで人気のあるスクリプト言語であるRubyもJavaScript化しています。

Opal: Ruby to JavaScript Compiler

RubyからコンパイルしてJavaScriptになります。Ajaxを動かしたり、jQueryの利用もできます。ソースマップにも対応しているので、Rubyの構文ままでデバッグができます。

RubyJS | Home

RubyJSはそのままRubyというよりも、Ruby風に書けるJavaScriptといった方が正しいかも知れません。あまり無茶をしない分、習得してしまえばCoffeeScript風に使いこなせそうです。

HotRuby – Ruby on JavaScript and Flash

JavaScriptによるRuby実装で、RubyVMになります。さらにFlashでも動作するとのことです。最近は更新されていないようです。

Lua

Luaも幾つかの実装があります。

Moonshine – A lightweight Lua VM for the browser

ブラウザで動作するLua VMです。コンパイルされたLuaのバイトコードをJavaScript上で実行します。

Lua.js live demo

LuaのコードをJavaScriptに変換します。すべてJavaScriptで書かれており、scriptタグにてapplication/x-luaと指定してLuaのコードを記述するか、テキストを変換して実行することができます。

その他

その他にも幾つかの言語での実装があります。

GWT

Googleが開発したライブラリで、JavaをJavaScriptに変換して実行します。特にサーバサイドも含めてJavaで記述することで、サーバサイドとクライアントサイドを共通した言語で作り上げることができます。

Grooscript

GroovyのコードをJavaScriptに変換して実行します。Angularもサポートしており、Groovyを使ってより本格的なWebアプリケーションが開発できます。

Scala.js

Scalaの構文を使ってWebアプリケーションが開発できます。ReactやAngularと組み合わせて利用することもできます。パフォーマンスにも気を配っており、実際の本番環境下でも使用することも可能です。


いかがでしょうか。JavaScriptを書くのが嫌だという方でもこれらの言語を使うことでより効率的にWebアプリケーションが開発できそうです。何よりサーバサイドとクライアントサイドの言語を統一できれば、開発効率はぐっと向上することでしょう。もちろん本当の言語に比べてできないこともありますので(ローカルのファイルを扱ったり、ネットワーク周りなど)、検証を行ってください。

 

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

banner_02

hifiveのUIライブラリ紹介「localCombobox」

コンボボックス(select)はHTML標準で提供されます。選択肢が少ないときには問題ありませんが、数百の中から選択するとなると大変です。名前順に並んでいたとしても、ユーザビリティが高いとは言えないでしょう。

そこで使ってみたいのがlocalComboboxです。インクリメンタルな検索機能付きのコンボボックスです。

デモはJSFiddle上で公開しています。実際の動きは次のようになります。

作り方

HTML

HTMLは次のように inputのtype=”text” で定義します。

また、hifive本体とは別に以下のファイルを読み込みます。

JavaScript

JavaScriptはまず ComboBoxController を読み込みます。rootElementにはHTML側のインプットを指定します。

__ready内ではコンボボックスコントローラに対してデータを適用します。これはAjaxを使っても問題ありません。デモでは分かりやすいように配列にしています。

最後にコントローラをバインドして完了です。

これで文字列検索を使ってインクリメンタルに絞り込めるコンボボックスが使えます。データリソースはAjaxを使ってデータベースから取ってくることもできますので、大量のデータでも扱いやすくなるでしょう。

デモを使って体験してみてください。


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

banner_02

hifiveハンズオンが開催されました

9月1日、日本マイクロソフト社にてhifiveハンズオンが開催されました。今回はhifiveを使ってWeb業務アプリケーションを構築体験してみるというもので、日報アプリケーションを開発しました。こちらはその様子を紹介するレポート記事です。

マイクロソフト十倉様によるVisual Studio Codeの紹介

Visual Studioというと.NET向けのIDEですが、そのスクリプト言語版と言えるのがVisual Studio Codeです。オープンソースで、マルチプラットフォームで動作します。すでに多くのプラグインが作られています。

今回はマイクロソフト社エヴァンジェリスト、十倉様からVisual Studio CodeやOffice向けのアプリケーションをHTML5/JavaScriptで作る例が紹介されました。

ハンズオン開始

ハンズオンに際してWeb業務フレームワークのhifiveについて簡単に紹介しました。

ハンズオンはGitHub上にある資料を基に行いました。

hifivemania/hifive-handson

実際にハンズオンを行っている様子です。

ハンズオンは資料を使って各自自由に行ってもらいました。そして何か詰まったところがあったり、HTML5に関して質問があったらサポートする手法となっています。

全部で8章まであるのですが、8割方終わった方が多数いらっしゃいました。資料はオープンになっていますので、ハンズオンの後で詰めてみるということもできます。さらに質問があれば、GitHub Issues を使って聞くこともできます。


今後、ハンズオンの資料を増やしたり、定期的に開催していきたいと考えています。Web技術を使った業務システム開発に興味がある方はぜひご参加ください!

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

banner_02

OSC 2016 .Enterpriseに出展しました

9月1日に開催されたOSC 2016 .Enterprise(オープンソースカンファレンス・エンタープライズ)にhifiveとして出展しました。去年に続いて二度目です。

渋谷ということもあり、多くの方々にブースを訪れていただきました。ありがとうございます。多くの現場で働く開発者の方々にお会いし、hifiveを知ってもらうことができました。

次はOSC Tokyo(明星大学)になる予定です。hifiveブースに訪れた際にはぜひお声がけください!

オープンソースカンファレンス2016 .Enterprise – オープンソースの文化祭!

 

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

banner_02

Google ChromeのDevToolsをサーバサイドのデバッグにも役立てよう

DevToolsはHTML5/JavaScript/CSSの開発に役立つツールですが、今回はさらに拡張してサーバサイドの開発でも役立ててしまおうという機能拡張を紹介します。

PHP

PHP Console – Chrome ウェブストア

サーバ側で発生したメッセージ、エラーなどをDevTools上で確認できるようになります。画面上に var_dumpなどを出力しないで済むのが良さそうです。

Clockwork – Chrome ウェブストア

インストールするとClockworkというタブが追加されます。Laravel、SlimそしてCodeIgniter 2.1に対応しています。サーバサイドでもライブラリをインストールする必要があります。

Xdebug helper – Chrome ウェブストア

PHPのXdebugと組み合わせて使います。通常、Xdebug向けにパラメータを追加したり、Cookieの設定を行いますが、Xdebug helperを使うことで自動的に行ってくれるようになります。

Symfony2 Profiler shortcut – Chrome ウェブストア

Symfony2のプロファイリングに特化した機能拡張です。Xdebugと組み合わせて使うようです。

FirePHP4Chrome – Chrome ウェブストア

FirePHPのデバッグメッセージをGoogle ChromeのDevTools上で見られるようになります。

Ruby

RailsPanel – Chrome ウェブストア

Rails向けの機能拡張です。Railsというタブが追加され、その中でアクションやActiveRecord、パラメータなど細かい部分まで踏み込んでチェックできます。

Python

Django Debug Panel – Chrome ウェブストア

Djangoアプリケーション用のタブが追加されます。特にHTMLを返さないAjaxリクエストの解析などに向いているそうです。


主な言語はPHPとなるようです。他の言語については独自のアプリケーションサーバの仕組みがあるからかも知れません。とは言え、サーバサイドのエラーやデバッグメッセージがDevTools上で見られるようになれば、開発もより効率的になることでしょう。

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

banner_02