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

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

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

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

もっと見る

List

  • 2017/04/28

mdpdf - スタイル設定が指定できるMarkdown to PDF

MarkdownはHTMLだけでなく、他のフォーマットに展開する際にも使える便利な記法です。よくあるのはPDFではないでしょうか。しかし殆ど装飾も行われないシンプルなPDFなので、業務や報告書で使うのはちょっと躊躇してしまいます。そこで使ってみたいのがmdpdfです。スタイル設定などが可能なMarkdownからPDFへ...

List

  • 2017/04/24

Offline Wikipedia - オフラインでも読めるWikipediaビューワー

Wikipediaは情報の宝庫です。読んでいるとついつい時間を忘れてしまうくらいです。そんなWikipediaだからこそ、オフラインな時はとても不便な思いをするかも知れません。先ほど見た情報を確認したいと思うことも多いのではないでしょうか。Wikipediaのオフラインでの閲覧を可能にするのがOffline Wikip...

List

  • 2017/04/23

Planck.js - JavaScript製、2D用物理エンジン

Web向けにゲームを作ったり、ユーザの操作に合わせてオブジェクトが動くようにしたりするのに必要になるのが物理エンジンです。単に横滑りするのではなく、他のオブジェクトや重力の影響を計算することでよりリアルなゲームになります。そこで使えるのがPlanck.jsです。2D向けの物理エンジンです。## Planck.jsの使い...

List

  • 2017/04/21

pocketplace - Canvasの内容を同期

HTML5のCanvasを使えばお絵かきボードのようなイラストを描ける環境を作ることができます。とは言え自分でイチから作るのは大変です。Canvasは通常のDOMと違い、描画や消したりする方法が全く異なります。そんなCanvasをシェアする方法を手軽に実装できるのがpocketplaceです。## pocketplac...

List

  • 2017/04/21

across-tabs - クロスオリジンをサポートしたタブ間通信ライブラリ

Webシステムを開発していて、ボタンを押したりリンクをクリックしたらタブが開くようにすることは多々あります。しかし無尽蔵に開いてしまうとメモリを食いますし、ユーザに嫌がられます。そこで使ってみたいのがacross-tabsです。タブ同士の通信を可能にするライブラリです。## across-tabsの使い方新しいタブを開...

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