はてなブロガーにしか見えない魔法の箱を作りました。
上の3行を魔法の箱に入れると、
次のような表示に変わります。
読者の状態によって表示が変わるトリック
あなたには赤と緑の2行だけが見えていますよね？
そんなあなたはこのブログを読者登録してくれていますね。
どうです？当たっていますか？
あたなには赤と青の2行だけが見えていますよね？
そんなあなたは「はてなユーザー」ですね。
でもこのブログの読者登録はまだのようです。
このボタン
を押すと読者登録ができますよ。
読者登録後にF5（再読み込み）をすると、ここの表示が変わります。
あなたには青の1行だけが見えていますよね？
そんなあなたは「はてな」にログインしていないようです。
あらまし
ブログに記事を書くたびに
「読者登録よろしくね。」
のようなセリフを文末に書いています。
しかし、このセリフ
既に読者登録をしてくれた方には改めて言う必要は無いことに気づきました。
そこで、このセリフと読者登録ボタンを
・ 読者登録がまだの人には表示するけど
・ 読者登録済みの人には表示しない
という仕組みを作ることにしました。
読者かどうかを見分ける
読者登録ボタンは中の文字が
・ 読者登録済みの場合は「読者です」
・ 読者登録がまだの場合は「読者になる」
と変わります。
それならば、ボタンの中の文字が現在どうなっているかどうかを調べて
表示するか・しないか分岐するような処理をJavascriptで書けば何とかなりそうです。
はてなユーザーかどうかを見分ける
はてなにログインしていない状態で
「はてなブックマーク」のボタンを押すと
「ログインしてください」や「アカウントを作成してください」
のような表示が出てきます。
このとき、わざわざその場でアカウントを作成する人なんているんだろうか？
そう思い、はてなアカウントを持っていない人に対してはブックマークボタンも消すことにしました。
はてなアカウントでログインしていないときには、
ブログの最下部に以下のようなものが表示されます。
この表示があるかどうかをJavascriptでチェックすれば判定できそうです。
応用
そういうわけで、
・ はてなにログイン中か？
・ 読者登録済みか？
を識別する技を編み出したので応用してみます。
読者登録ボタン
まずは、はてなにログイン中で、読者登録がまだの人にだけ読者登録ボタンを表示する。
下の箱の中に読者登録ボタンを表示しています。
既に読者登録済みの人には箱の中身が空になっていますよね？
はてなブックマークボタン
はてなにログイン中の人にはブックマークボタンを表示するけど、
はてなにログインしていない人に対してブックマークボタンを隠す。
ログイン中の人には下の箱の中にボタンが表示されていますよね？
ログアウト中の人にはこれが空に見えているんですよ。
ボタンを消すメリット
上図のように、本文の末尾に4つもボタンを載せてたんですよ。
・ はてなブックマーク
・ 読者登録
・ Twitterフォロー
・ ツイート
そこへさらにブログ村のボタンも置きたくなりました。
ボタン4つだけでもかなりうるさい感じがするのに
ボタン5つはさすがにごちゃごちゃし過ぎだろうと。
たとえば、ボタンが100個並んでたらどこに何があるか分からないですよね。
基本的にボタンの数が少ない方が1つ1つが目立ちます。
そこで、消せるものは消した方がいいだろうということで
今回はスクリプトを書いてみました。
Javascript
ちなみに、ボタンやテキストを消すのにJavascriptを使っているので、
Javascriptがオフに設定してあると、隠した部分が丸見えになってしまいます。
Wikipediaの調査によるとJavascriptをオフにしている人の割合は5%。
95%の人には正常に表示されているはずなので、まあいいやと思っています。
Javascriptって何？という人は、たぶん設定をいじっていないだろうからONになっています。
まとめ
CSSとJavascriptを使うと画面の表示を動的に変化させることができます。
今回は、読者登録がまだの人にだけボタンを見せる仕組みを作ってみました。
誰でも使えるような仕組みにしたので
明日はこのテクニックの使い方を説明しようと思います。
「はてなブロガーにしか見えない魔法の箱を作ってみた【JavascriptとCSS】後編」に続く
toeicmanten.hateblo.jp
お知らせ
最後までお読みいただきありがとうございます。
この記事は参考になりましたか？
役に立ったという方はブックマークをお願いします。
読者登録は以下のボタンから
Twitterでこの記事を書いた人をフォローする場合はこちら
Follow @toeicmantenblog
この記事をツイートする場合はこちらからお願いします。
Tweet
ブログ村ランキングにも参加中。
ブロガーさんには以下のシリーズ記事もおすすめです。
