Webの記事一覧

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

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

もっと見る

List

  • 2020/11/13

essentia.js - WebAssemblyを使って音声/音楽を高速解析

インターネット上で扱うメディアにはいくつかの種類があります。プログラミングで解析しやすいのはテキストでしょう。次に画像を解析するライブラリも多数あります。最近では機械学習が盛り上がっているので、動画解析を行うライブラリも増えています。意外と少ないのは音楽ファイルの解析ツールです。essentia.jsはそんな中で数少な...

List

  • 2020/11/13

Detect GPU - GPUの性能を取得するライブラリ

WebブラウザでもGPUを利用する機会が増えてきています。3Dゲームを提供する、CSSアニメーションをする、さらに機械学習でWebGLを利用することもあります。しかしGPUはすべて同じではなく、性能の良し悪しがあります。一口にGPUといってもピンキリです。今回紹介するDetect GPUはGPUの性能を簡易的に取得でき...

List

  • 2020/11/11

metricPlease - ヤード/フィートをメートル法に変換するブックマークレット

単位というのは生活に結びついています。たとえば温度は華氏と摂氏があります。日本にいる場合は摂氏で生活しているはずで、旅行先などで華氏の温度表示があっても感覚として分かりづらかったりします。日本では尺、貫、坪などの表現がありますが、外国人には分かりづらいことでしょう。世界的にはメートル法が使われている中、アメリカでは今な...

List

  • 2020/11/11

CyTube - みんなでオンライン動画を一緒に観る

面白くないコンテンツであっても、ほかの人たちと一緒に見ると楽しくなるという有名な話があります。たとえばニコニコ動画では、非同期性を動画コメント機能に組み込んでおり、みんなで笑い合うことで何も面白くない動画であっても楽しいコンテンツに仕立て上げました。それに対して、今回紹介するCyTubeは同期を重視した動画プレイヤーに...

List

  • 2020/11/10

Visible - AIを用いたアクセシビリティテスト

利用しやすさ、アクセシビリティは大きな問題です。健常者はもちろんのこと、視覚や身体に何らかのハンディキャップがあったとしても情報は適切に伝えられなければいけません。Webは特に幅広い人たちにアプローチできるので、特にアクセシビリティを注視しなければならないでしょう。今回紹介するVisibleはアクセシビリティのテスト、...

List

  • 2020/11/08

Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成

Webサイトを作る際にユーザフロー(ワイヤーフロー)を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。今回紹介するWireflowはWeb上か簡単にワイヤーフロー...

List

  • 2020/11/07

Screego - 開発者にお勧めな画面共有

リモートワークが当たり前になっている現在、離れた場所にいる同僚に画面を共有する機会は多いです。しかし、オンラインミーティングを都度立ち上げるのが面倒だったり、チャットツールに付属している画面共有機能だと解像度が低くて使い物にならないことがあります。今回紹介するScreegoは低レイテンシー、高解像度であることに注意して...

List

  • 2020/11/05

ColabCode - Jupyter NotebookからVisual Studio Codeを呼び出す

データサイエンティストや機械学習に関わる方であればGoogle ColabやKaggle Notebooks、そしてJupyter Notebookをよく使っていることでしょう。そうした時、エディタの機能が貧弱でコードを書くのに苦労した、なんて経験もきっとあるはずです。今回紹介するColabCodeはGoogle Co...

List

  • 2020/11/04

Plausible - 自分で立てるGoogleアナリティクス代替

Googleアナリティクスを使っている方は多いですが、その価値に疑問符が付きつつあります。まずEUをはじめとして、プライバシーに対する対策強化が進んでいることです。また、WebブラウザでもサードパーティーCookieを渡さないようになり、情報が適切に取得できなくなっています。だからこそ自分で立てるアクセス解析が大事にな...

List

  • 2020/11/01

Pac-Man Maze Generation - パックマン風ゲーム用の迷路を自動生成

パックマンといえばGoogleが作成した際、世界中の人たちの生産時間を奪い去ったとして有名です。シンプルなだけにハマりやすく、熱中する人が多いゲームとなっています。自分でもパックマンのようなゲームを作ってみたいと考える人たちは大勢います。その際、まず必要になるのがゲーム画面です。今回はパックマンの画面を自動生成できるP...

List

  • 2020/10/31

Keyboard Simulator - Web上でキーボードのデザインを確認

最近はキーボードを自作する方が増えています。また、これまでようにキーが整然と並んだものだけでなく、特徴的なものもあります。キーボードの入力速度は生産性に大きく関わるので、キーボードの使い勝手は大きな要素になります。Keyboard Simulatorはそんなキーボードのデザインを3D空間で確認できるソフトウェアになりま...

List

  • 2020/10/29

Firetable - Firestoreのデータ管理を表計算風に

モバイルアプリやWebサイトで、FirebaseのFirestoreを使っている方もいるでしょう。Firestoreはクラウドのデータベースシステムですが、データをJSONで管理しているので、Firebaseの管理画面からでも見づらいのが問題です。そこで使ってみたいのがFiretableです。Firetableを使えば...

List

  • 2020/10/28

Water.css - シンプルなWebサイトをちょっと良い感じに

HTMLは自由な表現が可能ですが、素のままでは本当に貧相な表示になります。かといって気の利いたデザインを作るのは大変です。一部の表現が足りないために、全体のバランスが崩れてしまうことも多々あります。そこで使ってみたいのがWater.cssです。読み込むだけで、Webサイトをそれっぽくしてくれます。## Water.cs...

List

  • 2020/10/27

CharaTypeSeparator - 文字種ごとにCSSを適用して文字詰めをサポート

テキストの表示は読みやすさ、分かりやすさという観点において大事な視点です。広がりすぎても読みづらく、狭くても読みづらいものです。さらに文字種によって適切な幅は異なるので、問題が複雑化します。今回紹介するCharaTypeSeparatorは文字種をスタイルとして適用してくれるJavaScriptライブラリになります。#...

List

  • 2020/10/26

Placeholder service - 自分で立てる画像のプレイスホルダーサーバ

画像のプレイスホルダーはWebサイトやアプリのモックアップを作るときに重宝します。情報量が多い画像を使うと本質を見失いがちです。グレー表示などの画像であれば、サイトの構成など、必要な場所だけに目を配れます。今回紹介するPlaceholder serviceは自分で立てるプレイスホルダーサーバです。自由な大きさに画像を生...

List

  • 2020/10/26

signal - Webブラウザではじめる作曲生活

音楽制作をはじめようと思うと、さまざまな機材が必要になります。ずっと制作しているならば用意した方がいいですが、時々しかしない時に機材を購入したり、引っ張り出してくるのは面倒です。そのせいで制作意欲が削がれてしまうのは勿体ないことです。今回紹介するsignalはWebブラウザだけで使える音楽制作ソフトウェアです。今すぐに...

List

  • 2020/10/22

vue-easytable - Vue用の高機能テーブルコンポーネント

Webページでテーブル表示はよく使われますが、デフォルトでの機能の少なさには失望させられます。その結果、使い勝手の悪いテーブルで我慢するか、自分たちで機能を追加しなければなりません。今回紹介するvue-easytableは名前の通り、Vueで使えるテーブルコンポーネントになります。## vue-easytableの使い...

List

  • 2020/10/22

player.html - ディレクトリインデックス代わりに使える動画プレイヤー

Apacheやnginxにはディレクトリインデックス機能があります。これを使えばHTMLファイル以外のコンテンツを公開する際に、ディレクトリに放り込めばいいだけです。しかし単なるリストであり、見栄えはよくありません。もし公開するのが動画であれば使ってみたいのがplayer.htmlになります。プレイヤー付きで格好良いイ...

List

  • 2020/10/21

Lofimusic.app - Lo-Fiミュージックを聴いてリラックス

新しい曲を高音質で聴くのもいいですが、レコードやラジオなど、それほど音質の高くない環境でゆったりとした曲を聴くのも悪くありません。結局のところ、音楽のよさは人それぞれ、TPOに応じて変わるということでしょう。今回紹介するLofimusic.appは、YouTubeのLo-Fi音楽をラジオ風に聴けるアプリケーションです。...

List

  • 2020/10/20

glitch-image - 画像にグリッチ加工を行う

グリッチは画像などのバイナリデータをわざと壊すことで、映像に乱れを起こす加工技術です。乱れによってちょっとした不安感を感じさせたり、空気の乱れやSF的な効果を呼び起こせます。そんなグリッチを任意の画像に適用できるライブラリがglitch-imageです。## glitch-imageの使い方適用した画像です。!