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

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

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

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

もっと見る

List

  • 2016/12/26

Polr - 独自に立てる短縮URLサービス

短縮URLサービスは多数存在します。元々はTwitterなど文字数制限があるサイトで使われることが多かったですが、今ではチャットでシェアするのに使ったり、URLを入力しやすくするためにも使われます。そんな短縮URLサービスを自分で立ち上げたいならばPolrを使ってみてはいかがでしょうか。## Polrの使い方デモです。...

List

  • 2016/12/25

Native Javascript for Bootstrap - jQuery非依存のBootstrap用JavaScript

Bootstrapを使っているプログラマーは多いと思いますが、大きな不満の一つにBootstrapのJavaScriptはjQueryが必須であるという点があります。先進的なデザインフレームワークを使っているのに、今なおjQueryを使い続けなければならないのが苦痛です。そこで使ってみたいのがNative Javasc...

List

  • 2016/12/23

viewScroller.js - スムーズなコンテンツ切り替えライブラリ

Webは情報がURLごとに区切られるのが基本で、そのためページが切り替わる度に頭がリフレッシュしてしまいます。その結果、離脱してしまったり前後関係がうまく伝わらなかったりします。そうならないためには情報の連続性が大事になります。今回はそれに使えそうなviewScroller.jsを紹介します。## viewScroll...

List

  • 2016/12/21

Quick Tetris - Web製ですぐに遊べるテトリス

テトリスは永遠です。誰でもすぐに遊び方が覚えられる上、中毒性があります。遊び手としてもちろん面白いのですが、開発者として見るとどうでしょうか。実際処理としてはもの凄く難しい訳ではなさそうです。作ろうと思ったら作れそうな気がしませんか。そこで参考にしたいのがQuick Tetrisです。Webベースで動くテトリスです。#...

List

  • 2016/12/21

Islands - 自然な形の島を生成

自然物をコンピュータ上で再現するというのは意外と難しいものです。リアルの世界では一定の法則がありそうでない(またはあるのかも)仕組みに沿って物が形成されます。樹木であったり、雲の形などはよくある例です。その一つとして陸の形があります。陸の形は波風によって浸食され、火山や地震によって隆起したり逆になくなったりします。そん...

List

  • 2016/12/20

Power Touch - スマートフォンを拡張キーボードとして使う

TouchBarはその部分自体が小さなコンピュータになっており、本体とは切り離された存在です。その可能性として、二つのコンピュータを組み合わせた利用法が考えられます。タッチを通じてメッセージを飛ばし合うことで面白い処理ができるようになるかも知れません。そんなTouchBarにインスパイアされて作られたのがPower T...

List

  • 2016/12/16

ZangoDB - IndexedDBをMongoDB風に操作

HTML5ではKVSとして IndexedDBという機能が提供されています。localStorageなどよりも多くの情報を保存したり、検索したりすることもできるので便利に使えます。しかし使い方を覚えるのが若干面倒です。そこで使ってみたいのがZangoDBです。IndexedDBをMongoDB風のAPIで操作できるよう...

List

  • 2016/12/15

md2googleslides - MarkdownファイルをGoogleスライドに変換

最近、Markdownファイルで作成してHTMLプレゼンに展開するソフトウェアが増えています。便利なのですが、ちょっとしたアニメーションを追加したいなど既存のプレゼンソフトウェアで最後の仕上げをしたいこともあるでしょう。そこで使ってみたいのがmd2googleslidesです。MarkdownファイルをGoogleスラ...

List

  • 2016/12/15

Scrum Board - カンバン機能だけを取り出したJavaScriptライブラリ

GitHubがIssuesをカンバン風に表示する機能を提供するようになっていますが、Issuesを使っていない場合もあります。自社のタスク管理を使っていて、カンバン機能だけを取り入れたいと考える人もいるでしょう。そんな方に使ってみて欲しいのがScrum Boardです。JavaScript製のカンバンライブラリです。#...

List

  • 2016/12/13

katatema - Reactを使った小さな静的サイトジェネレータ

Reactを使うとなんとなくシステムが大事になってしまう雰囲気があります。そのため、大型なWebアプリケーションでないと使うのを控えてしまうでしょう。もっと手軽に小さなツールでも使えると便利なはずです。そこで使ってみたいのがkatatemaです。Reactを使った静的サイトジェネレータです。## katatemaの使い...

List

  • 2016/12/12

traquer - Web上の操作を記録&再生

Webページではマウス操作やキーボード入力が折り混ざるので、どう操作したことによって不具合が出たかという再現するのが難しいことがあります。しかしユーザの操作の中に、解決のヒントがあるはずです。そこで使ってみたいのがtraquerです。Webページにおける操作を記録、再生できるライブラリです。## traquerの使い方...

List

  • 2016/12/10

Koto - D3.jsを使ったグラフライブラリ

D3.jsと言えばデータのビジュアライズを行うJavaScriptライブラリです。多彩なグラフィックスを描けますが、高度な機能だけに使いこなすのも難しいという印象があります。そこで今回はKotoを紹介します。D3.jsをベースに、グラフを描くライブラリです。## Kotoの使い方Kotoのデモグラフです。!

List

  • 2016/12/09

Irasutoya - いらすとや検索コマンド

フリーのイラスト配布サイトとして有名ないらすとや。もの凄く種類も多く、マニアックなシチュエーションのイラストも存在するとあって、便利に使っている方は多いかと思います。そんな方に使ってみて欲しいのがIrasutoya、いらすとや検索コマンドです。## Irasutoyaの使い方犬で検索した結果。!

List

  • 2016/12/05

medium-draft - Medium風のWYSIWYGエディタ

良いサービスというのは真似る人が多いものです。良いと思ったものを自分たちのサービスに反映したいと考えるでしょうし、純粋に開発者として自分でも実装してみたいと考えることもあるでしょう。最近多いのはMediumです。今回紹介するmedium-draftはMedium風のリッチエディタを再現したソフトウェアになります。## ...

List

  • 2016/12/04

Open API designer - Open API/SwaggerドキュメントをWeb上で作成

Swaggerをベースに現在策定が進められているのがOpen APIです。策定されれば多くのソフトウェアがそのフォーマットに対応することでしょう。そうなればAPIエコノミーがさらに広がっていくはずです。今回紹介するOpen API designerはOpen APIのWebブラウザ上でデザインできるソフトウェアです。#...

List

  • 2016/12/02

Winds - 個人の興味に合わせたフィードリーダー

フィードリーダーを使っている人はあまり多くないと思いますが、個人的にはまだまだ現役で使っています。効率的に多くの情報を収集しようと思うと、フィードリーダーが最適ではないでしょうか。今回はそんなフィードリーダーの最新版、Windsを紹介します。エレガントなデザインが特徴です。## Windsの使い方最初に興味のあるカテゴ...

None

  • 2016/12/01

Simple-HTML5-Drawing-App - 線種や太さが変えられるWebペイントアプリを作成しよう

HTML5では多くのAPIが追加されていますが、見た目のインパクトがあるものと言えばCanvasではないでしょうか。インパクトだけならWebGLもありますが、使いこなすのは難しいかもしれません。今回はそんなCanvasを使ってペイントアプリを作るチュートリアル&ソースコードを紹介します。## Simple-HTML5-...

List

  • 2016/11/28

Grade.js - 画像を解析して最適な枠を表示

画像は見せ方がとても大事です。ただ並べただけでは目を引くことができません。例えばPinterestがあれだけ流行ったのは、それまでになかった段違いな組み合わせのグリッドによるところが大きかったでしょう。画像を主体としているサイトでは特に見せ方に注意すべきです。今回紹介するGrade.jsは画像に枠をつけてくれるJava...

List

  • 2016/11/26

Hotdraw.js - JavaのHotdrawをJavaScriptにポーティング

Javaはサーバサイドだけでなく、デスクトップ開発でも利用できます。速度面などに難があって利用は伸びませんが、かつては多くのデスクトップソフトウェアがJavaで作られていました。そんなJavaには多くの先進的試みがありました。JHotDrawというJavaによる2Dドロー技術もその一つで、今回紹介するHotdraw.j...

List

  • 2016/11/26

turbo.js - WebWorkerでGPUを使った計算処理を実現

ブラウザのJavaScriptは一昔前に比べたら大幅に高速化されていますが、それでもシングルスレッドで処理されるという点がネックになります。それを克服するためにはWebWorkerを使った並行処理、GPUを使った計算処理が必要です。それらの技術を使おうと思ったら非常に面倒なイメージがあります。そこで利用するのがturb...