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

Webの記事一覧

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

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

もっと見る

List

  • 2017/11/08

FollowCursor - マウスカーソルに合わせてDOMを変形

WebはJavaScriptを活用することでインタラクティブな効果が実現できます。ユーザにとってみれば、自分の起こしたアクションに対して反応があるのは嬉しいことです。ユーザ体験という意味でも見逃せません。今回はユーザのマウス操作を追従してくれるFollowCursorを紹介します。DOMの形をマウスに合わせて変更できま...

List

  • 2017/11/08

text-map-kuromoji - Web上で形態素解析&ビジュアライズ

形態素解析は日本語のテキストを扱う上でとても重要な技術になります。しかし環境をセットアップしたり、解析結果からどう情報をピックアップするかなどを分析する必要があります。そうした形態素解析を手軽にWeb上で行い、さらに結果の分析が容易にできるのがtext-map-kuromojiです。## text-map-kuromo...

List

  • 2017/11/07

accessibilityjs - JavaScriptでできるアクセシビリティチェック

Webが広くあまねく使われるようになったことで、アクセシビリティが重要視されるようになっています。スクリーンリーダー的なものにきっちりと対応するのも大事ですが、altやtitle要素を追加すると言った簡易的な対応もできます。今回はJavaScriptでできるアクセシビリティチェック、accessibilityjsを紹介...

List

  • 2017/11/07

Temporalis - Webカメラの映像をスライスして描画

Webカメラの映像はHTMLからgetUserMediaで取り込むことができます。そのままvideoタグに当てはめたり、一部だけ切り出してCanvasや画像のソースに当てることも可能です。しかし見たまま使っても面白くありません。そこで一例としてTemporalisを紹介します。Webカメラの映像に面白い効果を施してくれ...

List

  • 2017/11/06

Mini Tetris - わずか506バイトのテトリス

25年以上前のコンピュータであれば、メモリやHDDの容量が少なかったため、なるべく節約したコーディングが心がけられていました。しかしそれから何年も経ち、変数名の長さをいちいち気にするような人はいないでしょう。しかしそんな時代だからこそ、サイズにこだわる面白さがあると言えます。Mini Tetrisはなんと506バイトの...

List

  • 2017/11/06

Froala Design Blocks - コーポレートサイトやサービスサイトを作るのに使えるBootstrapコンポーネント集

Bootstrapを使ってWebサイトを構築する例は多いですが、凝ったデザインを考えると足りない部品が出ることがあります。また、色やサイズについてもっとこだわりたいと考えることもあるでしょう。そうした時に使えるのがFroala Design Blocksです。実に170を超えるデザイン要素を提供しています。## Fro...

List

  • 2017/11/04

KEditor - 複雑なデザインもこなせるWYSIWYGエディタ

技術者以外の方でWebページを作成する時にはオーサリングツールを使うのが一般的です。また、ちょっとしたコンテンツの修正であればWYSIWYGエディタを使いますが、あまり凝ったデザインには対応できません。そこで使ってみたいのがKEditorです。Webベース、ドラッグ&ドロップで自在にコンテンツを作成できます。## KE...

List

  • 2017/11/03

HAIK - Pukiwikiの流れを汲むホームページ作成ツール

今ではあまり使われていませんが、WikiWikiWebというのはすごい概念でした。Webブラウザさえあればコンテンツが自由に作成でき、ページが存在しなかったら作れば良いだけという手軽さが素晴らしかったです。日本で最も使われていたのがPukiwikiではないでしょうか。そんなPukiwikiをベースとして作られた手軽なホ...

List

  • 2017/11/01

Lottery - 何が当たるかな。Webベースの抽選マシーン

みんな大好き抽選会。何かいいものが当たらないかとわくわくしながら待っていることでしょう。主催者側にとっては、そのワクワク感をさらに盛り上げるための工夫が必要になります。今回はLotteryを紹介します。見た目の演出も楽しい、抽選マシーンです。## Lotteryの使い方実際に動いているところです。!

List

  • 2017/10/28

Firefox Send - Mozilla製のセキュアなファイル共有

最近はプライベートでメールをあまり使うことがありません。チャットなどでメッセージをやり取りすることが多いですが、ファイルの送信で困ることがあります。サイズ制限や送れるファイルの種類に制限があると面倒です。そこで使ってみたいのがファイル共有サービスになります。今回はMozillaの開発しているFirefox Sendを紹...

List

  • 2017/10/27

Smooth Scrollbar - スムーズなスクロールの制御

Webページは大抵縦長になっています。そしてマウスなどのスクロールを使って下の情報を表示します。つまりスクロールという機能はブラウジングの基本とさえ言えるでしょう。そんなスクロールを標準のまま使うのではなく、もっと細かく制御できるのがSmooth Scrollbarです。## Smooth Scrollbarの使い方様...

List

  • 2017/10/26

bubbly-bg - 背景でバブルが動くアニメーション

Webは雑誌や新聞などと異なり、ダイナミックに動かせるのが魅力です。さらにテレビと異なり、ユーザの操作によって表示を変化させられます。動画サイトなどだけでなく、普通のWebサイトだってできるのです。そんな特徴を活かしたのがbubbly-bgです。背景にバブルを表示し、アニメーションさせます。## bubbly-bgの使...

List

  • 2017/10/24

scrollToClip - スクロールで画像の色彩を反転

JavaScriptやCSS3によってWebの表現力は向上しています。例えばスクロールによって表示が変化するパララックスエフェクトもその一つです。スクロールによってコンテンツが変化するのは見た目のインパクトも強いです。今回はスクロールによって色彩を変化させるscrollToClipを紹介します。## scrollToC...

List

  • 2017/10/21

AR.js - Webブラウザ向けのAR

iOS11のMobile SafariからようやくgetUserMediaが使えるようになりました。これによってSafariからもカメラにアクセスできるようになり、Webカメラのように動かせるようになります。そしてその恩恵を大きく受けそうなプロジェクトがAR.jsです。Webブラウザ向けのARライブラリです。## AR...

List

  • 2017/10/20

FlowChat - Java製のスレッド式フォーラム

オンラインコミュニティの基本はフォーラムです。幾つかの種類がありますが、その多くはスレッド式になっており、新しい話題が上に上がってきます。Stackoverflowあたりから投票する仕組みも取り入れられました。そんなフォーラムソフトウェアの新版としてFlowChatを紹介します。Javaで作られたフォーラムです。## ...

List

  • 2017/10/19

IDE - Go向けのWeb IDE

最近ではWebブラウザが高性能になっており、多くのアプリケーションがWeb化しています。開発環境であるIDEについてもその例外ではありません。コンパイルが伴うような言語であったり、開発環境を整えるのが面倒な時にWeb IDEはとても便利です。今回紹介するのはIDE、Go向けのWeb IDEになります。## IDEの使い...

List

  • 2017/10/16

Tudu - Todoistクローン

MOONGIFTではタスク管理にTodoistを採用しています。かれこれ4年くらいずっと使い続けています。最近ではGoogleカレンダーとの連携機能も追加され、手放せないツールになっています。しかし企業によっては導入できないケースもあるでしょう。そこで試してみたいのがTudu、Todoistクローンです。## Tudu...

List

  • 2017/10/15

Franchise - 多数のデータベースに対応したSQLノートブック

SQLを覚えると実務で使える様々なデータを取得できるようになります。毎回同じようなSQLを記述するのが面倒で、テキストファイルに定番のSQLをメモで残している方も多いのではないでしょうか。そんな方にお勧めなのがFranchiseです。SQLを残しておけるノートブックです。## Franchiseの使い方メイン画面です。...

List

  • 2017/10/12

Carbon - コードを綺麗な画像に変換

SDKやフレームワーク、ライブラリなどを公開しているサイトであれば大事なのは実際の使い方を示したコードでしょう。それもただテキストで書いてあるより、格好良いフォントや色合いで見せたいと思うはずです。そこで使ってみたいのがCarbonです。コードを格好良い画像にしてくれます。## Carbonの使い方実際に作成した画像で...

List

  • 2017/10/11

Draggable JS - HTML5のドラッグ&ドロップを多機能に

HTML5の新しい機能の一つにドラッグ&ドロップAPIがあります。Gmailなどでは当たり前になっていますし、WYSIWYGな機能を提供する上では必須の存在です。Webアプリケーションでは大事な機能でしょう。そんなドラッグ&ドロップAPIを多機能にしてくれるライブラリがDraggable JSです。## Draggab...