ブログソーシャルボタン刷新大作戦
Hatena Engineer Seminar #13 id:hogashi
自己紹介
hogashi.icon id:hogashi
株式会社はてな
入社から1年
はてなブログ (はてなブログ Media)
アプリケーションエンジニア
Perl / JavaScript
はてなブログとは
2011年から提供しているブログサービス
現在 9年目
はてなブログ Media とは
オウンドメディア向け はてなブログ
コードベースは同じ
さらにオウンドメディアに必要な機能を提供
今回の話題
ブログのソーシャルボタンの刷新
ブログのソーシャルボタンとはこれ
https://gyazo.com/31b1050a6e6d39951fde523f8bf68c34
ソーシャルメディアへの共有ボタン
記事に出せる
はてなブログは記事の AMP 版も配信しています
AMP: Google などが推し進めている Web フレームワーク
Google 検索結果からのアクセスで高速に表示など
AMP 版のソーシャルボタンはこれ
https://gyazo.com/b601a9ec680b54dce3f4c73a9d842e76
実はこうなったのは最近
https://gyazo.com/e2f3db9c0cb14e4f41d08a648e0b1b49
左から右に刷新しました
この際に、おもてなしポイントがあったので、それをご紹介します
おもてなし とは
バーガーセットをご覧ください
https://gyazo.com/83d4e597bfc9ddf72484b19084e1e8dc
昨日食べた表参道駅近くのバーガー屋さん
パッと見よくわからないが、バーガーの上下が半分ずつ分けて提供されている
https://gyazo.com/3b9f3671ca30e034f3c08630a80abcfa
完成した様子
https://gyazo.com/2e1191bca22cadd5f9236fbdde2ded2c
肉の熱で野菜が温まってしまわないように、ということだと思われる
おもてなし
おもてなし とは
元の意味では「待遇」など
個人的には心づかいをするときによく使う
記事を書きやすい
記事を読みやすい
困りごとが解決できる
すべき対応がわかりやすい
など
無くても致命的ではないものの、あると助かる、という印象
おもてなしの対象
ブログにはユーザが居る
ブログを見るユーザ
ブログを書く・管理するユーザ
加えて、開発・運用しているスタッフも居る
ユーザに説明するスタッフ
サポートスタッフ・営業担当
開発するスタッフ
hogashi はここに含まれる
今回のおもてなしポイント
ここまで踏まえると、どこをおもてなしできるか
今回はソーシャルボタンの刷新
今回のおもてなしポイント
AMP 版は CSS が書ける
できるだけデザイン崩れなどをせずに刷新したい
つまり
ブログを見るユーザには、違和感を持たせないようにしつつ、
ブログを管理するユーザには、新ソーシャルボタン用に CSS を対応してもらいやすくする
特に はてなブログ Media は CSS で見た目を大きく変えている場合が多く、営業担当が適切にサポートしたい
つまり
上記に加えて、
ユーザに説明するスタッフには、理解してもらいやすいようにする
例えば、複雑な対応手順などは説明が大変なので、負担になる
もちろん素早く楽に開発したい
つまり
開発するスタッフの開発の手数を少なくする
そのぶん他の開発が進む
今回のおもてなしポイント
つまり……
ブログを見るときは違和感なく (見るユーザ)
新ソーシャルボタンの CSS 対応は簡単に (管理するユーザ)
その手順と確認はわかりやすく (管理するユーザ・説明するスタッフ)
開発は最小限 (開発するスタッフ)
で、ソーシャルボタンを刷新したい
考えられる作戦
どうにかして、移行期間を設けるとよさそう
見るユーザに対するブログの見え方は変えないまま、
管理するユーザに新ソーシャルボタン用の CSS 対応をしてもらう
説明するスタッフに適切にサポートをしてもらう
その後に、新ソーシャルボタンに刷新する
ブログの見え方を変える本リリース
考えられる作戦
どうにかして移行期間を設ける案:
本番環境ではない、テスト環境を用意してアクセスしてもらう
良い
本番環境には影響が全く無いので、見るユーザは違和感ゼロ
アクセス先の URL を示すだけでお試ししてもらえるので、管理するユーザ・説明するスタッフは負担が小
悪い
テスト環境を用意するので、開発するスタッフの負担が大
本番環境に準じたものを新しく作り上げる必要がある
セキュリティ面など気をつける箇所も多い
本番環境で新旧ソーシャルボタンを出し分ける仕組みをつくる
良い？
本番環境に影響が無いように作ることができれば、見るユーザは違和感ゼロ
出し分けの仕組みがわかりやすければ、管理するユーザ・説明するスタッフともに負担は小
悪い？
開発するスタッフの負担は、仕組みによって大小さまざま
それぞれ、どのような仕組みにするかによって少し不確定
新ソーシャルボタンの HTML 片をお知らせする
良い
本番環境には影響が全く無いので、見るユーザは違和感ゼロ
開発するスタッフの負担はほとんどなし
HTML 片をコピーして渡すだけなので
悪い
手順は複雑なので、管理するユーザ・説明するスタッフは負担が大
どこが切り替わるのか、何が違うのかなど
AMP 版のソーシャルボタンの場所を示して説明するのも、文面などでは難しい
実際にやった作戦
「本番環境で新旧ソーシャルボタンを出し分ける仕組みをつくる」作戦
本番環境に影響が無いように作ることができれば、見るユーザは違和感ゼロ
出し分けの仕組みがわかりやすければ、管理するユーザ・説明するスタッフともに負担は小
開発するスタッフの負担は、仕組みによって大小さまざま
それぞれ、どのような仕組みにするかによって不確定
どのような仕組みにしたのか？
実際にやった作戦
作った仕組み: クエリパラメータで出し分け
記事 URL にクエリパラメータで new_amp_social=1 をつけると、新ソーシャルボタンになる
シンプル!!
https://gyazo.com/e2f3db9c0cb14e4f41d08a648e0b1b49
実際にやった作戦
見るユーザの違和感は？: 無し
クエリパラメータがなければ変化は無い
管理するユーザの負担は？: 小さめ
URL に付け加えるだけなので手順は簡単
実際にソーシャルボタンが切り替わるので確認も簡単
説明するスタッフの負担は？: 小さめ
AMP 版の URL には、既にクエリパラメータで ?amp=1 とついている
「URL の末尾を ?amp=1 から ?amp=1&new_amp_social=1 にしてください」で説明できる
開発の負担は？: 小さめ
クエリパラメータがあるかどうかの判定は if 文ひとつ +α 程度
単に出す HTML を切り替えればよい
本リリースでは、 if 文を取り去って、常に新しいソーシャルボタンを出すようにするだけ
実際にやった作戦
全部よさそう!!!
スムーズに移行期間を経て本リリースしました 🎉
ふり返り
移行期間さえ不要だったかもしれない
先にリリースした後に、順次 CSS を対応してもらう案
一時的にデザインが崩れたページを見るユーザも居るものの、ソーシャルボタンだけならあまり違和感がなかったかも？
移行期間無しの場合、開発の手数は最小だったはず
今回は、チームで相談した結果、少し手数を掛けて丁寧に進めましょうと判断した
ここは状況によると思います
もっと手数をかけていいなら、大規模な仕組みを作り出すという手もあったかもしれない
破壊的変更にバージョンをつけ、管理するユーザが、ブログにバージョンを設定できる仕組み、とか？
今回の検討時にはこのような案は出ませんでしたが、もし出ていても、掛かる手数が大きいので慎重に検討したと思います
まとめ
状況に応じて、おもてなしする先それぞれができるだけ嬉しい開発を心がけています
いつも全部うまくいくわけではないものの、意識はしたい
全部うまくいくとめちゃめちゃ嬉しい
ユーザだけでなく、スタッフもおもてなし対象と考えています
おもてなしできるに越したことはないですが、スタッフの負担も大きくなりすぎないように
必要十分な程度を見極められるように、チームで相談したりして進めています
以上です