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

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

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

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

もっと見る

List

  • 2016/10/21

sereny - マテリアルデザインを使ったタイマー

タイマーは意外と多くの場面で役立ちます。それだけにアプリとしても多数存在するのですが、本当に使いやすいものは限られます。ダウンロードして使ってみて何か違うと感じることも少なくありません。今回はマテリアルデザインにインスパイアされたエレガントなカウントダウンタイマー、serenyを紹介します。## serenyの使い方タ...

List

  • 2016/10/18

Draggable Google Modal - ドラッグして動かせるモーダルウィンドウ

Webでよく使われるモーダルウィンドウは閉じたり入力しないと次のアクションに進めないのでユーザに処理を強制するのに便利です。しかしモーダルは動かすこともできないのでモーダルの裏に参考したい情報があった時にとてもストレスを感じます。そこでGoogleではドラッグできるモーダルウィンドウを提供しています。同じような実装を実...

List

  • 2016/10/17

Wormhole - タブ間通信に使えるイベント通知ライブラリ

今はタブブラウザが基本となっています。そのため、リンクをまとめて開くのも簡単で、気がついたら同じサイトのタブがたくさん開いていたなんてことがあります。そして、一つ一つのタブは独立して動くのが当たり前になっています。そこで使ってみたいのがWormholeです。Wormholeを使うと同じサイトのタブ間で通信できるようにな...

List

  • 2016/10/16

Proton - 高度な表現も実現できるHTML5のパーティクルライブラリ

Webの表現力はHTML5によって高まっていますが、そう簡単に高度な表現ができるわけではありません。目を引くようなアニメーション、グラフィックスを実現させようと思ったら相当量のコードを書かなければならないでしょう。今回はそんな作業を軽減してくれるパーティクルライブラリProtonを紹介します。## Protonの使い方...

List

  • 2016/10/14

FaithJS - Web上で動くファミコンシミュレータ

ファミコン(NES)エミュレータは古くからあります。WindowsやMac OSX、Linuxなど多くはデスクトップアプリケーションとして提供されていますが、スペック的にはすでにWebブラウザでも動くレベルです。今回はJavaScriptで実装されたNESエミュレータ、FaithJSを紹介します。## FaithJSの...

List

  • 2016/10/11

basis.js - シングルページアプリケーション用フレームワーク

SPA(シングルページアプリケーション)では一つのページの中ですべてのHTMLを記述したくなりますが、それでは見通しが非常に悪くなります。SPAとはいえ、テンプレートを使って分割したり、機能を明確に分ける方が良いでしょう。そこで使ってみたいのがbasis.jsです。## basis.jsの使い方basis.jsのコード...

None

  • 2016/10/10

optimize-js - JavaScriptのコードを最適化して初回実行を高速化

JavaScriptはWebブラウザで標準サポートされている唯一のプログラミング言語です。そのため書けるという人は多いのですが、自信をもってパフォーマンスの高いコードが書けると言い切れる人は少ないのではないでしょうか。そんな方に使ってみて欲しいのがoptimize-jsです。既存のJavaScriptを最適化し、高速化...

Missing

  • 2016/10/10

Laphs - Tumblr製。WebでLive Photoをサポート

iOSの新機能であるLive Photoは多くのサービスに影響を与えました。Tumblrもその一つです。Tumblr for iOSでは2015年12月からサポートされていましたが、Webブラウザでは長らく対応していませんでした。それがついに対応しました。その機能はLaphs(Tumblr製)を使って実現されています。...

List

  • 2016/10/09

ZooMove - 画像をスムーズに拡大するJavaScriptライブラリ

最近は画像の解像度が上がっており、撮影した写真のまま公開するととても巨大になってしまいます。そこで幅を縮めるのですが、あまり小さくすると折角の写真が見えづらくなってしまいます。そこで必要に応じてズームするライブラリが便利です。今回はそんなライブラリのZooMoveを紹介します。## ZooMoveの使い方最初の表示です...

List

  • 2016/10/09

Mongotron - クロスプラットフォーム対応のMongoDB管理

MongoDBはNoSQLの代表格として今なお高い人気があります。NoSQLとはいえデータベースなので、開発している際にはデータベースの管理ソフトウェアが必要になるでしょう。MySQLで言えばphpMyAdminのような存在です。今回はMongoDB向けの管理ツールMongotronを紹介します。クロスプラットフォーム...

List

  • 2016/10/08

WebGLDetector.js - ブラウザのWebGLバージョンを判定

iOSでもWebGLが使えるようになり、デスクトップとスマートフォンでWebGLを使った、より高度な表現が実現できるようになりました。しかしWebGLにもバージョンがあり、バージョンによって実現できる機能差があります。WebGLのバージョンを逐一調べながら表現法を変えるのは面倒ですが、WebGLDetector.jsを...

List

  • 2016/10/08

g9 - インタラクティブなWebグラフィックスを実現

HTML5によってWeb上での表現力が高くなり、これまでFlashなどを使わないとできなかったようなアニメーション表現がWeb標準だけで実現できるようになっています。とは言え、ただアニメーションするだけでは面白くありません。面白いのはよりインタラクティブな、マウスやキーボードを使って自分で操作できるものでしょう。今回は...

List

  • 2016/10/07

github-embed - GitHubのコードを埋め込み表示

GitHub Gistは任意のWebサイトにコードを埋め込むことができます。これはとても便利な機能で、コードハイライタを準備したり、長いコードをどう見やすく表示するかなどを悩むことなく利用できます。なぜかGitHub自体にはそのような機能がないのですが、github-embedを使えば代替できます。## github-...

List

  • 2016/10/07

Reframe.js - iframeを自動リサイズするJavaScript

iframeを使ってWebサイトのコンテンツを埋め込めるサービスが増えています。特に多いのがYouTubeやVimeoなどの動画共有サイトです。埋め込むのは簡単なのですが、厄介なのはコンテンツがレスポンシブでないことです。ブログなどをスマートフォンで表示すると動画の分だけ表示がはみ出てしまいます。そんな状態を改善するの...

None

  • 2016/10/06

pageAccelerator - JavaScriptだけでWebページ読み込みを高速化

Webページの読み込み速度は速ければ速いほどメリットがあります。スマートフォンアプリのようにUIはすべてアプリの中にあり、データだけをやり取りする方法が主流になっている中、Webブラウザが遅く感じられてしまうとユーザはあっという間にブラウザから離れていってしまうでしょう。今回は簡易的にページ読み込みを高速化してくれるp...

List

  • 2016/10/05

Mock Node - 自由に設計できるWeb APIモックサーバ

アプリやWebアプリケーションを素早く作り上げていくためにはサーバサイドをモックアップで作り始める仕組みが欠かせません。Web APIが用意されるのを待っていたら作業がはじめられないからです。そこで使ってみたいのがMock Nodeです。自分で自由に作成できるモックアップのWeb APIサーバです。## Mock No...

List

  • 2016/10/04

debugger.html - Web技術で作られたデバッガー

MozillaはPDFビューワーをpdf.js

List

  • 2016/10/03

ElectroCRUD - Electron製のMySQL管理

Electronの利用される場面が広がっています。これまでWebベースで提供されていたものまでElectronを通してデスクトップアプリになっています。従来と逆の流れと言えそうです。今回はElectronを使ってデータベース(MySQL)管理を実現するElectroCRUDを紹介します。## ElectroCRUDの使...

List

  • 2016/10/01

React Server - Reactの開発をはじめるのに最適なベースを生成

Reactを触りはじめて思うのが、フレームワークのスタンダードが確立されていないということです。React自体はViewなので、それ以外の部分やアプリケーションサーバをどうすべきかといった部分が抜け落ちています。そうした点で迷っている方はReact Serverを使ってみてはいかがでしょう。React Serverを使...

List

  • 2016/10/01

Portfolio - Rails/React製のポートフォリオサイト

ポートフォリオサイトというのは一般的に自分の作った作品や写真、デザインしたWebサイトのスクリーンショットを掲載して自分のスキルをアピールします。デザイナーの方に利用者が多いようです。そんなポートフォリオ、エンジニアであればどうなるか。それはポートフォリオサイト自体のシステムになるでしょう。そこで見てみたいのがPort...