WEBデザイン・開発講義WEB Design&Development Lecture

「Apache」環境の『MIMEtype』と『htaccess』の設定

「Apache」環境の『MIMEtype』と『htaccess』の設定と「HTML5」のvideo要素の取扱い

  • WEBデザイン・開発教室用の「Apache」環境の『MIMEtype』と『htaccess』の設定とコーディック対応方法を説明する内容です。
  • 『MIMEtype』の設定は、「conf」フォルダにある「mime.types」を理解して、デフォルト設定以外の「音声系」「動画系」ファイルがある場合に、「.htaccess」ファイルを利用する。
  • 「.htaccess」ファイルの作成は、「メモ帳」ソフトを起動して作成する方法を理解し、『mod_mime』関連のディレクティブの設定方法の事例を作成します。
  • 「HTML5」のvideo要素タグについて、ブラウザ別の対応するコーディックとHTMLドキュメントでの実現方法の事例を理解します。

「Apache」環境の『MIMEtype』と『htaccess』の設定、ブラウザ別動画（video要素）対応

『MIMEtype』の設定※画像クリックで拡大表示（リンク）

  • 「MIME」データ型の種類は、
    ８つの「タイプ」が定義されております。「サブタイプ」は、具体的なアプリケーションやデータ種別となるもので、正式でないデータ形式には、「x-」で始まる独自の名称を使うことができ、企業などが自社固有のデータ形式を使う場合は「vnd.」で始まるベンダー固有の名称を使うこともできます。
    タイプ内容
    Text一般的なテキストファイルやHTMLファイル、リッチテキストなど
    Image画像ファイルで、GIF、JPEG、TIFF、PNGなど、それぞれの名前がそのまま「サブタイプ」になります
    Audio音声データで、WAVEやAUなど
    Videoビデオ・データ（動画ファイル）で、MPEGやQuickTimeなど
    Applicationアプリケーションのデータファイルで、アプリケーション独自のデータを示すときに使い、ワープロや表計算ソフトのファイルなど
    Messageメール・メッセージで、テキストとMIMEのメール両方に対し「Message/RFC822」など
    Multipartマルチパート型メッセージで、基本的なマルチパートである「Multipart/Mixed」など
    Model2Dや3Dグラフィックスのためのオブジェクト・データで、RFC2077で追加されたもの
  • 「Apache」のMIMEタイプの設定は、
    「conf」フォルダにある「mime.types」が「Apache」起動時に、初期設定ファイル「httpd.conf」の設定内容と共に読み込まれます。
    「conf」フォルダにある「mime.types」
  • 「mime.types」ファイルの設定内容は、
    ファイルの「拡張子」対して、クライアント端末に送られる「MIMEタイプ」との対応を指定します。通常は変更する必要がありませんが、「Audio」と「Video」のMIMEタイプの設定内容が多くあり、チェックしておく必要があります。
    主な【audio】のMIMEデフォルト設定は、
    主な「audio」のMIMEデフォルト設定
    主な【video】のMIMEデフォルト設定は、
    主な「video」のMIMEデフォルト設定
  • 「HTML」ドキュメントの主なMIMEタイプの一覧
    タイプ主な拡張子MIMEタイプ
    テキスト・HTML・CSS等
    テキスト.txttext/plain
    CSVテキスト.csvtext/csv
    HTML.html　.htmtext/html
    XHTML.xhtmlapplication/xhtml+xml
    XML.xmltext/xml
    CSS.csstext/css
    RSS.rss　.xmlapplication/rss+xml （application/xml、text/xml）
    画像系
    GIF.gifimage/gif
    JPEG.jpg　.jpegimage/jpeg
    PNG.pngimage/png
    SVG.svgimage/svg+xml
    TIFF.tif　.tiffimage/tiff
    アイコン.icoimage/vnd.microsoft.icon
    音声系
    MP3.mp3audio/mpeg
    AAC.m4aaudio/aac
    Ogg.oggaudio/ogg
    MIDI.mid　.midiaudio/midi
    RealAudio.raaudio/vnd.rn-realaudio
    WAVE.wavaudio/x-wav
    動画系
    MPEG.mpg　.mpegvideo/mpeg
    MP4.mp4video/mp4
    WebM.webmvideo/webm
    Ogg.ogvvideo/ogg
    QuickTime.mov　.qtvideo/quicktime
    AVI.avivideo/x-msvideo
    Widows Media Video.wmvvideo/x-ms-wmv
    スクリプト系
    JavaScript.jstext/javascript（旧式）
    application/javascript
    JSON形式.jsonapplication/json
    Perl/CGI.cgiapplication/x-httpd-cgi
    PHP.phpapplication/x-httpd-php
    VBScript.vbstext/vbscript
    アプリケーション他
    ZIP.zipapplication/zip
    Flash.swfapplication/x-shockwave-flash
    PDF.pdfapplication/pdf
    Word.docapplication/msword
    Excel.xlsapplication/vnd.ms-excel
    PowerPoint.pptapplication/vnd.ms-powerpoint
    ※上記のデフォルトのMIME対応で設定されていないのは、音声系の「AAC」「RealAudio」、スクリプト系の「Perl/CGI」「PHP」「VBScript」などがあります。他は設定されています。
    ※最新ブラウザでチェックした結果、「TIFF」画像は、IE9以降、Safariでは表示されますが、FireFox、Chrome、Operaでは表示できません。「SVG」画像については、safariが一部欠落した表示です。

『htaccess』の設定

  • 「.htaccess」ファイルの利用方法は、
    このファイルを設置したディレクトリと配下のサブディレクトリすべてに対して、「.htaccess」ファイルで記述したApacheの一部の「ディレクティブ」を有効にすることができます。但し、HTTPリクエスト処理ごとに読み込まれるため、処理速度が低下することに注意が必要です。
    • 「.htaccess」ファイルは、ディレクトリごとの設定を行ないたいけれど、WEBサーバの ルートアクセス権限を持っていない（レンタルサーバ利用等）という場合になどに限定した方が良いと思われます。
    • 「httpd.conf」でのドキュメントルートにおいて、「AllowOverride」ディレクティブの内容にしておき、「.htaccess」ファイルで制限をかけることに利用します。
    • 「AllowOverride」ディレクティブは、<Directory>セクションでのみ有効です。
    「httpd.conf」のドキュメントルートでの「AllowOverride」ディレクティブの変更内容
  • 「mod_mime」モジュールによる設定ディレクティブ
    ドキュメントのファイル名とMIMEタイプ、言語、文字セット、エンコーディングとを関連付けます。以下に主な関連ディレクティブ一覧があります。
    ディレクティブ内容例
    AddCharsetファイル名の拡張子を指定された文字セットにマップAddCharset Shift_JIS .txt
    AddEncodingファイル名の拡張子を指定されたエンコーディングにマップAddEncoding x-gzip .gz
    AddHandlerファイル名の拡張子を指定されたハンドラにマップAddHandler cgi-script .cgi
    AddLanguageファイル名を指定された言語にマップ
    例えば「xxx.doc.jp」ファイルの場合「.jp」が拡張子で、「.doc」も拡張子。    		AddLanguage ja .ja
    AddLanguage en .en
    「日本語と英語のMIME言語」
    AddTypeファイル名の拡張子を指定されたコンテントタイプにマップAddType image/jpeg jpeg jpg
    RemoveType指定した拡張子のMIME指タイプの定義を無効化RemoveType .cgi
    TypesConfigmime.typesファイルの位置指定：ディレクティブは拡張子を「MIMEタイプ」にマップするファイルを指定するために使用TypesConfig conf/mime.types
    AllowOverride.htaccess」ファイルで許可されるディレクティブの種類で、属性は「None/AuthConfig/FileInfo/Indexes/Limit/Options/All（デフォルト）」があるAllowOverride All
  • 「.htaccess」ファイルの作成方法は、
    「.htaccess」ファイルは、ファイル名なしの拡張子のみの特殊ファイルです。そのため、『メモ帳』ソフトを起動して、作成します。以下にサンプルの「.htaccess」作成方法を示します。
    • 「.htaccess」ファイルで「AddType」ディレクティブを追加するには、「AddType audio/x-aac .aac　...」等を入力します。
      『メモ帳』で「AddType」ディレクティブを追加、「AddType audio/x-aac .aac　...」等を入力
    • ファイル保存は、ディレクトリとその配下に有効化するための「user01」ファイルの保存先を指定し、ファイル名を「.htaccess」と入力して、ファイルの種類「すべてのファイル（*.*）」「文字コード：ANSI（ASCIIコード）」を選択してファイル保存すると作成することができます。
      『メモ帳』で「.htaccess」と入力、「すべてのファイル（*.*）」「文字コード：ANSI」を選択してファイル保存
    • 「.htaccess」ファイルが、「user01」ディレクトリに設置されていることを確認します。
      「user01」ディレクトリに設置されている「.htaccess」ファイルを確認
    • 「.htaccess」ファイルは、コピー＆ペースト、「サクラエディタ」等での変更更新が可能です。

『video』タグとコーディック対応

  • ブラウザ別のHTML5 video要素タグと対応するコンテナ（コーディック）
    動画のコンテナ（拡張子）MP4ogv/oggWebM
    ビデオコーディックH.264TheoraVP8
    オーディオコーディックAACVorbisVorbis
    ブラウザInternetExplorer 7/8（*）ＸＸＸ
    InternetExplorer 9～〇Ｘ△（**）
    chrome 31～〇〇〇
    Firefox 26～Ｘ〇〇
    Safari 5.1～〇〇Ｘ
    Opera 19～Ｘ〇〇
    ※（*）：IE 8以下のブラウザで表示させるには、
    『html5media』（「flowplayer」で変換して表示）と『html5shiv』（「IE8以下」のブラウザでHTML5の要素タグを変換して表示）のJavascriptを利用します。
    『html5media』→https://github.com/etianen/html5mediaからダウンロードできます。
    『html5shiv』→https://code.google.com/p/html5shiv/からダウンロードできます。
    ※（**）：『WebM Video』などのインストールが必要
    【詳細内容の参照】→https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats
  • html5ドキュメントでのvideo要素タグの記述例
    video要素タグの対応状況から、動画ファイルの拡張子である「.mp4」「.webm」の最低２種類のファイルを準備して、「video」要素内に併記すれば対応可能です。
    html5ドキュメントでのvideo要素タグの記述例
    「html5 video」のブラウザ対応チェック
  • （注）ブラウザの「Google Chrome」などで、動画の「.mp4」が起動しているが表示されずクラッシュしている場合、又は「Windows Media Player」で動画の「.ogv」と「.WebM」を表示するためには、『Xiph.org』サイトの「http://xiph.org/dshow/」から「opencodecs_ 0.85.17777.exe」をダウンロードしてインストールすると正常に表示されます。

Apache MIMEの補足説明

『MIME』（マイム）とは
「Multipurpose Internet Mail Extensions」の略で、ASCIIコード（7bit）のテキストしか使用できないインターネットの電子メールで、8ビットコードやバイナリデータ（日本語や画像）などの種々のフォーマット（書式）を扱えるように拡張した規格です。
メール本文のデータ型を示すため、「Content-Type: type/subtype; parameter」の一般的な書式で表現されます。「Content-Type: 」は、「タイプ」と「サブタイプ」をスラッシュで区切って記述し、文字コード等が必要であれば「;」で区切りパラメータ（parameter）を付加します。大文字小文字は区別しません。
例えば「Content-Type: Text/Plain; charset=ISO-2022-JP」は、通常（Plain）のテキスト（Text）の日本語JISコード（ISO-2022-JP）のコンテンツを示します。
「コーデック」とは
コーデック（CODEC）とは元々、COder、DECoderを略した言葉で、符号化（圧縮するためのエンコーダー）とそれを復元する（デコーダー）機能を併せ持つソフトウェアや機器を表す。
映像の代表的な「H.264」コーデックは、Blu-ray Disc(BDMV)、AVCHDカメラ、AVCHD-Liteカメラで利用されていて拡張子が「.mp4」 「.m2t」「 .m2ts 」「.mts」「 .mov」である。
「コンテナと拡張子」とは
エンコードされた画像データと音声データをまとめて１つの動画ファイルにする為の入れ物で、動画ファイルの場合には、この「コンテナの種類」を表すものが「拡張子」である。
AVCHDカメラで撮影した動画ファイルの拡張子は「mts」で、パソコンにコピーしても変わらないが、これを編集すると自動的に「m2ts」に変更される。しかし、画質や音質に変わりはない。
「MP4」とは
MPEG-4関連の動画・音声の記録に用いられている標準コンテナ（拡張子）で、QuickTime PlayerやWindows Media Playerなどで再生可能。パソコン、スマートフォン、携帯電話、YouTube、ニコニコ動画などで利用できる。
WEBビデオの「mp4」コンテナ = H.264（映像コーデック） + AAC（音声コーデック）です。
「ogg」とは
1つ又は複数のコーデックを格納するコンテナで、最も代表的なコーデックはビデオコーデックの「Theora」、オーディオコーデックの「Vorbis」です。
「WebM」とは
Googleが開発しているオープンでロイヤリティフリーなコンテナで、ビデオコーデックの「VP8もしくはVP9」、オーディオコーデックの「Vorbis」です。（軽量さと高品質を両立することを目標）
「AAC」とは
AAC（Advanced Audio Coding）は、音声コーデックで標準的に利用され、高解像度（HD）ビデオ（MP4のH.264動画）やデジタル放送で幅広く使用されているオーディオ形式で、従来のMP3形式を大幅に改善したものです。

Apache2.4 リファレンス

pagetopへ