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

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

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

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

もっと見る

List

  • Premium_s 2015/03/20

業務で使えるオープンソース(150)「Webファイルアップロード」

今回のテーマはWebファイルアップロードです。ファイルアップロードはHTML4の時代には本当に使い勝手が悪く、機能が貧弱でした。HTML5になって幾分マシになってきましたが、素のままではまだまだ機能不足です。そこでHTML5のファイルアップロード機能に関する内容と、より高機能にしてくれるオープンソース・ソフトウェアを紹...

List

  • 2015/03/20

Gun – データベース版Dropboxとも言うべき組み込み型データベースエンジン

Webアプリケーションにおいてデータベースを利用するのは当たり前になっています。しかしWebアプリケーション化が進んでいる現在、サーバとのデータ送受信においてはAjaxを使わなければなりません。Gunはそんな構成をもっとシンプルで分かりやすくしてくれます。各Webブラウザごとにデータベースを持ち、かつそれを自動的に同期...

List

  • 2015/03/20

Sharelock - 外部認証を用いてセキュアなメッセージ送受信

秘密のメッセージを送る際に、どうしたら手軽で、かつセキュアに保てるでしょうか。長いURLを生成する方法もありますが、URLが漏れてしまえば終わりです。かといって面倒な手順を踏ませるのは元々の手軽に共有という点において問題があります。手軽とセキュア、そのバランスを取ったソフトウェアがSharelockになります。専用クラ...

List

  • 2015/03/19

littlebox – スタイルシートだけで作られたアイコン集

最近はアイコンを画像で提供することが少なくなってきています。バイナリなのでサイズの可変に弱く、サイズも大きくなりがちです。そこで使われるのがWeb Fontなのですが、こちらもちょっとした内容なのにサイズが大きくなってしまいがちです。そこで使ってみたいのがlittleboxです。スタイルシートだけで作られたシンプルなア...

List

  • 2015/03/19

Konva - Canvasで2Dを描くためのJavaScriptフレームワーク

HTML5における表現力向上に期待がかかるのがCanvasやWebGLです。とはいえこれまでのHTML並に書きやすいという訳ではなく、描画や操作をするには異なる技術の習得が必要になります。そこで使ってみたいのがKonva、2DをCanvas上に描画するためのライブラリになります。## Konvaの使い方!サンプルです。...

List

  • 2015/03/18

Sldn – SlideShareのスライドダウンローダー

SlideShareに勉強会などで使った資料をアップロードしている方はたくさんいます。中にはダウンロードして使いたい資料もあるでしょう。しかしSlideShareではパーミッションを設定することでダウンロード不可に指定ができます。それでも資料が欲しい!という方はSldnを使ってみましょう。## Sldnの使い方インスト...

List

  • 2015/03/18

localFont - Web FontをlocalStorageを使ってキャッシュ

Web Fontを使うとこれまで画像で作っていたロゴのようなものをテキストで表現できたり、さらにアイコンフォントのように大きさや色を自由に決められるアイコンが使えるようになります。問題点としては画像一つに比べるとデータ量が多く、サイズが大きくなってしまうことでしょう。そこで使ってみたいのがlocalFontです。## ...

List

  • 2015/03/17

ExcelJS – node.jsからExcelファイルを読み書き

Windowsなんて嫌だ!Officeファイルなんて嫌い!なんて言いつつもシステム開発時にお世話になるのがExcelです。CSVファイルを出力したり、逆に読み込む機能は良く作るのではないでしょうか。わざわざCSVを介さずにExcelファイル(xlsx)をそのまま読み込んだり、書き出せるのがExcelJSです。node用...

List

  • Premium_s 2015/03/17

業務で使えるオープンソース(149)「localStorage」

HTML5で様々なAPIが追加されていますが(狭義ではHTML5に含まれないものも多いですが)、特に利便性が高くて使いやすいと思うのがlocalStorageです。localStorageを使ったWebアプリケーションや、すぐに使えるlocalStorageを使ったライブラリを紹介します。## Cookieより大容量C...

List

  • 2015/03/17

Staytus - サービスの状態を可視化するダッシュボード

Web APIを提供していると、サービス利用者向けにサービスのステータスを表示したいと思うことがあります。定期メンテナンスであったり、障害でサービスが停止している場合も、ユーザに適切に情報発信できる必要があります。GoogleやApple、Amazonなどは行っていますが、Staytusを使えば小さなサービスであっても...

List

  • 2015/03/16

Blackhole – 軽量、レスポンシブ対応のSass/CSSフレームワーク

スタイルシートのフレームワークはとても数多くあります。有名なところではBootstrap/Zerb/Ionicなどがありますが、有名なものは情報が多い一方、使った時のデザインが似通ったものになってしまいます。そこで人と違ったフレームワークを採用するのも面白さがあります。もちろんカスタマイズのしやすさなども大事でしょう。...

List

  • 2015/03/16

animachine - Google Chrome上でGreenSockを使ったHTML5アニメーションを作成

GoogleがFlashバナーを自動的にHTML5に変換する広告配信技術を発表しました。これにより既存資産を活用したままモダンなWeb環境においても広告配信が可能になります。つまりHTML5でもFlash並のアニメーション表現が可能になっているのです。そこでさらに高度なアニメーションを実現したい時に使えるのがGreen...

List

  • 2015/03/15

React.rb – ReactをRubyで書く

最近にわかに盛り上がっているReactですが、独自の書き方やHTMLとJavaScriptが密接することに対して何となく避けてしまっている人も多いかも知れません。サーバサイドでも使えると言ってもnodeを使うのが難点に感じる人もいます。もしあなたがRuby使いで、Reactを使ってみたいならばReact.rbを使うとい...

List

  • 2015/03/15

jpn-filter.css - 日本っぽいスタイルシートフィルタ

日本のWebサイトデザインはもの凄く古くさいなんてよく言われます。情報設計を適切に行っていく風潮の中、未だにゴミゴミしたデザインのサイトがなんと多いことか。世界トレンドを追従しなければいけない訳ではありませんが、それでもちょっとがっかりなデザインは多いです。しかし日本ならではの良さを活かすと、それは世界にも通用するデザ...

List

  • 2015/03/14

Blink-Diff – Yahoo!製の画像差分表示ツール

あなたは今、目の前に同じような画像ファイルが複数あって、どこが違うのか調べないといけません。文字が違うかも知れませんし、アイコンの並びが違うかも知れません。はたまた色が1%だけ違う可能性もあります。そんなのをすべての画像に対して行うのは大変なことです。そこでBlink-Diffを使ってみましょう。Blink-Diffは...

List

  • 2015/03/14

Ionic Material - Ionic Frameworkをマテリアルデザイン化

最近のデザイントレンドはマテリアルデザインです。しかしデザインと言っても見た目だけでなく、アニメーションも含めて考えなければいけない点が重要です。そのため開発する敷居が高くなっています。そこで活躍するのがマテリアルデザイン用のフレームワークになります。今回はIonic Frameworkをマテリアルデザインに対応させた...

List

  • 2015/03/13

Github Shields in Gmail – Gmail上でGitHub Issueのステータスを確認

GitHubのIssueを使ってタスク管理を行っていると、タスクが登録されたりその返信を行った際にメールが飛んできて便利です。そのメールに返信してもIssueに追記されるのでメールでもGitHubでも利用できます。しかしそのIssueのステータスはメール全体を追いかけないと分かりませんでした。そこで使ってみたいのがGi...

None

  • Premium_s 2015/03/13

Google Code終了のお知らせ。移転先を探す

案の定というか突然というか、Google Codeの終了がアナウンス他の項目はプレミアムのみ紹介します。

List

  • 2015/03/13

wavesurfer.js - HTML5で音楽の波形を表示

Web上で音楽を楽しむ環境は整いつつあります。SoundCloudにアップしている人も多いですし、YouTube上にある音楽を聴く人も多いでしょう。そんな音楽メディアに欲しい情報として波形があります。wavesurfer.jsは音楽ファイルを読み込み、波形を表示してくれるJavaScriptライブラリです。JavaSc...

None

  • 2015/03/12

Webify – TrueType Fontから他のWeb Font用フォーマットを生成

Web FontはTrueType Fontを用意すれば終わりではなく、ブラウザに応じて対応するフォントの種類が異なるので複数用意しなければなりません。TrueType、Embedded OpenType、Web Open Font Format、SVGの4種類が基本です。せっかくフォントを作ったのに、さらにそんな各フ...