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

Webの記事一覧

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

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

もっと見る

List

  • 2017/03/08

S3 Bucket Listing - Amazon S3のインデックスページを生成

Amazon S3は静的なファイルのホスティングに最適ですが、一覧ページを作れません。静的なWebサイトとして使うのであればindex.htmlを置けば良いですが、単純にファイルを置いているのであれば一覧ページがある方が便利です。あらかじめ生成しておくこともできますが、S3 Bucket Listingを使えばもっと簡...

List

  • 2017/03/07

a-table.js - リッチな機能を持ったHTMLテーブルを出力

Web上でのテーブル表示はよく使われているだけに、そのUXが優れているかどうかでサービス全体の印象が変わってきます。Excel並とまでは言いませんが、ソートや絞り込み機能はあると便利です。そんなHTMLテーブルを手軽に優れたUIで提供してくれるのがa-table.jsになります。## a-table.jsの使い方デモで...

List

  • 2017/03/06

HyperApp - 1KBのビューライブラリ

ReactやVue、Riot.js、Angular2などバーチャルDOMを使ったフレームワークが増えています。個人的にはVueが好きなのですが、多くのビューライブラリは大型化し、ちょっとした表示に使いたいというニーズにはマッチしなくなります。そこで使ってみたいのがHyperAppです。1KBのJavaScriptライブ...

List

  • 2017/03/04

drag-drop - HTML5のドラッグ&ドロップAPIをごく簡単に扱う

HTML5で便利になった機能の一つにファイルのドラッグ&ドロップがあります。Webブラウザ上にファイルをドロップしてアップロードしたり、DOMをドラッグ&ドロップできたりします。しかしできるとは言ってもコードをそれなりに書かないと使えないのが難点です。そこで使ってみたいのがdrag-dropです。HTML5のドラッグ&...

List

  • 2017/03/04

html-docx-js - Web上でWordファイルを生成

MS Officeのファイルはデファクトといって言いほど広く使われるようになっています。企業なども特に何も気にすることなくMS Officeのファイルをメールで送信したりします。これが他のオフィススイートをであればそうはいかないでしょう。もしあなたがMS Wordを持っていないならばhtml-docx-jsを使って生成...

List

  • 2017/03/03

Rythm.js - 音楽/音声に合わせてアニメーション

Webは基本的に静的なものです。アニメーションを使うこともできますが、何度も繰り返したり、マウスクリックのタイミングでアニメーションが実行される程度です。よりインタラクティブ性が欲しいと思ったことはないでしょうか。そこで紹介したいのがRythm.jsです。なんと音声に反応するアニメーションライブラリです。## Ryth...

List

  • 2017/02/27

Deadbird - 削除されたツイートだけを保存

Twitterは時に炎上が起きます。何気ない一言を簡単に投稿できてしまうので、後になってニュアンスに問題があったり、自分の気付かなかった人たちを傷つけてしまっていたなんてことが起こります。そんな時に悪手ではありますが、ツイートを削除してしまうことがあります。そんな削除されたツイートを発掘してしまうのがDeadbirdで...

List

  • 2017/02/26

GetPageTitleAndURL - 複数パターンでタイトルとURLをコピー

WebブラウザではURLのコピーは簡単でも、タイトルのコピーは意外と面倒だったりします。HTMLソースからコピーするのは面倒ですし、ブックマークレットを実行する方が多いかと思います。そんなURLとタイトルのコピーを手軽に、かつ複数のフォーマットに対応させたのがGetPageTitleAndURLです。## GetPag...

List

  • 2017/02/23

DownGit - GitHubのダウンロードリンクを生成

GitHubではmasterブランチなどをZipファイルでダウンロードできます。しかしそのためにはClone or downloadをクリックしてDownload Zipをクリックするといった具合に操作が面倒だったりします。そこで使ってみたいのがDownGitです。Zipダウンロードするためのリンクを生成してくれます。...

List

  • 2017/02/22

I-Miss-You - 非アクティブになるとタイトル、お気に入りアイコンを変更

タブをたくさん開くのが当たり前になると、URLを開いたものの全然見ていないタブも出てくるかも知れません。サービス提供側としてみれば、なるだけWebサイトを見て欲しいと思うわけで、どうにかユーザにアピールしたいでしょう。そこで使ってみたいのがI-Miss-Youです。ユーザが見ていない時にこそ使われるjQueryプラグイ...

List

  • 2017/02/22

Civilizer - Webベースの知識管理

自分のアイディアを管理するというのは意外と大変です。思いついた時にメモしておかないとあっという間に忘れてしまいます。企業になれば、それが全員分になり、忘却されたナレッジによる損失は決して小さくありません。そんなアイディアを書き留めておけるプラットフォームがCivilizerです。ちょっとしたWiki風のシステムになって...

List

  • 2017/02/21

Citii - 各都市で生活するにはどれくらいお金がかかるのか、が分かるアプリケーション

海外で暮らしてみたいというのは島国の日本ならではの夢かも知れません。海外には海外の良さがありますが、もちろん悪いところもあります。まず現状と同等の生活を送れるのかをチェックしなければなりません。そこで使えるのがCitiiです。各国の生活コストがどれくらいなのか分かるソフトウェアです。## Citiiの使い方例えば東京で...

List

  • 2017/02/19

AirSlide - Webでスライド操作を共有

プロジェクターが暗かったり、そもそもなかったりすると小さなラップトップの画面を全員で共有することになります。これでは見る方に集中しなければならず、良い会議になりません。資料は各自で見られる方が便利です。そこで使ってみたいのがAirSlideです。Webブラウザでスライドを共有し、さらに操作もオーナー側でできるソフトウェ...

List

  • 2017/02/18

Codebox - デスクトップとクラウドで動作するIDE

開発を効率的に進める上でIDEの存在は欠かせません。スクリプト言語の多くはプログラミングエディタで作成しますが、それでも自動補完やエラーチェックなどの機能があると開発がスムーズになるでしょう。今回紹介するCodeboxはデスクトップまたはクラウドで動作する想定のIDEになります。## Codeboxの使い方ディレクトリ...

List

  • 2017/02/17

mediacenterjs - Webベースのメディアセンター

使ってみると意外と便利なのがメディアセンターです。ローカルやネットワーク内にある動画、音楽ファイルなどを一箇所で管理でき、スマートフォンなどから操作して音楽や映画を楽しめるようになります。そんなメディアセンターをWebベースで提供するのがmediacenterjsです。## mediacenterjsの使い方セットアッ...

List

  • 2017/02/15

QArt.js - 好きな画像と組み合わせたQRコード生成

QRコードというと小さな四角が並んだ白黒の模様で、一般の人からするとよく分からないものに見えます。見た目の違いも分かりづらく、目を引きづらいため最近ではカラーにしたり、他の絵柄を混ぜると言った手法も開発されています。今回紹介するQArt.jsもその一つで、好きな画像をベースにQRコードを生成してくれます。## QArt...

List

  • 2017/02/14

multi.js - 複数選択のドロップダウンをリッチに変身

WebのフォームはHTML5でリッチになっていますが、それでもまだまだ標準では使い勝手がよくありません。とは言え、それを改善するためのライブラリも出てきていますので、積極的に取り入れていきましょう。今回紹介するのはmulti.js、複数選択できるselectタグを格好良くしてくれるライブラリです。## multi.js...

List

  • 2017/02/14

php-simple-kanban - PHP製のシンプルなカンバン

最近のプロジェクト管理ではカンバンを使うことが増えています。また、プロジェクトだけでなく考えを整理したり情報を可視化する際にもカンバン風のリストが役立ちます。そんなカンバン風リストを提供するサービスにTrelloがありますが、アトラシアン社により買収されています。そこで使ってみたいのがphp-simple-kanban...

List

  • 2017/02/11

mo · js - Web上でモーションアニメーションを実現

Webの表現力は上がったと言われていますが、そのためのテクニックは必要です。SVGやCanvasを使いこなすのは相当難しく、専用のライブラリを使う方が手軽にアニメーションなどが実現できます。今回紹介するmo · jsもその一つで、モーションアニメーションが実装できるライブラリです。## mo · jsの使い方実装例です...

List

  • 2017/02/11

PaintsChainer - 機械学習を使って線画に色付け

機械学習に注目が集まっていますが、それによって何ができるのかは開発者のアイディア次第と言えます。分かりやすい例としては画像から情報を抜き出したり、逆に画像に情報を付与するというものです。今回紹介するPaintsChainerもそんな機械学習の実例と言えます。なんと線画に色をつけてくれるソフトウェアです。## Paint...