こんにちは、つばさ（@tsubasa123）です。
自分のブログより人のブログのソースコードを覗く方が楽しいというちょっとアレな性格の持ち主である私ですが、先日、とある人気ブログのカスタマイズのお手伝いをさせていただきました。
そちらの記事でもご紹介いただきましたが、私も作り手としてちょっと書き残して置きたいことがありまして。技術的にこだわったところや今後の展望なんかを簡単にご紹介です。よければお付き合いください。
面白いことへの探求メディア
ご存知の方も多いと思います。つっちーさんが運営されている「非アクティビズム。」（。ついてるの知らなかったです、某アイドルグループかな？）
ガジェットのレビューをメインに扱っておられるブログで、非常に丁寧な説明とインパクトのあるキャラクターが魅力的。商品の良い点だけでなく、悪いところ（気になるところ）までしっかりレビューしてくださりますので購入の際には非常に参考になるはずです。特に中国メーカーの製品の購入を検討されている方は一読をおススメします。
個人的にはアイキャッチの作り方が上手だなーといつも思っています。いつか作り方教えてください。
レビューの一覧を
作らせていただきました。
「力こそパワー」というこちらも主にレビュー記事を扱ったブログを運営されているうぃるさんが
このような記事を公開されてから私もなにか作りたいなーと思っていたところでして。我慢できなくなった私が半ば強引に押し付けるような形でご提供させていただきました。
運よく、需要と供給が一致したようでして、快く迎え入れてくださったつっちーさんに感謝です。OKもらえた以上はがんばるしかないですね、ライバルはうぃるさんになるのかな？絶対に負けられない戦いがそこにはある。
出来栄えはこちらから。ぜひ一度ご覧くださいな。感想としましては 楽しかった につきますね。やはり、コンテンツがしっかりしているとカスタマイズも栄えるといいますか、作り手としてもテンションが上がります。もうちょっと遊んでいたかったんですが、他にもやることがあるのでこの辺でリリースとしました。
私的なこだわり
作り手のエゴでしかないですが、せっかくなのでアピールします。
- レスポンシブ対応
- タブ切り替えと配色
- コンテンツの自動生成
こんなところでしょうか。おかしいな、もっとあった気がするんだけどな。
レスポンシブ対応
普段はPC向けのカスタマイズばかり気にしている私ですが、扱っている内容的にも（多分）つっちーさんのブログはスマホやタブレットから閲覧するユーザーが多いんじゃないかと思って、それなりにしっかりとしたレスポンシブ対応を心がけました。
といっても特別難しいことはしていません（というかできません）。480、768、1024の3箇所にブレイクポイントを設定し、それぞれで1～4カラムに変更するようにしています。Flexible Box Layout Moduleを使いましたのでそこまで困ることはありませんでしたが、割とIEではバグが多いようなので今後問題が起きたら対応しないとなーと思っています。
あまりレスポンシブ慣れしていない私でしたが、そこそこ満足いく出来栄えとなりしました。やったぜ！
タブ切り替えと配色
最初はスライダーなんかをふんだんに使った奇抜なレイアウトも検討していたんですが、レスポンシブ対応しようと考えた際に、スマホでどのように見せるかのプライオリティが一気に高くなりました。そうなると速度や負荷も気になるので、やっぱり余計なことはしない方がいいかなということでアニメーション系は却下。
次に考えたのがコンテンツの量。スマホはスクロールしやすいデバイスなのである程度までは許容できると考えていますが、さすがに今回はコンテンツが多かった。アイキャッチを外せばスクロールは減りますが、せっかく素敵な画像があるのに使わない手はない。
なので、ページの一番上にカテゴリ毎のタブを配置。クリック（タップ）でコンテンツを切り替える方式を採用。the 無難。ですが、WEBに限らずニュース系のモバイルアプリでも使われているレイアウトだと思いますし、これだけ普及するということはそれなりに利点の多いレイアウトなんじゃないかと思っています。あとまぁ技術的に楽だったってのもちょっとあったりしますが。
で、一番頭を悩ませたのがタブの配色。2色組み合わせるのも困難な私が9色も選べるわけがない。ということでつっちーさんのブログのメインビジュアルから5色ほど拝借して、そちらをシンメトリーな感じで配置することにしました。ロゴと同系統の色を使えば全体的に統一感もでますしね、ナイス判断だ、私。と思ったんですが、最近メインビジュアルが変わってしまったようで、ちょっと謎の配色となってしまいました笑
コンテンツの半自動生成
これはカスタマイズと直接関係ないんですが、レビュー数が多すぎて手動でコンテンツを用意するのはしんどかったので半自動化して手を抜きました。プログラム要素高めなのでここでは割愛します。
今後の展望
というか、私のわがままに近いんですが、まだやりたいことがいくつかあったりします。
- レビュー内検索機能の追加
- 評価項目の追加
- 金額項目の追加
- 項目指定で並び替え
この辺ですね。特に評価の項目は一覧で見れたら（実装者ではなくエンドユーザー目線で）嬉しいなーと思います。信頼できるレビュワーさんの評価は商品購入にあたって重要な指標の1つですからね、あと金額も。ついでにそれでソートもかけたいですね。「評価の高い順」とか「金額の安い順」とかよくあるじゃないですか、あんなやつ。欲しい。
あと、実際にレビューページがそれなりに使われるのであればもうちょっと最適化もかけたいかな。レスポンシブにはしましたが、画像サイズの調整やできれば画像の最適化も通したいところ。この辺は静的にHTMLを用意するので細かい調整はできますが、手間がかかるのが玉に瑕。費用対効果を考えたコスパの良いお手伝いができたらいいなと。
さいごに
というわけで、楽しかったサプライズカスタマイズのご紹介でした。お声がけする前は“いらない”って言われたらどうしようかとビクビクしていましたが、概ね好評のようでほっと一安心です。お礼の品までご配慮いただきまして、本当にありがとうございました。またコラボしましょうw
ではでは、最後までお付き合いいただきありがとうございました。