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

Webの記事一覧

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

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

もっと見る

List

  • 2017/03/24

LayaAir - 一つの言語からFlash/HTML5/モバイル向けにコード出力できるアニメーションエンジン

HTML5によって(またはiOSによって)Flashは絶滅に瀕しています。問題はFlashがなくなった後の世界でいかに効果的なアニメーションやインタラクティブな操作を実現できるかです。HTML5でできますが、非常に面倒でしょう。そこで使ってみたいのがLayaAirです。ゲームやアニメーションで使えるレンダリングを行って...

List

  • 2017/03/23

Shape Shifter - 異なるSVGに変化するアニメーションを生成

SVGとこれまでの画像バイナリと決定的に違う部分はなんと言ってもプログラムから操作しやすいということでしょう。アニメーションの定義などはSVG内でもできますが、より詳細なアニメーションはJavaScriptで制御できます。そんなSVGを使って形状変化するアニメーションを定義できるのがShape Shifterです。##...

List

  • 2017/03/22

ag-Grid - 業務要件の殆どを満たせそうなグリッドライブラリ

業務システムなどをWebベースで作っていると求められるのがリッチなグリッド機能です。ヘッダの固定、フィルタリング、チェック、カラムの順番変更、一回あたりのデータ表示件数変更…挙げれば実にきりがありません。そこで使ってみたいのがag-Gridです。ほぼこれでニーズを満たせるのではないかというくらいリッチなグリッド機能を提...

List

  • 2017/03/21

CanvasEffect.js - Canvasで画像にエフェクト

HTML5のCanvasを使うと画像を取り込んで表示し、エフェクトを行うことができます。しかしCanvasの扱いは意外と面倒で、コードも多くなりがちです。そのためメンテナンス性が低くなってしまいます。そこで使ってみたいのがCanvasEffect.jsです。画像を編集するための専用ライブラリとなっています。## Can...

List

  • 2017/03/21

Djvu HTML5 browser - WebベースのDjvuビューワー

Djvuというファイル形式があります。共通したDjvuビューワーをインストールしておけば、どのプラットフォームでも同じように文書を閲覧できるというものです。つまりPDFのような形式で、圧縮率に優れていると言われています。PDFに比べるとシェアは低いですが、Djvu HTML5 browserを使えばWebブラウザ上でD...

List

  • 2017/03/20

zPath.js - SVGをアニメーションしながら描画

SVGの良いところはベクターベースのデータである点と、内容がXMLなのでプログラマブルに操作可能ということです。バイナリデータと異なり、一部だけを描画したり色を変えると言ったことも簡単にできます。そこで使ってみたいのがzPath.jsです。SVGを読み込んでアニメーションしながら描画してくれます。## zPath.js...

List

  • 2017/03/19

Storytime - 書きやすさに特化したブログシステム

みんな誰しもが自分だけのストーリーを持っています。そんなことはない、私には何も語れるものはないと思う人がいるかも知れませんが、自分の常識は他人の非常識だったりします。言ってみると意外と驚かれる話題がきっとあるはずです。そんな自分の思いを綴れるサービスがStorytimeです。Medium風のライティングが可能なCMSと...

List

  • 2017/03/17

Export Tool for Vector Tiles to SVG - タイルデータを一つのSVGに統合

SVGはディスプレイの高画質化が進んでいく中で、バイナリに変わる画像フォーマットとして有力です。JavaScriptで動的に書き換えたり、拡大や縮小にも強い作りとなっています。今後ますます広がっていくことでしょう。そうした中面白そうなのがExport Tool for Vector Tiles to SVGです。地図デ...

List

  • 2017/03/16

Sly - 上下左右のスクロールを便利にするJavaScriptライブラリ

Webページの多くは縦長に作られています。縦方向のスクロールについてはホイールなどを使って簡単にできますが、それでもあまりに長いと操作が面倒です。さらに横向きのスクロールはストレスでしょう。そこで使ってみたいのがSlyです。上下または左右など一方向でのスクロールナビゲーションが便利になるライブラリです。## Slyの使...

List

  • 2017/03/16

Homeland - Rails製のシンプルなデザインのフォーラム

掲示板はインターネットサービスの基本とも言えます。インターネットが出たての時から存在しましたし、今なお使われ続けています。基本はテキストながら、画像や動画を扱えるものもあります、多様性があります。Homelandはそんなフォーラムシステムで、Ruby on Railsベースで作られています。## Homelandの使い...

List

  • 2017/03/13

Flatris - React製。プログレッシブWebなテトリス

HTML5がどんどん高機能化、表現力が高くなっているのに合わせて、これまでローカルアプリケーションでしか実現できなかったようなことがWeb上でできるようになっています。ゲームもその一つです。今回紹介するFlatrisはプログレッシブなWebテトリスです。HTML5でさくさくと遊べます。## Flatrisの使い方ゲーム...

List

  • 2017/03/12

ScalaFiddle - Scala.jsをWeb上で試す

Scala.jsを使うと、普段使い慣れたScalaの文法でJavaScriptが書けるようになります。とは言え、すべてがScalaと同じように書けるわけではありません。Webならではの作法だって存在します。そこで使ってみたいのがScalaFiddleです。あらかじめWebブラウザ上で手軽に試せるScala実行環境です。...

List

  • 2017/03/11

box - ハマりすぎ注意。Webベースの2Dパズルゲーム

もしこの記事を読むのが仕事中であれば、さっさと別なところに移動した方が良いでしょう。プライベートな時間で暇な時にぜひ読んで欲しいです。単純なゲームというのはそれくらい中毒性があるものです。今回紹介するオープンソース・ソフトウェアはbox、Webベースの2Dゲームです。## boxの使い方boxのゲーム画面です。WASD...

List

  • 2017/03/08

Kanboard - カンバンをベースとしたプロジェクト管理

プロジェクト管理ソフトウェアにおいてカンバンは欠かせない存在になってきています。特にアジャイルでスプリント管理しているケースは重宝するでしょう。さらに開発以外のタスクについてもカンバンは便利です。そんなカンバンをベースとして発展しているプロジェクト管理システムがkanboardです。## kanboardの使い方ダッシ...

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...