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

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

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

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

もっと見る

List

  • 2019/10/04

Sshwifty - Webブラウザ向けのSSH/Telnetクライアント

従来はローカルアプリケーションだったものが、どんどんWebアプリケーション化しています。開発環境においてもクラウドIDEが使われるようになっています。殆どの操作がWebブラウザ上でできるようになるでしょう。今回紹介するSshwiftyはSSHクライアントをWebブラウザベースで提供します。## Sshwiftyの使い方...

List

  • 2019/10/02

The Most Dangerous Writing App - 書き続けることが強制されるテキストエディタ

集中して文章を書くためにはどうしたら良いでしょうか。自然と筆が進んでゾーンに入れる人もいますが、それは特別な人たちです。凡人たる我々は何かきっかけが必要です。人によってはご褒美だったり、逆にペナルティだったりするでしょう。今回紹介するThe Most Dangerous Writing Appはその名の通り、ペナルティ...

List

  • 2019/09/28

SOUNDSCAPE - WebAudioを使って音楽を自動生成

BGMを必要とした時、その著作権は注意が必要です。下手に使うと後で某団体から請求が来るかも知れません。フリーな音楽を使えばそういった心配はありませんが、探すのが大変です。そこで使ってみたいのがSOUNDSCAPEです。Webブラウザ上で動的に音楽を生成します。## SOUNDSCAPEの使い方音が出ないのが残念ですが、...

List

  • 2019/09/27

Leon Sans - アニメーションもできるJavaScript製のフォント

フォントを変えると、文面の印象ががらっと変わることがあります。フォントによって受ける印象はそれぞれで、最適なものを選ばないといけません。同じフォントであっても太さが変わるとまた違うでしょう。今回紹介するLeon SansはSans Serif風のフォントですが、プログラマブルな特徴があります。## Leon Sansの...

List

  • 2019/09/26

Statusfy - ステータスページをオープンソースで

クラウドサービスを使ってビジネスを構築するのが当たり前になっている現在、サービスのステータスページは重要になっています。サービスが停止するのは問題ですが、その状態すら分からないのは大きな問題です。そこで使ってみたいのがStatusfyです。オープンソースでステータスページを立ち上げられます。## Statusfyの使い...

List

  • 2019/09/24

Recharts - React用のグラフ/チャートコンポーネント

Webの表現力を高めてくれるのがグラフ、チャートライブラリです。ある時は円グラフ、ある時は棒グラフとニーズは様々です。そのため、多くのグラフに対応していれば、それだけ価値が高まります。今回はRechartsを紹介します。React用のチャートコンポーネントです。## Rechartsの使い方グラフのサンプルをスクリーン...

List

  • 2019/09/23

Maizzle - HTMLメールを作るためのフレームワーク

HTMLメールを使うのも当たり前になってきました。しかし、レスポンシブなメールをきちんとメール向けに仕様に合わせて送らないとレイアウトが崩れてしまったりします。それではせっかく目立つHTMLメールを使っているのに勿体ないです。そこで使ってみたいのがMaizzleです。HTMLメールを作るためのフレームワークです。## ...

List

  • 2019/09/22

Wix Rich Content - 多彩なパターンに対応したWYSIWYGエディタ

開発者であればMarkdownのようにテキストベースで記述する方が簡単かも知れませんが、開発者でない人たちはWYSIWYGなエディタを使った方が簡単に感じるはずです。使い勝手の良いWYSIWYGエディタを探している方はWix Rich Contentを使ってみましょう。Wix製の使いやすいUIを持ったエディタです。##...

None

  • 2019/09/21

ga-lite - 軽量なGoogle Analyticsクライアント

Webサイトのアクセス解析にGoogle Analyticsを使っている人は多いでしょう。そんな時、Googleから指定されたスクリプトをそのまま使っている人も多いはずです。しかし、あのスクリプトには殆ど使われない機能もたくさんあります。そこで使ってみたいのがga-liteです。軽量版のGoogle Analytics...

List

  • 2019/09/20

Site.js - 静的/動的サイトまでこなせるJavaScriptフレームワーク

最近は静的サイトフレームワークが多数出てきています。確かに便利なのですが、拡張していく中でダイナミックな部分が欲しくなることもあるでしょう。そんな時に別途APIサーバを立てるのも面倒です。そこで使ってみたいのがSite.jsです。静的サイト開発から動的サイトまでこなせるJavaScriptフレームワークです。## Si...

List

  • 2019/09/19

Hanabi Live - オンラインで花火(カードゲーム)を楽しむ

花火というカードゲームを知っていますか。日本語がついていますが、ドイツ生まれだそうです。自分のカードは相手から見えず、1〜5の数字が書かれたカードを並べていくゲームです。みんなで協力し合うのが特徴とのことです。そんな花火をWeb上で楽しめるのがHanabi Liveです。## Hanabi Liveの使い方トップページ...

List

  • 2019/09/18

workers-graphql-server - Cloudflare Workersを使ったGraphQLサーバ

Cloudflare Workersというサービスがあります。CDNで知られるCloudflareのエッジサーバ上にサービスワーカーを配置し、プログラムを動作させるものです。実例がなかなか見えてこないので、個人的にはユースケースが見えてきていません。そんなCloudflare Workersを使った例としてworker...

List

  • 2019/09/17

ざっくりAWS - AWSの利用料金をざっくりと把握する

クラウドサービスの多くは従量課金になっています。個々の条件に応じて細かく料金が設定されており、かつ無料枠もあったりして見積もるのも非常に大変です。そのためにパートナーもいるのでしょうが、自分でだいたいの見積もりはとっておきたいと思うことでしょう。そこで使ってみたいのがざっくりAWSです。まさにざっくりと料金を知っておき...

None

  • 2019/09/17

Muscular !!! - 筋肉大好きな人のためのcowsay

最近、筋肉.ktや筋肉もくもく会など、筋トレやエクササイズと勉強会を組み合わせた異色の(?)コミュニティが人気です。IT系はとかく貧弱だと思われがちですが、世界最高レベルの握力の持ち主はIT業界の方

List

  • 2019/09/16

SingleFileZ - URLを一つのファイルにアーカイブ

Webサイトは運営側のタイミングで消すことができます。一度消されてしまったコンテンツは二度と戻ってこないので、Web魚拓のようなサービスでアーカイブしたりします。個人用途であればSingleFileZを使ってみるのもお勧めです。## SingleFileZの使い方HTMLファイルを保存した例です。画像も埋め込みになって...

List

  • 2019/09/15

SponsorBlock - YouTube動画のスポンサー部分をスキップ

YouTubeは無料サービスなので広告を使って収益をあげるのは分からないでもありません。しかし、動画の中に埋め込まれる宣伝部分に嫌気を感じる方も少なくありません。そこで使ってみたいのがSponsorBlockです。時間指定して動画をスキップする、そんなWebブラウザ機能拡張です。## SponsorBlockの使い方イ...

List

  • 2019/09/14

ForrestJS - ReactでSSR対応のPWAを開発

PWAはオフラインでも動作することが求められるので、クライアントサイドで表示内容を制御します。その結果、サーバサイドレンダリングは弱い傾向にあります。最近ではGoogleのクローラーがPWAでも動作するようになっていますが、サーバサイドレンダリングが不要な訳ではありません。そこで注目したいのがサーバサイドレンダリングを...

List

  • 2019/09/12

SlidesCodeHighlighter - ソースコードをスライドに貼り付ける際に

スライドに綺麗にシンタックスハイライトされたコードを使いたいと思ったことはないでしょうか。コードを画像にするのは格好悪いですし、普段自分がエディタで使っているハイライトではないものを使いたい場合はとても大変です。そこで使ってみたいのがSlidesCodeHighlighterです。ソースコードのハイライトに特化したソフ...

List

  • 2019/09/12

SnippetBin - バージョン管理を備えたスニペットサーバ

ちょっとしたコードを残しておきたいと思う機会は多いです。ローカルに保存しておいても良いですが、他の人と共有する場合はオンラインサービスを使います。社内で共有する場合は、オンラインサービスよりも社内でスニペットサーバを立てたいでしょう。今回紹介するSnippetBinはGitをバックエンドに備えたスニペットサービスです。...

List

  • 2019/09/11

pagemap - Webページにミニマップを追加

長大なコンテンツがある時、自分が今どの位置にあるのか知りたくなります。書籍であればページ数が書かれており、Webサイトであればページネーションを分けたりします。自分の現在位置が分かることで、後どれくらいのコンテンツが残されているか把握できるようになります。そんなミニマップをWebサイトに追加してくれるのがpagemap...