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

Webの記事一覧

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

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

もっと見る

List

  • 2016/11/16

Builderscon session timer - Builderscon公式(?)セッションタイマー

2016年12月に第一回目が開催されるBuilderscon

List

  • 2016/11/15

PDFJSAnnotate - WebベースでPDFに注釈

FirefoxではPDFの表示にpdf.jsを採用しています。表示は問題なく、普通に表示できます。さらにJavaScriptベースなので、外部からの操作もこれまでに比べると大幅に楽です。Web標準の技術で実装すると大きな恩恵があります。そんなpdf.jsで表示されたPDFに対して注釈をつけられるのがPDFJSAnnot...

List

  • 2016/11/15

JointJS - 多彩な図を描けるJavaScriptライブラリ

Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図...

List

  • 2016/11/14

Shuffle.js - ダイナミックなフィルタ/ソートライブラリ

多数のリストの中から目的のものを探す際に、多くの人が目検でチェックしたり、Webブラウザのテキスト検索を使ったりします。これは非効率的で、面倒です。技術の力でもっと効率的にすべきでしょう。とは言え、作り込むのは意外と面倒だったりします。そこで使ってみたいのがShuffle.jsです。## Shuffle.jsの使い方最...

List

  • 2016/11/14

プリザンター - .NET製の使いやすいチケット管理

プロジェクト管理は何のためにあるのか、それはスムーズなプロジェクト運営を実現するためにあります。入力やチェックにストレスを感じたり、工数がかかりすぎるものは採用すべきではありません。そうした管理者が好むようなシステムは総じて導入はされても運用で使われないものです。そこで今回はプリザンターを紹介します。日本製のチケット管...

List

  • 2016/11/13

Parallel.js - マルチコア処理が容易になるJavaScriptライブラリ

JavaScriptは基本的にシングルスレッドです。そのため、一つの処理に時間がかかっていると画面が固まってしまいます。しかしその壁を乗り越えられる技術があります。それがWebWorker APIです。個人的に使いこなせていない技術なのですが、Parallel.jsを使えば実装が容易になるかもしれません。## Para...

List

  • 2016/11/12

Gitgraph.js - Web上でGitリポジトリのグラフを描く

Gitはフォークしたりブランチを作って開発するのが常なので、枝分かれしたり合流したりしながら開発が進んでいきます。長い履歴の中で描かれるグラフに美しさを感じる人も多いのではないでしょうか。今回はそうしたGitグラフを描くJavaScriptライブラリ、Gitgraph.jsを紹介します。## Gitgraph.jsの使...

List

  • 2016/11/08

Notification Logger - console.logとデスクトップ通知へ同時にメッセージ

Webアプリケーションのデバッグを行う際には開発者ツールが使われます。多くはconsole.logを使ってデバッグメッセージを確認するでしょう。しかし毎回開発者ツールを開くのにうんざりしている人もいるはずです。そこで使ってみたいのがNotification Loggerです。コンソールへのログと同時にデスクトップ通知も...

List

  • 2016/11/06

jquery.tabSlideOut.js - クリックするとスライド表示されるコンテンツ

少し前にはWebサイトでUserVoiceのフィードバックウィジェットをつけているサイトがよく見られました。サイトの右端、左端などにぴったりと表示されて、クリックするとフォームが表示されるというものです。あのような表示を再現できるのがjquery.tabSlideOut.jsです。任意のコンテンツが表示できるのでフォー...

List

  • 2016/11/06

realize - Goの自動ビルド環境

Goのビルドを行う場合、コマンドを使って行うのが基本です。多くのコンパイル系プログラミング言語ではそうやって開発するでしょう。しかし毎回入力するのは面倒になってくるのも事実です。そこで使ってみたいのがrealizeです。Goプロジェクトのファイル変更をウォッチして自動コンパイルしてくれます。## realizeの使い方...

List

  • 2016/11/05

ttyd - Webブラウザからターミナル操作を可能に

ライブコーディングなどで度々あるのがターミナルを開いてその画面を見せると言った手法です。しかし文字が小さかったり、やっていることが分かりづらかったりと面白さがなかなか理解できなかったりします。そこで使ってみたいのがttydです。ttydはttyをWebブラウザから操作できるようにするソフトウェアです。## ttydの使...

List

  • 2016/11/03

Hyperform - Webフォームの入力チェックライブラリ

Webフォームにおける入力検証の仕組みは大事です。一度サーバに送信してからエラーを返す方式はユーザのストレスも大きくお勧めしません。サーバ側での入力チェックは必要ですが、ユーザビリティのためにWebブラウザ側でも入力チェックをしましょう。今回はそんな入力チェックを提供するJavaScriptライブラリ、Hyperfor...

List

  • 2016/11/02

exerslide - React製のHTMLプレゼンテーション作成ツール

HTMLのスライドをよく見かけるようになってきました。派手なアニメーションはなくとも、作成のしやすさであったりデザインのカスタマイズが容易なのが利点です。オンラインでの公開も簡単です。今回はFacebookインキュベーターで生まれたHTMLスライド作成ツールexerslideを紹介します。## exerslideの使い...

List

  • 2016/11/01

Wing - ミニマムなレスポンシブWebフレームワーク

Webデザインフレームワークは二極化が進んでいます。一つはBootstrapに代表される大型でリッチなフレームワークです。非デザイナーであればこの手のフレームワークが便利です。もう一つはごく基本的な機能だけを提供するミニマムなフレームワークです。こちらはデザイナー向きです。今回紹介するWingは後者のフレームワークです...

None

  • 2016/10/31

wzrd.in - Browserifyをサービス化

最近では多数のJavaScriptライブラリを使うのが当たり前になっています。そうした時に一つ一つのライブラリをscriptタグで読み込むのは大変であり、Browserifyを使って一つのファイルにまとめてしまうのが便利です。今回はそんなBrowserifyをWeb上のサービスとして提供するwzrd.inを紹介します。...

None

  • 2016/10/31

moji - JavaScriptによる全角/半角の文字種変換

Webの入力フォームでイライラさせられるのは半角、全角の判定ではないでしょうか。データベースに入れる際にデータを統一したいだけで、利用者に対して苦痛を押しつけています。解決する手段など幾つもあるにも関わらずです。今回はJavaScriptによる文字種変換ライブラリ、mojiを紹介します。### mojiの使い方moji...

List

  • 2016/10/29

Presentation Annotator - スライドのメモ、注釈を記述

プレゼンテーションのスライドは作って終わりではなく発表が大事です。何を話せば良いか忘れないように各スライドにノートを記述しておく人は多いです。筆者もいつもそうしています。Keynoteなどはそのための機能を備えていますが、単なるPDFファイルではメモ書きする場所がありません。そんなスライドに対する指摘やメモ書きを実現で...

List

  • 2016/10/28

Orb - Web上でピボットテーブルを実現

Web上でテーブル/グリッド表示をすると多くの機能が求められるようになります。ソートであったり、一括更新などの機能が有名ですが、業務担当者ではなくマーケティング担当者などが求めるものとしてピボットテーブルがあります。作るのはとても大変ですが、Orbを使えば容易に実現できそうです。## Orbの使い方メイン画面です。!

List

  • 2016/10/28

driveway - CSSだけで作られたMasonry

Pinterestで表示で一躍人気になったのがMasonryと言われる表示です。幅は固定しつつ、高さをずらして表示することで変化による印象付けを与えられます。女性向けのメディア、写真を多用するサイトで使われています。多くがJavaScriptを使って表現するのですが、今回紹介するdrivewayはCSSだけで実現されて...

List

  • 2016/10/27

smartscroll - スクロールをジャックしてぴったり合わせた表示を実現

スクロールというのはユーザが好きな場所まで自分で指定できるのが基本です。しかしサイトの種類によってはスクロールさえも制御したいと思うことがあります。一つのページの中で複数の情報を分けて表示したい時などがそうです。そこで今回はスクロールを制御できるsmartscrollを紹介します。## smartscrollの使い方実...