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

Webの記事一覧

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

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

もっと見る

List

  • 2019/11/13

Kagura - RustだけでWebアプリケーションを開発するフレームワーク

WebAssemblyを開発する際の最も基本的な言語となるのがRustです。WebAssemblyでは元々DOMやネットワーク操作ができませんが、Rustのwasm-bindingによってWebブラウザ側のAPIを実行できるようになりました。その結果、WebAssembly活用の幅が広がったと言えます。Kaguraはそ...

List

  • 2019/11/12

OpenTechCalendar - ヨーロッパ版IT勉強会カレンダー

開発者の勉強会は世界中で行われています。様々な集客サイトがあるので、情報が散らばってしまっており、自分の行きたい勉強会を探すのも大変になっているかも知れません。情報は一カ所に集約されていると便利です。そこで使えるのがOpenTechCalendarです。世界各地で行われている勉強会を一覧できます。## OpenTech...

List

  • 2019/11/12

OnRuby - Rails製のユーザグループプラットフォーム

現在Meetup.com離れが進んでいます。元々月額費用が高いと言われていましたが、最近になって参加者からも強制徴収する機能をテストしていると言われて、代替サービスを検討するユーザが増えています。そんな中の候補としてあがっていたのがOnRubyです。Ruby on Rails製のユーザグループプラットフォームです。##...

List

  • 2019/11/11

TinaCMS - React製のWebサイト編集ツール

Webサイトを構築する際、見た目と作成環境がかけ離れていると、修正して結果を確認するという作業を何度も繰り返さないといけません。WYSIWYGなエディタもありますが、CMSのように決まった形ではないので複雑なデザインは作業量が増えてしまいます。今回紹介するTinaCMSはWebサイト上で使える編集機能を実現します。項目...

List

  • 2019/11/10

ReportBro - Web上で帳票をデザイン

レポートは生成するのも大変で、さらにそのデザインを行うのも大変です。デザインをコーディングしてしまうと、ちょっとした修正でも手間になります。その結果、専用のツールやExcelでテンプレートを作れるようにするでしょう。今回はWebブラウザ上でレポートのテンプレートが作れるReportBroを紹介します。## Report...

List

  • 2019/11/09

PlainDraggable - SVG/DOMのドラッグ&ドロップライブラリ

Webアプリケーションが多機能になるにつれて、ローカルアプリケーションライクな操作が求められるようになっています。例えばドラッグ&ドロップはローカルアプリケーションであれば良くある操作と言えます。そんなドラッグ&ドロップをスムーズに行えるライブラリがPlainDraggableです。## PlainDraggableの...

List

  • 2019/11/08

Meriyah - 最新のECMAScript仕様も使えるJavaScriptパーサー

JavaScriptが色々なプラットフォームで使われるようになっています。JavaScriptから別な言語に変換するパーサーなどを作りたいと思ったら必要なのがパーサーです。コードを解析することで、別な使い方が生まれます。今回紹介するMeriyahはJavaScriptで作られた(実際にはTypeScriptですが)Ja...

List

  • 2019/11/07

Rainmap - 現在の降雨情報を地図に表示

最近の台風や水害によって天気を見る癖がついてしまった人は多いでしょう。明日の天気はまだまだ精度が低いように思いますが、現在の天候を使って5分後から数時間後くらいの天気であればかなり精度の高い予測ができるようになっています。今どこで雨が降っているのか、知りたい人はRainmapを見てみましょう。## Rainmapの使い...

List

  • 2019/11/06

hterm - Chromeアプリとして動作するターミナルエミュレータ

開発者であればターミナルを使う機会が多いですが、そうでない場合は時々しか使わないでしょう。そのためにソフトウェアをインストールしても使い方を忘れてしまったり、そもそもインストールしたことを忘れてしまうかも知れません。そんな方に使ってみて欲しいのがhtermです。Google Chromeアプリとしてtインストールするの...

List

  • 2019/11/05

Vue-Blocks - Vue製のデータフローエディタ

ノードをつなぎ合わせてユーザがその場で動作を変えられる仕組みは人気ですが、そのUIはとても複雑です。専用のライブラリを使いますが、それ以外の仕組みとの相性を選びます。もしVueで作っているならばVue-Blocksがその役割にぴったりでしょう。## Vue-Blocksの使い方デモ画面です。!

List

  • 2019/11/04

darkmodejs - ライト/ダークモードをWebブラウザでも認識

最近のOSではダークモードが導入されています。時間によって変わることもできれば、単に暗めのUIが好きという人も選択できます。開発者であればダークモードを好む人も多いでしょう。そんな中、ダークモードなのにWebサイトが明るいままだと興ざめです。解決してくれるライブラリとしてdarkmodejsを紹介します。## dark...

List

  • 2019/11/04

uPlot - 大量のデータを高速に描画するグラフライブラリ

チャートライブラリに求められるニーズはたくさんあります。使えるグラフの種類が多いこと、カスタマイズが容易なこと、リアルタイムデータにも使えることなどなどです。すべてをまかなえるライブラリは多くないので、目的に合わせてライブラリを使い分けるのが良いでしょう。今回紹介するuPlotはとにかく大量のデータを即座に表示したいと...

List

  • 2019/11/03

Pythonic News - PythonianのためのHacker News

Hacker NewsのUIは決してモダンではなく、どちらかと言えば前時代的なのですが、慣れてくると使いやすく感じるから意外です。シンプルで一覧性があり、余計な機能がないので開発者にとって使いやすいです。そんなHacker NewsのUIを真似て作られたのがPythonic Newsです。名前の通り、Python開発者...

List

  • 2019/11/03

Bullshit.js - よく分からない単語は見ない

開発者にとって、マーケターであったり経営者の話している内容はさっぱり分からないことがあります。そのため、彼らが登壇して語りかけても意味が通じず、心に刺さりません。そんな状況を端的に表しているのがBullshit.jsです。分かりづらい単語を理解できるものにしてくれます。## Bullshit.jsの使い方変換前です。!

List

  • 2019/10/31

Markdown - Markdown記述をサポートするツールバー

Markdown記法はそれほど複雑ではないものの、括弧の順番を忘れてしまったり、テーブルの文字寄せの書き方を調べたりすることがあります。慣れていない人にとってはまだまだ難しい記法と言えるでしょう。そこで使ってみたいのがMarkdown(以下、Markdown(WYSIWYG)とします)です。同名のライブラリなのが気にな...

List

  • 2019/10/30

roughViz - 手書きのようなラフなグラフを描く

正確に書かれた図は見やすいものですが、かしこまった雰囲気が出てしまいます。モックアップのレベルであまり正確なものを作るとデザイン上の些細な部分にこだわりはじめてしまうのでお勧めできません。そこで使ってみたいのがroughVizです。手で書いたような乱雑なグラフが描けるライブラリです。## roughVizの使い方棒グラ...

List

  • 2019/10/30

webp-hero - WebP非対応ブラウザでも表示するpolyfill

WebPはGoogleがメインで開発を進めている画像フォーマットです。写真やイラストなど用途を区別せずに使えるフォーマットで、とてもサイズが小さく済むのが特徴です。しかし、対応しているブラウザが限られるのが難点です。そこで使ってみたいのがwebp-heroです。WebP非対応ブラウザでも表示可能にするpolyfillラ...

List

  • 2019/10/29

WebAssembly.sh - WebAssembly製のWebターミナル

Webブラウザでも十分ターミナルが実装できるようになってきました。あえて専用のソフトウェアをインストールする必要もなく、すぐにサーバにアクセスできます。公開鍵認証などは多少面倒ですが、十分使えるレベルです。今回紹介するWebAssembly.shもそんなターミナルの一つですが、WebAssemblyで作られており、PW...

Missing

  • 2019/10/26

React SlideShow UI - Slideshare/Speakerdeck風の表示を行うReactコンポーネント

スライドを共有するSlideshareやSpeakerdeckのようなサービスを作りたいと思ったことはないでしょうか。個人的には以前作ったことがあるのですが、その頃はFlashに変換してビューワーで表示するのが基本でした。今であればPDFや画像化して表示することでしょう。今回紹介するReact SlideShow UI...

Missing

  • 2019/10/25

Helpdesk - Ruby on Rails製のヘルプデスク

Webサービスにつきものなのがヘルプデスクです。使っていて困ったことがあったら、まずヘルプデスクを見るでしょう。そこですでに質問があがっていればすぐに解決できますし、解決しなければそのまま質問できます。今回紹介するHelpdeskはそんなヘルプデスクを自前で持てるシステムとなっています。## Helpdeskの使い方こ...