何十人でも同時に使えるリアルタイムコラボレーションテキストエディタ·Firepad MOONGIFT
FirepadはFirebaseをバックエンドに使ったリアルタイムコラボレーションテキストエディタWebアプリケーションです。 Webの魅力と言えばリアルタイムコラボレーションです。そんな魅力を如実に理解できる実際にみんなで一つのコンテンツをいじくり回している時かも知れません。今回はテキストエディタであるFirepadを紹介します。 この埋め込まれているページがコラボレーションエディット画面になります。45名のユーザが同時に編集しています。 日本語も大丈夫なようです。 FirepadはバックエンドのシステムとしてFirebaseを使っています。リアルタイムを得意とするバックエンドを採用することで、Firepadのシステム自体は軽量になっています。今後のサービスのあり方として興味深い作りになっています。 Firepadはnode.js/JavaScript製のオープンソース・ソフトウェア（M
SVGをもっと活用するために使いたい·svg.js MOONGIFT
svg.jsはアニメーションやイベント駆動型のSVGを実現するライブラリです。 SVGはまだ広く利用されているとは言いがたいですが、ビットマップではなくベクターデータなので拡大してもきれいなど特徴が多数あります。今回紹介するsvg.jsはSVGを使ったアニメーションを実現するライブラリになります。 デモです。単純なオブジェクトの生成、移動、中央寄せが簡単に指定できます。 クローンして重ね合わせ。重心の判定、傾けるのも手軽です。 X軸、Y軸のずらし。塗りつぶし。 枠だけを描く、グラデーション（線形、円形）。 クリック、マウスオーバー、画像マスクもできます。 クリックしたオブジェクトだけ色を変更します。 さらにアニメーションも自在に。 プラグインによる拡張もサポート。 svg.jsを使えばアニメーションはもちろんのこと、画像を重ねて表示したり、マウスイベントによって形状や色を変更したりすること
スクラムによるプロジェクト管理を推進するUI·TrackerTracker MOONGIFT
TrackerTrackerはPivotal Trackerのデータをスクラムにあった形で表示してくれるソフトウェアです。 最近のプロジェクト管理のスタイルはアジャイルが多いように思います。また、その中でも人気があるのはスクラムです。Pivotal Trackerのデータをスクラムにしてビジュアル化してくれるのがTrackerTrackerです。 カラムがステータス、その中にタスクが入っています。 タグによる絞り込みが可能です。 タグは複数設定できます。 イテレーションのステータスやベロシティをグラフ化できます。 TrackerTrackerはPivotal TrackerのデータをWeb API経由で取得して表示しています。さらに表示だけでなく、操作による書き込みにも対応しています。複数プロジェクトの出し分けにも対応しており、よりアジャイルなプロジェクト管理に最適な画面を提供します。 T
非Boostrapプロジェクトでも使える200種を越えるWeb Fontアイコン集·Elusive icons MOONGIFT
Elusive Iconsは非Bootstrapサイトでも使えるWeb Fontを使ったアイコン集です。 Bootstrapの魅力の一つにWebサイト構築でよく使われるようなフォントが予め提供されているというのがあります。さらにそのアイコンも使い勝手よくしてくれるWeb FontによるFont Awesomeも便利です。そしてBootstrap以外のサイトでも使いたいと考える方はElusive Iconsを利用してみましょう。 Bootstrap標準のアイコン相当があります。 ソーシャル系アイコン。 一般的なユーザ向けのアイコンもあります。 Elusive IconsはBootstrapベースのプロジェクトはもちろん、それ以外のプロジェクトでも使えるように想定されています。IE7以上から対応が可能とのことです。217のアイコンがあれば、大抵の装飾には事足りるのではないでしょうか。 Elus
写真や動画を愛するクリエイターに贈るCMS·Koken MOONGIFT
Kokenはクリエイティブな人たちをターゲットにしたCMSです。 ブログ系のCMSと言えばWordPressが最も利用されていると思いますが、より特定の領域にフォーカスするなら特化したもののが良いはずです。今回はクリエイターにおすすめのCMS、Kokenを紹介します。 インストールウィザード。この時点からして格好いいです。 チェック完了。後はデータベースの設定などをこなしていけばOKです。 ログイン後。チュートリアルが出ます。 メディア管理。ドラッグ&ドロップでアップロードできます。 アップロードしました。 こちらはブログ風にエントリーを書く画面。 サイトプレビュー。 写真を集めてアルバムを作れます。 写真閲覧画面。 写真一覧。 詳細情報も表示できます。 動画も再生できます。 記事の表示。 Kokenはメディア管理、表示機能に特に重点を置いています。FlickrやInstagram、Vim
Canvas+JavaScriptを使って画像解析·Resemble.js MOONGIFT
Resemble.jsはCanvasを使って画像の解析、二つの画像の差分を抽出するJavaScriptライブラリです。 Canvasを使って何ができるかをみんな模索していると思いますが、特に多いのが画像解析、表示ではないかと思います。今回はJavaScript+Canvasによる画像解析ソフトウェアであるResemble.jsを紹介します。 一例。写真のRGB解析と明るさを解析しています。 二つの画像を比較しています。 色を排除した比較。 サンプル。これで間違い探しが快適になりますね。 Resemble.jsではresembleという関数を提供します。これにファイルデータを渡すと、RGBと明度の値が返ってきます。さらに二つ目の画像を渡すと差分のパーセントやその差分となる画像データが返却されます。そのまま使うのはもちろん、画像解析の手法として参考になる部分も多そうです。 Resemble.j
必要なパスワードを一元管理できるグループパスワードマネージャ·Swordfish MOONGIFT
Swordfishは企業内での利用も想定されたグループパスワード管理です。 Webサービスなどは未だにID/パスワードによる認証が行われています。そうした状況下ではチームや企業内でのパスワード管理もグループで行う形になるでしょう。そこで使えるのがSwordfishです。 最初にキーを作成します。 生成しました。秘密鍵はダウンロードして.sshフォルダに入れておきます。 新しいパスワードを作成します。 こんな感じです。 サイトのURLを入れておくとFaviconを使ってくれるのがいい感じです。 表示した場合です。Flashを使ってクリップボードにパスワードをコピーしてくれます。 Swordfishでは個人のパスワードをはじめ、パスワードの共有も行えるようになっています（筆者が確認した限りではそのやり方が分かりませんでしたが）。秘密鍵を介してのみパスワードが解除されるので、安心して利用できるサ
Webアプリケーション開発に使えるJavaScriptフレームワーク·ComponentJS MOONGIFT
ComponentJSはWebアプリケーション開発用のMVC対応JavaScriptフレームワークです。 ここ数年JavaScriptのフレームワークが幾つも登場していますが、今回紹介するのはComponentJS、HTML5のリッチWebアプリケーション開発用のJavaScriptフレームワークです。 デモのログイン機能。 ビジュアルデバッガーが売りの一つです。 ComponentJSは階層化されたコンポーネント、MVC、イベント駆動型、状態管理などが特徴になっています。他のライブラリへの依存がなく、jQuery UIやSencha Touchなどとも連携できます。さらにビジュアルデバッガーという強力なライブラリが提供されています。 ComponentJSはJavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
2D/3D双方をこなせるCanvasタグを使ったアニメーションライブラリ·taccgl MOONGIFT
taccglはHTML5/Canvasを使った2D/3Dアニメーションライブラリです。 Web上でインタラクティブなアニメーションを実現したいならば参考にしてみて欲しいのがtaccglです。2Dおよび3Dに対応したアニメーションをHTML5のCanvasで実現します。 例です。立方体が回転します。 完全にばらばら。 細く切れた断片が飛んでくるデモ。 平面として回転するデモ。 円形になるものも。 カール。 ボックスが下から飛んでくるデモ。 オブジェクトが回転します。 水平方向への回転。 GPUアクセラレーションが有効であればそちらを使うようになっており、より滑らかなアニメーションが実現します。既存ページへのアニメーションの追加も行えるようになっており、インパクトある表現が可能です。 taccglはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGI
デザインモックアップ作業で役立つ機能が詰まった·RoughDraft.js MOONGIFT
RoughDraft.jsはモックアップ構築中のデザインを高速化するためのライブラリです。 Webサイトのデザインをしていて、同じ表現を繰り返し入力するのはとても面倒です。そこでRoughDraft.jsを使って楽をしましょう。 例です。繰り返し部分の処理が簡単になります。 JavaScriptの記述もいらず簡単に使えます。 data-draft-repeatで繰り返す回数が指定できます。さらにdata-draft-imageでplacehold.itの画像を埋め込めます。その他data-draft-textで適当な文字、data-draft-dateで適当な日付を埋め込んでくれます。一つのブロックを作れば良いだけなので変更も簡単で便利に使えるでしょう。 RoughDraft.jsはJavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。 MOONGIFT
レスポンシブWebデザインの請求書テンプレート·sprInvoice MOONGIFT
sprInvoiceはHTML5で作られた請求書のテンプレートです。 Webサービスで課金を行っている場合、請求書をオンラインで出力して欲しいと言われるかもしれません。そんな時に使えるのがsprInvoiceです。 通常の請求書。 スマートフォンレベルの幅にした場合。 支払い済み請求書。 こちらももちろんレスポンシブ。 支払いが遅延している場合。 こんな感じに表示されます。 sprInvoiceはPCはもちろんのこと、スマートフォンにも対応しています。デザインはレスポンシブWebデザインになっており、請求完了または未払いのテンプレートも用意されています。意外と使えるソフトウェアではないでしょうか。 sprInvoiceはHTML5製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る MOONGIFTではプレミアムサービスを提供していますが、その
これは必須！HTML5用ゲームコントロールに·HTML5 Virtual Game Controller MOONGIFT
HTML5 Virtual Game Controllerはタブレットやキーボード、ジョイスティックなどの入力に対応したWebゲーム用ライブラリです。 PCでゲームをする場合、キーボードやマウスでの操作が一般的です。しかしより楽しもうと思うならばゲームパッドの利用は必要でしょう。さらにスマートフォンの場合は入力UIが限られます。そこで使ってみたいのがHTML5 Virtual Game Controllerです。 デスクトップ。キー入力と矢印キーで操作します。 動きはスムーズです。 iPhone版。画面上のコントローラを使います。 スムーズな操作とは言いがたいかも知れません…。 ボタンの認識も今ひとつです。 HTML5 Virtual Game Controllerではゲームコントローラーライクな入力インタフェースが画面の両端に表示されます。左側が移動キー、右側がアクション用のボタンです。
タグ入力はこれにお任せ！·jQuery TextExt MOONGIFT
jQuery TextExtは自動補完をはじめとする便利な機能が多いタグ入力ライブラリです。 タグ入力機能を持ったWebサービスは多いですが、入力しやすいものは多くありません。そこで使ってみたいのがjQuery TextExtです。 こんな感じでタグ入力ができます。×ボタンを押せば消えます。 他の入力から追加もできます。 自動補完。 入力した値は配列で受け取れます。 自動補完のカスタマイズも可能です。 削除だけでなく、値の変更もできます。 予め入力された状態にもできます。 タグ入力で必須とも言える入力補完や入力後の表示変更、placeholder、×ボタンによるキャンセルなど必要な機能は概ね押さえてあります。デザインを自分のサイト向けにアレンジすればすぐに使えそうです。 jQuery TextExtはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェア
iPhone/iPadで使えるHTMLソースビューワー·Snoopy MOONGIFT
SnoopyはJavaScript製のフリーウェア（ソースコードは公開されている）。iPadやiPhoneの最適化サイトを構築していて面倒なのが、HTMLソースの閲覧機能がないことだ。シミュレータですら閲覧できないのでデバッグがしづらい。ユーザエージェントを変えればPCからでも見られるが、完全に真似する訳ではない。 プロパティ 必要なのは、iPhone/iPad上でその場でHTMLソースを見る機能だ。今表示されている内容をそのままソース表示する、そんなブックマークレット型ソフトウェアがSnoopyになる。 Snoopyは自分でサーバを立てても良いし、Snoopy配布サイトにあるブックマークレットを使っても良い。いずれにしてもiPhone/iPad上で実行するとフローティングウィンドウが表示される。文字コードやHTML構成についての情報が閲覧できる。 こちらは生成されたHTMLソース そして
ブラウザキャッシュではなくローカルストレージを使ったキャッシュシステム·basket.js MOONGIFT
basket.jsはローカルストレージにJavaScriptをキャッシュして高速化をはかるソフトウェアです。 Webの高速化を語る上でキャッシュの存在は欠かせません。そこで使ってみたいのがbasket.jsです。何とHTML5のローカルストレージを使ってキャッシュする仕組みを提供します。 最初の実行。underscore.jsなどが読み込まれています。2回目以降は消えます。 でもちゃんとjQueryオブジェクトは存在します。 basket.requireメソッドを使って対象ファイルを読み込みます。有効期限を設定することも可能です。読み込み失敗をハンドリングすることもできます。普段はそのまま利用でき、remove()やclear()でファイルを解除できます。 basket.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る ロ
CMSに組み込みたい、見たままにページの編集を行うJavaScript·Create.js MOONGIFT
Create.jsはユーザ向け画面をそのまま編集できるJavaScriptライブラリです。 CMSは一般的にユーザ向けの画面と管理画面とが分かれて提供されています。しかし運用時にはユーザ向けの画面を見ながらその場で修正したいこともあるでしょう。その際に使えるライブラリがCreate.jsです。 メイン画面です。この時点では普通に表示されています。 エディターを立ち上げました。Editボタンを押します。 編集可能な部分に色がつきました。 編集中の画面です。 編集しました。 コンソールで見ると編集した内容がJavaScriptのオブジェクトになっているのが分かります。 Create.jsは単体で動作する訳ではなく、編集した内容を別途サーバサイドに送ってDBやファイルを更新する必要があります。ただし、編集可能な箇所を決めたりすることはできるので、運用担当者の編集可能範囲について自由に更新し、保存
Webサイトをもっと万人に対してアクセスしやすくするために·HTML_CodeSniffer MOONGIFT
HTML_CodeSnifferはウェブアクセシビリティ改善のためのブックマークレットです。 Webは限られた人たちのものではなく万人向けのものであるべきです。そこで考えられるべき項目として障害のある人に対するアクセシビリティです。そのチェックに使えるブックマークレットがHTML_CodeSnifferです。 実行すると右上にフローティングウィンドウが出ます。エラー、警告、通知の3つに分けてポイントが出ます。もちろんポイントが少ない方が良いです。 各項目の説明を見られます。これらはW3Cのウェブコンテンツ・アクセシビリティ・ガイドラインに則っています。 指摘されている箇所を確認できるマーカーも出ます。 MOONGIFTの場合…がっくりするくらいのエラー数です…。 アクセシビリティと漠然と言われてもなかなか具体的な施策が思いつきませんが、エラーや警告という形で表してくれれば対応もとりやすくな
文字から絵文字に一気に変換·emojify.js MOONGIFT
emojify.jsはテキストから絵文字に一括変換してくれるWebサービスです。 様々なWebサイトで使われている絵文字。単なるテキストでは伝わりづらい感情を表現するのに役立ちます。そんな絵文字を自分のサイトでも手軽に導入できるのがemojify.jsです。 ずらっと並んだ絵文字。これが全て使えます。 実際のソース。単なるテキストです。 emojify.jsはテキストとして書かれている絵文字のテキスト（emoji-cheat-sheet.comで定義されているもの）を絵文字に変換してくれます。実に500種類近くのアイコンが使えるようになります。emojify.run()を実行するだけでテキストから画像に自動変換してくれます。 emojify.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 絵文字の持つ威力はとても大きいで
HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT
HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手
多彩なデバイスに対応したWebサイト構築に最適なデザインフレームワーク·Centurion MOONGIFT
CenturionはレスポンシブWebデザインに対応したCSSフレームワークです。 レスポンシブなWebサイトを構築するためには様々なデバイスでの表示を考慮したり、そのためのノウハウが必要になります。そこでベースとして取り入れてみたいのがCenturionです。 デスクトップでの表示です。 スマートフォンレベルまで幅を狭めた場合。 メニューはスライドして表示されます。 タブレットはこれくらい。 グリッドもあります。 Centurionはシンプルなフレームワークなので、それほど束縛は強くないと思います。カスタマイズ性も考慮されているとのことなので、Centurionをベースにしつつ独自の要素を盛り込んでWebサイトを構築できるでしょう。 CenturionはHTML5製のオープンソース・ソフトウェア（GPL/MIT License）です。 MOONGIFTはこう見る Bootstrapは個人
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
