JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. HTMLのlocalStorageで使用サイズを確認する方法をわかりやすく解説

    localStorageは、複数のセッションにわたってデータを永続的に保存できるブラウザのストレージ機能です。Cookieと異なり、ページを閉じたりブラウザを再起動したりしてもデータが残るため、ユーザー設定や一時的なキャッシュの保存などに広く利用されています。ただし、localStorageには最大約5MBという容量制限があるため、実際にどれくらいのサイズを使っているのかを把握しておくことが重要です。localStorageのサイズを確認するサンプルコード以下のコードを実行すると、各キーの使用サイズと合計サイズを確認できます。var sum = 0; // 各キーのサイズをループで集計 fo

  2. HTML5 Canvasで楕円を描く方法とは？scale()とellipse()を使った実装例を解説

    HTML5のCanvasで楕円（オーバル）を描きたいときは、いくつかの方法があります。この記事では、代表的な2つの手法を、そのまま動かせるサンプルコード付きでわかりやすく解説します。 方法1：scale()で円を変形させて楕円を描く 正円を描くためのarc()メソッドと、座標系を拡大・縮小するscale()メソッドを組み合わせると、円を横長や縦長に変形させて楕円として描画できます。基本的な手順は次のとおりです。 save()で現在の描画状態を保存する translate()でキャンバスの中央へ原点を移動する scale(2, 1)でX方向だけ2倍に拡大する（円が横長の楕円になる） arc()

  3. HTML5 CanvasのdrawImageでアンチエイリアスを適用する方法

    アンチエイリアスの基本：リサンプリング品質を設定するHTML5のCanvasで画像を拡大・縮小して描画する際、輪郭がギザギザになる（ジャギーが発生する）ことがあります。これを防いで滑らかな描画結果を得るには、2DコンテキストのimageSmoothingQualityプロパティでリサンプリング品質を指定します。「low」「medium」「high」の3段階から選択でき、「high」ほど高品質な補間が行われます。ctx.imageSmoothingQuality = "low" | "medium" | "high";オフスクリーンキャ

  4. HTML5のvideoタグでローカル（ハードディスク上）の動画ファイルを再生する方法

    HTML5の<video>タグを使えば、ブラウザ上で手軽に動画を再生できます。対応している主な動画形式は、MP4、WebM、Oggの3種類です。本記事では、ユーザーがハードディスク上から選択したローカルの動画ファイルを、<video>タグで再生する方法を段階的に解説します。1. input要素でファイルを選択するまず、<input type=file>要素を使用して、ユーザーにローカルの動画ファイルを選択させます。accept属性にvideo/*を指定すると、動画ファイルのみが選択対象になります。2. changeイベントが発火するファイルが選択されると、&

  5. 【解説】HTML5で大きなMP4ファイルをストリーミング再生する方法

    動画をダウンロードしながら再生可能にするにはWeb上で動画を配信する際、ダウンロードと同時に再生（ストリーミング再生）できるようにするには、特別な方法でエンコードする必要があります。特にFlashベースの動画では、ストリーム内のデータを末尾から先頭へ移動させる処理が必要です。この作業は「mp4 FastStart」という無料プログラムを使えば自動的に行えます。エンコード時の設定ポイントHandBrakeなどのエンコードソフトには「Web」向けオプションが用意されており、エンコード時にこの最適化を自動的に適用できます。さらに、MP4ファイル自体にも圧縮が施されているため、Webサーバー側でgzi

  6. HTMLで大きなテキストを表示する方法

    通常のテキストよりも大きなサイズで文字を表示したい場合は、<big>タグを使用します。このタグで囲まれたテキストは、周囲の標準的な文字サイズより一段階大きく表示されます。注意：このタグはHTML5ではサポートされていません。HTML5以降の環境では、CSSのfont-sizeプロパティを使って文字サイズを指定する方法が推奨されています。使用例HTMLで大きなテキストを表示するには、以下のコードを実行してみてください。<!DOCTYPE html> <html>    <head>    

  7. HTMLのspellcheck属性を使って要素のスペルと文法チェックを指定する方法

    要素のテキストに対してスペルや文法のチェックを有効にするかどうかを指定するには、HTMLのspellcheck属性を使用します。この属性は、<input>要素、<textarea>要素、そしてcontenteditable属性によって編集可能にされた要素内のテキストに適用されます。ポイント： 属性値には「true」（チェックを有効にする）または「false」（無効にする）を指定できます。省略した場合は、ブラウザやシステムの設定に従います。注意： <input>要素には有効ですが、パスワード入力欄（type=password）には機能しません。これは、パスワー

  8. HTMLでバックグラウンドミュージック（BGM）を追加する方法【bgsoundタグの使い方と注意点】

    HTMLでは、<bgsound>タグを使うことでページの背景で音楽を再生できました。ただし、このタグはInternet Explorer専用であり、他のブラウザでは動作しない点に注意が必要です。記述例以下のコードを実行すると、HTMLにバックグラウンドミュージックを追加できます。<!DOCTYPE html> <html> <head> <title>HTML bgsound Tag</title> </head> <body> <bgsound sr

  9. HTMLでテキストを中央揃えにする方法を解説【centerタグとCSSの使い方】

    HTMLでテキストを中央揃えにする基本HTMLでは、<center>タグを使用することで、そのタグで囲まれたテキストやコンテンツを画面の中央に配置することができます。このタグは非常にシンプルで、開始タグと終了タグで囲むだけで中央揃えが実現できます。注意： <center>タグは現在非推奨（deprecated）となっています。最新のWeb標準では、代わりにCSSを使った方法が推奨されています。centerタグの使用例以下のコードを実行すると、テキストが中央に表示されることを確認できます。<!DOCTYPE html> <html> <

  10. HTMLで表にキャプションを追加する方法をわかりやすく解説

    HTMLで表（テーブル）にキャプション（表題）を付けるには、<caption>タグを使用します。キャプションは表の内容をひと目で理解できるようにするための短い説明文で、<table>タグの直後に記述するのが基本です。captionタグの基本ルール<caption>タグを使う際は、以下のポイントに注意しましょう。<caption>は必ず<table>タグの直後に配置します。1つの表に付けられるキャプションは1つだけです。キャプションはデフォルトで表の上部中央に表示されます。コード例以下のコードを実行すると、HTMLの表にキャプションを含

  11. HTML5で入力値の候補オプション一覧を表示する方法

    HTMLの<datalist>タグを使うと、<input>要素に対してあらかじめ用意した選択肢（入力候補）の一覧を定義できます。ユーザーがテキストボックスに文字を入力すると、該当する候補が自動的にサジェスト表示されるため、入力の手間を減らしつつ入力ミスも防げます。 基本の仕組み <input>要素のlist属性に名前を指定し、<datalist>要素のid属性に同じ名前を設定することで、両者が関連付けられます。選択肢は<datalist>の中に<option>要素として記述します。 サンプルコード <!DOCTYPE

  12. HTML5で定義リストを作成する方法｜dl・dt・ddタグの使い方を解説

    HTML5で定義リスト（記述リスト）を作成するには、<dl>タグを使用します。<dl>タグは、用語とその説明をセットで表現するためのリストを宣言する要素です。リスト全体を<dl>タグで囲み、その中に用語を示す<dt>タグと、説明を示す<dd>タグを組み合わせて記述します。 定義リストの基本構造 通常の箇条書きリストとは異なり、定義リストでは各項目が「用語」と「その説明」という2つの要素で構成されるのが特徴です。基本的な構造は以下のようになります。 <dl>：定義リスト全体を囲むコンテナ要素 <dt>：定義する

  13. HTMLのcontenteditable属性で要素のコンテンツが編集可能かどうかを設定する方法

    contenteditable属性とは HTMLでは、contenteditable属性を使用することで、要素のコンテンツがユーザーによって編集可能かどうかを指定できます。この属性に「true」を設定すると、その要素内のテキストをブラウザ上で直接編集できるようになり、「false」を設定した場合や属性自体を指定しない場合は、通常どおり編集不可の状態になります。 また、値として「inherit」を指定すると、親要素の設定を引き継ぐことも可能です。 使用例 以下のコードを実行すると、contenteditable属性の動作を実際に確認できます。1つ目の段落は編集可能なため、カーソルを合わせてテキス

  14. HTMLで定義用語を追加するには？dtタグの使い方を解説

    定義リスト（記述リスト）は、他のリストとよく似ていますが、各項目に「用語」と「その説明」という2つの要素がセットで含まれる点が特徴です。HTMLでは、<dt>タグを使用することで、定義リスト内における用語の始まりを定義できます。定義リストを構成する3つのタグ定義リストを作成する際は、以下の3つのタグを組み合わせて使用します。<dl> … 定義リスト全体を囲むコンテナ要素<dt> … 定義対象となる用語（term）を表す<dd> … 用語に対する説明や定義内容（description）を表す使用例次のコードを実行すると、HTMLで定義用語を追加する

  15. HTMLドキュメントにセクションを含めるにはどうすればいい？<section>タグの使い方を解説

    HTMLドキュメントにセクションを追加するには、<section>タグを使用します。<section>タグはHTML5で導入されたセマンティック（意味論的）要素のひとつで、見出しを伴う関連性のあるコンテンツをひとつのまとまりとしてグループ化するために使われます。以下のサンプルコードを実行すると、HTMLドキュメント内にセクションを含める方法を確認できます。サンプルコード<!DOCTYPE html> <html>    <head>       

  16. JavaScriptにおけるAES暗号化とは？node-forgeでの実装方法を解説

    AES暗号化とはAES（Advanced Encryption Standard：高度暗号化標準）は、アプリケーション内でデータを暗号化するために世界中で広く採用されている共通鍵暗号方式です。JavaScriptでは、Forgeライブラリ（node-forge）を使用することで、このAES暗号化を簡単に実装できます。node-forgeのインストール方法まず、NPM（Node Package Manager）を使ってnode-forgeをインストールします。ターミナルで以下のコマンドを実行してください。npm install node-forge次に、プロジェクトで効率的に利用できるよう、コー

  17. JavaScriptのswitch文による比較は厳密（===）？動作の仕組みを実例で解説

    JavaScriptのswitchステートメントが「厳密な比較」を行うのかどうか迷ったことはありませんか？結論から言えば、switch文のcase比較は厳密等価演算子（===）と同じ挙動をします。つまり、値だけでなくデータ型まで一致しなければ、そのcaseはマッチしません。厳密比較を確認するサンプルコード混乱を解消するために、まずは以下のコードを実際に実行してみましょう。例switch(1) { case 1: alert(Switch comparison: Not Strict.); break; case 1: alert(

  18. JavaScriptでブラウザの戻るボタンを無効にする方法をわかりやすく解説

    Webアプリケーションの中には、ユーザーがブラウザの「戻る」ボタンで前のページに戻れないようにしたいケースがあります。例えば、フォーム送信後の二重登録防止や、特定のフローを強制したい場合などです。本記事では、JavaScriptとjQueryを使ってブラウザの戻るボタンを事実上無効化する方法を、実際のサンプルコードとともに解説します。 仕組みのポイント この手法は、ユーザーが前のページへ戻ろうとした瞬間に window.history.forward() を呼び出し、強制的に履歴を「進める」ことで、結果的に戻れなくするというものです。さらに、pageshow イベントの persisted

  19. JavaScriptで自動ユニットテストを実行する方法｜Unit.jsの使い方を解説

    JavaScriptでユニットテスト（単体テスト）を自動的に実行したい場合は、Unit.js の利用がおすすめです。Unit.jsはクロスプラットフォームに対応したオープンソースの単体テストフレームワークで、シンプルな記述でアサーション（値の検証）を行うことができます。 基本的なテストコードの例 まず、テストコード内で以下のように記述してみましょう。 var example = Welcome; test.string(example) .isEqualTo(Welcome); この例では、変数 example が文字列型であることを確認し、その値が「Welcome」と等しいかどうかを検証して

  20. JavaScriptの継承：Object.createとnewの違いをわかりやすく解説

    JavaScriptの継承におけるObject.createとnewの違いJavaScriptでプロトタイプ継承を実装する際、Object.create()を使う方法とnew演算子を使う方法の2つがよく知られています。一見似ているように見えますが、この2つはまったく異なる動作をします。それぞれの違いを詳しく見ていきましょう。例1：Object.create()を使った継承最初の例では、amitBaseClassのプロトタイプのみを継承しています。function SomeClass() { } SomeClass.prototype = Object.create(amitBaseClass

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:221/297  20-コンピューター/Page Goto:1 215 216 217 218 219 220 221 222 223 224 225 226 227