プログラミング言語 - JavaScriptの記事一覧
Userbase - 静的サイト向けのBaaS
Netlifyをはじめ、静的なWebサイトシステムが人気です。しかしすべて完全に静的ではなく、一部に動的な機能（コメントや認証など）を追加したいと考えることもあるでしょう。一部を動的にするためにすべてをサーバサイドで開発するのは面倒です。そこで使ってみたいのがUserbaseです。静的サイトにも動的機能を追加できるバッ...
Pullp - Githubのプルリクエストをモニタリング
GitHubでプルリクエストが来るとメールが来ます。しかし、普段の仕事がチャットツールに移っている現在、なかなかメールを見なかったり、一度放置したメールを見返す機会がなくなっています。そこで使ってみたいのがPullpです。プルリクエストの監視に特化したソフトウェアです。## Pullpの使い方最初に監視するリポジトリを...
TuneIn - 新しい音楽と出会える音楽プレイヤー
20年以上昔はCD屋にいって探し回ることで新しい楽曲との出会いがありました。今はYouTubeなどで探すこともできますが、レコメンドエンジンは類似したものを紹介するので、自分ではまったく知らなかった音楽と出会うことは多くないように感じます。そこで使ってみたいのがTuneInです。新しい音楽を見つけられる、そんなWebサ...
rÊg - 数字を並べる対戦型パズルゲーム
世の中にはゲームがたくさんありますが、個人的には複雑なものよりもパズルのようなシンプルなものが好きです。自分でじっくり考えるのもいいですが、対戦式も好きです。ルールがシンプルであればすぐに覚えて遊べるので特に楽しいです。今回紹介するrÊgは数字を並べる対戦型パズルゲームです。## rÊgの使い方数字を順番に並べていきま...
Locomotive Scroll - マルチプラットフォームで動作するパララックス・エフェクトライブラリ
パララックス・エフェクトを使うと、インパクトのある表現が実現します。Webページは縦長のサイトが多いので、スクロールで見た目のインパクトが与えられればユーザの目を引きつけられるでしょう。今回紹介するLocomotive Scrollはパララックス・エフェクトとDOMの表示されるタイミングを合わせたスクロールライブラリで...
Web Video Capture - Webブラウザでスクリーンキャプチャ
HTML5のAPIはどんどん追加されており、多くの機能がWebブラウザ上で実現できるようになっています。例えばWebカメラを使ったチャットの最中に、自分のデスクトップやアプリケーションの画面を共有することもできます。今回紹介するWeb Video Captureは画面をキャプチャし、動画として保存するデモです。## W...
MMDLoader-app - THREE.MMDLoaderを使ったMMDサンプル集
3Dモデルによるアニメーション、ダンスなどを行うフォーマットとして有名なのがMMD（MikuMikuDance）です。同名ソフトウェアで作ったデータを読み込めばWeb上でのMMDを動かせます。そのためのライブラリがMMDLoaderです。今回紹介するMMDLoader-appは、そんなMMDLoaderを利用するThr...
jsurl - JSONをURLフレンドリーに変換
JSONをWebアプリケーションではよく使います。しかし、JSONで使われている記号（波括弧やカギ括弧など）はURLに使うことができず、エンコードしなければなりません。その結果、URLで使うとURLが長くなってしまいます。そこで作られたのがjsurlです。JSONをURLセーフにし、なるべく短い文字列にします。## j...
Full Page Screen Capture - Webページ全体のスクリーンショットを撮影
スクリーンショットで保存できるのは今見ている情報に限られます。Webページの場合、縦長なことが多いので、見えていない部分も含めてスクリーンショットを撮りたいと思うでしょう。そういったソフトウェアもたくさんあります。今回紹介するFull Page Screen CaptureはGoogle Chrome用の機能拡張として...
Jira clone - React製のJiraクローン
JiraといえばAtlassian社が提供している課題管理、プロジェクト管理になります。大規模な開発をサポートし、企業規模の大きなところで使われているイメージがあります。他のAtlassian製のサービスと連携できるのも強みです。そんなJiraのクローンを目指すのがJira cloneです。新しいテクノロジーを使ったモ...
Keys - Safariでキーボードブラウジングを可能に
Webブラウジングはキーボードから手を離すことが多いので、一旦Webサイトを見出すとついつい時間を忘れてマウスを動かし続けてしまったりします。これは開発生産性を大いに下げる行為です。そこで使ってみたいのがキーボードブラウジングをサポートしてくれるソフトウェアです。あなたのメインブラウザがSafariであれば、Keysを...
commuter - 多彩なフォーマットに対応したノートビューワー
メモ的に使えるサービスは多数あります。有名なところではMarkdown記法が使えるメモアプリがありますが、Jupyter Notebookのように目的が特化したメモもあります。それらを目的によって使い分けていると、どこに必要な情報があったのか分からなくなります。そこで使ってみたいのがcommuterです。様々な記法に対...
Free email template builder - HTMLメールをビジュアル的に作成
HTMLメールを作成する方法は幾つかあります。Webブラウザで表示するHTMLと基本的には変わりませんが、JavaScriptや外部ファイルが使えないと言った違いはあります。メールアプリケーションによって表示が多少異なるので、その点も注意が必要です。そこで使ってみたいのがFree email template buil...
Manifest - ぜひ触って欲しいグリッドベースのピンボード
Web上でドローイングをしたり、付箋紙を作成できるサービスがありますが、多くがピクセル単位で自由に描けるようになっています。自由なのはいいのですが、厳密に書こうとしてしまって、余計な時間がかかります。同じような気持ちになったことがあれば、ぜひ試して欲しいのがManifestです。グリッドに沿って描かれるのが気持ちいいピ...
Compressor.js - Web上で画像を圧縮
スマートフォンやデジカメが高性能化し、作成される写真のサイズがどんどん大きくなっています。数MBで済めばいいほうで、場合によっては10MBを超える場合もあるでしょう。そうした写真を受け取る側のサービスもネットワークが逼迫してしまいます。そこで使ってみたいのがCompressor.jsです。画像をJavaScriptで圧...
Markmap - Markdownファイルをマインドマップ化
Markdown記法は開発者の間で幅広く使われるようになっています。基本はドキュメントを書くために使われていますが、構造がシンプルな分、解析することで他の目的でも使えます。今回はその一つ、Markmapを紹介します。Markdown記法をマインドマップに変換するソフトウェアです。## Markmapの使い方デモです。!
DiagramFlowJS - Web上でフローチャートを描くJavaScriptライブラリ
Web上でフローチャートを描いたり、図を描く際にはどんなツールを使っているでしょうか。各ノードを連結させたり、連結後に動かしてもちゃんと線が繋がったままになっているツールを選ぶのがいいでしょう。今回紹介するDiagramFlowJSはそんな図を作るのに使えるソフトウェアです。## DiagramFlowJSの使い方多く...
JsBattle - 対戦ゲームを通じてプログラミングを学ぶ
プログラミングを覚えるのにゲーミフィケーションを取り入れるのはいいアイディアです。ただひたすらに写経しながら覚えるのは忍耐力が必要ですし、目的があった方がモチベーションが維持しやすいでしょう。今回紹介するJsBattleはJavaScriptをゲームを通して学べるソフトウェアです。## JsBattleの使い方トップペ...
mute.vc - VCな人たちをまとめてミュート
Twitterにはブロックではなくミュート機能というのもあります。ブロックするほどではないけれど、ツイートを見たくないという時に使える機能です。せっかくTwitterを楽しんでいるのに、見たくないツイートで残念な気分になるのは避けたいものです。今回紹介するmute.vcはいわゆるVC（ベンチャーキャピタル）に関わる人た...
The Aviator - 飛行機を飛ばし続ける3Dゲーム
ゲームを作ってみたいと思っている方は多いでしょう。凝ったゲームを作るのは時間も技術も必要になりますが、簡易的なものを作って徐々にステップアップしていくこともできます。今回紹介するThe Aviatorはそんなステップを歩んで作られた3Dゲームです。## The Aviatorの使い方ゲーム画面です。!