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

プログラミング言語 - TypeScriptの記事一覧

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

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

もっと見る

List

  • 2020/10/20

glitch-image - 画像にグリッチ加工を行う

グリッチは画像などのバイナリデータをわざと壊すことで、映像に乱れを起こす加工技術です。乱れによってちょっとした不安感を感じさせたり、空気の乱れやSF的な効果を呼び起こせます。そんなグリッチを任意の画像に適用できるライブラリがglitch-imageです。## glitch-imageの使い方適用した画像です。!

List

  • 2020/10/18

Online GitHub Contributor Graph Generator - GitHubのアクティビティグラフで自由に絵を描く

GitHubでは日々の活動(Gitログ)によってアクティビティグラフが描かれます。それによって毎日開発を続けようと思いますし、モチベーションにしている人も多いでしょう。あのグラフはサーバ側で制御しているものではないので、Online GitHub Contributor Graph Generatorのような仕組みを使...

List

  • 2020/10/13

labelmake - WebでもCUIでも使えるPDF生成ライブラリ

PDFとシステムの連携で思いつくのはレポートや帳票でしょう。基本的に両方とも提携であり、データだけ変わります。テンプレートがあると、より作りやすくなります。今回紹介するlabelmakeはスキーマと呼ぶスタイル設定を用いてPDFを生成するソフトウェアです。## labelmakeの使い方左側がコード、その結果が右側のP...

List

  • 2020/10/10

AVR8js - WebベースのArduinoシミュレータ

IoTをはじめてみようと思っても、一番のネックになるのが専用のマイコンを手に入れないといけないことでしょう。高いものではありませんが、それでも最初から出費が伴うのを嫌がる心理は分かります。そうした中登場したのがAVR8jsです。なんとJavaScript製のArduinoシミュレータです。## AVR8jsの使い方確か...

List

  • 2020/10/09

SmartBlock - ブロックベースのReact用WYSIWYGエディタ

ユーザにHTML編集を任せる場合、何らかのツールバーやWYSIWYGなエディタが欲しいと思うでしょう。そういったツールは多々ありますが、なかなか使いやすいものに出会えません。今回紹介するSmartBlockはブロック単位での編集が可能なエディタです。並び替えもできて使い勝手はよさそうです。## SmartBlockの使...

List

  • 2020/10/08

html-midi-player - MIDIファイルの再生と可視化を行うWebコンポーネント

MIDIはかつて耳コピーが流行っていた時代に一世を風靡した音楽フォーマットです。今もミュージシャンの人たちは使っていることでしょう。Web上で再生もできますが、ただアップロードするだけでは味気ないものです。そこで使ってみたいのがhtml-midi-playerです。MIDIファイルの可視化と再生ができるWebコンポーネ...

List

  • 2020/10/02

Taskcafe - いかしたデザインのカンバンシステム

カンバンの概念は多くのシステム、サービスに影響を与えています。単純なタスク管理とは異なり、ビジュアル化されること、ステータスの変化がはっきりと分かるのがポイントです。カンバンを共有すれば、チーム全体で状況を共有できます。今回紹介するTaskcafeはそんなカンバンシステムになります。デザインも格好良く、使いやすそうです...

List

  • 2020/09/26

TimeCat Chrome - ごく小さなファイルサイズでブラウザ操作を記録

ブラウザの操作を記録したいと思ったことはないでしょうか。動画で録画したり、アニメーションGIFとして保存するソフトウェアもあります。確かに便利ですが、ソフトウェアを立ち上げるのが面倒です。もっと手軽にさくっとできると便利です。そこで使ってみたいのがTimeCat Chromeです。Google Chrome上で、まるで...

List

  • 2020/09/21

goplayground-js - Go言語のプレイグラウンド用JavaScriptクライアント

Go言語は今注目が集まっているプログラミング言語の1つでしょう。多彩なOS向けにまとめてコンパイル可能で、堅牢かつ高速に実行できます。ライブラリも充実してきており、利用しやすくなっています。そんなGoを任意のWebサイトやJavaScriptから実行できるのがgoplayground-jsになります。## goplay...

List

  • 2020/09/17

LogBox - 開発者ツールを開かずにエラーを補足する

Webサイトを訪問していて何かJavaScriptのエラーなどが起こった際、開発者ツールを立ち上げる必要があります。逆にいえば、開発者ツールを開いていないとエラーに気付かない可能性もあります。これは開発者にとっては面倒な一手間です。今回紹介するLogBoxは開発者ツールを開かずにエラーを報告してくれるGoogle Ch...

List

  • 2020/09/14

Fluent Reader - Electron製。デスクトップ向けのRSSリーダー

RSSリーダーは最近ではあまり使われなくなっているでしょうか。個人的にはソフトウェアの情報集めに必須のツールですが、これは例外でしょう。多くの人たちはソーシャルサービスで十分なはずです。しかし、まだまだフィードリーダーを使っていこうという方は、ローカルソフトウェアを使ってみるのも手です。今回はFluent Reader...

List

  • 2020/09/14

VCam Window for mmhmm - mmhmmを画面共有で使う際に

mmhmmを使ったことがあるでしょうか。仮想カメラとして動作するソフトウェアで、Webカメラの映像や画面共有を取り込んでプレゼンテーションできるソフトウェアです。Evernoteの元CEOが開発していることで話題になっています。そんなmmhmmをWebカメラとしてでなく、画面共有で使いたいと言うニーズに応えるのがVCa...

List

  • 2020/09/13

WikiLoop DoubleCheck - Wikipediaを守るレビューツール

Wikipediaは世界最大の百科事典であり、日々多くの人たちによってコンテンツが作成、編集されています。それを一定の品質に保つため、レビューする人たちがいますが、差分を確認して受諾したり、リジェクトするのはとても大変です。そこで作られたのがWikiLoop DoubleCheckです。Wikipediaのレビューを素...

List

  • 2020/09/09

Moufette - ユーザフィードバックのフォームを生成

Webサイトを表示すると、右下のあたりにチャットウィンドウが表示されることがあります。個人的には煩わしいのですが、よく使われているということは、効果があるのでしょう。メールを書いたり、コンタクトフォームで入力するよりは手軽なのは間違いありません。そんな訪問者との接点としてフィードバック用のフォームを生成できるのがMou...

List

  • 2020/09/07

The Fabricius Project - AI/機械学習を使ってヒエログリフを学ぼう

古代のエジプトではヒエログリフと呼ばれる象形文字が使われていました。博物館などで、エジプト関連の遺跡を見たり、映画で考古学系のものを見ると目にすることの多いものです。あのヒエログリフ、書かれていることが分かったらちょっと知識人っぽいですよね。そんな夢を叶えてくれるのがThe Fabricius Projectです。AI...

List

  • 2020/09/04

Slack Custom Emoji Manager - Slackのカスタム絵文字をまとめてアップロード

Slackにはカスタム絵文字機能があります。色々な絵文字をアップロードしてカスタマイズしている人は多いです。しかし、そのアップロード作業が非常に手間です。一つ一つの画像を順番にアップロードしてたら日が暮れてしまいます。Web APIを使ってバルクアップロードもできますが、今回はもっと簡単なSlack Custom Em...

List

  • 2020/09/03

starboard-notebook - Webブラウザ上でJavaScriptを実行、確認

WebブラウザではJavaScriptが動作するので、Webブラウザさえあれば、わざわざnodeをインストールすることなく、プログラミング環境が手に入ります。しかし開発者ツールを開くのは、やはり開発者くらいでしょう。今回紹介するstarboard-notebookは、Webブラウザ上で実行できるJavaScript実行...

List

  • 2020/08/28

billboard.js - D3.jsを用いた多彩なグラフライブラリ

Web上でグラフを描きたいケースはとても多いです。そしてグラフは単に1種類知っておけばいいわけではなく、用途に合わせて最適なものを選ばないといけません。一つのライブラリだけで行うなら、なるべく多くの表示パターンに対応したものを使うべきでしょう。今回紹介するbillboard.jsは一般的なグラフであれば、大抵こなせる強...

List

  • 2020/08/20

React Guitar - ギターのコード表示と音の確認ができるReactコンポーネント

コロナ禍にあって、自宅で過ごす時間が長くなっている中、新しい趣味を見つけている人が大勢います。そんな中にはギターなどの楽器をはじめてみたという人もいるのではないでしょうか。ハイレベルなものではなく、趣味としてはじめてみるのはよさそうです。そんなギターの練習としてReact Guitarを使ってみてください。いわゆるギタ...