JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年03月 / 10月<< 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 >>11月

アクセスランキング

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

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

画面横幅によって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サイトの引っ越し

自分が運営しているWEBサイトは三つあるんですが、そのうちのひとつのURLを変更することにしました。

今は、
「サブドメイン.ドメイン.info」
なんですが、
「サブドメイン.info」
へ変更します。

理由は、そのWEBサイトが傘下であるべきではない場所の傘下にあるからです。(説明すると面倒なので省きます)

ファイル・ディレクトリの構造は維持したまま、ホスト名だけ変更します。
301リダイレクトを使えば、検索エンジンのランク情報なんかも保持されるそうなので、それを使うことにしました。
(無駄に上位に表示されるんですよね。アルファベット3文字とスペース一つでGoogleのオートコンプリートの最上位に出ます)

.htaccessの内容
RewriteEngine On
RewriteCond %{http_host} ^前のURL
RewriteRule ^(.*) 移転後のURL$1 [R=301,L]

実は301リダイレクトを使うのは初めてだったりします。
いつもは302リダイレクトしか使わないので。(まあ当たり前と言えば当たり前なんですが)

まだDNS情報が浸透していないようなので、48時間ほど待ってから作業を開始したいと思います。

あまり関係ありませんが、ドメインの維持費って.infoで年950円かかるんですよね。今三つ所有しているので年2850円かかっています。これ以上増やさない方が良さそうです。
と言っても、どれも必要なものなんですが。
   WEBページ制作    TB(0)    CM(0)    EDIT    ページ↑

UAの情報

WEBページを作るときに何かと気にしなくてはならないクライアント側からの情報の一つとして、UAがありますよね。

特にIEとFirefoxでは処理を分ける必要があったりするので、いつもUAでチェックしています。


それでも、自分のUAなんていつも気にしませんが、自分の作ったウェブアプリケーション的なものが出すログを見ると、色々と気になるんですよね。

特に、YTBだとかGTBだとかSLCCだとか.NET CLRだとかそういうのは何かの略語っぽくて気になります。

というわけで、調べてきました。

YTB
不明(調べても分かりませんでした)

※2011年10月29日追記
「Yahoo Tool Bar」かもしれません。

GTB
Google Tool Bar

SLCC
Microsoft-Windows-Security-Licensing-SLCC
(たぶん合ってるはず)

.NET CLR
.NET Common Language Runtime

だそうです。

このGTBがグーグルツールバーだってことが一番驚きました。
そのままだし。

   WEBページ制作    TB(0)    CM(2)    EDIT    ページ↑

XHTMLのチートシート(日本語版)

おそらくアメリカに住んでいると思われる「Florian Schmitz」という人の作ったチートシートを翻訳してみました。


XHTMLCheatSheet v1.03
翻訳前
http://www.cheat-sheets.org/saved-copy/htmlcheatsheet.pdf
翻訳後
http://soft.g-c-c.info/JDB/101223HTMLCheatSheet.pdf

作者にメールで公開の許可を取ったんですが、既に別の人も翻訳していたそうで・・・。
せっかく作ったんだから公開したければしてもいいよ的なことを言われたので、公開しました。

(生まれて初めて英語でメール書きました。Google 翻訳 + 電子辞書 + 紙の辞書が必須ですね。一通書くのに何十分もかかりましたよ。相手の方も分かりやすい英文で返信してくれたので、案外Google 翻訳に頼らなくても自分で訳すことができました。)

という訳で、JDBが苦労して(あまりしてないけど)訳したこの日本語版のCheatSheet、是非印刷して使ってください。

   WEBページ制作    TB(0)    CM(0)    EDIT    ページ↑

HTMLの「contenteditable」属性

FC2 ブログの記事編集画面って、タグのハイライト機能があるんですよね。
でも、textareaって、文字色とか指定できないよなーとか思っていたら、HTMLに「contenteditable」という属性があるとわかりました。
どうやら、IE5くらいの時にできた属性だそうです。

<div contenteditable="true">テキスト</div>とすると、その部分は編集できます。

テキスト



↑文をダブルクリックしてみてください。

値は、「inherit」(親から継承)「true」(ON)「false」(OFF)です。

これはHTMLタグも適用されるので、応用すれば、色々できそうですね。


   WEBページ制作    TB(0)    CM(0)    EDIT    ページ↑

プロフィール

JDB Luigi

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

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

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。