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

Webの記事一覧

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

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

もっと見る

List

  • 2018/02/24

Clarity - Webベースのgrep/tail

プログラマであればgrepやtailは大好物ですよね。ほぼ毎日使っているのではないでしょうか。tailコマンドであればサーバのログを確認したりする用途が多いのでサーバに一旦ログインする必要があります。しかしこの手間が面倒かも知れません。そこで使ってみたいのがClarityです。grep/tailコマンド専用のHTTPサ...

List

  • 2018/02/22

Image Glitch Effect - ホラー映画風のグリッチ効果を演出

ホラー映画などで、映像に突然ノイズが入って乱れるという効果がありますが見たことはあるでしょうか。映像の不安定さによって感情も不安になり、何か起こるのではないかと心配になってしまいます。そんなグリッチ効果をスタイルシートだけで実現できるのがImage Glitch Effectです。## Image Glitch Eff...

List

  • 2018/02/21

Regexper - JavaScriptの正規表現を可視化

正規表現は慣れないと分かりづらいものです。また、複雑なものを作ってしまうと、作った時は良くとも、後でメンテナンスができなくなってしまいます。正規表現のデバッグも困難で、どう判定されているのか理解するのに時間を要するでしょう。そこで使ってみたいのがRegexperです。Web上で正規表現を可視化してくれます。## Reg...

List

  • 2018/02/20

SimpleMDE - シンプルなMarkdownエディタ

Markdownのシェアが広まるのに合わせて、より慣れていない人たちが使いやすくなる環境が必要になっています。WYSIWYGで入力支援できるツールはもちろんのこと、プレビューなども必要です。今回紹介するSimpleMDEはシンプルなUIのMarkdownエディタになります。決して多機能ではありませんが十分なエディタとな...

List

  • 2018/02/20

convForm - インタラクティブなチャットUIを実現するjQueryプラグイン

最近はAIを使ったチャットボットが流行です。ウィザード形式で言われるままに答えるのではなく、自然言語で対話しながらステップを踏んでいけるのが特徴です。そのためにチャット形式のUIがよく使われています。今回紹介するconvFormはそんなチャット形式のUIを手軽に実装できるjQueryプラグインになります。## conv...

List

  • 2018/02/19

Reacteroids - React製のアステロイド

新しい言語やフレームワークを覚えるのに、まず何か作ってみるのはお勧めです。書籍を見るだけでなく、実際に手を動かしてみると分かることがたくさんあります。脳の刺激にもなり、記憶定着に役立つでしょう。今回紹介するのはReacteroids、Reactを使ったアステロイドです。## Reacteroidsの使い方ゲーム画面です...

List

  • 2018/02/18

ReForum - React × MongoDBの掲示板

掲示板はインターネット黎明期の頃から存在しました。今でも某巨大掲示板をはじめとして、掲示板システムは健在です。チャットと異なり、多少の非同期感がちょうど良く、多くの人たちによって日夜会話が続いています。そんな掲示板システムの最新版としてReForumを紹介します。Reactを使った先鋭的な掲示板となっています。## R...

List

  • 2018/02/17

BootLeaf - Bootstrap/Leafletを使った地図テンプレート

地図とWebは相性が良いです。移動中に地図を見たいと思うことは多いですし、旅行や出張前に計画を立てる上でも地図が必要です。それもあり、Googleマップをマッシュアップする地図サービスは無数に存在します。今回紹介するBootLeafはそんな地図マッシュアップのベースになるようなソフトウェアです。様々な情報を地図に載せや...

List

  • 2018/02/15

Arakawa Template - シンプルで実用性の高いWebテンプレート

Webデザインは多彩ですが、多くの機能は他のWebデザインでも使われているものです。例えばレスポンシブWebデザインへの適用は大抵のWebサイトで実現されており、イチから作る必要はないでしょう。WebデザインもDRYの考えが大事です。そこで使ってみたいのがArakawa Templateです。汎用的なWebサイトテンプ...

List

  • 2018/02/14

WildDuck - Gmailのデザインを模したWebメーラー

Webブラウザが多機能になるにつれて、多くのアプリケーションがWeb化しています。その先進とも言えるのがWebメーラーではないかと思います。元々Webブラウザ向けにメール機能を提供するサービスは多かったですが、Gmailによって爆発的に広がっています。そんなWebメーラーの最新版がWildDuckです。Gmailのデザ...

List

  • 2018/02/13

DepthKit.js - 奥行きをもった動画を再生

従来のコンピュータでは平面の情報を取り扱うだけでしたが、最近では奥行きを数値化するのがトレンドです。それによってARやVR、MRといった分野に活かされたり、3Dがより本格的に楽しめるようになります。そんな奥行きを計測するデモを紹介します。Three.jsと組み合わせたDepthKit.jsです。## DepthKit....

List

  • 2018/02/10

Analog Film Emulator - フィルムで撮影したような写真に加工

西洋の風景画が廃れた原因の一つにカメラがあります。ただ目の前の情景をそのまま写し取るのであれば、カメラの方が正確です。さらにそんなカメラでもフィルム式は廃られており、枚数がほぼ無制限なデジタルに移り変わっています。とは言え、今なおフィルムの味のある撮れ方が好きという方はたくさんいます。そうした方に触れてみて欲しいのがA...

List

  • 2018/02/09

mono-wasm - C#から WebAssemblyを作る

WebAssemblyを記述できるのはC/C++/Rustだけだと思っていないでしょうか。実はLLVMにさえなれば、他の言語でも記述できます。そのため、やろうと思えばSwiftから作ることもできるそうです。そこで注目したいのがmono-wasmです。Monoを使ってC#で記述された内容を WebAssembly にする...

List

  • 2018/02/08

Clang In Browser - Web上でC言語を記述して WebAssemblyに

Webブラウザでコンパイルされたプログラムを実行できる WebAssembly。個人的に非常に注目している技術で、これまで難しかった、認証キーを公開せずにWebアプリケーションでも使えるようになっていくのでさらにWebアプリケーションの利用幅が広がっていくと思われます。そんな WebAssembly はC/C++/C#...

List

  • 2018/02/08

Slip.it - ソーシャルではないオンラインブックマーク

Webブラウザ付属のブックマークを登録するのは、ソーシャルなど公開したくないWebサイトを覚えておきたい場合です。しかしWebブラウザごとにブックマークが分散してしまいますし、他のコンピュータで使いたい時に不便です。そこで使ってみたいのがSlip.itです。オンラインブックマークサービスですが、ソーシャルではありません...

List

  • 2018/02/05

Prisma - 既存のデータベースをGraphQL化

最近はAPIの公開が当たり前に行われています。しかしすでに既存のシステムがある中で、APIを開発するのは工数がかかるでしょう。データベースをそのまま公開できると便利だと感じる方も多いはずです。そこで使ってみたいのがPrismaです。既存のデータベースをラップする形でGraphQL APIを追加するソフトウェアです。##...

List

  • 2018/02/05

CrookedStyleSheets - CSSだけでユーザ行動をトラッキング

ユーザがどういった操作を行ったのか、それを知りたいと考える人は大勢います。Webの場合、JavaScriptを使うことで各イベントのトラッキングができます。しかしプライバシーを気にする方はJavaScriptをオフにすることでそれを防げます。そんな中にあってもトラッキングできる技術がCrookedStyleSheets...

List

  • 2018/02/03

jspaint - 懐かしのペイントをWebアプリケーション化

昔のソフトウェアであっても、別な言語や別な環境で実行できると新しい魅力に出会うことがあります。最近であれば、ローカルOSで動いていたソフトウェアをWebアプリケーション化するだけでも面白いです。今回はWindowsではお馴染みのペイントをWebアプリケーション化したjspaintを紹介します。## jspaintの使い...

List

  • 2018/02/01

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

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

List

  • 2018/01/29

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

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