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

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

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

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

もっと見る

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...

List

  • 2019/09/09

speak.js - eSpeakからポーティングしたテキストtoスピーチ

テキストをコンピュータに喋らせる試みはずっと行われてきました。かつてはまさにコンピュータっぽい音声でしたが、今はSiriやAlexaなど、滑らかで人が喋っているような音声で読み上げできるようになっています。今回紹介するspeak.jsはどちらかと言えばコンピュータ音声です。特徴として、JavaScriptだけで実現して...

List

  • 2019/09/08

pokemonsay - ポケモン版cowsay

世の中には変なコマンドがたくさんありますが、その一つがcowsayではないでしょうか。適当な文字を牛のAAに喋らせることができる、ジョークコマンドです。なかなか使い道が思いつかないですが、人によっては活用していることでしょう。そんな中、より多くの人が使えるかも知れないコマンドがpokemonsayです。## pokem...

List

  • 2019/09/07

Unicopedia Plus - ユニコードや絵文字を調べる開発者用ツール

絵文字の登場によってユニコードが幅広く使われるようになりました。合字によって、肌の色を変えたり、年々絵文字の種類が増えています。また、アジア圏の文字では似ていても微妙に違う文字もあります。そんなユニコードの文字をチェックしたり、調べられるのがUnicopedia Plusです。## Unicopedia Plusの使い...

List

  • 2019/09/07

Back2stackoverflow - stackoverflow翻訳サイトから自動リダイレクトしてくれるユーザスクリプト

stackoverflowに助けられているという開発者は多いと思います。そしてプログラミングの困ったことで検索した時に、Stack Overflowの機械翻訳サイトが表示された経験を持つ方も多いのではないでしょうか。そんな方にお勧めなのがBack2stackoverflowです。stackoverflowの翻訳サイトか...

List

  • 2019/09/05

mc.js - Webブラウザで遊べるMinecraftクローン

Minecraftにハマっている人は大勢います。冒険するのはもちろん、クリエイティブモードで造形を楽しむのも面白いです。デスクトップ、タブレット、スマートフォンと様々なデバイスで遊べるのも魅力的です。今回紹介するmc.jsはWebブラウザ上で遊べるMinecraftクローンです。## mc.jsの使い方まずはユーザ登録...

List

  • 2019/08/31

svg2pdf.js - Webブラウザ上でSVGをPDF化

Webブラウザで表示している内容をPDFにしたいというニーズはよくあります。サーバ側でレンダリングして出力するのも良いですが、何かと面倒です。文字だけであればまだしも、画像をドローイングされた内容をPDF化するのはさらに大変です。そこで使ってみたいのがsvg2pdf.jsです。WebブラウザだけでSVGをPDF化します...

List

  • 2019/08/30

kthoom - Webベースのコミックビューワー

オンライン上にはたくさんのコンテンツがあります。しかし、それらを閲覧するためには専用のビューワーが必要です。ローカルアプリケーション型の場合、コンテンツをいちいちダウンロードするのが面倒です。そこで必要なのがWebベースのリーダーです。今回はコミックビューワーのkthoomを紹介します。## kthoomの使い方メイン...

List

  • 2019/08/30

Regex Colorizer - JavaScriptの正規表現をハイライト

正規表現はプログラマにとっても面倒なもので、間違えることがしばしばあります。プログラミングがエラーになるならまだしも、不具合につながったりすると目も当てられません。そこで使ってみたいのがRegex Colorizerです。正規表現をハイライト表示し、分かりやすく可視化してくれます。## Regex Colorizerの...

List

  • 2019/08/29

ga-cookie-opt-in-js - Google Analyticsのトラッキングを事前同意するサンプル

ヨーロッパでは個人情報に対する規律が厳しく、ちょっとした情報であっても事前同意が必要になります。そのため、ダイアログがしつこく出て面倒というイメージもありますが、それもユーザのプライバシーを守るためには必要な措置でしょう。Google Analyticsによるトラッキングもその一つです。事前同意を取る際に役立つサンプル...