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

Webの記事一覧

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

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

もっと見る

List

  • 2020/02/11

Manifest - ぜひ触って欲しいグリッドベースのピンボード

Web上でドローイングをしたり、付箋紙を作成できるサービスがありますが、多くがピクセル単位で自由に描けるようになっています。自由なのはいいのですが、厳密に書こうとしてしまって、余計な時間がかかります。同じような気持ちになったことがあれば、ぜひ試して欲しいのがManifestです。グリッドに沿って描かれるのが気持ちいいピ...

List

  • 2020/02/10

Compressor.js - Web上で画像を圧縮

スマートフォンやデジカメが高性能化し、作成される写真のサイズがどんどん大きくなっています。数MBで済めばいいほうで、場合によっては10MBを超える場合もあるでしょう。そうした写真を受け取る側のサービスもネットワークが逼迫してしまいます。そこで使ってみたいのがCompressor.jsです。画像をJavaScriptで圧...

List

  • 2020/02/09

neko - Webブラウザ内で動く仮想Webブラウザ

危険そうであったり、そのままアクセスするのに問題がありそうなWebサイトは少なからず存在します。Webブラウザの脆弱性をついて、アクセスするだけでマルウェアに感染させるものもあるでしょう。今回はそういったWebサイトにアクセスする際に使えそうな仮想Webブラウザ、nekoの紹介です。## nekoの使い方利用する際には...

List

  • 2020/02/08

DiagramFlowJS - Web上でフローチャートを描くJavaScriptライブラリ

Web上でフローチャートを描いたり、図を描く際にはどんなツールを使っているでしょうか。各ノードを連結させたり、連結後に動かしてもちゃんと線が繋がったままになっているツールを選ぶのがいいでしょう。今回紹介するDiagramFlowJSはそんな図を作るのに使えるソフトウェアです。## DiagramFlowJSの使い方多く...

List

  • 2020/02/06

Medieval Fantasy City Generator - 仮想の都市を生成する

人が生活するところには街があります。そこには様々な建物が建ち並び、中には警察や消防署など公共施設もあります。あなたがゲームを作ったり、小説を書いたりするならば、そうした設定が必要なはずです。今回紹介するMedieval Fantasy City Generatorは仮想的な都市をランダムに生成してくれるソフトウェアです...

List

  • 2020/02/06

JsBattle - 対戦ゲームを通じてプログラミングを学ぶ

プログラミングを覚えるのにゲーミフィケーションを取り入れるのはいいアイディアです。ただひたすらに写経しながら覚えるのは忍耐力が必要ですし、目的があった方がモチベーションが維持しやすいでしょう。今回紹介するJsBattleはJavaScriptをゲームを通して学べるソフトウェアです。## JsBattleの使い方トップペ...

List

  • 2020/02/05

ffmpeg.js - Web上で使えるFFMPEG

WebAssemblyを使うことで、これまでのWebでは難しかったスピードでアプリケーションを実行できるようになります。DOMやネットワークが使えないといった制限はありますが、計算処理を高速に行えるのは大きなメリットです。そんなWebAssemblyでは既存のソフトウェアをEmscriptenを通してWebAssmbl...

List

  • 2020/02/04

The Aviator - 飛行機を飛ばし続ける3Dゲーム

ゲームを作ってみたいと思っている方は多いでしょう。凝ったゲームを作るのは時間も技術も必要になりますが、簡易的なものを作って徐々にステップアップしていくこともできます。今回紹介するThe Aviatorはそんなステップを歩んで作られた3Dゲームです。## The Aviatorの使い方ゲーム画面です。!

List

  • 2020/02/04

Excalidraw - プロトタイプに。ラフな線が書けるドローツール

きっちりした、正確な図を書くと、ほんの少しの乱れが気になって修正に時間がかかってしまったりします。それは些細な問題で、本質的な問題ではないにも関わらずです。特にプロトタイプなどではラフさを残した方がはやく作れます。今回紹介するExcalidrawは手書き風の図を書けるソフトウェアです。乱れている分、細かな点は気にせず作...

List

  • 2020/02/03

PhotoPrism - TensorFlowを利用した写真管理

写真の管理には何を使っていますか。個人的にはGoogle Photosに写真のコピー(バックアップ)をアップロードしています。撮影場所などを検索できるのが便利で、写真を探すのがとても楽になりました。今回紹介するPhotoPrismもそんな写真管理ソフトウェアです。TensorFlowを用いることで、これまでにない高度な...

List

  • 2020/02/02

jExcel - Web上でExcelレベルの表計算機能を実現

業務システムをWebアプリケーション化すると、必ず一覧表の機能が必要になります。そして、テーブル組などで簡単に終わらせようとすると、並び替えやインライン編集などの機能要望が出てきます。今回紹介するjExcelはExcel風の表計算機能をWeb上で実現してくれるソフトウェアです。## jExcelの使い方ページネーション...

List

  • 2020/02/02

GoatCounter - プライバシーに配慮したトラッキングしないアクセス解析

Webにおいてプライバシー保護が重視されるようになっています。Google Chromeは2022年にサードパーティーCookieを廃止する予定を挙げており、広告業界のトラッキングへの影響は大きなものになりそうです。アクセス解析においても同様のことがいえるでしょう。GoatCounterは自分で立てる、トラッキングはし...

List

  • 2020/02/01

DartPad - オンラインのDartエディタ&実行環境

最近Dartを学びはじめました。SwiftやKotlin、TypeScriptなど多くの言語が似たような言語仕様になっているように感じます。しかし微妙に構文が違うので、余計な混乱につながってしまいます。そんなDartを試す環境としてDartPadを覚えておくといいでしょう。Flutterももちろん利用できます。## D...

List

  • 2020/01/31

Rainbrow - Webカメラでキャラクターを操作するRainbrowクローン

ゲームで入力操作を行う場合、キーボードやマウス、専用コントローラーが使われます。スマートフォンやタブレットの場合、マルチタッチ操作を使うでしょう。しかし、他にも入力操作できる仕組みがあるはずです。それはカメラです。カメラを使ってキャラクターを操作する、そんなゲームがRainbrowです。## Rainbrowの使い方絵...

List

  • 2020/01/30

Peak map - 地図上に等高線を表示して立体的に表示

山登りをする人であれば、等高線を用いた地図を見ているだけで楽しい気分になるのを理解できるでしょう。実際に歩いているところを想像したり、ルートを探索したりするのも楽しいです。そんな方(だけでなく)楽しめるソフトウェアがPeak mapです。## Peak mapの使い方元の地図。!

List

  • 2020/01/30

Multiplayer 2d car game! - マルチプレイヤーで接続して遊べるゲームの基盤に

ゲームは一人でやっても面白いですが、複数人になるとさらに面白さが増します。コンピュータ相手に戦うのでは味気ないですが、友達やインターネットを通じた人とゲームを興じるのは、思いもしなかった展開になったりすることでしょう。今回紹介するMultiplayer 2d car game!はそんなWebブラウザゲームの基盤に使えそ...

List

  • 2020/01/29

Astuto - 利用者の声を聞こう。Ruby製のカスタマーフィードバックシステム

今はサービス提供側よりも、利用側(消費者など)の方が力を持っています。多くの商品が口コミによって拡散され、一気に伸びることもあれば、叩かれて消失してしまうこともあります。利用者の声を真摯に受け止めるのは大事なことです。今回紹介するAstutoは自分で構築するカスタマーフィードバックシステムです。## Astutoの使い...

List

  • 2020/01/29

Weboji - Webブラウザ用のアニ文字

iOSに搭載されているアニ文字は利用しているでしょうか。メッセージなどで使うことはあっても、テレビ電話的に使う文化があまりない日本では利用者は多くないかも知れません。技術的には顔認識と、その表情や動きを絵文字に反映する点が面白いです。そんなアニ文字をWebブラウザ上で実現するのがWebojiです。Webカメラの顔トラッ...

List

  • 2020/01/28

React Spectrum - カラフルなテキスト用プレースホルダーを生成

Webやアプリのデザインを行う際に、アテで文字列を適用します。同じ文字を繰り返す、小説の一文を使うなど様々な方法がありますが、むしろテキストでない方がいいこともあるでしょう。そんな時に使ってみたいのがReact Spectrumです。カラフルなプレースホルダーを生成します。## React Spectrumの使い方生成...

List

  • 2020/01/27

Timelite - 時間の使い方を可視化する時間管理

ふと気がつくと夕方、さらに深夜になっていたなんて経験ないでしょうか。目標だった仕事がなかなか終わらず、時間だけが過ぎ去っていく…そんな経験をしたことは少なからずあるはずです。何が問題なのか、それを知るためには、まず時間の使い方を可視化するのが大事です。それを可能にするのがTimeliteです。## Timeliteの使...