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

Webの記事一覧

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

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

もっと見る

List

  • 2018/12/11

Current Device - デバイス判定をスタイルシートに反映

Webページにアクセスするデバイスが多様化している中、JavaScriptで各デバイスを判別して表示分けしているWebサイトも多いのではないでしょうか。こういった実装を都度行うのはとても面倒ですし、条件分岐も増えがちです。そこで使いたいのがCurrent Deviceです。デバイスに応じてスタイルシートにクラスを追加し...

List

  • 2018/12/11

WatchingU - インターネットオタクのためのRSSリーダー

オンライン上の情報を効率よく集めるのにRSS(フィード)リーダーは最適です。しかしビジネス的には難しいようで、多くの会社がフィードリーダーから撤退しています(それこそGoogleリーダーさえも)。そんな中生き残るのはむしろオープンソースなのかも知れません。今回紹介するWatchingUはWebベースのRSSリーダーで、...

List

  • 2018/12/10

spacetime - JavaScriptの高機能時間ライブラリ

JavaScriptで悩ましいのが時間の扱いではないでしょうか。Webブラウザごとによって異なるタイムゾーン、年月日を表示するのにもばらばらのメソッドを実行するなど面倒な操作が多いと感じます。そこで使ってみたいのがspacetimeです。JavaScriptにおける日時関連の処理を手軽にしてくれるライブラリです。## ...

List

  • 2018/12/09

tiptap - Vue.js向けのリッチなWYSIWYGエディタ

WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多...

List

  • 2018/12/08

SQLPad - クエリを保存、可視化するSQL実行環境

社内でエンジニア以外の人たち(特にマーケター)にSQLを覚えてもらうと業務効率が良くなるという話をよく聞きます。データを様々な角度から取り出したいと思う人たちは自分でやってもらう方が早いのです。そんなSQLを実行したり、保存できるのがSQLPadです。re:dash

List

  • 2018/12/08

model-viewer - Webコンポーネントの3D/ARビューワー

HTML5の機能が追加されている中で、Web上でできることが増えています。その一つとして注目したいのがWebVRであったり、AR技術です。これまでは専用のソフトウェアがなければ実現できなかったことがWeb標準の技術で実現できます。そんなAR/VRを簡単に表示、操作できるライブラリがmodel-viewerです。## m...

List

  • 2018/12/07

virtual-scroller - 長大なリストもサポートするスクロールライブラリ

Webページは縦に長く伸びがちです。特にリスト状に情報を載せる際にデータ量をシステムからの出力で動的に変化させている場合、間違って数十万件のデータを一気に表示しようとしてDOMレンダリングが終わらなくなったりします。そういった時に使ってみたいのがvirtual-scrollerです。縦横を含めたスクロールをスムーズにし...

List

  • 2018/12/07

slack-filesave - Slackにアップロードしたファイルを一括ダウンロード

Slackをビジネス、プライベート双方で使っている人は多いでしょう。単なるテキストのやりとりだけでなく、写真をはじめとして様々なデータをアップロードしているはずです。それらは残り続けますが、ふと思い立った時に探すのは大変です。そこで使ってみたいのがslack-filesaveです。Slack上にアップロードされたファイ...

List

  • 2018/12/06

myConsole - スマートフォン向けのJavaScript実行環境

JavaScriptの実行環境としてはWebブラウザの開発者ツールがよく使われますが、それはデスクトップにしか用意されていません。タブレットやスマートフォンでちょっとしたJavaScriptを実行したいと思うこともあるでしょう。そんな時に使えるのがmyConsoleです。Webベース、スマートフォン特化型のJavaSc...

List

  • 2018/12/06

Write.as - シンプルなUI、書くのに集中できるブログシステム

すべての人に最適なサービスは存在しません。テキストエディタにも好みがあったり、OSだって使い慣れたものが好きになるものでしょう。同様にブログプラットフォームも、リッチな方がいい人もいれば、シンプルさを大事にする人もいます。今回紹介するWrite.asはどちらかといえばシンプル側に属するブログプラットフォームになります。...

List

  • 2018/12/05

demado - 決まった幅と高さでURLを開く

チャットやプレイ中のWebゲームなど、別ウィンドウにしておきたい場面は多々あります。そんな時、Electronなどで別アプリ化する手もありますが、機能拡張やアプリが分かれるのが面倒という方もいるでしょう。そこで使ってみたいのがdemadoです。特定のURLを固定された大きさのウィンドウで開いてくれるソフトウェアです。#...

List

  • 2018/12/03

ProjectVisBug - HTMLやCSSの情報をビジュアル的に確認、調整

Webサイトのデザインを作っていて、配置を少し変えたり、色合いを変えたいと思うことは多いでしょう。開発者ツールでCSSを変更したり、Webブラウザを再読込しても良いですが、細かい調整では時間がかかってしまいます。そこで使ってみたいのがProjectVisBugです。ビジュアルを細かく調整できるGoogle Chrome...

List

  • 2018/12/01

Clock Shop - JavaScript/CSSを使ったすごい時計たちを陳列

世の中には時計が好きという方がたくさんいます。時間くらいスマートフォンで見られる一方、手首にする腕時計にこだわる方は多いです。ウォッチフェイスにもこだわりがあり、デジタルで任意の変更できるものの場合、テーマを入念に選ぶ人もいます。そんな時計好きに送りたいのがClock Shopです。時計店といってもECではありません。...

List

  • 2018/11/29

Squoosh - 高性能な画像圧縮Webアプリケーション

デジカメやスマートフォンのカメラが性能向上するのに合わせて画像のサイズがどんどん大きくなっています。その結果、バックアップや写真の表示でネットワーク帯域を消費することになってしまいます。これは今後どんどん問題が大きくなっていくでしょう。Appleでは新しい画像フォーマットHEICを作りました。対してGoogleはSqu...

List

  • 2018/11/28

howler.js - JavaScriptで音声/音楽ファイルを操作

HTML5になって音楽ファイルを扱うのが容易になりました。audioタグによって再生や停止をしたり、WebAudio APIでより細かく音声や音楽ファイルを操作できるようになります。しかし、まだまだそれほど活用事例が多くありません。今回紹介するhowler.jsはJavaScriptベースのオーディオライブラリです。W...

List

  • 2018/11/27

stacksort - StackOverflow上のコードを実行して検証

StackOverflowにはたくさんのナレッジが蓄積されています。しかし、実際に使えるコードなのかどうかは実行してみないと分からず、かつ同じような課題に対して解決方法が多数存在することもあります。そこで使ってみたいのがstacksortです。配列をソートする問題に対して投稿されているStackOverflowのコード...

List

  • 2018/11/26

GoCity - Goライブラリの依存性を可視化

最近のソフトウェアは依存性を全くなくして作られることは少なくなっています。外部のライブラリを積極的に使うことで、多彩な機能を素早く、安定して取り込めるようになります。今回はそんなライブラリへの依存性を可視化してくれるGoCityを紹介します。## GoCityの使い方とあるライブラリの例。まるでマイコンのようです。!

List

  • 2018/11/25

Vue Dark Mode - Vueのダークモード用デザインテーマ

macOS Mojaveで取り入れられたダークモード。元々その手のユーティリティはたくさんありましたが、OS標準に入ってきたのが大きなインパクトです。それに伴ってダークモードへの注目が集まっています。近くリリースされるSafariではダークモードがサポートされるそうです。そんな時に使えそうなのがVue Dark Mod...

List

  • 2018/11/25

Minesweeper in clojure - Clojure製のマインスイーパ

マインスイーパと言えば、初期の頃のWindowsから付属しているゲームです。ソリティアと並んで世界中で最も長くプレイされているゲームではないでしょうか。ルールが簡単で、なおかつハックできる要素のある面白いゲームです。そんなソリティアをClojureでリメイクしたのがMinesweeper in clojureです。We...

List

  • 2018/11/24

Glorious - Web上でコードのデモンストレーション

プログラミングはできあがったものを一気に見せても理解するのが困難です。そのため細かく分けたり、動画を使ったりと様々な手段を講じる必要があります。ちょっとずつ説明することで全体としては難しいことをしていないと理解してもらえます。そんなプログラミングコードのデモを表現するのに使えるのがGloriousです。## Glori...