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

Webの記事一覧

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

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

もっと見る

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

List

  • 2017/05/09

Pull Quote Center - 中央に引用を表示するレイアウト

HTMLはレイアウトの概念があまり強くありません。CSSを駆使すればできることもあるでしょうが、メンテナンス性が非常に悪くなったり、再利用性も低くなったりします。雑誌のようなレイアウトを再現するのは大変です。今回は2段組の雑誌構成でよくある中央に引用を表示するレイアウトを実現するPull Quote Centerを紹介...

List

  • 2017/05/08

Instascan - HTML5のQRスキャナー

QRコードを使う機会は意外と多いです。特にスマートフォンでQRコードリーダーを使えばPCや雑誌などから情報を読み取るのは簡単です。そんな中にあってはPCでもQRコードを読み取りたいと思うことがあるでしょう。もちろん専用アプリケーションをインストールすればできますが、もっと手軽にできるのがInstascanです。## I...

List

  • 2017/05/05

Mastodon Bridge - MastodonにいるTwitterフレンドを探すお手伝い

最近一気に人気が出てきたMastodonですが、他のソーシャルサービスと同様にいきなりネットワークの中に放り込まれても全く面白さが伝わりません。人と人のつながりができてはじめて楽しくなってくるものです。Twitterと似た仕組みのため、現在トライしているユーザもまたTwitterユーザが多くなっています。そこで使ってみ...

List

  • 2017/05/04

glua - ブラウザ、nodeで動く。JavaScript製のLuaVM

Luaは高速に動作するスクリプト言語で、移植性も高く、とても人気があります。nginxの拡張ができるなど、ゲームエンジンなどでもLuaによる拡張をサポートしている例が多数見られます。そんなLuaをWebブラウザやnode上で動かせるのがgluaになります。JavaScriptで書かれたLua VMになります。## gl...

List

  • 2017/05/03

mini.css - 小さくても多彩なUIを提供するスタイルシートフレームワーク

CSSフレームワークはたくさん存在します。それぞれにコンセプトがあり、使いやすいものを選択するでしょう。特にUIパターンが多いものはデザイン的に統一感が出やすく、場当たり的に素材を探さずに済むので重宝します。今回はそんな多数のUIを揃えたCSSフレームワーク、mini.cssを紹介します。## mini.cssの使い方...

List

  • 2017/05/02

OPUS - 企業のナレッジ管理システム

企業においてナレッジを蓄積するのはとても大事なことです。個人に知識がたまるだけでなく、それを全員でシェアすることができれば業務の効率化や利益の増加に大きく貢献することでしょう。そんなナレッジベースとして使ってみたいのがOPUSです。## OPUSの使い方メイン画面です。基本的にはページとWikiで構成されます。!

List

  • 2017/04/30

ngworld - Angularを使ったマインクラフト風ゲーム

マインクラフトはとても面白いゲームです。目的持って遊ぶこともできますが、むしろ自由に工作できる世界のが人気だったりします。レゴのように自由に創作できる空間は創造性を広げ、楽しく遊ぶことができます。そんなマインクラフトライクな空間をWebベースで楽しめるのがngworldです。## ngworldの使い方こんな感じの空間...

List

  • 2017/04/30

Mondrian - WebベースのリッチなSVGエディタ

Web上でドローをしようとした場合、取り得る選択肢はSVGかCanvasになります。Canvasは埋め込まれるコンテンツがバイナリになってしまいますが、SVGであればテキストベースなのが利点になるでしょう。そんなSVGコンテンツをWebベースで作成できるのがMondrianになります。## Mondrianの使い方デモ...

List

  • 2017/04/27

Mastodon - 分散型SNS

ソーシャルと言えばFacebookとTwitter、後はLINE、Instagram、WhatsApp、LinkedInなどがメジャーで、新しい芽は出づらいと考えられてきました。ソーシャル系はユーザ同士のコネクションが密で、他に出て行きづらいからです。しかし最近になって新しいSNSが注目を集めています。それがMasto...

List

  • 2017/04/27

nunuStudio - Webベースの3Dコンテンツ開発環境

3Dコンテンツは作成が難しいイメージがあります。特に作る環境を整えるのが難しく、専用のソフトウェアも高かったりします。作るためのテクニックも必要など、素人には非常に高い敷居がある分野と言えるでしょう。そんな3DコンテンツをWeb上で作成できるのがnunuStudioです。## nunuStudioの使い方nunuStu...

List

  • 2017/04/26

codewich - Web上でTypeScriptを記述して実行

Googleが社内の標準言語にTypeScriptを決定するなど、TypeScriptに対する人気が高まっています。型が決められ、各種IDEとの親和性も高く、コードを事前にチェックしたり候補を出したりと便利な機能が使えます。そんなTypeScriptをWeb上で試せるのがcodewichになります。## codewic...

List

  • 2017/04/25

Cosmo - SPA用CMS

最近はSPA(シングルページアプリケーション)が流行っています。Ajaxを使わなかったとしても一つのページだけで表現されているのは閲覧者にとっても利便性の高いものになるでしょう。そんなSPA用のCMSがCosmoになります。## Cosmoの使い方デモページです。大きな写真が印象的です。!

List

  • 2017/04/25

Financier - Ruby製のビジネス管理プラットフォーム

ビジネスではデータとステータスを適切に管理するのが大事です。顧客データや商品データはもとより、作業タスクなどもきちんと管理されていなければなりません。一元的に管理されているとすぐに利用できます。そんなビジネス管理のプラットフォームがFinancierになります。## Financierの使い方基本的に全体として似たよう...

List

  • 2017/04/23

Planck.js - JavaScript製、2D用物理エンジン

Web向けにゲームを作ったり、ユーザの操作に合わせてオブジェクトが動くようにしたりするのに必要になるのが物理エンジンです。単に横滑りするのではなく、他のオブジェクトや重力の影響を計算することでよりリアルなゲームになります。そこで使えるのがPlanck.jsです。2D向けの物理エンジンです。## Planck.jsの使い...

List

  • 2017/04/21

across-tabs - クロスオリジンをサポートしたタブ間通信ライブラリ

Webシステムを開発していて、ボタンを押したりリンクをクリックしたらタブが開くようにすることは多々あります。しかし無尽蔵に開いてしまうとメモリを食いますし、ユーザに嫌がられます。そこで使ってみたいのがacross-tabsです。タブ同士の通信を可能にするライブラリです。## across-tabsの使い方新しいタブを開...

List

  • 2017/04/19

BigPicture - YouTubeやVimeoにも対応した画像/動画表示ライブラリ

画像や動画は見せ方が大事です。単にリンクを貼って、クリックしたら画像だけが表示される…なんてのはよくありません。最近は画像の解像度が上がっているので、サムネイルと実際の写真とをうまく見せる必要があります。今回紹介するBigPictureはWebベースの画像、動画表示ライブラリになります。## BigPictureの使い...

List

  • 2017/04/18

Furikaerin - KPTを使って業務を改善しよう

KPTという活動があります。アジャイル開発のバックログと一緒に語られることが多く、KEEP(良かったこと)とPROBLEM(問題点)、TRY(次に試すこと)の3つを書き出すというものです。書き出すのがキーで、それによって今回の活動の振り返りと次に向けてやることが可視化されます。そんなKPTをWebベースで手軽に行えるよ...