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

Webの記事一覧

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

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

もっと見る

List

  • 2020/06/30

GraphEditor - プレビュー付きのグラフエディタ

情報は単独で存在するのではなく、それぞれが紐付いています。ある一つの処理の出力は別な処理の入力になります。最終的な成果物にたどり着くまで、複数の処理がつながっていくのです。今回紹介するGraphEditorはそうした情報の紐付きを表現するためのエディタになります。## GraphEditorの使い方上がプレビュー、下が...

List

  • 2020/06/29

WebViewScreenSaver - Webサイトをスクリーンセーバー化

世界中には様々なWebサイトがあります。綺麗な写真を毎日紹介しているサイト、アイディアを紹介するところもあります。500pxやInstagram、Pinterest、Tumblrなど眺めていても飽きることがありません。そうしたサイト(だけではありませんが)をスクリーンセーバーにできてしまうのがWebViewScreen...

List

  • 2020/06/29

RoughNotation - ラフな感じに仕上がる注釈ライブラリ

コンピュータで直線や綺麗な真円を書くのは簡単です。逆に手書きのような乱れた線を書いたりするのは不得意です。しかし正確な描画は、ちょっとしたズレが気になったり、執拗に整えようとして時間を無駄にしてしまいがちです。そこで参考にしたいのがRoughNotationです。いわゆる注釈ツールなのですが、ラフな感じに描けるのが特徴...

List

  • 2020/06/28

‎Translate Web for Safari - Safariで翻訳を素早くする機能拡張

Webブラウジングをしていて英文などを翻訳したいと思ったことはないでしょうか。よくあるのは別なタブで翻訳サイトを開いて、そこにテキストを貼り付けるという操作です。クリップボードにコピーしたりして、意外と操作が多かったりします。そこで使ってみたいのが‎Translate Web for Safariです。翻訳サイトへの一...

List

  • 2020/06/27

Simpdf - Web上でPDFを編集して再生成

PDFは編集できないものだと決めつけていないでしょうか。ちょっとした装飾であればフリーのソフトウェアでもできますし、Adobe Acrobatを使って注釈を入れたりすることもできます。決してまったく編集できない訳ではありません。試してみて欲しいのがSimpdfです。元のPDFファイルそのままではありませんが、編集を行え...

List

  • 2020/06/26

Image Compare Viewer - Web上で2つの画像を比較

変更前のと変更後の画像や動画は見る目を引くものです。何が変わったのか、どう変わったのか分かると、どこに工夫がこらされているのか分かります。ビフォーアフターのようなリフォーム番組でも、前後の動画を効果的に使っています。今回紹介するImage Compare Viewerもそんな比較を効果的に行えるライブラリです。二つの画...

List

  • 2020/06/26

new.css - HTMLタグのまま使えるCSSフレームワーク

デザインが苦手な人にとって、デザインテンプレートはとても便利な存在です。Bootstrap臭が、といわれても便利である以上使わざるを得ません。しかしクラスの使い方などを覚えるのは面倒です。今回紹介するnew.cssはHTMLタグのみ、クラス指定が不要(クラスレス)なCSSフレームワークになります。## new.cssの...

List

  • 2020/06/25

LuckyBits - 小さなグループ用のリンク共有システム

ブックマークは個人で使うものもあれば、社内のチームで共有すると便利なものもあります。そうした目的の際には外部のソーシャルブックマークサービスは不便です。また、ローカルブックマークも使い勝手がよくありません。そこで使ってみたいのがLuckyBitsです。少人数のグループを対象にしたリンク共有ソフトウェアです。## Luc...

List

  • 2020/06/24

Speech to Text Webcam Overlay - Webカメラの映像に音声認識したテキストを追加表示

オンラインで会議をしている際に字幕を出してくれるととても助かります。特に海外の人たちのミーティングで、口元がよく見えなかったりすると字幕の有無で理解度、進めやすさがまったく変わってくるでしょう。今回紹介するSpeech to Text Webcam OverlayはWebカメラの映像に字幕を追加してくれるソフトウェアで...

List

  • 2020/06/23

Asteroid - JavaScriptの実行環境を備えたMarkdownエディタ

Markdownをコンテンツとして利用しているWebサイトが増えています。HTMLに比べれば簡易的な記法ですし、知らずに書いても決して読めないものにはならないでしょう。そして素のMarkdownエディタだけでなく、ちょっとした付加価値を追加したものも多数作られています。今回紹介するAsteroidはMarkdownエデ...

List

  • 2020/06/22

Selecto.js - Web上でドラッグで選択するUXを実現

Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトッ...

List

  • 2020/06/22

Webrecorder Desktop App - Webブラウジングを記録するアプリ

未知の情報を探すのにWeb検索は便利です。しかし既知の情報になると途端に探しづらくなります。すでにある知識が邪魔をして、検索がうまくできなかったりします。そこで、Webブラウジングした情報をアーカイブしておいて、そこから検索したくなります。そこで使えるのがWebrecorder Desktop Appです。Webブラウ...

List

  • 2020/06/21

ChromeGalvanizer - Google Chromeのセキュリティポリシーを作成

Google Chromeのシェアが伸び、企業内でもGoogle Chromeを使っているケースが増えています。Google Chromeといえば機能拡張が便利ですが、中にはセキュリティ上好ましくないものもあるでしょう。そういった時に使いたいのがChromeGalvanizerです。Google Chromeを企業内で...

List

  • 2020/06/20

OctoPrint - Webブラウザで3Dプリンタを制御

3Dプリンタを購入して、自宅で造形を楽しんでいる人も多いでしょう。最初は手元に置いておくのですが、思いの外うるさかったり、稼働時間が長いため、近くに居続けられなくなります。その結果、しまっておいて徐々に使わなくなったりします。今回紹介するOctoPrintは3DプリンタをWebブラウザから操作できる管理ソフトウェアです...

List

  • 2020/06/20

PiP any site - Picture in PictureでWebサイトを表示するGoogle Chrome機能拡張

Webブラウザで動作を再生している際、スクロールすると動画が見られなくなってしまいます。動画の説明文が長かったりすると不便です。そこで使えるのがPicture in Picture(以下PiP)になります。このPiPはWebブラウザのAPI(chrome.tabCapture APIなど)として提供されており、何も動画...

List

  • 2020/06/19

Progressive Web Maps - オフラインでも使えるPWAの地図アプリ

PWA(Progressive Web Apps)が広まることで、スマートフォンアプリとWebアプリの垣根がなくなってきています。タスク管理や電卓のような簡易的なアプリケーションはもちろん、IDEのような大型なWebアプリケーションもPWA対応してきています。今回紹介するProgressive Web Mapsは地図ア...

List

  • 2020/06/19

Link Lock - シェアできるパスワードロック付きURLを生成

URLを他の人には分からない形でシェアしたいと思うことはないでしょうか。認証などを使えばできるでしょうが、それは面倒です。あらかじめキーワードを決めておいて、それだけでシェアできると便利でしょう。今回紹介するLink LockはURLをAESで暗号化し、パスワードを知らないと復号化できない状態にしてくれます。## Li...

List

  • 2020/06/18

ChartS.css - Markdownのリストをグラフに変換

グラフを描く際には専用のライブラリを使うことが多いですが、それに不慣れだとうまく表示できずにストレスが溜まります。ちょっとしたグラフであれば、もっとシンプルに描きたいと思うのではないでしょうか。そこで使ってみたいのがChartS.cssです。Markdown形式からグラフに表示になる、シンプルなライブラリです。## C...

List

  • 2020/06/17

Multi - 複数のWebサイトをまとめてアプリ化

Electronなどを使うと、そのWebサイト専用のアプリが作れます。Cookieやプロセスなどを切り離せるので、よりセキュアなWebサイトを使えるようになります。常駐で使う際にも便利です。Multiはさらに一歩進んで、特定のWebサイト(複数)をアプリ化できます。## Multiの使い方アプリ化した例です。アドレスバ...

List

  • 2020/06/16

MultiReplace - 置換条件をまとめて指定してテキスト変換

文字を入れ替える置換処理を何度も繰り返し行うことがあります。正規表現を使えば複数のパターンをまとめることもできますが、それでもなお、何度も何度も行わないといけないこともあるでしょう。そこで使ってみたいのがMultiReplaceです。TSV形式で置換条件をまとめて設定できます。## MultiReplaceの使い方利用...