フィーチャフォンとデスクトップとで適切な画像を与えるには

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有

FC2 ブログはデスクトップ・コンピュータやスマートフォンだけでなく、フィーチャフォンでも閲覧可能になっております。

  • まぁ、フィーチャフォン文化が長く続いた日本なら常識ですけどね。

ここでは、FC2 ブログで、デスクトップ・コンピュータやスマートフォンとフィーチャフォンとで埋め込みたい画像を変えたい場合にはどうするかを解説します。

自分で契約したサーヴァを画像倉庫として使うなら、いろいろなやり方が出来ます(私もそうしております)。

ただ、そう言うやり方は誰でも出来るものでもありません。

ここでは、誰でも出来るであろう方法として、FC2 ブログが提供している画像ストーレジだけでも出来る方法を解説致します。


はじめに

FC2 ブログが提供している画像ストーレジは、フィーチャフォンに対して最適化して画像を配信しているようですが、より細かな対応をしたいと思う場合もあるでしょう。

例えば、

  • フィーチャフォンには高圧縮低解像な画像、それ以外には低圧縮高解像な画像を使いたい。
  • フィーチャフォンには静止画像、それ以外にはアニメーテッド画像を使いたい
  • フィーチャフォンには GIF 画像、それ以外には フルカラーの PNG 画像を使いたい

    • フィーチャフォンは PNG 画像に対応していない機種があります。

等です。

このように、全く異なる画像をメディア毎に振分けたい場合、FC2 のストーレジでの変換機能では不十分です。

スマートフォンの普及でフィーチャフォンでのアクセス数は確かに大幅に減りました。

それでも、平成28年 3月10日現在、フィーチャフォンが切捨てても構わないほど減少したとは言えません。


<object>要素を使う

<object>要素で、フィーチャフォンとその他の端末に対して配信する画像を振分ける事が出来ます。


概要

FC2 ブログでのフィーチャフォン向け配信サーヴィスでは、<object>要素の開始・終了タグを取除きます。

このため、フィーチャフォンでは<object>要素はキャリアを問わずその内容だけが有効となります。

以上より、

  • デスクトップ・コンピュータ及びスマートフォン向けには<object>要素で画像を埋込み、
  • フィーチャフォンに対しては、当該<object>要素内に置いた<img>要素で画像を埋込む

と言う方法で対処が可能になります。


補足

ご承知の通り、<object>要素は画像以外にもあらゆるリソースの埋込みが出来ます。

このため、フィーチャフォンには画像を配信するが、デスクトップ・コンピュータやスマートフォンには画像ではなく

  • 動画
  • フラッシュ
  • 他の HTML 文書

を埋込む事も可能です。

特に他の HTML 文書を埋込む事で、FC2 動画, ユーテューブやニコニコ動画等の埋込も可能でしょう。

ただ、画像以外を埋込む場合、以下の点も考慮しましょう:

  • 動画なら<video>要素で埋込んだ方が良いでしょう。
  • フラッシュなどはスマートフォンやタブレット端末では扱えません。
  • また、HTML 文書なら<iframe>要素の方が便利でしょう。

更に言えば、<object>要素は入れ子にする事で、複数のリソースを優先順位を付けて指定する事も出来ます。

この場合、最も優先順位が高いものを外側にする事となります。

勿論、<iframe>要素や<video>要素などと組合せて入れ子にする事も可能です。

これらの要素の開始・終了タグはフィーチャフォン向けには尽く削除されるので、一番内側になる内容だけがフィーチャフォン向けに配信される事になります。


具体的な方法

具体的には、以下のようにします:

<object type="【画像の MIME タイプ】" data="【デスクトップ等向け画像への URL】" width="【横幅】" height="【高さ】">
    <img alt="【代替テキスト】" src="【フィーチャフォン専用画像への URL】" width="【横幅】" height="【高さ】" />
    </object>

詳細

この時、

  • <object>要素では、src 属性の代わりに data 属性で画像への URL を与える事
  • type 属性で画像の MIME タイプを与える事

に注意してください。

画像の場合、MIME タイプは image/画像形式名 となります。

具体的には、以下のようになります:

GIF 画像
image/gif
JPEG 画像
image/jpeg

尚、これらの画像については、いずれも FC2 ブログで提供している画像ストーレジを利用しても全く問題はありません


注意


旧式の IE では巧く行きません

<object>要素はインターネットエクスプローラ 7.0 まででは巧く処理出来ません。

でも、

  • 流石にこれらの環境は切捨てられる程度に減っていると思われる事
  • これらの環境でも全く見られない訳ではない事

から、余り気にしなくても良いでしょう。


余り細かい指定は出来ません

この方法は、上述の通りインターネットエクスプローラ 7.0 までを除いて有効に機能する筈のものです。

ただ、デスクトップ・コンピュータやタブレット端末とスマートフォンでの振り分けが出来ない欠点はあります。

タブレット端末やスマートフォンの場合、使用パケット数に上限のある回線プランを利用している方も多いでしょう。

そう言った方を考えると、余り重い画像を与えるのは考えものでしょう。


レスポンシヴ画像を利用する

ブラウザ側が適切な画像を選択するレスポンシヴ画像を活用する方法です。

この方法は、平成28年 3月10日現在、

  • インターネットエクスプローラ 11 まででは未対応
  • サファリ(OSX 及び iOS)でも次期版まで未実装
  • アンドロイド端末向けブラウザでも最新版でのみ実装

と言う状況なのでまだまだ時期尚早と言えます。

ただ、対応していない場合でもフィーチャフォン向けの画像が埋め込まれるだけで実害はない筈です。

ですから、アーリー・アダプションが好きな方はやってみても良いかも知れません

レスポンシヴ画像には、以下の二つの方法があります:


<picture>要素

<picture>要素を用いる事で、対応環境では適切な画像を選択してもらう事が出来ます。

この場合、内容としては以下のようにします:

  1. 代わりに使う画像を指定する<source>要素を零個以上
  2. フィーチャフォンなど向けの<img>要素

対応していない環境では、内容となる<img>要素が適用されます。

FC2 ブログのフィーチャフォン向け最適化機能でも、

  • <picture>要素
  • <source>要素

関連のタグは除去されるでしょう。


<img>要素の新属性

<img>要素に新たに導入される予定の、

を与える事で、対応している環境ではこれらの属性を活用して適切な画像を取扱えるようになります。

勿論、フィーチャフォンではこれらの属性は無効となります。

関連記事
スポンサーサイト