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

Webの記事一覧

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

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

もっと見る

List

  • 2019/11/03

Pythonic News - PythonianのためのHacker News

Hacker NewsのUIは決してモダンではなく、どちらかと言えば前時代的なのですが、慣れてくると使いやすく感じるから意外です。シンプルで一覧性があり、余計な機能がないので開発者にとって使いやすいです。そんなHacker NewsのUIを真似て作られたのがPythonic Newsです。名前の通り、Python開発者...

List

  • 2019/11/03

Bullshit.js - よく分からない単語は見ない

開発者にとって、マーケターであったり経営者の話している内容はさっぱり分からないことがあります。そのため、彼らが登壇して語りかけても意味が通じず、心に刺さりません。そんな状況を端的に表しているのがBullshit.jsです。分かりづらい単語を理解できるものにしてくれます。## Bullshit.jsの使い方変換前です。!

List

  • 2019/10/31

Markdown - Markdown記述をサポートするツールバー

Markdown記法はそれほど複雑ではないものの、括弧の順番を忘れてしまったり、テーブルの文字寄せの書き方を調べたりすることがあります。慣れていない人にとってはまだまだ難しい記法と言えるでしょう。そこで使ってみたいのがMarkdown(以下、Markdown(WYSIWYG)とします)です。同名のライブラリなのが気にな...

List

  • 2019/10/30

roughViz - 手書きのようなラフなグラフを描く

正確に書かれた図は見やすいものですが、かしこまった雰囲気が出てしまいます。モックアップのレベルであまり正確なものを作るとデザイン上の些細な部分にこだわりはじめてしまうのでお勧めできません。そこで使ってみたいのがroughVizです。手で書いたような乱雑なグラフが描けるライブラリです。## roughVizの使い方棒グラ...

List

  • 2019/10/30

webp-hero - WebP非対応ブラウザでも表示するpolyfill

WebPはGoogleがメインで開発を進めている画像フォーマットです。写真やイラストなど用途を区別せずに使えるフォーマットで、とてもサイズが小さく済むのが特徴です。しかし、対応しているブラウザが限られるのが難点です。そこで使ってみたいのがwebp-heroです。WebP非対応ブラウザでも表示可能にするpolyfillラ...

List

  • 2019/10/29

WebAssembly.sh - WebAssembly製のWebターミナル

Webブラウザでも十分ターミナルが実装できるようになってきました。あえて専用のソフトウェアをインストールする必要もなく、すぐにサーバにアクセスできます。公開鍵認証などは多少面倒ですが、十分使えるレベルです。今回紹介するWebAssembly.shもそんなターミナルの一つですが、WebAssemblyで作られており、PW...

Missing

  • 2019/10/26

React SlideShow UI - Slideshare/Speakerdeck風の表示を行うReactコンポーネント

スライドを共有するSlideshareやSpeakerdeckのようなサービスを作りたいと思ったことはないでしょうか。個人的には以前作ったことがあるのですが、その頃はFlashに変換してビューワーで表示するのが基本でした。今であればPDFや画像化して表示することでしょう。今回紹介するReact SlideShow UI...

Missing

  • 2019/10/25

Helpdesk - Ruby on Rails製のヘルプデスク

Webサービスにつきものなのがヘルプデスクです。使っていて困ったことがあったら、まずヘルプデスクを見るでしょう。そこですでに質問があがっていればすぐに解決できますし、解決しなければそのまま質問できます。今回紹介するHelpdeskはそんなヘルプデスクを自前で持てるシステムとなっています。## Helpdeskの使い方こ...

List

  • 2019/10/25

jsoff - JavaScriptオンオフを切り替えるGoogle Chrome機能拡張

JavaScriptが高機能化し、もはやJavaScriptを使っていないWebサイトが見当たらないくらいです。しかし、だからこそJavaScriptをオフにした状態でどう表示されるのか気になることがあります。Google ChromeでJavaScriptをオフにするのは開発者ツールを使わないといけないですが、jso...

List

  • 2019/10/24

GrapesJS MJML - Web上でHTMLメールをオーサリング

メールマーケティングにおいて、HTMLメールを利用する機会が多くなっていますが、使い勝手はWebでHTMLを表示するのとは多少異なります。さらにレスポンシブなフォーマットに対応させるのは大変です。そんなHTMLメール用に作られたマークアップとしてMJMLがありますが、そのMJMLを使ってWeb上でオーサリングできるのが...

List

  • 2019/10/23

Jekyll Admin - Jekyll用のWeb管理画面

個人的に最近利用が多いJekyll。GitHub Pagesが標準で対応してくれていることもあって、JekyllベースでWebサイトを構築することが多いです。そんなJekyllでちょっと面倒なのが、データ管理がすべてローカルOSのファイル管理頼りなことでしょう(それが良さでもあるのですが)。そこで使ってみたいのがJek...

List

  • 2019/10/23

Kanban Board - リッチなWebカンバンシステム

カンバンシステムはTrelloの登場以降、様々なシステムが作られています。シンプルなものもあれば、ものすごくリッチなものもあります。導入する場合には自分たちの組織にあったものを選定する必要があるでしょう。今回紹介するKanban Boardはタグやカレンダー連携などの機能を備えたカンバンシステムです。## Kanban...

List

  • 2019/10/22

jsmind - Webベースのマインドマッピング

マインドマッピングは考えを整理するのに便利なツールです。人によって会議の内容をマインドマッピングでまとめていたり、ブレインストーミング側に使ったりします。いずれにしても思考を広げるのに使えます。そんなマインドマッピングをWeb上でできるようにするのがjsmindです。## jsmindの使い方メイン画面です。!

None

  • 2019/10/22

goop - Google検索結果をスクレイピング

Googleの検索結果を取得して分析に使いたいと考える人は大勢います。しかし機械的に収集しようとすると、GoogleからCAPTCHA入力が求められます。そのため自動化しづらく、手作業で収集している人も多いでしょう。しかし裏道がありそうです。Facebookを経由するとそのトラップに引っかからないようです。その実証とし...

List

  • 2019/10/21

Exment - マスタ管理に便利なWebデータベース

Microsoft Accessはオフィスで活躍しています。ちょっとしたシステムであればエンジニアの手を借りることなく、作成できるでしょう。しかし最近ではmacOSも使われるようになっていたり、スマートフォンからも使いたいと言われるかも知れません。そこで使ってみたいのがExmentです。手軽に使えるWebデータベースシ...

List

  • 2019/10/21

ASS.js - 動画に字幕を表示

英語や中国語など、他言語で流れる動画には字幕が欲しいものでしょう。YouTubeやNetflixなど動画配信サイトでは字幕の表示、非表示を切り替えられます。あんな機能が欲しいと思ったことはないでしょうか。今回紹介するASS.jsはHTML5のvideoタグに対してASSフォーマットの字幕を表示できるライブラリです。##...

List

  • 2019/10/19

upload.express - React製のファイル共有サービス

インターネットを通じたファイル共有サービスはたくさんあります。日本でも幾つかあり、ビジネスでも使われていたりします(ユーザ情報漏洩して炎上したりもしていましたが)。それだけ需要が大きい分野なのでしょう。今回紹介するupload.expressはそんなファイル共有サービスの一つです。UIでReactを採用し、モダンな作り...

List

  • 2019/10/17

shiori - ターミナル/Webで使えるシンプルなブックマーク管理

ブックマークを管理するのはWebブラウザに付属のものを使うのが基本ですが、大量のブックマークをすると管理が煩雑になります。そこでソーシャルブックマークを使うようになりますが、データを公開したくないと考える人も大勢います。そこで使ってみたいのがshioriです。ターミナルやWebで使えるブックマーク管理です。## shi...

List

  • 2019/10/16

Textyle.js - シンプルなテキストエフェクトライブラリ

単純にテキストを表示しただけでは誰も気付きません。大事な文言であれば色やサイズを変えたりして、目立つ仕組みが必要です。それでももっと目立たせたい、ユーザの目に届けたいならばアニメーションしてみてはいかがでしょうか。あまり派手なものは嫌われるかも知れませんので、シンプルなものが良いという方はTextyle.jsを使ってみ...

List

  • 2019/10/15

Emoji Button - フレームワークに頼らない絵文字ピッカー

JavaScriptライブラリの多くが外部のフレームワークやライブラリに依存しています。そうした外部ライブラリを用いることで、コード量が減らせるメリットがありますが、依存性が発生してしまいます。そこで逆に依存性が一切ないライブラリに需要が出ます。今回紹介するEmoji Buttonは依存ライブラリのない絵文字ピッカーで...