ウェブアプリケーション用インタフェースビルダーを提供するDivshot、シードラウンドで110万ドルを調達

サンタモニカのDivshot発表によると、同社はシード資金として110万ドルを調達した。Divshotはウェブアプリケーションのインタフェースをドラッグ&ドロップで作成するためのサービスを提供している。本ラウンドはRincon Venture Partnersが主導したもので、500 Startups、Daher Capital、Floodlight Ventures、Cooley LLP、Drummond Road Capital、そしてEric Hammondが参加している。

Divshotが運用を開始したのは、カンザスで開催されたStartup Weekendというイベントがきっかけだ。イベントにおいて、他の開発者たちからの絶賛を受け、共同ファウンダーのMichael BleighおよびJake JohnsonがDivshotにフルタイムで専従することを決意したのだった。またCrowdStart LAにも参加して、Right Side Captalから設立資金の25万ドル及び、将来的な資金調達についても相談し得る地位を獲得した。また最近までLaunchpad LAにも属していた。

Divshotはさまざまな経験の中で、サービスの外観をシンプルでかつ実用的なものに変更してきている。そうした方が開発者たちからの評価が高くなることを発見したのだそうだ。

当初、DivshotではTwitterによるUIフレームワークのBootstrapを利用していた。そのフレームワーク上で動作するWYSIWYGエディタを提供してインタフェースやモックアップの開発速度を向上させるというサービスを提供していたのだ。しかし「私たちの目的はひとつのフレームワークでのみ動作するニッチなツールを開発することではないのです」とBleighは述べる。その発言通り、DivshotはZURB Foundationおよびモバイル用CSSフレームワークのRatchetのサポートをアナウンスしている。

「ウェブ開発における標準ツールの地位を獲得し、ビジュアルデザインの世界でAdobeのCreative Suiteが占めているような立場に立つ可能性もあると考えているのです」とのこと。

2000名以上の開発者とのプライベートテスト段階を経て、昨年10月に一般公開となった。その当時で9000人以上の開発者が利用を希望していたのだそうだ。口コミなどによる評判が広がり、今では40000名以上の人が利用している。

最近は「Divshot Docs」というオープンソースのドキュメントサイトも公開して、ここにガイド、チュートリアル、Tips、ちょっとしたトリック系の使い方などの情報を掲載している。オープンソースというやり方に非常に積極的であるようだ。

Divshotの公開ベータには、こちらより、現在のところ無料で参加することができる。

原文へ

(翻訳:Maeda, H)


【友人のために】商品一覧などで使われる、border,floatを使ったhtml,cssの書き方

学生時代からの友人が、アパレル業界からWeb業界にジョブチェンジしまして。(おめでとう!がんばってね!)
そんな彼から一本の質問電話が。「上下左右1pxのborderで囲ったwidth150pxくらいのボックスを、marginで間隔を空けずにfloatさせて商品一覧を作りたいんだけど。ボックス同士が隣り合うとボーダー2pxに見えてイケてない。どうすればいい?」
……。文章にすると伝わり辛いですね。質問を図で表現するとこのように困っているようです。


ということらしいです。解決方法はいくつかありますが、私の場合のやり方を。
全体の表示領域を600px(#list)とします。
その中にwidth150pxの商品達(.items)を4列2行で並べます。
解説付きのデモ用意しました

まずはhtmlの書き方

4列2行なのでズラズラ書いています。m( _ _ )m liの中は全部同じです。
[html]

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

[/html]

css

width、border、font-size、paddingなどはお好みでどうぞ。
ポイントは12行目と13行目です。

12行目のmarginで、borderサイズの分をマイナスしてます。
今回はボックスのborderを1pxにしましたので、-1pxと書いてます。
(borderを3pxするなら、-3pxと書きます)

13行目はIE対策です。
書かないとマイナスした分の右と下のborderが消えてしまいます。><
[css]
#list {
width: 600px;
}
#list .items {
float: left;
width: 150px;
list-style: none;
}
#list .items div {
border: 1px solid #CCC;
padding: 5px;
margin: 0px -1px -1px 0px;
position: relative;
}
#list .items div h3 {
font-size: 14px;
margin: 0px;
padding: 0px;
}
#list .items div p {
font-size: 12px;
margin: 0px;
padding: 0px;
}
[/css]