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

Webの記事一覧

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

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

もっと見る

List

  • 2019/08/27

CJSS - CSSベースのWebビューフレームワーク

最近はReact、Vue.jsなど仮想DOMを使ったビューライブラリが人気です。しかし、JavaScript内にHTML情報を埋め込むのでデザイナーの方にとってはちょっと辛いところがありそうです。そこで使ってみたいのがCJSSです。上記ライブラリとは逆で、CSSにHTMLなどの情報を埋め込んでしまうという、すごいライブ...

List

  • 2019/08/27

Filterizr - CSS3を使ったデータのフィルタリング、ソートライブラリ

Web上で情報を並べて表示する機会はとても多いです。そんな時、常に発生するのが並び替えや絞り込みのニーズです。データを消したり、並び替えて表示したりするのは意外と大変です。そこで使ってみたいのがFilterizrです。データのソート、フィルタリングに特化したライブラリです。## Filterizrの使い方利用例です。カ...

List

  • 2019/08/26

Responsive-Kifu - レスポンシブ対応の将棋棋譜再生ビューワー

将棋はとても人気のあるゲームです。そして、その記録である棋譜を見ることで試合の流れを研究したり、感動を覚えたりします。そのために作られるのが棋譜プレイヤー、ビューワーです。今回紹介するResponsive-Kifuもそんな棋譜ビューワーですが、Webブラウザ上でレスポンシブに動作するのが特徴です。## Responsi...

List

  • 2019/08/25

ViperCard - HyperCardをWeb上で再現

HyperCardは1987年に誕生したアプリケーション開発プラットフォームです。リンクで別なカードに移動したり、音声を鳴らす、オブジェクトを動かすなど当時から高レベルなアプリケーションとなっていました。そんなHyperCardを現代に蘇らせたのがViperCardです。しかもプラットフォームを固定しないWebベースで...

List

  • 2019/08/23

pure JS WiFi QR Code Generator - 無線LAN情報を記載したQRコード生成

勉強会などでWiFi情報を載せたり、コワーキングスペースなどでWiFi情報を提示することがあります。あまり複雑なものにすると入力をミスしたり覚えるのが大変なため、安易なものを設定してしまいがちです。そこで使ってみたいのがpure JS WiFi QR Code Generatorです。QRコードから簡単にWiFi情報を...

List

  • 2019/08/21

Github Markdown Reader - GitHubのREADMEビューワー

GitHubでリポジトリを公開する際にはREADMEを書くのが基本です。開発者の多くはMarkdownで書いていることでしょう。GitHub上でもHTMLに整形されたREADMEが読めますが、最適化されているとは言いがたいかも知れません。そこで使ってみたいのがGithub Markdown Readerです。よりREA...

List

  • 2019/08/21

The Pomodoro Dash Timer - ポモドーロのダッシュ法を実践できるタイマーアプリ

ポモドーロテクニックはMOONGIFTで何度も取り上げていますが、25分間の集中と5分間の休憩を繰り返す仕事術になります。トマト(ポモドーロ)のキッチンタイマーを使うところから、その名が付けられています。The Pomodoro Dash Timerはポモドーロテクニックの発展版、ポモドーロのダッシュ法に対応したタイマ...

List

  • 2019/08/19

Celody - 音楽をフォーク、マージするマッシュアッププラットフォーム

Web APIを組み合わせて新しい作品を作る、マッシュアップという言葉は元々は音楽用語です。つまりクラブなどでかかる音楽のようなアレンジ、マッシュアップは音楽業界が本流でさえあります。今回紹介するCelodyは音楽をWebブラウザ上でフォークし、カスタマイズできるサービスです。## Celodyの使い方様々な楽曲を再生...

List

  • 2019/08/18

Diablo 1 for web browsers! - あの名作Diablo 1をWebブラウザで遊ぶ

今なお傑作として知られるゲーム、Diablo。その影響を受けて作られたゲームは枚挙に暇がないでしょう。97年に作られ、2008には3が販売されています。ゲームがどんどん発展していく中にあってなお、Diablo 1が好きな人は多いはずです。そんなDiablo 1をWebブラウザの中で遊べるのがDiablo 1 for w...

List

  • 2019/08/17

console.chat - 開発者ツール上のチャット

開発者ツールは開発者以外の方には用のないツールでしょう。逆に開発者はデバッグ以外の目的でも利用しており、APIについて調べたり、予定なDOMを消したり、ユーザスクリプト的に使っていたりします。そんな開発者ツールを使った密かな遊びとしてconsole.chatを紹介します。名前の通り、開発者ツール上でチャットをします。#...

List

  • 2019/08/17

News Vue.js - Vue.jsのニュースポータル

フレームワークの使い方を学ぶのに、そのフレームワークを使っている事例を参考にするのは良い方法です。何ができるのか、何ができなさそうかが判断できます。そのフレームワークらしい書き方を学ぶこともできるでしょう。今回紹介するNews Vue.jsはVue.jsを学ぶのにぴったりなWebサイトです。Vue.jsに関するニュース...

List

  • 2019/08/16

Outline - チームで活用するWiki&ナレッジベース

Wikiは年々進化しています。新しいニーズを取り込み、さらに既存のソフトウェアの中にWiki風の機能が追加されて生き残っています。特にオンラインでノートを取ったりするのが当たり前になっている現在、Wikiも自然と使われるようになっています。今回はそんな最新のWikiエンジンとしてOutlineを紹介します。UIがイケて...

List

  • 2019/08/15

Random World Map Generator - WebAssemblyで高速に3D/2D地図を生成

ゲームなどで地図データを使いたい時は良くあります。シムシティなどのシミュレーションゲームであったり、ローグライクなRPGでも使えます。そういった時の地図はある程度のランダム性があるとより面白いです。今回紹介するRandom World Map GeneratorはWeb上でランダムな地図データを生成してくれるサービスで...

List

  • 2019/08/14

Simple Tweets List - サーバレスで使えるTogetter風ツイートまとめ

Togetterは利用しているでしょうか。フローとして流れがちなツイートをアーカイブし、後で見返せるようにする便利なサービスです。イベントなどで使われることも多いです。しかし、プライベートに使いたい時もあるでしょう。そんな時に使ってみたいのがSimple Tweets Listです。## Simple Tweets L...

List

  • 2019/08/11

Pakyow - デザインファーストなフレームワーク

Webフレームワークというとプログラマ向けのものが殆どです。プログラマにとって使いやすくともデザイナーにとって使いやすいとは限らず、なかなか普及しないケースもあります。そこで注目したいのがPakyowです。デザインファーストなWebフレームワークです。## Pakyowの使い方例えばこんな感じでコンテンツを作ります。と...

List

  • 2019/08/09

GPortfolio - GitHubのプロフィールからポートフォリオを生成

オープンソースに対して何らかの活動を行うことが開発者としてもポートフォリオとして重要になっています。転職などを行う際にGitHubのアカウントをチェックするのも当然になっています。今回紹介するGPortfolioはGitHubでの活動をベースにしたポートフォリオ生成ソフトウェアです。## GPortfolioの使い方ポ...

List

  • 2019/08/08

Monaka - 添付ファイルも使える汎用メールフォーム

メールフォームはWebサイトで最もよく使われる機能ではないでしょうか。お問い合わせであったり、注文フォームなどユーザに入力してもらってサーバで送信を行う機会はとても多いです。毎回プロジェクトで作っているという方も多いでしょう。今回紹介するMonakaはPHP製の汎用的なメールフォームソフトウェアです。## Monaka...

List

  • 2019/08/07

Talk - オープンソースのコメントサービス

静的サイトが多用されるようになっていますが、動的な機能が追加しづらいのが欠点と言えます。しかし、そこもアイディア次第で解決できます。例えばコメント機能であればFacebookのコメント機能を使ったり、Discussなども活用できます。今回紹介するTalkは自分で立てるコメントサーバです。データを自分たちで管理、運用でき...

List

  • 2019/08/06

org-web - React製のorg-mode

org-modeと言えば、Emacsユーザにとっては慣れ親しんだメモ環境です。個人的にも長く使ってきましたが、キーバインドなども複雑で、当時はまだしも今はもう使い方も忘れてしまっています。そんなorg-modeをWebベースで復活させたのがorg-webです。マウス操作も含めると使い勝手が良さそうです。## org-w...

List

  • 2019/08/04

Fingerprint.js - Cookieに依らないトラッキング技術

広告システムで肝になるのがトラッキングです。トラッキングを行うことで、趣味や趣向を探ることができ、より精度の高い広告が表示できます。しかしトラッキングはプライバシーとの兼ね合いもあり、ブロッキングされることもあります。そんな中で注目されているのがFingerprintです。Cookieに頼らないトラッキング技術になりま...