ちいさな Web ブラウザを作ってみよう
ブラウザ上で3Dキャラクターと会話できる「ChatVRM」をオープンソースで公開しました - pixiv inside
こんにちは、VRoid部のkeshigomuです。 普段は主にVRoid Hubのフロントエンドエンジニアとして、3Dキャラクターを表示するビューワーの開発に携わっています。また@pixiv/three-vrmという、Web上で3Dモデルを使ったコンテンツを開発するためのOSSライブラリの運用も行っています。 今回、ブラウザで簡単に3Dキャラクターと会話できる技術デモ「ChatVRM」とそのコードをオープンソースで公開しました。 「ChatVRM」は、テキスト・口頭で話しかけた言葉にキャラクターがフルボイスで回答してくれる「キャラクターと会話できる」デモです。WEBブラウザ上で動作でき、3Dキャラクターのインポート・切り替え、キャラクターに併せて声を調整することもできます。 (2023/07/10追記) 読み上げ音声の生成に使用していたKoeiro APIの提供終了に伴い、以前のデモとコー
Awesome Dev Tool Tips 🔥
Contents (Click to expand) ↕️ Design Mode Pretty Print Command Pallet and Super Search Snippets Live Expressions Tracking Changes Console Shorthand Find Unused Code Rendering Panel Network Paint Times Network Timings Inspect Network Requests Performance Identifying Memory Leaks Raw Memory Inspection Test bfcache Full Refresh Lighthouse Page Size Breakdown Record User Flows Advanced User Flow Opera
禅リラックス無限ドライブ『Slow Roads』PCブラウザ向けに無料公開。のどかな丘から火星まで無心で走る - AUTOMATON
ホーム ニュース 禅リラックス無限ドライブ『Slow Roads』PCブラウザ向けに無料公開。のどかな丘から火星まで無心で走る 個人クリエイターのAnslo氏は、『Slow Roads』を公開した。Webブラウザ上でプレイできる、ドライブゲームだ。 『Slow Roads』はドライブゲームだ。自動生成される道をひたすら車両で走り続ける。数種類の車両のほか、季節や時刻、天候なども複数用意。夜道をヘッドライトで取らしながら駆けることも可能となっている。 「終わりなきドライビング禅（Endless Driving Zen）」と銘打たれているように、本作は終わりも分岐もない道をひたすら車両で走り抜けていく。車両の運転はキーボード操作でおこなうほか、自動運転への切り替えも可能だ。鳴り響くのは電気駆動と思われる車両から響く音と、風を切る音のみ。心を無にする瞑想のようなゲームプレイが本作の特徴といえそう
パソコンとWebカメラだけで誰でもVTuberになれる！ しかも無料！ 「ユーザーローカルWebcam VTuber」リリース | PANORA
ユーザーローカルは、パソコンとWebカメラだけですぐにVTuberになれるサービス「ユーザーローカルWebcam VTuber」を提供開始した。利用料は無料。 ●Webcam Tuber https://vtuber.userlocal.jp/ 「Webcam VTuber」は、AIアルゴリズムによってカメラ映像から顔の動きや瞬きを読み取り、画面内のVRMキャラクターにリアルタイムで反映する。ハンドトラッキングにも対応しており、腕や手のひら、指の動きを3Dモデルに反映可能だ。ソフトウエアをインストールすることなく、Webブラウザーからすぐに利用できる。 ・利用マニュアル：https://info.userlocal.jp/vtuber_tool 顔の表情変更やキャラクター変更にも対応しており、すべての機能を無料で利用可能。無料配信ツールのOBS（Open Broadcaster Softw
SSH接続をWebブラウザの純粋なHTTP上で実現する - nwtgck / Ryo Ota
HTTPといえばHTML/CSS/JavaScriptや画像などの小さめの限りがあるデータを手に入れるためによく使われている印象がある。REST APIのようなHTTPを使ったAPIでも限りのあるデータがリクエストとレスポンスになる印象が強い。
CSSで期待通りに表示されない根本的な原因の見つけ方
CSSで、期待通りに表示されない、なんかずれてる、ブラウザによって表示が異なる、ということがありませんか？ CSSで期待通りに表示されない時に、根本的な原因を見つける方法を紹介します。 その原因がブラウザによるものなのか、CSSの仕様によるものなのか、どのように機能するか知ることで、問題の根本的な原因を見つけることができます。 Finding The Root Cause of a CSS Bug by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 注意: ここでの「バグ」はエラーだけではなく、想定外の挙動・振る舞いです。 はじめに CSSの基本的なバグ ドロップダウンメニューの配置 HTMLの置換要素 オーバーフロー要素とインラインブロック要素 インラインブロック兄弟間のスペース まとめ はじめに
Chromeで(いわゆる)スーパーリロードとキャッシュクリアを少しでも楽に行いたい | DevelopersIO
やりたいこと Web開発において、コンテンツをサーバ側にアップロードしてリロードしたにも関わらず、ブラウザに反映されないことがあります。 確実に反映させるために、以下の手順を実施していました。 ブラウザ(Chrome)のローカルキャッシュをクリア スーパーリロードを実施して、キャッシュ設定状態によらず、サーバからコンテンツをダウンロード Ctrl(macOSの場合 Command) + Shift + R この手順が少しでも楽にならないかと思い、調べてみました。 環境 macOS Catalina 10.15.6 Chrome 84.0.4147.125 Chrome デベロッパーツールを使う場合 上記のページの通りなのですが、Chrome デベロッパーツールを開いている時限定で、 ブラウザの再読み込みボタン上で右クリックする(もしくは左クリックし続ける)と現れるメニューから キャッシュの
Webブラウザ上で純粋なHTTPだけで単方向リアルタイム通信を可能にするHTTPのストリーミングアップロードが遂にやってくる - nwtgck / Ryo Ota
Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
shellnium - ShellスクリプトでWebブラウザを自動操作
Seleniumを使うとWebブラウザをプログラミングコードから自動操作できます。よくWebブラウザのテストなどで使われていますが、スクレイピングや業務システムの自動操作でも利用されます。 今回紹介するshellniumは、そんなSeleniumをシェルスクリプトで操作するソフトウェアです。 shellniumの使い方 実際のコードです。 #!/usr/bin/env bash source ./selenium.sh main() { # Googleのトップページに遷移 navigate_to 'https://google.co.jp' # 検索ボックスの要素を取得 local searchBox=$(find_element 'name' 'q') # 検索ボックスに入力＆検索実行 send_keys $searchBox "タピオカ\n" } main ちゃんとWebブラウザを自
Webサイトで利用されているフォント情報を表示してくれるブラウザ機能拡張「Fonts Ninja」のChrome版が、より詳しいフォント情報の表示やブックマーク機能に対応。
Webサイトで利用されているフォントの情報を表示してくれるブラウザ機能拡張「Fonts Ninja」のChrome版がアップデートされ、より詳しいフォント情報の表示や無料のブックマーク機能を提供しています。詳細は以下から。 Fonts Ninja (旧Fontface Ninja)はフランス・パリのデザイナーAxel Corjonさんが2015年に開発したブラウザ機能拡張で、Webサイトで利用されているフォントの情報を一覧にして表示してくれる機能がありますが、このFonts NinjaのGoogle Chrome版がv6.0へアップデートされています。 ⭐️ We updated a lot of stuff, but the main new feature is the ability to bookmark fonts you discovered on websites. You
Ableton、シンセサイザーの基礎を学ぶことができる無償のWebアプリ、『Learning Synths』の日本語版を公開
昨年6月に英語版が公開された『Learning Synths』は、Webブラウザー上でシンセサイザーの基礎を学ぶことができる無償のWebアプリ。オシレーターやフィルターといったシンセサイザーの各機能から、ベースやリードといった音色の作り方に至るまで、シンセサイザーのイロハを実際に音を聴きながら学習できる優れたコンテンツです。今回、日本語化されたことで、英語が苦手な人でも取っつきやすくなりました。 『Learning Synths』は、パソコン／スマートフォン／タブレットなどの最新のWebブラウザー上で、無償で利用することが可能。なおAbletonは、音楽制作の基礎を学ぶことができる『Learning Music』も公開していますので、そちらも併せてチェックしてみてください。
[ツール] ブラウザでJSONをフォーマット（整形）できるツールを作りました | DevelopersIO
こんにちは。きんくまです。 APIのレスポンスでJSONが返ってきたときに、平文でしか文字列を見れない場合があったりします。 そんなときに気軽に整形したり、インデントを変えたりしたいなーと思って、ブラウザでできるツールを作成しました。 動作デモ JSON Formatter 使い方 例えばこんなJSON文字列があるとします。 {"glossary":{"title":"example glossary", "GlossDiv":{"title":"S","GlossList":{"GlossEntry": {"ID":"SGML","SortAs":"SGML","GlossSee":"markup"}}}}} サンプルのJSONはこちらからいただきました。 JSON Example これを入力欄にペースト フォーマットボタンを押す 出力欄に書き出されます オプションで、インデントに使える
![[ツール] ブラウザでJSONをフォーマット（整形）できるツールを作りました | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/701656b243374eabfd76ef515af56fee5968cc1c/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F02%2Fjson-formatter-190216-fig3.png)
Sushi Browser - Electron製の開発者向きなWebブラウザ
開発をしていて、一つのウィンドウを複数ペインに分けてコーディングすることはよくあります。同様にWebブラウジングしている時に、複数サイトを並べたいと思うこともあるでしょう。その場合、Webブラウザではウィンドウを分けなければなりません。 そこで使ってみたいのがSushi Browserです。マルチペインに対応したWebブラウザです。 Sushi Browserの使い方 起動直後です。 レンダリングエンジンはWebKitなのでSafariやGoogle Chrome同等の結果が得られます。 セッションを保存しておいて、呼び出せる機能。 ユーザエージェントを変更する機能。 スプリット。 さらに細かく分割もできます。 スクリーンショット保存機能。ページ全体も指定できます。 さらに設定には多数の機能があります。 なぜかターミナルも。 ファイル操作もできます。 ノート機能はWYSIWYGでメモできま
Pennywise - 常に表示しておけるWebブラウザ
仕事をしていて、Webサイトを表示しつつ、その情報を使って作業するというのはよくある光景です。そんな時、ウィンドウを横並びにしたり、都度アプリケーションを切り替えながら作業しますが、とても面倒です。 そこで使ってみたいのがPennywiseです。任意のサイトを表示しつつ、透明度が設定できるWebブラウザです。 Pennywiseの使い方 起動すると、まずURLを入力します。 普通のWebブラウザとして使うこともできますが、あまり機能は多くありません。 常に前面表示にして使うこともできます。 そして透明度の設定もできます。 Pennywiseを使うことで常にWebサイトを表示しながら文書を作ったり、開発を続けられるようになります。参考にするのはもちろんのこと、スポーツのリアルタイム実況を表示したりと使いどころが多そうです。 PennywiseはJavaScript製のオープンソース・ソフトウ
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)JavaScriptNode.jses6webpackbabel 概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロン
gobasic - Goで作られたBASICインタプリタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました BASICと言えば最初に触ることの多いプログラミング言語だと思います。ごく簡単な言語体系だけに、複雑なことをしようと思うともの凄くコードが増えてしまったりします。また、GOTOを多用すると全体の動きの把握が難しく、スパゲティなコードが作られます。 そんなBASICをGoで動かせるのがgobasicです。 gobasicの使い方 コード例です。一番左は行番号です。 10 GOTO 80 20 GOTO 70 30 GOTO 60 40 PRINT "Hello, world!\n" 50 END 60 GOTO 40 70 GOTO 30 80 GOTO 20 実行します。確かにちゃんと出力されます。 $ gobasic 10-goto.bas Hello, world! さらにWe
httpでアクセスしたいのにhttpsへリダイレクトされて悩んだ（HSTSまたはStrict-Transport-Securityの沼） - Qiita
httpでアクセスしたいのにhttpsへリダイレクトされて悩んだ（HSTSまたはStrict-Transport-Securityの沼）SSLheaderredirectHTTPS 解決まで時間がかかったので自分への戒めとして残しておく [事象] httpでアクセスしたいのにhttpsでのアクセスにリダイレクトする ERR_SSL_PROTOCOL_ERRORとブラウザに言われる これはSSLに対応していないサーバにhttpsでアクセスしたため [ポイント] サーバにSSLの設定はしていない アプリケーションでもリダイレクトの設定はしていない でもhttpsになる。。。 [原因] レスポンスヘッダで以下を返却していることで そのドメインではブラウザがhttpsでアクセスするように求めていると理解する includeSubDomainsがあることで、サブドメインまで対象となる。 [解決方法]
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちいさな Web ブラウザを作ってみよう（オンライン講義版） / Build Your Own Web Browser
Explore DOM Events
