Adobe Flash PlayerやAdobe Acrobat Readerなど、HTML文書に外部の拡張機能を追加できる<object>タグ。ではそのobjectタグの子要素である、paramタグの存在についてはご存じでしょうか？
今回は、paramタグの
・【＋α】MIMEタイプとは
・paramタグの実用例
について説明します。
目次
paramタグとは
paramタグの読み方
paramタグ：（読み方）パラメータタグ
paramタグのparamは英語でパラメータを表す単語です。パラメータとは、変数のことを示します。
paramタグの説明
paramタグは、その名の通りプロパティやメソッドに変数（引数）を与える役割があります。paramタグは外部要素の埋込を行うobjectタグ内で使用されます。
つまり、objectタグに対してparamタグで引数を定義することができるのです。
paramタグは主にFlash動画の埋込で使用される要素です。指定できるname属性やvalue属性の値は、埋め込まれる外部要素によって異なっています。
paramタグで利用できる属性
paramタグでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| accesskey属性 | キーボードのショートカットの生成し、簡易なアクセスを可能にする |
| class属性 | 要素に任意の名称を与える（同じclass名を複数の要素に与えられる） |
| dir属性 | テキストの書字方向を示す ・ltr：「left to right」左から右 ・rtl：「rght to left」右から左 ・auto：自動的に書字方向を決定する |
| hidden属性 | 要素に関連性がないことを示す |
| id属性 | 要素に任意の名称を与える（同じidは使用できない：一意性） |
| lang属性 | 要素の言語を定義する |
| style属性 | 要素にCSSスタイル宣言を適用する |
| name属性 | 要素の名前を定義する |
| value属性 | その要素で表示する初期値を指定する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 1 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
paramタグの基本的な使い方
paramタグの使い方
paramタグの主な使い道であったFlash動画のサポートが終了してしまうため、今回は別の埋め込み要素での使い方をご紹介します。まずはparamタグの書き方を見ていきましょう。
|
1 2 3 |
<object data="埋め込みたい外部要素のURL" type="外部要素のMIMEタイプ"> <param name="引数の名称" value="引数の値"> </object> |
まずobjectタグで、埋め込みたい外部要素をページ内に埋め込みます。objectタグで埋め込める要素の例は以下の通りです。
✓画像
✓音声
✓PDFファイル
✓外部文書
✓Flash動画（2020年末にサポート終了のため非推奨）
埋め込みたい要素をdata属性でURL指定し、type属性では埋め込んだ外部要素のMIMEタイプを指定します。objectタグではこのdata属性かtype属性のどちらかが必須になります。
Webの世界で使用される拡張子のこと。「タイプ名/サブタイプ名」の形式で記述されます。例えばテキストは一般的な拡張子では.txtですが、MIMEタイプではtext/plainと記述されます。
汎用的な拡張子とMIMEタイプの一覧
| 種類 | 拡張子 | MIMEタイプ |
|---|---|---|
| Wordファイル | .doc | application/msword |
| 実行ファイル | .exe | application/octet-stream |
| PDFファイル | application/pdf | |
| ZIPファイル | .zip | application/zip |
| 画像ファイル | .jpe .peg .jpg | image/jpeg |
| 画像ファイル | .png | image/png |
| スタイルシート | .css | text/css |
| HTML文書 | .html | text/html |
| テキスト文書 | .txt | text/plain |
| 動画ファイル | .mp4 | video/mp4 |
paramタグの実用例
ここではparamタグとobjectタグを使用して、動画を埋め込むHTMLを作成してみました。paramタグには、コントローラーの表示をするためにnameで「contoroller」を、valueで「true」に設定してあります。
See the Pen
paramタグ 使い方 by rabbittyu (@rabbittyu)
on CodePen.
今回は埋め込み要素を設定するobjectタグに引数を与えるparamタグについて解説しました。paramタグは使用することで、objectタグで埋め込まれた外部要素の操作性を向上させることができるタグです。
2020年でFlash動画が終了してしまうため、paramタグの登場頻度は下がるかもしれませんが、objectタグではテキストや動画、音声ファイルを埋め込むことができるので、ぜひobjectタグと合わせて使用してみてくださいね。
参考文献：
HTML5における<param>タグの使い方
HTMLクイックリファレンス
MDN web docks <param>: オブジェクト引数要素
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
【HTML&CSS】動画を埋め込む方法
