img srcsetの最適解！サイズ違い画像いくつも用意してられない
6,435views／投稿 2017-03-01／更新 2019-04-30 imgのsrcsetをシンプルにレスポンシブ対応（要は全デバイス）でも大丈夫なルールを我流で定められないか？という思いでまとめました。 PCもRetinaディスプレイになってきたし、srcsetが標準になるだろうし、WordPressとか画像自動化じゃない手打ちのレスポンシブHTMLで統合的に扱える簡単な単一方法はないか？と思ったからです。 サンプルページを用意しました。 画像の用意は２枚まで とにかくシンプルにしたい（sizesとかvwとか嫌だ） レスポンシブでスマホもPCも全部対応したい タブレットはいろんなサイズあるがiPad基準に タブレットはPC側としよう（スマホ／PC＆タブレット） スマホの横持ちは無視！というより軽さ重視 結論はこれです <img src="スマホ画像.jpg" srcset="スマ
スマホでもPCでも、どのブラウザーでも再生できる動画の埋め込み方はこれだ！ - でじたるのもり
動画を貼り付けるためのツールはYoutubeが最もポピュラーだけれど、何でもかんでもYoutubeにアップするっていうのもどうなの？という感じがしなくもない。ちょっとした映像を気軽に貼っておきたい時などは、動画データを直接サーバーにアップして自サイト内で再生できると便利。 どのブラウザーでも再生できるコンテンツなら安心 誰でも気軽に使えるFlashプレーヤーのスクリプトはいろいろなものが公開されているけれど、その中でも「MediaElement.js」は動きが軽い上に動作が安定している。HTML5に対応しており、mp4、webm、ogvなどに対応。mediaelementsを利用すれば、PCからもスマホからも環境に応じて再生可能なコンテンツを提供することが可能になる。 モジュールは公式サイトでダウンロード。johndyer-mediaelement-*****.zipのような名称のファイル
Getting started with Web Audio API | Articles | web.dev
Getting started with Web Audio API Stay organized with collections Save and categorize content based on your preferences. Before the HTML5 <audio> element, Flash or another plugin was required to break the silence of the web. While audio on the web no longer requires a plugin, the audio tag brings significant limitations for implementing sophisticated games and interactive applications. The Web Au
Media Capture and Streams と Web Audio API で実現する録画・録音・ WAVファイルの生成 | CYOKODOG
前回のエントリではマイク経由の音声認識を行う Speech Recognition API を試しましたが、今回はカメラ・マイクからの動画・音声キャプチャを行う Media Capture and Streams を試してみます。 また、キャプチャした音声の録音については MediaStream Recording を使用することで可能ですが、現時点（2015年4月）では Firefox にしか実装されていません。 そこで Web Audio API を使用することで他のブラウザでも音声録音を可能にし、それらの音声データを wav 形式で保存する方法についても試してみました。 はじめに ベンダープレフィックス対策として以下処理を行います。 code demo script navigator.getUserMedia = navigator.getUserMedia || navigato
WebAudio Drum Machine
Save a Beat For security reasons, web browsers don't make it easy to save files directly to your hard drive. But to save your beat just copy and paste the data block below into a text file. To load the beat later click the Load button then paste the data block from your text file into the blank window.
画像処理＜HTML5 CANVAS＜Javascript＜木暮仁
スタートページ＞ Javascript ローカル画像の加工 ローカル画像を CANVAS に表示、セピア化やフィルタリングなどの画像加工をします。 最大横幅（画像がこれを超えると圧縮される） ローカル画像 ・左の（説明）をクリックすると、基本的事項が下にに表示されます。 ・ボタンにカーソルを載せると、その処理の説明とコードが表示されます。 さらにクリックすると、右上に処理後の画像が表示されます。 画像は細かい点（画素、ピクセル）の集まりです。 各画素は、赤・緑・青の３原色がそれぞれ０～２５５の段階で表現されます。 それにより、256×256×256＝１６万色（フルカラー）が表現されます。 赤＝ ０、緑＝ ０、青＝ ０：black 赤＝２５５、緑＝ ０、青＝ ０：red 赤＝ ０、緑＝２５５、青＝ ０：green 赤＝ ０、緑＝ ０、青＝２５５：blue 赤＝２５５、緑＝２
jsPDF
We have the skills and experience to gain a deeper understanding of your business strategy and the challenges you face. With this knowledge, we can work closely with you to build the products and services your customers need. We place the user at the heart of your digital design to build intuitive, useful, and memorable interactions. These moments elevate the perception of your brand and build the
Takazudolog - 地獄のvideo／audio要素
video／audioにハマりまくったメモ。作ってたのは、Flashでやってたような、複数の動画ファイルを、途中の選択肢によって色々変えながら見せるというようなインタラクティブムービーみたいなの。なので、ハードにvideoを使いまくるという意味で、普通に一本動画を見せるという用途よりももっと色々する必要があったわけだけれども、そうでない場合でも、videoが色々厄介であるということは知っておく必要があると思う。 とりあえず、videoやaudioを使いたい人は、以下の2ページを熟読せよ。 プラグインは要らない！音声／動画対応したHTML5 - audio／video要素 | Think IT Video - Dive Into HTML5 videoのイベントは HTML5 Video を眺めてるとなんとなく分かる。 audioライブラリ試してうまくいったやつはこれ。 SoundJS vi
離婚回避マニュアルを購入したいと思っているなら・・・ ｜ 口コミ・レビュー投稿 E-BOOKデータベース
離婚回避マニュアルを購入しようとしているなら、こちらのリンクをよく確認したほうがいいです。 このWEBサイトで、女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～の購入によって一体何ができるのかを、よく理解してから購入されることをおすすめします。 また、レビューや口コミが掲載されていれば、それもよく確認しましょう。 次の女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～に関した情報も購入の参考になるかもしれません。 販売商品名称：女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～ 教材説明：画期的な究極の離婚回避マニュアルをご紹介します。絶対に離婚したくない夫に徹底的な女性目線でお伝えする、離婚回避バイブルです。市販のマニュアルの多くは、男性が男性目線で書いたものであり、「妻の感情」をまったく無視しています
perspective.js (alpha version) demo (static) - HTML5.JP
[English] perspective.js は、Canvas で矩形イメージを任意の四角形に変形することができる JavaScript ライブラリーです。遠近法を使ったイメージを描きたい場合に使います。元となる矩形イメージとして HTMLImageElement オブジェクト (<img> のオブジェクト)だけでなくHTMLCanvasElement オブジェクト (<canvas> のオブジェクト)も扱うことができます。 perspective.js は変形処理の速度より変形後の画質を優先しています。そのため、アニメーションには適しているとはいえません。しかし、できる限り、パフォーマンスを改善してきました。小さなイメージであれば、うまくいくでしょう。 これはまだ作っている途中のものです。今でもこのライブラリーの改善を続けています。完成したら、HTML5.JP で、このライブラリーを
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
現在位置を取得する - Waste Of Time
現在位置を取得する方法として「クイック・スタート」で、 getCurrentPosition() メソッドを紹介しましたが、このメソッドについてもう少し詳細を解説します。 ＞＞ Geolocation API クイック・スタート getCurrentPosition() メソッド このメソッドは最大で3つの引数を取ります。 第一引数 successCallback は、位置情報取得に成功した時に実行される関数のオブジェクトを指定します。第一引数は必須です。 第二引数 errorCallback は、位置情報取得に失敗した時に実行される関数オブジェクトを指定します。 第三引数 options は、位置情報取得に関する各種パラメータを格納したJavaScriptオブジェクトを指定します。 位置情報取得に成功した時の処理 位置情報が取得できたら、getCurrentPosition()メソッドの
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ - ICS MEDIA
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ 「インタラクティブコンテンツをワンソースでクロスプラットフォームに対応させたい」、それはフロントエンドのデベロッパーであれば誰もが望むことではないでしょうか。一昔前はAdobe Flashが「Open Screen Project」と題して一歩手前まで実現していましたが、iPhoneからFlashを締め出そうとするAppleの強硬な姿勢によって頓挫することになりました。 尾野さん(しっぽさん)からの勧めもあり調べたのですが、「OpenFL」（オープンエフエル）というテクノロジーはさまざまな形式にインタラクティブコンテンツを出力できます。つまりOpenFLを使えばワンソースでクロスプラットフォームを実現できるのです。今回はOpenFLからHTML5とFlashを出力することによってクロス
Web StorageやindexedDBを扱う上でのセキュリティ上の注意点 - 葉っぱ日記
localStorageやsessionStorage、あるいはindexedDBのようなブラウザ上でのデータの保存が可能になったことで、これらを取り扱ううえでもセキュリティ上の注意点が必要である。 これらのストレージは、localStorageやindexedDBは永続的に、sessionStorageはブラウザやタブを閉じるまでの間データが保持され続けるので、例えばWebアプリケーションがログイン機構を持っている場合にログイン中にこれらのストレージに書き込まれたデータは、ログアウト後も当然参照および書き換えが可能である。Webアプリケーション上のアカウントに紐づいたデータをこれらのストレージに書き込んでいる場合、ログアウト後もアクセス可能なことが問題を引き起こす可能性がある。 例えばTwitterのようなサービスがあったとして、(navigator.onLineプロパティなどを利用して
PhoneGapでカメラ撮影 ＆ サーバーにアップロード
カメラで撮影し、写真をサーバーにアップロードしてみます。 （パーソナル）クラウドとの連携みたいなもん。 PhoneGapのCameraを使ってみます。 表示サンプルとコード 写真のURI（カメラ内の保存場所）とサムネイルを表示。 URIは、’content://media/external/images/media/xx’という文字列です。 このままでは、アップロード用に使えないので、フルパスに変換します。[URLをフルパスに変換]ボタンをタップ。 ’/mnt/sdcard/DCIM/Camera/xxxxxx.jpg’が写真データのパスです。’/mnt’はマウントを意味しているだけなので、実際の使用時にはこれは省いておきます。 以下のソースは、PhoheGap fanのページを参考にしました。一部修正しています。 ファイルのアップロード用にコードを追加しています。 サーバーにバイナリ（画
連載：初めての PhoneGap 第1回 － ハイブリッドアプリのメリット・デメリット | ADC Plus
PhoneGap Build サービスでアプリケーションをビルド サンプルコードをダウンロード とあるシステム開発会社に務めるA君は、入社2年目の駆け出しプログラマー。それまで担当していたWebベースの業務システム開発が一段落したところで、 今度はそのシステムをスマートフォンから利用できるようにするモバイルアプリケーションの開発を申し付けられました。 1年間でWebアプリケーション開発の知識はそれなりに身に付いたものの、スマホアプリの開発は全くの初めて。困ったA君は、入社当初の研修でお世話になったT先輩に相談することにしました。 Webアプリ開発の経験を活かすなら”ハイブリッドアプリ” A君：というわけで、社員にはiPhoneかAndroidが支給されているので、その両方のアプリ開発について検証しなきゃならないんです。でもどちらの開発も経験がないので、何から手を付ければいいのかさっぱりで
ブラウザでストレージ？ Web Storageを使いこなそう
■Web Storageのイベント sessionStorage、localStorageの両方でストレージ情報に関する操作を実施した際には「storageイベント」が発生し、タブ内、または複数のタブ内など、それぞれのWeb Storageの範囲内で通知される。 storageイベント時に取得できるプロパティは以下のとおりだ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to get microphone input volume value with web audio api?
jsPDF - Create PDFs with HTML5 JavaScript Library
IE6・7・8でもHTML5のvideoを利用できる方法とは！？ - Web.fla
