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

Webの記事一覧

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

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

もっと見る

List

  • 2017/10/16

Tudu - Todoistクローン

MOONGIFTではタスク管理にTodoistを採用しています。かれこれ4年くらいずっと使い続けています。最近ではGoogleカレンダーとの連携機能も追加され、手放せないツールになっています。しかし企業によっては導入できないケースもあるでしょう。そこで試してみたいのがTudu、Todoistクローンです。## Tudu...

List

  • 2017/10/15

Franchise - 多数のデータベースに対応したSQLノートブック

SQLを覚えると実務で使える様々なデータを取得できるようになります。毎回同じようなSQLを記述するのが面倒で、テキストファイルに定番のSQLをメモで残している方も多いのではないでしょうか。そんな方にお勧めなのがFranchiseです。SQLを残しておけるノートブックです。## Franchiseの使い方メイン画面です。...

List

  • 2017/10/12

Carbon - コードを綺麗な画像に変換

SDKやフレームワーク、ライブラリなどを公開しているサイトであれば大事なのは実際の使い方を示したコードでしょう。それもただテキストで書いてあるより、格好良いフォントや色合いで見せたいと思うはずです。そこで使ってみたいのがCarbonです。コードを格好良い画像にしてくれます。## Carbonの使い方実際に作成した画像で...

List

  • 2017/10/11

Draggable JS - HTML5のドラッグ&ドロップを多機能に

HTML5の新しい機能の一つにドラッグ&ドロップAPIがあります。Gmailなどでは当たり前になっていますし、WYSIWYGな機能を提供する上では必須の存在です。Webアプリケーションでは大事な機能でしょう。そんなドラッグ&ドロップAPIを多機能にしてくれるライブラリがDraggable JSです。## Draggab...

List

  • 2017/10/11

GraphQL Playground - Web上でGraphQLを試す

GraphQLはREST APIを越えるかも知れない存在として注目を集めています。どういったデータが欲しいかをクライアント側で指定できるので、必要に応じてデータ構造を変えつつ最適な形で取り出せるのが魅力です。そんなGraphQLを試せる環境としてGraphQL Playgroundがあります。開発のお供にあると便利そう...

List

  • 2017/10/10

Animated_GIF - クライアントサイドでアニメーションGIFを生成

ここ数年でアニメーションGIFの価値が見直されています。動画とは違ってハイライト部分だけを取り上げていたり、何度も繰り返せるのが魅力になっています。動画は再生までの手間がありますが、アニメーションGIFは自動的に再生もできます。そんなアニメーションGIFをWebブラウザで操作できるのがAnimated_GIFです。##...

List

  • 2017/10/08

dokieli - Web上のコンテンツエディタ/コメントシステム

Web上にコンテンツを公開し、それに対して指摘が欲しいと思った時にはチャットなどを使うでしょう。できればWeb上でそのままコンテンツに書き込みができると便利です。それを可能にするのがdokieliです。コンテンツの編集やコメントに加えて様々な機能が備わっています。## dokieliの使い方デモです。右側にあるメニュー...

List

  • 2017/10/07

Slide Presentation Framework - HTMLスライドのフレームワーク

HTMLでプレゼンテーションを作るケースが増えています。HTMLであれば専用のソフトウェアを使わずに済み、バージョン管理も簡単です。さらにアニメーションなどは難しい分、逆にコンテンツに集中できるのが利点です。最近ではMarkdownベースのものが増えていますが、今回紹介するSlide Presentation Fram...

List

  • 2017/10/05

SchemaRD - RailsのER図を生成

Ruby on Railsではデータベースのスキーマをコードを使って自在に作成できます。テーブル同士の関連性もコードで記述できるので、殆どデータベースを意識せずに作り込んでいけます。しかし、時にER図が必要になるケースもあるでしょう。そうした時に使ってみたいのがSchemaRDです。Ruby on Railsのスキーマ...

List

  • 2017/10/03

avogadr.io - 分子構造を壁紙に

化学が好きな人であれば誰でも一つは好きな分子構造があるはずです(たぶん)。より複雑なものが好きだったり、複雑そうに見えて実はとてもシンプルな構造に惹かれたりすることもあるでしょう。そんな分子構造を生成できるのがavogadr.ioです。## avogadr.ioの使い方例です。恐らくカフェイン。!

List

  • 2017/10/02

UI Recorder - node.js製のSelenium IDE代替

Selenium IDEが最新のFirefoxで動かなくなりました。これに伴い、新しいAPIで動くIDEも開発がスタートしたようですが、それを待つのも辛いでしょう。かといって旧バージョンを使い続けるのも問題です。そこで使ってみたいのがUI Recorderです。新しく登場したSelenium IDEライクなWebブラウ...

List

  • 2017/10/01

Nulis - 文章を書く人のためのツリーエディタ

文章を書くときにはまず構成を考える必要があります。章立てを考えて、その中で何を書くのかを順番に決めていきます。段階的に掘り下げていくことで、その中で何を書くべきかを明確にしていけるでしょう。そんな時に役立つのがNulisです。文章を書くためのツリーエディタです。## Nulisの使い方メイン画面です。幾つかのブロックに...

List

  • 2017/09/29

Blazer - SQLを使ってデータベースから有益な情報を引き出そう

ビジネスの根幹にはデータベースがあります。日々の業務を通じて蓄積されていくデータをいかに検索し、有益なデータを抽出するかがビジネスの成否を決めると言っても過言ではないでしょう。そのために必要なのがSQLを自由に実行できる環境です。今回はBlazerを紹介します。## Blazerの使い方最初の画面です。データが一覧表示...

List

  • 2017/09/26

Phosphor Float Area - 自由度の高いレイアウト変更ライブラリ

業務システムなどでは情報をいかに分かりやすい整理できるかが作業効率化の肝になります。しかし担当する業務であったり、作業によって必要な幅は違ったりします。そうした時にユーザ毎に好きな配置に変更できる仕組みは便利です。使えるライブラリはPhosphor Float Areaです。## Phosphor Float Area...

List

  • 2017/09/25

Mobiledoc Kit - 好みのWYSIWYGエディタを作る

世の中には多くのWYSIWYGエディタが存在します。どれもそれぞれに特徴があり、選択が多くて迷ってしまうでしょう。しかし、それでもなお自分の目的にぴったりと合っていないことがあるかも知れません。そこで使ってみたいのがWYSIWYGビルディングキットです。今回はMobiledoc Kitを紹介します。## Mobiled...

List

  • 2017/09/25

Megadraft - Draft.JSをベースにしたリッチテキストエディタ

Facebookが開発している、WYSIWYGエディタのベースになるDraft.JS

List

  • 2017/09/24

smoothState.js - 滑らかな画面遷移を提供

スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。そうした動きをサポートしてくれるライブラリがsmoothState.jsで...

List

  • 2017/09/22

AssemblyScript - WebAssemblyに変換できるTypeScriptのサブセット

JavaScriptはWebブラウザ上で実行する際にソースコードが見えてしまう問題がありますが、それはWebAssemblyによって解決できようとしています。しかし、改めて別な言語を覚えるのに二の足を踏んでしまっている方も多いでしょう。そこで使ってみたいのがWebAssemblyです。TypeScript(のサブセット...

List

  • 2017/09/21

Raddit - PHP製のRedditクローン

Redditは昔からあるコミュニティサイトの一つです。シンプルなデザインも手伝って、ギークな人たちに好まれています。カテゴリ毎にユーザ層が全く異なり、まるで2ちゃんねるのようになっています。そんなRedditクローンとしてRadditを紹介します。こちらもまた、シンプルなデザインです。## Radditの使い方スレッド...

List

  • 2017/09/19

Flowerizer - ディープラーニングで花の絵を描く

深層学習、いわゆるディープラーニングの世界に注目が集まっています。大量のデータを使い、コンピュータに新しい作品を生成されるといった使われ方が多く、企業などでも取り組んでいるところが増えています。今回紹介するFlowerizerは深層学習を用いて花の絵を描くというソフトウェアになります。## Flowerizerの使い方...