グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

Twitterボタンなどで使われている「data-count="***"」や「data-lang="***"」などの属性。
なんだろうと気になっていたのですが、HTML5で追加されたカスタム属性だそうです。

HTML5では、タグに独自の属性を記述することができます。
例えば
<img src="***" data-url="***">
<a href="***" data-text="***">
のように、
「data-***=」の形式であれば自由につけられます。

JavaScriptなどで使う独自の値をタグに持たせたいときに、
HTMLの仕様内でできるのでとても便利！です。

こちらで詳しく書かれています。

■havelog
HTML5では、data-* の書式でカスタム属性 ( Custom Data Attribute )を定義できるらしい

複数のマーカーを設置したマップを作成できる、Googleマップの「マイマップ」機能。
先日作成してIE8で確認したところ、真っ白い画面が表示されるばかりで地図が見れませんでした。

http://news.mynavi.jp/news/2012/09/18/010/index.html

上の記事によると、少し前になりますがGoogle AppsのIE8対応が終了したそうで、
そのためにマイマップが見れなくなっていたようです。

ちなみに旧バージョンのマイマップであればIE8でも見れます。
結局新旧を出し分けて対応しました。

first-childは、IE8でもきくのですが、
nth-child(n)はきかないのですよねー。
これが使えたらすごく便利なのに。

ということで調べてみました。
いろいろ適応させる方法はあるようなのですが、使いたい部分がサイトの共通部分で
その案件が、大きめの案件で既に納品しているページもあったので
ヘッターの記述に新たに何か追加したくなかったことと、
はずかしながら、自分はjsの理解度が低いので、CSS内で解決という条件で探しました。
下記ページのハックが簡単でわかりやすかったです。

CSS: Internet Explorer 7-8 nth-child hack

これを
------------
.test ul li:nth-child(3){
background: yellow;
}
------------

こう書く
------------
.test ul > *:first-child + * + * {
background: yellow;
}
------------

「+ *」の数を増やして調節する。
IE８でもききました。

探していて気付いたのですが、
selectタグのデザインを自由に変更できるものって意外と少ないようです。

こちらは先日の記事とはまた違うJSになります。
プルダウン後のリストまでデザインでき、さらにIE6まで対応。


CUSTOM-SELECT：セレクトボックスをカスタマイズするJS（恐らくIE6も対応）


使い方は上記のページにありますので割愛ですが、
↓こんな感じのフォームが作れます。



初期表示部分は<dt>、
プルダウン後のリストは<dd>で囲んだ<ul>・<li>リストに置き換えられるようなので、
それぞれスタイルを当てることで自由にデザインすることができます！

細かいデザイン指定がある場合などに是非。

select要素へのスタイルってFirefoxでは完全には効かないんですよね。
どうやってもデフォルトの▼が表示されてしまいやがります。
これはPCのFirefoxだけでなく、Android版Firefoxでも同じ。
-moz-appearance: none;
などと指定してもダメです、消えません。

この頑固な汚れはどうしようもないのかしら？
と思ってGoogle先生に訊ねてみると、
いくつかのForm装飾系jQueryプラグインに混じって
こんな記事が見つかりました。

CSS3でセレクトボックスをカスタマイズ

選択ボタンに見せかけたダミーのdiv要素の上に、
透過させたモノホンのselect要素を置くというもの。
そして選択した文字列はjsを通してダミー側に反映されます。
この非常にシンプルな構造のおかげで、
スマホや他のブラウザでも問題なく表示されます。
アイデアの勝利ですね、これは。

というかどうにかしてください、Firefoxさん。

グローバルメニューをssiなど、外部ファイルで管理したい時があるじゃないですか。
さらに表示してるページに対応して、メニューの状態を変えたいときあるじゃないですか。
例えば「会社情報」のページの時は、メニューにある「会社情報」だけ色を変えておきたいとか・・・
見てくれてる人に「今はこのページ開いてますよ～」となんとなくわかってもらえるようにしたいときなどにやりますよね。

メニューを1ファイルで管理している関係上、ソースに直接classやスタイルを書いておくことはできないので、そういう時はページを読み込んだあとに、javascriptでclassを追加してしまうのが良いかと思います。

先日メモリを増設したところ、Photoshop CS6でタイトルのような現象が起きました。
下のSSはファイルを開いたところで、開くこと自体はできているのですが
何も表示されません。


まっしろ。

調べてもそれらしい情報が出てこなかったためサポートに問い合わせてみました。

するとメモリ増設の件はひとまず置いておいて、挙動からグラボ関係が怪しいということで
グラフィックプロセッサーの使用をOFFにしてくださいとの案内。



↑のチェックを外したところ、見事に解決しました！

結局、メモリの増設がきっかけではあったものの、
グラフィックドライバのバージョンが古いことが原因だったようです。

ドライバを更新することでグラフィックプロセッサーも問題なく使用できるようになりました。

MTで書き出したファイルを別のドメインにアップするような場合、
http://から始まる<$mt:BlogURL$>や<$mt:EntryPermalink$>をそのまま使うことはできません。

そういうときに役立った記述をメモしておきます。


■サイトURLをルートパスで出力
<$mt:BlogRelativeURL$>

→　/blogurl/


■記事リストのURLをルートパスで出力
<$mt:BlogRelativeURL$><$mt:CategoryBasename$>/

→　/blogurl/category/

※階層数によって、<mt:ParentCategory>などを使って全ての階層を出力します


■記事のURLをルートパスで出力
<$mt:BlogRelativeURL$><$mt:EntryDate format="%Y/%m/"$><$mt:EntryBasename separator="-"$><$mt:BlogFileExtension$>

→　/blogurl/2013/07/basename.html


以上。
他にもあれば追記してきます。

BASIC認証を、階層ではなく1つのファイルに対してかける方法です。

1. 目的のファイルがある階層に対してBASIC認証をかける

2. .htaccessに手を加える
.htaccessの中は下記に近いものになっていると思います。

AuthUserFile /path/to/.htpasswd
AuthGroupFile /dev/null
AuthName "Protected Area"
AuthType Basic
<Limit GET POST>
require valid-user
</Limit>

これを次のようにタグで囲みます。

<Files sample.html>　← 目的のファイル名に
AuthUserFile /path/to/.htpasswd
AuthGroupFile /dev/null
AuthName "Protected Area"
AuthType Basic
<Limit GET POST>
require valid-user
</Limit>
</Files>

この状態でアップすれば完了。

久しぶりにJavaScriptを書いていて少し迷ったところ。
setInterval()やsetTimeout()についてです。


var sample = setInterval( intervalEvent, 1000);

例えば上記のようなsetInterval関数で、
実行する関数「intervalEvent」に引数を渡したい場合、

var sample = setInterval( intervalEvent(data1), 1000);

と普段通り書いても上手くいきません。

次のように書くことで引数を渡すことができます。


1.無名関数内で改めて関数実行
無名関数の中でなら普段通りの記述ができます。

var sample = setInterval( function(){ intervalEvent(data1); }, 1000);


2.文字列で指定
「'intervalEvent()'」と文字列での指定もできます。なので、

var sample = setInterval('intervalEvent('+ data1 +')', 1000);