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

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

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

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

もっと見る

List

  • 2019/05/11

Gandul - 簡単に画像の遅延読み込みを実現

Webサイトは縦長なページが多く、その中で画像を多用していることも多いでしょう。そんな時、HTMLを読み込んだタイミングで画像も読み込んでしまうとネットワークの負荷が高くなります。それを防ぐ遅延読み込みもありますが、技術的に面倒と感じている人も多いかと思います。そこで使ってみたいのがGandulです。簡単に遅延読み込み...

List

  • 2019/05/10

jQuery Rowspanizer - 動的にHTMLテーブルのrowspanを設定

これは良いアイディア!HTMLでテーブルはよく使われます。検索結果やレポーティングなど活躍の幅は広いです。そしてデータを表示する際に、重複した項目はセルを連結して表示するでしょう。しかし、colspan/rowspanをシステムで動的に設定するのは非常に面倒です。そんな時に使ってみたいのがjQuery Rowspani...

List

  • 2019/05/09

press-ready - PDFをPDF/X-1aに変換

PDF/X-1aという規格があります。これはPDFの一種で、印刷用PDFフォーマットになります。DTP・印刷用語集

List

  • 2019/05/07

Guetzli.js - Webブラウザ上でJPEGエンコーディング

デジカメやスマートフォンの普及によってデジタル画像コンテンツが爆発的に増えています。さらに、その画質は年々向上しており、サイズも肥大化しています。撮った写真をそのまま載せると数十MBあるということも少なくありません。そこで必要なのがリサイズであったり品質を変更した画像サイズの縮小処理です。今回はJavaScript/W...

List

  • 2019/05/06

QuickChart - Google Chart APIの代替

Webでグラフを表示したいというニーズはよくあります。そのためのライブラリやAPIを提供するサービスも多数あります。有名なものに一つにGoogleのグラフAPIがありますが、業務システムの数字を出すのは控えてしまうでしょう。そこで使ってみたいのがオープンソースのグラフAPIサーバ、QuickChartになります。社内で...

List

  • 2019/05/06

PWABuilder - PWAを開発する際のお供に

PWA(Progressive Web Apps)に注目が集まっています。ネイティブアプリにしかできないことはたくさんありますが、Webアプリケーションでも十分という領域はどんどん増えています。そんな中、iOSも対応範囲を増やしており、実用レベルになってきています。PWAを作っている方はPWABuilderを使ってどれ...

List

  • 2019/05/05

YouTube Live Chat Flow - YouTube Liveのチャットをニコニコ動画風に表示

YouTube Liveにはチャット機能があります。動画を見ながら世界中にいる人たちと会話が楽しめる機能ですが、動画の右側に表示される方式はUstream時代から進化していない、オールドスタイルなものです。今回紹介するYouTube Live Chat Flowはチャットの表示を動画の上に重ねる、いわゆるニコニコ動画や...

None

  • 2019/05/03

rels - GitHubリリースのダウンロード数を表示

GitHubのリリースを使ってファイルを配信している人は多いでしょう。ダウンロード数を見れば、作ったソフトウェアがどれくらい普及しているのか分かります。リリース直後はついつい気になって見に行ってしまうものです。そんなGitHubのリリースを簡単に見られるのがrelsです。CUIから利用できます。## relsの使い方r...

List

  • 2019/05/03

RasDash - Raspberry Pi用のダッシュボード

Raspberry Piがとりあえず家に一台あるという人は多そうです。しかし使いどころが見つからずに放置してしまっている人も多いのではないでしょうか。まずステータスを表示するダッシュボードとして使ってみるのはいかがでしょう。そのベースとして使えそうなのがRasDashです。WebブラウザからアクセスできるRaspber...

List

  • 2019/04/29

Resemble.js - JavaScriptで画像の解析/比較

画像はテキスト以上に情報量が多いコンテンツです。テキストが細かく説明するよりも、写真を見た方が伝わるケースはとても多いです。そのためオンライン上には写真コンテンツが無数に存在します。そんな画像コンテンツをより深く楽しむのに使えるライブラリがResemble.jsです。Web上で画像を解析できます。## Resemble...

List

  • 2019/04/27

Volta - バッテリーを長持ちさせる秘策

ラップトップの充電を100%にし続けるのは実はよくないらしいです。容量が減ってしまうのを促進するため、50〜90%を行き来し続けるのが良いとのことです(via How to Prolong Lithium-based Batteries - Battery University

List

  • 2019/04/24

tetris - Webブラウザ用テトリス

名前ですべて分かってしまうのですが。ソフトウェアをインストールする時代はすでに終わっています。スマートフォンアプリは殆どインストールされることがなく、デスクトップ向けのソフトウェアもどんどんWeb化が進んでいます。時間つぶし系のゲームは特にその傾向が強いでしょう。今回紹介するtetrisはあのテトリスをWebアプリケー...

List

  • 2019/04/23

vr360 - Webベースの360度VRビューワー

ARやVRに注目が集まっています。Nintendo SwitchでもVRが実現できるようになり、さらにコンテンツの拡充が望まれるでしょう。そしてWebにはWebVRという標準技術も用意されています。今回紹介するvr360は360度のVRビューワーを簡単に作成できるソフトウェアです。## vr360の使い方デモです。デス...

List

  • 2019/04/22

WinXP - あの懐かしいWindows XPをWebブラウザ上に再現

人はなぜ昔のものに憧れにも似た感情を持つのでしょうか。その当時には苦しめられる存在だったにも関わらず、過ぎ去ってみると良い思い出であったかのように扱われます。そして、その昔を懐かしめるソフトウェアを作ったりします。今回紹介するWinXPはその名の通り、昔懐かしいWindows XPのデスクトップをWebブラウザ上に再現...

List

  • 2019/04/20

Tone.js - Web上で音を奏でるためのフレームワーク

Web Audio APIによって、Webブラウザ上で音楽を奏でられるようになりましたが、このAPIはかなり低レベルなものとなっています。何でもできますが、すべて自分で実装しなければなりません。そのため、なかなか普及していません。そこで使ってみたいのがフレームワークになるライブラリです。今回はTone.jsを紹介します...

List

  • 2019/04/17

Hanzi Writer - 漢字の書き順をアニメーション表示

漢字は基本的な書き順さえ覚えてしまえば大抵のものには対応できますが、時々複雑なものがあったりします。さらに漢字と言っても日本のものだけでなく、中国語もあります。日本人でも中国の漢字の書き順はぱっと見ただけでは分からないかも知れません。そこで使ってみたいのがHanzi Writerです。中国語(日本の漢字も)の書き順を表...

List

  • 2019/04/17

bibisco - 小説を書く人のためのソフトウェア

小説を書くというのは、新しい世界を創ると言うことです。様々な登場人物が複雑に絡み合い、多彩な町や都市に出掛け、今までにない乗り物に乗ったりします。そうしたすべての人や物が矛盾なく整ってはじめて、その世界観に入り込むことができます。そういった格子を作り上げるのに最適なソフトウェアがbibiscoです。## bibisco...

List

  • 2019/04/15

vmsg - Webサービスにボイスメッセージ機能を追加

電話ではボイスメッセージ機能があります。テキストでは伝わらない内容を音声で残したり、人によっては文字を入力するよりも口で言った方が早いという人もいるでしょう。しかしオンラインのサービスではあまり音声をサポートしたものは見かけません。常にテキスト入力が求められます。そこで使ってみたいのがvmsgです。ボイスメッセージを手...

List

  • 2019/04/14

natUIve - UIコンポーネントが多数揃ったCSSフレームワーク

WebのUIフレームワークとしてはBootstrap一強が続いています。しかしフレームワークとしての癖もあり、Webデザイナーとしては自分のやりたいデザインが実現しづらいかも知れません。そんな時には他のUIフレームワークに触れてみても良さそうです。今回はnatUIveを紹介します。デザインフレームワークとしてはもちろん...

List

  • 2019/04/14

Maplat - 現在と古地図を重ね合わせ

古地図を見るのが好きな方は多いです。江戸自体やそれ以前に作成された地図を現在のものと重ねてみると、当時から変わらないものや逆に変わったものが浮かび上がってきます。そうした古い道を辿ることで今まで知らなかった発見ができたりします。今回紹介するMaplatはそんな古地図と現在の地図とを重ね合わせて表示できるソフトウェアです...