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

Webの記事一覧

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

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

もっと見る

List

  • 2018/02/01

mind - node/JavaScript製のニューラルネットワークライブラリ

ディープラーニングはここ数年人気の高い技術ですが、技術の基礎は理解しつつもそれをコードレベルで表現するのはとても難しいでしょう。そして、そのためのライブラリは多数出てきています。もしWebブラウザ上で手軽に試したいのであればmindを使ってみてください。## mindの使い方こちらはデモです。映画を10本、レーティング...

List

  • 2018/01/29

Cierge - パスワードレス認証システム

パスワードは現在のWebサービスにおける認証の基本となっています。その結果、オンラインサービスはパスワードに溢れており、パスワードの使い回しや安易なパスワード設定が問題になっています。そこで使ってみたいのがCiergeです。パスワードレス認証を提供する認証システムです。## Ciergeの使い方こちらが認証画面。登録と...

List

  • 2018/01/28

sorting.js - 各種ソートアルゴリズムを可視化

プログラミングでよく使うソートですが、アルゴリズムは多種多様に存在します。どれがベストという訳ではなく、データの種類やばらつきによって異なるようです。しかし実際にどういった動きをしているのかは外からでは分かりづらいでしょう。そこで使ってみたいのがsorting.jsです。各種ソートアルゴリズムをビジュアル化してくれるソ...

List

  • 2018/01/27

Turndown - HTMLをMarkdown記法に変換

Markdownで作られたコンテンツが増えていくと、すでに作成したコンテンツについてもMarkdownにしたくなるものです。また、自分で使っていた記法が廃れてしまうこともあるでしょう。その結果、Markdownへの乗り換えを余儀なくされます。そうした時に使いたいのがTurndownです。HTMLをMarkdownに変換...

List

  • 2018/01/27

Exocortex - Markdown記法が使える個人用Wiki

WikiはWikipediaのような大きなWebサイトはもちろん、個人のメモにも利用できます。ページが自動的に新しく作られたり、リンクを使ってどんどん広がっていけるので創造性を邪魔せずにコンテンツを作り続けられます。そんなWikiを個人用に作ったのがExocortexです。ローカルでも簡単に動かせるのでぜひ試してみまし...

List

  • 2018/01/25

canvas-area - Canvasの表示内容をマウスで操作

CanvasはHTML5においてWebの表現力を飛躍的に高めてくれるAPIですが、その使い方に慣れるまでが意外と面倒なものに感じます。通常のDOMのようにスタイル設定ですぐに表示を変化できるのではなく、描画した内容をリフレッシュしながら使わなければなりません。そんなCanvasに柔軟性を持たせてくれそうなライブラリがc...

List

  • 2018/01/24

STYLE2PAINTS - AIによるイラストの自動彩色

ディープラーニングや人工知能によって、これまでのアルゴリズムベースの機械処理から、学習効果を活かした処理ができるようになっています。その結果、人が判断することなく、機械がベストと思われる判断によって処理できるようになります。今回紹介するSTYLE2PAINTSは線画の色づけをAIによって自動化する、そんなすごいソフトウ...

List

  • 2018/01/24

Lite Editor - とてもシンプルなWYSIWYGエディタ

Web上でユーザにコンテンツを作ってもらう場合に便利なのがWYSIWYGエディタですが、あまり多機能なものはユーザを混乱させてしまうだけです。本当に必要なものだけに絞り込むのがいいでしょう。今回紹介するLite Editorは、本当にごく簡単な機能だけに絞り込んだWYSIWYGエディタになります。## Lite Edi...

List

  • 2018/01/23

BuckleScript - OCamlをJavaScriptに変換

Webブラウザ向けには現状、JavaScriptでプログラミングを行う必要があります。しかし多くの言語において、JavaScriptに変換できる実装が存在します。RubyであればOpal

List

  • 2018/01/23

Yogurt - React製のドキュメント作成システム

Web上でコンテンツを作る際のUIについて悩むことはないでしょうか。一ページずつ作る仕組みにするのがシンプルですが、ユーザにとって使いやすい仕組みとは言いづらいです。そこで参考にしたいのがYogurtです。Reactを使い、ユーザビリティの高いドキュメント作成が可能です。## Yogurtの使い方編集画面です。カテゴリ...

List

  • 2018/01/22

TOAST UI Editor - WYSIWYGとMarkdown両方をサポートしたWebエディタ

開発者にとってMarkdownは便利な記法ですが、それ以外の人たちにとってはルールを覚えなければならず、面倒に感じられてしまいます。かといってWYSIWYGなツールバーを設けると開発者が邪魔に感じてしまうでしょう。そこで使ってみたいのがTOAST UI Editorです。MarkdownとWYSIWYGを切り替えられる...

List

  • 2018/01/21

Dwitter - 140文字以下で作るデジタルアート

昔はハードウェアリソースが足らず、何とか小さなサイズに納めようとコードを短縮するようなことがありました。今はリソースが潤沢であり、そんな心配は不要になっているのですが、それでもコードの短さにこだわる人たちがいます。今回紹介するDwitterはTwitterに書き込める、140文字の長さでグラフィカルなプログラミングを行...

List

  • 2018/01/19

WebGL Scroll Spiral - WebGLとスクロールを組み合わせたデジタル作品

WebGLは普段使っているJavaScriptではなく、OpenGLに近いものになります。そのため、自分のやりたいことを実現するために覚えるべきことがたくさんあります。しかしゲームなどでも使える技術なので覚える価値があるでしょう。そんなWebGLとWebブラウザのスクロールを組み合わせた作品がWebGL Scroll ...

List

  • 2018/01/18

Instagram.css - CSSによるInstagram風フィルタ

Instagramは今なお高い人気を誇るサービスです。昨年にしてもインスタ映えという新しいキーワードを生み出しており、多くの方が利用しています。その人気の一つが簡単に見栄えのする写真に変身させられるフィルタ機能でしょう。そんなInstagramのフィルタ機能をWebベース、CSSで再現するのがInstagram.css...

List

  • 2018/01/16

Via.js - Web WorkerでもDOMを利用可能に

JavaScriptはシングルスレッドなので、重たい処理を実行するとWebブラウザが固まってしまいます。それを防ぐため、Web Workerというバックグラウンドで処理を実行するAPIがあります。しかしWeb WorkerではDOM操作ができないという欠点があります。それを解決してくれるのがVia.jsです。## Vi...

List

  • 2018/01/14

Colored Eraser - 色毎に消せるペイントアプリ

ペイントアプリでよくある問題として、書くのは簡単でも消すのが難しいということです。特に一部について消したいと思っても、消しゴム機能で余計な部分まで手を付けてしまいます。そこでよく使うのがレイヤー機能ですが、これは開発者でない方にとっては扱うのが難しいものです。そこで参考にしたいのがColored Eraserです。特定...

List

  • 2018/01/13

caretposition.js - テキストエリアの文字入力位置を取得

最近、テキストエリアを拡張するようなライブラリが増えています。その一つに入力補完機能が挙げられます。IDEではよく見られる機能ですが、入力箇所(キャレット)を正しく取得しないと、逆に文字入力を妨げることになるでしょう。そこで使ってみたいのがcaretposition.jsです。テキストエリアにおけるキャレットの位置をX...

List

  • 2018/01/11

Viola - 印刷とWeb表示をサポートしたエディタ

最近の多くのドキュメントはWeb上で使われます。そのため、Web上で綺麗に閲覧できれば問題ないというケースが多いでしょう。しかし、時に印刷する場合があります。そうした時に途端に面倒な表示処理が必要になります。そこで使ってみたいのがViolaです。オンラインにおける表示と印刷を想定したオンラインエディタです。## Vio...

List

  • 2018/01/10

Restyaboard - Trello風のカンバンシステム

Trelloは単なるカンバンシステムではありません。横軸に時間軸を備え、ステータスの移り変わりを可視化するシステムとなっています。そのため、時間が関係する様々な情報を管理、可視化できます。そんなTrelloを模したソフトウェアとしてRestyaboardを紹介します。Restyaboardであれば社内でも立てられるでし...

List

  • 2018/01/10

Docusaurus - Facebook製のオープンソース・ドキュメントサイト

開発ドキュメントの整備は大きな問題です。ソースコードに書かれたりWikiや何らかのCMSを使ったりと様々な方法がありますが、これといった解決策はなかなか見つけられません。そこで使ってみたいのがDocusaurusです。Facebook製のオープンソース・ドキュメントサイトです。## Docusaurusの使い方メインペ...