Cloudflare、ヘッドレスブラウザ「Browser Rendering API」正式リリース。Puppeteerライブラリも提供開始
Cloudflare、ヘッドレスブラウザ「Browser Rendering API」正式リリース。Puppeteerライブラリも提供開始 Cloudflareは、同社のサーバレス基盤であるCloudflare Workersを通じてヘッドレスブラウザを操作できる「Browser Rendering API」の正式サービス化を発表しました。 これまではBrowser Rendering APIはオープンベータとして提供されていました。 Good morning! We'll keep it short: Browser Rendering API is now available to all paid Workers customers with improved session management. https://t.co/TP2W2KtgOx #DeveloperWeek — C
小さなゲームを作るとして、ターゲットデバイスと開発環境、何向けに何で作るのがいいんだろう - ABAの日誌
じゃあ小さなゲームを作ってみようか、と思ったときに、まず考えないといけないことの一つに、PC、スマホ、ゲーム機などなど、どのデバイスで動くゲームを作るかということがある。 特にこだわりがないのであれば、PCのWebブラウザ向けのゲームを作るのがおススメだ。今のブラウザは様々な開発環境で開発されたゲームを動作させるためのプラットフォームとして成熟しているし、他の人にプレイしてもらうにも、ネット上のURL告知からシームレスに遊んでもらえてお手軽だ。 ゲーム作りを楽しむ、という面では、どの開発環境・プログラミング言語・ゲームエンジンでゲームを作りたいか、から考える手もある。これについては小さなゲームだからどうこう、ということは特になくて、自分の好みで決めて良いと思う。ただ、重厚な3Dゲームを主なターゲットとしているUnreal Engineなどは小さなゲームを作るにはリッチすぎる、などは考慮して
共同編集可能で全ブラウザで動くWYSIWYGのリッチテキストエディタを作成できて商用OKなオープンソースの「ProseMirror」を使ってみた
ウェブ上でリッチテキストエディタを構築するためのオープンソースのツールキットが「ProseMirror」です。商用利用可能なライセンスになっており、もともと2015年にクラウドファンディングで約790万円を超える金額を集めて開発が始まったもの。ニューヨークタイムズ・Atlassian・asana・Box・Evernoteなども継続的な開発をサポートしています。共同編集が可能な構造で、プラグイン形式によって独自の拡張を盛り込むこともできる高機能なツールキットになっており、マークダウン形式とWYSIWYMの切替、ツールチップの実装、画像のアップロード、独自メニューの構築、linterによるスキャンでエラー検出してユーザーが修正できるようにする、コンテンツ内に脚注を追加、変更履歴を保持して各ユーザーがここの変更を調べて元に戻せるようにする、などなどウェブアプリ開発で求められる機能が柔軟に追加でき
WebブラウザでPythonが動作する！PyScriptの詳解 | gihyo.jp
鈴木たかのり（@takanory）です。今月の「Python Monthly Topics」では、Webブラウザ上でPythonが動作するPyScriptについて、内部構造なども含めて詳しく解説したいと思います。 PyScript公式サイト（https://pyscript.net/） Warning：PyScriptは現在非常に活発に開発が進んでいるプロダクトのため、将来的にこの記事のサンプルコードが動かなくなる可能性があります。記事執筆時点では最新バージョンであるPyScript 2023.03.1で動作確認しています。うまく動かない場合はPyScriptの公式ドキュメントなどを参照してみてください。 PyScript - PyScript documentation PyScriptとは？ PyScriptは公式サイトに「Run Python in Your HTML」と書いてあると
ブラウザ用漫画ビューアーライブラリ「ToraViewer」を公開しました - 虎の穴開発室ブログ
こんにちは。虎の穴ラボのはっとりです。 ブラウザ用漫画ビューアーライブラリ 「 ToraViewer 」 を公開したので紹介したいと思います。 www.npmjs.com github.com はじめに この記事では、ToraViewerの利用方法とToraViewerが利用している技術についてを紹介していきます。 ToraViewerで何ができるのか ToraViewerは漫画や写真集などの画像一覧を電子書籍のような形式で閲覧できるライブラリです。 デモページから実際の動作を確認することができます。 Tora Viewer デモ ToraViewerデモ 画面サイズにより自動的に1ページ表示と見開き表示が切り替わります。 また、利用ユーザーが歯車ボタンから任意のスタイルに変更できます。 ToraViewerの使い方 まずはインストールします。 npm i @toralab/tora-vi
頻出単語表示、わずか9KBのAI日本語単語分割ライブラリ「TinySegmenter」をESモジュール化
自由入力された文章をデータ化する形態素解析ですが、巨大な辞書が必要になったり次々登場する単語に対応することなどなかなか大変そうなイメージでしたが、機械学習を使った、単語分割するコンパクトな実装「TinySegmenter」を発見。ブラウザやDenoでいい感じに使えるESモジュール版にしてみました。 「頻出単語表示 by TinySegmenter」 文章を入れると、頻出単語順に並び替えて表示する、サンプルアプリ。このアプリでは、3文字以上を単語としています。一日一創ブログをコピペしてみるといい感じに！ プログラムで組み込む方法は簡単、ブラウザやDenoで下記コードを入れるだけ。 import { TinySegmenter } from "https://code4fukui.github.io/TinySegmenter/TinySegmenter.js"; const segs = T
マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も
マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も マイクロソフトは、JavaScriptで2Dや3Dモデルを高速に扱えるライブラリ「Babylon.js」の最新版「Babylon.js 5.0」正式版をリリースしました。 We'd like to formally introduce the next version of the Babylon Platform - #BabylonJS5 Blog: https://t.co/aMgjIIeIin Video: https://t.co/OMssjZZPPz#gamedev #gamedevelopment #indiedev #indiedeveloper #webdev #3D @WebGPU #w
body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能 - Qiita
この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方について サイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです 対象ブラウザ iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox どんな時に使うか？ 例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。 モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。 なぜ使うの？ スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。 例えば、 overflow:hidden
TensorFlow.jsノードをNode-REDで使ってみる - Qiita
日立製作所OSSソリューションセンタの横井です。今回は、画像認識を行うNode-REDのTensorflow.jsノードの使い方をご紹介します。 Tensorflow.jsとNode-RED TensorFlow.jsとは、TensorFlowのJavaScript実装です。TensorFlow.jsを用いることで、ブラウザ上やサーバサイドのNode.jsで学習や推論処理をリアルタイムに実行できます。また、Node-REDは、主にIoT向けに開発されたピジュアルプログラミングツールです。InfoQの記事によると、2020年のトレンドとしてTensorlow.jsはEarly Majority、Node-REDはEarly Adoptersという流行っている/流行りつつあるOSSとして位置付けられています。 本記事では、これらトレンドの2つのOSSを組み合わせて何ができるか見てみましょう。
markedで安全にMarkdownからHTMLを生成するsafe-marked
MarkdownをHTMLにコンパイルするmarkedは0.7.0でsanitizeオプションを非推奨にしています。 これはサニタイズの処理をmarkedから外す目的です。 Sanitize and sanitizer · Issue #1232 · markedjs/marked このsanitizeオプションの代わりにDOMPurifyを利用することを推奨していますが、 DOMPurifyはブラウザとNode.js両方で使うには癖があるためちょっとややこしいです。 なぜならDOMPurifyはDOM APIに依存しているため、 Node.jsで動かす場合はjsdom使うためです。 単純にjsdomを使ってしまうとブラウザでもjsdomが含まれてしまい、ファイルサイズが巨大になってしまいます。 そのため、ブラウザ向けの場合では直接DOMPurifyを使い、 Node.jsの場合はDOMP
ブラウザ、Node.js、メモリ上で動くlocalStorageライブラリ
シンプルなストレージとしてlocalStorage的なものが欲しくなることはよくあるのですが、Node.jsで動かなかったり、インメモリ版が欲しくなったりと色々な状況があります。 毎回そういうときに考えるのが面倒だったので、modeで全部の状況を切り分けできるlocalStorageのponyfill的なライブラリを作りました。 ponyfillとはmonkey patch的にグローバルを書き換えるのではなく、同じAPIを持ったオブジェクトを返すようなpolyfillライブラリです。 azu/localstorage-ponyfill: Universal LocalStorage for browser and Node.js. インストール Install with npm: TypeScriptで書いてあるので、型定義ファイルは同梱されています。 使い方 Auto(Browser o
Electronよりもお手軽に！NW.jsならデザイナーでもデスクトップアプリが作れる
Webの技術でデスクトップアプリが作れるフレームワークといえばElectronが有名ですが、より手軽に使えるのがNW.jsです。デザイナーでもちょっとしたデスクトップアプリならすぐに作れちゃいますよ。 NW.jsは、HTML、JavaScript、CSSといったWeb技術を使ってネイティブアプリを作るフレームワークです。一番単純なケースだと、手慣れたワークフローでWebアプリを作り、最後にジェネレーターですべてをコンパイルして、ブラウザー同様にWebアプリを表示できるネイティブアプリを作ります。このようなアプリケーションは「ハイブリッドアプリ」と呼ばれます。 ハイブリッドアプリがすばらしいのは、単になじみのある言語（HTML、JavaScript、CSS）で書けるというだけでなく、本質的に次のような普通のWebアプリよりも優れた点があるからです。 ブラウザーの種類とバージョンをコントロール
ブラウザでバーコード/QRコードリーダー【実装・カスタマイズ編】
やりたいこと Javascriptでバーコードリーダーを実装。 出来るだけ多くのプラットフォームで動作させたい。 WebCodeCamJSというライブラリをベースにバーコードリーダーを実装する。 クライアントサイドで動作するため、サーバに余計な負荷をかけない。 WebCodeCamJSをカスタマイズさせて、より使いやすくする。 チェックデジットを自前で実装して、より誤検出をへらす。 そのうち記事を追記したりするかもしれません。 前提 前回の記事 https://qiita.com/mm_sys/items/a0dcc2c02f27751cd80d WebRTCでwebカメラを使ってバーコードリーダーを実装するため、前回はそのテスト環境を作成しました。 しかし、そのテスト環境でなくてもHTTPSで接続出来る環境であれば今回の内容を実装できます。 webサイトの保存ディレクトリをhtdocsと
JavaScriptで「OS」を開発した猛者が現れ、ブラウザ内にデスクトップ環境を構築できる「OS.js」が話題に！ : うえぶはっく
その名もズバリ「OS.js」というJavaScriptライブラリです。 誰かのイタズラかと思いきや、使ってみるとブラウザの中にもう1つ別のパソコンが起動しているような感覚になり、その完成度の高さに驚かされます。 APIも提供されており、「OS.js」で起動したデスクトップ環境用のアプリケーションを自分で開発することも可能になっているのは面白い点でしょう。
nextTick、setTimeout(fn, 0)の代わり - 素人がプログラミングを勉強していたブログ
setTimeout(fn, 0)より高速な関数は最近はこんな感じのを使うといいと思う。 var nextTick; if (typeof setImmediate === 'function') { nextTick = setImmediate; } else if (typeof process === 'object' && typeof process.nextTick === 'function') { nextTick = process.nextTick; } else if (typeof MessageChannel === 'function') { (function () { var channel = new MessageChannel(); var queue = null; channel.port1.onmessage = function () { t
JS 大規模プロジェクトの管理手法 – ロードオブナイツの実例紹介
どうもこんにちは。 Aiming で東京開発グループのゼネラルマネージャをやっている小林です。 8月に mobage と Yahoo! モバゲー で ロードオブナイツ というシミュレーション RPG をリリースさせて頂きました。 そして、先週、 Yahoo! モバゲー版の PC ブラウザ専用デザインをリリースさせて頂きました。 今回リリースしたものは元々 Unity で作られていた iOS アプリ版 Lord of Knights を HTML5 で書きなおしたものです。 （今は Android 版 もあります） HTML のポチポチゲーをネイティブに移植したというのはよく聞く話ですね。 ですが、逆にリッチなネイティブアプリを HTML5 に移植し、かつスマフォブラウザと PC ブラウザで同じものを動かすなんてのは前例が見当たりませんでした。 技術的ハードルが高かったことに加えて期日がタイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」
JavaScriptのコードフローを視覚化するTraceGL