JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptとHTML5を使ってサウンドをリアルタイムに生成する方法

    Web Audio APIはブラウザ上でオーディオを制御するための強力なAPIです。このAPIを利用すると、オーディオソースの選択はもちろん、エフェクトの追加、オーディオの可視化、パンニング(音の定位制御)など、多彩な音声処理を実現できます。サウンド生成の基本サウンドを生成するには、まずAudioContextを作成し、その上でオシレーター(発振器)を利用します。オシレーターは電子的に波形を生成するモジュールで、サイン波・矩形波・のこぎり波・三角波など、さまざまな波形を指定して音を作り出せます。なお、AudioContextはドキュメントごとに1つ作成するのが基本です。同じドキュメント内であれ

  2. HTMLファイル入力コントロールにおけるcapture属性とaccept属性の正しい使い方

    HTMLでは、accept属性を使うことで、サーバーが受け付けるファイルの種類を指定できます。この属性は<input type=file>と組み合わせてのみ使用できる点に注意してください。accept属性の基本例以下のコードは、accept属性を使って画像ファイルのみを選択可能にする基本的な例です。<!DOCTYPE html> <html> <head> <title>ファイルアップロードフォーム</title> </head> <body>

  3. HTML5でブラウザからローカルファイルを操作できる？File APIの仕組みと活用例を解説

    HTML5ならブラウザ内からローカルファイルを操作できるHTML5では、ユーザーのコンピューター上に保存されたローカルファイル（クライアント側のファイル）を、ブラウザ内から直接扱うことができます。これは、バイナリデータやユーザーのローカルファイルシステムへのアクセスを可能にする強力なAPI（Application Programming Interface）がHTML5に用意されているためです。これらのファイルAPIを活用することで、Webアプリケーションはファイルやディレクトリの読み取りはもちろん、デスクトップからブラウザへのドラッグ＆ドロップ操作にも対応できます。ローカルファイルへのアクセ

  4. 【PHP】レイアウトのデフォルトのメタタグを、ビューごとのカスタムメタタグで上書きする方法

    メタタグとは？ メタタグ（metaタグ）は、HTMLドキュメントに関する付加情報を格納するための要素です。主に以下のような情報を記述するために使われます。 ドキュメントの作成者（author） ページの説明文（description） 文字コード、キーワードなどの各種設定 SEOやSNSでのシェア表示にも影響する重要な要素のため、サイト全体では共通のデフォルト値を持ちつつ、ページごとに適切な内容へ切り替えられる構成が理想的です。 ベストプラクティス：デフォルト値を定義し、ビューで上書きする 最も効果的なアプローチは、アプリケーション側でデフォルトのメタタグを定義し、必要に応じて個々のビュ

  5. キャンバス（Canvas）データをHTML5で画像ファイルとして保存する方法

    キャンバスとは何かキャンバス（Canvas）とは、HTMLページ上に確保される長方形の描画領域のことです。この領域に対して、JavaScriptを利用することで自由に図形やグラフィックを描画できます。HTML5では、キャンバスは以下のように記述して作成します。<canvas id=canvas1 width=250 height=150></canvas>このコードを実行すると、幅250px・高さ150pxの空のキャンバス（canvas1）が生成されます。なお、キャンバスはあくまで描画領域を定義するだけで、この時点では何も表示されません。JavaScriptでキャンバス

  6. HTML5で動画を読み込み時に自動再生して無限ループさせる方法

    HTML5の<video>タグとは <video>タグは、Webページに動画を埋め込むためのHTML5の標準要素です。現在、<video>要素でサポートされている動画形式は主に3種類あり、MP4、WebM、Oggが該当します。 また、autoplay属性を指定すると、ページの読み込み完了と同時に動画の再生が自動的に開始されます。 loop属性で動画を無限に繰り返し再生する 動画をエンドレスで再生したい場合に使うのがloop属性です。loop属性はブール型（真偽値）の属性で、この属性を指定しておくと、動画の再生が終了するたびに自動的に最初から再生し直されます。

  7. AngularJSとHTML5の日付入力値 – Firefoxで読み取り可能な日付値を表示する方法

    HTML5の日付入力とAngularJSの連携HTML5の type=date 属性を持つ <input> 要素を使用すると、ユーザーはテキストボックスへの直接入力、または日付ピッカー（カレンダーUI）を使って簡単に日付を入力できます。さらに、AngularJSの ng-model ディレクティブを組み合わせれば、アプリケーションのデータとHTML入力コントロールを双方向にバインドすることが可能です。Firefoxにおける問題点ところが、Firefoxは現在 type=date をサポートしていないため、入力された値がすべて文字列として扱われてしまいます。これにより、日付をDate

  8. JSF + FaceletsはHTML4/5で使用できるのか？正しい書き方を解説

    Faceletsとは何か？Facelets（フェイスレット）は、JavaServer Faces（JSF）向けに開発されたオープンソースのWebテンプレートシステムです。FaceletsはJSFのすべてのUIコンポーネントをサポートしており、JSFアプリケーションのビューを表現する「JSFコンポーネントツリー」の構築に特化したビュー技術です。重要なポイントとして、FaceletsはXMLベースのビュー技術であるため、処理対象となるXHTMLドキュメントは整形式（well-formed）なXMLとして妥当である必要があります。この制約が、HTMLとの互換性に関する議論につながります。HTML4の

  9. HTML5動画対応：ffmpegでMP4・OGG形式に変換する設定方法

    HTML5動画に対応したffmpeg変換設定Linuxのシェル環境でffmpegを使用すれば、HTML5のvideoタグで再生可能な動画形式へ簡単に変換できます。本記事では、主要ブラウザ間の互換性を確保するための、MP4およびOGGへの変換コマンドを紹介します。MP4形式への変換（H.264 + AAC）MP4に変換する際は、映像コーデックに「H.264」、音声コーデックに「AAC」を使用することをおすすめします。IE11以前のInternet Explorerは、この組み合わせしかサポートしていないためです。ffmpeg -i input.mov -vcodec h264 -acodec a

  10. HTML5のautofocus属性の正しい書き方──autofocus="autofocus"とautofocus、どちらが正解？

    HTML5でフォーム要素に自動的にフォーカスを当てるautofocus属性。「autofocus=autofocus」と値を付けて書くべきか、それとも単に「autofocus」だけを書くべきか迷ったことはありませんか？この記事では、W3Cの公式仕様に基づいて正しい記述方法をわかりやすく解説します。 W3C仕様におけるautofocus属性の定義 w3.orgの仕様では、autofocus属性について次のように定められています。 autofocus属性はブール型（boolean）属性です。要素にブール型属性が存在する場合はtrue値を表し、属性が存在しない場合はfalse値を表します。 属性が

  11. HTMLでWebサイトのApple Touchアイコンを設定する方法

    ```html iPhoneやiPadでWebページをブックマーク（ホーム画面に追加）した際に表示されるアイコンには、「Apple Touch Icon（apple-touch-icon.png）」ファイルを使用します。あらかじめ設定しておくことで、ユーザーがサイトを保存したときに適切なアイコンが表示され、サイトの見栄えや認知度の向上につながります。基本的な指定方法Apple Touchアイコンを指定するには、HTMLのhead要素内にlink要素を次のように記述します。<link rel = "apple-touch-icon" href = "touch

  12. HTML5の日付ピッカーにはスタイルオプションがある？カスタマイズ方法を解説

    HTML5の<input type=date>で実装される日付ピッカーは、クリックするとカレンダー形式のポップアップが表示されます。表示されたカレンダーから月や年を選択するだけで、入力欄に日付を簡単に追加できます。日付ピッカーのスタイルをカスタマイズする日付ピッカーのポップアップや入力フィールドは、CSSの疑似要素を使って自由にカスタマイズできます。たとえば、背景色の変更も可能です。以下のコードを実行して、HTML5の日付ピッカーにスタイルオプションを追加してみてください。::-webkit-datetime-edit { padding: 1em; } ::-webkit-dat

  13. HTMLページの読み込み時にテキストボックスへカーソルを自動で置く方法（autofocus属性の使い方）

    Webフォームを使う際、ユーザーにいちいちテキストボックスをクリックさせずに、すぐ入力を始めてもらえたら便利ですよね。そんなときに活躍するのが autofocus属性 です。autofocus属性とはautofocus属性は、ページが読み込まれた時点で指定した入力要素に自動的にフォーカス（カーソル）を移動させるためのHTML属性です。この属性は論理属性（Boolean属性）であり、記述するだけで有効になります。値を指定する必要はありません。autofocus属性を <input> 要素に付与すると、そのページが表示された瞬間に該当するテキストボックスへカーソルが自動的に配置されます

  14. HTML5 Canvasをマウスカーソル位置を基準にズームする方法

    Canvasのスケーリングは原点が基準になるHTML5のCanvasは、常に現在の原点（デフォルトでは [0, 0]）を基準として拡大・縮小されます。そのため、マウスカーソルの位置など、別の点を基準にズームしたい場合は、あらかじめ原点を移動しておく必要があります。原点を任意の座標に変更するには、translate() メソッドを使用します。ctx.translate(desiredX, desiredY);これにより、キャンバスの原点（(0, 0) の位置）が指定した座標に再マッピングされます。translate() と scale() の役割translate()： キャンバス上の (0,

  15. HTMLでブラウザ間（ピアツーピア）接続を確立する方法をわかりやすく解説

    Webアプリケーション開発において、サーバーを介さずにブラウザ同士で直接データをやり取りできる「ピアツーピア（P2P）接続」は、チャットやファイル共有、リアルタイム通信などに非常に便利な仕組みです。ここでは、オープンソースライブラリ「PeerJS」を使って、HTMLとJavaScriptだけでブラウザ間接続を確立する具体的な手順を紹介します。 ブラウザ間接続を確立するまでの流れ 大まかな流れは次の3ステップです。 PeerJSライブラリをページに読み込む 自分自身のピア（Peer）インスタンスを作成する 相手のピアIDを指定して接続し、データを送受信する ステップ1：PeerJSライブ

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

    定義リストとは HTMLでは、<dl>タグを使用することで定義リスト（記述リスト）を作成できます。定義リストは通常の箇条書きリストと似ていますが、最大の特徴は各項目が「用語」と「その説明」の2つの要素で構成されるという点です。 例えば、用語集やFAQ、製品の仕様一覧など、「言葉とその意味」をセットで表示したい場合に非常に便利なリスト形式です。 <dl>タグの基本構造 定義リストは、以下の3つのタグを組み合わせて構成します。 <dl>：定義リスト全体を囲むコンテナ要素 <dt>：定義する用語（term）を記述する <dd>：用語に対

  17. HTMLのcontenteditable属性で編集可能なコンテンツを作成する方法

    HTMLでは、contenteditable属性を使うことで、要素の中身をブラウザ上で直接編集できるようにすることができます。この属性は、ユーザーがページ上のテキストを自由に書き換えられるインタラクティブなUIを実装したい場合に非常に便利です。contenteditable属性の基本contenteditable属性は、編集を許可する要素にtrueを指定するだけで有効になります。逆に、編集を無効化したい場合はfalseを指定します。実装例以下のコードは、HTMLでcontenteditable属性を実装する具体的な例です。編集可能な段落にカーソルを置くと、その内容を直接書き換えることができます

  18. HTMLでテキストを強調表示するには？emタグの使い方を解説

    HTMLでテキストを強調表示したい場合は、<em>タグを使用します。このタグは、囲まれた部分が「強調（emphasis）」であることを示すセマンティックな意味を持ち、多くのブラウザではデフォルトでイタリック体（斜体）として表示されます。 基本的な使い方 <em>タグは開始タグと終了タグのペアで構成されており、強調したいテキストをその間に記述します。ドキュメント内の任意のテキストに対して適用でき、文章中の特定の語句を際立たせるのに便利です。 コード例 以下のコードを実行すると、HTMLにおける<em>タグの実装方法を実際に確認できます。 <!DOCTYP

  19. HTML5 Canvasでダブルバッファリングを実現する方法を解説

    HTML5 Canvasとダブルバッファリングの関係HTML5のCanvasには、ダブルバッファリングを直接制御する専用APIは用意されていません。しかし、実際には多くのブラウザが内部でダブルバッファリングを行っているため、通常の描画では画面のちらつき（フリッカー）が発生しにくくなっています。とはいえ、アニメーションや複雑なグラフィックスを扱う場合には、オフスクリーンキャンバス（バッファ用キャンバス）を自分で作成してダブルバッファリングを実装する方法が有効です。オフスクリーンキャンバスを使ったダブルバッファリングの実装基本的な考え方はシンプルです。まず画面に表示されない2つ目のcanvas要素

  20. HTML5 CanvasでWebページのスクリーンショットを撮る方法【html2canvas活用術】

    Webページのスクリーンショットを撮りたいと思ったことはありませんか？実は、HTML5 CanvasとJavaScriptライブラリ「html2canvas」を組み合わせることで、ブラウザ上でページ全体、あるいは特定の要素のキャプチャ画像を生成できます。html2canvasとは？html2canvasは、Webページ全体またはページの一部をキャプチャできるJavaScriptライブラリです。ただし、実際に「スクリーンショットを撮る」わけではありません。ページのDOM情報を読み取り、その内容をもとにCanvas上にビュー（画像）を再構築する仕組みになっています。そのため、CSSのレンダリング結

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