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

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

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

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

もっと見る

List

  • 2017/11/07

Temporalis - Webカメラの映像をスライスして描画

Webカメラの映像はHTMLからgetUserMediaで取り込むことができます。そのままvideoタグに当てはめたり、一部だけ切り出してCanvasや画像のソースに当てることも可能です。しかし見たまま使っても面白くありません。そこで一例としてTemporalisを紹介します。Webカメラの映像に面白い効果を施してくれ...

List

  • 2017/11/06

Mini Tetris - わずか506バイトのテトリス

25年以上前のコンピュータであれば、メモリやHDDの容量が少なかったため、なるべく節約したコーディングが心がけられていました。しかしそれから何年も経ち、変数名の長さをいちいち気にするような人はいないでしょう。しかしそんな時代だからこそ、サイズにこだわる面白さがあると言えます。Mini Tetrisはなんと506バイトの...

List

  • 2017/11/05

Nat.js - Vue/Weexで使えるモバイルフレームワーク

JavaScriptでスマートフォンアプリを作る、一つのコードでiOS/Android両方に対応するという夢に挑戦する人たちは後を絶ちません。かつてのTitaniumであり、現在のReact Nativeでもあります。そして今回はもう一つの存在、Nat.jsを紹介します。こちらはVueやWeexなどで使えるライブラリ集...

List

  • 2017/11/04

KEditor - 複雑なデザインもこなせるWYSIWYGエディタ

技術者以外の方でWebページを作成する時にはオーサリングツールを使うのが一般的です。また、ちょっとしたコンテンツの修正であればWYSIWYGエディタを使いますが、あまり凝ったデザインには対応できません。そこで使ってみたいのがKEditorです。Webベース、ドラッグ&ドロップで自在にコンテンツを作成できます。## KE...

List

  • 2017/11/02

livepython - Pythonのコードを一行ずつ実行

複雑なプログラムになると、どこからどこへ飛んでいるのか分からなくなることがあります。そうした時に一行ずつステップ実行するというのはよくあります。しかし自分だけであれば良いですが、人に説明する時には不向きです。もしPythonのコードを説明するのであれば使ってみたいのがlivepythonです。まるで動画のようにコードを...

List

  • 2017/11/02

SlackOff - Slackにインスパイアされたライブチャット

チャットといえばSlackというくらい、デファクトになりつつあります。しかし、コミュニケーションという領域においては別なニーズもあります。例えばSlackではユーザ登録が必須ですが、ゲストとしてさくっと会話したいケースもあるでしょう。そんな時に使えるのがSlackOffです。SlackのUIにインスパイアされたライブチ...

List

  • 2017/11/01

Lottery - 何が当たるかな。Webベースの抽選マシーン

みんな大好き抽選会。何かいいものが当たらないかとわくわくしながら待っていることでしょう。主催者側にとっては、そのワクワク感をさらに盛り上げるための工夫が必要になります。今回はLotteryを紹介します。見た目の演出も楽しい、抽選マシーンです。## Lotteryの使い方実際に動いているところです。!

List

  • 2017/10/30

hls.js - JavaScript製のHTTP Live Streamingクライアント

Appleがキーノートなどの配信に使っているのがHTTP Live Streamingと言われるプロトコルです。特別なプロトコルではなく、HTTPを使っているのがメリットですが、サポートしているブラウザがSafariくらいというのが難点です。そこで使ってみたいのがhls.jsです。JavaScriptで作られたHTTP...

List

  • 2017/10/29

Min - 軽量で高速なWebブラウザ

WebブラウザのレンダリングエンジンとしてはWebKitが最も有力になっている一方、ガワの部分は多彩なブラウザが出てきています。Google ChromeやSafariでは満足しない人たちが多いのでしょう。今回はその一つ、MinというWebブラウザを紹介します。軽量で高速なWebブラウザです。## Minの使い方こちら...

List

  • 2017/10/28

Firefox Send - Mozilla製のセキュアなファイル共有

最近はプライベートでメールをあまり使うことがありません。チャットなどでメッセージをやり取りすることが多いですが、ファイルの送信で困ることがあります。サイズ制限や送れるファイルの種類に制限があると面倒です。そこで使ってみたいのがファイル共有サービスになります。今回はMozillaの開発しているFirefox Sendを紹...

List

  • 2017/10/27

Smooth Scrollbar - スムーズなスクロールの制御

Webページは大抵縦長になっています。そしてマウスなどのスクロールを使って下の情報を表示します。つまりスクロールという機能はブラウジングの基本とさえ言えるでしょう。そんなスクロールを標準のまま使うのではなく、もっと細かく制御できるのがSmooth Scrollbarです。## Smooth Scrollbarの使い方様...

List

  • 2017/10/26

favicon-emoji - 絵文字をFavicon化

Faviconを何か設定しないとと思いつつ、絵の才能があるわけでもないので思いつかない…といった方は多いかと思います。適当な画像をあてはめても良いですが、面白くないでしょう。そこで使ってみたいのがfavicon-emojiです。絵文字をFaviconとして出力できます。## favicon-emojiの使い方コマンドは...

List

  • 2017/10/26

bubbly-bg - 背景でバブルが動くアニメーション

Webは雑誌や新聞などと異なり、ダイナミックに動かせるのが魅力です。さらにテレビと異なり、ユーザの操作によって表示を変化させられます。動画サイトなどだけでなく、普通のWebサイトだってできるのです。そんな特徴を活かしたのがbubbly-bgです。背景にバブルを表示し、アニメーションさせます。## bubbly-bgの使...

List

  • 2017/10/25

Ao - ElectronでMicrosoft To-Doをデスクトップアプリ化

MicrosoftではMicrosoft To-Do

List

  • 2017/10/24

tusk - Web版Evernoteに機能を追加してデスクトップアプリ化

Evernoteは便利なメモサービスなのですが、デスクトップクライアントが重たすぎて使わなくなってしまいました。今であればWeb版が十分に使いやすくなっているので、Webブラウザで使う方が手軽かも知れません。そこでWeb版をベースにちょっとした機能を追加してくれる非公式クライアントのtuskが便利そうです。## tus...

List

  • 2017/10/24

scrollToClip - スクロールで画像の色彩を反転

JavaScriptやCSS3によってWebの表現力は向上しています。例えばスクロールによって表示が変化するパララックスエフェクトもその一つです。スクロールによってコンテンツが変化するのは見た目のインパクトも強いです。今回はスクロールによって色彩を変化させるscrollToClipを紹介します。## scrollToC...

List

  • 2017/10/23

nezumi - Google Chromeのフォーム入力からCapybara/RSpec対応のテストコードを生成

テストコードを書くのは面倒です。特にWebブラウザの表示を再現するような類のものは面倒に感じるでしょう。面倒だとどうしても記述が疎かになったり、テストが不十分になったりします。そこで使ってみたいのがnezumiです。Google Chromeの入力内容からCapybara/RSpec対応のテストコードを生成します。##...

List

  • 2017/10/22

AutoRest - OpenAPI Specificationから各種プログラミング言語向けSDKを生成

OpenAPI Specification(旧Swagger)の定義ファイルはドキュメントを生成するのによく使われます。しかし、それだけではなく他にも様々な使い道があります。例えばテストやバリデーションです。さらにAutoRestを使えば各種プログラミング言語向けにSDKを生成してくれます。これは見逃せない機能でしょう...

List

  • 2017/10/22

Etcher - 3ステップで簡単にイメージ書き込み

イメージファイルをダウンロードして、それをSDカードやUSBドライブに展開する操作は意外と面倒です。macOSやLinuxであればddを使いますが、毎回コマンドを忘れて調べたりします。Windowsでは専用のソフトウェアを手に入れる必要があります。そこで使ってみたいのがEtcherです。Electron製でマルチプラッ...

List

  • 2017/10/21

AR.js - Webブラウザ向けのAR

iOS11のMobile SafariからようやくgetUserMediaが使えるようになりました。これによってSafariからもカメラにアクセスできるようになり、Webカメラのように動かせるようになります。そしてその恩恵を大きく受けそうなプロジェクトがAR.jsです。Webブラウザ向けのARライブラリです。## AR...