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

Webの記事一覧

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

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

もっと見る

List

  • 2017/08/17

Uppy - クラウドストレージも使える高機能なファイルアップローダー

HTML5は素のままではあまりUXは向上していません。APIを使って開発者自身で拡張しなければなりません。しかしその開発もそう簡単ではありません。そこですでに他の方が開発したものを積極的に使っていくのが良いでしょう。今回は多機能なファイルアップロード機能が手に入れられるUppyを紹介します。## Uppyの使い方利用し...

List

  • 2017/08/16

Particle - YouTubeをもっと便利にするブックマークレット

YouTubeをよく使う人ほど、あのUIに不満もあるでしょう。一昔前であれば与えられたもの以上のことは何もできなかったですが、今はユーザ自身の手でカスタマイズできるのです。今回紹介するParticleはそんなYouTubeのUIをより使いやすくしてくれるソフトウェアです。## Particleの使い方設定画面です。イン...

List

  • 2017/08/15

CSS Browsers - CSSで作られたブラウザウィンドウ

GUIのWebブラウザの歴史は長いです。Mosaicの時代から考えるとすでに25年近いのではないでしょうか。その後NetscapeやFirefox、IE、Safari、Opera、Chromeなど様々なブラウザが誕生しました。そんなブラウザの遍歴をうかがい知れるのがCSS Browsersです。なんとCSSで作られたブ...

List

  • 2017/08/13

BorderColorAnimate - 枠線をアニメーションさせるjQueryプラグイン

ユーザのアクションに対して反応することで、相手のストレスを軽減できます。特にAjaxを使うSPAなどでは通信状態を適切に表示しておくのが大事です。何の反応もなかったら、ユーザは何度もボタンを押してしまうでしょう。一例として紹介したいのがBorderColorAnimateです。枠をアニメーションさせるという面白い方法で...

List

  • 2017/08/13

Space Invaders - プログラミング学習に使えるHTML5ゲーム

プログラミングを学習する上で良い題材があるとスムーズです。特に自分が作りたいものに合っていると、そのカスタマイズができたり、より学習意欲が高まるはずです。今回はWebブラウザ上でゲームを作る際の学習教材になるSpace Invadersを紹介します。## Space Invadersの使い方スペースキーを押すと開始しま...

List

  • 2017/08/12

JS-XLSX - Web上でExcelファイルを読み書き

なんだかんだ言ってもシステム開発においてExcelファイルはよく使われます。しかしサーバサイドでExcelファイルを生成したり、読み取ったりするライブラリをインストールするのは嫌なものでしょう。そこで使ってみたいのがJS-XLSXです。WebブラウザベースでExcelファイルの読み書きができます。## JS-XLSXの...

List

  • 2017/08/09

Google Pacman - 今でも遊べるGoogle製パックマン

かつてGoogleが作成し、世界中の生産性を低下させたのがWebベースのパックマンです。パックマンの○周年を記念して作られたものですが、みんながこぞってチャレンジし続けました。そんなパックマンを今でも遊びたい方がいるならばGoogle Pacmanにトライしてみましょう。## Google Pacmanの使い方メイン画...

List

  • 2017/08/07

AniJS - 効果的なアニメーションとUIコンポーネント集

最近はWebデザインと言っても静的なものだけでなく、クリックやマウスオーバー時などのイベントに基づくアニメーションなども必要になっています。それによって一歩先行くデザインに仕上がります。しかしアニメーションはちょっとした違和感などで台無しになってしまう可能性も秘めています。今回はそんな失敗を防ぐべく、AniJSを紹介し...

List

  • 2017/08/06

VideoEditorJS - Webベースの動画編集

Webブラウザ上でできることがどんどん増えています。さらにローカルアプリケーションではあるものの、ElectronのようにWeb技術で動くソフトウェアがあったり、Cordovaのようにスマートフォンアプリも作れます。今回紹介するVideoEditorJSはWebブラウザ上でビデオの編集ができてしまうソフトウェアです。#...

List

  • 2017/08/06

iPhone Inline Video - iPhone上で動画を埋め込み再生

iPhoneで動画を再生すると自動的にフルスクリーンになってしまいます。アプリでは最初はインライン再生できるものも出てきています。これらは独自に実装しているケースです。Web上でも同じようにインライン再生できるようにするライブラリがiPhone Inline Videoです。## iPhone Inline Video...

List

  • 2017/08/03

DoppioJVM - JavaScriptで作られたJavaVM

JavaといえばかつてはWebブラウザ上でも動いていました。Javaアプレットと呼ばれる技術で、とんでもなく遅かったり、セキュリティホールになったりと悩みの多かった存在ではないでしょうか。HTML5になり、プラグインが軒並みなくなっていく中でJavaアプレットも動く機会がなくなっています。そんな中、安全にJavaが実行...

List

  • 2017/08/02

Chameleon.js - 画像からカラーパターンをピックアップ

Webサイトのデザインを考える上で色彩は重要なパーツです。それだけに慎重に選ばざるを得ません。同系色でまとめれば良いという訳でもなく、一見すると合わないような色合いでも意外とマッチするケースもあります。そんなカラーパターンを既存の画像からピックアップしてくれるのがChameleon.jsです。## Chameleon....

List

  • 2017/08/01

p5.js - Processingライクに使えるグラフィックスライブラリ

Processingといえばグラフィカルなアート作品を生み出す言語として知られています(またはArduinoで使える言語として知っている方も多いでしょう)。しかし専用の言語を覚えないといけないという点において利用を躊躇してしまっている方も多いはずです。そんな方に使ってみて欲しいのがp5.jsです。グラフィックス、インタ...

List

  • 2017/07/31

Sirius UI - Bootstrap/Vue.jsを組み合わせたUIデザインテンプレート

UIライブラリは幾つ知っておいても役立つものです。Webサイトの雰囲気に合わせてピックアップしたり、機能によって差別化もできるでしょう。すべての要件を一つのUIフレームワークで達成できる訳ではありませんので、色々知っておくとぴたりと当てはまる場面があるはずです。今回はSirius UIというUIフレームワークを紹介しま...

List

  • 2017/07/31

ExportToExcel - Web上でデータをExcelにエクスポート

Webブラウザでデータをダウンロードしたいというニーズはよくあります。データフォーマットとしては幾つもありますが、特に要望が多いのはExcelフォーマットではないでしょうか。CSVでも良いですが、より使いやすいフォーマットのはずです。そこで使ってみたいのがExportToExcelです。クライアントサイドでExcelフ...

List

  • 2017/07/30

pell - 1KBの軽量なWYSIWYGエディタ

Webでコンテンツを公開するのが当たり前になっている一方、HTMLを習得している割合はそれほど高くありません。そのため、コンテンツを作成する負荷を軽減するためWYSIWYGエディタの存在は大事になっています。今回はpellというエディタを紹介します。わずか1KBという軽量なライブラリです。## pellの使い方こちらが...

List

  • 2017/07/29

BotUI - Web上で作るボット対話UI

ボット系サービスにおいて大事なのはボットとの対話インタフェースです。何かこちらが疑問を投げかけると、それに対してボットが答えます。最近の質はAIによって急激に向上していますが、対話インタフェースはずっと昔から変わりません。今回紹介するBotUIはそんなボットとの対話インタフェースをWeb上で手軽に実装できるライブラリで...

List

  • 2017/07/28

gpu.js - WebブラウザでGPUを手軽に扱えるようにするライブラリ

GPUは単純な計算処理などを行うのに適しています。アニメーションのような処理も得意です。最近ではAIのモデル作成などにGPUが注目されていますが、CSS3アニメーションなどWebブラウザでも利用できる場面が数多くあります。今回紹介するgpu.jsはそんなGPUによる計算処理を手軽に実現できるようにするJavaScrip...

List

  • 2017/07/27

Comicbed - ブラウザベースのコミックリーダー

電子書籍は様々なデバイスで表示できるようになっています。DRMが使われているとWebブラウザで表示するのは難しいですが、PDFであれば殆どのWebブラウザで表示できますし、PDF.jsのようにPDFをJavaScriptから扱えるライブラリもあります。今回はそんなPDFが使えるコミックリーダー、Comicbedを紹介し...

List

  • 2017/07/26

repost - みんなで投稿する日報システム

日報が日本独自のシステムなのか分かりませんが、日々の作業記録をつけるのは大事なことです。記録しておかないと後で振り返ることもできず、自分の成長を知ることさえできなくなります。蓄積は日々行わなければなりません。そこで使ってみたいのがrepostです。repostは日報システムになります。## repostの使い方repo...