JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. HTML5のWebSocket属性とは？readyStateとbufferedAmountを徹底解説

    WebSocketとは WebSocket（Web Sockets）は、Webアプリケーション向けに設計された次世代の双方向通信技術です。単一のソケット上で動作し、HTML5に対応したブラウザでは、JavaScriptインターフェースを通じて手軽に利用できます。 従来のHTTPのようなリクエスト・レスポンス方式とは異なり、WebSocketを使用するとサーバーとクライアント間で常時接続によるリアルタイムなデータのやり取りが可能になります。そのため、チャットアプリケーション、オンラインゲーム、ライブ配信など、低遅延通信が求められる場面で広く活用されています。 WebSocketオブジェクトの主

  2. HTML5 Canvasで図形に影を付けるための4つの基本プロパティ

    HTML5 Canvasの影（シャドウ）機能とはHTML5 Canvasには、描画した図形の周囲に美しい影を生成する機能が標準で用意されています。これらの影の見た目は、コンテキストが持つ4つのグローバルな影属性によって制御され、一度設定すると、その後のすべての描画操作（矩形・円・線・テキストなど）に自動的に反映されます。影を制御する4つのプロパティ一覧番号プロパティと説明1shadowColor [ = 値 ]現在設定されている影の色を返します。値を代入することで、影の色を変更できます。CSSと同様の色指定（例：rgba(0, 0, 0, 0.5)）が可能です。2shadowOffsetX [

  3. HTML5 Canvasで影を描画する方法｜shadowプロパティの使い方を解説

    HTML5 Canvasで影を描く基本 HTML5のCanvas APIでは、テキストや図形に対して簡単に影（シャドウ）を付けることができます。影の描画には、描画コンテキスト（ctx）が持つ4つの影関連プロパティを使用します。 サンプルコード 以下は、Canvas上に描いたテキストへ影を適用する完全なサンプルです。 <!DOCTYPE HTML> <html> <head> <style> #test { width: 100px; h

  4. HTML5 Canvasの状態を保存・復元するsave()とrestore()メソッドの使い方

    HTML5 Canvasには、キャンバスの描画状態を保存・復元するために欠かせない2つのメソッド、save()とrestore()が用意されています。save()メソッドを呼び出すたびに、その時点のキャンバスの状態がスタックに積まれていき、restore()メソッドを呼び出すと、スタックの一番上に保存されていた直近の状態が取りり出されます。この仕組みを利用することで、塗りつぶし色や透明度などの設定を一時的に変更した後、元の設定へ簡単に戻すことができます。save()とrestore()の概要番号メソッドと説明1save()現在のキャンバスの状態をスタックにプッシュ（保存）します。2restor

  5. HTML5 Canvasでテキストを描画するための主要プロパティ徹底解説

    HTML5のCanvas APIを使うと、JavaScriptだけでキャンバス上に自由にテキストを描画できます。テキストを扱う際に押さえておきたいのが、fontやtextAlign、fillText()などのプロパティとメソッドです。この記事では、それぞれの役割と設定できる値についてわかりやすく解説します。 textBaseline プロパティとは textBaseline [ = value ] は、現在のベースライン（文字の縦方向の基準線）の位置を取得・設定するプロパティです。この値を変更することで、テキストをどの高さを基準に配置するかを制御できます。指定できる値は以下の通りです。 t

  6. HTMLの<video>要素で使える属性一覧と使い方を解説

    HTMLの<video>要素の主な属性 HTMLの<video>要素は、Webページに動画を埋め込むための標準的な要素です。再生方法や表示サイズ、読み込みの挙動などを属性で指定することで、動画を柔軟に制御できます。ここでは、<video>要素で利用できる主な属性とその役割をわかりやすくまとめました。 属性の一覧 属性説明 autoplay 論理属性です。この属性を指定すると、データの読み込みが完了していなくても、再生可能になった時点で自動的に動画の再生が開始されます。

  7. HTML5 Geolocation APIのPositionErrorオブジェクトが返すエラーコード一覧

    HTML5のGeolocation APIを使用する際、位置情報の取得に失敗するとPositionErrorオブジェクトがエラーハンドラに渡されます。このオブジェクトには、エラーの原因を示すcodeプロパティと、詳細メッセージを含むmessageプロパティが格納されています。codeプロパティには以下の4種類のエラーコードが定義されており、それぞれ対応する定数で比較することができます。PositionErrorのエラーコード一覧コード定数説明0UNKNOWN_ERROR不明なエラーが発生したため、デバイスの位置情報を取得できませんでした。1PERMISSION_DENIEDアプリケーションに位

  8. EaselJSのTickerを使ってCanvas上に線を描画する方法

    EaselJSとは EaselJSは、HTML5 Canvas要素を手軽に扱えるようにするJavaScriptライブラリです。ブラウザ上でのゲーム開発やグラフィック描画など、インタラクティブなコンテンツ制作に幅広く活用されています。 Canvasの低レベルなAPIを直接操作するのは煩雑になりがちですが、EaselJSを使えばディスプレイリストやステージの概念を利用して、直感的に図形やアニメーションを実装できます。 Tickerで線を描く基本コード EaselJSのTickerは、一定間隔（デフォルトでは約60FPS）で「tick」イベントを発行するアニメーションループです。このtickイベン

  9. HTML5でcanvas.style.display = "block"が機能しない場合の解決方法

    問題の原因canvas.style.display = block が期待どおりに動作しない場合、多くは setTimeout() の使い方に原因があります。setTimeout() の第一引数に文字列で関数名を渡していると、タイマー発火時に関数が正しく実行されないことがあります。解決策：関数参照を使うsetTimeout() を修正し、関数参照(function reference)を渡すようにしましょう。文字列ではなく関数そのものへの参照を渡すことで、タイムアウトイベントのコールバックとして確実に関数が呼び出されるようになります。まず、関数参照を直接渡す基本的な書き方は次のとおりです。wi

  10. HTML5のviewport設定で「user-scalable=no」は本当に必要？アクセシビリティを守るレスポンシブ設計のポイント

    レスポンシブWebデザインを実装する際、user-scalable=no を指定する必要はありません。この設定は、Webサイトをネイティブアプリのように見せたい特別なケースでのみ検討すべきものです。ズーム機能はアクセシビリティの要ピンチ操作によるズーム（拡大表示）は、視覚に障害のある方や小さな文字が読みにくい方にとって、非常に重要なアクセシビリティ機能です。多くのユーザーが日常的にこの機能を活用していることを、開発者は常に意識しておく必要があります。「ユーザーがズームしたときにデザインが崩れるのでは」という懸念から、ズームを無効化したいケースも少なくありません。しかし、ズームされてもレイアウト

  11. HTMLでPNG画像の不透明領域を検出する方法

    PNG画像の不透明領域を検出する基本手順 HTML(JavaScript)環境で、透過していないPNG画像の領域を検出するには、Canvas APIを使ってピクセルデータを解析します。大まかな流れは以下のとおりです。 まず画像のピクセルバッファを取得する そのバッファへの32ビット参照を取得する x=0側から走査して左端(x1)を検出する 幅の終端側から走査して右端(x2)を検出する y=0側から走査して上端(y1)を検出する 高さの終端側から走査して下端(y2)を検出する 1. ピクセルバッファを取得する 対象の画像を一旦canvasに描画し、getImageData()メソッドを呼び

  12. HTML5 Canvasで2つ以上のオブジェクト間に重力を実装する方法

    HTML5 Canvas上で、2つ以上のオブジェクトの間に万有引力（重力）のような力を適用するには、ニュートンの万有引力の法則に基づいて、オブジェクト同士の距離と方向から力を計算し、それぞれの速度（vx・vy）へ加算します。 基本的な考え方 重力は「質量に比例し、距離の2乗に反比例する」引力です。この記事では簡略化のため、係数を 50 として扱っています。実際のシミュレーションでは、この値を調整することで引力の強さを変更できます。 計算の手順は以下の通りです。 2つのオブジェクト間の距離ベクトル（dx・dy）を求める 距離の2乗から力の大きさ F を計算する 単位ベクトル（方向成分 rhat

  13. HTML5の「input type="week"」は本当に存在する？使い方とコード例を解説

    はい、input type=week はHTML5で実際に存在する入力タイプです。この入力タイプを使用すると、ISO 8601規格に準拠した「年」と「週番号」からなる日付情報をユーザーに入力させることができます。送信時の値は「2024-W15」のような形式（年-週番号）で扱われます。 input type=week の基本的な使い方 フォーム内に次のように記述するだけで、週を選択するための入力フィールドを簡単に作成できます。 <!DOCTYPE HTML> <html> <body> <form action = /cgi-bi

  14. HTML5のdatetimeとdatetime-localの違いを徹底解説

    HTML5のdatetimeとdatetime-localの違いとは？HTML5では、日付と時刻をユーザーに入力させるためのフォーム部品として、datetimeとdatetime-localという2つの入力タイプが用意されています。名前はよく似ていますが、両者には「タイムゾーン（時刻帯）情報を含むかどうか」という重要な違いがあります。この記事では、それぞれの特徴をコード例とともにわかりやすく解説します。datetime：UTCタイムゾーン付きの日時datetimeタイプは、年・月・日・時・分・秒（および秒の小数点以下）で構成される日付と時刻を、ISO 8601形式で表現します。この際、タイムゾ

  15. HTML5のautofocus（オートフォーカス）属性の使い方とサンプルコード

    HTML5では、ページの読み込み時に自動的に特定のフォーム要素へフォーカスを当てるための新しい属性「autofocus」が導入されました。基本的な記述方法は次のとおりです。<input type = "text" name = "search" autofocus/>autofocus属性は論理型（ブール値）の属性で、input要素のほかにも、select要素・textarea要素・button要素などに対して指定できます。なお、1つのページに複数設定した場合の動作は保証されないため、1ページにつき1つの要素だけに指定するようにしましょう。対

  16. HTML5の<radialGradient>タグとは？SVG放射状グラデーションの使い方を解説

    HTML5の<radialGradient>タグとは <radialGradient>タグは、SVG（Scalable Vector Graphics）において放射状グラデーションを定義するための要素です。中心点から外側へ向かって色が滑らかに変化する円形・楕円形のグラデーションを作成でき、Chrome、Firefox、Safari、Edgeなどのモダンブラウザすべてでサポートされています。 このタグ自体は単独では表示されず、<defs>要素内で定義したうえで、図形のfill属性などから参照して使用します。 基本的な使い方とサンプルコード 以下は、HTML5

  17. HTML5のセッションストレージとローカルストレージの違いを徹底解説

    HTML5のセッションストレージとローカルストレージの違いHTML5では、クライアント側(ブラウザ)にデータを保存するための仕組みとして、「セッションストレージ(sessionStorage)」と「ローカルストレージ(localStorage)」が導入されました。どちらもWeb Storage APIに属する機能ですが、データの保持期間や適した用途が大きく異なります。本記事では、それぞれの特徴と使い分けのポイントを解説します。セッションストレージ(Session Storage)とはセッションストレージは、ユーザーが単一のトランザクション(一連の処理)を実行しているシナリオ向けに設計されていま

  18. iOSのUIWebViewでモバイルサイトを正しく表示する方法

    iOSアプリでUIWebViewを使ってモバイルWebサイトを表示した際、レイアウトが崩れたり、画面サイズに合わなかったりすることがあります。この問題を解決するには、以下の設定を試してみてください。1. ページの自動スケーリングを有効にするまず、WebViewにページ全体を画面幅に合わせて拡大・縮小させる設定を行います。mywebview.scalesPageToFit = YES; mywebview.contentMode = UIViewContentModeScaleAspectFit;scalesPageToFit: YESにすることで、Webコンテンツがビューのサイズに合わせて自動

  19. AngularJSでラジオボタンの選択値を動的に取得する方法

    AngularJSでラジオボタンの選択値を動的に取得できない問題の解決法ng-repeatなどでリストを表示している際、ラジオボタンの選択値を動的に取得したいケースはよくあります。しかし、ng-modelに同じ変数をそのままバインドすると、すべての行で選択状態が共有されてしまい、意図した通りに動作しません。解決策：ng-modelに$indexを追加するこの問題を解決するには、各ラジオボタンのng-modelに$indexを追加します。$indexはng-repeatブロック内で各行のインデックス番号を表す特殊なスコープ変数のため、これを利用することで行ごとに独立したモデルとして値を管理できる

  20. Chart.jsのtoBase64Image()で真っ白なPNG画像が出力される場合の解決策

    Chart.jsでグラフを生成し、toBase64Image()関数を使って画像化した際に、出力されるPNG画像が真っ白になってしまうことがあります。これは、グラフの描画（アニメーション）が完了する前にtoBase64Image()が呼び出されていることが主な原因です。 この問題を正しく解決するには、以下のようにアニメーションの完了を待ってから画像を取得する必要があります。 解決策1：animationオプションのonCompleteを使用する チャートの設定にanimationオプションを追加し、onCompleteコールバック内でtoBase64Image()を呼び出します。これにより、ア

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:207/297  20-コンピューター/Page Goto:1 201 202 203 204 205 206 207 208 209 210 211 212 213