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

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

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

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

もっと見る

List

  • 2017/08/17

Uppy - クラウドストレージも使える高機能なファイルアップローダー

HTML5は素のままではあまりUXは向上していません。APIを使って開発者自身で拡張しなければなりません。しかしその開発もそう簡単ではありません。そこですでに他の方が開発したものを積極的に使っていくのが良いでしょう。今回は多機能なファイルアップロード機能が手に入れられるUppyを紹介します。## Uppyの使い方利用し...

List

  • 2017/08/16

Particle - YouTubeをもっと便利にするブックマークレット

YouTubeをよく使う人ほど、あのUIに不満もあるでしょう。一昔前であれば与えられたもの以上のことは何もできなかったですが、今はユーザ自身の手でカスタマイズできるのです。今回紹介するParticleはそんなYouTubeのUIをより使いやすくしてくれるソフトウェアです。## Particleの使い方設定画面です。イン...

List

  • 2017/08/16

wordcloud2.js - JavaScriptでタグクラウドを生成

たくさんの文字が良い感じに詰め込んだ状態で並んだ状態がタグクラウドやワードルと呼ばれます。それを手作業で作成するという選択はまず考えられないでしょう。また、画像で作ってしまうと後からの更新が面倒です。そこで使ってみたいのがwordcloud2.jsです。与えられた文字列を良い感じに配置してくれます。## wordclo...

List

  • 2017/08/15

Terminal recorder - ターミナル操作を記録してHTML出力

自分のターミナル操作を記録したい時はないでしょうか。手順書を作る場合でも、ブログ記事を書くときにも考えられます。すべてテキストで書いていくのもいいですが、入力した内容がそのまま記録されるなら、これほど楽なことはないでしょう。Terminal recorderはそんな希望を叶えてくれるソフトウェアです。さらに結果はHTM...

None

  • 2017/08/14

mailit - メール送信をWeb APIで

メールをシステムに組み込むのは意外と面倒で、SMTP用のライブラリをついつい頼ってしまいます。さらに日本語問題やHTMLメール、添付ファイルなど様々な用途があります。それをシンプルに解決してくれそうなのがmailitです。メール送信をシンプルなREST APIで提供してくれます。## mailitの使い方mailitは...

List

  • 2017/08/13

BorderColorAnimate - 枠線をアニメーションさせるjQueryプラグイン

ユーザのアクションに対して反応することで、相手のストレスを軽減できます。特にAjaxを使うSPAなどでは通信状態を適切に表示しておくのが大事です。何の反応もなかったら、ユーザは何度もボタンを押してしまうでしょう。一例として紹介したいのがBorderColorAnimateです。枠をアニメーションさせるという面白い方法で...

List

  • 2017/08/13

Space Invaders - プログラミング学習に使えるHTML5ゲーム

プログラミングを学習する上で良い題材があるとスムーズです。特に自分が作りたいものに合っていると、そのカスタマイズができたり、より学習意欲が高まるはずです。今回はWebブラウザ上でゲームを作る際の学習教材になるSpace Invadersを紹介します。## Space Invadersの使い方スペースキーを押すと開始しま...

List

  • 2017/08/12

JS-XLSX - Web上でExcelファイルを読み書き

なんだかんだ言ってもシステム開発においてExcelファイルはよく使われます。しかしサーバサイドでExcelファイルを生成したり、読み取ったりするライブラリをインストールするのは嫌なものでしょう。そこで使ってみたいのがJS-XLSXです。WebブラウザベースでExcelファイルの読み書きができます。## JS-XLSXの...

List

  • 2017/08/10

Alchemy - 画像をPDFに変換する常駐アプリ

画像をPDFに変換したいと考える時があるかも知れません。そんな時、画像を開いて印刷機能の一部で提供されるPDF変換を使ったり、PDFにしてくれるプリンタドライバを利用します。しかしこれは手間です。そこで使ってみたいのがAlchemyです。メニューバーに常駐するPDFコンバータです。## Alchemyの使い方常駐してい...

List

  • 2017/08/09

Google Pacman - 今でも遊べるGoogle製パックマン

かつてGoogleが作成し、世界中の生産性を低下させたのがWebベースのパックマンです。パックマンの○周年を記念して作られたものですが、みんながこぞってチャレンジし続けました。そんなパックマンを今でも遊びたい方がいるならばGoogle Pacmanにトライしてみましょう。## Google Pacmanの使い方メイン画...

List

  • 2017/08/08

Skypad - Skygearを使ったリアルタイムコラボレーションエディタ

Webアプリケーションに魅力を加えてくれるのがリアルタイムコラボレーションです。遠く離れた人と一つのデータを同期して作成、編集して一気に作品を創り出していけます。しかし技術的に難関な部分も多いです。それを簡単に解決してくれるのがSkygear

List

  • 2017/08/07

AniJS - 効果的なアニメーションとUIコンポーネント集

最近はWebデザインと言っても静的なものだけでなく、クリックやマウスオーバー時などのイベントに基づくアニメーションなども必要になっています。それによって一歩先行くデザインに仕上がります。しかしアニメーションはちょっとした違和感などで台無しになってしまう可能性も秘めています。今回はそんな失敗を防ぐべく、AniJSを紹介し...

List

  • 2017/08/06

VideoEditorJS - Webベースの動画編集

Webブラウザ上でできることがどんどん増えています。さらにローカルアプリケーションではあるものの、ElectronのようにWeb技術で動くソフトウェアがあったり、Cordovaのようにスマートフォンアプリも作れます。今回紹介するVideoEditorJSはWebブラウザ上でビデオの編集ができてしまうソフトウェアです。#...

List

  • 2017/08/06

iPhone Inline Video - iPhone上で動画を埋め込み再生

iPhoneで動画を再生すると自動的にフルスクリーンになってしまいます。アプリでは最初はインライン再生できるものも出てきています。これらは独自に実装しているケースです。Web上でも同じようにインライン再生できるようにするライブラリがiPhone Inline Videoです。## iPhone Inline Video...

List

  • 2017/08/04

Mesh - 表データからJavaScriptコードを生成

JavaScriptのコードはコールバックが多かったり、処理した結果を関数で受け取ったりするので分かりづらいと感じるようです。もっと構造を分かりやすく分解して欲しいと思う方もいるでしょう。そこで使ってみたいのがMeshです。JavaScriptのコードを表計算の形で表現してくれる…何を言っているかよく分からないかも知れ...

List

  • 2017/08/04

cgmd-browser - Markdownに注釈を入れる

Markdownが開発者の間でデファクトのフォーマットになってきています。そうやって広まっていく中では、周辺ツールも充実してきます。今回はアノテーション、注釈に注目します。Markdownでもワードプロセッサのように文書に対してコメントしたいと考える時があるでしょう。そんな時に使えるのがcgmd-browserです。#...

List

  • 2017/08/03

DoppioJVM - JavaScriptで作られたJavaVM

JavaといえばかつてはWebブラウザ上でも動いていました。Javaアプレットと呼ばれる技術で、とんでもなく遅かったり、セキュリティホールになったりと悩みの多かった存在ではないでしょうか。HTML5になり、プラグインが軒並みなくなっていく中でJavaアプレットも動く機会がなくなっています。そんな中、安全にJavaが実行...

List

  • 2017/08/03

Decktape - HTMLプレゼンテーションをPDF化

HTMLでスライドを作成する方が増えています。スライドをWeb上にアップロードするだけで閲覧できる便利さは良いのですが、多くのスライド共有サイトではHTMLには対応していません。そこで使ってみたいのがDecktapeです。多数のHTMLスライドに対応したPDF変換ソフトウェアです。## Decktapeの使い方後は以下...

List

  • 2017/08/02

Paradeiser - ハンバーガーメニューに代わるモバイル向けメニュー表示

モバイル向けのWebサイトではメニュー表示にハンバーガーメニューがよく使われます。しかし、実際のところハンバーガーメニューが一般的に分かりやすいわけでもありません。むしろタップして何が出るのか分からず躊躇してしまう人が多いでしょう。そこで使ってみたいのがParadeiserです。ハンバーガーメニューに変わるメニュー機能...

List

  • 2017/08/02

Chameleon.js - 画像からカラーパターンをピックアップ

Webサイトのデザインを考える上で色彩は重要なパーツです。それだけに慎重に選ばざるを得ません。同系色でまとめれば良いという訳でもなく、一見すると合わないような色合いでも意外とマッチするケースもあります。そんなカラーパターンを既存の画像からピックアップしてくれるのがChameleon.jsです。## Chameleon....