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

Webの記事一覧

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

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

もっと見る

List

  • 2017/11/25

tlx-editor - フォーム入力に特化したWeb components

Web componentsは多くの可能性を持っています。Web標準ではまだまだ貧弱なUIも、Web componentsを使うことでリッチであったり、複雑なUIコンポーネントが生まれていくことでしょう。今回紹介するtlx-editorはその一例です。入力系コンポーネントを一手に提供するライブラリになります。## tl...

List

  • 2017/11/24

permission.site - HTML5 APIの実装を確認する

HTML5によって多数のAPIが追加されています。それらはすべてのブラウザで使える訳ではなく、まだまだ実装に差異があります。それをチェックできるCan I use

List

  • 2017/11/24

Crowbook - MarkdownからePub/PDF/LaTeXを生成

電子書籍と言えばePubですが、一から作るのは大変です。基本的にはHTMLのサブセットですが、それでも独特な記法もあるので慣れる必要があるでしょう。そこで使えるのがコンバーターです。今回紹介するCrowbookは元データがMarkdownという、分かりやすいコンバーターになっています。## Crowbookの使い方オン...

List

  • 2017/11/22

ajsr-confirm - 豪華な確認ダイアログ

Webを作成する際にはWebブラウザが用意している標準のコンポーネントがよく使われます。しかし、その表示では満足できない人が多いのも確かです。そこでより使い勝手の良いデザインを追求し始めます。今回はダイアログです。独自のダイアログを出したいと思ったらajsr-confirmを参考にしてみてください。## ajsr-co...

List

  • 2017/11/20

Livegrep - Webベースのソースコード専用検索システム

システムのソースコードを検索する場合、grepが多く使われます。「-」などの記号も多いのでGoogle検索がうまくいかなかったり、関連するライブラリ含めて検索したいこともあるでしょう。その結果、一見すると不便なgrepが使われます。今回紹介するオープンソース・ソフトウェアはLivegrep、Webベースのインタラクティ...

Missing

  • 2017/11/19

wast-game - 弾幕ゲーム好きはトライ!

シューティングゲームの中でも弾幕系はそれだけで別ジャンルと言えるほど激しいゲームです。ピクセル単位での細かい操作が求められ、ほんの少しのミスが命取りになります。そんな弾幕系シューティングゲームをWeb上で実現してくれるのがwast-gameになります。## wast-gameの使い方実際に遊んでいるところです。!

List

  • 2017/11/18

Frappe Charts - GitHub風グラフもあるSVGグラフライブラリ

WebはSVG/CanvasによってWeb標準だけで高度な表現が実現できるようになりました。しかし、それを使いこなすのは大変で、多くの場合ライブラリを使って実現しているでしょう。今回紹介するFrappe ChartsはSVGを使ってグラフ表示を行うライブラリです。## Frappe Chartsの使い方棒グラフ。マウス...

List

  • 2017/11/18

Zircle - サークル型のズームUIを実現

一度にすべての情報を見せてしまうと、本当に伝えたいことが伝わらないと言ったことがよくあります。人の脳は一度に処理できる情報量に限度があるので、それを超えてしまうとフィルタリングしてしまったり、抜け落ちたりします。そこで使えるのがドリルダウンしていく方法です。今回は円形のズームするUI、Zircleを紹介します。## Z...

List

  • 2017/11/17

Snake Wasm - Rustで作られたスネークゲーム

ゲームというのは作っている方も楽しく、遊ぶのも楽しいと学習素材として最適です。特にあまりこだわったキャラクターゲームではなく、ルールがシンプルですぐに遊べるものが良いでしょう。今回は誰もが知っているであろうスネークゲームをHTML5化した、Snake Wasmを紹介します。## Snake Wasmの使い方ゲーム中の画...

List

  • 2017/11/16

HEML - HTMLメール用のサブセット記法

日本はかつてテキストメールばかり使われていましたが、ようやくHTMLメールが普及してきています。セキュリティ上の懸念も殆どなくなり、カラフルだったり装飾ができるというメリットに注目が集まっています。そんなHTMLメールをすべてのデバイスに適切に配信できる形にしてくれる、それがHEMLです。## HEMLの使い方HEML...

List

  • 2017/11/16

Event Organiser - WordPressプラグインのイベント管理

東京では月1,000を超える技術系イベントが開催されています。そうした時に必要になるのが集客ページですが、技術系であればconnpassが最も使われています。他の分野であればPeatixやEventRegist、EventBrite、Meetup.com、Doorkeeperなども使われています。もし独自ですべてを管理...

List

  • 2017/11/14

GDevelop - コーディングレスでゲームを作るプラットフォーム

ゲームを作ってみたいという考えつつも、プログラミングが敷居になってしまっている人は多いでしょう。Webシステムを作ったりするプログラミングとはまた異なる知識が必要です。Unityでさえ、本格的に作ろうと思うとプログラミングの知識が必要になります。今回紹介するGDevelopはプログラミングをせずにHTML5でゲームが作...

List

  • 2017/11/14

JSRobot - JavaScriptでロボットを操作

最近は子供向けのプログラミング学習が人気です。Sketchのようなビジュアルプログラミング言語が人気ですが、自由にプログラミングをはじめようと思うと物足りなく感じるでしょう。そこで次の段階としてJSRobotを紹介します。ロボット操作を通じてJavaScriptを学べます。## JSRobotの使い方開始します。!

List

  • 2017/11/13

Browser homepage - クールなホームページ

ブラウザではホームページの設定ができます。Webサイトのことを意味するホームページではなく、Webブラウザを一番最初に開いた時のページです。ポータルサイトにしていたり、企業であればグループウェアのトップページにしているかも知れません。今回紹介するオープンソース・ソフトウェアはBrowser homepage、個人向けの...

List

  • 2017/11/12

jquery-fulltable - jQueryで任意のテーブルを便利に

業務システムなどでよく使われるテーブルタグ。素のままでは小さなテーブルはよくとも、多数のデータを表示した際の使い勝手がよくありません。かといって多機能にするのは大変です。そこで使ってみたいのがjquery-fulltableです。任意のテーブルをjQueryで多機能にします。## jquery-fulltableの使い...

List

  • 2017/11/11

ImageLnk - URLから画像を抽出

画像をダウンロードしたいサイトは幾つもあるかも知れませんが、多くのサイトでは逆に簡単に画像をダウンロードされないようにする仕組みが作られていたりします。右クリックでダウンロードできなかったり、データを複雑に流し込んでいる場合もあります。そんな時に使えそうなのがImageLnkです。多数のサイトに対応した画像リンク抽出ソ...

List

  • 2017/11/11

Node.php - PHPでnodeアプリケーションを動かす

PHPのレンタルサーバは数多いですが、nodeが使えるサーバはあまり多くありません。実用的なレベルでPaaSを使おうと思うとそれなりにお金もかかるでしょう。レンタルサーバでnodeを動かすのは難しいでしょうか。その答えの一つがNode.phpです。PHPでnodeを動かす、そんな無茶なプロジェクトです。## Node....

List

  • 2017/11/10

EVADE AND DESTROY - HTML5製。デスクトップとスマートフォン両方対応のシューティングゲーム

HTML5の表現力、JavaScriptの性能向上があり、Webブラウザでも十分なゲームが作れるようになっています。Webベースであれば、デスクトップはもちろん、スマートフォンでも遊べます。今回はシューティングゲームのEVADE AND DESTROYを紹介します。シンプルな操作で楽しめるはずです。## EVADE A...

List

  • 2017/11/10

musicvideo-generator - ミュージックビデオを自動生成

音楽は耳で楽しむものですが、ミュージックビデオのように目でも楽しめます。ビジュアライザーのように格好良く可視化されていたり、アルバムアートなどが表示されることでさらに魅力的になります。そんなミュージックビデオを自動生成してくれるのがmusicvideo-generatorです。## musicvideo-generat...

List

  • 2017/11/09

Writing - WebベースのMarkdown + LaTeXエディタ

Markdownは便利な記法ですが、物足りないと感じることもあります。その一つとして数式の埋め込みをあげる人もいるでしょう。専用の記法で対応するソフトウェアもありますが、もっと汎用的な方が使い勝手は良いはずです。そこで紹介したいのがWritingです。Markdown記法での記述に加え、LaTeXも使えるエディタです。...