その他・・・メモ的なものとかリンクとか

そのほかメモ的なものとかをこちらにまとめます。

上記はページ内リンクです。気になる項目をクリックしてチェックしてください。



PC上でアプリを動かす

スマートフォン向けのコーディングは、サイト構築にとどまらず、アプリのモック版を作ったりすることもあると思います。
アプリの開発そのものは専門の担当者が行うことが多いでしょうが、それでもHTMLコーディングでモック版を作った責任者として、実際のアプリでの表示確認をしたいこともあると思います。

とはいえ、実機を持っていなかったり、会社側のセキュリティ上のルールで個人の端末を社内に持ち込めないうえにテスト用端末の数が少なく、検証に時間がかかるということもよくある話です。

そこで、PCでAndroidアプリを動かす方法をご紹介します。

残念ながら、WindowsPC上でiOSアプリを動かす方法はないようです(正確には開発はともかく、動きを見たい程度であれば可能っぽい)。→参考
Mac端末をお持ちであれば、そちらを活用する方法をGoogle先生に訊いてみてください。

ちなみに、Windows10ではAndroidアプリやiOSアプリを動かすことができるとのうわさ・・・。
開発とまではいかなくても、動きの確認程度であれば便利そうですね。


html5におけるX-UA-Compatibleのあつかい

metaタグのhttp-equiv="X-UA-Compatible"についてですが、この資料を作った企業では、IE10が登場したあたりからcontentの値を明示して、IE7や8など古いブラウザに合わせて表示するように設定していました。
当初IE10では初期モードでFlashが表示されなかったり(ユーザがFlashに対応するモードに変更すれば表示された)、いろいろ問題があったからです。
しかし、IEも最新ブラウザを使う人が増えてきていたり、ツイートボタンの仕様が変わって古いブラウザに合わせているとボタンが表示されなくなって来たりしたので、この設定をやめることにしました。

お勤めの企業やクライアントによって、この辺りをどうするかというのはそれぞれだと思うので、それぞれの事情に合わせて適宜設定しましょう。

ちなみに、最新のレンダリングをさせるようにするには、
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
と記述します(最後のスラッシュはdoctypeによって、適宜不要であれば外してください)。
これにしておけば、使用しているIEのバージョン(にとっての最新)のドキュメントモードで表示する(レンダリングする)ようになります。

さて、ここで問題になるのは、HTML5でX-UA-Compatibleの設定は必要なのかどうかという問題です(そもそもX-UA-Compatibleの設定自体、ブラウザのバージョンを限定しないのであれば不要なのかもしれませんが)。

このあたり、世間でも判然としないという感じ・・・。まぁ、IEに対してのみの設定なので、バリデートエラーが返ってきたりもしますし、一応IEの開発は終わりになりますし、そのうち不要だよっていうのが世のトレンドになりそうですが。

Microsoft EdgeではX-UA-Compatibleは無視されるようです。
<参考>徐々に明らかになる次期 Internet Explorer の新機能 - Hebikuzure's Tech Memo


oldIE(主にIE6)でもCSS3的な表示をしたい<2016/08>

ようやく世間的にも(MS的にも)IE6がなかったことになりつつありますが、大人の事情により、IE6はじめ古いIEにも対処しなくてはならない場合もあるかと思います。
全てを叶えることは無理ですが、古いIEでも多少はCSS3的な表現を可能にする手段がいくつかあるので、ご紹介しておきます。

プラグインを使う

CSS3 PIE

IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプト(htc)です。

jsのようにhtmlの中で外部ファイルをscriptタグを使って呼び出すのではなく、cssでbehaviorプロパティを使ってhtcファイルを指定します(ルート相対パスで指定)。
使用したいhtmlファイルと異なるサーバーにhtcファイルがあると使えなかったり、背景にグラデなどのCSS3を適用させたい場合はbackgroundプロパティに-pie-つけないといけなかったり、なんかうまくいかないときはposition:relative;を追加してみたり、あんまり複雑なグラデはできなかったり、いろいろ制約はありますが、それなりの表現ができると思います。

その他類似プラグイン(詳細はgoogle先生に一任)

  • jquerycurvycorners・・・角丸だけ
  • cssSandpaper・・・transform・opacity・box-shadow・gradients・RGBa, HSL, HSLaに対応
  • css3-mediaqueries-js・・・Media Queries対応
  • ie7-js・・・透過PNG・CSS3の各種セレクタに対応、各プロパティのIEでの不具合を正常に機能(IE9.jsさえあればIE7/8にも対応するっぽい)

Selectivizr.js

古いIEでもCSS3セレクタに対応させるプラグインです。

cssは外部ファイルに記述しなければならない(styelタグ内に書いても機能しない)とか、ローカルで確認できない(要サーバアップ)といった制限があるみたいです。

透過画像対応プラグイン

古いIEだと透過画像が扱えないので、それを扱えるようにするプラグインがあります。以下が代表的なもの(と使いかた)です。

uuCanvas.js・・・html5の話だけども

HTML5のcanvasタグの互換機能を提供するjsプラグインです。canvasをVML/Silverlight/Flashでレンダリングしているらしいです。ExplorerCanvasをヒントにしているのだとか。

なお、VMLはIE10でサポートされなくなったそうです。FlashはchromeやFFなどで排除の動きがありますが、IEやEdgeではどうなんですかね・・・。というわけでSilverlightで描画させるのが妥当なのかなぁと思います(でもSilverlightも2021年10月12日にサポート終了とか言ってる・・・それまでにcanvasタグを使えないブラウザのシェアがほとんど無視できるぐらいになっていれば良いですが・・・)。

  1. uuCanvas.js(またはuuCanvas.mini.js)をwebページに読み込む。※flashで描画するときはuu.canvas.swfもjsファイルと同じディレクトリに上げておく
  2. canvasタグを記述(IDを設定)。
    canvasをVMLでレンダリングしたければclass[vml]を、Silverlightならclass[sl]を、Flashならclass[fl]を指定する(特に指定がないとSilverlightになるっぽい)。
    複数指定すると、記述順にIEで変換可能か探索するらしい。
    ※指定可能なclass名は "svg", "silverlight", "silver", "sl", "flash", "fl", "vml"
  3. scriptタグにcanvas描画に必要なコードを記述。その際canvasタグで指定したID名を以下のように関連づける。
    function xcanvas() {
    drawShape(document.getElementById('ここにID'));
    }

CSSのIE独自仕様

プラグインを使わなくても、昔からあるIE独自のCSSプロパティを使えば、なんとかなるものもあります(あの頃他のメジャーになりつつあるブラウザと互換性ないから無視されまくったあいつらです)。
たとえばfilterプロパティを使えばopacity的な表現やグラデーション、回転などに対応できます(CSS3のfilterプロパティとはまた別な話)。先にご紹介したCSS3 PIEでも使用したbehaviorプロパティもIE独自仕様です。


hack(CSS3対策ではないけど)

直接のCSS3対策ではないですが、IE特有の諸問題を解決するためやCSS3代替デザインを適用するために、その部分だけ別のCSSをあてたいときにちょっと使える便利なやつです。
ただし、これを使うとweb標準的に正しい記述ではなくなってしまったりするので、できれば使わないほうが良いです(新しいブラウザが出てきたときにトラブルの原因になることもあります)。


総合的に

まとめ的な情報です。

CSS3の範疇ではないですが・・・
html5.jsとかhtml5shivを紹介しているところもありますが、個人的には必要ないんじゃないかなぁと思っております。というか、入れてるけど使えてないサイトが結構ある・・・。
あと、条件付きコメントはIE10以降からサポートしなくなっているようなので、クロスブラウザを意識しているなら使わないほうが良いと思います。IE9以前のブラウザだけを対象にしているwebページなら良いと思いますが。


いっそ諦めるのもアリ!

古いブラウザでも(できるだけ手間をかけずに)最新のブラウザと同じように表示したいというのが、制作側の人情かと思いますが、それってそんなに大事なのか?と疑問を持つことも大切です。
プロとしてのこだわりも大事だけど、本当にこだわるところは角丸を描画することなのか?
デザインと寸分違わず表示できていることが、ユーザーが求めていることなのか?もとのデザインをユーザーは知らないけども・・・
最新ブラウザと古いブラウザの表示の違いを見比べるユーザーは世の中にどれぐらいいるのか?
古いブラウザだけ画像にしたり、プラグインを使ってみたり、そんな手間をかけた分だけユーザーに伝えたいことは伝わっているのか???

ボタンが角丸でなくても、背景がグラデーションでなくても、デザイナーさんがしっかりとしたコンセプトのもとにデザインしたwebページは十分に美しいし、みやすいし、何よりも伝えたいことがしっかり伝わっている、目的の物事にちゃんと誘導できている・・・そうであれば何が問題なんでしょうね。
なにも問題ないと思うんですけどね。

突き放して言っちゃうと古いブラウザを使っているユーザーは自己責任の範疇だとおもいます(まぁOSのバージョンがメーカーのサポート範疇だけど古くて最新ブラウザは使えないというなら突き放しちゃうのはアレかと思いますが)。
最新ブラウザでちゃんとデザイン通りに表現されていて、古いブラウザでは角丸が丸くないぐらいなら、もういいんじゃないかなーと。

プログレッシブ・エンハンスメントという考え方もあることですし。
どうせ時間をかけるなら、伝えたいことを伝えられているか、目的のところにストレスなく誘導できているかを精査したほうが良いのではないかなー。

戻る

Top