JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. KineticJS×HTMLにおける「グループ」と「レイヤー」の違いを徹底解説

    KineticJSは、HTML5のCanvasを活用したリッチなWebアプリケーションを構築するためのJavaScriptライブラリです。KineticJSでアプリケーションを開発する際には、「グループ（Group）」と「レイヤー（Layer）」という2つの重要な概念を正しく理解し、適切に使い分けることが求められます。結論から言えば、グループは基本的に「コンテナ（入れ物）」であり、レイヤーは基本的に「分離のための仕組み」です。以下でそれぞれの役割と特徴を詳しく見ていきましょう。 グループ（Group）とは？複数の図形をまとめるコンテナ グループは、複数の図形オブジェクトをひとまとまりとして管理

  2. flex-flow: column wrapを設定したフレックスコンテナの幅と余白の問題を解決する方法

    CSS Flexboxでは、高さを指定したコンテナの中で子要素を縦方向（column）に折り返して配置することができます。しかし、flex-flow: column wrap を指定した際、特にGoogle Chromeでは子要素とコンテナ上部のボーダーの間に意図しない余白が自動的に挿入されることがあります。この記事では、その原因と簡単な解決策を、実際のコード例とともに解説します。 flex-flowで列ラップを設定する方法 子要素を列方向に並べ、コンテナの高さを超えたら次の列へ折り返すには、以下のプロパティを指定します。 -webkit-flex-flow: column wrap; fle

  3. 外部リンクでSVGのCSS3トランジションが機能しない原因と解決策

    外部リンクでSVGの塗りつぶしトランジションが動作しない問題HTML5のSVG要素にCSS3のトランジションを適用した際、:visited擬似クラスを使ったアプローチでは期待通りに動作しないことがあります。これはブラウザのプライバシー保護の仕組みにより、訪問済みリンクへのスタイル適用が大幅に制限されているためです。残念ながら、この問題はvisited状態だけでは解決できません。しかし、実用的な回避策が存在します。解決策1：URLにランダムなクエリを追加する最もシンプルな方法は、リンク先のURLにランダムなクエリパラメータを付与することです。これにより、ブラウザはそのページを「未訪問」と認識する

  4. HTML5 Canvasで画像の一部を切り抜いて描画する方法

    HTML5 Canvasで画像の一部を切り抜いて描画する方法 HTML5のCanvasでは、drawImage()メソッドを使うことで、画像全体だけでなく画像の一部(切り抜いた領域)を自由に描画できます。ゲーム開発でスプライトシートから特定のキャラクター画像を取り出して表示する場合などに特に便利なテクニックです。 なお、画像のonloadイベントは、ブラウザに画像が最初に読み込まれたときに一度だけ発生するという点に注意が必要です。詳細は後述します。 drawImage()メソッドの基本構文 画像の一部を描画するには、引数を9つ指定します。 ctx.drawImage(img, sx, sy,

  5. HTML5 Canvasで回転後のポイントを正確に検出する方法 ― Transformクラスによる座標変換

    キャンバス回転時に座標変換が必要な理由 HTML5のCanvas APIで図形を描画する際、rotate()メソッドを使ってキャンバスを回転させると、それ以降に描画されるすべての点が回転の影響を受けます。そのため、マウスクリック位置などの特定のポイントを正確に検出したり、意図した位置に点を描画したりするには、元の座標を回転後の座標系へ変換（トランスフォーム）する必要があります。 つまり、キャンバスに適用した回転や平行移動などの変換と同じものを、ポイント側にも適用しなければ、画面上の実際の位置とずれが生じてしまうのです。 Transformクラスでポイントを検出する この問題は、キャンバスに適

  6. CSSの:hoverを使って画像の上にdivやspanを重ねて表示する方法

    画像ホバー時にdivやspanをオーバーレイ表示させるテクニックWeb制作では、マウスカーソルが画像の上に乗ったとき（ホバー時）に、その画像の上へ別のコンテンツを重ねて表示したいケースがよくあります。たとえば、キャプションの表示やボタンの出現などが代表例です。このようなオーバーレイ表示は、CSSの :hover 疑似クラスと .overlay クラスを組み合わせることで、JavaScriptを使わずに簡単に実現できます。実装のポイント絶対配置の活用： .overlay 要素を親要素基準で position: absolute により配置します。親要素の設定： 親要素には position: r

  7. HTML5キャンバスで円同士の衝突を検出する方法

    円の衝突判定の基本原理HTML5キャンバス上で2つの円が衝突しているかどうかを判定するには、両方の円の中心点間の距離を求め、その距離が2つの半径の合計とどうなっているかを比較します。中心間の距離からそれぞれの半径を差し引いて評価することで、2つの円が重なっているか(衝突しているか)を判断できます。多数の円を扱う場合の課題例えば20個の円すべてについて衝突をチェックしたい場合、毎回正確な距離計算(平方根を含む処理)を行うと負荷が大きくなります。そこで有効なのが、本格的な計算の前に実行する「事前チェック」です。各円の中心のx座標・y座標と半径だけを使って、衝突の可能性がないペアを素早く除外できます

  8. HTML5のpreload属性で動画の事前読み込みを制御する方法

    HTML5のpreload属性とはHTML5では、<video>タグにpreload属性を指定することで、ページ読み込み時に動画ファイルを事前にダウンロードするかどうかを制御できます。動画を再生するまでデータを読み込ませたくない場合は、preload=noneを設定します。これにより、ユーザーが再生ボタンを押すまで通信が発生せず、帯域幅の節約やページ表示速度の向上が期待できます。preload属性に指定できる値none: 動画を一切事前読み込みしません。再生開始時に初めてデータを取得します。metadata: 動画の長さやサイズなどのメタ情報のみを読み込みます。auto: ブラウザ

  9. HTML5モバイル開発におけるおすすめフレームワーク4選

    HTML5ベースのモバイル開発に役立つ主要フレームワークHTML5を活用したモバイルアプリケーション開発では、適切なフレームワークを選ぶことが成功の鍵となります。ここでは、特に人気の高い代表的なフレームワークを4つご紹介します。1. Kendo UIKendo UIは、クロスプラットフォーム対応の高品質なモバイルアプリケーションを効率的に開発できるフレームワークです。豊富なUIウィジェットを備えており、ネイティブアプリに近い快適な操作感を実現できます。2. BootstrapBootstrapは、HTML・CSS・JavaScriptをサポートする定番のフロントエンドフレームワークです。レスポ

  10. HTML5のinput type=fileでファイルサイズを検証する方法

    HTML5ではFile APIを利用することで、フォーム送信前にクライアント側でファイルサイズをチェックできます。<input type=file>要素のfilesプロパティにアクセスすると、選択されたファイルの情報（sizeプロパティ＝バイト単位のファイルサイズ）を取得できます。 ここでは、data-max-size属性で最大サイズを指定し、jQueryを使って送信時に検証する実装例を紹介します。 サンプルコード：ファイルサイズの検証 以下のコードを実行すると、フォーム送信時にファイルサイズが上限値（32,154バイト）を超えていないかチェックされます。上限を超えている場合は、送

  11. HTML5とCORSを活用してWebブラウザで別ドメインの制限付きリソースへアクセスする方法

    CORS（Cross-Origin Resource Sharing：オリジン間リソース共有）とは、Webブラウザ上で、別のドメイン（オリジン）から提供される制限付きリソースへのアクセスを許可するための仕組みです。通常、ブラウザはセキュリティ上の理由から「同一オリジンポリシー」によって異なるドメイン間の通信をブロックしますが、CORSを利用することでサーバー側が明示的に許可した相手に対してのみ、リソースの共有が可能になります。 具体例：HTML5動画プレーヤーとカメラへのアクセス たとえば、HTML5デモセクションにある動画プレーヤーをクリックすると、カメラへのアクセス許可を求めるダイアログが

  12. HTMLのネストされたテーブル（入れ子の表）の書き方とサンプルコード

    以下は、HTMLでネストされたテーブル（入れ子の表）を作成する例です。ネストされたテーブルとは、テーブルのセル（<td>）の中に、さらに別のテーブルを配置した構造のことを指します。 サンプルコード <!DOCTYPE html> <html>    <head>        <meta charset="utf-8">        <title>Example</title>  

  13. HTMLキャンバスをWebページ全体に表示させる方法【CSS解説】

    HTMLの<canvas>要素をWebページの画面全体に表示させたい場合、キャンバスの幅と高さをページの100%に設定する必要があります。しかし、単にwidth: 100%と指定するだけでは、ブラウザのデフォルトスタイルによって余白が残ってしまうことがあります。 以下のCSSを使うことで、キャンバスをページ全体にぴったりと表示させることができます。 キャンバスを全画面表示にするCSS * { margin: 0; padding: 0; } body, html { height: 100%; } #canvas { position: absolu

  14. HTML5 Canvasで円の中にテキストを描画する方法

    HTML5のCanvasで円の中にテキストを表示したい場面は多くあります。例えば、クリックした位置にラベル付きのマーカーを配置したり、図形に番号を付けたりするケースです。 円の中にテキストを描画するには、まず context.beginPath() を使って新しいパスを開始し、その後 arc() メソッドで円を描き、最後に fillText() でテキストを重ねて描画します。 基本的な手順 パスの開始：context.beginPath() で新しい描画パスを作成します。 円の描画：context.arc(x, y, 半径, 開始角, 終了角) で円の形状を定義します。 塗りつぶし：con

  15. 認証情報をローカルストレージに安全に保存するテクニック

    ローカルストレージとは何か ローカルストレージ（Local Storage）は、複数のウィンドウやタブにまたがって利用でき、セッションが終了してもデータが保持されるように設計された、ブラウザ標準の保存領域です。Webアプリケーションの世界では、パフォーマンス向上の目的で、ユーザーが作成したドキュメント一式やメールボックスの内容など、数メガバイト規模のユーザーデータをクライアント側に保持したいというニーズがよくあります。 認証情報の保存における課題 ただし、ユーザー名やパスワードといった認証情報（クレデンシャル）をそのままローカルストレージに格納すると、XSS（クロスサイトスクリプティング）など

  16. HTML5でページのズーム機能を無効にする方法

    レスポンシブデザインにおいて、ユーザーによるピンチイン・ピンチアウトなどのズーム操作を無効にしたい場合は、HTMLの<head>内にviewport（ビューポート）用のMETAタグを設定します。user-scalableプロパティを「no」に設定するズームを無効にするには、METAタグ内のuser-scalableプロパティを「no」に指定します。user-scalable=no実際のコード例以下のコードをHTMLの<head>セクション内に追加することで、レスポンシブデザインにおけるズーム機能を無効化できます。<meta name="viewport&

  17. PluploadのHTML5ランタイムを使ってAmazon S3へ直接アップロードする方法

    Amazon S3は、CORS（Cross-Origin Resource Sharing／オリジン間リソース共有）に対応したことで、ブラウザからHTML5経由でS3バケットへ直接ファイルをアップロードできるようになりました。これにより、サーバーを中継せずにクライアント側だけで完結するアップロード処理が実現できます。以前は不可能だった直接アップロードCORS対応以前は、セキュリティ上の制約（同一オリジンポリシー）により、ブラウザから別ドメインであるS3へ直接リクエストを送ることができませんでした。そのため、ファイルは一旦自社サーバーにアップロードし、そこからS3へ転送するという二段階の処理が必

  18. HTML5 iframeのsrcdoc属性に代わる方法はある？代替手段を解説

    HTML5 iframeのsrcdoc属性に代わる方法はある？srcdoc属性は、iframe内に表示するページのHTMLコンテンツを指定するための属性です。HTMLの<iframe>タグは、文書内にインラインフレーム（別の文書を埋め込むための領域）を作成する際に使用されます。srcdoc属性の代替手段として、JavaScriptを使ってiframeのdocumentオブジェクトに直接HTMLを書き込む方法があります。以下のコード例をご覧ください。var doc = document.querySelector(#demo).contentWindow.document; var

  19. HTML5 Canvasで大きなフォントを描画する方法を解説

    HTML5 Canvasで大きなフォントを正しく描くには？HTML5のCanvas要素に大きなサイズのフォントを描画したい場合、fontプロパティにフォントサイズとフォントファミリーを指定し、fillText()やstrokeText()メソッドを使うことで実現できます。以下に、大きな文字を描画するサンプルコードを紹介します。この例では、180ptのGeorgiaフォントを使用し、塗りつぶしと輪郭線の両方を設定しています。サンプルコードvar myCanvas = document.getElementById(myCanvas); var context = myCanvas.getCon

  20. HTML5の<polygon>タグの使い方と実践サンプル

    HTML5における<polygon>タグとは <polygon>タグは、SVG（Scalable Vector Graphics）内で多角形を描画するための要素です。「points」属性に頂点の座標を列挙するだけで、三角形から複雑な星形まで、自由な形状を作成できます。 以下のサンプルコードを実行すると、HTML5で<polygon>タグを使用し、赤く塗りつぶされた五芒星（星形）を表示できます。 <html>    <head>       <

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:203/297  20-コンピューター/Page Goto:1 197 198 199 200 201 202 203 204 205 206 207 208 209