見出し画像

🔍 coderdojo.jp ヘッダーから検索可能に

こんにちは!😆✨ coderdojo.jp のヘッダーから、同サイト内のコンテンツを横断的に検索できるようになりました 🔍 👀💨✨ (デザイン: @YukiMihashi)

画像1


coderdojo.jp のWebサイトは、 React や Vue.js でも採用されている Algoria の DocSearch プログラムに採択されているため、Algoria が検索に必要な各種パーツを提供してくれています 🙏✨


元々は2019年3月に実装された機能ですが、当時は Kata ページからしか検索できない仕様でした。というのも、当時は全ページで共通するヘッダーがなく、検索機能を置けそうな場所が Kata ページにしか無かったためです 😢

画像3


とはいえ coderdojo.jp 内のコンテンツも徐々に増えていき、訪問者が調べたい内容も多岐に広がりつつあるため、どこからでも知りたいコンテンツにアクセスできると便利ですよね 🤔💭

こういった背景もあり、全ページ共通のグローバル・ナビゲーションがヘッダーに追加されたり、コンテンツ量が特に多い Kata ページの各セクションに簡易アクセスできる導線などが用意されていきました 🛠💨✨


これらの改善に伴って、当初考えていた『どこからでも検索できるようにしたい』といったアイデアにようやく着手できる土台が整い、今回リリースできたのがグローバル・ナビゲーション (ヘッダー) からの検索機能です 🚀✨

画像3


作りたい機能を実現するためには『何が必要なのか?』『どの順番で着手するか?』を整理し、1つずつ積み重ねていくことが大事ですね。

プログラミング界隈では『Yak-Shaving (ヤクの毛を刈る)』と呼ばれることがありますが、一見カンタンそうに見える機能も、実際に手を動かしてみると課題がアレコレ出てくるものです 📑👀💦

そういった情報を調べ、整理し、目的に向かって1歩ずつ実現していくことが大切だなぁと、改めて感じられる機能のリリースでした 😌✨

📖👀 Yak-Shaving の参考記事

(ちなみに検索機能はインタラクティブに動くため、モバイル端末だと使いづらいです。このため現在は PC/Laptop/Tablet のみ検索に対応しています。まだまだ Yak-Shaving の道は続いていきそうですね...!! 👀💨✨)


♻️ 継続的に改善し、少しずつ良くしていくために

一般社団法人 CoderDojo Japan のパートナー法人の1社として、YassLab 社では引き続き coderdojo-japan/coderdojo.jp にコミットしていきます 🛠💨


弊社が開発に関わった機能については『coderdojo.jp 開発マガジン』から随時公開していくので、もし興味あればぜひフォローしてみてください 😉✨

書いた人: @yasulab
この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

YassLab株式会社の活動に興味を持っていただければ嬉しいです。こちらからのサポートは Raisチュートリアル、Railsガイドなど各サービスの向上に役立てていきたいと思います💓

❤️ありがとうございます...!! 😻
3
RailsチュートリアルやRailsガイド、coderdojo.jp の開発・運営をしています。プロダクト開発が学べる解説動画・質問対応や、全文検索・過去バージョン閲覧、研修・協業プランなども提供しています。詳細は Web サイトからぜひ! https://yasslab.jp/

こちらでもピックアップされています

☯️ coderdojo.jp 開発マガジン📖
☯️ coderdojo.jp 開発マガジン📖
  • 10本

coderdojo.jp の開発に関する情報をお知らせします 📣☯️✨ #CoderDojo

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。