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

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

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

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

もっと見る

None

  • 2017/12/23

Parcel - 高速さが売りのWebアプリケーションバンドラー

JavaScriptの周辺環境の進化は早く、一部はGulpと言われていたのがWebPackになったりして、どんどん新しい技術が出てきては廃れるといったことを繰り返しています。さらにここで紹介するのは心苦しいのですがParcelを知っておきましょう。とても簡単に使えるWebアプリケーションバンドラーです。## Parce...

List

  • 2017/12/22

Splitter - 縦横自在にコンテンツ領域を変更

情報の見せ方はなるべく提供側でコントロールしたいと思うものですが、そもそもWebの場合はデバイスの画面幅が異なったりして一様とはいきません。むしろユーザがコントロールできるようにした方がユーザビリティが高いとさえ言えるでしょう。そこで使ってみたいのがSplitterです。グリッド内に表示されるコンテンツの幅や高さを自由...

List

  • 2017/12/22

Muuri - ソート、フィルタリング、D&Dできるレスポンシブグリッドライブラリ

レスポンシブWebデザインが広く一般的になっていく中でグリッドデザインもまた多用されるようになっています。グリッドデザインにすることでデバイスの画面幅に応じた情報が表示しやすくなっています。そうした中で紹介したいのがMuuriです。ソートやフィルタリングをサポートしたグリッドレイアウトライブラリです。## Muuriの...

List

  • 2017/12/20

graphqlviz - GraphQLのスキーマを可視化

GraphQLはデータ構造がスキーマとして定義されています。それらを読み解くことで、あらかじめデータ構造を把握してクエリを投げられるようになっています。しかしJSONから内容を正しく見極めるのはなかなか難しいでしょう。そこで使ってみたいのがgraphqlvizです。GraphQLの構造を画像などで可視化してくれます。#...

List

  • 2017/12/20

Abema Viewer - Abema TV専用ブラウザ

先行きの危ぶまれる声も聞かれたAbema TVですが、元SMAPの3人を採用した企画を通じて一気に注目を集めているようです。インターネットながらTVと同じようにシフトがあり、コマーシャルもあるなど懐かしいような形式で放映されています。そんなAbema TVだからこそちょうど良い、そんなソフトウェアがAbema View...

List

  • 2017/12/19

Spritebot - SVGを最適化してサイズをより小さく

SVGファイルはベクターデータなので画像サイズによってはPNGやJPEGに比べて小さなサイズで表現できます。特に高解像度になればなるほどSVGのがサイズが小さくなります(SVGは画像サイズは関係がないので)。そんなSVGですが、まだまだムダがあります。それらを削り取るのがSpritebotです。## Spritebot...

List

  • 2017/12/19

Dashboards - 自由度の高いダッシュボードライブラリ

Webサービスや業務システムを通じて集められたデータを表示するのに必要なのがダッシュボードです。ダッシュボードは常に固定表示よりも、各自の使い方に合わせて情報の並び替えが求められます。そんなUIを作成できるのがDashboardsです。ユーザが自由に画面要素を変更できます。## Dashboardsの使い方最初の表示で...

List

  • 2017/12/18

Joplin - タスク/メモが管理できる個人用ノートアプリ

各自ノートアプリは用意しておきましょう。そしてふと思いついたことをその場でメモっておくべきです。一箇所に書き留めておくことで、いざというときに探しやすくなります。そのためにはマルチプラットフォームで動作するノートアプリでないといけません。今回はそんなマルチプラットフォームで動作するノートアプリ、Joplinを紹介します...

List

  • 2017/12/17

Fuck-Youtube - 見られないYouTube動画を見る

YouTubeを見ていて時々出くわすのが「この動画は、お住いの国では公開されていません」というメッセージです。これは動画の設定で公開範囲を設定している場合に表示されますが、何とかして見たい動画もあるでしょう。VPNを使ったりして回避する方法もありそうですが、もっと簡単なのがFuck-Youtubeをインストールする方法...

List

  • 2017/12/17

Geist - 関連性に重点を置いた個人用ナレッジベース

個人のナレッジはきちんと積み重ねていかなければなりません。日々のインプットを書きためておく場所を用意しておかないと、あっという間に頭の片隅から抜け落ちてしまいます。そこで使ってみたいのがGeistです。個人のナレッジについて、関連性を用いて描けるソフトウェアです。## Geistの使い方メイン画面です。主な機能はノート...

List

  • 2017/12/16

PaintCoin - オリジナルのゴールドコインを作る

海外製のコインを集める人や、記念コインをコレクションしている人たちがいます。コインには通常の貨幣としての価値以外にも、怪しい魅力があるのでしょう。貨幣を表すアイコンや、リッチな雰囲気を出す場合などでもコインはよく使われます。今回はそんなコインをオリジナルで作れるPaintCoinを紹介します。## PaintCoinの...

List

  • 2017/12/16

SwipeVideo - スワイプで視点を変えられる動画プレイヤー

最近のコンテンツはユーザの自由度を上げる方に進んでいます。ユーザが見たい場所、注目したい箇所は人によって違います。それをテクノロジーで可能にします。VRや360度動画などはまさにそうした側面が反映されています。その一つとしてSwipeVideoを紹介します。見たい角度を自由に変更できるHTML5の動画プレイヤーです。#...

List

  • 2017/12/15

Gorilla Dropdown - ドロップダウンをリッチに

HTMLの入力UIの中で非常に貧相に感じるのがドロップダウンです。単数選択、複数選択のいずれもシンプルで使い勝手もよくありません。テキストエリアはWYSIWYGにするライブラリが多数ある中、ドロップダウンはなかなか進化しません。そこで紹介したいのがGorilla Dropdownです。ドロップダウンを格好良くしてくれる...

List

  • 2017/12/14

gas-github - Google App ScriptをGitHubで管理!

Googleスプレッドシート上でもマクロに似た機能、Google App Scriptが利用できます。JavaScript(のサブセットですがネットワーク周りはむしろ使いやすい)で書けるのでとても簡単に使えます。問題はWeb IDE上で書かないといけないことで、バージョン管理に対応していないことです。そこで使ってみたい...

List

  • 2017/12/14

JS CMS - 管理画面が作り込まれた国産CMS

CMSは数多に存在しますが、それぞれ使い勝手が微妙に違います。それによって手に馴染む、馴染まないと感じることは多いでしょう。使ってみないと分かりませんが、そもそものコンセプトに現れていたりするものです。今回紹介するJS CMSはずばり、デザイナー向けのCMSとなっています。また、国産とあって日本人にとって使いやすいでし...

List

  • 2017/12/13

dext - JavaScript製のシンプルなランチャー

多くの方がランチャーを使っています。昔のように自分でアプリケーションを登録するのではなく、自動的にコンピュータ内部を検索してインデックスを作ってくれます。それによって負担が一切なく、すぐに便利な環境を用意できます。今回紹介するdextもランチャーの一つです。Electronで作られているのが特徴になります。## dex...

List

  • 2017/12/12

Image Picker - 画像を選択する入力コンポーネント

画像が並んでいて、そこから選ぶようなインタフェースを作る場合、どういうものを想像するでしょうか。画像の下にチェックボックスを配置するのが簡単そうですが、直感的とは言いがたいUIです。そこで使ってみたいのがImage Pickerです。画像をそのまま選択できるコンポーネントになっています。## Image Pickerの...

List

  • 2017/12/11

Cyborg Writer - 自然な文章を生み出すコンピュータ

近い将来、AIや機械に置き換わってしまう職業は多数存在します。タクシーやバスの運転も自動化されていくでしょう。創造的な仕事はなかなか置き換わらない、と言われていますが、それも分かったものではありません。Cyborg Writerはあくまでも実験的なものですが、自然言語処理によってテキストを生成します。## Cyborg...

List

  • 2017/12/09

mofron - .NETやSwingのように画面デザインできるUIフレームワーク

Webは表現力が高い一方、その高さ故にゼロから作ろうと思うと手間に感じてしまいます。デザインをあまり気にしない業務システムであっても、素のHTMLままでは使う気にならないでしょう。そこで使ってみたいのがmofronです。.NETやSwingで作っているように、画面の設計をコードの中から行えるUIフレームワークです。##...

List

  • 2017/12/09

FixedLayout Epub3.js - 固定レイアウトのePub3ファイルを生成

日本の電子書籍で一番販売されているのはマンガだそうです。日本の誇る文化の一つでもありますし、読んでいる方も多いでしょう。そんなマンガを電子版にする上で大事なのがレイアウトです。通常、電子書籍は読み手の状況に合わせて文字サイズなどのレイアウトを自由に変えられるのですが、マンガの場合は逆に固定化されていないといけません。そ...