JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2016年03月 / 02月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>04月

アクセスランキング

[ジャンルランキング]
コンピュータ
450位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
66位
アクセスランキングを見る>>

画面横幅によってviewportを分ける

久々にWEB製作関連の記事です。

最近、某CSSフレームワークとそのテンプレートを使ったWEBページのスマホ対応を行ったのですが、その中に最小横幅420pxの要素が含まれていました。具体的には横幅が420px未満の端末ではoverflow扱いの横スクロールで表示、420px以上であれば画面サイズに合わせて伸縮するという仕様です。
ここ数年でスマホが巨大化しているとはいえ、実表示領域の横幅が420pxにもなる端末はそう多くはありません。
#まあ画面解像度だけみればとっくの昔に超えていますが。。

要は、ほとんどの端末ではみ出るわけです。

というわけで、viewportの指定を使って調整することにしました。これまではおまじないのようにdevice-widthを指定してたwidthの値を、今回は少しいじってみます。

width=420にした場合、タブレット端末等で超拡大された表示になるので、見にくくなります。
それで解決として良い場合もありますが、今回はそれを避けるために少々面倒なことをします。

#そもそもviewportってなんだっけ?という方向けに念のためざっくり書いておくと、「任意の横幅の仮想的な描画領域を作って」「その仮想的な描画領域を拡大・縮小したものを、実際の端末に描画する」ことで、「画面サイズが違ってもいい感じに表示できる」という機能です。わかりにくいですね。ググるともっといい説明がたくさんあります…

はじめは、「screen.widthをとってsetAttribute/document.write」で実装しました。
しかし、ここで問題が。Android4.xではこの値が端末の実解像度になってしまう(devicePixelRatio乗じた値になる)そうです。
今回はUAで判断してどうこうという小細工は避けたかったので、もっと一般的に使える方法を検討することにしました。

その結果、window.matchMediaを使うことになりました。CSSのmediaクエリをJSから扱えるという代物で、互換性はAndroid 3.x〜、iOS5.x〜なので、今時の端末のほぼ全てに対応していることになります。

window.matchMedia - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

方法は、①width=device-widthを指定した上で、②max-widthのmediaクエリに該当するかどうかを判断する、という流れです。

コードはここまでの文章をそのまま記述したような内容です。

<meta  name='viewport'  content='width=device-width'>
<script  type="text/javascript">
(function(){
    if  (window.matchMedia && window.matchMedia("(max-width:  420px)").matches)  
        document.write("<meta  name='viewport'  content='width=420'>");
})();
</script>

#setAttributeでもいいですが、こっちのほうがちゃんと動いてくれる感じがするので(?)昔ながらのdocument.writeを使っています

あまりきれいな解決策とは言えないですね。
まあ、「工期・テンプレートの都合上どうしても」という場合にはこういう手もありだと思います。
   WEBページ制作    TB(0)    CM(0)    EDIT    ページ↑

プライバシーポリシー

ここ数ヶ月、WEBサービス・Androidアプリの企画・制作・開発・運用によく関わります。
形態は問わず、サービスを提供・改善する上で、利用状況の収集と分析というのは特に重要なことであるからにしてーということを長々語りたいわけではなく(そもそも語るネタがありません…)、そのために使う収集・分析ツールについての話です。

そのうち、Google Analyticsは最も有名なツールと言って良いと思います。このブログでも、設立直後からGoogleアナリティクスを導入していますから、もう6年以上使っていることになります。

さて、そのGoogleアナリティクスのプライバシーポリシーにこんな記載がありました。

Terms of Service | Google Analytics – Google
https://www.google.co.jp/analytics/terms/jp.html

お客様は、プライバシー・ポリシーを掲載しなければならず、プライバシー・ポリシーの中で、お客様がデータ収集のためにcookieを使用していることを告知しなければなりません。お客様はGoogle Analyticsを使用していること、およびGoogle Analyticsがどのようにしてデータの収集および加工を行うのかを開示しなければなりません。これは、(www.google.com/policies/privacy/partners/ あるいはGoogleが随時提供する他のURLにある)「お客様が当社のパートナーのサイトまたはアプリを利用する際の、Googleによるデータの使用に関して」のサイトへのリンクを目立つように表示することによって行うことができます。


要は、「Googleアナリティクスを使いたいなら必ずプライバシーポリシーを書いてね」ということです。

恥ずかしながら、この規約がいつからあったのか知らないのですが、おそらくかなり前からあったのだと思います。

ここ数年、Cookieどうこうは法廷でも話題になっていますし、個人が特定できないとは言っても「世界の誰か」の行動を追跡しているわけですから、そうした情報の取り扱いについて明確にするのは大切なことですね。

とはいえ、個人が特定できる水準の情報ではないので少し簡潔にしてありますが、以下記しておきます。

「JDBな人生」の管理人(以下「管理者」)は、本ウェブサイト上で提供するサービス(以下「本サービス」)におけるプライバシー情報の取り扱いについて、以下のように定めます。

第1.プライバシー情報
本サービスにおけるプライバシー情報とは、「個人情報保護法における個人情報」(以下「個人情報」)と、「個人情報には含まれないが、特定の個人が本サービスを利用した際に発生する履歴情報」(以下「個人を特定しない履歴情報」)を指します。

第2.プライバシー情報の収集内容と目的
本サービスでは以下のプライバシー情報を収集します。

・個人を特定しない履歴情報
個人を特定しない履歴情報のうち、本サービスの利用状況のデータとして、「利用時間」「利用頻度」「検索エンジン等の参照元・検索クエリ」「使用ブラウザ等の環境情報」といったデータ(以下「利用状況統計」)を収集します。収集にはGoogle社の利用状況収集・分析サービス(Googleアナリティクス)を利用しています。詳細についてはGoogle社へのリンクを参照してください。
収集した履歴情報は、コンテンツの最適化・コンテンツの提供方法の改善をはじめとした、当サービスの改善のために利用されます。
なお、利用状況統計のうち、利用頻度や利用回数といった「複数回にわたるサービスの利用状況」を収集するために、Cookieを利用しています。この詳細及びアプトアウトについても、Google社へのリンクを参照してください。

・個人情報
個人情報については、通常これを収集することはありませんが、記事へのフィードバック投稿(以下「コメント」)を行う際に、コメントの投稿者が公開を希望する場合にのみ、個人情報を当サービスに登録・公開することができます。その場合、投稿したコメントの内容については、投稿者が責任を負うものとします。

第3.プライバシー情報の第三者提供について
管理者が、当サービスにおいて収集したプライバシー情報を、利用者の許可なく第三者に情報を提供することはありません。
捜査機関等を対象とした例外については、本サービスの提供に利用しているFC2及びGoogleのプライバシーポリシーに準じるものとします。

第4.プライバシーポリシーの変更
最新のポリシーの本文はこの記事において公開します。なお、掲載場所・内容は予告なく変更されることがあります。

第5.お問い合わせ
万が一(?)ある場合、この記事のコメントで受け付けます。

プライバシーポリシー | FC2ヘルプ
http://help.fc2.com/privacy/tos/ja

ユーザーが Google パートナーのサイトやアプリを使用する際の Google によるデータ使用 – ポリシーと規約 – Google
https://www.google.com/policies/privacy/partners/



ということで、blockquoteタグを使うのは何か違うなあと思いながらも(CSS定義の都合で)、プライバシーポリシーっぽいものを書いてみました。何か不備があればぜひ教えて下さい。


関連して、近頃の「プライバシーポリシー」や「利用規約」について、ちょっとした考察のようなものを書いてみたいと思っています。(規約読んでなかったお前が偉そうなこと書くなよ、って感じがするのは気にしない…)

暖かくなってきたと思ったらまた急に寒くなってきましたが、インフルなどつかまえないよう気をつけたいですね。
ではでは。
   最近考えていたこと    TB(0)    CM(0)    EDIT    ページ↑

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。