CSSテクニカルノート

サイトを統合しました

2011-11-10T21:18:00.000+09:00

サイトを統合しました。

今後は、技術的な話は、http://taro-utsumi.com/techmemo/　に掲載する予定です。
よろしければ、ぜひそちらも御覧ください。

Google Analyticsの基本的な用語

2010-10-30T00:49:00.000+09:00

すごく簡単なことですが、まずは基本から。

セッション
「のべ訪問者」のこと。サイトの来訪者、つまり、サイトを訪問するお客様の数と考えてよい。ブラウザでサイトのページを開いてから、他のサイトに行くまでが1セッション。ブラウザを閉じるか、何もせずに30分たった場合も、セッションが終了する。
ユニークユーザー
純粋な訪問者の数。ブラウザに発行するクッキーの数がユニークユーザーとなるため、クッキーの履歴をクリアしたり、ウィルス対策ソフトがクッキーをクリアしたりすると、数が増えてしまう。セッションとの違いがややこしい。
ページビュー
ページをブラウザで閲覧した合計の回数。Google Analyticsの場合は、キャッシュに保存されたページを開いてもきちんと数えることができる。
コンバージョン
サイト上の目標を設定しておき、その目標の行動にユーザーが到達した数を計測する。Google Analyticsは、プロファイルごとに20個まで設定できる。
サイト上のURLを目標に設定する方法が一般的だが、「_trackPageview 関数」のトラッキング関数も、目標になるため、ダウンロードした数や送信ボタンをクリックした数を目標にすることもできる。また、セッション内で閲覧したページ数（到達ページ数）と、閲覧時間をそれぞれ目標に設定できる。

しかし、「_trackPageview 関数」は勉強しないとよく分からない。
直帰率
Google Analyticsの場合、1ページだけ見て他のページを見なかったユーザーの数やその割合。割合の場合、母数は、「閲覧開始のセッション数」になる。この場合、閲覧した「時間」（ページ間のインターバル）が、計測できないため、閲覧時間は便宜的に「0秒」として計測されている。平均滞在時間を見るときには、アドバンスセグメントを使って切り分けた方が良さそう。
滞在時間、閲覧時間
ページを見た時間は、正確には計測できない。あくまで、ページを移動した場合に、ページ間のインターバルを計測する仕組みになっている。そのため、直帰のページと最後の離脱のページは、時間が計測できないらしい。直帰は「0秒」としてカウントしている。

Bloggerテンプレートデザイナーという黒船が持って来るもの

2010-06-25T10:22:00.000+09:00

Bloggerに新しく追加された「Bloggerテンプレートデザイナー」という機能がすごい。

WYSIWYGもここまで来たのかという感じ。

Blogのデザインをほとんどマウスクリックのみで決めることが出来ます。

こんな感じ。

テンプレートを選んで・・・

フォントなどの色を決めて・・・

幅なんかもマウスドラッグでOK。

で、右上にある適用ボタンを押す。

それだけ。

今回、この記事を書くにあたってデザインを変えてみたけど、
スクリーンショットを撮りながら変えても数分でした。

これはすごい。

ただ、これは英語圏のCMSだと最近いくつか見られるようになってきていて、
問題はこれが日本語化されているということ。

HP制作で業をなしている人たちは、この波にどう向き合うか考えないと呑まれるなと感じます。
でも、逆にビジネスチャンスでもあるんだけどね。

xamppでMovable type4を動かす

2010-03-01T22:05:00.000+09:00

Windows XP環境で、xampp1.7.1でMovable Type4.25を動かしてみた。
(ver.が中途半端なのは抱えている案件によるもの。
Web系ライトウェイト言語を使った物は、枯れた物を使った方が良いってばっちゃが言ってたｗ)

所要時間は40分ほど。

まず、普通にphpmyadminでデータベース作って、
xampp内のhtdocsフォルダにmtをつっこんでみても、
perlが動かないと怒られてしまったので、

xamppでPerlを動かす手段を調べてみることに。

そうすると、xammppアドオンのPerlよりも
ActivePerlの方がPPM(Perl Package Manager)がついていて良いらしいので、
そちらをインストールしてみる。

参考：Mizushima Network Service　～Perlを導入しよう～
http://mizushima.ne.jp/Windows/HTTP/ActivePerl/perl.php

ActiveState社のActivePerlのページへ行きます。
分かりにくいですが、
http://www.activestate.com/activeperl/downloads/
ここからDLできます。

環境に合わせて、32bit版、64bit版を選びましょう。

で、インストール。

ここは導入先を変更して「usr」にしておくと、Perlのパスが変わらなくて便利です。
(XamppはApacheだから)

他の設定はデフォルトのままでOK。

で、インストールします。

インストールできたら、お次は、Apacheのhttpd.confの設定を行います。

350行目を

上記のようにパスを変更するとOK。

これでPerlがXamppで動くようになります。
ただ、このままだとDBD::mysqlが認識できないとエラーが出て、
MTをMysqlでインストールできないので、PPMを使って、DBD::mysqlを入れてやります。

Perlのbinフォルダにある「ppm.bat」を起動してやるとこんな画面が出るので、
灰色のアイコンを押すと出る未インストール一覧から「DBD::mysql」を選んで右クリックでインストールしてやりましょう。

これで、正常にMTが動く環境が整いました。

あとはいつもと同じようにmt.cgiを実行してやればOKです。

参考：下記サイトが大変参考になりました。感謝！

XAMPPでMT4.25を

http://e-river.net/blog/2009/05/post_162.html

こことかばっちりはまってます。参考にさせていただきました。

Movable Typeの古いバージョンをダウンロードする方法

2010-03-01T21:41:00.000+09:00

今、抱えている案件でMovable Typeをローカルで構築しないといけなくなったので、
xamppにて環境構築してみようと思った。

が、先方のMTのバージョン確認をすると4.25と古い。

こちらの環境も同じバージョンで動かさないといけないので困ったと思って、Google大先生に聞いてみた。
(Six Apartのページにないため)

すると、movabletype.orgに開発者向けに昔のビルドがあった。

http://www.movabletype.org/downloads/archives/

ちなみに日本語版はなかったが、MTセットアップ時に日本語を選べばほとんど日本語化される。

お次は、Xampp環境でMTを動かしてみよう。

Windows上で.htaccessを作る

2010-02-24T11:01:00.000+09:00

windows上で.から始まるファイルは通常作ることが出来ないのですが、アクセス制限だったりリダイレクト処理などの設定をする際に作成の必要が出てきます。
もう既にWeb上にApacheがあればサーバー上でリネームすれば良いですが、ローカルで必要になったらエディタから(私は秀丸エディタを使いました)直接、名前を付けて保存で「.htaccess」とやれば作ることが出来ました。

お試しあれ。

phpとかRubyでサイト作っているときに妙な隙間が空いたら

2010-02-23T21:05:00.000+09:00

phpやRubyでサイトを制作しているときに、意図せず妙な隙間が空くことがあります。

brタグが余計に入っているような隙間。

ソースをながめてみても、特にそれらしい記述はないのに時折はまります。

そんなときには、HTMLファイルの形式をチェックしてみる。
プログラムと連携させるときには大抵UTF-8でやってると思いますが、UTF-８Nになってないときがある。
BOMのありなしで、妙な隙間が出現することがあるので、はまっている方はお試しあれ。

Zen-codingというものがあるらしい

2010-02-23T19:18:00.002+09:00

知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた

動画を見たけど、確かに便利そう。

Railsみたい。

HTMLとCSSは秀丸使ってコーディングしているので、
秀丸でマクロとかないか探してみようかなあ。

# 追記何人かの方が既に取り組み始めているようです。
さすが、秀丸コミュニティ。

WindowsXPの自動再起動を止める方法

2010-01-25T09:54:00.000+09:00

http://d.hatena.ne.jp/masato7/20071115

「後で」と選択しても定期的にポップアップするのが邪魔なので。

1．まず上のような窓が出てきたときに、Updateプログラムを止めるには

「後で再起動」を選ぶだけではだめで、マイコンピュータを右クリック、管理(G)から

コンピュータの管理プログラムを起動して、左側「サービスとアプリケーション」から「サービス」をクリック。右側に表示されるサービス一覧の中から「Automatic Updates」をみつけだし、右クリックして「停止」を選ぶ。これで繰り返し、うえの時限爆弾ウィルスのような窓が出てくるのをとめることができる。

その上で、恒久的に止めるには、下記が必要とのこと。

1. [コントロールパネル] の [システム] をダブルクリックして、[システムのプロパティ] ウィンドウを開きます。

2. [自動更新] タブを選択し、[更新を自動的にダウンロードするが、インストールは手動で実行する。] を選択します。

なるほど、確かにこれでポップアップしなくなった。

モバイルサイトを作るときには、画像の横幅はまだ240pxで大丈夫らしい。

2010-01-05T19:37:00.000+09:00

モバイルサイトを作ってよと言われたので。
いつもはPC用ばかり作ってるので、
得意じゃないですよと、言いつつモバイルかぁと思って、調べてみた。

最近の端末って、横幅240px超えてるものが多いけど、
画像はどこを基準に作るんだろうって気になったので。

とりあえず、softbankを除くdocomoとauのブラウザには
画像を自動的に拡大縮小する機能が備わっているみたいなので、
ロゴは240pxで問題ないとのこと。

でも、コレだと最近の携帯だと画像のクオリティが下がるので微妙だと感じるのは僕だけですかね？

長期運用前提なら、解析ツール設置して閲覧者の画面解像度のマジョリティに合わせるのがいいのかな？
モバイルサイト詳しい人にまた聞いてみよう。

IE TesterでIE8が動かない

2010-01-05T13:22:00.001+09:00

IEでの動作確認用にIE Testerを使わせてもらっているのですが、PCを再インストール後、IE8環境で起動できないことがありました。

あれ、おかしいなと思って調べてみると、

Requirement
: Windows 7, Windows Vista or Windows XP with IE7 minimum (Windows XP/IE6 config has some problems and IE8 instance do not work under XP without IE7)

とのこと。

XP+IE6環境ではIE8のエミュレーションが出来ないんだって。
というわけで、IE7をインストール。

これで、IE8が検証できるようになりました。

Google Analyticsを設置しました

2010-01-04T11:18:00.000+09:00

Bloggerって、アクセス解析付いてないのねｗ

今までココログとか使ってたので、この手の無料サービスには付いてるものだと思っていた。

チェックしたらなかったんで、Google analyticsを設置してみました。

http://www.google.co.jp/intl/ja_ALL/analytics/

特に何も迷うことなく設置できたので、説明は割愛。

触ってる最中に気づいたけど、Bloggerは外部スタイルシートじゃなくて、header内部で読んでるんだね。
単に実装の問題なのかな？
それとも、リクエスト数が減るから実は内部の方が速いとか？？

また、機会があったら調べてみよう。

Twit使わせていただきました

2010-01-02T02:19:00.000+09:00

[Twit] TwitterのつぶやきをブログやWebページに簡単に貼付けられるガジェット
http://blog.mudaimemo.com/2009/08/twit-twitterweb.html

Twitter連携もしたいよね！ってことで、使わせていただきました。

感謝。

Feedburnerに登録してみた

2010-01-02T01:45:00.000+09:00

しょぼいなりにも技術系と書くからには、
RSSもちょいと手を入れておかないといけないのかなと思って、Feedburnerを入れてみました。

更新をしたら自動的に、Twitterにもつぶやかれるそうで。

ただ、確認をしようと思っていたら、Twitterが落ちていた(苦笑)
ああ、USでは正月だもんな。そりゃ、無理かｗ

Safariでのバグめいた動き

2010-01-02T01:03:00.003+09:00

http://www.ichiro.to/CSS仕様書から外れているわけではないので、極めて正しい動きなんだけど、はまって結構苦労したのでメモ。

CSSのコードに

/* CSS Document */
@charset "UTF-8";

などと記述すると、Safari環境にて最初の宣言のみ無視されて適用されません。

全てのCSSではなく、直後の宣言一つのみが適用されないのがくせ者です。

CSS仕様書によると、文字コード宣言は何よりも最初に宣言されなければならず、その前にコメントや改行を含めていかなる文字も入ってはいけないので、safari環境で崩れたところでそれはバグではないのですが、Dreamweaver8を使っていた自分としては、
無意識に一行目にCSSですよって宣言しちゃってたわけです。

CSS Validatorはもちろん通らないし、エラーを吐くのですが常日頃から表示が崩れて困ったらValidator通す癖を付けた方が良さそうです。

Webインスペクタをにらめっこするだけじゃダメだってことですね。反省。

ちなみに同様のことを書いてくださっていて大変お世話になったページ「The Trap of Web Design」さんの「Dreamweaver 使ってて Safari チェックしてない方へ注意」ですが、

Chromeではこの現象は起こりません。
少なくとも自分が使っている4.0環境では。

参考にさせていただいたので、少しでもプラスアルファの情報提供が出来れば幸いです。

ちなみに、解決を手伝っていただいた先輩が「DW使っててSafariでCSSが効かないトラブルに遭ってる人へ」として、まとめてくれています。ありがとうございます。

Blogger Syntax Highliterを入れてみた

2010-01-02T00:52:00.001+09:00

コードなんかを書いたりするよってことで、
Blogger Syntax Highliterを入れてみた。
http://fazibear.googlepages.com/blogger.html

使い方は「クリボウの Blogger Tips」を参考にさせてもらった。
参考ページはこちら。

<html>
<head></head>
<body>

hogehoge

</body>
</html>

うむ、いい感じ。

このブログの方向性とか

2010-01-01T23:32:00.001+09:00

このブログにはCSSを中心にちょっと技術寄りのことをかいていけたらなと思います。(といっても、僕の遭遇するレベルなんてまだまだですが。)

何かありましたら、お気軽にコメントください。
よろしくお願いします。