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

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

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

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

もっと見る

List

  • 2017/11/25

tlx-editor - フォーム入力に特化したWeb components

Web componentsは多くの可能性を持っています。Web標準ではまだまだ貧弱なUIも、Web componentsを使うことでリッチであったり、複雑なUIコンポーネントが生まれていくことでしょう。今回紹介するtlx-editorはその一例です。入力系コンポーネントを一手に提供するライブラリになります。## tl...

List

  • 2017/11/24

permission.site - HTML5 APIの実装を確認する

HTML5によって多数のAPIが追加されています。それらはすべてのブラウザで使える訳ではなく、まだまだ実装に差異があります。それをチェックできるCan I use

List

  • 2017/11/23

Fengari - JavaScript製。Webブラウザ上で動くLua

JavaScriptはWebブラウザ上で動作することが保証されている唯一のプログラミング言語ですが、好きではないという人も多いようです。プログラミング言語の選択肢はもっと幅広く存在して良いはずです。Webブラウザ上であってもLuaを書きたい、という方はFengariを使ってみてはいかがでしょう。## Fengariの使...

List

  • 2017/11/23

tikzcd-editor - Web上で可換図式を描く

Webの表現力はCanvasやSVGによって大きく広がっています。しかし、それらを使いこなすにはプログラミングを駆使する必要があります。例えば、ちょっとした数式を埋め込むダメにプログラミングを行うのは面倒です。そこで使ってみたいのが外部ライブラリです。今回は可換図式をWebベースで実現するtikzcd-editorを紹...

List

  • 2017/11/22

ajsr-confirm - 豪華な確認ダイアログ

Webを作成する際にはWebブラウザが用意している標準のコンポーネントがよく使われます。しかし、その表示では満足できない人が多いのも確かです。そこでより使い勝手の良いデザインを追求し始めます。今回はダイアログです。独自のダイアログを出したいと思ったらajsr-confirmを参考にしてみてください。## ajsr-co...

List

  • 2017/11/19

Standard Notes - Evernote風なメモソフトウェア

メモを書く機会は予想以上に多いです。問題はそうしたメモを時にテキストファイル、時に付箋紙、時にA4用紙といった具合に散在させてしまうことです。メモは一箇所にまとめておいてこそ、価値が出ます。今回紹介するStandard NotesはEvernote風のメモソフトウェアです。## Standard Notesの使い方3ペ...

Missing

  • 2017/11/19

wast-game - 弾幕ゲーム好きはトライ!

シューティングゲームの中でも弾幕系はそれだけで別ジャンルと言えるほど激しいゲームです。ピクセル単位での細かい操作が求められ、ほんの少しのミスが命取りになります。そんな弾幕系シューティングゲームをWeb上で実現してくれるのがwast-gameになります。## wast-gameの使い方実際に遊んでいるところです。!

List

  • 2017/11/18

Frappe Charts - GitHub風グラフもあるSVGグラフライブラリ

WebはSVG/CanvasによってWeb標準だけで高度な表現が実現できるようになりました。しかし、それを使いこなすのは大変で、多くの場合ライブラリを使って実現しているでしょう。今回紹介するFrappe ChartsはSVGを使ってグラフ表示を行うライブラリです。## Frappe Chartsの使い方棒グラフ。マウス...

List

  • 2017/11/18

Zircle - サークル型のズームUIを実現

一度にすべての情報を見せてしまうと、本当に伝えたいことが伝わらないと言ったことがよくあります。人の脳は一度に処理できる情報量に限度があるので、それを超えてしまうとフィルタリングしてしまったり、抜け落ちたりします。そこで使えるのがドリルダウンしていく方法です。今回は円形のズームするUI、Zircleを紹介します。## Z...

List

  • 2017/11/16

HEML - HTMLメール用のサブセット記法

日本はかつてテキストメールばかり使われていましたが、ようやくHTMLメールが普及してきています。セキュリティ上の懸念も殆どなくなり、カラフルだったり装飾ができるというメリットに注目が集まっています。そんなHTMLメールをすべてのデバイスに適切に配信できる形にしてくれる、それがHEMLです。## HEMLの使い方HEML...

List

  • 2017/11/15

moziplayer - 動画/Webカメラの映像をアスキーアート化

videoタグを使えばWeb上で動画をそのまま再生するなんて簡単にできます。そんな簡単にできることをただやるだけでは面白くありません。その映像をリアルタイムに加工するのが面白いのです。そこで使ってみたいのがmoziplayerです。動画やWebカメラの映像をテキストアート化します。## moziplayerの使い方変換...

List

  • 2017/11/14

JSRobot - JavaScriptでロボットを操作

最近は子供向けのプログラミング学習が人気です。Sketchのようなビジュアルプログラミング言語が人気ですが、自由にプログラミングをはじめようと思うと物足りなく感じるでしょう。そこで次の段階としてJSRobotを紹介します。ロボット操作を通じてJavaScriptを学べます。## JSRobotの使い方開始します。!

List

  • 2017/11/13

Browser homepage - クールなホームページ

ブラウザではホームページの設定ができます。Webサイトのことを意味するホームページではなく、Webブラウザを一番最初に開いた時のページです。ポータルサイトにしていたり、企業であればグループウェアのトップページにしているかも知れません。今回紹介するオープンソース・ソフトウェアはBrowser homepage、個人向けの...

List

  • 2017/11/12

jquery-fulltable - jQueryで任意のテーブルを便利に

業務システムなどでよく使われるテーブルタグ。素のままでは小さなテーブルはよくとも、多数のデータを表示した際の使い勝手がよくありません。かといって多機能にするのは大変です。そこで使ってみたいのがjquery-fulltableです。任意のテーブルをjQueryで多機能にします。## jquery-fulltableの使い...

List

  • 2017/11/10

EVADE AND DESTROY - HTML5製。デスクトップとスマートフォン両方対応のシューティングゲーム

HTML5の表現力、JavaScriptの性能向上があり、Webブラウザでも十分なゲームが作れるようになっています。Webベースであれば、デスクトップはもちろん、スマートフォンでも遊べます。今回はシューティングゲームのEVADE AND DESTROYを紹介します。シンプルな操作で楽しめるはずです。## EVADE A...

List

  • 2017/11/10

musicvideo-generator - ミュージックビデオを自動生成

音楽は耳で楽しむものですが、ミュージックビデオのように目でも楽しめます。ビジュアライザーのように格好良く可視化されていたり、アルバムアートなどが表示されることでさらに魅力的になります。そんなミュージックビデオを自動生成してくれるのがmusicvideo-generatorです。## musicvideo-generat...

List

  • 2017/11/09

Writing - WebベースのMarkdown + LaTeXエディタ

Markdownは便利な記法ですが、物足りないと感じることもあります。その一つとして数式の埋め込みをあげる人もいるでしょう。専用の記法で対応するソフトウェアもありますが、もっと汎用的な方が使い勝手は良いはずです。そこで紹介したいのがWritingです。Markdown記法での記述に加え、LaTeXも使えるエディタです。...

List

  • 2017/11/08

FollowCursor - マウスカーソルに合わせてDOMを変形

WebはJavaScriptを活用することでインタラクティブな効果が実現できます。ユーザにとってみれば、自分の起こしたアクションに対して反応があるのは嬉しいことです。ユーザ体験という意味でも見逃せません。今回はユーザのマウス操作を追従してくれるFollowCursorを紹介します。DOMの形をマウスに合わせて変更できま...

List

  • 2017/11/07

accessibilityjs - JavaScriptでできるアクセシビリティチェック

Webが広くあまねく使われるようになったことで、アクセシビリティが重要視されるようになっています。スクリーンリーダー的なものにきっちりと対応するのも大事ですが、altやtitle要素を追加すると言った簡易的な対応もできます。今回はJavaScriptでできるアクセシビリティチェック、accessibilityjsを紹介...

List

  • 2017/11/07

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

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