CSSでランダムボタン
CSS Programing Advent Callendar 2012 の15日目です。
日をまたいでしまい申し訳ないです。
カレンダーには乱数と書きましたが、乱数は言い過ぎですね。CSSだけでもランダムな結果を返すボタンを作ることができます。
これを利用してCSSおみくじを作りました。
そして以下が解説用のサンプルです
ご覧ください。
ランダムボタンというのは透明のlabelをanimationで動かして何のラベルがクリックされるかわからないという仕組みのボタンです。
ポイントは、acitve時にanimatio-play-state: pausedにして、アニメーションを一時停止しえあげることです。
animationとかで動かしてる要素のクリックは、mousedownしてからmouseupするまでにhover状態が外れてしまうと無効になってしまうからです。
ランダムボタンを最初に思い付いたときは、クリックしずらくなる問題が解決できずにしょんぼりしてました。
しかし、この辺りのことを12日目の1026さんの記事でも触れてますが、1026さんがCSSベースボールを作ったときに、同じ問題にぶつかり、xl1さんがacitve時にanimatio-play-state: pausedするという解決策を上げ、これでランダムボタンが作れるぞととてもワクワクしました。
おみくじはとても簡易なものですが、ランダム的なことを取り扱えると、作れるものがとても広がると思いますので、意欲のあるCSSプログラマーの方は是非是非、壮大なものを作ってください!
次、16日目(現在既に16日になってしまいましたが)は negic さんです。よろしくお願いします。
xammpで複数のサブドメイン
htmlファイル、リンクとかパスを絶対パスで指定してると、
普通にブラウザで開くと正常に表示されませんよね。
だからxammpでサブドメインで設定して http://sub.localhost みたいにアクセスできるようにすればいいじゃんと思っていたんだが、いかんせん、サーバーとかApacheの知識が乏しいので、設定しようと試みては挫折してました。
で、やっとこさできたので、記念と同じ問題に遭遇した人へお送りします。
修正するファイル
hosts (Windows7だと C:\Windows\System32\drivers\etc\hosts)
httpd-vhosts.conf (xamppのディレクトリの中の apache\conf\extra\httpd-vhosts.conf)
◆hosts
hostsファイルではテスト用に使いたいテスト用のドメインをローカルに読みに行くように指定
# IPアドレス ドメイン
127.0.0.1 sub1.localhost
127.0.0.1 sub2.localhost
◆httpd-vhosts.conf
一つは指定できたのだが、複数はできなくて、そこで止まっていた。
NameVirtualHost *:80 というのを書けば、複数できたのだが、
NameVirtualHost *:80 の意味がいまいちよくわかってない。。。
NameVirtualHost *:80
<VirtualHost *:80>
ServerName sub1.localhost
DocumentRoot "D:/xampp/htdocs/sub1/html"
</VirtualHost>
<VirtualHost *:80>
ServerName sub2.localhost
DocumentRoot "D:/xampp/htdocs/sub2/html"
</VirtualHost>
Googleのウェブマスターツールについてもメモ
Googleのウェブマスターツールについての勉強会を行うので、その準備を兼ねたメモ。
ウェブマスターツールでわかること、できること
- 検索クエリ - どういった検索キーワードで表示されクリックされているか。その平均表示順位。
- コンテンツキーワード - サイト、ページ別の重要キーワード。
- サイトへのリンク - リンクしてるサイト、リンクテキスト、リンクされてるページ
- サイトマップ - サイトマップの送信
- 特定のページをGoogle検索で表示しないようにする
- 検索結果で表示するURLをwww有り無しかの統一
- titleタグとmeta descriptionが適切かどうかの簡単な診断
- +1絡みのこと
等々です。
大事そうなものをピックアップ。
◆検索クエリ - どういった検索キーワードで表示されクリックされているか。その平均表示順位。
SEOに大事な基本的な情報が得られます。Googleアカウントにログインした状態での検索はSSL通信がデフォルトになり、GAでは検索キーワードを取れないので、Googleでの検索され状況を知るにはこちらの方が正確かもしれません。Yahoo JapanはGoogle検索ですし。あと、シンプルですしね。サイトがGoogleにどう認識されてるのかを知るにはウェブマスターツールです。
◆コンテンツキーワード - サイト、ページ別の重要キーワード。
キーワードを重要度順で見れる。重要度は単純にhtmlに埋め込まれてるか機械的な印象。参考になるかどうかわからないし、どう参考にすればいいかわからない。株式会社ホゲホゲという会社名がフッターに入ってたら株が重要キーワードとして認識されたりする。adobeフラッシュのためのバナーとかあったらadobeが重要キーワードになってたりする。keywordsとかに入れてるキーワードはもちろん出てこない。
◆サイトへのリンク - リンクしてるサイト、リンクテキスト、リンクされてるページ
リンクしてるサイト、リンクされてるコンテンツのURLがわかる自分のサイト、他のサイト含めて、どういったテキストでリンクされてるのかわかる。
サイトマップの送信は、GoogleにコンテンツのURLを適切に知ってもらうためのもの。Googleにインデックスしてもらうのは最初の最初の一歩だが、適切なナビゲーショのあるサイトなら、ウェブマスターツールに登録とGoogleによる自主的なクロールで十分な気が。
確実にサイトマップ登録した方がいい場合は、主要ナビゲーションがフラッシュやJSで生成していてクロールされない場合とか、リンクされてないパラメーターなURLを検索結果に表示させたいとか、毎日更新されてそれを検索結果に即座に反映させたいコンテンツがある場合とか。かな。
ajaxzip3のIEでの文字化け対策
記事がすごくわかりづらいので古いIEで文字化けしない対策を書いとく
b.setAttribute("src",a);b.setAttribute("charset","UTF-8");
↓
b.setAttribute("charset","UTF-8");b.setAttribute("src",a);
ajaxzip3というのはフォームで郵便番号を入力すると自動的に住所を埋めてくれる奴です。
http://code.google.com/p/ajaxzip3/
これのいいところは郵便番号データはこれを配布してる人が管理していて
jsonでそこから取ってくるので、郵便番号データを最新にする等のメンテが不要というものです。
ちなみに僕はこちらよりも
jQuery.zip2addr https://github.com/kotarok/jQuery.zip2addr
をオススメします。
こちらはajaxで外部からデータを持ってくる点では同じなのですが、
Google 日本語APIを使って郵便番号を投げると住所を返してくれるのを利用しているのです。
まずその方法が賢いし、ajaxzip3よりGoogleの方が永続的に使える可能性が高そうです。
jqueryが必要ですが。
で、ajaxzip3でIEだと文字化けするというバグがありますので、その現象と原因と回避策を。
◆現象
utf-8以外のページで、上三桁が同じ郵便番号を入力した場合に自動入力される住所が文字化けします。
例えば
421-0422 → 静岡県牧之原市静波
の次に
421-0421 → 文字化け
という感じです。同じ郵便番号でも文字化けします。
◆原因
文字コードが異なるjsを読み込むときはscriptタグにjsの文字コードを指定します。
<script type="text/javascript" src="hoge.js" charset="UTF=8"></script>
こんなふうに。こうしないと日本語を扱ってる場合は文字化けしてしまいます。
ajaxzip3でもちゃんとcharset属性をしていしてjsonを読み込んでいます。
実際、他のブラウザでは問題は起こりません。
IEの場合はキャッシュ時に文字化けが起こります。
キャッシュ時はcharset属性を認識してないっぽい。
◆解決
こういう問題が起こるのは、
たぶんIEの場合は src="hoge.js" を認識した時点でキャッシュがある場合は
それ以降の属性を読み込まない?、少なくともcharset属性で指定した文字コードを無視して
そのページの文字コードとしてjsを読み込んでしまう。
なので
<script type="text/javascript" src="hoge.js" charset="UTF=8"></script>
↓
<script type="text/javascript" charset="UTF=8" src="hoge.js"></script>
こんなふうに文字コードを先に指定してあげると、文字化けしないです。
ajaxzip3の場合はjsonを読み込むためにscriptタグを挿入するところを
b.setAttribute("src",a);b.setAttribute("charset","UTF-8");
↓
b.setAttribute("charset","UTF-8");b.setAttribute("src",a);
こんなふうに書き換えてあげると、文字化けは起こりません。
◆p.s.
IEではimgタグでキャッシュがある場合はloadイベントがスルーされるのバグ?仕様?と似てる気する。
img.src = src;
img.load = callbak; // キャッシュがあるとcallbackが呼ばれない
↓
img.load = callbak;
img.src = src; // キャッシュがあってもcallbackが呼ばれる
というふうに、先にイベントハンドラ付けて上げるとスルーしない。
デザインの仕事とはクライアントと社会との接点を再確認、再検討、再発見していくこと
NHK「プロフェッショナル 仕事の流儀」でデザイナーが取り上げられていて感想というかデザインの仕事について思ったことを。
デザインの仕事というのは、クライアントと社会の接点の糸口やきっかけのようなものを紡ぎ出すこと。それは結果的には商品のパッケージだったり、チラシだったり、ホームページという成果物も生むのだけれど、その仕事や生き様のようなものが社会的にどういう位置にいるのかを(いわゆるアイデンティティという奴ですな)、クライアント自身が再確認、再発見していくのを手助けしていくと言えばいいのか。
というのは、自分だけで自分が何者であるのか、自分が社会的にどう位置付くのか人はわからないのである。一応、お客さんもいて、経営も成り立っているような会社でも、その会社が何者であるのか、案外わからなかったりする。
自社のパンフレットを作ったり、ホームページを作ったり、自分たちの顔になるようなものを作るというのは、デザイナー等が関わることのよって、自分が何者であるのかを、再確認、再検討、再発見していく絶好の機会で、そういうふうに仕事ができたらいいなと思いました。
ホームページの仕事を始めて以来、エンジニアな仕事をメインにやってきました。もちろん好きでやっているというのもありますが、正直、エンジニアな仕事に閉じこもっているという側面もあります。あります。お客さんのものを作ってしまっているので、実際は閉じこもってるとは言えないですが、気持ち的には閉じこもっているのかな。
うーむ。
あと、デザイナーや制作側のアイデンティティがどのように確立するのか気になった。
技術関係のこと書こうと思って始めたブログだけど、あんまそうじゃないから、次は頑張って技術的なこと書こう。
スマートフォンサイトについての社内勉強会的なものの資料
【目的】
スマートフォンサイトの現状や特徴を知り、どういったサイトならスマートフォン対応するのといいか、
で、どんなスマホサイト作りたいのか。とか考えられたらいい。
◆とにかくスマホ対応サイトを見てみよう!
優れたiPhoneサイトデザイン集 - iPhoneデザインボックス
好きなサイトとそのサイトのどの点が好きか良いか上げてもらう。
あとアンドロイドでちゃんと見えるかどうかも確認できるといいね。
◆スマホサイトの現状、対応方法
スマートフォン時代のWebサイト制作 第1回 スマートフォン対応の重要性とその方法 | デベロッパーセンター
- 部分的な対応
- メディアクエリーによる対応
- アプリケーションの作成
- 専用サイトの作成
に分けて、解説しているのがわかりやすい。
これまで携わった案件で、スマホ対応するといいんじゃないかと思う案件を上げれるといいな。
◆現代のIE! Android
参考記事のタイトルからするとマニアック過ぎるかもしれないが、
「はまりどころ」の項目はスマートフォンサイトを作る上での具体的で大事な要素がつまっている。気がする。
たぶんここらへんについて書いた記事は他にもありそう。
スマホ専用サイト作るのであれば、Androidに対応は避けられない ><
あと現代のIEがAndroidならIEは近代なのかな。。。。。。
◆最後に
新しいデバイス というのは新しい可能性を感じられたらそりゃいいが、
むしろそのデバイスの制限や、これまでと全然違ったことを考えなきゃいけない面倒臭ささとか
必要性を感じないとか、何かと理由を付けて避けがちだけれど、
たぶん現実はますます僕らにスマホ を突き付けてくるのではないかね。
スマホサイトに体感するために、受託じゃなくて自分らで何かサイトやサービスを作ってみてもいいかもしれんね。
あばば。