並び順

ブックマーク数

期間指定

  • から
  • まで

81 - 120 件 / 351件

新着順 人気順

HTML5の検索結果81 - 120 件 / 351件

  • PHPからJavaScriptにデータを受け渡すときに考えること - Qiita

    PHPのstringは任意のバイト列を扱えますが、JavaScript/JSONはUnicodeで扱える文字しか扱えません PHPのint / floatはプラットフォーム依存ですが、JavaScriptのnumberは整数と小数を型レベルで区別しません JSONのarrayに対応する型はPHPのarrayのうちリストであるものです PHPは配列(リスト)と連想配列を型レベルで区別せず、どちらもarrayです リストはキーが0からの抜けがない連番になっている要素が0個以上の配列です array_is_list()関数で連想配列とリストを判別できます array_values()で連想配列をリストに変換できます array_filter()の結果はフィルタされたキーがスキップされるのでリストではありませんが、結果をarray_values()に通すことでリストにできます JsonSerial

      PHPからJavaScriptにデータを受け渡すときに考えること - Qiita
    • マイクロソフトの「Blazor」が正式版に、まずサーバサイドで。C#と.NET Core 3.0に対応したWebアプリケーションフレームワーク

      マイクロソフトの「Blazor」が正式版に、まずサーバサイドで。C#と.NET Core 3.0に対応したWebアプリケーションフレームワーク マイクロソフトのWebアプリケーションフレームワーク「Blazor」が、.NET Core 3.0のリリースと同時に、本番環境に投入可能な品質に到達したことが明らかになりました。 Blazorは、JavaScriptとReactやAngularなどのフレームワークの代わりに、C#と.NET Coreフレームワークなどを用いてWebアプリケーションの開発を可能にするフレームワークです。 Blazorは、WebAssembly上に.NETフレームワークやランタイムを実装することで、Webブラウザで.NET対応のWebアプリケーションを実現するフレームワークとして登場しました。 この実装は「Blazor WebAssembly」あるいは「Client-s

        マイクロソフトの「Blazor」が正式版に、まずサーバサイドで。C#と.NET Core 3.0に対応したWebアプリケーションフレームワーク
      • WebAssemblyにガベージコレクション機能が登場、Chrome 111で試験的実装に。Dartなど高級言語のWebAssembly対応へ前進

        WebAssemblyにガベージコレクション機能が登場、Chrome 111で試験的実装に。Dartなど高級言語のWebAssembly対応へ前進 WebAssemblyのガベージコレクション機能が、Chrome 111 Devリリースにおいて試験的実装を示すOrigin trialとして実装されることが分かりました。 WebAssemblyのガベージコレクション機能はまだ仕様策定段階ですが、試験的機能として実装が登場することで仕様策定の作業などが進むと同時に、いわゆる高級言語でのWebAssembly対応が広がることも期待されます。 WASM GCはChromeのフィーチャーフラグで有効化 ChromeブラウザにはStable、Beta、Dev、Canaryなど、開発の段階に分かれた複数のリリースチャンネルがあります。 現在リリースされているChrome 111 Devリリースチャンネル

          WebAssemblyにガベージコレクション機能が登場、Chrome 111で試験的実装に。Dartなど高級言語のWebAssembly対応へ前進
        • 【HTML】知っておくと便利!短いHTMLコードで実装できる小技テク17選

          この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利!短いコードで実装できるCSS小技20選 たった1行のCSS!よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに? HTML(Hypertext Markup Language)は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS(Cascading Style Sheets)などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを

            【HTML】知っておくと便利!短いHTMLコードで実装できる小技テク17選
          • WebAssemblyをあらゆるプラットフォームでセキュアに実行できるようにする「Bytecode Alliance」発足。インテル、Mozilla、Red Hatなど

            WebAssemblyをあらゆるプラットフォームでセキュアに実行できるようにする「Bytecode Alliance」発足。インテル、Mozilla、Red Hatなど WebAssemblyは、Webブラウザ上でネイティブコードのように高速に実行できるバイナリフォーマットして策定された標準仕様で、すでにChromeやFirefox、Edge、Safariなどの主要ブラウザでサポートが実現されています。 このWebAssemblyをWebブラウザだけでなく、デスクトップPCやサーバ、IoTデバイスなどあらゆる環境で、セキュアに実行することを目指した団体「Bytecode Alliance」が発足しました。 Bytecode Allianceの創立メンバーは、インテル、Mozilla、Red Hat、Fastlyの4社。 前述したように、WebAssemblyはもともと、Webブラウザで実行

              WebAssemblyをあらゆるプラットフォームでセキュアに実行できるようにする「Bytecode Alliance」発足。インテル、Mozilla、Red Hatなど
            • 新しいHTMLタグportal、Portals機能で変わるWebの遷移体験! CDS2019で紹介されたヤフーの実装例 #UIUX

              新しいHTMLタグportal、Portals機能で変わるWebの遷移体験! CDS2019で紹介されたヤフーの実装例 #UIUX こんにちは。PayPayモールのエンジニア関と、Yahoo!ニュースのデザイナー萩野です。 皆様、突然ですがPortalsをご存じでしょうか。 Portalsとは、新しいHTML要素です。2019年11月11日〜12日にサンフランシスコで開催された「Chrome Dev Summit 2019」(以下CDS)でも紹介されました。 本記事では、Portalsが可能にする新しいWebでの体験をご紹介します。 Portalsとは? なにができるの? Webブラウザー上でユーザーにとって良い体験を提供するためには、表示速度の向上が欠かせません。 Portalsを利用すると、画面遷移の体感速度を向上させることが可能です。 まずはこちらの比較動画をご覧ください。遷移先のコ

                新しいHTMLタグportal、Portals機能で変わるWebの遷移体験! CDS2019で紹介されたヤフーの実装例 #UIUX
              • オープンソースのWebAssemblyサーバレス基盤「Wasm Workers Server 1.0」正式リリース。RubyとPythonのWASMランタイムに対応し、Ruby/Pythonでの記述が可能に

                オープンソースのWebAssemblyサーバレス基盤「Wasm Workers Server 1.0」正式リリース。RubyとPythonのWASMランタイムに対応し、Ruby/Pythonでの記述が可能に VMware Wasm Labsは、Node.jsやDenoのようにWebAssemblyやJavaScriptで記述したWorkerをサーバサイドでイベントドリブンに実行できる「Wasm Workers Server」のバージョン1.0をリリースしました。 Wasm Workers Server v1.0.0 is out. We are happy to announce the support for Python, Ruby and more languages in the future! From now on, you can create worker-based se

                  オープンソースのWebAssemblyサーバレス基盤「Wasm Workers Server 1.0」正式リリース。RubyとPythonのWASMランタイムに対応し、Ruby/Pythonでの記述が可能に
                • The Ultimate Guide to handling JWTs on frontend clients (GraphQL)

                  The Ultimate Guide to handling JWTs on frontend clients (GraphQL) The Ultimate Guide to handling JWTs on frontend clients (GraphQL) JWTs (JSON Web Token, pronounced 'jot') are becoming a popular way of handling auth. This post aims to demystify what a JWT is, discuss its pros/cons and cover best practices in implementing JWT on the client-side, keeping security in mind. Although, we’ve worked on t

                    The Ultimate Guide to handling JWTs on frontend clients (GraphQL)
                  • なんとなくで書かないで!HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita

                    はじめに この記事は クラウドワークスアドベントカレンダー2019 16日目の記事です。 こんにちは!本日25回目の誕生日を迎えたアクセシビリティ向上隊長 みーたです。 昨日は同じチームの@yamanokuさんによる「みんなに知ってもらいたいデザインシステムのこと」でした。 文中で紹介されていた「悲劇的なデザイン」は私もオススメします:) 私は今回、普段みなさんがHTMLを書く時に、よく使うタグごとでちょっと気をつけてみてもらいたい!と思う点をまとめてみました。 初学者ではありますが、正しくHTMLを理解してもらいたいって気持ちがあるので、マサカリは怖くない程度に投げていただいて、みんなで知識を共有していきたいです。 👻 真冬の怪談 突然ですがちょっと怖い話を... 先日、とある画面を改修しようと思って、今どんな感じにスタイル当たってるんだろうと本番環境を見てみたんですよ。 カードタイプ

                      なんとなくで書かないで!HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita
                    • WebAssemblyがW3Cの勧告に到達。「WebAssembly Core Specification 」「WebAssembly Web API」「WebAssembly JavaScript Interface 」の3つ

                      W3Cの WebAssembly Working Groupは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマット「WebAssembly」の仕様が勧告に到達したことを発表しました。 今回勧告になったのは、WebAssemblyに関連する3つの仕様です。 1つ目はWebAssemblyのバイナリファイルを実行する仮想マシンの仕様を定義した「WebAssembly Core Specification」。これは一般的なマイクロプロセッサの動作を模倣するような作りにすることで、WebAssemblyのバイナリファイルでプロセッサのネイティブコードに近い実行速度を実現するようになっています。 2つ目の「WebAssembly Web API」は、さまざまなプラットフォームでWebAssemblyを利用可能にするため、WebAssemblyバイナリファイルのシリ

                        WebAssemblyがW3Cの勧告に到達。「WebAssembly Core Specification 」「WebAssembly Web API」「WebAssembly JavaScript Interface 」の3つ
                      • ブラウザレンダリングの仕組み - Qiita

                        概要 webサービスを公開するにあたって必ず使われることになるのがブラウザです。ブラウザがユーザーにwebページを表示する仕組みを理解することで、フロントエンド開発に役立てたり、ページ表示までのレスポンスの改善などに役立てていきたいと思い、今回ブラウザのレンダリングの仕組みの基本事項についてまとめました。 レンダリングの流れ ユーザーがwebブラウザにURLを入力すると、ブラウザはURLを元に指定のサーバーにTCP/IPプロトコルに基づいてリクエストを送ります。その後サーバはクライアントに対してレスポンスします。以降のレスポンスとして受け取るHTML,CSS,Javascriptをどう処理して画面に表示するのかをレンダリングと定義して、その処理の流れについてみていきます。(この工程はcritical rendering pathと呼ばれています) ブラウザがWebページをレンダリングする仕

                          ブラウザレンダリングの仕組み - Qiita
                        • WebAssemblyでサーバレスアプリケーションを開発するフレームワーク「Spin」がバージョン1.0に到達

                          WebAssemblyに特化したスタートアップFermyonは、WebAssemblyでサーバレスアプリケーションを開発するためのフレームワーク「Spin」がバージョン1.0に到達したことを発表しました。 Introducing Spin 1.0 The open source developer tool supports programming languages such as #Rust #Go #JavaScript #TypeScript #Python C# along with features such as database connectivity, built-in key/value store and more. Learn about #Spin 1.0 https://t.co/vsb419mdHu — Fermyon (@fermyontech) Marc

                            WebAssemblyでサーバレスアプリケーションを開発するフレームワーク「Spin」がバージョン1.0に到達
                          • より高速なRubyのWebAssembly実装「Ruvy」、Shopifyがオープンソースで公開。Ruby仮想マシンとRubyアプリを組み合わせてビルド

                            より高速なRubyのWebAssembly実装「Ruvy」、Shopifyがオープンソースで公開。Ruby仮想マシンとRubyアプリを組み合わせてビルド 昨年(2023年)12月にリリースされた「Ruby 3.2」では、WebAssemblyによって実装されたRubyランタイム「Ruby.wasm」が正式版となりました。これによりWebブラウザや単体のWebAssemblyランタイムの上でRubyランタイムを実行し、Rubyプログラムを実行できるようになりました。 このRuby.wasmをベースに、さらに高速なRubyのWebAssembly実装となる「Ruvy」が、Shopifyからオープンソースとして公開されました。 Calling all #Ruby developers! Explore a new tool for leveraging Ruby to create #WebAs

                              より高速なRubyのWebAssembly実装「Ruvy」、Shopifyがオープンソースで公開。Ruby仮想マシンとRubyアプリを組み合わせてビルド
                            • WebAssemblyアプリ開発ではRustが一番人気、用途ではサーバレスが急上昇、ランタイムはWasmtime。The State of WebAssembly 2022

                              メールマガジン「WebAssembly Weekly」を発行しているScott Logicは、WebAssemblyの利用状況などに関する調査報告として「The State of WebAssembly 2022」を公開しました。 回答者はWebAssembly関連の技術者299人。 言語はRustがトップ、Blazorの利用が急上昇 WebAssemblyはソースコードをコンパイルしてバイナリに変換することで生成されますが、そのソースコードを記述するプログラミング言語としてもっとも利用されているのはRustで、昨年よりもさらに他のプログラミング言語と差を広げてトップを走っています。 2位がC++、マイクロソフトのBlazorが急上昇して3位になったのは注目ですね。 サーバレスとプラグインでの利用が上昇 WebAssemblyをどのようなアプリケーションで用いているか。トップはWebアプリ

                                WebAssemblyアプリ開発ではRustが一番人気、用途ではサーバレスが急上昇、ランタイムはWasmtime。The State of WebAssembly 2022
                              • ビューポート単位「vw, vh, vmin, vmax」を使ったCSSのテクニックのまとめ

                                CSSのビューポートを基準にした単位「vw, vh, vmin, vmax」は、ここ数年で多く使用されるようになりました。利点はJavaScriptなしで、レスポンシブ対応のレイアウトや要素のサイズを動的に実装できるからです。vw, vh, vmin, vmaxの知っておくと便利なCSSのテクニックを紹介します。 フォントのサイズ指定、高さいっぱいのコンテンツ、フッタを最下部に配置、デバイスに応じた画像配置、記事は固定幅だけど画像は幅いっぱいなど、実用的なテクニックが満載です。 CSS Viewport Units by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートを基準にした単位 vw: ビューポートの幅 vh: ビューポートの高さ vmin: ビューポートの幅または高さの最小値 v

                                  ビューポート単位「vw, vh, vmin, vmax」を使ったCSSのテクニックのまとめ
                                • サーバサイドWebAssemblyに、かつてのCGIの仕組みを取り込んだ「WCGI」をWasmerが発表。すぐ起動し安全に分離されるWebAssemblyの特長が活きる

                                  サーバサイドWebAssemblyに、かつてのCGIの仕組みを取り込んだ「WCGI」をWasmerが発表。すぐ起動し安全に分離されるWebAssemblyの特長が活きる スタンドアロンのWebAssemblyランタイム「Wasmer」の開発元であるWasmer.ioは、サーバサイドのWebAssemblyフレームワークとして、かつて動的なWebサイトを構築する技術として主流だったCGI(Common Gateway Interface」の仕組みを取り込んだ「WCGI」を発表しました。 Today we are incredibly excited to announce WCGI. WCGI allows running any CGI app with WebAssembly and Wasmer! (...we got Wordpress running! ) Check it out

                                    サーバサイドWebAssemblyに、かつてのCGIの仕組みを取り込んだ「WCGI」をWasmerが発表。すぐ起動し安全に分離されるWebAssemblyの特長が活きる
                                  • Web制作にすごい役立つ!無料で使える便利なオンラインツールのまとめ -Tiny Helpers

                                    CSSやHTMLやJavaScriptをはじめ、カラーやフォントやアクセシビリティなど、Web制作時に役立つオンラインツールをまとめたTiny Helpersを紹介します。 無料で利用できるツールがまとめてあるので、非常に便利です。

                                      Web制作にすごい役立つ!無料で使える便利なオンラインツールのまとめ -Tiny Helpers
                                    • The cost of JavaScript in 2019 · V8

                                      Show navigation Note: If you prefer watching a presentation over reading articles, then enjoy the video below! If not, skip the video and read on. “The cost of JavaScript” as presented by Addy Osmani at #PerfMatters Conference 2019.One large change to the cost of JavaScript over the last few years has been an improvement in how fast browsers can parse and compile script. In 2019, the dominant cost

                                      • メルカリエンジニアリング

                                        「Mercari Engineering」は メルカリのエンジニアに関する情報を、 オープンに公開・共有していくためのサイトです。

                                          メルカリエンジニアリング
                                        • お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita

                                          1行で alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。 (HTMLの標準規格書より) マジでこれに尽きる。 具体例 例1:ロゴ ❌ 間違ったマークアップ

                                            お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita
                                          • クラウドネイティブなデータ可視化ツール「Grafana」で、なぜかWebAssembly化したDoomがプレイ可能に。開発元が社内ハッカソンで実現

                                            クラウドネイティブなデータ可視化ツール「Grafana」で、なぜかWebAssembly化したDoomがプレイ可能に。開発元が社内ハッカソンで実現 クラウド上で実行される多様なソフトウェアのログやメトリクスを受け取り、運用管理のためのダッシュボード上で可視化するツールとして定番のソフトウェアが「Grafana」です。 このGrafanaの開発元であるGrafana Labsは、Grafanaのダッシュボード画面上で一人称ゲームの古典とも言えるDoomをプレイ可能にするソフトウェア「Grafana Doom」をオープンソースで公開しました。 Can it run Doom? To mark the 25th DOOMiversary of #Doom64, you can now play Doom on Grafana thanks to time series panels and th

                                              クラウドネイティブなデータ可視化ツール「Grafana」で、なぜかWebAssembly化したDoomがプレイ可能に。開発元が社内ハッカソンで実現
                                            • TypeScriptをコンパイルしてWebAssemblyバイナリに、実現を目指す「TypeScript Compilation SIG」をByteCode Allianceが発表

                                              TypeScriptをコンパイルしてWebAssemblyバイナリに、実現を目指す「TypeScript Compilation SIG」をByteCode Allianceが発表 WebAssemblyの普及と発展を目的とするByteCode Allianceは、TypeScriptのコードをコンパイルしてWebAssemblyバイナリを生成できるようにすることを目指すスペシャルインタレストグループ「TypeScript Compilation SIG」を発表しました。 WebAssemblyの仕様策定はW3Cが行っており、ByteCode AllianceはそのWebAssemblyを基盤として、クロスプラットフォーム対応を実現するAPI群のWASI(WebAssembly System Interface)やコンポーネントモデル、ガベージコレクション対応などの拡張、およびそれらの事実

                                                TypeScriptをコンパイルしてWebAssemblyバイナリに、実現を目指す「TypeScript Compilation SIG」をByteCode Allianceが発表
                                              • Wasm Labsが「Wasm Worker Server」をオープンソースで公開。Node.jsやDenoのようにWebAssemblyのWorkerをイベントドリブンに実行

                                                Wasm Labsが「Wasm Workers Server」をオープンソースで公開。Node.jsやDenoのようにWebAssemblyのWorkerをイベントドリブンに実行 VMware Wasm Labsは、WebAssemblyのWorkerをNode.jsやDenoのようにサーバサイドでイベントドリブンに実行できる「Wasm Workers Server」をオープンソースで公開しました。 インストールも簡単で、わずか5分で使い始められると説明しています。 Today, we are excited to announce Wasm Workers Server, a self-contained server to run your workers in #WebAssembly. It assigns an HTTP endpoint to wasm modules base

                                                  Wasm Labsが「Wasm Worker Server」をオープンソースで公開。Node.jsやDenoのようにWebAssemblyのWorkerをイベントドリブンに実行
                                                • WebAssemblyをPOSIX対応に拡張した「WASIX」登場、bashやcurl、WebサーバなどLinuxアプリが実装可能に。Wasmerが発表

                                                  WebAssemblyをPOSIX対応に拡張した「WASIX」登場、bashやcurl、WebサーバなどLinuxアプリが実装可能に。Wasmerが発表 WebAssemblyランタイム「Wamer」の開発元であるWasmer社は、WebAssemblyでファイルやネットワーク、メモリなどのシステムリソースを抽象化する業界標準のAPI仕様である「WASI」(WebAssembly System Interface)を拡張してPOSIX対応にする新技術「WASIX」を発表しました。 WASIとPOSIX WebAssemblyはもともと、Webブラウザ上でネイティブコード並の実行速度でアプリケーションを実行することを目的に策定されたバイナリフォーマットです。 そのWebAssemblyを、LinuxやWindows、macOSなどのOS上でWebAssemblyランタイムを用いて直接実行する

                                                    WebAssemblyをPOSIX対応に拡張した「WASIX」登場、bashやcurl、WebサーバなどLinuxアプリが実装可能に。Wasmerが発表
                                                  • SPA + SSR + PWA の作り方とセキュリティについて - hiroppy's site

                                                    <script nonce="xxxxx" id="initial-data" type="text/plain" data-json="${preloadedState}" ></script> このpreloadedStateはエスケープ処理が必要なので注意してください。 クライアント側の読み込み方 const initialData = JSON.parse( document.getElementById("initial-data")!.getAttribute("data-json")!, ); const { store } = configureStore(initialData); https://github.com/hiroppy/ssr-sample/blob/master/src/client/index.tsx#L21-L22 useEffect SSR では、

                                                      SPA + SSR + PWA の作り方とセキュリティについて - hiroppy's site
                                                    • HTML5 Worker Test

                                                      Which APIs are supported in Web Workers and Service Workers? This chart shows the breakdown for each browser, based on automated testing. Note that the goal is not for browsers to reach 100% on all tests. Some APIs are intentionally not exposed to workers. This site is for informational purposes only.

                                                      • WebAssemblyアプリ開発で最も使われている言語は3年連続で「Rust」、Webアプリ開発が最多、欲しい機能はスレッド。The State of WebAssembly 2023

                                                        回答者はWebAssembly関連の技術者303人。 最も使われているのはRust、2位のJavaScriptの使われ方とは? WebAssemblyのアプリケーションのコードを記述するプログラミング言語として何を使っているかを尋ねた質問への回答では、3年連続でRustがトップ。しかも利用率は上昇中です。 2位に入ったのがJavaScriptです。WebAssemblyバイナリはソースコードをコンパイルしてバイナリに変換することで生成されますが、JavaScriptはWebAssemblyへのコンパイルに対応していません。 WebAssemblyアプリケーションのコードとしてJavaScriptを使う方法は、WebAssemblyで構築されたJavaScriptエンジンをWebAssemblyランタイム上で実行し、そこでJavaScriptコードを走らせることです。 この方法ではWebAs

                                                          WebAssemblyアプリ開発で最も使われている言語は3年連続で「Rust」、Webアプリ開発が最多、欲しい機能はスレッド。The State of WebAssembly 2023
                                                        • Webはここまで進化中!コピペもできるHTML/CSS参考スニペット84個まとめ

                                                          この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。 スニペット(英: Snippet)とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ローディングアニメーション系 7. SVGアニメーション系 8. 便利、面白系スニペ

                                                            Webはここまで進化中!コピペもできるHTML/CSS参考スニペット84個まとめ
                                                          • TypeScriptやGoやRustでWebAssemblyウォークスルー - SMARTCAMP Engineer Blog

                                                            みなさん、WebAssembly聞いたことありますよね? スマートキャンプでエンジニアをしている瀧川です。 私が初めてWebAssemblyを目にしたのは確か2018年、VimをWebAssemblyに移植してブラウザで動くようにしたという記事だったかなと思います。 https://github.com/rhysd/vim.wasm 当時は「はー、なんだか未来を感じるけど、どう使われてくんだろう」くらいな認識で、最近までほとんど注目していませんでした。 しかし、少し前にffmpeg.wasmについての記事がバズっているのを見かけたときビビっときましたね。 ブラウザ上でffmpegが動かせるのはWebアプリケーションを作る上で可能性が広がりますし、何よりWebAssemblyのポテンシャルが活かされていると感じました。 そこで今回、WebAssemblyの世界観を味わうために、代表的なWeb

                                                              TypeScriptやGoやRustでWebAssemblyウォークスルー - SMARTCAMP Engineer Blog
                                                            • 無料のおすすめ最新HTML5テンプレート厳選45個まとめ【2020年版】

                                                              スマートフォンからウェブサイトを閲覧するひとが増えたことで、あらゆる端末に対応するレスポンシブなWebサイトが主流となっています。 しかし、「HTML5でWebサイトをゼロから作成するのはちょっと、。」というときは、HTML5でできたテンプレートを活用してみましょう。 この記事では、無料ダウンロードできるオススメのHTML5テンプレートをまとめてご紹介します。 2020年に公開されたものを中心に最新テンプレートを揃えています。Bootstrapフレームワークを利用しているものも多く、手軽にカスタマイズできる点もポイント。あらゆる業種にマッチする、お好みの無料HTMLテンプレートを探してみましょう。 商用利用もできる無料HTMLテンプレートまとめ Switch あらゆるデバイスでの表示に対応するランディングページ向けテンプレート。ダークモード切り替えも可能で、イラストを背景として効果的に活用

                                                                無料のおすすめ最新HTML5テンプレート厳選45個まとめ【2020年版】
                                                              • Webブラウザーで動く第4の言語“WebAssembly”はどう凄い? C++もコンパイル……~IIJがアプリケーション分野の革新を振り返る~【IIJ Technical WEEK 2020】

                                                                  Webブラウザーで動く第4の言語“WebAssembly”はどう凄い? C++もコンパイル……~IIJがアプリケーション分野の革新を振り返る~【IIJ Technical WEEK 2020】
                                                                • img の srcset 指定時に選択される画像 | blog.jxck.io

                                                                  Intro <img> や <picture> で srcset に複数の画像を指定することで、デバイスに応じて適切な解像度の画像を提供することができる。 この画像が、どういった条件で選択されるのかを頭では勝手に理解していたつもりだが、理解とは違う挙動があったため、仕様と実装を確認した。 その記録を記す。なお、先に言うがどのブラウザも 仕様に準拠して 実装されている。 srcset attribute まず以下のようなコードを考える。 <style> body { margin: 0; } </style> <body> <img id=hero_image src=320x240.png srcset=" 320x240.png 320w, 640x480.png 640w, 800x600.png 800w, 1024x768.png 1024w, 1280x960.png 1280w

                                                                    img の srcset 指定時に選択される画像 | blog.jxck.io
                                                                  • WebAssemblyを進化させる「WASI Preview 2」が安定版に到達。OSや言語に依存しないコンポーネントモデルを実現

                                                                    WebAssemblyを進化させる「WASI Preview 2」が安定版に到達。OSや言語に依存しないコンポーネントモデルを実現 WebAssembly関連仕様の標準化を行っているW3C WebAssembly Community GroupのWASI Subgroupミーティングにおいて、2024年1月25日に行われた投票で「WASI Preview 2」(もしくはWASI 0.2.0)仕様が承認され、安定版に到達したことが明らかになりました。 WASI Preview 2では、WebAssemblyアプリケーションがOSなどのプラットフォームに依存せず、さまざまなプログラミング言語で開発したWebAssemblyコンポーネントを組み合わせて開発できるように、「コンポーネントモデル」とそのインターフェイスを記述するIDL(Interface Definition Language)であ

                                                                      WebAssemblyを進化させる「WASI Preview 2」が安定版に到達。OSや言語に依存しないコンポーネントモデルを実現
                                                                    • VSCodeがWebAssemblyの実行時デバッグに対応。C/C++やRust、Zigなどのソースコードと関連付け、変数参照、ブレークポイントなど可能に

                                                                      VSCodeがWebAssemblyの実行時デバッグに対応。C/C++やRust、Zigなどのソースコードと関連付け、変数参照、ブレークポイントなど可能に マイクロソフトは、オープンソースで開発しているコードエディタ「Visual Studio Code」(以下、VSCode)の最新版となる2023年9月版(バージョン1.83)で、JavaScriptデバッガがWebAssemblyのデバッグにも対応したことを明らかにしました。 The JavaScript debugger can now debug code compiled into WebAssembly if it includes DWARF debug information. For example, C++ code compiled using Emscripten can be debugged: pic.twitt

                                                                        VSCodeがWebAssemblyの実行時デバッグに対応。C/C++やRust、Zigなどのソースコードと関連付け、変数参照、ブレークポイントなど可能に
                                                                      • なぜ WebAssembly 生成を Go にしたのか

                                                                        オンラインイベントで聞かれて、ツイッターにつぶやいたら思った以上に反響があったので、もう少し詳細に書いてみます。 思ったより反響があったまとめ信頼できる暗号ライブラリがある自分が TypeScript より Go のほうが書けるGo の Wasm バイナリサイズを気にする必要がないWebCrypto にない暗号が必要自社の WebRTC SFU において End to End Encryption (E2EE) をブラウザ上で実現するためにはいくつかの壁がありました。 一つは WebCrypto が提供していない暗号を利用したいというものです。 今回 E2EE を実装するにあたり採用した Signal プロトコルでは公開鍵暗号に Curve25519 を採用しています。残念ながら WebCrypto では Curve25519 に対応していません。この時点で「暗号ライブラリをどこからもって

                                                                        • 面倒くさがり屋な私でもできた、楽ちんなWebサービスの作り方。 - Qiita

                                                                          1. はじめに 生まれつき面倒くさがり屋の私は、今まで個人でWebサービスをリリースできたことがありませんでした。 着想した段階で「すごいアイディアが思いついた!」と満足して放置を決め込んだり、少し手を付けただけで作りかけの状態になってしまうといった状態です。 そんな面倒くさがり屋の私が、一週間たらずで個人開発のWebサービスをリリースできたので、そのやり方を共有します。 2. 作ったもの 大人のADHDの診断ができる病院を、地図上から簡単に探すことのできるサービスを個人で作りました。「自分はADHDかもしれない」と感じながらも、診断まで行き着けていない人は是非使ってみてください。https://t.co/ERRCrbOCsQ — igz0 (@igz0) 2019年8月10日 サービスの内容はいたってシンプルです。 大人のADHDを診断できる病院が、日本の地図にマッピングされていて、 マ

                                                                            面倒くさがり屋な私でもできた、楽ちんなWebサービスの作り方。 - Qiita
                                                                          • SwiftのWebAssembly対応の進捗 | メルカリエンジニアリング

                                                                            こんにちは、メルペイエキスパートチームインターンの@kateinoigakukunです。 本記事では私がインターンの中で開発しているSwift言語のWebAssembly対応について紹介します。 背景 メルペイでは「技術をアウトプットするところに技術は集まる」という思いから、 稼働の50%以上を技術コミュニティへの貢献や技術の普及に取り組むエキスパートチームが存在します。 私は主にSwiftコミュニティへの技術的な貢献に注力しています。特に去年の10月頃からSwiftのWebAssemblyサポートを進めています。 WebAssemblyはブラウザで実行可能なバイナリ形式として開発されている低級言語です。またブラウザ以外の環境でも実行できるポータブルな形式としても設計されており、活用できる用途は多岐にわたります。 Swiftは教育の現場でも取り扱われるケースが増えてきており、注目されている

                                                                              SwiftのWebAssembly対応の進捗 | メルカリエンジニアリング
                                                                            • WebAssemblyの「WASI Preview 2」で、WebAssemblyコンポーネントの組み合わせによるアプリケーション開発を実現へ

                                                                              WebAssemblyの「WASI Preview 2」で、WebAssemblyコンポーネントの組み合わせによるアプリケーション開発を実現へ Webブラウザ上で高速に実行可能なバイナリフォーマットとして開発されたWebAssemblyは、その後Webブラウザ以外の環境でも実行可能にするため、ファイルシステムなどOSごとに異なるAPIを抽象化するための業界標準仕様「WebAssembly System Interface」(WASI)が策定されました。 WASIの登場により、WebAssemblyはWebブラウザでもWindowsやMacでも、Dockerコンテナでも共通のバイナリで実行可能なバイナリフォーマットへと進化したのです。 参考:WebAssemblyをWebブラウザ以外の実行環境へ。システムインターフェイスへのアクセスを可能にする「WASI」の策定開始。Mozillaが呼びかけ

                                                                                WebAssemblyの「WASI Preview 2」で、WebAssemblyコンポーネントの組み合わせによるアプリケーション開発を実現へ
                                                                              • WebAssemblyでBashのコマンドプロンプトを実装、Wasmer 4.0が正式リリース、POSIX対応の「WASIX」など安定版に

                                                                                WebAssemblyでBashのコマンドプロンプトを実装、Wasmer 4.0が正式リリース、POSIX対応の「WASIX」など安定版に Wasmer 4.0ではWasmerが独自仕様として提唱する、WebAssemblyからOSなどのシステムにアクセスするAPIを抽象化するWASI(WebAssembly System Interface)仕様をPOSIX対応に拡張した「WASIX」が安定版となり、これを利用してWebAssemblyで実装したBashのコマンドプロンプトなどが実現しています。 参考:WebAssemblyをPOSIX対応に拡張した「WASIX」登場、bashやcurl、WebサーバなどLinuxアプリが実装可能に。Wasmerが発表 下記はWasmerによりBashのコマンドラインをWebAssemblyで実装し、それを実行したBash環境上でPythonのWasme

                                                                                  WebAssemblyでBashのコマンドプロンプトを実装、Wasmer 4.0が正式リリース、POSIX対応の「WASIX」など安定版に
                                                                                • [速報」Blazor WebAssemblyが正式リリース。C#/.NETでWebアプリケーションを開発可能に。Microsoft Build 2020

                                                                                  [速報」Blazor WebAssemblyが正式リリース。C#/.NETでWebアプリケーションを開発可能に。Microsoft Build 2020 オンラインイベント「Microsoft Build 2020」を開催中のマイクロソフトは、「Blazor WebAssembly 3.2.0」のリリースを発表しました。 Blazor WebAssemblyは、.NETとC#などを用いてWebブラウザ上で実行可能なWebアプリケーションを開発できるフレームワークおよび実行系です。 Blazor WebAssembly 3.2.0はBlazor WebAssemblyとしてフル機能が実装され、本番運用に対応したバージョンです。これによりBlazor WebAssemblyは正式版としてリリースされたことになります。 It's here!!! Blazor WebAssembly 3.2.0

                                                                                    [速報」Blazor WebAssemblyが正式リリース。C#/.NETでWebアプリケーションを開発可能に。Microsoft Build 2020