タグ

HTML5に関するkaiware007のブックマーク (11)

  • WebGL 開発支援サイト wgld.org

    次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScriptAPI です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP

  • Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開! - paiza times

    どうも、まさとらん(@0310lan)です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか? Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います! ■多機能な「写真ギャラリー」を組み込めるライブラリ! ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指

    Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開! - paiza times
  • ドラムの振動をセンサーで映像にしてみる | ツクロア - DESIGN LAB

    レッドツェッペリンの曲に「Immigrant song(邦題で”移民の歌”)」という曲があります。 バスドラムを16分音符の連続で打ちまくる特徴的なリズムパターンが有名な曲です。 Youtubeなどでもそのテクニックをレクチャーする動画がいくつもあるほど難易度が高く、初心者では簡単には叩くことができないパターンといってもいいでしょう。 私は趣味でドラムを習い始めて1年の初心者で全然上達しないのですが、ちょっとずつ練習をしています。 今回、演奏にあわせたタイミングで光や映像が反応すると楽しい気がしたので、自らの演奏と自らの映像でどこまで感じられるか、チャレンジしてみました。 バスドラムの振動をHTML5 Canvasでパーティクルアニメーション 解説は後にして、先に実験結果を撮影してみました。 私の演奏なのであまり上手ではありませんが。 まずはドラムセット全景、センサーを設置してみました。

  • 【第2弾】少しのコードで実装可能な20のCSS小技集

    2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です!(スパンながっ)簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください! ↑私が10年以上利用している会計ソフト! 目次 画像を丸く表示 1線のテーブル 1線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTMLCSSの全

    【第2弾】少しのコードで実装可能な20のCSS小技集
  • Raspberry Pi, Camera and Node.js - Live Streaming with Websockets #IoT | The Jackal of Javascript

    A few days ago Bala Kolluru has reached out to me asking if we can control a Raspberry Pi camera module using Web browser, so he can view a live stream from any HTML5 powered device. I was intrigued by this idea and wanted to give it a try. In this post, we will see how we can implement a system that can “stream” a video from our pi to a browser. The completed system would look like Pretty sweet r

    Raspberry Pi, Camera and Node.js - Live Streaming with Websockets #IoT | The Jackal of Javascript
  • MIDIデバイスの準備不要、Web MIDI APIの基礎

    この記事は、Web MIDI APIを題材にした連載の第一回目です。 Web MIDI APIはWebブラウザのAPIですが、Webブラウザの中で完結はしません。Webブラウザと外部のMIDIデバイスとの間でMIDIによる通信を行うためのAPIなのです。Webブラウザと外部デバイスとのやりとりでというとGamepad APIを想像される方もいらっしゃると思いますが、Gamepad APIはGame PadからWebブラウザへの一方通行の通信を行うのに対し、Web MIDI APIはWebブラウザと外部MIDIデバイスとの間で、双方向の通信が可能です。 昔ホームページで鳴っていたやつ ところで、MIDIってご存じですか? MIDIと聞くと、「昔ホームページで鳴っていたやつ」 を思い出される方が多いと思います。そもそもMIDIとは、「電子楽器の演奏データを機器間でデジタル転送する」ための物理的

    MIDIデバイスの準備不要、Web MIDI APIの基礎
  • WebRTCの裏側

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    WebRTCの裏側
  • HTML5Experts.jp

    Webブラウザ上でビデオ/オーディオの通信やデータ通信を行うための規格WebRTC(Web Real-Time Communication)について、がねこまさしさんが初心者にもわかりやすく解説します。

    HTML5Experts.jp
  • CircuitJS1 - JavaScriptで作られたWebベースの電子回路シミュレータ

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ここ数年のハードウェアやIoTブームがあり、電子や電気系に注目が集まっています。抵抗や電源、スイッチなどを使って回路を組み立てて自分の思ったとおりの動きを得られた時のうれしさはとても大きいでしょう。 それらの部品を買ってきても良いですが、まずはシミュレータで確認するのが良いでしょう。今回はWebブラウザ上で回路設計を行えるCircuitJS1を紹介します。 CircuitJS1の使い方 ごくごく簡単な回路。コンデンサ、抵抗、スイッチなどが並んでいます。 電気の流れる方向に動いています。 実際に動かしてみたところ。電気の流れが分かるでしょうか。 こんな複雑な回路や、 より実践的な回路もデモで用意されています。 CircuitJS1は元々用意されているものだけでなく、自分で回路図を作成

    CircuitJS1 - JavaScriptで作られたWebベースの電子回路シミュレータ
  • 紙相撲が無駄にIoTになった!~Raspberry Piで始めるIoTデバイス入門|fabcross

    空前のIoTブームです。最近では当にも杓子もIoTですよ。(22世紀にこれを読んでいるみなさん、2015年というのはそういう年だったんです) IoTというのはInternet of Thingsのこと。日語では「モノのインターネット」とか呼ばれていまして、ざっくり説明すると「コンピュータ以外のモノやデバイスをネットにつないで便利に使おう」というコンセプトのことです。ネットに測定結果をアップロードできる体重計や、家の外からスマホで操作できるエアコンなど、いろいろな製品/サービスが発表されています。 ではさっそく、我々も日の国技をインターネットにつないで、IoTしてみましょう(唐突)。 (相撲大会パート撮影:加藤甫、制作パート撮影:石川大樹) 実は、ちょっとした趣味のIoTデバイスなら個人のレベルでも十分に開発可能です。それがこのブームの面白いところ。昨今のツールの充実により、ソフトウ

    紙相撲が無駄にIoTになった!~Raspberry Piで始めるIoTデバイス入門|fabcross
  • GitHub - Arcticjs/Arctic.js: HTML5 game framework

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - Arcticjs/Arctic.js: HTML5 game framework
  • 1