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

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

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

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

もっと見る

List

  • 2017/04/20

Grid Garden - CSS Grid Layout Moduleについて学べる学習ソフトウェア

CSSの使い方をちゃんと覚えるというのは大変です。しかも日々進化しており、新しいプロパティが追加されたりします。もちろんすぐに汎用的に使える訳ではありませんが、先進的なブラウザからどんどん導入が進んでいきます。放置しておくとあっという間に時代に取り残されてしまうでしょう。今回紹介するGrid GardenはCSS Gr...

List

  • 2017/04/19

BigPicture - YouTubeやVimeoにも対応した画像/動画表示ライブラリ

画像や動画は見せ方が大事です。単にリンクを貼って、クリックしたら画像だけが表示される…なんてのはよくありません。最近は画像の解像度が上がっているので、サムネイルと実際の写真とをうまく見せる必要があります。今回紹介するBigPictureはWebベースの画像、動画表示ライブラリになります。## BigPictureの使い...

List

  • 2017/04/17

nanogallery2 - 多彩な表示をサポートした写真ギャラリー

スマートフォンやデジカメによって写真コンテンツは爆発的に増加しています。しかしそうやって撮りためた写真も見せなければストレージの肥やしになってしまいます。単なる一覧ではよくありません。そこで使ってみたいのがnanogallery2です。クラウドサービスにも対応した写真ギャラリーです。## nanogallery2の使い...

List

  • 2017/04/17

Backgammon - Webベースのバックギャモン

バックギャモンというゲームを知っていますか。サイコロを振って、コマを自分の陣地まで移動させるゲームです。簡単なだけに奥が深く、非常にファンの多いゲームとなっています。そんなバックギャモンをWeb上で、コンピュータ相手に楽しめるのがBackgammonです。## Backgammonの使い方こちらがゲーム画面です。!

List

  • 2017/04/15

Chessboardjs - JavaScriptで制御できるWebチェスボード

チェスは将棋に並んで人気がある、全世界で楽しまれているゲームです。それだけにプレイヤーも国内だけでなく世界中に存在します。むしろ海外発祥なのもあり、レベルが高いのは海外の人たちになるでしょう。世界中の人たちとチェスを楽しもうと思ったらWebブラウザを使うのが一番手軽です。そんな時に使えるのがChessboardjsにな...

List

  • 2017/04/14

AsciiMath - テキストを数式に整形

学術的なものに限らず、Web上で数式を扱いたいと思うことは多々あります。Webの標準における表現力はとても乏しいので、括弧や^などを使った数式の組み立てではとても分かりづらいでしょう。そこで使ってみたいのがAsciiMathです。テキストベースの数式を見やすく整形してくれます。## AsciiMathの使い方デモです。...

List

  • 2017/04/13

Onion Packer - デザイナー向け。テクスチャ管理ソフトウェア

プログラマーであればスニペット、デザイナーであればよく使うデザインを手元に置いておくのは大事なことでしょう。一つのフォルダに入れておいても良いですが、もっと一覧で分かりやすく管理したいと思うでしょう。そこで使ってみたいのがOnion Packer、テクスチャデザイン管理です。## Onion Packerの使い方メイン...

List

  • 2017/04/10

jExcel - Webに埋め込んで使えるExcel風表計算

業務システムなどで一覧表を表示する場合、主に2パターンあると考えます。一つは画面全体に表示する検索結果的な画面、もう一つはマスター管理など小さな表を幾つか並べる場合です。今回紹介するjExcelはどちらかというと後者の、小さな表を埋め込み表示するのに便利なライブラリです。## jExcelの使い方こんな感じに表示できま...

List

  • 2017/04/08

Pomolectron - Electron製の常駐型ポモドーロタイマー

集中して作業を行うのにお勧めなのがポモドーロテクニックです。通常はキッチンタイマーを使って、25分間集中して作業します。様々な形態のポモドーロテクニックが存在し、スマートフォンアプリやデスクトップアプリ、Webベースなど多彩です。自分が使いやすいものを選ぶのがベストですが、今回はElectronベースのPomolect...

List

  • 2017/04/08

jQuery File Browser - Webベースのファイルブラウザ

ユーザ向けにストレージに開放しているサービスの場合、ファイル一覧やファイルを開くような機能を提供したいと思うでしょう。かといって使い勝手の良いインタフェースは難しく、ツリービューを使ったりします。もっとインタラクティブなファイル管理機能を提供したいならばjQuery File Browserを使ってみましょう。## j...

List

  • 2017/04/07

PDFAnno - WebベースのPDF注釈ツール

PDFは基本的に編集できないようになっているので、何か指摘したい時には注釈やコメントという手段になります。macOS標準のプレビューではPDFに注釈を付ける機能があったり、多くのソフトウェアにそういった機能があります。今回紹介するオープンソース・ソフトウェアはPDFAnno、WebベースのPDF注釈ソフトウェアです。#...

List

  • 2017/04/06

ts2c - JavaScript/TypeScriptのコードをCに変換

JavaScriptはWebブラウザで動作する保証がある唯一のプログラミング言語です。さらにnodeによってサーバサイドやデスクトップなどでもJavaScriptでソフトウェアが作れるようになっています。今回紹介するのはts2c、JavaScriptやTypeScriptをCのコードに変換するソフトウェアです。## t...

51925?type=list&url=http%3a%2f%2fimages.moongift.jp%2f2017%2f03%2fopen-source-frame+player-3.e52945e92d3ab47666a373fcf0a7d2c7

  • 2017/04/06

Frame Player - 画像を使った動画風プレイヤー

Web上で再生できる動画と言えばMPEG4やWebM、さらにアニメーションGIFがあげられます。基本的に流れている動画はそのまま使われ、制御できるのは再生や音量くらいとなっています。もっと細かく制御できる動画(のようなもの)を使いたい時にはFrame Playerを使うというテクニックがあります。## Frame Pl...

List

  • 2017/04/05

Konva - Canvas上で2Dを描くのに便利なライブラリ

HTML5の表現力を引き上げる技術にCanvasがあります。しかし使うこなすためには覚えるべきことがたくさんあります。DOMで作るようにCanvasは使えないのが難点です。しかしCanvas用のライブラリも多数存在します。今回はその一つ、Konvaを紹介します。2D向けのCanvas用ライブラリです。## Konvaの...

List

  • 2017/04/05

Contour - 多彩な種類に対応したWeb用グラフライブラリ

Webシステムを開発していてよく求められるのがグラフです。すでに多数のグラフライブラリがありますが、グラフの種類が物足りなかったり、使い勝手が良くない、デフォルトで生成されるグラフが作っているシステムに合わないなど様々な問題があります。そのため、まず多数のグラフライブラリを知っておくのが大切です。その中からニーズにあっ...

List

  • 2017/04/02

Pen - WYSIWYGなMarkdownエディタ

最近Dropbox Paperというサービスが気に入っています。特にMarkdown風の記法で、WYSIWYGに編集できるのが便利です。しかしオフラインで使えないのは大きな問題で、これが解決できると便利だと感じることでしょう。そこでWYSIWYGなMarkdownエディタを探しているのですが、その中で出会ったのがPen...

List

  • 2017/04/01

Alloy Editor - 多機能でWYSIWYGなMarkdownエディタ

Markdownは覚えやすい記法だと思いますが、それでも一定の書き方を覚えないと使いこなせません。そのため多くのMarkdownエディタでは2画面のプレビューがある(間違っていないかすぐに確認できる)ものとなっています。個人的には2画面があまり好きではないのでWYSIWYGなものがないかと思っていました。そこで出会った...

List

  • 2017/03/30

Wick - Webベースのアニメーション作成エンジン

かつてWeb向けにアニメーションを作るソフトウェアと言えばFlash CSが数多く使われてきました。現在ではAnimate CCを使っている人が多いのではないでしょうか。中にはAdobe製品は価格が高いので躊躇してしまっている方もいるかも知れません。そんな方に一度触ってみて欲しいのがWickです。ごく簡単な機能しかあり...

List

  • 2017/03/30

OpenPGP.js - JavaScriptで使えるOpenPGP

今、セキュアに情報を管理しようと思うと採用したいのが秘密鍵/公開鍵ではないでしょうか。ビット数によりますが、十分に長ければおいそれと解除されることはないでしょう。問題は一般ユーザに普及していないことです。もしWebサービスで導入したかったらOpenPGP.jsを使ってみてはいかがでしょう。JavaScript上でOpe...

List

  • 2017/03/28

HTML5 Bombergirl - HTML5製のボンバーマン

最近のゲームはやり方を覚えるまでにそれなりに時間がかかります。そのため、時間がない人は遊びたくともなかなかできません。その点、昔ながらの古典的ゲームであれば操作もシンプルですぐに遊べます。今回は昔懐かしいボンバーマンをWeb上で再現したHTML5 Bombergirlを紹介します。## HTML5 Bombergirl...