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

Webの記事一覧

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

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

もっと見る

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の使い方...

List

  • 2017/09/18

Plyr - YouTube/VimeoをサポートしたWebメディアプレーヤ

動画コンテンツをWeb上で再生するのに使えるのがvideoタグです。しかし素のままではとても使い勝手が悪いです。使いやすくするためには専用のプレーヤライブラリが欲しいでしょう。今回紹介するPlyrはHTML5のメディアプレイヤーですが、YouTube/Vimeoにも対応しているのがポイントです。## Plyrの使い方こ...

List

  • 2017/09/18

Samson - Web上でデプロイ管理

最近ではシステムを手作業で起動、停止させることが減っています。作業が自動化されており、コマンド一つで必要なデプロイ作業をすべて行ってくれます。しかしそのステータスは適宜確認する必要があるでしょう。そこで使ってみたいのがSamsonです。何台もあるシステムをまとめてデプロイ管理できます。## Samsonの使い方デモです...

List

  • 2017/09/16

CrossStorage - クロスドメインで使えるlocalStorage

HTML5で追加されたAPIの一つにlocalStorageがあります。特定のサイト内で使える簡易的なストレージですが、一つのサイトでしか使えないのが難点です。時に別なサイトでも使いたいと思うことがあるでしょう(特にサブドメイン)。そこで使ってみたいのがCrossStorageです。クロスドメインで使えるストレージです...

List

  • 2017/09/15

Flockbird - 日本製のSNS

最近使われているWebサービスというとどれもソーシャル絡みになっています。強力なWebサービスを構築するのはもちろんのこと、他サービスに対する強固な参入障壁にもなっています。そんなSNSを自分でも作りたいならばFlockbirdをベースにしてみてはいかがでしょうか。## Flockbirdの使い方ログイン後のページです...