ITエンジニア/デザイナ向けにオープンソースを毎日紹介

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

2017/12/14
できることを全力でやる
2017/11/25
恥ずかしさを感じないためにできること
2017/11/11
プロジェクトを遅延させないコミュニケーションパス管理

もっと見る

List

  • 2014/07/08

Side Comments - 長文に良さそう。段落ごとのコメントを実現

Webサイトへの訪問者とコミュニケーションを取るためにコメント機能を追加するのは良くあることです。通常はサイト下部にあって、記事全体に対してコメントをつけるというスタイルが一般的です。しかし場合によっては記事のこの部分にコメントしたいと思うこともあるはずです。そんな時に使えるのがSide Commentsです。## S...

List

  • 2014/07/07

Bosonic – 再利用性の高いWebコンポーネント集

HTMLは自由度が高く、何でも描ける割に標準で用意されているコンポーネントはとても貧弱です。フォームのエレメントなどもあれしかないのかとがっくりするほどです。HTML5で多少リッチになってきましたが、それでも物足りなく感じるのではないでしょうか。そこでBosonicでは再利用可能なWebコンポーネントを作成、公開してい...

List

  • 2014/07/07

Web Starter Kit - Googleが提案するWebアプリケーション高速開発環境

Webアプリケーションを開発しようと思ったら、まず何をするでしょう。HTTPサーバを立てるでしょうか、Bootstrapのダウンロードを行うかも知れません。さらにjQueryやBackbone.jsやAngularjsなどを設定するかも知れません。しかし今後はそんな面倒ごとをせず、Web Starter Kitをセット...

List

  • 2014/07/06

gifken – Web上でアニメーションGIFの解析&生成

HTML5になって俄然面白くなってきたのがアニメーションGIFではないかと思います。バイナリとして読み込むことで、単純な再生だけでなく再生を変化させたり、動画から新しいアニメーションGIFを作ってしまったりできます。そのベースとして使えそうなライブラリがgifkenです。アニメーションGIFの解析はもちろん、作成までサ...

List

  • 2014/07/06

jQuery fontIconPicker - Web Fontを使ったアイコンピッカー

Web Fontを使ったフォントアイコンはデザイン上で色々な場面で使えますが、さらにユーザに選ばせたりする上でも便利な代物です。しかし元々はテキストであり、Web Fontが入っていないと豆腐になってしまうため、そのUIが問題になります。そこで使ってみたいのがjQuery fontIconPickerです。ドロップダウ...

List

  • 2014/07/05

Melkor – node/Git/MarkdownなWikiエンジン

時々「Wikiサタデー見てました!」と言われると小躍りしたくなるMOONGIFTです。という訳でWikiサタデーのお時間です。最近は何でもMarkdownで記述するソフトウェアが増えています。とはいえ記法が統一されているといろいろなところで使い回しが効いて便利です。それはWikiでも同様と言えます。MelkorはMar...

None

  • 2014/07/05

RBeautify - Rubyのコードを見やすく整形

汚いコードは読みづらいですよね。行の折り返しをどこにするか、空の行の使い方などでぐっと可読性はあがってきます。そうした書き方も慣れてくると経験で分かってくるのですが、最初はなかなか難しいものです。そこで使ってみたいのが機械的にコードを読みやすくしてくれるソフトウェアです。今回はRubyのコード整形ソフトウェア、RBea...

List

  • Premium_s 2014/07/05

業務で使えるオープンソース(115)「Web Font」

今回のテーマはWeb Fontです。アイコンとして使うほか、オープンソースのフォントを中心にWeb Fontを提供するソフトウェアが増えています。そこでWeb Fontを使うメリット/デメリットと関連オープンソース・ソフトウェアを集めました。# 利点## サイズ、色が自由に変えられるWeb Fontの最大のメリットがサ...

List

  • 2014/07/04

<github-card> – GitHubのプロフィールを埋め込み表示

GitHubでの活動は開発者にとってのステータスです。だからこそその活動内容を自分のサイトやブログに飾ることができれば、より誇らしくなるでしょう。ソーシャルな活動はそのサイト以外にアピールしてこそ映えるものです。そこで使ってみたいのがです。HTMLのタグとして定義するGitHubプロフィールライブラリです。## の使い...

List

  • 2014/07/04

Octicons - GitHubで使われているWebFont

他のサイトで使われているリソース、フレームワーク、画像などが気になるということはよくありますよね。そんなとき、有償のものだとちょっと高くて手が出せない場合もあります。しかしGitHubが自社サイトで使っているアイコンリソースをOcticonsとして公開しました。これでGitHub内で気になったアイコンであればすぐに使え...

List

  • 2014/07/03

Scrollback – Webサイトに埋め込むテキストチャット

最近は同じページを見ているユーザとチャットするサービスが増えています。例えばニコニコ動画であったり、Ustreamなど動画系のサービスに多いようです。同じような仕組みをWebサイトに組み込みたいと思うケースもあるのではないでしょうか。そこで使ってみたいのがScrollbackです。Webサイトに張り付くチャットアプリで...

List

  • 2014/07/03

Pixel Editor - Webとローカル両方で使えるドット絵エディタ

ドット絵は昔のコンピュータ、ゲーム機の時代から人気のあるイラストです。今なおTwitterのアイコンに設定している人も大勢います。写真やきれいなイラストとは違う、懐かしさが魅力です。そんなドット絵を描くソフトウェアがPixel Editorです。Webベースでのデモに加えて、Windows/Mac OSXのローカルでも...

List

  • 2014/07/02

crossfade.js – スクロールで画像をぼかすエフェクト

パララックスエフェクトによってスクロールに意味を持たせる動きが活発になっています。スクロールするとアニメーションしたり、色が変わったりするサイトもありますが、今回はまたちょっと違うアクションです。crossfade.jsを使うと画像がぼかされて目立たなくなっていきます。シングルページのWebアプリケーションで効果的に使...

List

  • 2014/07/02

Snipper - Mac OSX用のスニペット管理

プログラミングをしている時にスニペットは便利ですよね。ちょっとしたコードを登録しておいたり、HTMLの基本構造を登録しておくのも便利です。テンプレートがあれば作業効率はぐっとあがるでしょう。テキストエディタなどでスニペット機能がついたソフトウェアもありますが、様々なソフトウェアで共有するならSnipperが便利そうです...

List

  • 2014/07/01

Odyssey.js – 地図とテキストをミックスした格好いいコンテンツ

地図を使ったコンテンツを作るのは楽しいですが、いざ作るとなると意外と難しいのではないでしょうか。Googleマップにマーカーを載せても、それをタップしないと内容が分からなかったりします。そこで紹介したいのがOdyssey.jsです。地図とコンテンツをミックスした面白いプレゼンテーションを作成できます。## Odysse...

48232?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-31-16.31.48_thumb

  • Premium_s 2014/07/01

Tumblr周辺の便利ツール一挙紹介

今回はTumblrに関するツールをまとめて紹介します。Yahooに買収されて若干勢いが失われたか、といった感もあります。しかしそれでもデザイン性もあって関連ソフトウェアが次々と登場しています。そこでMOONGIFTでのTumblrの使い方と、関連ソフトウェアを紹介します。MOONGIFTではコーポレートサイトがその一つ...

List

  • 2014/07/01

magpie – Gitを使ったオンラインメモ

Evernoteは利用者のとても多いサービスです。日々たくさんのノートが保存されています。しかし中には自分のプライバシーに関わるものだけにクラウドではない場所に保存しておきたいと考える人もいるでしょう。そこで使ってみたいのがmagpieです。Evernoteレベルとは言いませんがノートを自由の作成、保存できるオンライン...

List

  • 2014/06/30

Card – クレジットカード入力をかっこうよく表現

Webにおいてクレジットカードの入力は頻繁にあると思います。番号、有効期限、保有者名、CVCの入力が主になると思いますが、その入力フォームをかっこうよくしてくれるのがCardです。## Cardの使い方!こちらは適用前。普通のフォームですね。

List

  • 2014/06/30

Ouibounce - 面白い!タブを閉じる前にモーダルを出すライブラリ

これを使うとコンバージョンレートが上がると思いますよ!Webサイトを離脱される前に、ちょっと待って!と声をかけたくなることはないでしょうか。もちろんそれがユーザメリットになるかと言われると難しいですが、それでもせっかく訪問してくれた人が離れてしまうのを何もできずに見送るのに歯痒さを感じることもあるでしょう。そこで使って...

List

  • 2014/06/29

MagicCircles – サークルを使った多彩な表現を簡単にできるグラフィックスライブラリ

HTMLの世界では主に左から右のテキストと、四角い枠の画像(別な形であっても背景が透明というだけで)で構成されているように見えます。だから角丸であったり、形が異なるものが目を引くようです。MagicCirclesを使うと円を使った多彩な表現が手軽に実現できるようになります。使い方を覚えるとWeb上での表現力が増しそうで...