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

Webの記事一覧

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

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

もっと見る

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を使ってテキストアニメーションソフトウェアを紹介し...

List

  • 2016/10/22

Webrecorder - みんなが使えるアーカイブシステム

ある時点でのWebサイトをアーカイブしておけるサービスはとても便利です。日本ではWeb魚拓が知られていますし、世界ではInternet Archiveがよく使われます。データは膨大になりますが、履歴が見られるというのは後々の振り返りでもとても便利です。今回はそんなアーカイブ生成を誰でもできるようになるWebrecord...

List

  • 2016/10/21

sereny - マテリアルデザインを使ったタイマー

タイマーは意外と多くの場面で役立ちます。それだけにアプリとしても多数存在するのですが、本当に使いやすいものは限られます。ダウンロードして使ってみて何か違うと感じることも少なくありません。今回はマテリアルデザインにインスパイアされたエレガントなカウントダウンタイマー、serenyを紹介します。## serenyの使い方タ...

List

  • 2016/10/19

PiPTool.safariextension - YouTube動画をピクチャ・イン・ピクチャで楽しむ

macOS Sierraの新しい機能にPiP(ピクチャ・イン・ピクチャ)があります。動画を再生するアプリなどで動画再生部分をアプリから切り離して画面の最前面に表示し続けられる機能です。iPadで便利に使っている人も多いでしょう。そんなPiPですが、Safariでは対応していません。それを対応させてくれるSafari機能...

List

  • 2016/10/18

Draggable Google Modal - ドラッグして動かせるモーダルウィンドウ

Webでよく使われるモーダルウィンドウは閉じたり入力しないと次のアクションに進めないのでユーザに処理を強制するのに便利です。しかしモーダルは動かすこともできないのでモーダルの裏に参考したい情報があった時にとてもストレスを感じます。そこでGoogleではドラッグできるモーダルウィンドウを提供しています。同じような実装を実...

List

  • 2016/10/17

Wormhole - タブ間通信に使えるイベント通知ライブラリ

今はタブブラウザが基本となっています。そのため、リンクをまとめて開くのも簡単で、気がついたら同じサイトのタブがたくさん開いていたなんてことがあります。そして、一つ一つのタブは独立して動くのが当たり前になっています。そこで使ってみたいのがWormholeです。Wormholeを使うと同じサイトのタブ間で通信できるようにな...

List

  • 2016/10/16

Proton - 高度な表現も実現できるHTML5のパーティクルライブラリ

Webの表現力はHTML5によって高まっていますが、そう簡単に高度な表現ができるわけではありません。目を引くようなアニメーション、グラフィックスを実現させようと思ったら相当量のコードを書かなければならないでしょう。今回はそんな作業を軽減してくれるパーティクルライブラリProtonを紹介します。## Protonの使い方...

List

  • 2016/10/14

FaithJS - Web上で動くファミコンシミュレータ

ファミコン(NES)エミュレータは古くからあります。WindowsやMac OSX、Linuxなど多くはデスクトップアプリケーションとして提供されていますが、スペック的にはすでにWebブラウザでも動くレベルです。今回はJavaScriptで実装されたNESエミュレータ、FaithJSを紹介します。## FaithJSの...

List

  • 2016/10/13

Ribbbon - 職人向けのプロジェクト管理システム

プロジェクト管理なんていうと大げさですが、タスク管理というとちょっと物足りない…そんな規模間の作業は多いものです。何人かで共有する必要はあるのですが、プロジェクト管理としてRedmineなどを導入すると大げさになってしまうというケースです。そこで使ってみたいのがRibbbonです。職人向けのプロジェクト管理システムと銘...

List

  • 2016/10/11

basis.js - シングルページアプリケーション用フレームワーク

SPA(シングルページアプリケーション)では一つのページの中ですべてのHTMLを記述したくなりますが、それでは見通しが非常に悪くなります。SPAとはいえ、テンプレートを使って分割したり、機能を明確に分ける方が良いでしょう。そこで使ってみたいのがbasis.jsです。## basis.jsの使い方basis.jsのコード...

Missing

  • 2016/10/10

Laphs - Tumblr製。WebでLive Photoをサポート

iOSの新機能であるLive Photoは多くのサービスに影響を与えました。Tumblrもその一つです。Tumblr for iOSでは2015年12月からサポートされていましたが、Webブラウザでは長らく対応していませんでした。それがついに対応しました。その機能はLaphs(Tumblr製)を使って実現されています。...

List

  • 2016/10/09

ZooMove - 画像をスムーズに拡大するJavaScriptライブラリ

最近は画像の解像度が上がっており、撮影した写真のまま公開するととても巨大になってしまいます。そこで幅を縮めるのですが、あまり小さくすると折角の写真が見えづらくなってしまいます。そこで必要に応じてズームするライブラリが便利です。今回はそんなライブラリのZooMoveを紹介します。## ZooMoveの使い方最初の表示です...

List

  • 2016/10/08

WebGLDetector.js - ブラウザのWebGLバージョンを判定

iOSでもWebGLが使えるようになり、デスクトップとスマートフォンでWebGLを使った、より高度な表現が実現できるようになりました。しかしWebGLにもバージョンがあり、バージョンによって実現できる機能差があります。WebGLのバージョンを逐一調べながら表現法を変えるのは面倒ですが、WebGLDetector.jsを...

List

  • 2016/10/08

g9 - インタラクティブなWebグラフィックスを実現

HTML5によってWeb上での表現力が高くなり、これまでFlashなどを使わないとできなかったようなアニメーション表現がWeb標準だけで実現できるようになっています。とは言え、ただアニメーションするだけでは面白くありません。面白いのはよりインタラクティブな、マウスやキーボードを使って自分で操作できるものでしょう。今回は...

List

  • 2016/10/07

github-embed - GitHubのコードを埋め込み表示

GitHub Gistは任意のWebサイトにコードを埋め込むことができます。これはとても便利な機能で、コードハイライタを準備したり、長いコードをどう見やすく表示するかなどを悩むことなく利用できます。なぜかGitHub自体にはそのような機能がないのですが、github-embedを使えば代替できます。## github-...

List

  • 2016/10/07

Reframe.js - iframeを自動リサイズするJavaScript

iframeを使ってWebサイトのコンテンツを埋め込めるサービスが増えています。特に多いのがYouTubeやVimeoなどの動画共有サイトです。埋め込むのは簡単なのですが、厄介なのはコンテンツがレスポンシブでないことです。ブログなどをスマートフォンで表示すると動画の分だけ表示がはみ出てしまいます。そんな状態を改善するの...