alloyはAppceleratorが開発したTitanium用MVCフレームワークです。 JavaScriptを使ってiOSもAndroidアプリも作れるのが魅力のTitaniumですが、大型なアプリを作るには仕組みの自由度が高過ぎに感じる人も多いのではないでしょうか。そこで使ってみたいのがAppcelerator社自らが開発するMVCフレームワークのalloyです。 インストールします。npmでインストールできます。 まずアプリを作成します。ディレクトリで「alloy new .」と実行すればOKです。 生成された内容です。まるでRailsのような構成です。 こちらはコントローラー。オブジェクトにアクションを結びつけています。 こちらはビュー。ボタンなどの配置を決めています。 alloyはMVCそれぞれコマンドラインからベースを生成できます。コードはコンパイルしてJavaScriptに

ZUI53はHTML5/CSS3を使った無段階ズームライブラリです。 スマートフォンでは画面が小さいこともあってズーム機能を良く使います。そんな時にかくかく動いていたら興ざめです。同じ操作をデスクトップブラウザでも実現してくれるのがZUI53です。マウススクロールやピンチ操作でスムーズにズームイン/アウトしてくれます。 サンプルです。まずデフォルトの表示です。 マウスのスクロールでスムーズにズームインします。 逆にズームアウトもできます。ごくごく小さくなりました。 アイコンも大きくなります。SVGで描かれているとどれだけ拡大しても奇麗です。 逆に一気に小さく。アニメーションはとてもスムーズです。 ZUI53を使っているSketcHubのデモです。どんなことができるのかよく分かります。 マウススクロールはもちろん、ピンチ操作もサポートされているのでタブレットやスマートフォンにおいてもより直感

gather-css-jsはJavaScriptやスタイルシートをまとめた上でキャッシュさせるライブラリです。 Webサーバの負荷を下げるためにキャッシュを使うのは効果的です。しかしあまり長い間キャッシュを使うようにすると実ファイルを更新してもいつまでもキャッシュを使うようになってしまいます。そこで使ってみたいのがgather-css-jsです。 デモです。最初の表示では全て同じ値（v=の後）です。 CSSを更新しました。vの値が更新されています。これでキャッシュが更新されます。 使い方です。PHPを使ってファイルを読み込み、結果として更新日時のタイムスタンプが返ってきます。 gather-css-jsが行っているのはRailsがサポートしているキャッシュ方式に近いものです。vに更新日時を入れることでファイルが更新されればパラメータの値が変わってキャッシュがリフレッシュされます。また複数の

Chronoline.jsは左右に展開するシンプルな年表ライブラリです。 万人誰にとっても共通で変わらないリソースが時間です。時間ごとに変化するデータ、その時に起きたイベントなどを見せるのに最適なのが年表です。そこで紹介したいのがChronoline.js、シンプルなUIのWebベースの年表ライブラリです。 日ごとの年表。左右への移動はスムーズです。 今日の日付部分が四角く囲まれています。 こちらは月ごと。メモリが大きくなっています。 Chronoline.jsは月、四半期、年といった単位で表示できるようになっています。プロットしたデータにはフローティングを使って情報を追加できます。イベントは日付とタイトルという形でハッシュを作り、それを配列としてJSONデータにするだけです。複雑な情報は表示できませんが、時間軸に沿って何が起きたのかといった表現に良さそうです。 Chronoline.js

PDF Forms Designerは入力対応のPDFを作成するソフトウェアです。 PDFのあまり使われていない機能の一つ（失礼！）にフォーム入力があります。個人的には国や自治体関係くらいでしか見た事のない機能な気がしますが、その原因は作るためのソフトウェアが限られるという問題があるかと思います。そこでPDFフォームを作ってみたい方はPDF Forms Designerを使って無料でフォームを作りましょう。 メイン画面です。 ボタンやテキストボックスを配置します。 日本語が表示されないのが残念ですが、テキストボックスの値を書き換えられます。 画像を貼付ける事もできます。 オブジェクトにアクションをつける事もできます。 PDF Forms Designerでは様々な入力コンポーネントを配置して、フォームを作成します。利用者は入力や選択をした後、印刷するような仕組みです。 PDF Forms

MintboardはPHP製のユーザビリティを考慮したフォーラムソフトウェアです。 オンラインコミュニケーションの基本と言えばフォーラムです。既に昔からいくつもソフトウェアが存在しますが、今回はPHP製のMintboardを紹介します。ユーザビリティに重点を置いたソフトウェアになります。 トップページです。フォーラムが一覧されます。 フォーラムの下にはスレッドが一覧されています。 スレッドの中にはレス一覧があります。 レスしたりスレッドを立てるためにはアカウントを作成する必要があります。 レスを書くテキストエリアです。 レスをつけました。 トピックを立てる場合のフォームです。 Mintboardの特徴は幾つかあり、面倒な登録作業を伴わずに使えること、利用が楽しいソフトウェアであること、高速な表示、より短い更新期間でアグレッシブに更新するといったことが挙げられています。実際、とてもシンプルで

BarkeepはGitリポジトリに対応したユーザビリティ高いコードレビューシステムです。 会社でプログラミングを行っているとそのコードの品質はばらつきが出てきます。そうするとバグが多くなったり、予期しない問題に直面したりします。それを防ぐのに有効なのがコードレビューです。Barkeepはユーザフレンドリーなコードレビューシステムになっています。 メイン画面です。コミットログが並んでいます。 詳細です。差分が表示されています。 サイドバイサイド。アニメーションしながら表示されて格好いいです。 コードをダブルクリックするとコメントできます。 コメントしました。 一つにまとまっている場合もコメントできます。 レビュー依頼もできます。 ステータスです。レビューされている、されていないといった情報が一目で分かります。 検索結果です。 こちらはプロフィール。 Barkeepは検索における入力補完やフィ

Desantはランディングページの申込者を管理するシステムです。 Webサイト、iOSアプリ、キャンペーン…何らかのサービスを開始しようと思ったら欲しいのがサービスの紹介ページです。まだリリースされていない場合にはそこでユーザに先行登録を促す事もできます。その結果を集約するサービスがDesantです。 ログイン画面です。 ログインしました。登録したユーザが一覧表示されています。 こちらはリファラーです。 登録してくれたユーザのIPアドレスから参照できる場所が地図上にマッピングされています。 都市ごとにすることもできます。 日本からの登録もあるようです。 Desantは言わばランディングページを管理するソフトウェアになります。結果としてはメールアドレスを登録して完了となります。メールマガジンの登録を促したり、メールを使ったアップデート通知に使えるでしょう。 DesantはRuby製、GNU

Montageはモトローラ社製のHTML5 Webアプリケーションフレームワークです。 Webサイトに比べるとWebアプリケーションで求められる素養は多少異なります。アプリケーションゆえに予め決められたコンポーネントを組み合わせて作る方が一般的です。そこで紹介したいのはMontage、モトローラ社製のHTML5 Webアプリケーションフレームワークです。 デモのKitchen Sinkです。 ボタンです。デザインはすっきりとして見やすいです。 こちらは時刻を表示するデモ。 クリックで削除するタグのデモ。 Todoアプリのデモ。 Fiddleを使って試す事もできます。 画像からカラーピッカーするデモ。 計算機のデモ。 Montageには多数のコンポーネントが用意され、それらを埋め込む形で配置してけば画面が出来上がります。カレンダーやレンジ入力、トグルボタンなど様々な入力コンポーネントが用意さ

Screen Capture (by Google)はGoogle Chrome上でWebサイトのスクリーンショットを取得、加工できるソフトウェアです。 Webサービスを作っているとスクリーンショットを必要とする機会は多いのではないかと思います。Windowsデフォルトのスクリーンショット機能を使う人はいないと思いますが、今回はScreen Capture (by Google)を紹介します。Chrome上でスクリーンショットの取得、加工が行える便利な機能拡張です。 インストールはChromeウェブストアでできます。 右上のメニューが機能になります。 まず一部だけのキャプチャ。 キャプチャした後、簡易的な編集ができます。 簡単にぼかしが加えられるのは良いかも。 囲んだり線を引いたり文字を追加したりできます。 続いて長いページの場合、上から下までスクロールしてキャプチャできます。 後は見えて

KineticJSはCanvasタグを使ったベクターグラフィックをより簡単に使えるようにするJavaScriptライブラリです。 HTML5の登場によって、Web上でも高度な表現が可能になっています。とはいえそのためにすごい量のコーディングをしなければならないイメージがあります。しかしKineticJSを使えば分かりやすいコードで、ゲームやドローを伴ったグラフィックスが描けそうです。 サンプル。ボタンを押すとオブジェクトが動く。 こちらは星をドラッグアンドドロップできる。 世界地図のベクター画像。 ビルのマップ。マウスに反応して格好いい。 動物の絵と影をマッチさせるゲーム。 ここからは実際に利用されている例。ロボットアバターを作成する。 こんな感じに自由に選べる。 かつてはFlashでやっていたようなグラフィックがJavaScriptで実現する。 ひげを載せる遊び。これもKineticJS

WalmaはWebブラウザで使える、コラボレーションドローソフトウェアです。 会議や授業では必須とも言えるのがホワイトボード（または黒板）です。一方的に書かれるだけでなく、みんなで一つの作品を仕上げていく際にも使われます。そんなホワイトボードをデジタル化したのがWalmaです。Webブラウザベースでコラボレーションしながら作品を作り上げられます。 こちらはメイン画面。最初にホワイトボードを作ります。 ホワイトボードの画面です。URLを共有すれば、誰でも一緒にドローできます。 ペンは色や太さを変更できます。 反応は悪くありません。ドラッグを止めた時に情報が送られるので、書きながら共有されるという訳ではないようです。 なんとなくウサギっぽい絵を描いてみました。 他のブラウザでもちゃんと共有でき、一緒に編集できます。 ドラッグで全体を動かせます。 Walmaは主に学校での利用を目的として作られた

Source Sans ProはAdobe社がリリースしたオープンソースなフォントファミリーです。 Adobeは言わずと知れたグラフィックス系ソフトウェアの最高峰とも言える企業なので、デザインに対する意識は並々ならぬものがあります。そんなAdobeがはじめてリリースするオープンソースのフォント、それがSource Sans Proです。 フォントのサンプルです。Black。 Bold。 Extralight。 Italic。 Light。 Regular。 Semibold。 縦長のプロポーションですっきりとして見やすく、色々な場面で使えるのではないでしょうか。なおTrueType Fontの他、OpenType Fontもリリースされています。 Source Sans ProはOpen Font Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Source