JavaScriptの外部ファイルで簡単に実装できる、映画コンテンツを快適に再生するHTML5動画プレーヤー -Moovie.js
動画、特に映画コンテンツを快適に再生することにフォーカスされたHTML5プレーヤーを実装するスクリプトを紹介します。 実装は非常に簡単でカスタマイズも豊富、字幕は多言語をサポート、動画の再生速度は0.1x-8xまで変更可能、デザインはCSSベースで簡単に変更できます。 Moovie.js デフォルトでも快適、フルカスタマイズも可能 動画の字幕は多言語をサポート 再生速度は0.1x-8xまで変更可能 .vtt, .srtの字幕ファイルをサポート トラックや字幕を動的に追加可能 字幕のカスタマイズ イベント・ショートカットのAPI 依存関係はなし、VanillaJSで構築 すべてのモダンブラウザをサポート レスポンシブに完全対応 MITライセンスで、商用プロジェクトでも無料で利用できます Moovie.jsのデモ デモでは映画コンテンツを再生しながら、Moovie.jsのいろいろな機能を楽しめ
出来ることは計算だけ？「WebAssembly」は一体なにが新しいのか〜エンジニアが語る技術愛 ＃03〜｜ミクシル
ミクシィには、探究心溢れるエンジニアがたくさん在籍しています。 その探究心は業務で扱う技術にとどまらず、趣味で書いているプログラムだったり、個人的に研究している言語だったりと、自身の気になった技術への追求も留まることを知りません。そこで、社内のエンジニアに“好きな技術”について、思う存分に語ってもらうシリーズを始めました。 ルールはこの通り。 ・業務で使っている技術でも、使われていない技術でもOK ・あくまでも個人的な見解で ・その技術のどこが面白いのか ・愛を込めて語り尽くしてもらう 第3回目は、新規プロダクトを目下開発しているSREグループの神谷に、「WebAssembly」の魅力をたっぷり語ってもらいました。 Webの技術でもないしアセンブリでもない？ ━━早速ですが、今アツい技術について教えてください！ 今回話すのは「WebAssembly（以下Wasm）」についてです。生まれた背
PythonコードをWebAssemblyにコンパイルする「py2wasm」がWasmer社から発表された。WebAssembly版CPythonよりも約3倍高速だ。PythonコードをCPythonのAPIコールに変換するトランスパイラがベースになっている。 WebAssemblyランタイムの開発と提供を行っているWasmer社は、PythonのコードをWebAssemblyバイナリにコンパイルする「Py2wasm」を発表しました。 Announcing py2wasm – A #Python to #WebAssembly compiler that speeds up by 3x your Python apps!https://t.co/0v4YLZC7lY — Wasmer (@wasmerio) April 18, 2024 WebAssembly版CPythonよりも3倍高速
2019年4月3日、『神姫PROJECT』などソーシャルゲームの企画・開発を手がける株式会社テクロスが主催するイベント「TECH x GAME COLLEGE」が開催されました。第17回となる今回のテーマは「スマホ向け HTML5ゲームのすべて」。株式会社 Liberapp代表取締役の山田元康氏が、最新のHTML5ゲーム事情を解説します。後半パートとなる今回は、スマホ向けHTML5ゲーム市場の今と、現在の技術の潮流を解説します。 HTML5ゲームのプラットフォーム 山田元康氏（以下、山田）：ここまでが市場全体の話です。それでは、スマホ向けのHTML5市場にはどんなプレイヤーがいるのかというと、一番上に書いてあるのがプラットフォームです。プラットフォームを大きく3つに分けています。 一番左に書いたのがオンチャットと呼ばれているものです。HTML5ゲームの市場が成り立ってるのは、基本的にオンチ
2019年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。
photon https://silvia-odwyer.github.io/photon/ photonの特徴 引用： photon from GitHub 「Photon」は、WebAssemblyにコンパイルされる高性能のRust画像処理ライブラリ。モジュールに組み込むことで、Web・ネイティブ上で高速な画像処理が可能になります。 Photonを試してみる ヘッダーにある「ファイルを選択」から、処理したい画像をアップロード。 続いて、左メニューに用意された様々なエフェクトを画像に提供していきます。プレビューとともに処理にかかった時間も併記され、高速な処理を実感できます。 画像の反転にかかる時間もわずか47ms! Photonの導入 https://github.com/silvia-odwyer/photon オープンソースとして提供されており、npmで既存プロダクトにモジュールとし
フォントでいろいろなデザイン、表現をしたい人にぴったりなLeon Sansを紹介します。フォントを書くアニメーションだけでなく、さまざまなアニメーション、エフェクト、シェイプを自由に作成でき、インスピレーションが刺激されると思います。 Leon Sansは商用でも無料で利用できます。通常のフォントファイルとは異なり、Webページやスマホアプリに特化されたCanvasベースのフォントです。 Leon Sans Leon Sans -GitHub Leon Sansとは Leon Sansのデモ Leon Sansの使い方 Leon Sansとは Leon Sansは美しいサンセリフ体で、フォントの太さを動的に変更し、HTML5のCanvas要素でアニメーション、エフェクト、シェイプを自由に作成できます。 生まれたばかりの赤ちゃんレオン君を祝うためにフォントをリリースしたそうです。 サイトでは
ジェネラティブアートという言葉をご存知でしょうか？ アルゴリズムによって作られる芸術作品を指す名称です。Pinterestで「generative art」と検索すると静止画、動画ともにたくさんの作品を見ることができます。 無機質さを感じさせるものもあれば、まるで生きているように感じる作品もあります。創作者たちはどのようなところから着想を得ているのでしょうか？ 彼らの中には数学的な幾何学模様や物理現象、果ては生物が織りなす複雑なパターンをコンピューターで再現することにより作品を作る者もいます。 本記事では特に「生物」に焦点を当てます。生物の複雑な営みを紐解いた背景や、それをアルゴリズムに落とし込むことで可能になった表現を紹介します。 本記事を読むことで日常に潜むあらゆる現象が芸術の種に見える喜びを感じていただければ幸いです。 サンプルはHTML CanvasとJavaScriptで作成して
KubernetesのノードとしてWebAssemblyランタイムを用いる「Krustlet」、CNCFのサンドボックスプロジェクトに申請
KubernetesのノードとしてWebAssemblyランタイムを用いる「Krustlet」、CNCFのサンドボックスプロジェクトに申請 オープンソースとして開発されている「Krustlet」は、KubernetesのノードとしてDockerコンテナではなく、WebAssemblyのランタイムを用いることができるようになるソフトウェアです。 Krustletは、KubernetesのノードエージェントであるKubeletとして振る舞い、自身をKubernetesのノードとして登録します。すると、WebAssemblyアプリケーションをPodとして実行できるようになるのです。 つまり、OS上のサンドボックスとしてDockerコンテナを用い、そのなかでWebAssemblyランタイムを実行するのではなく、WebAssemblyをOS上のサンドボックスとして用いる、ということです。 これにより
本連載では、Webブラウザー上でJavaScriptとともに動作できるバイナリ形式のプログラムファイル「WebAssembly」を、Rustプログラミング言語で実装する方法を説明していきます。前回はRust言語の基礎を説明しました。今回はいよいよ、Rust言語でWebAssemblyを実装していきます。また実装したサンプルを利用して、WebAssemblyのメリットなどを説明します。 はじめに 本連載では、Webフロントエンド開発において注目されているバイナリ形式のプログラムファイルWebAssemblyを、Rustで実装して活用する方法を説明しています。初回記事ではWebAssemblyの背景およびRust開発環境の作成について、前回記事ではRust言語の基本的な言語仕様について説明しました。 今回はこれまで説明した内容を利用して、実際にRust言語でWebAssemblyを実装していき
ブラウザプラグインのFlash Playerは2020年末でサポートが終了しました。そのことにより、Flashコンテンツをブラウザで再生する手段がなくなっています。 筆者はBeautiflビューティフルというウェブサイトを個人的に運用しています。Beautiflは、ユーザーが投稿したFlash作品を紹介するギャラリーサイトです。Flash Player終了によってウェブサイトの目的であるFlashの再生体験ができなくなるので、窮地に陥りました。Flash Playerの終了は2017年にアドビが決定したことで覆せないので、ウェブサイト側として次の3つの対策を行いました。 FlashをHTMLで再生可能にする Flashをビデオとして残す SWFファイルをダウンロード可能にする 本記事ではウェブでFlashコンテンツをどうやって残していこうとしたのか、そのアプローチを紹介します。 Beaut
WebAssembly の利用シナリオを調べる
参考 : Frequently asked questions 加えて wasm はパフォーマンスの他に移植生も考慮されて設計されています。これによって C++ などでクライアント向けに実装された SDK なども Web に移植できる可能性も生まれます。他にもゲームの SDK, 画像コーデック, 機械学習のモデル、言語ランタイムなども対象にできるでしょう。 とはいえ現実世界で使えているのか Google みたいなトップクラスの技術力の会社だけじゃない？と思われるかもしれません。次はプロダクションの例を調べてみます。 プロダクションでの導入例 Web アプリではまだそこまで実装例は多くないですが、着実にプロダクションでの使用例は年々増えているようです。Google は Meet だけでなく Earth でもプロダクション投入しているようで流石ですね… Google Earth Google
フロントエンドでフロントエンドをビルドする
エンジニアの mizchi です。本記事は plaid advent calendar の 8日目になります。 フロントエンドに携わる人なら、フロントエンド開発にまつわるものは、ブラウザの中で開発が完結するはずだ、と考えたことがないでしょうか。僕は個人的にブラウザ上で開発が完結すべきであって、技術的にも不可能ではない、と思っています。これは開発環境と実行環境が同じであるべきという アラン・ケイ
HTML 文書内に <meta charset="UTF-8"> を書いていますか? 書いているとしたら、その必要性を問われた時に理由を説明できますか? 実は私も勘違いしていた部分があり[1]、改めてまとめてみました。 <meta> による文字エンコーディング指定の歴史 Content-Type ヘッダーと <meta> の関係性と優先度 <meta> が必要なケース <meta> で文字エンコーディングを指定するデメリット <meta> による文字エンコーディング指定の歴史 § まず基本的なおさらいをします。<meta charset="UTF-8"> は HTML5 で登場した新しい記法で、 HTML4 以前は <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> などという長くて覚えにくい書き方をしてい
数年前からGoogleは「Progressive Web Apps」（PWA）という技術を提唱してその普及を推進している。PWAはネイティブアプリケーションのように動作するWebアプリケーションであり、オフラインでも動作し、プッシュ通知などの機能も利用できる。本記事ではこのPWAの中核となる技術の解説と、PWAに対応したWebアプリケーションを作成するための流れを紹介する。 「Progressive Web Apps」（PWA）とは 一昔前は「ネットサービス」といえばPCのWebブラウザからアクセスして利用するものがほとんどだった。しかし、スマートフォンが普及した昨今では多くのサービスがスマートフォン向けの対応を行っている。今ではPCからのアクセスよりもスマートフォンからのアクセスのほうが多いサービスは珍しくなく、スマートフォン向けの専用アプリを用意しているサービスも多い。 とはいえ、ネイ
TypeScript でフロントエンドな皆さん、今日も型パズルしていますか？ 型が好きなら Rust ですよね。ということで、いまいち使い所が思いつかない WebAssembly と Rust でなにか面白いことできないかな、と爆速（JS比2倍）の Markdown Editor を作ってみました（面倒な人は直接 GitHub みてください） この記事は iCARE Advent Calendar 2020 の 8日目の記事になります。昨日は アオキタカユキ さんの 【adobe XD】線型、円型のグラデーションを引く方法 という記事でした Webアプリケーションを作る まず、利用する側の Web アプリケーションを作成します どんな構成でもいいんですが、タイミング的にもちょうど良い Vue3 + TypeScript で環境を作りました $ npm install -g @vue/cli
2019年10月9日、『神姫PROJECT』などソーシャルゲームの企画・開発を手がける株式会社テクロスが主催するイベント「TECH x GAME COLLEGE」が開催されました。第27回となる今回のテーマは「HTML5で『重い』問題をクリアしてリッチなゲームを作る」。株式会社ノックノート執行役員の岡山知弘氏が、話題のHTML5ゲームを作るにあたって、いかにJavaScriptでリッチなゲームを作りながら重い問題を解決していくかを語りました。前半パートとなる今回は、負荷改善における前提とCPUの問題についてレクチャーしました。 HTML5で「重い」問題 岡山知弘氏：それでは、30分ほどお時間をみなさんにいただいて、HTML5で重たい問題は、みなさんがHTML5を触られている方であれば、まさに直面しているかなとは思うんですけど、そこで弊社でどういうふうにアプローチしたのかをお伝えさせていただ
Kernel/VM探検隊はカーネルや仮想マシンなどを代表とした、低レイヤーな話題でワイワイ盛り上がるマニアックな勉強会です。KOBA789氏は、シミュレータとCADの制作について発表しました。全2回。後半は、回路CADの制作方法について。前半はこちら。 自作CADに求めること KOBA789氏（以下、KOBA789）：シミュレータができたので、次はCADを作っていきます。書いた回路図がそのまま動くCADがなかなかないので、私はCADに書いた回路図がそのまま動くことを一番求めていました。 大抵の場合、回路を書くCADとシミュレータが別々になっています。まじめな回路を組むのであればそのほうが楽なのですが、だいたいタイミングチャートのかたちで表示されるんですよね。 プローブをいろいろなところにくっつけて、そのプローブの値が時間経過でどうなったかというタイミングチャートがバーッと出るわけです。たく
Ruby開発チームは、2022年12月25日にRuby 3.2.0の正式リリースを発表しました。Rubyは毎年12月25日に新バージョンをリリースすることが恒例となっています。 WebブラウザでRubyコードをそのまま実行可能に 新バージョンであるRuby 3.2.0の最大の新機能は、WASIベースのWebAssembly版Rubyが登場したことです。 これによりWASIをサポートしたWebAssemblyの実行環境、例えばWebブラウザやNode.js、DenoなどのサーバサイドJavaScriptランタイム、Cloudflare WorkersやFastly Compute@Edgeなどのクラウドエッジ環境で、WebAssembly版のRubyを実行できるようになりました。 これらの環境でWebAssemblyの上でRubyランタイムを実行すると、Rubyで書かれたコードをそのまま走ら
XSSがあってもlocalStorageに保存するのに比べてcookieのhttpOnlyはjsから読めないので強いと言うことですが、SPAのサイトであれば、XSSを使ってAPIを呼び出し放題なので、セッションのcookieがjsで読めなくても危険性には大差がないのでは？と思うのですが私の認識がおかしいでしょうか？ - ockeghem page
徳丸本の中の人 OWASP Japanアドバイザリーボード EGセキュアソリューションズ代表 IPA非常勤職員 脆弱性診断、WAFの販売・導入、セキュリティコンサルティングをやっています。 https://t.co/F0kveu1nJM
WebAssemblyでマルチスレッドによる並列処理を可能にする「wasi-threads」仕様の提案、ByteCode Allianceが明らかに
WebAssemblyにおける業界標準仕様などを推進する団体「ByteCode Alliance」は、WebAssemblyでマルチスレッドによる高速な並列処理を可能にする「wasi-threads」仕様を提案したことを明らかにしました。 W3Cでのマルチスレッド仕様策定は現在フェーズ3 WebAssemblyは、Webブラウザ上で高速に実行可能なバイナリフォーマットとしてW3CのWebAssembly Working Groupで標準化が行われており、現在でも新たな機能追加や性能向上のための議論が行われています。 現時点でWebAssemlbyはシングルスレッド処理のみ可能ですが、W3Cの仕様策定の作業の中にはマルチスレッドを実現する「threads」の議論が進められており、フェーズ1のFeature Proposal（機能提案）、フェーズ2のProposed Spec Text Ava
米Wasmer社が、WebAssemblyへのコンパイルだけに特化した新しいプログラミング言語「Onyx」をブログで紹介しています。 Onyxは（Wasmer社ではなく）Brendan Hansen氏が開発に3年を費やしたプログラミング言語です。 （2023/12/13 お詫びと訂正。当初OnyxをWasmer社が開発したと紹介していましたが、Wasmer社とは直接関係のないBrendan Hansen氏が開発した者でした。お詫びして訂正します。タイトルと本文の一部を修正しました） We're so excited about Onyx . A new programming language which solely compiles to #WebAssembly. Read all about it in our new blogpost:https://t.co/L6yZ9Ls5Q
ページの端から端まで伸びる背景があり、コンテンツは両端に空白があり、中央に配置されています。ここ数年で増えてきたレイアウトです。 この内側のコンテナを実装するさまざまな方法、それぞれの利点と欠点、解決方法を紹介します。 The “Inside” Problem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近のWebでよく見かけるレイアウト 古典的な解決策: 外側と内側のコンテナ 単一の要素だけの場合 コントロールが可能なコンテナがある場合 親にoverflow-xを使用しなくてもいい場合 CSS GridまたはFlexboxは役立ちますか？ 代わりに、端をフェイクする 最近のWebでよく見かけるレイアウト あなたはWebページの実装に取り組んでいます。レイアウトには端から端まで水平方向に伸びるbackground-colo
![[CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6f987f7d13c29854dde3dd496f6cdc6d3799c15/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201903%2F2019060101.png)
<detail> <summary>クリックしてみると...</summary> <div> <!-- 表示したい内容 マークダウンも使えます --> </div> </detail> Content Editable 属性にcontenteditable="true"を追加すると、コンテンツの編集が可能になります。 See the Pen Content Editable by yassun-youtube (@yassun-youtube) on CodePen. Map (このタグはHTML4から使えた気がしますが、細かいことは忘れましょう！) mapタグを設定して、coordsでリンク場所を指定することができます。 codepenで再現すると、戻れなくなるので、本家からお試しください！ https://dev.to/atapas/10-useful-html5-features-y
WebAssemblyのガベージコレクションが正式機能に、最新版のChrome 119で。Firefoxも今月リリースのFirefox 120で正式機能になる見通し
WebAssemblyのガベージコレクションが正式機能に、最新版のChrome 119で。Firefoxも今月リリースのFirefox 120で正式機能になる見通し 2023年2月にリリースされたChrome 111から試験的実装となっていたChromeにおけるWebAssemblyのガベージコレクション機能（以下、WasmGC）が、10月31日にリリースされたChrome 119で正式機能になったことが明らかになりました。 Firefoxでも今月（2023年11月）21日リリース予定のFirefox 120においてWasmGCが正式機能になる見通しです。 WasmGCを利用することで、ガベージコレクション機能が言語のランタイムに含まれているJavaなどプログラミング言語をWebAssemblyで実装することが容易になるため、今後WebAssembly上でさまざまなプログラミング言語の実装
CSSで三角形のいろいろな実装例
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。 場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。 この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。 コンテンツの区切りで斜めになっている背景手順や流れでよくある矢印before/afterでの矢印 セクショニング
Photo by Lukas Tennie from unsplashはじめにこのエントリでは、僕が趣味で作っている PicoML という自作プログラミング言語の話を書こうと思う。 作ってから半年くらい経っているのだけれど、如何せん自作言語という無用の長物であり、登壇などでコイツの話をすることもないため、ある種の供養みたいなものだと思ってもらって構わない。 PicoML の概要まずは実装した言語の紹介から。ざっくり以下の特徴を備えた言語である。 ML ベースの文法による関数型言語単純 let 多相型推論による型チェックCLI として、Node.js 上での即時評価器（REPL）と WebAssembly をターゲットにしたコンパイラの双方を提供REPL やコンパイラの実装は TypeScript で行っている。自分の勉強が主目的であったため、REPL やコンパイラの CLI を動作させるの
DenoにはWebAssemblyがある
このDenoスタータプロジェクトテンプレートをGitHubからクローンあるいはフォークしてください。インストラクションに従えば、Denoで動作する最初のWebAssembly関数(Rustで記述されている)が5分以内に完成するはずです。 ちょっとした背景説明 Node.jsが大きな成功を収めたのは、開発者に２つの世界で最高のものを提供できたからです。すなわち、JavaScriptによる、特にイベントベースの非同期アプリケーション開発における簡便さと、C/C++のハイパフォーマンスです。Node.jsアプリケーションはJavaScriptで記述されますが、実行は、Google V8 JavaSciptエンジンと多数のネイティブライブラリモジュールを含んだ、C/C++ベースのネイティブランタイムによって行われます。Denoはこの勝利の方程式を再現する一方で、そのプロセスを、TypeScript
オープンソースのクラウドネイティブなFaaS「OpenFunction」がコンテナに加えてWebAssemblyをサポート。ランタイムにWasmEdgeを統合
オープンソースのクラウドネイティブなFaaS「OpenFunction」がコンテナに加えてWebAssemblyをサポート。ランタイムにWasmEdgeを統合 Cloud Native Computing Foundation（CNCF）のSandboxプロジェクトとして開発が進められているオープンソースのFaaSプラットフォーム「OpenFunction」がバージョン1.0の登場に合わせてWebAssemblyをサポートしたことが発表されました。 OpenFaaSはコードをコンテナイメージにビルドし、それをKubernetes上のランタイムでイベントドリブンに実行するなど、さまざまな機能が統合されたFaaS（Function as a Service）プラットフォームです。下記のように、多くのオープンソースソフトウェアによって構成されています。 これまで、OpenFaaSで実行されるのは
VSCode for Web、WebAssembly版言語ランタイムやシェルを拡張機能として実験的に実装。Webブラウザローカルでコードやシェルを実行可能に
VSCode for Web、WebAssembly版言語ランタイムやシェルを拡張機能として実験的に実装。Webブラウザローカルでコードやシェルを実行可能に Visual Studio Code（VSCode）をWebブラウザで利用可能にしたVSCode for Webは、ローカルマシンにVSCodeをインストールすることなく、WebブラウザさえあればGitHub上のソースコードなどを編集可能にする便利なサービスです。 ただし、VSCode for WebはWebブラウザ上で実行されているため、コードを実行するにはサーバなど、言語のランタイムがインストールされている別のマシンが必要となります。 この点は、ローカルマシン上のランタイムを用いてコードを実行できる、デスクトップアプリケーションとしてのVSCodeと比べた場合の、VSCode for Webの欠点といえます。 そこでこの欠点を補う
なんかwasmを直読み出来るんだけど Webpackがwasmの読み込みをサポートしているので、Next.jsでもちょっと設定を追加するだけで動作が確認出来ました TypeScriptの定義まで自動で行われるので、連携する上で迷うところがありません 今回作成したコード https://github.com/SoraKumo001/next-wasm RustでWebAssemblyの生成 Rustのインストール https://www.rust-lang.org/tools/install これが無いと話にならないので、とりあえずインストールする必要があります wasm-packのインストール 以下を実行してwasm-pack入れるとRustでWebAssemblyが簡単に生成できるようになります cargo install wasm-pack 必要なコード
TechFeed Experts Night Pick up Rust使いは要注目! WebAssemblyのコンポーネントモデルを知る ～TechFeed Experts Night#9講演より 本記事は、2022年11月に開催された「TechFeed Experts Night#9 〜 Rust/WebAssemblyの「いま」を探る」のセッション書き起こし記事「Rust使いは要注目! WebAssemblyのコンポーネントモデルを知る by chikoski@」を転載したものです。オリジナルはTechFeedをご覧ください。 よろしくお願いします。今ご紹介いただきましたchikoski@です。 Rustにはコミュニティ的な関わり方が多くて、Rust.Tokyoというカンファレンスの運営をやっています。WebAssemblyは出たときからずっと仕様を追っていて、コロナの始まる前はWeb
次期「Dart 3」はNullセーフ、WebAssemblyとRISC-Vサポートなど、Googleが発表。Flutter Forward 2023
次期「Dart 3」はNullセーフ、WebAssemblyとRISC-Vサポートなど、Googleが発表。Flutter Forward 2023
世界中のFlashゲームを保存・公開する「Flashpoint」プロジェクトが注目を集める。オフラインでのプレイ環境を提供 - AUTOMATON
ウェブサイト上での、ゲームを含むインタラクティブコンテンツやアニメーションを実現する規格として長く親しまれてきた「Flash」。提供元のAdobeは、その再生に必要なプラグイン「Adobe Flash Player」の更新および提供を2020年末で終了する。ウェブブラウザの安定性やセキュリティへの懸念があることが主な理由だ。すでに主要ウェブブラウザでは、サポートやプリインストールを取りやめたり、インストールしてもデフォルトでは無効にする措置を取っており、代替技術であるHTML5などのサポートに移行している。 Flashはゲームプラットフォームでもあり、これまでに数多くの作品が制作されてきたが、Adobe Flash Playerのサポート終了は、そうしたゲームが事実上プレイできなくなることを意味する。そうしたなか、Flashを用いたウェブゲームの保存をおこなうプロジェクト「Flashpoi
Visualize your ideas. Infinite space to research, brainstorm, diagram, and lay out your ideas. Canvas is a core plugin included for free with Obsidian. A playground for thought Canvas allows you to organize notes visually — an infinite space to research, brainstorm, diagram and lay out your ideas. Embed your notes alongside images, PDFs, videos, audio, and even fully interactive web pages. A new w
A Tiny, Static, Full-Text Search Engine using Rust and WebAssembly | Matthias Endler
I wrote a basic search module that you can add to a static website. It's very lightweight (50kB-100kB gzipped) and works with Hugo, Zola, and Jekyll. Only searching for entire words is supported. Try the search box on the left for a demo. The code is on Github. Static site generators are magical. They combine the best of both worlds: dynamic content without sacrificing performance. Over the years,
こんにちは！エイチーム引越し侍でインハウスSEO担当をしています、@tatechiです。 突然ですが、最近グーグル検索をして、「検索結果がゴージャスになってる！」と思うことはありませんか？ たとえば、「トマトパスタ レシピ」で検索したとき。 検索結果にトマトパスタの写真が出ていて、サイト名にアクセスしなくてもどんなトマトパスタを作るためのレシピがわかるようになっています。 「少し前はタイトルとディスクリプションしか出ていなかったのに…」と思うと、めちゃくちゃ豪華な検索結果になりましたよね？！ このゴージャスな検索結果のことをその名の通りリッチリザルトといいます。 これは全部、構造化データマークアップのおかげです そして近年、SEO界隈ではこの構造化データマークアップが盛り上がっています…！ 今回はエンジニアが最低限知っておくべき構造化データマークアップの基礎を紹介します。 検索エンジンのト
モバイルアプリ上の WebAssembly 製ライブゲームで発生した例外を捕捉して計測する - Mirrativ Tech Blog
こんにちは、エンジニアのちぎら(@_naru_jpn)です。ミラティブでは、配信中のゲームに視聴者が介入できるゲームとライブ配信が融合した次世代のゲーム体験を提供しており、この体験を ライブゲーミング と呼んでいます。 ライブゲーミングは、Unity から WebGL 向けにビルドされた WebAssembly 製のゲームを、アプリに配置したウェブブラウザ上で動作させることによって実現しています。*1 今回は UnityでモバイルWebGLゲーム開発を頑張る話 の「メモリリークによって発生するクラッシュ」にも書かれているような、捕捉は難しいがユーザー影響があるような例外の発生を捕捉して、計測をするための仕組み作りについて解説をします。 ライブゲームが動作する仕組み 例外を捕捉することを考える前に、ライブゲームがどのように動作しているのかを知る必要があります。 Unity の WebGL 向
こんにちは、Slack の公式 SDK 開発と日本の Developer Relations を担当している瀬良 (@seratch) と申します 👋 この記事では、本日発表された files.upload API の deprecation (非推奨) と移行方法について日本語で解説します。アナウンスメント（英語）は、以下のページでご確認いただけます。 files.upload API 廃止までの流れ files.upload API は、2025 年春に廃止されます。それまでのスケジュールは以下の通りです。 2024 年 5 月 8 日以降、新しく作成された Slack アプリは files.upload API にアクセスできなくなります。すでに存在している既存のアプリは廃止日（3. 参照）までは API を使用することができます。 2024 年 6 月〜 2025 年 2 月の間
76. モダンウェブフロントエンド(2022)に至る歴史 - React Server Component、SSR Streaming w/ morishin127 | fukabori.fm
MP3ファイルをダウンロード 内容紹介 2022年のモダンウェブフロントエンドまでに至る歴史、SPA、CSR、SSR、SSR Streaming、React Server Component などについて語っていただいたエピソードです。 出演者 話したネタ モダンウェブフロントエンド勉強会を開催しました そもそもWebページのダウンロードって、どう始まった？ JavaScriptがマウスカーソルをキラキラさせていた時代 Ajaxの登場や、jQuery フロントエンドMVC、Backbone.js、Knockout.js Reactは何が革命的だったのか？ 手続き型の実装は何が辛かったのか？ SPA(Single Page Application) MPA(Multi Page Application) CSR(Client Side Rendering) サーバーサイドがJSONを返す時代
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PythonのコードをWebAssemblyにコンパイルする「py2wasm」、Wasmerが発表
スマホ向けHTML5ゲーム開発の最前線 主要デベロッパーから人気ゲームエンジンまで解説
2019年総まとめ: Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
Rust+WebAssemblyのオープンソースライブラリ「Photon」で高速な画像処理が可能になる - ITnews
これはすごい！形やカラーをアニメーションで変えられる、コードによって作成されたフリーフォント -Leon Sans
JavaScriptで始めるジェネラティブアート - 生物アルゴリズムの応用 - ICS MEDIA
Rustでわかる！ WebAssemblyのメリット～処理速度の違いを、サンプルを作りながら体験しよう
Flash作品を残すために取り組んだこと - プラグイン無しでFlashを再生できるJSライブラリを採用して - ICS MEDIA
`<meta charset="UTF-8">` を書く必要性があるケースとデメリット
ネイティブアプリ風Webアプリ「PWA」を実現する3つの技術 | さくらのナレッジ
Rust と WebAssembly で爆速な Markdown Editor を作ってみる
"HTML5ゲーム重い問題"をいかに解決するか？ CPU負荷を改善する方法
Rust・WebAssembly・WebGLで作る回路シミュレータ CADに書いたCPUの回路図がそのまま動く
WebAssembly版Rubyが正式に登場、YJITが実用段階に。「Ruby 3.2.0」正式リリース
WebAssemblyへのコンパイルだけに特化した新言語「Onyx」登場
[CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法
HTML5の10の新機能 あなたは知ってますか？ - Qiita
自作プログラミング言語と WebAssembly コンパイラ
Next.jsとRustのTypeScriptなWebAssembly生活 - Qiita
Rust使いは要注目! WebAssemblyのコンポーネントモデルを知る ～TechFeed Experts Night#9講演より | gihyo.jp
Obsidian Canvas - Visualize your ideas
【エンジニアも最低限知っておきたい！】構造化データマークアップ入門 - Qiita
2025 年 3 月での files.upload API 廃止と移行方法について