イイダリョウのブログ。APIの機はもうすぐ熟しそう!ブラウザ対応状況♪JS「周回遅れでもWebGLを事始める!」で「WebGLの機はとっくに熟している」と書きました。API」というものがあります。こちらも徐々に機が熟しています。APIの概要と状況をまとめました。Interface)です。APIについてはこちらもご覧ください。APIはDOMと同じくW3Cが策定しています。下記の図のような位置付けになります。Audioファイル再生についてはHTMLにaudio要素がありますね。src="audio/audio.mp3"><p>このブラウザはaudio要素に対応しておりません。APIはaudioファイルをもっと細かく制御することができます。Explorer)にMIDI音源というものが内臓されておりまして...ピロピロと曲が流れるサイトがありました、ええ(遠い目)。APIはもっと本格的なDAWが作れるシンセ音源なのです!!昔はこういう音楽を作るには専用のDAWソフトが必要でしたよ。書き出されるのはオーディオファイルだからある程度容量があるしね。APIはどんなことができるのか?いくつかの事例を見ていき、テンションを上げていきましょう!バーチャルシンセサイザーブラウザ上に再現されたアナログシンセサイザーです!上のツマミをいじりって鍵盤を叩くと音色が変わります。ねとらぼ※参考:WebAudioSynthオリジナルの電子楽器1こちらはオリジナルの電子楽器です。画面上でカーソルや指を動かすと、ポルタメント(滑らか)に音階が変わり、とても楽しい!幽霊が出そうな音を簡単に作れる。指に合わせて残像が現れる輪っかもいいですね。Mach3.laBlog※参考:デモオリジナルの電子楽器2こちらはスマホのジャイロ(傾き)で音階が変わります。ポルタメントはシンセらしさの特徴でもある。画面の色も同時に変わるのがキレイです。performanceドラムマシンポチポチと音を指定するだけでリズムを作ることができて楽しい!※参考:ブラウザからビートが生まれる。soundrope※参考:デモマトリックスシーケンサードラムマシンのようにポチポチと音階を指定すると簡単にメロディを作ることができるシーケンサー。APIが融合すると、このようなインタラクティブコンテンツが出来上がる!これは衝撃を受けた。APIのブラウザの実装状況はどんなもんなんざんしょ。ブラウザ対応状況caniuseではこんな感じ。Internetとは?前からあったっけ?お、サムスンは独自にブラウザ開発しているのか。これも対応ということで。Japanブラウザシェア私はデフォルトブラウザの対応を重視してまして、なぜならライトユーザーにはブラウザのインストールはハードルになるためです。WindowsのデフォルトブラウザであるEdgeの対応はとても大きい。ちなみにWindowsのデフォルトブラウザはもう1つあって、言わずと知れたIEです。ブラウザシェアは...IEが17%に対してedgeは3%です。StatsIEをバージョン別表示にしてみる。Stats最新版のIE11は16%でIE全体の17%と1%しか変わらない。IE=IE11と思って良さそう。他のバージョンはサポートが終わっているしね。APIという別の規格を開発していました。それがFireFoxが対応して、Safari、Edgeと広がってきた。Webのだいたいの新技術はChrome、FireFoxが先行するが、この2つはPCのデフォルトブラウザではない。そのため少し敷居が高い。PCのみのブラウザシェア上記は全プラットフォームでの比率でした。PCのみで見るとどうでしょう。Statsそれぞれさっきよりは増えた。IEが25%に対しEdgeは5%。PCユーザーの4人に一人はまだIE使っているのに対しEdgeは20人に一人かー。IEは早く10%切ってもらいたいし、Edgeは逆に10%超えてもらわないとIEの後継ブラウザとは言えないでしょう。*2こちらはIEのバージョン違いも表示。IE11は23%で、IE全体の25%と2%しか変わらない。APIに対応することはほぼ絶望的でしょう。IE11は旧IEとの後方互換のみを目的とした終活的ブラウザなので。Edgeのナンバリングは15と進み続けていて、他のモダンブラウザと歩調を合わせています。IEとEdgeのコンセプトについてはこちらがわかりやすいです。ついてスマホのみのブラウザシェアスマホのデフォルトブラウザ、iOSはSafariです。Androidはデフォルトブラウザが2つあって、ChromeとAndroidブラウザです。API非対応だけど2%なので流石にもう無視していいでしょう。Statsタブレットのみのブラウザシェアついでにタブレットも見てみる。タブレットでもそうか。こちらはAndroidブラウザがまだ11%でChrome14%とそこまで差がない。Chromeは微増しているのでAndroidブラウザは早く10%切ってほしい。Statsまあ全プラットフォームではAndroidブラウザは圏外なので、全体数から見たら少ないと思われる。OSシェアWindowsの最新版であるWindows10はIEとEdgeがデフォルトブラウザです。APIコンテンツはEdgeで聴く、という選択肢があります。それより昔のWindowsOSはIEだけがデフォルトブラウザです。WindowsOSのシェアはどんなもんでしょう。全プラットフォームで見てみる。Windowsは54%。StatsPCのみでみると79%。ちなみにMacは16%。StatsWindowsの中でのバージョンのシェア。10が48%に対し7は38%で10%の差になっている!でもまだ無視はできないな...。StatsWindows7、IE11のサポート期間Windows7のサポートは東京オリンピックの2020年。あと2年たてばWindows7ユーザー数は劇的に変わるかもしれない。APIコンテンツを体験するにはあと2年ほどかかりそうです。XPも(延長に延長を重ねた)サポートが切れたあとは、割と早く市場から去っていっていきました。XPはレガシーブラウザIE8までしか対応しておらず、IE8もXPのコバンザメのごとくしぶとく生き残ってましたが、今は消え去りました。ちなみにWindows10はIE11をなんと2025年までサポートするようです。そんなに頑張んなくていいんだよー、進化を止めたブラウザなのだから...。APIコンテンツをデフォルトブラウザEdgeで体験してもらうことができます。APIコンテンツを体験できません。他のOSとの比率で考えるとこうなります。全プラットフォーム:Windowsユーザー=54%。そのうち非Windows10ユーザーは54*0.52=28%PCのみ:Windowsユーザー=79%そのうち非Windows10ユーザーは79*0.52=41%この比率がこれから今後2年の間にどう変わっていくか見守っていきましょう。APIはデフォルトブラウザとしては今のところ全プラットフォームの28%、PCのみでは41%、つまり3人ないし4人に一人の非Windows10ユーザーが体験できません。Windows10のユーザーがWindows7ユーザーを超えたこと、そしてあと2年でWindows7のサポートが終わることを考えると「機はもうすぐ熟しそう」と言えるのではないでしょうかね?私としてはDAWソフト無しにシンセのような電子音楽が作れて、さらにインタラクティブな楽器や3Dとの連携など、ワクワクの方が大きいです。qiita.com*1:似たようなメディアファイル再生にvideo要素もあります。*2:Chromeが44%でもうIEは追いつけないくらい差が開いている。export)でどんなことができるのか事始めてみたVue.jsやNuxt.jsを理解する上で重要なJSの「モジュール」という...2019-10-23【Googleアナリティクス】主なメニューからユーザー層をイメージする以前書いたGoogleアナリティクス(GA)の続きです。APIを使ってページのテキスト読み上げボタンを実装してみたテキスト読み上げのスクリーンリーダーについて調べたところ、...2019-06-06p5.jsを習得するために参考になりそうなサイト、書籍、動画たちp5.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。