はてなブロガーにしか見えない魔法の箱を作ってみた【JavascriptとCSS】後編

はてなにログインしているかどうか？
読者登録をしているかどうか？

この2つの状態を見極めて表示を切り替える装置を作りました。

開発までの経緯は
「はてなブロガーにしか見えない魔法の箱を作ってみた【JavascriptとCSS】」前編をご覧ください。

toeicmanten.hateblo.jp

本日は、この装置の使い方の説明です。

Follow @toeicmantenblog

仕組み
具体的な使い方
誰に見えて、誰に見えないか？
Javascriptをフッターに貼り付ける
- Javascriptをフッタに貼り付ける方法
注意
まとめ
- お知らせ

仕組み

ここでは大まかな仕組みを説明しておきます。
ポイントは３つ

ユーザーの状態は3種類
Javascriptの部品が1つ
HTMLの部品が3つ

Javascriptとは何か？HTMLとは何か？は理解しなくても大丈夫。

Javascriptのコードが1つ、HTMLのタグが3つ、
計4つの部品を組み合わせて動いているというのだけ理解できればOK。

ユーザーの状態

	ログイン Yes	ログイン No
読者登録 Yes	①	-
読者登録 No	②	③

ユーザーの状態を上記の3つに分類しました。

① はてなにログインしていて、あなたのブログを読者登録している人
② はてなにログインしていて、あなたのブログを読者登録していない人
③ はてなにログインしていない人

はてなにログインしていないけど、読者登録しているという状態は存在しないので欠番にしています。

Javascript

①、②、③の3種類の状態を識別して画面からアイテムを消すという処理をJavascriptで書きました。
それが以下のものになります。

<script>function none_for_guest(){var a=document.getElementsByClassName("none_for_guest");for(i=0;i<a.length;i++){a[i].style.display="none";}}function none_for_noreader(){var a=document.getElementsByClassName("none_for_noreader");for(i=0;i<a.length;i++){a[i].style.display="none";}}function none_for_reader(){var a=document.getElementsByClassName("none_for_reader");for(i=0;i<a.length;i++){a[i].style.display="none";}}function onload(){var a=document.getElementsByClassName("guest-footer");if(a.length){if(a[0].style.display=="block"){none_for_guest();}else{a=document.getElementsByClassName("hatena-follow-button subscribing");if(a.length){none_for_reader();}else{none_for_noreader();}}}}window.addEventListener("load",onload,false);</script>

このJavascriptのコードをどこに貼り付ければいいのか？
という具体的な話はまた後で説明します。
今回はただの登場人物紹介だと思って中身は読み飛ばしてください。

HTML

前述のJavascriptは2つのステップで動いています。
・　読者の状態を識別する
・　アイテムを消す

どこを消すか？
というのは別途HTMLのタグで指定します。

読者

① はてなにログインしていて、あなたのブログを読者登録している人

この①の状態の人にだけ見えなくするには以下の部品を使います。

<div class="none_for_reader">
111
</div>

111の部分は好きな文字に置き換え可能です。
文字だけではなく、画像でも、読者登録ボタンでもOK。

重要なのはclass="none_for_reader"と書いたタグで囲むこと。

非読者

② はてなにログインしていて、あなたのブログを読者登録していない人

この②の状態の人にだけ見えなくするには以下の部品を使います。

<div class="none_for_noreader">
222
</div>

<div class="xxx">～～～</div> のxxxの部分に何を入れるかで、誰に見えなくするかを切り替えます。

非はてなユーザー

③ はてなにログインしていない人

この③の状態の人にだけ見えなくするには以下の部品を使います。

<div class="none_for_guest">
333
</div>

具体的な使い方

「読者登録ボタン」を読者登録済みの人には見せない。
読者登録がまだの人にだけ見せる。

これを例に説明していきます。

まずは、普通に文章を書きます。

Javascriptを貼り付け

次に、HTML編集に切り替えます。
（はてな記法とMarkdownの人は切り替えなくてもOK）

HTML編集画面で文末に以下のJavascriptを貼りつけます。
（横長になっているのでスクロールして全部コピーしてください。）

<script>function none_for_guest(){var a=document.getElementsByClassName("none_for_guest");for(i=0;i<a.length;i++){a[i].style.display="none";}}function none_for_noreader(){var a=document.getElementsByClassName("none_for_noreader");for(i=0;i<a.length;i++){a[i].style.display="none";}}function none_for_reader(){var a=document.getElementsByClassName("none_for_reader");for(i=0;i<a.length;i++){a[i].style.display="none";}}function onload(){var a=document.getElementsByClassName("guest-footer");if(a.length){if(a[0].style.display=="block"){none_for_guest();}else{a=document.getElementsByClassName("hatena-follow-button subscribing");if(a.length){none_for_reader();}else{none_for_noreader();}}}}window.addEventListener("load",onload,false);</script>

HTMLタグを貼り付け

続いて、以下のHTMLタグを記事に貼り付けます。

<div class="none_for_reader">
111
</div>

divの中身を入れ替える

最後に、111となっている部分を自由に書き換えます。
111の部分と置き換えるように、読者登録ボタンを貼り付けてみましょう。

「読者になる」ボタンの設置の仕方
この記事を参考に<iframe>～～～</iframe>の部分をコピーすれば「読者になる」ボタンを本文中に設置できます。

<div>～～～</div>の間には何行でも書いてOK。
読者登録ボタンだけでなく、「読者登録してね」のような文章を添えます。

Javascriptは１つだけ、divはいくつでも

<div>～～～</div>の部分は何個でも同時に使えます。
その場合でもJavascriptは1回だけ書けばOK。

また、<div>～～～</div>とJavascriptは並べて置かなくても大丈夫。
<div>～～～</div>がJavascriptより前にあっても、後ろにあってもOK。
<div>～～～</div>とJavascriptの間に別の文章が挟まっていても関係なく動きます。

ちなみに、「HTML編集」から「見たまま」モードに戻すと、Javascriptの部分は見えなくなります。
<div>～～～</div>の部分も
中身だけが見えて、タグの部分は見えなくなります。

誰に見えて、誰に見えないか？

○○にだけ見えない

	ログイン Yes	ログイン No
読者登録 Yes	① none_for_reader	-
読者登録 No	② none_for_noreader	③ none_for_guest

下の部品を使った場合、111の部分が①の人には見えなくなります。
逆にいうと、②と③の人には111の部分が見えます。

<div class="none_for_reader">
111
</div>

<div class="xxx">～～～</div> のxxxの部分にどれを入れるかで、誰に見えなくするかを設定することができます。

特定の人にだけ見えなくする場合、
xxxの部分に入れるのは以下の3パターンがあります

none_for_reader
none_for_noreader
none_for_guest

○○にだけ見える

	ログイン Yes	ログイン No
読者登録 Yes	① none_for_reader	-
読者登録 No	② none_for_noreader	③ none_for_guest

読者登録済みの人だけでなく、
ログインしていない人にも読者登録ボタンを見せなくてもいいかな。
そう思った場合は以下のような書き方をします。

<div class="none_for_reader none_for_guest">
1と3
</div>

<div class="xxx">～～～</div> のxxxの部分に
none_for_readerとnone_for_guestの2種類を書けば、①の人にも③の人にも見えなくなります。
つまり、②の人（ログイン中で読者登録がまだの人）にだけ見えます。

特定の人にだけ見せる場合、
xxxの部分に入れるのは以下の3パターンがあります

none_for_reader none_for_noreader
（①と②の人には見えない、③の人だけ見える）
none_for_reader none_for_guest
（①と③の人には見えない、②の人にだけ見える）
none_for_noreader none_for_guest
（②と③の人には見えない、①の人にだけ見える）

活用方法

わたしはSNSボタンを整理するのに使っています。

それ以外にも、読者限定の情報を公開したりするとおもしろいかもしれません。

Amazonのセール情報
競馬の重賞予想
ブログの収益報告

<div class="none_for_noreader none_for_guest">～～～</div>を使うと、読者登録した人にだけアイテムの中身を見せることができます。

Javascriptをフッターに貼り付ける

<script>function none_for_guest(){var a=document.getElementsByClassName("none_for_guest");for(i=0;i<a.length;i++){a[i].style.display="none";}}function none_for_noreader(){var a=document.getElementsByClassName("none_for_noreader");for(i=0;i<a.length;i++){a[i].style.display="none";}}function none_for_reader(){var a=document.getElementsByClassName("none_for_reader");for(i=0;i<a.length;i++){a[i].style.display="none";}}function onload(){var a=document.getElementsByClassName("guest-footer");if(a.length){if(a[0].style.display=="block"){none_for_guest();}else{a=document.getElementsByClassName("hatena-follow-button subscribing");if(a.length){none_for_reader();}else{none_for_noreader();}}}}window.addEventListener("load",onload,false);</script>

上記のJavascriptコードをフッタに貼り付けておくと全記事に対して今回の装置が作動します。
そのため、本文中にJavascriptを貼り付ける作業を省略できます。

1記事だけ試してみるときは、Javascriptを本文に貼りつける。
今後も毎回使ってみようという人は、フッターにJavascriptを貼りつける。
そういうふうに使い分けてみて下さい。

Javascriptをフッタに貼り付ける方法

はてなブログ管理画面　＞　デザイン

はてなブログの管理画面から
デザイン　＞　カスタマイズ（スパナアイコン）　＞　フッタ
と選択していきます。

そして、フッタの入力欄に前述のJavascriptを貼りつけます。
最後に、「変更を保存する」ボタンを押せばSave完了です。

注意

画面の中に特定の表示があるかどうかをJavascriptで判定しています。
そのため、使用中のテーマによってはうまく動かない場合があります。
（「読者登録ボタン」や「はてなブログをはじめよう」の表示の仕方を変更するようなテーマだと機能しない）

テーマというのは
はてなブログ管理画面　＞　デザインでブログ全体のデザインを選ぶやつです。

読者かどうかの判定

プロフィールの部分の読者登録ボタンを基準に読者登録済みがどうかを判定しています。
プロフィールの部分に読者登録ボタンを表示していない人は
今回のJavascriptコードはうまく機能しません。

ログイン中かどうかの判定

はてなブログの元々のシステムとして、
ログインしていないときには画面の一番下に「はてなブログをはじめよう」と表示されます。

・　この部分が非表示になっている場合は、ログイン中。
・　この部分が表示になっている場合は、ログアウト中。
という判定をしています。

そのため、はてなのシステム自体が大幅リニューアルして
「はてなブログをはじめよう」の部分が根本的になくなったりしたら
今回のJavascriptは機能しなくなる可能性があります。

レスポンシブデザイン

今回のJavascriptでは「読者登録ボタン」や「はてなブログをはじめよう」の部分をチェックしています。
そして、スマホ表示だとこれらの部分が無い場合があります。

その場合は今回のJavascriptのコードを使うと
パソコンで見た時は表示を消したりできるけど、
スマホで見た時は表示が消えないという状況になります。

そんなときは、はてなブログ管理画面　＞　デザインで
「レスポンシブデザイン」にチェックを入れましょう。

レスポンシブデザインにするとスマホの画面でも
パソコン版と同じ「読者登録ボタン」や「はてなブログをはじめよう」の表示になります。
つまり、スマホでも今回の仕組みが動作します。

パソコンとスマホで同じデザインを使用することをレスポンシブデザインと呼びます。
レスポンシブデザインはGoogleも推奨していて、レスポンシブにした方が検索順位があがると言われています。
そのため、今回のJavascriptを使うかどうかとは関係なく、とりあえずレスポンシブにはチェックを入れておいた方がいいです。

まとめ

<script>function none_for_guest(){var a=document.getElementsByClassName("none_for_guest");for(i=0;i<a.length;i++){a[i].style.display="none";}}function none_for_noreader(){var a=document.getElementsByClassName("none_for_noreader");for(i=0;i<a.length;i++){a[i].style.display="none";}}function none_for_reader(){var a=document.getElementsByClassName("none_for_reader");for(i=0;i<a.length;i++){a[i].style.display="none";}}function onload(){var a=document.getElementsByClassName("guest-footer");if(a.length){if(a[0].style.display=="block"){none_for_guest();}else{a=document.getElementsByClassName("hatena-follow-button subscribing");if(a.length){none_for_reader();}else{none_for_noreader();}}}}window.addEventListener("load",onload,false);</script>

上記のJavascriptコードを「フッタ」もしくは記事本文に貼り付ければ下準備が完了。

<div class="none_for_reader">
ここに文章を書く
</div>

上記のような<div>タグで囲んだ部分は特定のユーザーからは見えなくなります。

none_for_readerの部分に何を書くかで、誰に見えて誰に見えないかを調整できます。

お知らせ

最後までお読みいただきありがとうございます。

この記事は参考になりましたか？
役に立ったという方はブックマークをお願いします。

読者登録は以下のボタンから

Twitterでこの記事を書いた人をフォローする場合はこちら
Follow @toeicmantenblog

この記事をツイートする場合はこちらからお願いします。
Tweet

ブログ村ランキングにも参加中。

ブロガーさんには以下のシリーズ記事もおすすめです。

にゃん分間待ってやる

「文章の書き方」や「アクセスアップ」などブログ運営のテクニックを解説。