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

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

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

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

もっと見る

List

  • 2019/12/21

Flowy - さくさく作れるフローチャートライブラリ

フローチャートを利用する機会は意外と多いです。しかし専用のソフトウェアがないために表計算やプレゼンソフトウェアを使って無理矢理作っているのではないでしょうか。Webブラウザで手軽に作れると便利です。今回紹介するFlowyはシンプルなフローチャートライブラリです。## Flowyの使い方左側にあるノードをドラッグ&ドロッ...

List

  • 2019/12/20

p5.riso - 画像を懐かしさ溢れるリソグラフ風に加工

リソグラフというのは印刷方式の一つで、原版を作ることで高速な印刷ができます。色数を押さえることで高速印刷可能で、新聞の折り込みチラシにあるような風合いの印刷が可能です。そんなリソグラフをWeb上で再現してくれるのがp5.risoです。懐かしい風合いの表現になります。## p5.risoの使い方デモです。ちょっとかすれた...

List

  • 2019/12/19

BrowserGap - ブラウザからブラウザを呼び出して安全な環境を確保

セキュアで安全な実行環境を手に入れるにはサンドボックス化されているのが基本でしょう。OSでは普及していますが、Webブラウザではプライバシーに気を配ったモードがある程度です。今回紹介するBrowserGapはWebブラウザの中でWebブラウザを実行する試みです。## BrowserGapの使い方ボタンを押すとWebブラ...

List

  • 2019/12/18

PIXI Tower diffense - HTML5製のタワーディフェンスゲーム

タワーディフェンスゲームが好きな人は多いでしょう。味方をどのように配置するか、どう強化するかによって戦況が大きく変わります。理詰めで考える部分が多いので、開発者は好きそうです。そんなタワーディフェンスゲーム好きに贈るゲームがPIXI Tower diffenseです。PIXI.jsを使い、Webブラウザ上ですぐに遊べま...

List

  • 2019/12/18

GraphQL Network - GraphQLを開発者ツールで分かりやすく表示

GraphQLはREST APIの欠点を改善し、Web APIとして使われる場面が増えていくことでしょう。しかし開発中の難点として、エンドポイントがすべて同じURLであるために、どのアクセスなのかは深く見てみないと分からないという点があります。そんなGraphQLの欠点を克服してくれるGoogle Chrome機能拡張...

List

  • 2019/12/17

CopyPasteJS - コーディングなしでクリップボード操作

HTML5のAPIによって、Webブラウザからクリップボードを操作できるようになっています。共有を促すときにメッセージをクリップボードにコピーしたり、別な機能でコピーしたテキストを貼り付けるといった操作が考えられます。今回紹介するCopyPasteJSは、そんなWebブラウザのクリップボード操作を簡単に行えるようにする...

List

  • 2019/12/16

typical - 軽量なテキストタイピング表示ライブラリ

Webサイトでよく使われるタイピングを模したテキスト表示ライブラリ。メッセージを全文表示してしまうよりも、タイピングしながらの方が目を引く効果があります。この手のライブラリはとても多いです。今回紹介するtypicalはとにかくサイズが小さいのが魅力です。400byte以下でアニメーションしながらテキストタイピングされま...

List

  • 2019/12/13

Party Bingo! - Webブラウザでビンゴを楽しもう

ビンゴ大会などで、数字をランダムに表示したいと思うことはないでしょうか。ビンゴに限らず、参加者の中から当選者を決めたいという時もあるでしょう。それを画面上に大きく表示すれば、会場は盛り上がるはずです。今回紹介するParty Bingo!は名前の通り、ビンゴを実現するためのWebアプリケーションになります。## Part...

List

  • 2019/12/12

Spacekit - 太陽系の動きを3Dで表現

宇宙に憧れる人は大勢います。宇宙を知れば知るほど、自分の存在が小さなものだと思い知ります。また、地球以外には移住もできず、まだ月にしか足を踏み入れていない現状が未来を感じさせます。そんな宇宙の様子を3Dで表現するのがSpacekitです。## Spacekitの使い方各惑星は線の上を動きます。!

List

  • 2019/12/12

Responsive Viewer - レスポンシブWebデザインをまとめて確認

レスポンシブなWebデザインが当たり前になっており、その表示確認が大変になっています。Webブラウザの幅を変えたり、スマートフォンやタブレットでの表示を確認したりしている方は多いでしょう。そうした手間を減らせそうなのがResponsive Viewerです。一気に複数デバイスでの表示を確認できます。## Respons...

List

  • 2019/12/11

Slack Disable WYSIWYG Bookmarklet - Slackの入力フォームを以前のものに戻す

Slackでは最近、入力フォームにWYSIWYGなツールバーが追加されました。ITに詳しくない人であれば便利だと思いますが、逆にITリテラシーが高い人にすれば、以前のように記法を使う方が簡単だったでしょう。そんな方に使ってみて欲しいのがSlack Disable WYSIWYG Bookmarkletです。WYSIWY...

List

  • 2019/12/10

YouTransfer.io - シンプルで簡単なファイルアップローダー

ファイルを相手に送る際にどんな手段を使っていますか。チャット、メール、AirDropなど多彩な方法がありますが、アップローダー経由というのがよくあるものになるでしょう。今回紹介するYouTransfer.ioは自分で立てられるシンプルなアップローダーです。## YouTransfer.ioの使い方メイン画面です。ここに...

List

  • 2019/12/09

Kung Fu Chess - ターン制を止めたチェス

すでに慣れたゲームも、本の少しルールを変えるだけで遊び方が大幅に変わる可能性があります。協力プレイで遊ぶはずのゲームで、お互いに邪魔しあった方が盛り上がるのはその典型といえるでしょう。今回紹介するKung Fu Chessはチェスゲームですが、ターン制という部分を破壊したゲームとなっています。## Kung Fu Ch...

List

  • 2019/12/08

Painterro - Webブラウザで簡易画像編集

画像のちょっとした加工でPhotoshopを立ち上げたり、専門のソフトウェアを購入したりするのは嫌だと思っている方は多いはず。最近では些細な修正であればWebベースでも行えるようになっています。今回紹介するPainterroはWebベースの画像編集ソフトウェアです。スクリーンショットにちょっとした注記を入れる程度であれ...

List

  • 2019/12/07

drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる

開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。## drawthe....

List

  • 2019/12/05

Openki - 学ぼう、教えよう

開発者では昔から教え、教えられる文化があります。一つの技術を深く探求することも、新しい技術を学ぶこともできます。その文化によってオープンソースやコミュニティ文化が成り立っているといえるでしょう。今回紹介するOpenkiはそんな教え、教えられる人たちのためのサービスです。## Openkiの使い方基本は学びたいことを探す...

List

  • 2019/12/03

ReadTweetDeck - TweetDeckの新着ツイートを音声読み上げ

TweetDeckを使えば多くのツイートが一気に見られます。一日中見ていても飽きないかも知れませんが、それでは仕事になりません。しかし新しいツイートが来たら知りたい、そんなツイ廃な人もいるでしょう。そんな方にお勧めなGoogle Chrome機能拡張がReadTweetDeckです。## ReadTweetDeckの使...

List

  • 2019/12/01

Quiet.js - 音を使ってデータを送受信

コンピュータから別なコンピュータに情報を伝える際には何か使うでしょうか。物理(USBメモリなど)とネットワークでいえば、最近はネットワーク利用が多いでしょう。そのネットワークにはインターネット、LAN、Bluetoothなど多彩な選択肢があります。今回紹介するQuiet.jsは物理でもネットワークもありません。なんと音...

List

  • 2019/12/01

lite-youtube - YouTube動画の軽量埋め込み表示

YouTubeの動画埋め込み表示機能は便利で使っている人も多いかと思います。しかし、あの埋め込み表示は動作が重たく、あまり大量に埋め込むとWebブラウザの負荷が高くなります。そこで使いたいのがlite-youtubeです。標準のツールに比べて圧倒的に軽快に動作します。## lite-youtubeの使い方lite-yo...

List

  • 2019/11/28

Mark Text - シンプル、エレガントなMarkdownエディタ

Markdownエディタは多数あります。多くはエディタとプレビューが左右に表示されます。しかしMarkdownに慣れていないと、書いている記法が結果としてどう表示されるのか推測が難しいでしょう。そこで使ってみたいのがMark Textです。インラインで記法が反映されるMarkdownエディタです。## Mark Tex...