🔍 coderdojo.jp ヘッダーから検索可能に
こんにちは！😆✨ coderdojo.jp のヘッダーから、同サイト内のコンテンツを横断的に検索できるようになりました 🔍 👀💨✨ (デザイン: @YukiMihashi)
coderdojo.jp のWebサイトは、 React や Vue.js でも採用されている Algoria の DocSearch プログラムに採択されているため、Algoria が検索に必要な各種パーツを提供してくれています 🙏✨
元々は2019年3月に実装された機能ですが、当時は Kata ページからしか検索できない仕様でした。というのも、当時は全ページで共通するヘッダーがなく、検索機能を置けそうな場所が Kata ページにしか無かったためです 😢
とはいえ coderdojo.jp 内のコンテンツも徐々に増えていき、訪問者が調べたい内容も多岐に広がりつつあるため、どこからでも知りたいコンテンツにアクセスできると便利ですよね 🤔💭
こういった背景もあり、全ページ共通のグローバル・ナビゲーションがヘッダーに追加されたり、コンテンツ量が特に多い Kata ページの各セクションに簡易アクセスできる導線などが用意されていきました 🛠💨✨
これらの改善に伴って、当初考えていた『どこからでも検索できるようにしたい』といったアイデアにようやく着手できる土台が整い、今回リリースできたのがグローバル・ナビゲーション (ヘッダー) からの検索機能です 🚀✨
作りたい機能を実現するためには『何が必要なのか？』『どの順番で着手するか？』を整理し、１つずつ積み重ねていくことが大事ですね。
プログラミング界隈では『Yak-Shaving (ヤクの毛を刈る)』と呼ばれることがありますが、一見カンタンそうに見える機能も、実際に手を動かしてみると課題がアレコレ出てくるものです 📑👀💦
そういった情報を調べ、整理し、目的に向かって１歩ずつ実現していくことが大切だなぁと、改めて感じられる機能のリリースでした 😌✨
📖👀 Yak-Shaving の参考記事
(ちなみに検索機能はインタラクティブに動くため、モバイル端末だと使いづらいです。このため現在は PC/Laptop/Tablet のみ検索に対応しています。まだまだ Yak-Shaving の道は続いていきそうですね...!! 👀💨✨)
♻️ 継続的に改善し、少しずつ良くしていくために
一般社団法人 CoderDojo Japan のパートナー法人の１社として、YassLab 社では引き続き coderdojo-japan/coderdojo.jp にコミットしていきます 🛠💨
弊社が開発に関わった機能については『coderdojo.jp 開発マガジン』から随時公開していくので、もし興味あればぜひフォローしてみてください 😉✨
書いた人: @yasulab
YassLab株式会社の活動に興味を持っていただければ嬉しいです。こちらからのサポートは Raisチュートリアル、Railsガイドなど各サービスの向上に役立てていきたいと思います💓