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

Webの記事一覧

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

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

もっと見る

List

  • 2016/12/26

Polr - 独自に立てる短縮URLサービス

短縮URLサービスは多数存在します。元々はTwitterなど文字数制限があるサイトで使われることが多かったですが、今ではチャットでシェアするのに使ったり、URLを入力しやすくするためにも使われます。そんな短縮URLサービスを自分で立ち上げたいならばPolrを使ってみてはいかがでしょうか。## Polrの使い方デモです。...

List

  • 2016/12/25

Radiobox.css - ラジオボタンに選択時のアニメーションを追加

フォームで選択した際に何のフィードバックもないと不安になってしまいます。文字を入力していれば分かりやすいのですが、マウスでクリックした時に適切なフィードバックは必要でしょう。今回はラジオボタンにおける選択時のアニメーションを提供するRadiobox.cssを紹介します。## Radiobox.cssの使い方前半の6つで...

List

  • 2016/12/25

Native Javascript for Bootstrap - jQuery非依存のBootstrap用JavaScript

Bootstrapを使っているプログラマーは多いと思いますが、大きな不満の一つにBootstrapのJavaScriptはjQueryが必須であるという点があります。先進的なデザインフレームワークを使っているのに、今なおjQueryを使い続けなければならないのが苦痛です。そこで使ってみたいのがNative Javasc...

List

  • 2016/12/23

viewScroller.js - スムーズなコンテンツ切り替えライブラリ

Webは情報がURLごとに区切られるのが基本で、そのためページが切り替わる度に頭がリフレッシュしてしまいます。その結果、離脱してしまったり前後関係がうまく伝わらなかったりします。そうならないためには情報の連続性が大事になります。今回はそれに使えそうなviewScroller.jsを紹介します。## viewScroll...

List

  • 2016/12/21

Quick Tetris - Web製ですぐに遊べるテトリス

テトリスは永遠です。誰でもすぐに遊び方が覚えられる上、中毒性があります。遊び手としてもちろん面白いのですが、開発者として見るとどうでしょうか。実際処理としてはもの凄く難しい訳ではなさそうです。作ろうと思ったら作れそうな気がしませんか。そこで参考にしたいのがQuick Tetrisです。Webベースで動くテトリスです。#...

List

  • 2016/12/21

Islands - 自然な形の島を生成

自然物をコンピュータ上で再現するというのは意外と難しいものです。リアルの世界では一定の法則がありそうでない(またはあるのかも)仕組みに沿って物が形成されます。樹木であったり、雲の形などはよくある例です。その一つとして陸の形があります。陸の形は波風によって浸食され、火山や地震によって隆起したり逆になくなったりします。そん...

List

  • 2016/12/20

Power Touch - スマートフォンを拡張キーボードとして使う

TouchBarはその部分自体が小さなコンピュータになっており、本体とは切り離された存在です。その可能性として、二つのコンピュータを組み合わせた利用法が考えられます。タッチを通じてメッセージを飛ばし合うことで面白い処理ができるようになるかも知れません。そんなTouchBarにインスパイアされて作られたのがPower T...

List

  • 2016/12/18

dboxserver - Dropboxの公開フォルダに正しいmimeTypeを

DropboxがHTTPベースでのファイル公開機能を停止しました。HTMLやJavaScriptファイルについては適切なmimeTypeが与えられず、ダウンロードになってしまいます。セキュリティ上の問題と思われますが、不便を感じている人も少なからずいるのではないでしょうか。HTMLをさくっと公開できる環境は便利でした。...

List

  • 2016/12/18

Really Simple Weather - Web APIを使って簡単に天気情報を取得

インターネットはリアルと対極にあると考えがちですが、実際にはリアルを補完する存在として使われることのが多いです。スマートフォンでは天気アプリが使われることが多く、Yahooの雨雲レーダーのように5分後、10分後の天気が気になるケースはよくあります。そんな訳で天気情報は以外とオンラインでもウケが良いです。もしWebサイト...

List

  • 2016/12/16

ZangoDB - IndexedDBをMongoDB風に操作

HTML5ではKVSとして IndexedDBという機能が提供されています。localStorageなどよりも多くの情報を保存したり、検索したりすることもできるので便利に使えます。しかし使い方を覚えるのが若干面倒です。そこで使ってみたいのがZangoDBです。IndexedDBをMongoDB風のAPIで操作できるよう...

List

  • 2016/12/15

Scrum Board - カンバン機能だけを取り出したJavaScriptライブラリ

GitHubがIssuesをカンバン風に表示する機能を提供するようになっていますが、Issuesを使っていない場合もあります。自社のタスク管理を使っていて、カンバン機能だけを取り入れたいと考える人もいるでしょう。そんな方に使ってみて欲しいのがScrum Boardです。JavaScript製のカンバンライブラリです。#...

List

  • 2016/12/14

concatss - 複数の画像をくっつけて一つの縦長画像に変換

縦長の画面をまるごとスクリーンショットを撮りたいと思っても、OS自体がそういった機能を提供していないことがあります。Webブラウザはどうにかなりますが、例えばiOSではそんな機能はありません。そこで使ってみたいのがconcatssです。複数の画像をアップロードして、一つの縦長画像に変換します。## concatssの使...

List

  • 2016/12/13

katatema - Reactを使った小さな静的サイトジェネレータ

Reactを使うとなんとなくシステムが大事になってしまう雰囲気があります。そのため、大型なWebアプリケーションでないと使うのを控えてしまうでしょう。もっと手軽に小さなツールでも使えると便利なはずです。そこで使ってみたいのがkatatemaです。Reactを使った静的サイトジェネレータです。## katatemaの使い...

List

  • 2016/12/12

Timegrid - PHP製の予約管理システム

リアルとネットを繋ぐサービスの一つが予約システムではないでしょうか。レストラン、病院、アクティビティ、旅行…多数の予約システムがオンラインにつながり、ネット上から予約できるようになっています。そんな予約システムを導入したかったらTimegridを検討してみてはいかがでしょう。PHPですぐに導入できそうです。## Tim...

List

  • 2016/12/12

traquer - Web上の操作を記録&再生

Webページではマウス操作やキーボード入力が折り混ざるので、どう操作したことによって不具合が出たかという再現するのが難しいことがあります。しかしユーザの操作の中に、解決のヒントがあるはずです。そこで使ってみたいのがtraquerです。Webページにおける操作を記録、再生できるライブラリです。## traquerの使い方...

List

  • 2016/12/11

WikipediaP2P - P2Pを使ってWikipediaを閲覧

P2Pには大きな可能性が秘められています。通常のWebサイトのようにサーバに対して多数のクライアントが紐付く形では、常にサーバの性能がボトルネックになることでしょう。今はそういった形式よりも分散型のが主流です。そんな実験的な分散型システムをWikipediaに取り入れたのがWikipediaP2Pです。## Wikip...

List

  • 2016/12/11

X-RAY - Webデザインのお供に使いたいグリッド表示

Webデザインを行っていて、最終的な微調整はWebブラウザ上で実際に表示しながら行うでしょう。そうした時にほんの少しのずれなどを判断する際に画面に目を近づけるのは効率的とは言えません。ぜひX-RAYを使って見やすいWebデザインを行っていきましょう。## X-RAYの使い方X-RAYを実行したところです。グリッドが表示...

List

  • 2016/12/10

GIFit! - Google Chrome上でYouTube動画をアニメーションGIF化

世にあるアニメーションGIFはとても面白いものが多いです。動画のハイライトシーンだけを切り出して、さらにそれを何度も繰り返し見せることで面白さが増幅します。しかし自分で作ろうと思ったら意外と面倒です。そこで使ってみたいのがGIFit!です。Google Chrome上で動き、動画はYouTubeを使います。## GIF...

List

  • 2016/12/09

Joruri Mail - 企業/組織で使える日本製のWebメーラー

企業において、メールクライアントをどうするかは大きな問題です。個別にインストールするソフトウェアは管理が煩雑になったり、設定を行うのが大変です。そこでWebメーラーを採用するケースが増えています。今回紹介するJoruri MailもそんなWebメーラーの一つです。しかも日本製なので、日本企業のニーズに合っていると思われ...

List

  • 2016/12/07

Accessibility Developer Tools - アクセシビリティをチェックできるGoogle Chrome機能拡張

今後のWebではアクセシビリティが求められるようになるでしょう。Webは健常者のためだけでなく、広くあまねく使われるようになっているからです。そこでアクセシビリティを高めるために使いたいのがAccessibility Developer Toolsです。Google Chromeで簡単にアクセシビリティをチェックできま...