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

ライセンス - MIT Licenseの記事一覧

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

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

もっと見る

List

  • 2016/11/03

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

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

None

  • 2016/11/03

facebook-cli - node製のFacebookクライアント

Facebookへ頻繁にアクセスしてしまって業務がままならないという方はFacebookへのアクセスを禁止しましょう。しかし、閲覧はしなくともステータスのアップデートはしたかったり、多少面倒でも内容が見たいということがあるかも知れません。そんな時に使いたいのがfacebook-cliです。ターミナルからFacebook...

List

  • 2016/11/02

feathericon - シンプルで分かりやすいSVGアイコン

スマートフォンが高解像度になるにつれて、アプリリソースになる画像もどんどん肥大化する傾向にあります。このままでは巨大な画像リソースばかりになってしまうでしょう。そこで注目したいのがSVGやアイコンフォントです。今回紹介するfeathericonはSVG/アイコンフォントも提供されたシンプルなアイコンセットです。## f...

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

Serverless Buffer App - サーバレスアーキテクチャによるBuffer風アプリ

個人的にTwitterやFacebookのアカウントを管理するのにBufferを使っています。予定したスケジュールでソーシャルメディアにシェアしてくれるので便利なのですが、時に物足りないと思ったり、アカウントのアップグレードが求められたりして残念なこともあります。そこで使ってみたいのがServerless Buffer...

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の使い方実...

List

  • 2016/10/26

Kyapchar - macOS用のシンプルなスクリーンキャスト

Mac OSXでは標準にインストールされているQuickTimeでスクリーンキャストができます。標準のソフトウェアでできるのは便利なのですが、元々QuickTimeは動画再生ソフトウェアなので若干重たいのが難点です。そこで使ってみたいのがKyapcharです。シンプルで使い勝手の良い操作録画ソフトウェアです。## Ky...

List

  • 2016/10/26

noteshrink - 手書きのノートを写真に撮ってPDF化

会議のメモやホワイトボードに書いた内容を共有するために写真に撮っておくというケースは多いかと思います。しかし実際に共有する際には画像をそのまま添付しがちです。これは共有性が悪く、見返すことも少ないのではないでしょうか。そこで使ってみたいのがnoteshrinkです。画像をまとめてPDFにしてくれる、そんなソフトウェアで...

List

  • 2016/10/25

Tsukiakari - TweetDeck風のTwitterクライアント

Twitterが提供しているTweetDeckは便利なのですが、グループでのアカウント管理機能など、あまり使わない機能も含まれています。複数のタイムラインや検索などもっと機能を絞り込んでいても良いのに、と感じることもあります。そこで使ってみたいのがTsukiakariです。TweetDeck風のUIで使いやすいTwit...

List

  • 2016/10/25

Kap - Web技術を使ったスクリーンキャスト

ソフトウェアのデモ動画を作成する際などにスクリーンキャストが便利です。昔はあまり良い選択肢が多くなかったのですが、今では多くのソフトウェアが存在します。Mac OSXであれば標準でインストールされているQuickTimeで録画することもできます。今回紹介するKapはオープンソースのスクリーンキャストソフトウェアで、We...

Missing

  • 2016/10/24

placeholder.js - Webブラウザでダミー画像を生成

Webサイトのモックアップを作っていて便利なのがダミーの画像です。多くのダミー画像提供サービスがありますが、難点としてオンラインでないと使えないという問題があります。ダミー画像サイトが落ちているために見栄えが悪くなるのも残念です。そこで使ってみたいのがクライアントサイドでダミー画像を生成するplaceholder.js...

List

  • 2016/10/24

Texture - シンプルながらも構造化された文章を作成できるWebワードプロセッサ

最近のエディタはとてもリッチで高機能になるか、Markdownのように記法に沿うことでとても簡単に書けるかの二極化されているように感じます。しかし、Markdownではちょっと物足りず、とは言え簡単に書けるエディタが欲しいと思うのではないでしょうか。今回はそんな可能性を見せるWebベースのワードプロセッサ、Textur...

List

  • 2016/10/23

PiPifier - 任意のHTML5 videoタグをピクチャ・イン・ピクチャ対応に

iPadで動画アプリを見ながら文章を書いたり、Webサイトをチェックする際に便利なのがピクチャ・イン・ピクチャです。macOS Sierraでは機能はあるのですが、Sarariでは未対応です。多くの動画はWebサイト上にあるのに勿体ないことです。そこで使ってみたいのがPiPifierです。任意のHTML5のvideoを...

List

  • 2016/10/23

Textillate.js - CSS3を使って華麗なテキストアニメーションを実現

CSS3になって表現力が広がっています。これまでFlashやJavaScriptを駆使しないとできなかったことが、スタイルシートだけで実現できるようになっています。スタイルシートを使えばGPUを使うのでより滑らかに表現できます。今回はTextillate.js、CSS3を使ってテキストアニメーションソフトウェアを紹介し...