CSS3だけで実現する多彩なアニメーション·magic MOONGIFT
magicはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Webページは基本的に静的で、動くものは訪問者の目を引きます。アニメーションGIF、Flash、動画などがありますが今回はユーザの操作によるインタラクティブなアニメーションを実現するmagicを紹介します。 色々なパターンのアニメーションが用意されています。 それぞれのボタンを押すとアニメーションが実行されます。 デモ動画です。たくさんのパターンがあるのでぜひ試してみて下さい。 magicではボタンやパネルをクリックすると裏にあるオブジェクトを表示すると言ったようなエフェクトが実現できます。magicはスタイルシートのみでアニメーションを実現しています（実行のトリガーはJavaScriptですが、クラスを追加するだけです）。技術的にも興味深いソフトウェアです。 MOON
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
HTMLを使ってiOSアプリのモックアップを手早く作るフレームワーク·Ratchet MOONGIFT
RatchetはHTML/CSS/JavaScriptを使ってiOSアプリのモックアップを素早く作るフレームワークです。 iPhoneアプリを開発する際にまずプロトタイプを作ることが多いですが、Xcodeなどを使って作っていては時間がかかると感じるかも知れません。そこでもっと手軽に手早くモックが作れるRatchetを使ってみましょう。 デモサイトです。 ヘッダー、フッターは動かないでスクロールします。 チケットページに遷移しました。 フォームです。奇麗です。 設定ページ。ボタンの色も指定できます。 こちらはキッチンシンク。 タイトルだけでもこんなにパターンが。 タブバーも色々。 ボタンも大きさ、バッジ付きなど色々。 リスト。 リストにバッジをつけられます。 ボタン付きバッジ。 フォーム。 Ratchetの利点はHTML/CSS/JavaScriptで構成されているということです。記法に沿っ
面白い！Webサイトが出来上がっていく様子を再生·Time Machine MOONGIFT
Time MachineはGitを使ってHTMLコーディングが仕上がっていく様子を画像、動画にするソフトウェアです。 Webデザイナーの方がHTMLをコーディングしていく中で、後でその過程を見せたいと思ったことはないでしょうか。そこで使ってみたいのがTime Machineです。 Time Machineを使うとphantomJSを使ってnode.jsでスクリーンショットを撮ります。 デモ動画です。 Time Machineの仕組みはシンプルで、まずHTMLファイルをGitで管理しつつコーディングしていきます。そして途中途中でGitにコミットしておきます。後はTime Machineを実行するとコミットログを元にファイルを戻しつつ、phantomJSでスクリーンショットを撮る動作を繰り返していていきます。まさにアイディアの勝利です。 Time MachineはRuby/node.js製のソ
Web Fontの新しい使い方！US地図をWeb Font/CSSで表現·Stately MOONGIFT
StatelyはWeb Font/CSSを使ってUS地図を表示するソフトウェアです。 地図（ここではUS）をWeb上に描こうと思った場合、SVGを使ったり画像を使うのが一般的です。しかし今回は一風変わったやり方、Web Fontを使ったStatelyを紹介します。 デモです。このアメリカの地図がフォントで作られています。 一部を見ると、ハイライト設定されているのが分かります。 フォントビューワーで見た所。州の形ごとに作られているのが分かります。 StatelyはWeb Fontとスタイルシートで指定されているので色を変更するのがとても簡単です。それも州の略である二文字で指定できます。マウスオーバーなどのアクションを付けるのも簡単でしょう。デメリットとしては厳密に計算された場所に配置されているので、フォントの大きさを変更したりすると一気に崩れる可能性があることです。 StatelyはWeb
コンパイルしてスタイルシートを生成する高機能代替言語·Roole MOONGIFT
Rooleはコンパイルしてスタイルシートに変換する独自のマークアップ言語です。 スタイルシートについてScssやSass、Lessなど様々な代替マークアップが開発されています。今回もその一つ、Rooleを紹介します。 例。波括弧は不要です。 変数が使えます。 条件分岐できます。 繰り返しできます。 mixi-inです。 メディアごとの出し分けも可能。 Rooleは変数はもちろん、ifやfor、計算式を使うことができます。mix-inやextendにも対応しています。波括弧がなく、何となくPythonやCoffeeScriptを彷彿とさせます。node.jsのコマンドで変換することも、クライアントサイドでの変換も可能です。使いこなせばスタイルシートの記述がかなりシンプルになるのではないでしょうか。 RooleはJavaScript/node.js製、MIT Licenseのオープンソース・ソ
社内で立てられるGistサーバ·Gistub MOONGIFT
GistubはGitHubの提供するGistのクローンです。 GitHubの提供するスニペットサービスのGist。便利に使っている人も多いと思いますが、何となく会社で使うのは控えてしまっている…そんな人も多いでしょう。そこで社内で立てられるGistクローンGistubを使ってみましょう。 パブリックなGist一覧。 ソースコードハイライト付きです。 編集画面です。 編集すると履歴がつきます。 新しいGistの追加画面。 プライベートなGistも作成できます。 Gistubはエディター画面こそ単純なテキストボックスで、ハイライトする言語指定ができないものの他はGistと変わらず普通に使えるようになっています。社内で立ててチームで使ったりするのに良いのではないでしょうか。 GistubはRuby/Ruby on Rails製、MIT Licenseのオープンソース・ソフトウェアです。 MOON
FirefoxでHTML5のデスクトップ通知を利用する·FF html5notifications MOONGIFT
FF html5notificationsはFirefoxが未対応のHTML5によるデスクトップ通知を使えるようにするFirefoxアドオン。 FF html5notificationsはFirefox用のオープンソース・ソフトウェア。HTML5の新機能の一つがデスクトップ通知だ。Gmailで実装されており、Google ChromeでGmailを開いておけばメールが来た時にデスクトップ上に通知が表示される。通知は色々なソフトウェアで使われているので、Webアプリケーションでも使えるのは便利だ。 Mac OSXの場合はGrowlを経由 HTML5の実装状況はWebブラウザによって異なる。Google Chromeでは使えるこの通知機能も、Firefoxでは利用できない。それを克服するアドオンがFF html5notificationsだ。 FF html5notificationsはFir
管理画面もあるPHP製の認証システム·AuthManager MOONGIFT
AuthManagerは認証およびユーザ管理を提供するシステムです。 Webサイトを作っていて認証はよく必要になります。しかしその度に作っていては面倒に感じることでしょう。そこでAuthManagerを組み入れてみましょう。認証とユーザ管理を一手に引き受けてくれる便利なソフトウェアです。 登録画面です。 ログイン画面です。 ログインしました！アイコンも表示されています。 こちらは管理向け。ユーザ管理画面です。 設定です。 reCAPTCHAの設定です。 AuthManagerの主な機能は指定されたコードを埋め込むことでコンテンツへのアクセスを制限できるようにする、管理画面を使ったユーザ管理、reCAPTCHA対応、Facebookコネクト、メールテンプレート、アクセスログ、Google Analyticsサポートとなっています。 AuthManagerはPHP製のソフトウェア（ソースコード
Sass記法を用いたCSSフレームワーク·Compass MOONGIFT
CSSはプログラマ向けの言語ではないため、最初は理解しやすいが、複雑な記述が入り交じっていくとメンテナンスが困難になる。Webブラウザはよく出来ていて、何となく書いたものでも動作してしまうからさらにややこしい。 コマンドラインオプション そうした問題に対処するメタ言語として注目を集めているのがSassだ。そしてSassを実用的にプロジェクトに組み込めるのがCompassだ。 今回紹介するフリーウェアはCompass、SassをサポートしたCSSフレームワークライブラリだ。ソースコードは開示されているがライセンスは明記されていなかったのでご注意いただきたい。 Compassは単体でCSSフレームワークをなすわけではない。実際にはBlueprintやYUI、960といった有名なCSSフレームワークを利用している。そしてRailsやMerb、StaticMaticといったアプリケーションサーバと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
