Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
Library Detector - あのサイトはどのJavaScriptライブラリを使っているか MOONGIFT
Webシステムを開発していると他のサイトがどういった仕組みで動いているか気になったりしますよね。HTMLソースやURLからどんなプログラミング言語で、どんなフレームワークか知ったりするのは面白いです。 サーバサイドは実際のところは分からないのですが、フロントエンドは分かります。ということで入れてみたいのがLibrary Detectorです。 Library Detectorの使い方 Library DetectorはGoogle Chrome機能拡張としてリリースされています。 インストール後、任意のWebサイトを見ると使われているライブラリがチェックできるようになります。 Yahoo! JapanはYUI 2を使っているようです。 Yahoo! ニュースはjQueryです。 jQueryはさすがにjQueryを使っていますが、さらにModernizrも使っています。 Backbone.
Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
DevHub - 開発者たちにぴったりなチャットシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発はみんなでやると楽しいですよね！ チャットワークなど企業向けにオンラインでコミュニケーションを促進しようとするサービスが多数あります。個人向けであればLINEやTwitter、Skypeもその一つといえるでしょう。しかし開発者にとってはどうも手に馴染まないものが多いです。 プログラマ、デザイナにとって必要な機能に特化させられれば、より開発がスムーズになるかも知れません。その一つになるかも知れないのがDevHubです。 DevHubの使い方 外部サービスから通知を受け取れるようになっており、JenkinsやSubversionからコミット時などに通知を受け取るための設定が書かれています。もちろん他のシステムからもWeb APIを叩けば通知が使えます。 # Subversionの例
データの追記読み込みに対応するテーブル·StreamTable.js MOONGIFT
StreamTable.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 業務システムなどではデータの表示の際にテーブル組で表示する事が多々あります。そのような時に一気に表示しようとするとレンダリングに時間がかかります。そこで使ってみたいのがデータを取得しながら表示を行っていくStreamTable.jsです。 テーブルは既に表示されていますが、データは徐々に取得されていきます。例えばこの場合は20%までデータを取っています。 ページネーションもどんどん増えていきます。 検索ボックスを使って予めフィルタリングする事もできます。マッチするデータだけが追加されていきます。 仕組みとしてはAjaxでデータを取得しています。 StreamTable.jsではデータのストリームベースでの取得に加えて、検索によるデータ絞り込みとページネーションに対応しています
jQuery Mobile向けBootstrapテーマ集·Twitter Bootstrap jQuery Mobile Theme MOONGIFT
Twitter Bootstrap jQuery Mobile ThemeはTwitterのBootstrapとjQuery Mobileを組み合わせて使えるテーマ集です。 TwitterのBootstrapは最新版でスマートフォンにも対応しています。そしてスマートフォン向けのJavaScriptライブラリと言えばjQuery Mobileです。この二つを組み合わせて使えるのがTwitter Bootstrap jQuery Mobile Themeになります。 Aデザイン。 Bデザイン。全体として青。 Cデザインは赤。 Dデザインは緑。 Eデザインは水色。 Fデザインはオレンジ。 Twitter Bootstrap jQuery Mobile ThemeはjQueryとBootstrapを組み合わせ使えるテーマ集です。面白いのはA〜Fまでカラーが用意されており、data-themeを変更
インパクト大！スプラッシュスクリーンをアニメーションさせる·YISplashScreen MOONGIFT
YISplashScreenはスプラッシュスクリーンにアニメーションを加えるiOSライブラリです。 iOSアプリで大切なのはもちろん機能ですが、その前段階として見た目のインパクトも重要です。ただアプリを起動してスプラッシュスクリーンを表示してメインのビューに遷移する。そんなありきたりでないビューを実現するのがYISplashScreenです。 調整中。このダイアログは本番では出しません。 完了しました。OKボタンを押すと開始します。 ビューがくるっと回転しました。 そしてメインのビューになるという仕組みです。 スプラッシュスクリーンが回転して切り替わるというのはインパクトは強いと思われます。アニメーションも幾つか用意されているので自分のアプリに合わせた最もインパクトの強いものを選ぶと良いでしょう。 YISplashScreenはObjective-C製、iOS用のソフトウェア（ライセンスは
200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
こんな手が…。Dropbox上で動的システムを動かす「Drapache」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
DrapacheはDropbox内のファイルを読み込んで動的に動かすWebサーバです。 DropboxではPublicに入れたファイルをHTTPを通じて読み込めるようにしています。この機能を使って静的なWebサイトを提供している人もいます。しかしそれで十分ではありません。時代は動的システム、Dropbox内のファイルを動的システムに対応させるソフトウェアがDrapacheです。 まずドメインを取ります。 次にDropboxをコネクトします。 接続を許可します。 完了です。そうするとアプリフォルダの中にDrapacheフォルダができあがります。 ファイル構成はこんな感じです。 サンプルのスクリプトです。確かに動的ファイルが動いています。 動的です。もちろん修正すれば若干のタイムラグはあれど反映されます。 Drapacheの仕組みとしては登録したユーザのデータを読み込み、DrapacheがWe
1行のコードで既存のテーブルにソート機能を追加·Table Sorting MOONGIFT
Table Sortingは既存のHTMLテーブルにソート機能を追加するJavaScriptライブラリです。 業務システムなどでテーブルを表示すると常に足らない機能を求められます。その第一が並べ替え機能でしょう。DBを操作しても良いですが、もっと単純に解決したいならTable Sortingを使ってみても良さそうです。 デモです。 カラムのクリックでソートが実行されます。 金額部分もきちんとソートされます。 JavaScriptのコードです。単純にクラスを指定するだけ。 HTMLのコードです。数値部分にも特に設定を行っていないところに注目。 Table Sortingは既存のテーブルを渡すだけで自動的にソート機能を追加してくれます。オブジェクトの型も判断して並び替えてくれるので手間いらずです。 Table SortingはJavaScript製、GPL v3のオープンソース・ソフトウェアで
画像を生成せずにサムネイル風に小さな画像を表示·jQuery NailThumb MOONGIFT
jQuery NailThumbはWeb上でCSSによる画像サムネイル風表示を実現するjQueryライブラリです。 Webサイトで画像を縮小して表示したい場合、ImageMagickなどのサーバサイドの技術を使うのが一般的です。しかしjQuery NailThumbを使えばクライアントサイドだけで高度なサムネイル風表示を実現します。 デモです。左側が元画像、その右側にサムネイル化した画像が表示されています。 正方形の他に縦横比の固定、横幅優先といった指定もできます。 縦長の画像の場合、横幅優先にすると自動的に左右に空白が入ります。 こちらは切り取りです。 他にもサンプルが多数あります。 画像の量にもよりますが思ったよりも負荷は少ないように感じられます。jQuery NailThumbはCanvasで画像生成という訳ではなく、CSSを使って画像を擬似的に縮小表示しています。その際の配置やサイ
1,000のサーバでも監視できるnode.js製死活チェッカー·uptime MOONGIFT
uptimeはnode.jsで作られたWebサーバ死活チェッカーです。 Webサーバがきちんと正常に動き続けているかどうか一番簡単にチェックするのは定期的にアクセスしてレスポンスタイムを見ることです。そんなWebサービスの死活チェックに使えるのがuptimeです。 サーバを立ち上げました。最初に監視するWebサーバを設定します。 URLと監視する間隔を指定するくらいです。 監視を開始しました。グラフは自動更新されないのでご注意ください。 イベントがあればこちらに出力されます。 グラフではなく一覧で結果を確認できます。 徐々にグラフが更新されていきます。 uptimeは1000以上のWebサーバを一括で監視できるパフォーマンスを持っています。またダウンしている際にはWebアラートを表示できます。エラーがあった際にはHTTPステータスやその内容を記録してくれます。サーバはタグを使ってグループ管
格好いい！折り畳んだ紙を開くようなアクションを実現·Paperfold CSS MOONGIFT
Paperfold CSSは中間のメッセージを折り畳んで表示し、クリックで開く3Dアクションを施すJavaScriptライブラリです。 これはアイディアの勝利！Paperfold CSSを使うと折り畳んだメッセージを開いて表示したりする際に効果的に見せられるようになりそうです。 デフォルトの表示です。See 5 More Postsという表示があります。そこをクリックします。 徐々に開いていきます。 折り畳まれた部分が開いて表示されました。 デモ動画です。折りたたみの量などは自由に設定できます。しかも3Dであり、マウスで回転させたり見る向きを変更できたりします。 Paperfold CSSはGmailの多数のリプライが重なった時のメッセージ群を表示する際のやり方に近いです。面白い使い方が出来そうです。 Paperfold CSSはJavaScript製のオープンソース・ソフトウェア（Pub
Perl製のシンプルなWebステータスチェッカー·mojo-checkbot MOONGIFT
mojo-checkbotは指定したURL以下のリンクについてステータスをチェックしてくれるクローラーです。 特定サイト以下のURLについて順次チェックしてステータスを取得してくれる、それがmojo-checkbotです。Webサイト運用に活かしてみてください。 結果画面です。URLとタイトル、そのURLのステータスが一覧になって表示されます。 更新は随時行われます。次々流れていくのは面白いです。 結果行をクリックするとフローティングウィンドウで詳細が表示されます。 サーバを起動しています。デフォルトでは3000番ポートで立ち上がります。 開発環境におけるURLチェックに便利そうです。もちろん運用サーバでも時々実行しておくと思わぬリンク外れが見つかるかも知れません。なおアクセスはGETのみなので、それ以外のメソッドの時には使えないのでご注意ください。 mojo-checkbotはクッキーを
今風のUI。Ajaxを使ったPHPベースのMySQL管理システム·MyWebSql MOONGIFT
MyWebSqlはAjaxを多用した今風のUIを使ったMySQL管理ツール。 MyWebSqlはPHP製のオープンソース・ソフトウェア。PHPと言えばMySQL、その二つの組み合わせから生み出されたphpMyAdmin。LAMPスタックなんて言葉が生み出されたのにphpMyAdminの優秀さがあったことは否定できない。それくらい誰しもが使っているソフトウェアだ。 データ一覧 だが長い年月のうちにUIは古いものになり、ちょっと時代が変わってきているかという気がしなくもない。そこで今のWebに合わせたMySQL管理ツールを紹介しよう。それがMyWebSqlだ。 MyWebSqlはWebアプリケーション風のインタフェースに加えて、UIのデザインもポップで明るい配色になっていて使い勝手が良い。左側にデータベースの一覧、右側でデータの編集を行うスタイルはphpMyAdminと同じだ。さらに下にはSQ
RubyやPythonのようにJavaScriptを書ける·CoffeeScript MOONGIFT
CoffeeScriptはJavaScriptをよりシンプルに書ける簡易プログラミング言語。 [/s2If] CoffeeScriptはJavaScirpt/node.js用のオープンソース・ソフトウェア。JavaScriptが隆盛になっている。だがあのコードの書き方が苦手という人は多い。特にRubyやPythonに慣れた人にとって、冗長的だと感じてしまう場面もある。 構文例 Rubyに慣れると括弧をつけるのが邪魔臭く感じたり、ヒアドキュメントが使いたかったり、文末にifをつけて処理を書きたかったりしたくなる。そんな我がままに答えてくれるのがCoffeeScriptだ。 CoffeeScriptはJavaScriptをRuby/Pythonに似た構文で書けるソフトウェアだ。node.jsのパッケージ管理であるnpmでインストール可能になっており、とても使いやすくなっている。構文は独特だが、
一ファイルで作られたTwitterクローン·Tweetylicious MOONGIFT
TweetyliciousはPerl製のオープンソース・ソフトウェア。Twitterは日本での認知度も高くなっており、成長が止まらない。仕組みはシンプルなだけに、類似サービスも多数登場している。だが他を寄せ付けない速度で成長を続けている。 Twitterライクなマイクロブログ 今からTwitterを追い越すようなサービスを作るのは難しいだろうが、特定分野におけるつぶやきサービスやローカルグループ内のつぶやきであれば需要はあるかも知れない。そんな時に使えそうなのがTweetyliciousだ。 TweetyliciousはPerl製で、1ファイルで構成されているのが特徴だ。CGIとしてだけでなく、Tweetylicious自体がサーバとなって動作することもできる。フレームワークはMojoを使っている。ユーザ登録すれば、すぐにつぶやきを開始することが可能だ。 フォローもできる 単純なつぶやきの
秀逸！スライダーを使ったメール送信フォーム·SlideSubmit MOONGIFT
ロボットによるユーザ登録やメール送信などを防ぐ目的で使われるCAPTCHA。ロボットははじけるかも知れないが、ユーザビリティは著しく低下する。最近ではCAPTCHAを解析するものも登場しており、さらに分かりづらく変形して人間すら惑わすものになっている。 スライドアクションでロボットと人間を区別 そこで注目したいのが新しい形の人とロボットの区分けをつける手段だ。その一つとしてSlideSubmitを紹介しよう。 今回紹介するフリーウェアはSlideSubmit、スライダーを使ったユーザビリティの高いメール送信フォームだ。ソースコードは公開されているが、ライセンスは明記されていなかったのでご注意いただきたい。 SlideSubmitはPHPやJavaScriptで作られているソフトウェアだ。サンプル的なフォームで、名前とメールアドレス、それに本文を入力して送信するというフォームになっている。
MOONGIFT: » 半透明でクールなヘルプ「CoolTips」:オープンソースを毎日紹介
最近新しいサービスを作っているのだが、ようやく最終段階に入り細かいユーザビリティを気にできるようになった。その中で、入力フォームや分かりづらい項目に説明をつけようと思った。 ただのリンクでは寂しすぎる。あまり使われる事がない機能かも知れないがクールに攻めよう。 今回紹介するオープンソース・ソフトウェアはCoolTips、半透明でクールなツールチップだ。 CoolTipsは指定した場所にマウスを持っていくと浮かび上がるツールチップで、半透明の角丸になっている点がクールだ。しかも半透明で、背後の項目が透けてみえる点も良い。 他のライブラリとして、prototype.jsやscript.aculo.usを利用している。ツールチップを表示する項目側は特に設定はなく、title要素に説明文を入れておけば良いだけだ。後はJavaScript側で項目を指定すれば簡単に実現できる。 背景色、枠線色、文字色
MOONGIFT: » Web2.0時代のニュータイプDB「CouchDb」:オープンソースを毎日紹介
Web2.0時代（？）の技術要素の一つにWeb APIがある。また、各種アプリケーションがWeb化され、ブラウザ内で動作するようになっている。 しかし、これらに必須なのがインターネットだ。ネットワークに繋がっていなければ利用できない。その限界を超えるかも知れないソフトウェアがこれだ。 今回紹介するオープンソース・ソフトウェアはCouchDb、新しい形式のドキュメントデータベースだ。 CouchDbは簡単に言うとRESTを通じたWeb API経由でデータ取得ができるデータベースだ。結果はJSONで受け取ることができる。そのため、PHP/Ruby/Java/LotusScript/Cなど、言語を問わず広く利用できる。 興味深いのは、このCouchDb自体は各クライアントに入れて動作させるという方法だ。この場合、オフライン状態でも利用でき、オンラインになると同期処理をすることができる。 どういっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
