タグ

JavaScriptに関するpmintのブックマーク (114)

  • イントロダクション - Mithril.js

    MithrilはVimeoやNikeといった企業や、Lichessのようなオープンソースプラットフォームで利用されています。 もし、すでにJavaScriptのフレームワークでの開発経験があり、他のフレームワークとなにが違うのかを知りたければ、フレームワークの比較のページを見てください。 MithrilはPolyfillなしでIE9以降のすべてのブラウザに対応しています。 はじめよう CDNを使ってMithrilを読み込んで、これから説明するチュートリアルをなぞるのが、Mithrilを試すもっとも簡単な方法です。このチュートリアルはラウティングやXHRも含めて、主要なAPIを紹介しますが、10分程度しかかかりません。 それでは次のようなHTMLファイルを作ってみましょう: <body> <script src="//unpkg.com/mithril/mithril.js"></scrip

    pmint
    pmint 2025/11/24
    クライアントサイドMVCフレームワーク
  • console - Web API | MDN

    console オブジェクトは、ブラウザーのデバッグコンソール(例えば Firefox のウェブコンソール)へのアクセスを提供します。 コンソール API の実装はランタイムによって異なる場合があります。具体的な例として、いくつかのコンソールメソッドはオンラインエディターや IDE によっては動作が異なったり、まったく動作しなかったりすることがあります。この記事で記述された動作を確認するには、ブラウザーの開発者ツールでメソッドを試してください。 console オブジェクトは次のように、あらゆるグローバルスコープで利用できます。 メソッド console.assert() 第 1 引数が false であれば、エラーメッセージをコンソールに出力します。 console.clear() コンソールをクリアします。 console.count() 指定されたラベルでこの行が呼び出された回数をロ

    console - Web API | MDN
  • View Transition API によるスムーズな遷移  |  View Transitions  |  Chrome for Developers

    View Transition API を使用すると、ウェブサイトのさまざまなビュー間でシームレスな視覚的トランジションを作成できます。これにより、マルチページ アプリケーション(MPA)またはシングルページ アプリケーション(SPA)として構築されているかどうかにかかわらず、ユーザーがサイトを移動する際に、視覚的に魅力的なユーザー エクスペリエンスが実現します。 ビューの切り替えを使用する一般的な状況は次のとおりです。 商品リスト ページに表示されるサムネイル画像。商品詳細ページでは、この画像がフルサイズの商品の画像に切り替わります。 ページ間を移動しても固定されたままのナビゲーション バー。 フィルタリングするとアイテムの位置が移動するグリッド。 View Transition API で作成されたトランジション。デモサイトをお試しください。Chrome 111 以降が必要です。 ビュ

    pmint
    pmint 2025/01/20
    Chromeの独自仕様だった<portal>がWeb標準化したのかな。https://developer.mozilla.org/ja/docs/Web/HTML/Element/portal ChromeもInternet Explorerのように標準を作るようになった?
  • Navigator: share() メソッド - Web API | MDN

    share() は Navigator インターフェイスのメソッドで、テキスト、URL、ファイルなどのデータを共有するために、端末のネイティブ共有メカニズムを呼び出します。利用できる共有ターゲットは機器によって異なりますが、クリップボード、連絡先やメールアプリケーション、ウェブサイト、Bluetooth などが含まれる場合があります。 このメソッドは Promise を undefined で解決します。 Windows では、これは共有ポップアップが起動されたときに発生し、Android では、データが共有ターゲットに正常に渡されたときにプロミスが解決されます。 ウェブ共有 API は、web-share 権限ポリシーで制限されます。 share() メソッドは、その権限に対応してはいるが許可されていない場合に例外を発生させます。 引数 data 省略可 共有するデータを含むオブジェクト

    Navigator: share() メソッド - Web API | MDN
    pmint
    pmint 2024/11/17
    ブラウザーにあるボタンをわざわざコンテンツ内に設置したいときや、共有を強要したいときに。
  • GitHub - cozmo/jsQR: A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.

    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 - cozmo/jsQR: A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.
  • 画面キャプチャ API - Web API | MDN

    画面キャプチャ API の概念と使用方法 画面キャプチャ API は比較的簡単に使用することができます。唯一のメソッドは MediaDevices.getDisplayMedia() で、その仕事はユーザーにキャプチャする画面または画面の一部を選択するよう促し、 MediaStream 形式でキャプチャすることです。 画面から動画をキャプチャするには、 getDisplayMedia() を navigator.mediaDevices 上で呼び出してください。 Promise が getDisplayMedia() から返され、これはキャプチャされたメディアをストリーミングする MediaStream で解決します。 画面キャプチャ API を使用する方法については、画面キャプチャ API の使用の記事を参照してください。 インターフェイス CaptureController Media

    画面キャプチャ API - Web API | MDN
    pmint
    pmint 2024/03/07
    screen capture
  • Curves | D3 by Observable

  • Preparing for the end of third-party cookies  |  Privacy Sandbox

    Some Privacy Sandbox technologies are being phased out. See our Update on Plans for Privacy Sandbox Technologies. Privacy Sandbox feature status provides more information about the status of individual APIs and platform features. Send feedback Preparing for the end of third-party cookies Stay organized with collections Save and categorize content based on your preferences. If your site uses third-

    Preparing for the end of third-party cookies  |  Privacy Sandbox
    pmint
    pmint 2023/10/30
    ネット中の<iframe>が<script>に変わるだけ
  • HTML <script> スクリプト要素 - HTML | MDN

    この属性により、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないようなパーサーブロック JavaScript を排除することができます defer はこの場合に同様の効果があります。 この属性を defer 属性とともに指定すると、その要素は async 属性のみが指定されている場合と同じ動作をします。 これは論理属性です。論理属性が要素にあれば真の値を表し、属性がなければ偽の値を表します。 ブラウザーの対応状況についてはブラウザーの互換性をご覧ください。 asm.js 向け非同期スクリプトもご覧ください。 attributionsrc ブラウザーに、スクリプトリソースのリクエストとともに Attribution-Reporting-Eligible ヘッダーを送信するように指定します。サーバー側では、このヘッダーを使用して、レスポンスで Attribution-

    HTML <script> スクリプト要素 - HTML | MDN
  • Window: requestAnimationFrame() メソッド - Web API | MDN

    window.requestAnimationFrame() メソッドは、アニメーションを実行したいことをブラウザーに指示します。 このメソッドは、次回の再描画の前に、ユーザーが指定したコールバック関数を呼び出すようブラウザーに要求します。 コールバック関数への呼び出し頻度は、通常、ディスプレイのリフレッシュレートと一致します。 最も一般的なリフレッシュレートは 60Hz(60 サイクル/フレーム毎秒)ですが、75Hz、120Hz、144Hz も広く使用されています。 パフォーマンスとバッテリー駆動時間の向上のため、ほとんどのブラウザーでは、バックグラウンドのタブや非表示の <iframe> 内で実行されている場合、requestAnimationFrame() の呼び出しは一時停止されます。

    Window: requestAnimationFrame() メソッド - Web API | MDN
  • MediaStream 収録 API - Web API | MDN

    MediaStream 収録 API (MediaStream Recording API) は、単に Media Recording API または MediaRecorder API と呼ばれることもありますが、メディアキャプチャとストリーム API および WebRTC API と密接に関係しています。 MediaStream 収録 API を使用すると、MediaStream オブジェクトまたは HTMLMediaElement オブジェクトによって生成されたデータを分析、処理、またはディスクへの保存のためにキャプチャすることができます。 また、驚くほど簡単に作業できます。 基概念 MediaStream 収録 API は、MediaRecorder という 1 つの主要なインターフェイスで構成されており、これが MediaStream からデータを取得して処理のためにユーザーに

    MediaStream 収録 API - Web API | MDN
    pmint
    pmint 2023/08/12
    カメラとマイク。ストリーミングではない方。記録が終わってから送信などの処理。
  • ウェブ音声 API - Web API | MDN

    このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 @���View in English �� �Always switch to English ウェブ音声 API (Web Speech API) で、音声データをウェブアプリに組み入れることができます。 ウェブ音声 API は、SpeechSynthesis (音声合成Text-to-Speech)と SpeechRecognition (非同期音声認識、Asynchronous Speech Recognition)の 2 つの部分から成り立っています。 ウェブ音声 API のコンセプトと使用法 ウェブ音声 API は、ウェブアプリが音声データを扱えるようにします。 この API には 2 つの構成要素があります。 音声認識は Spee

    ウェブ音声 API - Web API | MDN
  • MDN Plus

    ////////////   ////////////   ////////////   ////////////   ////////////   ////////////   ////////////  ++++++  ++++++  ++++++  ++++++  ++++++  ++++++  ++++++{{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}     ../../    ../../    ../../    ../../    ../../    ../../    ../../<></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> AI HelpGet real-time assis

    MDN Plus
    pmint
    pmint 2022/06/18
    MozillaのMDNをもっと便利に。更新されたときの通知や、DevDocsのようにローカルにダウンロードして使うなど。今後は日本でも有料プランができるみたい。
  • JavaScript で parseInt / parseFloat を使わない方が良い理由

    となるのが原因です。parseInt というのは、文字列を解析して整数値(int)を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望

    pmint
    pmint 2022/02/04
    と言われて鵜呑みにするのはコピペプログラマー。parseInt()は型変換。端数処理に型変換を使うのは不適切。適材適所。
  • Chart.js

    New in 4.0 Colors plugin Default palette of Chart.js brand colors is available as a built-in time-saving zero-configuration plugin.

    Chart.js
    pmint
    pmint 2022/01/12
    妙に複雑なライブラリ。調べることが多いうえに、調べ物が公式ドキュメントで完結しない。
  • GitHub - dsktschy/viewport-extra: Enable setting minimum and maximum viewport width

    pmint
    pmint 2021/08/24
    レスポンシブデザインで対応できる画面幅に、限度があるときに。でも独自にコードを書いたほうが簡単。「レンダリングを妨げないために"async"付けましょう」は謎。
  • GitHub - yubinbango/yubinbango

    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 - yubinbango/yubinbango
    pmint
    pmint 2021/08/02
    有効化の手順1, 2の仕様がダセェ
  • DOM イベント - Web API | MDN

    このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 pI� ��View in English �� ��Always switch to English イベントは、コードの実行に影響を与える可能性のある「興味深い変化」をコードに通知するために発行されます。これは、マウス操作やウィンドウのサイズ変更などのユーザー操作や、環境の変化(バッテリー残量の低下や OS のメディアイベントなど)、その他の原因によって発行されます。 それぞれのイベントは、 Event インターフェイスに基づいたオブジェクトで表現され、何が起こったかについての情報を提供するために、追加のカスタムフィールドや関数を持つことがあります。各イベントのドキュメントには、関連するイベントインターフェイスへのリンクや、その他の関連情報

    pmint
    pmint 2021/06/24
    Web APIのイベント大全
  • History - Web API | MDN

    This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月. Learn more See full compatibility Report feedback History インターフェイスで、ブラウザーのセッション履歴、つまり現在のページが読み込まれたタブまたはフレームで訪問したページを操作することができます。 history のインスタンスは 1 つしかなく(シングルトンです)、グローバルオブジェクト history を通してアクセスできます。 インスタンスプロパティ History インターフェイスは何もプロパティを継承していません。 length 読取専用 現在読み込まれ

    History - Web API | MDN
    pmint
    pmint 2021/06/23
    scrollRestoration, state など
  • GSAP | Docs & Learning

    Why create an account?It's free Participate in the forums Updates on the products you use Exclusive offers and more Create an Account

    GSAP | Docs & Learning