Isolates, microVMs, and WebAssembly
I’m mostly focused on two lines of inquiry. First: What’s the promise of WebAssembly? Why is it exciting? What makes it different? (I get into some of this in What’s WebAssembly?) And second: What’s the state of WebAssembly today? For me, answering both of those questions required an exploration of Serverless more broadly, as WebAssembly could both compete with and complement emergent technologies
WebAssembly上で動くLunaticランタイムを使ったHTTPサーバーを実装する
「Lunatic」という少し前から注目している技術があります。これは WebAssembly 上で動く Erlang にインスパイアされたランタイムで、Rust で実装されています。WebAssembly 形式でのバイナリを実行できる言語なら、どんな言語でもこのランタイムの上であれば理論的には動かすことができるようです。さまざまな言語のプラットフォームとして動く、セキュリティ面などの基本的な WebAssembly のメリットを享受することができます。 さて、Rust のエコシステムの一部として Lunatic を見てみると、Lunatic は tokio などと同様「非同期ランタイム」に位置付けられるものではないかと思います。下記の特徴をもつランタイムといえるでしょう。 Lunatic は WebAssembly を利用していることから、たとえば C とのバインディング時にもより安全に利
ハンズオンWebAssembly
WebAssemblyはWebブラウザ上で効率的かつ安全にコードを実行するために開発された技術です。様々なプラットフォームでの実行や、C++やRustなどのプログラミング言語で開発が可能です。本書はWebAssemblyの技術的な原理、動作、どのようなことが可能なのかを基礎からしっかり学ぶことができ、かつ実践的な開発テクニックにまで踏み込んだ開発者向けの解説書です。プログラミング言語は主にC++を取り扱います。簡単な例から解説をはじめ、動的リンクや並列処理、デバッグといった複雑な話題を解説する構成になっており、WebAssemblyモジュールの開発を助ける1冊です。 訳者まえがき はじめに 第I部 WebAssemblyの初歩 1章 WebAssemblyとの邂逅 1.1 WebAssemblyの概要 1.1.1 WebAssemblyの前身asm.js 1.1.2 asm.jsからWeb
Next.jsの開発元Vercel、Edge FunctionsでWebAssemblyのサポートを発表
Next.jsの開発元Vercel、Edge FunctionsでWebAssemblyのサポートを発表 Next.jsの開発元であり、Webアプリケーションのホスティングサービスなどを提供するVercelは、CDNエッジでJavaScriptを実行できる「Vercel Edge Functions」でWebAssemblyのサポートを発表しました。 WebAssembly is now supported in Vercel Edge Functions. Code in C, Go, Rust, and more – and run it at the Edge.https://t.co/N5NKwmJ3mn — Vercel (@vercel) August 26, 2022 Vercel Edge FunctionsはCDNエッジでJavaScriptを実行し、認証用プロキシやキャ
WebAssembly化したPostgreSQLをWebブラウザ上で実際に動かして学ぶ「Postgres playground」をCrunchy Dataが公開
WebAssembly化したPostgreSQLをWebブラウザ上で実際に動かして学ぶ「Postgres playground」をCrunchy Dataが公開 オープンソースのデータベースPostgreSQLの商用サービスを提供しているCrunchy Dataは、WebAssembly化したPostgreSQLをWebブラウザ上で実際に動かしながらPostgreSQLの基本から性能分析などさまざまな機能を学べる「Postgres playground」を公開しました。 Webブラウザ上でPostgreSQLを動かすため、サーバを用意する必要もなく、万が一間違った操作でデータベースを壊したとしてもすぐにインストール直後の初期状態に戻せるため、気軽にPostgreSQLを使って動作を学ぶことができます。 WebAssembly化されたPostgreSQLにはあらかじめチュートリアル用のデータ
WebAssembly導入の効果をプラットフォーム別に比較してみた - anti scroll
先日、縦書き文庫の組版エンジン（nehan）をRustで書き直し、WebAssembly化したと報告しました。 tategakibunko.hatenablog.com その際に「約3倍の速度向上があった」と書いたのですが、あれから約２週間分の利用者のログをもとに、プラットフォーム別に速度を比較したところ、ちょっと違う結果が出ました。 比較したプラットフォーム とても大雑把ですが、PC（Windows）とPC（Mac）とiPhone、Androidに分けて計測しました。 プラットフォーム別の速度 以下は速度比較のグラフです。縦軸は秒速の組版字数で、大きいほど速いことになります。 赤がnehan7(js)の速度で、青がnehan8(wasm)の速度です。 nehan7(js) vs nehan8(wasm) プラットフォーム別の速度向上率は、こんな感じでした。 PC（Windows）：約7倍
Rust and WebAssembly without a Bundler | Tung's Word Box
If you're just getting into compiling your Rust code into WebAssembly and want to load it in a web browser, you might be taken aback by the multitude of ways of doing so. This seems to be due to the differing pace of web browsers implementing web platform features over the years. A lot of entry-level guides to using Rust and WebAssembly make use of a JavaScript bundler for convenience, but this ob
【ちゃんと理解して使えてる？】 Webデザイナー必見！CSSグラデーションの仕組み解説 | 【運用・改善が得意な仙台のホームページ制作会社】AndHA（アンドエイチエー）
【ちゃんと理解して使えてる？】 Webデザイナー必見！CSSグラデーションの仕組み解説 公開日 : 2022.07.27 コーディング はじめに cssグラデーションについて記事を書いていきます。現在はジェネレータ等でさくっと作成できますが、グラデーションの指定方法を理解して使用するとより一層表現の幅が広がると思います！ 一緒に勉強していきましょう！！！ グラデーションとは CSS グラデーションは データ型で表現され、2つ以上の色の間の連続的な変化から成る の特殊型です。グラデーションは3種類から選択することができます。線形 (linear) (linear-gradient() 関数によって生成)、放射 (radial) (radial-gradient() 関数によって生成)、扇形 (conic) (conic-gradient() 関数によって生成) の3種類です。 repeati
Rust でモザイク加工を実装し、それを WebAssembly として Web アプリから利用する
Twitter のアイコンが本人とかなり乖離してきたため、職場の人に「え、誰ですか？」と言われることが多々あり、そろそろアイコンを変えようかなと思っていました。でもアイコンを変えると認識できなくなると思ったので、少しずつアイコンにモザイクをかけていこうと思い、モザイクツールを自作していました。自作しなくても既存のツールがあるのではと思うかもしれませんが、車輪は再発明するものなので再発明しました。ただ車輪の再発明とは言っても、Wasm で動作（=クライアントで加工してくれるからサーバーに送らなくていいし Web で使える）という点では比較的新しい車輪の再発明な気がしています。 それがこの umie です。ファイル選択して送信するとこのようにモザイクをかけられます。 ちなみに umie というのは神戸に umie mosaic という商用施設があって、そこから名前をとっています。 https:
【2022年】Web制作で使えるVSCodeオススメ拡張機能17選！ - PENGIN BLOG
今回はVSCodeで使っている拡張機能を紹介します。 他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。 基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください！ 環境構築のための拡張機能VSCodeの利用環境全体に影響する拡張機能です。拡張機能デビューする人もとりあえずインストールしておいていいと思います。 Japanese Language Pack for Visual Studio Code
利用者が増え続ける「WebAssembly」、ブラウザ実行できる4つ目の言語の魅力とは
利用者が増え続ける「WebAssembly」、ブラウザ実行できる4つ目の言語の魅力とは：サーバレスやコンテナ化で使われている ソフトウェアコンサルティング会社のScott Logicは、「WebAssembly」の使用状況に関する2回目の年次調査を実施、結果を発表した。WebAssemblyは「HTML」「CSS」「JavaScript」に続き、Webブラウザで実行可能なコードを作成できる4つ目の言語と位置付けられている。 ソフトウェアコンサルティング会社のScott Logicは2022年6月20日（英国時間）、「WebAssembly」の使用状況に関する2回目の年次調査を実施、結果をまとめたレポート「The State of WebAssembly 2022」を発表した。 WebAssemblyとは何か？ WebAssemblyはWebブラウザを含むモダンな実行環境での効率的なコード実
縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。 はじめに この記事では、日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。 最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。 はじめに N予備校における日本語縦書きHTML CSS の関連仕様 日本語の一般的な縦書きに設定する うまくいかないことが起こりやすい文字たち うまくいかない文字がうまくいかない理由を理解する 縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type
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アプリ
Rustでわかる！ WebAssemblyのメリット～処理速度の違いを、サンプルを作りながら体験しよう
本連載では、Webブラウザー上でJavaScriptとともに動作できるバイナリ形式のプログラムファイル「WebAssembly」を、Rustプログラミング言語で実装する方法を説明していきます。前回はRust言語の基礎を説明しました。今回はいよいよ、Rust言語でWebAssemblyを実装していきます。また実装したサンプルを利用して、WebAssemblyのメリットなどを説明します。 はじめに 本連載では、Webフロントエンド開発において注目されているバイナリ形式のプログラムファイルWebAssemblyを、Rustで実装して活用する方法を説明しています。初回記事ではWebAssemblyの背景およびRust開発環境の作成について、前回記事ではRust言語の基本的な言語仕様について説明しました。 今回はこれまで説明した内容を利用して、実際にRust言語でWebAssemblyを実装していき
お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita
Help us understand the problem. What are the problem?
少しのコードで実装可能なHTML小技集
2022年4月8日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↓私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
クラウドネイティブなデータ可視化ツール「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
書籍「HTML解体新書」、満を持してついに登場 - 弁護士ドットコム株式会社 Creators’ blog
5年——。 編集チーム連絡用のSlackに初の投稿があったのが2016年12月29日ですから、正確には5年と3ヶ月。そんな長い執筆期間を経て、ようやくみなさまにお届けできることになりました。それがこの書籍、「HTML解体新書 - 仕様から紐解く本格入門」です。 「HTML解体新書」カバー画像 ご購入、ご予約は以下からどうぞ! Amazon ボーンデジタル(紙版) ボーンデジタル(PDF版) ということで、こんにちは、弁護士ドットコム技術戦略室セキュリティチームの太田と申します。普段はWebのアクセシビリティ関連やセキュリティ関連の仕事をしているのですが、このたびHTMLの本を出版することになりました (もっとも、この本は入社前から書いていたもので、普段の業務と直接の関係はありません)。 この記事では、本の内容や執筆の経緯についてご紹介します。最後まで読むと、少しお得な情報があるかも……?
【HTML5】マリオのコインの音をブラウザで出そう【ファミコン】 - Qiita
const AudioContext = window.AudioContext || window.webkitAudioContext const audioContext = new AudioContext() const gainNode = audioContext.createGain() gainNode.connect(audioContext.destination) gainNode.gain.value = 0.1 const oscillator = audioContext.createOscillator() oscillator.connect(gainNode) oscillator.type = "square" oscillator.frequency.setValueAtTime(987.766, audioContext.currentTime)/
An Update on WebAssembly/WASI Support in Ruby
OverviewCRuby is a highly portable C application, and it runs on many platforms (You can see which platforms are tested on CI here). However the “portability” is only at source level, and the built executable is not portable across architectures and system call interfaces. This project made CRuby portable at executable file level by porting it to a standalone WebAssembly with WASI ABI. Furthermore
WebAssemblyのgotoを妥協する
WebAssemblyのgotoを妥協する 前回のあらすじ: WebAssemblyでgotoを作ろうとしたらめっちゃ大変。 (loop $loop (if (i32.gt_u (local.get $next) (i32.const 0)) (then (local.set $jump (local.get $next)) (local.set $next (i32.const 0)))) (block $block2 (block $block1 (br_if $block1 (i32.eq (local.get $jump) (i32.const 1))) (br_if $block2 (i32.eq (local.get $jump) (i32.const 2))) (call $code1) (if (call $test1) (then ;; Forward super jum
WebAssembly の GC Proposal とは何か / どこに向かおうとしてるのか
最初に これは WebAssembly に GC が導入されるから紹介、という記事ではない。どちらかというと、WebAssembly GC の採用がどれだけ遠く、また GC がのればどんな言語でも wasm のコンパイルサイズが減って軽量になる、という夢を見ている人に、現実を見てもらうための記事になる。 WebAssembly GC Proposal (Team)は、それを実現するパーツを分割して仕様策定を進めていて、実際に GC が動き出すまでには数年かかるだろうし、自分の感覚的に、将来的に GC が採用されるかは五分五分といったところ。 ただ、 GC Proposal から派生した仕様郡は GC が採用されなかったとしても有意義なものばかりなので、本記事ではそれを紹介したい。 基本的にここを参照 Excuse 自分は低レベルプログラミングの経験が浅く、WebAssembly のために関
WebAssemblyのパッケージマネジメントとレジストリ「WAPM」がリニューアルして登場
オープンソースのWebAssemblyランタイム「Wasmer」などを開発する米Wasmer社は、WebAssemblyのパッケージマネージメントとレジストリの機能を備えたWebサイト「WAPM」（YouTubeの説明では「ワプム」と発音しているように聞こえます）の機能を刷新したことを発表しました。 WAPMの基本的な機能は、WebAssemblyのランタイム上で利用可能なさまざまなソフトウェアをユーザーが登録し、他のユーザーが登録済みのソフトウェアを一覧表示や検索などにより発見することが可能なレジストリの機能と、それをランタイム上にダウンロードしてソフトウェアへの組み込みやインストールなどを行うパッケージマネジメントの機能などです。 WAPMは2019年にオープンソースとして公開され、今回新たな機能追加やUI改善などによりWebサイトが刷新されました。 新機能として、WAPMを参照してい
Unreal Engine を用いたウェブコンテンツ制作 - Qiita
最近は、メタバースのブームもあり、Unreal Engineを使ったメタバース関連のコンテンツや、ウェブコンフィギュレーターなどのウェブコンテンツの相談が増えています。 ※ここでいう「ウェブコンテンツ」は、専用のアプリのインストールなしに、ウェブブラウザで体験できるコンテンツを指します。 以前は、Unreal EngineからのHTML出力を実験的な機能としてサポートしていたのですが、現在は公式にはサポートしていません(サードパーティーのプラグインなどがある場合はあります)。 しかし、ウェブコンテンツを制作する方法は、大きく分けて3つの方法が考えられます。 Pixel Streaming WebGL Render on Demand この記事では、それぞれの概要やメリット、デメリットを紹介します。 ウェブコンテンツを作る際のヒントになれば幸いです。 ● Pixel Streaming Pi
Tailwind CSS 社内勉強会【まとめ】 - RAKUS Developers Blog | ラクス エンジニアブログ
背景 スコープ Tailwind CSSとは？ コンポーネント指向とは？ Tailwind CSSのメリット class名を考える必要がない デザインシステムの最低保証 ドキュメント、チートシートの豊富さ Tailwind CSSのデメリット classに多くのコードを書く必要があり、可読性が落ちやすい CSSの理解度がある程度必要 デザインを100%再現したい場合に強味を生かしづらい 他ライブラリやフレームワークとの比較 Bootstrapとの比較 Material UI/Vuetify等のUIライブラリとの比較 インライン記述との比較 まとめ 所感 参考 背景 こんにちは。mtaaaです。 社内のフロントエンド勉強会でTailwind CSSについて発表を行ったまとめとして、ブログに残したいと思います。 スコープ Tailwind CSSとは？ なぜTailwind CSSに注目が集ま
Webページやアプリの実装に、知っておくと便利なHTMLの属性のまとめ
Webページやアプリの実装に役立つ、知っておくと便利なHTMLの属性を紹介します。すでに使用されているものあると思いますが、いくつはこんな属性もあったのか、と発見があるかもしれません。 24 Lesser-Known HTML Attributes You May Want to Use ✨📚 by Madza (@madzadev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私は少し前に、HTMLのタグについての記事を公開しました。今回はその続編として、知っておくと便利なHTMLの属性を紹介したいと思います。 この記事で紹介する属性はすべて簡単に使用でき、外部ライブラリを使用しなければできないようなタスクを実現するのに役立ちます。 HTMLで特に便利な各属性の使用例と構文を理解しやすいように、コードスニペット
商用でも完全に無料！ プレーンなHTMLとCSSで実装された、ランディングページ用のテンプレート -Uisual
JavaScriptはなし、プレーンなHTMLとCSSで実装されたランディングページ用のテンプレートを紹介します。 テンプレートはスマホ・タブレット・デスクトップのレスポンシブ対応。ワイヤーフレームのような白黒のシンプルなデザインなので、カスタマイズも簡単です。 Uisual -Free Landing Page Templates Uisual -GitHub UisualはプレーンなHTMLとCSSで実装された、ランディングページ用のテンプレートです。他のCSSフレームワークやJavaScriptなどは一切必要ありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。
JavaScriptでRPGを作ろう！スマホにも対応したゲームの作り方
今回から作るゲームについて まずは、今回から作っていくゲームを見てみましょう。 このようなゲームを作ります。 （パソコンで遊ぶときは、ゲーム画面をクリックしてから、なにかキーを押してね！） ※音が出ますので、ご注意ください。 パソコンの場合は、ゲーム画面をクリックしてから、なにかキーを押してください。 スマホの場合は、ゲーム画面をタップして、ゲームをはじめてください。 タイトル画面では、スペースキー、もしくはタップで、次に進めます。 ゲーム内では、方向キー、もしくはゲーム左下の方向パッドで、山田先生を操作《そうさ》できます。（方向パッドはスマホのみで対応。パソコンのマウスでは操作できません） ゲーム内容： 山田先生、りこちゃん、アルくんが、迷宮《めいきゅう》に閉じ込められてしまいました。 前後左右、どこを見ても壁ばかり。でもきっとどこかに出口があるはず…… みんなでゴールを目指そう！ この
Webアプリを高速化してユーザー体験を快適にするWebAssemblyの入門書が発売
Webアプリの高速化はエンジニアの悲願。CodeZineを運営する翔泳社では、高速化の技術の1つであるWebAssemblyを基礎から解説した『入門WebAssembly』を12月15日（水）に発売しました。 ブラウザで多くのコンテンツが提供されるようになり、Webアプリの処理を高速化する手法が重要になっています。特にJavaScriptでは快適なユーザー体験を届けられない場合には、何か別の手法が必要です。 そこで役立つのがソフトウェアアーキテクチャのWebAssemblyです。ブラウザで重くなる処理をバイナリに変換して実行できる技術で、パフォーマンスを最適化して高速な処理を実現できます。 新刊『入門WebAssembly』は、このWebAssemblyに興味があるエンジニアが仕様や機能、実装方法を基本から学べる入門書です。 どのようなケースでWebAssemblyを利用したらいいのか、ま
自作プログラミング言語と WebAssembly コンパイラ
Photo by Lukas Tennie from unsplashはじめにこのエントリでは、僕が趣味で作っている PicoML という自作プログラミング言語の話を書こうと思う。 作ってから半年くらい経っているのだけれど、如何せん自作言語という無用の長物であり、登壇などでコイツの話をすることもないため、ある種の供養みたいなものだと思ってもらって構わない。 PicoML の概要まずは実装した言語の紹介から。ざっくり以下の特徴を備えた言語である。 ML ベースの文法による関数型言語単純 let 多相型推論による型チェックCLI として、Node.js 上での即時評価器（REPL）と WebAssembly をターゲットにしたコンパイラの双方を提供REPL やコンパイラの実装は TypeScript で行っている。自分の勉強が主目的であったため、REPL やコンパイラの CLI を動作させるの
Rust・WebAssembly・WebGLで作る回路シミュレータ CADに書いたCPUの回路図がそのまま動く
Kernel/VM探検隊はカーネルや仮想マシンなどを代表とした、低レイヤーな話題でワイワイ盛り上がるマニアックな勉強会です。KOBA789氏は、シミュレータとCADの制作について発表しました。全2回。後半は、回路CADの制作方法について。前半はこちら。 自作CADに求めること KOBA789氏（以下、KOBA789）：シミュレータができたので、次はCADを作っていきます。書いた回路図がそのまま動くCADがなかなかないので、私はCADに書いた回路図がそのまま動くことを一番求めていました。 大抵の場合、回路を書くCADとシミュレータが別々になっています。まじめな回路を組むのであればそのほうが楽なのですが、だいたいタイミングチャートのかたちで表示されるんですよね。 プローブをいろいろなところにくっつけて、そのプローブの値が時間経過でどうなったかというタイミングチャートがバーッと出るわけです。たく
知っておくと便利で役に立つHTMLの属性のまとめ
あまり知られていないけど、知っておくと便利で役に立つHTMLの属性を7つ紹介します。 Google翻訳が翻訳しようとするのを防ぐtranslate属性、リンクをダウンロードするように指示するdownload属性、アップロードできるファイルのタイプを指定できるaccept属性など、HTMLだけで実装できるのかという便利な属性ばかりです。 7 useful HTML attributes you may not know by Mariana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに multiple属性 accept属性 contenteditable属性 spellcheck属性 translate属性 poster属性 download属性 終わりに はじめに HTMLは、Web制作の要です。しかし、多くのプロ
HTML5はHTML Standardへ呼称変更 ～ HTML5プロフェッショナル認定試験は今後も有効 ～ ｜HTML5道場｜Web資格なら「HTML5プロフェッショナル認定試験」公式サイト
バズワードとしてのhtml5 HTML5と聞いてみなさま何を想像するでしょうか？バズワード化したウェブプラットフォームの代名詞としてのHTML5ということも、ウェブページ記述言語としてのHTML5ということもあるかもしれません。WHATWGのHTML仕様書の導入部にも、これはHTML5なの？という項目で、短くいえばその通りで、モダンウェブテクノロジーを意味して広くバズワードとして利用される文脈ではHTMLのようなWHATWGで開発されている仕様書もたくさん含まれます、という記述があります。 バズワードという意味では、これからの時代はウェブアプリケーションだ！HTML5だ！というお題目で、コミュニティーイベントを2000年代から展開していた仲間と、ようやくHTML5もバズワードとして認知され広まっていく端緒につくところまで来たなと2010年頃に呑みながら語り合った日々を懐かしく思い出すことも
SPAセキュリティ入門～PHP Conference Japan 2021
シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、著名なフレームワークな状況とエンジニアの技術理解の現状を踏まえ、SPAセキュリティの現実的な方法について説明します。 動画はこちら https://www.youtube.com/watch?v=pc57hw6haXk
商用でも完全無料、ランディングページ用のHTMLテンプレートがダウンロードできる -Inovatik
ランディングページや小規模Webサイト用のHTMLテンプレートが無料で利用できるInovatikを紹介します。すべてのHTMLテンプレートはオープンソースで、商用プロジェクトでも無料で利用できます。 時間や予算が少ない時、モックアップが必要な時などに便利です。BootstrapやTailwind CSSが使用されているので、勉強用にもいいですね。 Free HTML templates for websites and landing pages -Inovatik Inovatikの特徴 HTMLテンプレートのダウンロード Inovatikの無料HTMLテンプレート Inovatikの特徴 Inovatikはフロントエンドデベロッパーが実装した、ランディングページや小規模Webサイト用のHTMLテンプレートを無料でダウンロードできます。 すべてのHTMLテンプレートはMITライセンスで、
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
a11yとUXを向上させる4つのヒント - グラフィックスにテキストを使用してはいけないなど
9月7日、dev.toに「a11yとUXを向上させるフロントエンドの4つのヒント」が公開された。 The 4 Frontend tips for improving a11y and UX - dev.to この記事では、スクリーンリーダーの読み上げを意識した実装など、アクセシビリティ、UX向上のヒントを4つ紹介している。 目次 グラフィックスにテキストを使用してはいけない aria-labelでは、動詞を使って要素が行動につながることを伝える パスワードの表示・非表示には、ボタン要素を使う 正しいバーチャルキーボードを表示する グラフィックスにテキストを使用してはいけない テキストを使ってグラフィックを作成する方法がある。 よくある例として、クローズボタンの十字アイコンを乗算記号(x)で作成することが挙げられる。 確かに視覚的には有効な解決策だが、アクセシビリティの観点からすると、バッド
出来ることは計算だけ？「WebAssembly」は一体なにが新しいのか〜エンジニアが語る技術愛 ＃03〜｜ミクシル
ミクシィには、探究心溢れるエンジニアがたくさん在籍しています。 その探究心は業務で扱う技術にとどまらず、趣味で書いているプログラムだったり、個人的に研究している言語だったりと、自身の気になった技術への追求も留まることを知りません。そこで、社内のエンジニアに“好きな技術”について、思う存分に語ってもらうシリーズを始めました。 ルールはこの通り。 ・業務で使っている技術でも、使われていない技術でもOK ・あくまでも個人的な見解で ・その技術のどこが面白いのか ・愛を込めて語り尽くしてもらう 第3回目は、新規プロダクトを目下開発しているSREグループの神谷に、「WebAssembly」の魅力をたっぷり語ってもらいました。 Webの技術でもないしアセンブリでもない？ ━━早速ですが、今アツい技術について教えてください！ 今回話すのは「WebAssembly（以下Wasm）」についてです。生まれた背
NTT東日本とIPA、「シン・テレワークシステム」にHTML5版、Mac/Chromebookから接続可能に | IT Leaders
IT Leaders トップ ＞ テクノロジー一覧 ＞ ネットワーク ＞ 新製品・サービス ＞ NTT東日本とIPA、「シン・テレワークシステム」にHTML5版、Mac/Chromebookから接続可能に ネットワーク ネットワーク記事一覧へ [新製品・サービス] NTT東日本とIPA、「シン・テレワークシステム」にHTML5版、Mac/Chromebookから接続可能に 2021年8月5日(木)日川 佳三（IT Leaders編集部） リスト NTT東日本は2021年8月5日、契約不要、ユーザー登録不要で利用できる無料のシンクライアント型VPNシステム「シン・テレワークシステム」に「HTML5版」を追加すると発表した。Windowsだけでなく、MacやChromebookなどからも、Webブラウザ（HTML5）を使って接続できるようになる。 NTT東日本と独立行政法人情報処理推進機構（I
NTT 東日本 - IPA 「シン・テレワークシステム」 - HTML5 版 Web クライアントの公開について
NTT 東日本 - IPA 「シン・テレワークシステム」 Beta 7 および HTML5 版 Web クライアントの公開について トップ | 2020/05/14 中間報告 | 2020/11/03 自治体テレワーク for LGWAN | 2021/08/05 HTML5 Web 版クライアント (Mac, Chromebook 対応) | バージョン履歴 | ダウンロード | ユーザー数グラフ 入門 - 今すぐ使ってみよう | クライアント検疫機能・MAC アドレス認証機能 | 二要素認証・ワンタイムパスワード (OTP) 機能 | マイナンバーカードを用いたユーザー認証機能 | 仮想マルチディスプレイ機能 行政情報システムでの利用 | 組織 LAN におけるポリシー規制サーバー設置 | 企業システムにおける VM・HDD クローン対応 | Wake on LAN リモート電源 ON
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
