nice！ボタンの設置方法大公開
nice！ボタンの設置方法大公開
先日、このブログに「nice！ボタン」という機能を追加しました。
記事を読んでくださった方が「nice！」を押すと、そのアイコンが記事の下にスタンプのように残る、という機能です。
旧SSブログを使っていた頃にあった、あの懐かしい「nice」を、シーサーブログでも再現できないかと思って作ってみました。
思った以上に温かい反応をいただきました
設置してみると、想像していた以上に温かい反応をいただきました。
記事を読んだ方が、コメント欄で「nice！です」と声をかけてくださったり、押してくださったアイコンが少しずつ記事の下に増えていったり。
そんな様子を見ていると、ブログを書いていてよかったなあと、あらためて思いました。
そして、いくつかの反応の中には「自分のブログにも同じものを付けたい」という嬉しい声もありました。
実は、どなたでも設置できます
この「nice！ボタン」は、シーサーブログをお使いの方であれば、実はどなたでもご自身のブログに設置していただけます。
ボクひとりで独占しておくのはもったいないので、設置の手順をまとめた指示書を作ってみました。
もともとボク一人だけがnice！ボタンを利用できればいい、とは思っていませんでした。
みんなが使えないと意味がないじゃないですか。
Googleのスプレッドシートと、Google Apps Scriptという簡単なプログラムのしくみを組み合わせていますが、コピーして貼り付ける作業がほとんどです。
専門知識がなくても迷わず進められるように、画面のイメージ図をたくさん添えて説明しています。
nice！ボタンを自分のブログに設置したい方はこちら↓
プログラミングの知識がなくても大丈夫
「プログラムなんて触ったことがない」という方にこそ、安心して読んでいただきたい内容にしました。
作業のほとんどはコピーして貼り付けるだけで、迷いそうな画面にはひとつひとつ図解を添えています。
所要時間の目安は20分から30分ほどで、費用は一切かかりません。
途中でつまずきそうなポイントには、困ったときの対処法やよくある質問のコーナーも用意しました。
おわりに
ブログを書く一番の楽しみは、読んでくださった方とのつながりを感じられることだと、ボクは思っています。
「nice！ボタン」が、あなたのブログにもつながりを増やすきっかけになったら嬉しいです。
興味を持ってくださった方は、ぜひ上のリンクから指示書をのぞいてみてください。
それでは最後まで読んでくださって、ありがとうございました。
この記事へのコメント
良しとします（今のところ私の手にはおえないので）
それでも難しいと思われたら、
知人や家族や、息子や孫や会社の同僚など、
どなたかパソコンがあつかえる人に
指示書を読んでもらって、やってもらってもいいです。
そんなに難しくないはずですから。
ランチでもおごれば、やってくれると思います。
今日もポチッ させていただきました。
nice!です☆
あとで、よく読んでみますね。
nice！ボタンなどあの枠のなかの大きさのことですね。
指示書のなかの一番下「よくある質問」のなかに、どこの数字をさわれば大きさを変えられるかと追記し更新しました。
閻魔大王(えんまだいおう)円応寺の笑い閻魔 に
訪問をありがとうございます。
Ｎｉｃｅ！の押し逃げで申し訳ないですが・・・。
今日の郷山は、朝から雨雲が拡がり・雨気配の空模様、午後には、雷雨の予報が・・・吹く風は、強めの南寄りで・気温が高め、蒸し暑く感じる一日に成りそうです(>¡<”！！・皆様の地方は、如何ですか？？。
まとまった時間があるときに挑戦したいと思います。
>mayuさん
>
>どういうわけか、アイコンの登録ができませんでした(>_<)
mayuさん
コメントありがとうございます。
アイコンの登録がうまくいかなかったとのこと、教えてくださって助かります。
原因を調べてみたところ、選んだ画像の種類によっては、うまく読み込めずアイコンだけ反映されないことがあるかもしれないとわかりました。
お手数をおかけしますが、もう少し詳しく状況を教えていただけますでしょうか。
・スマホとパソコン、どちらから登録されましたか？（スマホの場合、機種もわかれば助かります）
・登録しようとしたとき、何かエラーメッセージは出ましたか？
・お名前は記事の下に表示されていて、アイコンだけが丸いマーク（頭文字）のままになっていませんか？ それとも、お名前ごと何も表示されていない状態でしょうか？
・選ばれた画像は、スマホのカメラで撮った写真をそのまま選びましたか？ それとも一度保存し直した画像やスクリーンショットでしょうか？
教えていただいた内容をもとに修正しますので、よろしくお願いいたします。
ご報告ありがとうございます。
無事に登録できたとのこと、よかったです。
こちらでもシステムを確認しましたが、データに問題はなく、登録もきちんと反映されていました。
おそらく一時的な通信の不調だったようです。
もし今後同じようなことがありましたら、少し時間をおいてもう一度試していただくか、またお知らせいただければと思います。
教えてくださって、本当にありがとうございました。
GoogleアカウントはGoogleサービスにログインして使うためのアカウントです。
ログインしなくても検索やYouTube等は使えますが、アカウントを作成するとそのアカウントには、様々な情報が保存出来るようになります。
もしお持ちでないなら、
Googleのページに行って、アカウント作成をしてください。無料です。
アカウント作成したら、Googleにログインしたままで、画面の右上に点々が9個ある四角い所をクリック、そのなかの「ドライブ」というのをクリックしてください。これがnice！ボタン設定でつかう、「Googleドライブ」です。
nice！ボタン設置の設定をするには、まずはGoogleにログインしていないと作れない仕組みになっております。
ありがとうございます。
時間があるときにやってみます。
考えた事も無かったです(^^;
時間がある時に読んでみますね。
作業はすすめられたのですが、
どこかミスっているのか表示されず…
また日を改めてやってみます。
もし、トラブルやどうしてもできなかったり、わからないことがあれば、コメント欄でおしえてください。
ボクが仕事中の場合は、すぐにお返事はできないのですが、あとで返事をいたします。
十王像の一部・閻魔様右側（円応寺・閻魔堂）に
コメントをありがとうございます。
じっくり拝見します。
もう一度、設置の教科書の最初からやり直してみてください。
落ち着いて、
書いてある通りにもう一度お願いします。
ボクは、
テスト用にもう一つのシーサーブログを新規でつくって、
そのブログで本当に教科書どおりにしたらnice!ボタンを設置できるか
検証してみました。
するとほかのシーサーブログでもnice!ボタンを設置できました。
なので、教科書に書いてることをやれば、
必ず設置できるはずです。
落ち着いて、もう一度トライをお願いします。
ナイス！ボタンを押すと私の名前と共にアイコンが表示されます。
画期的な機能追加だと思います。
テスト用に作ったブログではniceボタン設置できました。
ただ文字化けしてしまっていて、こちらはnice-widget.jsの
文字コードをUTF-8に変更することで解決しました。
が、なぜか現行ブログでは表示されないままです。
現行ブログとテスト用ブログは同じテンプレートを使い、
HTMLのコードを比較しても差分はなかったので謎…。
また次の休みの日にでもチャレンジしてみます。
文字化けの件、解決できたようで良かったです！
現行ブログで表示されない件、原因が分かりました。こちらのガイドの不具合でした。すみません。
niceボタンの仕組みは、記事のURLが「/article/数字.html」という形（数字＝記事の番号）になっていることを前提に作っていたのですが、確認してみたところ、現行ブログの記事URLは「/article/2026-08-30.html」のような日付の形になっていました。この形のURLだと、これまでのコードでは「記事ページではない」と判断してしまい、niceボタンの枠自体が表示されない作りになっていました。テスト用ブログで直らなかったのも、文字化けとは別にこの問題が残っていたためです。
ガイド側を日付形式のURLにも対応するよう直しましたので、お手数ですが以下の手順でお試しください。
① ガイドのページを開き直す
いつものガイドのページ（設置手順のページ）を開き、STEP5の「ブログに貼る1行」のところを見てください。コードが新しくなっています。
② 新しいコードに貼り替える
シーサーブログ管理画面「デザイン」→「スキン設定」→「HTML編集」を開きます。
前に貼り付けた、niceボタンの1行（window.NICE_ENDPOINT=...から始まる長い1行）を探して、丸ごと削除します。
ガイドのSTEP5にある新しいコードを「コピーする」ボタンでコピーし、同じ場所（の直前）に貼り付けます。
コードの中の「【 】」で囲まれた部分を、以前と同じくご自身のGASのURL（script.google.comから始まるURL）に置き換えてください。前回設定したURLがそのまま使えますので、前に貼っていたコードの中のURL部分をコピーしてきていただいても大丈夫です。
保存します。
③ 確認
現行ブログの記事ページを開いて、Ctrl＋Shift＋R（強制再読み込み）をしたあと、コメント欄の少し上に「この記事を読んだ方」という枠が出てくれば成功です。
お手数をおかけして申し訳ありませんが、また休みの日にでもお試しいただけますと幸いです。うまくいかない場合は、またお知らせください。
大変お手数ですが、
うまく表示できない場合、指示書「ステップ⑤ブログに1行貼り付ける」をやり直してください。コードを修正し、新しいコードをアップしています。
これから設置する人は、そのまま指示書どおりに進んでください。
有難うございます
使わせていただきます
ありがとうございます。
なぜSeesaaが公式に始めないのかが謎ですよね。
まさかSo-netの特許？
原因が分かりました。同じ人のnice登録行が複数できてしまっても、それを1人分としてまとめる仕組みがなく、取り消し操作も最初の1行にしか効かないというコード側の欠陥でした。これを直しました（Code.gs修正済み・ガイド再公開済み）。
フヂさんへの案内（今回もSTEP2だけのやり直しです）
1，ガイドのSTEP2を開いて、新しいCode.gsのコードをコピーする
2，「ブログniceデータ」スプレッドシート → 拡張機能 → Apps Script を開く
3，中身を全選択して削除 → 新しいコードを貼り付け → 保存
4，「デプロイ」→「デプロイを管理」→鉛筆アイコン→「新バージョン」→デプロイ
この修正が反映されれば、すでに重複しているアイコンも表示上は1人分にまとまり（データ自体は残りますが、二重に表示されなくなります）、次にnice！を押し直せば取り消しも正常に効くようになるはずです。
たびたびの不具合とお手数をおかけして大変申し訳ございません。
よろしくお願いします。
ありがとうございます。