kern.jsはJavaScript製、WTFPLのソフトウェアです。 Webページ上にある文字が大きさを変えたり、配置を変更したらどう効果的になるか。それをWebブラウザ上で試せるのがkern.jsです。色々試すと、思いもしなかったインパクトあるデザインができるかも知れません。 デモです。テキストの場所を変えたり、文字を離したりできます。 その結果のスタイル設定を表示できます。 emの他、px単位での表示もできます。 文字を縦方向にずらしてみました。 さらに文字を縮小したりできます。 ブックマークレットを使えば任意のサイトでkern.jsを試せます。 この場合もスタイル設定が取得できます。 kern.jsはテキストの配置を変えたり、文字サイズを文字ごとに変えて楽しめます。普段のスタイルシートの使い方とは異なるビジュアル的な変更は面白さがありそうです。 MOONGIFTはこう見る まさにテ

HybridKit-JSはObjective-C/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 最近のスマートフォンアプリ開発では必要に応じてJavaScriptとネイティブを組み合わハイブリッドアプリが増えています。そこで紹介したいのがHybridKit-JSです。 デモアプリです。この画面はHTMLで出来ています。 HybridKit.runCommandで予め登録されているコマンドを実行します。 アラートを表示するデモです。 Open URLを使ってMobile Safariを使ったURLを開く操作もサポート。 set_titleを使うとタイトルバーのラベルを変更できます。 背景色を変更する機能もあります。 HTMLはこのようになっています。 HybridKit-JSではJavaScriptからネイティブの機能を呼び出す形で連携できるようになっ

Dillingerはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 WebベースのMarkdownエディタとしては@masuidriveさんの作成したwri.peがありますが、そのオープンソース版とも言えそうなのがDillingerです。 トップページがそのまま編集画面になります。左側がエディタ部、右側がプレビュー部になります。 編集しています。編集内容はリアルタイムに右側に反映されます。 日本語も問題なく扱えます。 コードの部分の表示が行単位になってしまっているのがちょっと残念です。 テーマ機能があり、自分好みの配色に変更できます。 このようにたくさんのテーマがあります。 Google Driveへの保存機能があります。 GitHubからの取り込みもあります。 Dillingerではその場での保存機能はなく、DropboxやGoogle D

SMINTはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 最近商品紹介などのWebサイトではシングルページで提供される所も多くあります。そんなWebページを作成する際に使ってみたいライブラリがSMINTです。 デモページです。スクロールしていきます。 メニューが上に貼付きました。 セクションが大きな長方形になっている辺りがシングルページらしいデザインと言えます。 SMINTを使うとスクロールして商品紹介を見せていくタイプのページに使えそうです。一番下はフッターになるでしょう。メニューをクリックした時のスライドとセクションの上部に吸い付くように止まるアニメーションも格好いいです。 MOONGIFTはこう見る 海外のWebサイトを中心にすっきりとしたデザインのサイトが増えています。情報をいかに削れるかはAppleの製

poplineはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 最近のCMSの流行はWYSIWYGな環境です。見たままに、その場で編集できるスタイルは分かりやすくて便利です。今回はストレスフリーでコンテンツの編集が可能なpoplineを紹介します。 コンテンツの表示されている状態です。こちらは編集モードです。 文字を選択すると、装飾するためのツールバーが表示されます。文字列はそのまま編集可能です。 リストを追加してみました。 リンクの場合、さらにURLを入力する欄が表示されます。 こちらは表示モード。文字列を選択するとTwitterやFacebook、Google検索するためのツールバーが表示されます。 poplineはシンプルなテキスト編集がメインですが、まさに見たままにコンテンツを編集できるのがユニークです。保存終了したコンテンツはそのままでは消え

AtratusはWindows用のオープンソース・ソフトウェア（LGPL）です。 Windows環境でLinuxのコマンドやソフトウェアを使いたいという要望は昔からあります。古くはCygwinがありましたが、今回はAtratusを紹介します。Atratusの目標はLinuxのバイナリをそのままWindows上で実行できるようにすることにあります。 コマンドプロンプトです。lsコマンドを打つとちゃんとリストが返ってきます。 別なアスキーベースのゲーム（？）です。 テトリスもあります。 ちゃんと遊べます。十字キーだけで動きます。 スネークゲーム。アスキーなゲームですが意外と面白いです。 コマンド群です。Windows側では特にコンパイルなどはしていません。 Atratusではソースからコンパイルして、といった面倒な作業がないのでインストールすればすぐに使い始められます。提供されているコマンドの

cujoJSはJavaScript製のソフトウェア（Creative Comonsをはじめモジュールごとに異なるようです）です。 Webアプリケーションが隆盛になるにつれて徐々にJavaScriptも大型になってきました。その結果、必要になるのがフレームワークでメンテナンスしやすい構築手段です。今回はcujoJSを紹介します。 フォーム入力のデモ。コントローラ、テンプレート、それらをまとめあげるmain.jsによって構成されています。 こちらはテンプレート。jQuery Templateのように${}で囲むようになっています。 入力をリアルタイムに反映させるフォームのデモ。 i18nにも対応しています。 よくあるTodoもデモがあります。 cujoJSは一つの巨大なフレームワークと言う訳ではなく、小さなモジュールが集まったツールキットという位置づけになっています。必要に応じてjQueryな

AristochartはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Webブラウザ上で表示されるグラフというと最近ではJavaScriptを使って描画されるものが多くなっています。多くはSVGなどを使っているようですが今回はCanvasを使って奇麗なグラフを描くAristochartを紹介します。 トップページ。これら全てのグラフがAristochartによって描かれています。 指定方法。データを渡すだけで描画されます。 グラフのタイトルをつけるパターン。しかし見た限りではタイトルは表示されていないようです。 こういった細かいグラフはCanvasで描くと奇麗です。 負の値を扱うこともできます。 無数のデータが交差しているグラフ。 テーマ機能もあります。こちらはオレンジ。 こちらはドット。描き方は柔軟に変更できます。 Canvasで描かれるため、マウス

pivottableはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Excelなどの表計算で便利な機能として知られるピボットテーブル。集計の項目やその計算をユーザが自由に変更して結果を確認できます。それをWeb上で表現できるのがpivottableです。 サンプルです。県と班ごとのカウントが並んでいます。数が多い所はヒートマップ調に色がついています。 棒グラフに変更。 横軸をさらに班ごと、性別ごとに分類。 縦軸を年齢ごとに。 性別、年代ごとの集計に変更。これらを簡単に切り替えられます。 項目ごとのデータ件数も確認できます。 pivottableでは元データはJSONで記述された配列になっています。それらを読み込んでテーブルに表示します。テーブルや項目名の抽出も自動で行われます。システムからはJSONを出力するだけで良く、後はpivottableに任せて

AnimaはJavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。 CSS3になって、スタイルシートを駆使すれば華麗なアニメーションが実現できるようになってきました。しかしそこには限界もあります。そこでより本格的なアニメーションを作り上げたいと考える方はAnimaをベースにしてみると良さそうです。 元素記号が踊るアニメーションです。3Dになっており、視点を変えられます。 奥に傾けたり… 右側を奥にしたりできます。 ボールがバウンドします。徐々にバウンドが緩んでいくアニメーションをスタイルシートで実現しています。 これだけでは分かりづらいのですが、右から左へバウンドしながら跳ねていきます。 遅延を使ってシーンごとのアニメーションを実現しています。 AnimaはCSS3ベースのアニメーションに対して実行や停止、そのイフェクトをJavaScriptを使って

StreamTable.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 業務システムなどではデータの表示の際にテーブル組で表示する事が多々あります。そのような時に一気に表示しようとするとレンダリングに時間がかかります。そこで使ってみたいのがデータを取得しながら表示を行っていくStreamTable.jsです。 テーブルは既に表示されていますが、データは徐々に取得されていきます。例えばこの場合は20%までデータを取っています。 ページネーションもどんどん増えていきます。 検索ボックスを使って予めフィルタリングする事もできます。マッチするデータだけが追加されていきます。 仕組みとしてはAjaxでデータを取得しています。 StreamTable.jsではデータのストリームベースでの取得に加えて、検索によるデータ絞り込みとページネーションに対応しています

Apipie-railsはRuby/Ruby on Rails用のオープンソース・ソフトウェア（MIT License）です。 システムのドキュメンテーションは一定の規模になってくると必然的に必要になります。特にRESTfulなどでWeb APIを提供している場合はそうです。そこでフレームワークにRuby on Railsを用いてる方にお勧めしたいドキュメンテーションシステムがApipie-railsです。 インストールした後、ジェネレートします。 例えばこのように記述します。コントローラのメソッドの上部に記述するイメージです。 Apipeiのルートにアクセスします。ドキュメントを作成しているリソースが一覧されます。 メソッドの説明です。必要な引数などが説明されています。 Apipie-railsではメソッドの説明やAPIのバージョン、エラーについて、引数などを一覧で書きます。一般的にこの

echoplexusはnode/JavaScript製のオープンソース・ソフトウェア（GPL v3）です。 オンラインでスモールチームを組んでクリエイティブな作業（プログラミング、デザイン）を行うならお勧めしたいのがechoplexusです。チャット、コーディング、ドローの3種類の機能を提供します。 まずチャット。テキストオンリーの渋いチャットです。 /nickで表示名を変えられます。まるでIRCのようです。 新しいチャット部屋を作る事もできます。 こちらはコード。よくあるサービスのようにHTML/JavaScript/CSSを記述してその場で実行できます。 こちらはドロー。マウスで絵が描けます。 色も多様に用意されています。 echoplexusを使うとWeb APIを使うようなシンプルなサービスであればてきぱきとできてしまいそうです。グループでコーディングしたり、チャットしたり、概念を

BootplusはHTML5/JavaScript/CSS製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近のWebデザインはフラットなスタイルが人気です。そのデザインはGoogleのサービスでも広く取り入れられています。そんなUIを自分のWebサービスでも実現したい、そう考える人に使ってみて欲しいのがBootplusです。 Bootstrapがベースになっていますが、デザインは白色系をベースにしたフラットになっています。 かなり思い切って色をカットしています。 こちらは黒地部分が大きく目立ちます。 メニューなどのウィジェットはもちろんBootstrapをベースにして構築されています。 カード形式のウィジェット。 プロフィールなどの表示に便利そうな表示です。 何となくGoogle+っぽい感じです。 ベースはBootstrapなので多彩なウィジェットやコンポ

EditrはWeb上でHTML/CSS/JavaScriptを編集して結果を確認できるサービスです。 最近、Jsdo.itのようにWeb上でコードを書いてその結果を確認できるサービスの人気があります。そのオープンソース版とでも言うべきなのがEditrです。 結果ページ。 JavaScriptの編集を行えます。 こちらはスタイルシート。 HTML。この3つを組み合わせて結果ページになります。 複数のHTMLを切り替えられます。 EditrはHTML/CSS/JavaScriptをWeb上で記述して、その結果もオンラインで確認ができます。ちょっとしたコードを試したり、一部の機能だけを取り出して遊んでみると言った時に使えそうです。 EditrはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る プレイグラウンド的なサービスは特にWeb

DiagramoはWebベースのフローチャートアプリケーションです。 個人的にCacooというサービスを好きでよく使っているのですが、機密性の高いドローなどではクラウドサービスが使えないかも知れません。そんな時に試してみて欲しいのがDiagramo、Webベースのフローチャートソフトウェアです。 インストールします。ウィザードで進めていくだけです。 メイン画面です。左側にステンシル、中央が実際に配置する部分です。 日本語も使えます。 ネットワークやUMLも作成できます。 ステンシルがドラッグアンドドロップではなくクリックベースなのはちょっと残念ですが、操作性は悪くありません。画像エクスポートは有料の範囲になっていますが、フローチャートをはじめとする図面の共有目的であれば十分ではないでしょうか。 DiagramoはPHP製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう

KrakenはHTML5/CSS/JavaScript製のソフトウェア（ライセンスはWTFPL）です。 多数のHTML5テンプレートが登場しています。あまりに多くて選択に困ってしまうくらいです。そこでモバイルファーストを選択した際に候補に挙げたいテンプレートとしてKrakenを紹介します。 こちらはグリッドのデザイン。基本は6で、それぞれ分割して配置できます。 オフセットを指定することでスペースを設けられます。 イメージギャラリー。サムネイル画像を並べられます。 ネストしたブロックも作成できます。 基本的なタイポグラフィ。 リストです。もちろんレスポンシブです。 ボタン。文字サイズや幅を変更できます。 フォームです。 コードの記述です。 主な特徴としてはクロスブラウザ対応のためのCSSリセット、レスポンシブグリッド、アドオン対応があります。アドオンは既にアイコンフォント、メニュー、スライダ

fitgridは本番環境下でも耐えられる軽量なレスポンシブグリッドなスタイルシートです。 レスポンシブなWebデザインを実現するのは大変ですが、Bootstrapを使うとそれっぽさが残ってしまう…。そんなジレンマを感じている方はfitgridを試しましょう。fitgridは軽量なグリッドレイアウトを提供します。 デスクトップサイズでの表示。 1〜4列で細かく制御できます。 タブレットサイズ。幅が狭くなっても奇麗に表示されます。 画像もグリッドに沿っています。 幅を狭くすると画像の並びも変わります。 一番狭くした場合。整然と並んで表示されます。 fitgridは横幅を12に分割してグリッド化します。.fg3といったクラスを使えば4つ並べられる計算です。12を一つ、4を3つといった具合に組み合わせて利用できます。fitgridは軽量であり、本番環境下でも使えるように余計なことはしないように設計

lunr.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webサイトを運営していて、煩雑な仕組みになりがちながらも実装を考えなければならないのが全文検索エンジンです。もし作ろうとしているのがWebアプリケーションであれば、いっそのことクライアントサイドで提供してみるのはいかがでしょう。lunr.jsを使えば手軽に実現できます。 デモアプリケーションです。左上に検索ボックスがあるのが分かるかと思います。 検索はインクリメンタルに行われます。ただし全文と言ってもタグとして指定された文字だけに限定されるようです。 インデックスの作り方です。まずindexとしてフィールドを作り、その後addメソッドを使ってオブジェクトを追加していきます。 lunr.jsではテキスト処理部分を別で設ける事ができますので非英語圏では別途分かち書きを行ってインデックス化でき

Pureはスタイルシート製、BSD Licenseのオープンソース・ソフトウェアです。 Webサービスのデザインテンプレートとして一躍有名になっているBootstrap。そのライバルとも言える存在、Pureが登場しました。開発元はあの米Yahooです。 様々なテンプレートが登録されています。こちらはフォーム。 ボタン。フラット系の色合いです。 メニュー。ドロップダウン付きのメニューもサポートされています。 もちろんページネーションも用意されています。 サンプルデザイン。メール風。 Pureは短縮化およびGzip圧縮して5.7KBと小さいサイズなのが特徴です。もちろんレスポンシブWebデザインをサポートしています。ガチガチなデザインテンプレートではなく、必要な場所だけをピックアップしたり、自分なりのカスタマイズが行えるのが特徴に上がっています。 MOONGIFTはこう見る Boostrapは