WebAssembly の歩き方
WebAssembly 興味あるけど何？調べても、どうやって動いてるのかさっぱりわからないんだけど…という方多いのではないでしょうか！自分もそうでした 😂 この記事では、 WebAssembly の目指しているゴールをその具体例とともに示し、みなさんの今後の深堀りを行うためのインデックスとしてお役にたてれば幸いです！なお、この記事は以下のような読者を想定しています。 WebAssembly がどういうものか知りたい人 自分が作った WebAssembly がブラウザで実行されるまでの仕組みを知りたい人 はじめに 以下に書いてあることのほとんどは MDN に書いてあることをベースに、自分なりに丁寧に書き下したものになります。 非常によくまとまっているので、この記事と併せて読んでいただけると、より理解が深まると思います 💪 歴史 この技術が登場したことの背景を理解することは WebAsse
Notionブラウザ版、WebAssembly版SQLite3でページ遷移速度を20％改善 実装時の苦労と教訓とは？
クロスプラットフォームのワークスペースアプリ「Notion」を提供するNotion Labsは2024年7月10日（米国時間）に公式ブログで、NotionのブラウザバージョンのデータキャッシュにWebAssembly（WASM）実装の「SQLite3 WASM/JS」（以後、WASM版SQLite3）を採用した事例を紹介する記事を公開した。 2021年ごろ、WindowsおよびmacOS版のNotionデスクトップアプリにおけるパフォーマンス向上を目的にSQLiteを採用した同社は、ネイティブのモバイルアプリでもSQLiteを採用してきた。そして、ブラウザ版アプリには、WASM版SQLite3を採用したという。 Notion Labsは「WASM版SQLite3を採用することで、全ての最新ブラウザでページ間の遷移のパフォーマンスを20％改善できた。インターネット接続など外部要因によりAPI
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
もう、アルゴリズム自分で書いてる場合じゃない？機械学習が開発手法を変える─de:code 2016セッションレポート
もう、アルゴリズム自分で書いてる場合じゃない？機械学習が開発手法を変える─de:code 2016セッションレポート 白石 俊平（HTML5 Experts.jp編集長） de:code 2016に参加中の、編集長の白石です。 今回は、編集部のメンバーそれぞれが興味あるセッションに参加してセッションレポートを書こう、ということになってまして、ぼくは「Big Data/機械学習がソフトウェア開発手法を変える! 〜静的アルゴリズム生成から動的アルゴリズム生成への道〜」というセッションを聴講しました。 スピーカーである田丸健三郎さんの語り口が心地よく、機械学習についてはかじったことくらいしかないぼくにとってはレベル感もちょうど良く、知らなかったことも数多く学べてとても満足でした。 以下に、簡単なセッションレポートを掲載します。機械学習については素人の、Webエンジニアによるレポートではありますが
Google、アプリに音声認識機能を追加できる「Cloud Speech API」を公開
米Googleは3月23日（現地時間）、米サンフランシスコで開催のクラウド関連イベント「GCP Next 2016」において、アプリに機械学習による音声認識機能を追加できる「Google Cloud Speech API」（プレビュー）をリリースしたと発表した。「Google Cloud Platform」を利用する開発者はこちらから限定プレビューに申し込める。少なくともプレビュー期間中は無料だ。 Cloud Speech APIは、同社がAndroidの「Google Now」の音声検索や「Google Keyboard」での音声によるテキスト入力などで使っているディープラーニングニューラルネットワーク技術「Automatic Speech Recognition」をアプリで使えるようにするREST API。 80カ国語以上をサポートし、雑音の多い環境でも高い認識性能を誇る。 デモ動画（
JSだけでVRできる！『WebVR』ことはじめ
今年はVR元年と呼ばれています。 実は過去にも何度かVR元年と呼ばれ、VRが来る、と言われていた年があります。 ですが、今年はいよいよそれが本格的になりそうな状況になってきました。 そこで今回は、「今からWebVRに備えよう！」ということで、WebVRとはなにか、それを利用して何ができるのか、利用シーンはどうか、といったことに焦点を当てたいと思います。 VR元年 本格的になりそうなのはなぜか。まずひとつ挙げられるのはOculus Rift（詳細は後述）に代表される、いくつかのヘッドマウントディスプレイ（以下、HMD）が比較的安価に家庭で利用できるようになったことです。 今年に発売される予定のものだけでも、Oculus Rift、HTC Vive、PlayStation VR、FOVE(開発キット版)など様々なHMDが市場に登場する予定になっています。 またこれらが注目される理由として、現在
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ -
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
第4回 HTML5を使った実際の開発の進め方
みなさん、こんにちは。hifive開発チームの横山です。第2回と第3回では、HTML5で実現可能な表現や機能について詳しく解説しました。これらを用いると、業務システムに従来のWebシステムでは実現できないレベルの高い操作性を持たせることができます。直観的に操作できるUIにより誤操作を防止しやすくなり、ユーザー教育のコストも減らせるのではないか---。そんな期待を持った人も多いのではないでしょうか。 しかしながら、そうしたリッチなUIを備えた業務システムの開発は、単純な画面遷移を繰り返すことで業務を進めていく従来型Webシステムと比べて、開発プロセスを適切に管理し、予定通りの工数で開発を進めることが難しくなりがちです。 そこで今回は、HTML5を使ってリッチなUIを提供する業務システムを開発する際に必要となる「成功させるために考慮すべき点」や「失敗しないための開発の進め方」「役に立つツールや
HTML5とCSS3で何ができるかを実際に動かして学べる「The Expressive Web」
「HTML5」や「CSS3」を導入することで、ウェブサイトの作成やウェブデザインがさらに便利になります。そんなHTML5とCSS3で追加されている新しい要素で「何ができるのか？」ということが、実際に試したり動かしたりしつつ学べるAdobeの「The Expressive Web」です。 HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/ 「The Expressive Web」は左側に各コンテンツのメニューがあり、1つずつ見ていくことでCSSやHTML5の動作が分かっていくというウェブサイト。一番上の「CSS3 Animations」をクリックすると、青いキャラクターと背景がCSS3アニメーションで動いている様子を見ることができます。CSS3アニメーションはHTMLにキーフ
JSで何でも動く時代！？「html5j エンタメ技術部 第2回勉強会」 | エンカフェ
↑Node.js使ってArduinoからツイートできただと…。それ何てWeb of Things!? 未だ興奮が冷めやらない中、5月17日（土）に開催された「html5j エンタメ技術部 第2回勉強会」の参加レポートをひっそりとお届けします。 まず「そもそもエンタメ技術部とは何なのか？」を説明しておくと、Webプラットフォーム技術によるモノづくりコミュニティ「html5j」において「最新の技術で人を楽しませること。それらの技術とWebとの接点を探ること」を目的とした部のこと。 とかく技術は深堀りすればするほど、一般には伝わりにくいし地味に見えるもの。でもせっかくなら、技術で自分も他人も楽しめたら最高だよね、というのは僕も非常に感じるところで、Web技術とエンターテイメントの接点を探りましょう、という観点は忘れずに持っていたいものです。 「フィジカルコンピューティング」がメイカーズブームの中
【Web制作】HTML5タグとCSS3のIE6-8対策方法！FacebookのOGP対応も
ブログやサイトを作成する時に今も悩ましいのがIE(Internet Explorer)など旧タイプのブラウザ対策。特にIE8からはそれなりのアクセスがあるため放置できません。今回はHTML5とCSS3のIE対策について考えてみました。 ゆめぴょんです。こんちはっ(^^)/ 企業サイトではまだ以前のHTMLバージョンで作成されたものが多いです。私が開発する立場であってもきっと面倒なHTML5ではなくXHTMLなどの旧バージョンで作ると思います。その方がだんぜん楽ですね。 ただ今回は自分の個人ブログを作ろうと思ってるので、思い切ってHTML5で作るつもりです。以前作ったサイトもHTML5なのですが、その時のIE対策とは変わってきてます。以下では私が採用しようと思う方法を共有します。 IE9未満(主にIE6〜8)でのHTML5のタグ対策 結論から言うと、HTML5のタグを古いInternet E
HTML5 Conference 2013 講演資料まとめ #html5j
※本サイトではアフィリエイト広告を利用しています。記事内および商品リンクにはプロモーションが含まれる場合があります。 こんにちは、星影（@unsoluble_sugar）です。 11月30日に開催された「HTML5 Conference 2013」の発表スライドや動画などの講演資料をまとめました。 ※リンクミスや追加情報などありましたら、コメントまたは@unsoluble_sugarあてにお知らせいただけるとありがたいです 基調講演 次世代Web、深まる。広がる。 関連記事 村井純教授。IT戦略は前倒しで実現される。7年先の夢を語ろう！ HTML5 Conference 2013招待講演Webのモバイル対応には、Webが社会に定着する上での真の問題や課題が隠されている。HTML5 Conference 2013基調講演2000人のイベント開催に成長した、HTML5コミュニティの深まりと広が
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 佐川 夫美雄（Ashiras, inc.） フロント開発の現場では、Java中心の開発から、HTML、CSS、JavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。 はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLやCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTML、CSS、JavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明
HTML: ハイパーテキストマークアップ言語 | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 �t�પView in English 0��પAlways switch to English HTML (HyperText Markup Language) はウェブのもっとも基本的な構成要素です。 HTML はウェブページの基本レイアウトに従ってウェブページのコンテンツを記述し定義するものです。 HTML に隣接する他の技術としては、ウェブページの表示や表現を記述するもの (CSS) または機能や振る舞いを記述するもの (JavaScript) があります。 「ハイパーテキスト」はウェブページから別なページに、ウェブサイト内でもウェブサイト間でも、接続するリンクを示します。リンクはウェブの基礎的な特徴です。コンテンツをインターネットにアッ
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
あなたの知らない超絶便利なWeb開発を叶える仕様Web Componentsとは
Web Componentsとは 本稿では、Google I/O 2013の中から、「Web Components」に関するセッションをレポートする。 「Web Components」は、簡単にいうと、Web（HTML）をコンポーネント化するための仕組みで、再利用性やメンテナンス性、開発効率を上げるのに大きな効果があるといわれている。 今年のGoogle I/Oでは、次の2つのセッションでWeb Componentsについて解説があった。 Web Components: A Tectonic Shift for Web Development（Google Chromeチーム 開発者Eric Bidelman氏） 資料：http://www.WebComponentsshift.com/ 「Web Components: A Tectonic Shift for Web Developme
ブラウザキャッシュではなくローカルストレージを使ったキャッシュシステム·basket.js MOONGIFT
basket.jsはローカルストレージにJavaScriptをキャッシュして高速化をはかるソフトウェアです。 Webの高速化を語る上でキャッシュの存在は欠かせません。そこで使ってみたいのがbasket.jsです。何とHTML5のローカルストレージを使ってキャッシュする仕組みを提供します。 最初の実行。underscore.jsなどが読み込まれています。2回目以降は消えます。 でもちゃんとjQueryオブジェクトは存在します。 basket.requireメソッドを使って対象ファイルを読み込みます。有効期限を設定することも可能です。読み込み失敗をハンドリングすることもできます。普段はそのまま利用でき、remove()やclear()でファイルを解除できます。 basket.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る ロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
レスポンシブWebデザインとEPUB3の最新動向／EPUB 3とHTML5
