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

Webの記事一覧

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

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

もっと見る

List

  • 2020/06/15

twigl - オンラインのGLSLエディタ

GLSLはOpenGLやWebGLなどで使われているシェーダーを記述するための言語になります。3D CGなどを行っている方であれば馴染みのある言語でしょう。書き方がJavaScriptなどのプログラミング言語とは異なるので、慣れないとなかなか使い方を覚えられないかも知れません。そんなGLSLをWeb上で書いて試せるのが...

List

  • 2020/06/14

LaTeX.css - HTMLをLaTeX風に表示するCSS

LaTeXで文書を書いていて、HTMLに変換して欲しいというニーズはよくあります。そうしたHTMLはどことなくLaTeXっぽく感じられるでしょう。論文やレポートとしてはよくても、読み物としては読みづらい雰囲気があります。LaTeX.cssはその逆です。HTMLをLaTeXっぽく見せてくれるCSSになります。## LaT...

List

  • 2020/06/13

Twitterclone - Twitter風のUIデザイン

Twitter風のWebサイトを作ってみたいと思ったことはないでしょうか。プロフィール画面やタイムラインがあって、そこにフォロワーがいて…などTwitterの基本的なデザイン構成はそれほど部品が多くはありません。TwittercloneはそうしたTwitter風のデザインを模したソフトウェアになります。少しだけサーバサ...

List

  • 2020/06/13

Github card - GitHubリポジトリ情報を表示するカスタムエレメント

HTML5ではカスタムエレメントという機能で、独自のHTMLタグを追加できます。あまり使われている例は見ませんが、特定のUIや機能をサンドボックス化できるので便利です。今回紹介するGithub cardはGitHubリポジトリの紹介をカスタムエレメント化したソフトウェアになります。## Github cardの使い方こ...

List

  • 2020/06/12

Virtual Reality DOS - VRの中でDOSに触れる

DOSの懐かしい世界に戻りたいと思ったことはないでしょうか。今でこそOSはGUIがあって、マウスを使うのが当たり前ですが、かつてはCUI、ブルーや黒の世界で動かすのが当たり前でした。そんな昔懐かしいDOSの世界に浸ってみたい方はVirtual Reality DOSを使ってみましょう。## Virtual Realit...

List

  • 2020/06/12

Talking Head Anime - 1枚のイラストから動くアニメーションを作るデモ

Live2Dではイラストなどの画像を動かして、まるでアニメーションのように見せることができます。そして現在、類似の技術が様々に登場しています。それらは機械学習を用いたり、Webカメラの顔と一致させたりと周辺技術と組み合わせて展開されています。今回紹介するTalking Head Animeは一枚の画像を動かすデモで、機...

List

  • 2020/06/09

XP.css - Windows XPを彷彿とさせるCSS

Windows XPは非常によくできたOSだったように思います。2000もよかったですが、XPの完成度は高く、安定していました。その後のVistaなどになってからは微妙で、今なおXPを使い続ける企業があるのも致し方ない気さえします。そんなXPらしいUIをWebブラウザでも再現したければXP.cssを使ってみましょう。#...

List

  • 2020/06/09

COBOL Pong - COBOL製。Webで動くピンポンゲーム

最近ではあまり聞かなくなってきましたが、ある程度の年齢のエンジニアたちの中には、最初にCOBOLから入ったという人たちがいます。今でも勘定系では数多く使われているすごい言語です(開発したのが軍人、かつ女性

List

  • 2020/06/08

dixitOnline - オンラインでDiXitを遊ぶ

DiXit(ディクシット)というのは語り部(親的なもの)とプレイヤーに分かれるゲームで、語り部のヒントを元にカードを選択し、そのカードが全員一致または不一致じゃない場合に語り部がポイントを得るというゲームです(詳しくは日本一わかりやすい「ディクシット

List

  • 2020/06/07

SpeedVid - HTML5ビデオの動画速度を調整するブックマークレット

YouTubeやDailymotionといった動画共有サイトでは動画のスピードを設定できるようになっています(それでも基本は2倍速まで)。しかしNetflixやHulu、Amazon Primeビデオでは不可能で、ストレスを感じることがあります。今回紹介するSpeedVidはHTML5ビデオの速度を調整できるブックマー...

List

  • 2020/06/06

Snake face - 顔の動きで遊ぶスネークゲーム

スネークゲームは多くの人が一度はプレイしたことがあるでしょう。最初は1ブロックのサイズだったのが、餌を食べるごとに徐々に伸びていき、ゲームレベルが上がっていくものです。今回紹介するSnake faceはそんなスネークゲームと顔認識をつなぎ合わせたゲームになります。つまり、蛇の操作を顔で行います。## Snake fac...

List

  • 2020/06/06

Kwizz Guru - サーバレスで作られているクイズアプリ

クイズは内容のレベル次第で小さい子から大人までみんなが楽しめるゲームになります。ジャンルを歴史から数学、化学など様々なものを取りそろえれば、遊びだけでなく、学習にも効果があるでしょう。今回はそんなクイズゲームをサーバレスで興じられるKwizz Guruを紹介します。## Kwizz Guruの使い方ダッシュボードです。...

List

  • 2020/06/04

AC Flower Planner - Web上で花壇のプランニング

手戻りはなるべく避けた方がいいでしょう。多くの場合、手戻りのコストは実行よりも大きいものです。シミュレーションできる場があれば、まずはそこで試すべきです。何度も試し、最善と思える形になったら実行するのです。今回紹介するAC Flower Plannerは、花壇のプランニングツールです。同じような仕組みは他でも流用できそ...

List

  • 2020/06/02

Pose Animator - 顔や体の動きを2Dキャラクターに反映する

アニメを人のように動かそうと思った場合、従来は顔や体にマーカーを付けて動きを記録する必要がありました。しかし、今では機械学習を使って顔や体の動きを学べるようになっています。それによってアニ文字のような技術も生まれています。今回紹介するPose Animatorは顔や体の動きを2Dに再現するソフトウェアです。## Pos...

List

  • 2020/06/02

CostBox - PWA対応のシンプルな支出管理

お金を管理する際の基本は、支出を把握することです。節約しているつもりではあっても、記録しないと意味がありません。記録することで可視化し、状態を把握できます。その次に改善するフェーズがあります。今回紹介するCostBoxは支出を記録するのに特化したアプリケーションになります。## CostBoxの使い方メイン画面です。!

List

  • 2020/06/01

AnyGrids - 高機能なテーブル表示ライブラリ

業務システムで最もよく使うのが一覧でのデータ表示ではないでしょうか。多くはテーブルタグを使って構築しますが、ソートや表示するデータの多様さによって、より多機能を求められます。今回紹介するAnyGridsはビジネスデータの表示に特化したライブラリとなっています。業務システムでのデータ表示に一役買ってくれそうです。## A...

List

  • 2020/06/01

React Flow - Reactでノード型インタフェースを実装する

ノード同士を連結するインタフェースは色々な場面で使えます。ビジュアルプログラミングであったり、マインドマップのような思考整理、ノーコーディングプラットフォームでも使えるでしょう。そうしたノードベースのビジュアルインタフェースを作る際に使えるのがReact Flowです。Reactで開発する際に便利でしょう。## Rea...

List

  • 2020/05/31

Web Vitals Chrome Extension - Web Vitalsの評価を可視化するGoogle Chrome機能拡張

最近GoogleがWeb UXの指標として提示しているのがWeb Vitalsです。3つの指標があり、ローディングとインタラクティブ性、そして視覚的安定性となっています。これらの3つの指標に沿って、Webページを判定します。そんなWeb Vitalsを判定するGoogle Chrome機能拡張がWeb Vitals C...

List

  • 2020/05/30

japan-map-js - 日本のクリッカブルな地図を表示

集まったデータをただ一覧にしているだけではインパクトは薄くなってしまいます。どう可視化するかが問題です。時系列で比較する場合は棒グラフや折れ線グラフ、グループの場合は円グラフなど、データによって選ばれるグラフは異なります。もしデータが地域に合わせて作られるなら、地図上にマッピングするのがいいでしょう。日本地図にマッピン...

List

  • 2020/05/30

simpleParallax.js - 画像を使ったシンプルなパララックスエフェクト

パララックスエフェクトは見ている人にちょっとした違和感を与え、注目を集めるのに使えます。しかしスクロール時の処理を実装するのは大変で、後々のメンテナンスも面倒です。そこで専用ライブラリの利用をお勧めします。今回紹介するのはsimpleParallax.jsです。## simpleParallax.jsの使い方デモです。...