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

Webの記事一覧

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

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

もっと見る

List

  • 2017/05/25

Bemuse - ハマらないよう注意。Webベースの音ゲー

音ゲーは根強い人気のあるゲームジャンルです。やり方も手を使ったりバチを使う、足で行うなど様々な種類があります。手で行うものであればパソコンで再現されたソフトウェアも数多く存在します。好きな方はハマってしまうことでしょう。そんな音ゲーをWebブラウザベースで楽しめるのがBemuseです。HTML5で作られているので幅広い...

List

  • 2017/05/25

Progressive Image.js - ぼかし画像を使う画像遅延読み込み

写真コンテンツは見せ方が大事です。単純に一覧として表示しているだけではよくありません。より印象づけるための手段として、ユーザアクションと関連づけるという方法があります。そうすることでオンデマンドな情報提供ができるようになります。今回紹介するProgressive Image.jsはFacebookやMediumにインス...

List

  • 2017/05/24

Embed - Webサイトのメタ情報を取得

ソーシャルサービスなどの発展に合わせてWebサイトには多くのメタデータが埋め込まれるようになっています。それらのメタデータを用意することでよりリッチなコンテンツをユーザに提供したり、意図しない情報共有を防げるようになります。今回はそうしたWebサイトに埋め込まれた各種情報をピックアップできるEmbedを紹介します。##...

List

  • 2017/05/23

notable - Go製のシンプルなWebノートアプリ

ノートアプリケーションは世の中に多数あります。毎月のように新しいサービスが作られており、それぞれに特徴があります。どれか一つに定まらないということは、それぞれ理想とする世界が異なるためでしょう。今回紹介するのはnotable、シンプルなWebノートアプリケーションです。## notableの使い方最初にノート一覧が表示...

List

  • 2017/05/22

codepan - オフラインでも動作するJSFiddle/CodePenクローン

JSFiddleやCodePenといったサービスはとても便利です。Web上の基本要素であるHTML/CSS/JavaScriptを書いて、その場ですぐに実行できます。そのまま残しておけるので、動くデモを人に見せるのが簡単です。しかし問題はオンラインサービスゆえにインターネット接続が必要ということです。そこで使ってみたい...

List

  • 2017/05/20

Print.js - Webで任意のコンテンツを印刷できます

Webが苦手としているものの一つに印刷があります。Webサイトを印刷しようとしてデザインが崩れてしまった経験はないでしょうか。また、ごく一部だけ印刷したいのにそれもままなりません。そこで使ってみたいのがPrint.jsです。印刷対象を細かく指定できるソフトウェアです。## Print.jsの使い方一例です。PDFファイ...

List

  • 2017/05/19

Wobble window jQuery plugin - HTMLの枠がプルンプルンに

人の目を引くデザインは奇抜なものばかりではありません。普段何気なく使っているものが別な場所にも出てきたりすると驚かれることもあるでしょう。特にコンピュータ内で自然に存在するものを再現すると興味を持つ人たちがたくさんいます。今回紹介するWobble window jQuery pluginもそんなライブラリの一つです。柔...

List

  • 2017/05/18

Spotify For Everyone - Spotifyの埋め込みタグを簡単に生成

日本にも上陸したSpotifyでは音楽を手軽に楽しめます。定額制なのでいくらでも音楽が楽しめるのは便利です。基本的に会員向けのサービスではありますが、人に紹介したいと思うこともあるでしょう。Spotifyでは埋め込み用のタグを提供していますが、もっと簡単に埋め込めるようになるのがSpotify For Everyone...

List

  • 2017/05/18

Prettier - JavaScriptのコードを見やすく整形

JavaScriptは人によって書き方が変わる言語でもあります。企業によっては基準を設けたりしますが、それでもLint系で注意するのが精一杯でしょう。見づらいコードはそれだけバグをはらみやすく、システムの品質を低下させます。そこで使ってみたいのがPrettierです。JavaScript用のコード整形ツールです。## ...

List

  • 2017/05/17

Vertical Timeline - 縦型年表を作成するjQueryプラグイン

情報を時系列に沿って表現する際には年表表示が便利です。教科書などでは横型の年表が使われますが、Webにおいては横スクロールは一般的ではないため、縦型のスクロールをしながら表示されることが多くなっています。そんな縦型年表を容易に作成できるのがVertical Timelineになります。## Vertical Timel...

List

  • 2017/05/16

Sizzy - 多彩なデバイスでのWebサイト確認を簡単に

Webサイトは一つのデバイスだけで見るとは限りません。特に最近ではPC、タブレット、スマートフォンなどあらゆる大きさのデバイスで閲覧します。そうしたデバイスでの表示確認をすべての実機でやるのは現実的ではありません。そこで使ってみたいのがSizzyです。多数のデバイス幅に対応したデザイン確認ツールです。## Sizzyの...

List

  • 2017/05/16

emojielog - 絵文字を使った超シンプルな日記

絵文字は感情を表現するのに最適なツールです。あえて文字にするまでもないちょっとした感情を出したり、怒りを感じている時などあまり表に出しづらい感情も絵文字であればショックを和らげることができます。そんな仕組みを使ったのがemojielogです。絵文字で今の感情を記録するだけのシンプルなアプリです。## emojielog...

List

  • 2017/05/15

Timestrap - Django製の時間/請求管理システム

仕事の多くは時間に関係します。特にシステム開発などは各機能の実装について開発時間を計測することで見積もりの妥当性をチェックしたり、請求の源泉にしたりします。日本よりも海外ではそういう仕事の形態が多いようです。そんな時間管理と請求管理が一緒になったシステムがTimestrapです。日本でも利用できるケースは多そうです。#...

List

  • 2017/05/14

Let it snow - CSSでWebサイトに雪を降らせよう

Webサイトに雪を降らせるような効果をみせるライブラリは幾つか存在します。多くはJavaScriptを使ってごりごりと実装するのですが、あまりスマートなやり方とは言えません。今回紹介するのはLet it snow、スタイルシートを活用した降雪効果を見せるライブラリです。## Let it snowの使い方デモのWebサ...

List

  • 2017/05/13

curvejs - 曲線を使ったアニメーションライブラリ

Web上でアニメーションを描くのはとても面倒です。一度表示するだけであればこだわったリッチな描画も可能ですが、アニメーションとなると話が変わってきます。Canvasで描画している場合は、その内容を消す操作が必要です。文字が揺れるようなアニメーションを実現したかったらcurvejsを使ってみると良さそうです。## cur...

List

  • 2017/05/12

Web Design Pirate - Webサイトの一部をピックアップして再利用

Webデザインはコンポーネント指向になってきています。Web componentsという仕様も作られており、さらにこの流れは加速するでしょう。Webサイトの一部を埋め込んだり、再利用性高い部品を使うのが当たり前になっています。そんなWebサイトの一部をピックアップするのに最適なGoogle Chrome機能拡張がWeb...

List

  • 2017/05/11

ShuffleText.js - マウスオーバーでテキストシャッフル

映画などでよく見られるテキストがシャッフルされて徐々に表示されていくアニメーション。単純に文字を表示するよりもインパクトがあって思わず目を引きつけられることでしょう。そんな演出が簡単にできるライブラリがShuffleText.jsになります。## ShuffleText.jsの使い方アニメーションGIFではちょっとした...

List

  • 2017/05/11

Commento - 自分で立てるコメントシステム

ブログやニュースサイトなどコメント機能が欲しくなることは多々あります。しかし静的サイトにおいてコメントシステムのために全体をプログラマブルにするのは面倒です。そこで使えるのが外部のコメントサービスです。有名なところではFacebookのコメントやDisqusなどがあります。もし自分で構築したいならばCommentoを使...

List

  • 2017/05/10

OpenLara - トゥームレイダー風のゲームエンジン

トゥームレイダーと言えば映画化もされたくらい人気のゲームです。3Dポリゴンがまだまだ粗い時代からあり、ゲームをやらない人でもその名前くらいは知っているのではないでしょうか。そんなトゥームレイダーをWebベースで再現したのがOpenLaraになります。ララはトゥームレイダーの主人公の名前になります。## OpenLara...

List

  • 2017/05/10

React Timekeeper - Google Keepアプリにインスパイアされた時間入力UI

時間の入力インタフェースは意外と古くさくて面倒な場合が多いです。日付はカレンダーで入力できるのに、時間はドロップダウンでいちいち選択しないといけません。テキストで入れる場合も数字のみしか入力できないようにしなければならないでしょう。そんな時間入力インタフェースとして作られたのがReact Timekeeperです。Go...