今回の開発日記はLinks編です。 この機能は「おすすめリンク集」ではなく「自分のSNSなどのリンク集」となり、以前は「lit.link」を使っていました。デザインも洗練されていてカスタマイズもそれなりにできる便利なサービスです。
でもDottiqとして独自のスタイルや構成を追求するなかで「やっぱり自分でリンク集も用意したい」という気持ちがどんどん強くなってきました。
理由は他にもいくつかあります。
- デザインをもっと自由にいじりたい
- 作るのは簡単そう
- CMSから一括管理できたら便利
🧰 技術的にはシンプルに
最初の実装はとてもミニマルなものでした。 管理画面側ではリンクの「サイト名」「URL」だけを入力しJSONに保存。 公開側ではソレを読み込んでタイル風にボタン表示するだけ、という構成です。
🎨 UIのこだわり
見た目はとことんシンプルに。 リンクはすべてグラデーションの角丸ボタンで統一し、文字＋絵文字だけで直感的に内容が伝わるようにしています。
もちろんスマホ表示でも美しく並ぶようレスポンシブ対応も万全です。余白やフォントサイズも含めて、どの画面幅でも心地よく表示されるよう調整しました。
✨ いったん完成、リリース！
無事にリリースできた当初は「これで十分かも」と思っていました。 実際、管理画面でリンクを登録するだけで即反映されるし編集や削除もラクラク。 最低限の機能に絞っていたぶん、動作も軽くてサクサクでした。
🌪️ でも、並び替えたいよね？
ふと思ってしまったのです。 「やっぱり順番を変えたい！」
すべてのSNSで満遍なく活動しているわけじゃなく更新頻度もまちまちなので、手軽に順番を入れ替えられるようにしたかったんです。ソートIDを振る手法も思いつきましたが、それはそれでイマドキじゃないですし。だから管理画面からドラッグ&ドロップで並び替えできるUIを導入することにしました。
🛠️ 並び替え機能の実装
ここが今回の山場でした。 JavaScriptでドラッグ＆ドロップ可能なリストを作り、並び替えた順序をAJAXで送信。 サーバー側ではその順番に合わせてJSONファイルを再生成する、という流れです。
並び替えUIの実装には、Sortable.jsという軽量ライブラリを使いました。 CDN経由でhttps://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.jsを読み込むだけで、要素のドラッグ＆ドロップが簡単に導入できます。
DOM構造の変更を検知して自動的に並び順を管理してくれるため、わずか数行のコードで高機能なUIが実現できました。シンプルで依存関係もなく、自作CMSにぴったりの選択だったと思います。
最初はうまくいっていたのですが…
- 保存後に順番が正しく反映されなかったり
- 並び替えずに保存したときだけ成功したり
という地味なバグに悩まされました。 結局、送信される配列と元のIDがズレるケースを見つけ、original_id をキーにして確実に照合するよう修正したら安定しました。
ちなみに並び順の情報は、IDの配列としてPOST送信され、サーバー側で上書きされたJSONに即時反映されます。 CMSの管理画面と公開画面で同じ順番になるよう、整合性をとっています。
こういう「一見地味だけどハマる」ポイントこそ、自作CMSの醍醐味かもしれません。
🌐 言語切り替えとリンクの扱い
Dottiqでは /blog /tools などのページに日本語・英語の両バージョンがありますが、LinksだけはSNSやプラットフォーム名が主なコンテンツなので、表示内容は共通です。
そのため：
- タイトルや説明はほぼ英語
- URLだけ
/linksと/en/linksを用意し、OGPや hreflang 対応
というハイブリッドな対応にしています。 このシンプルさと柔軟さのバランス感覚は、自作CMSならではだなと感じます。
🎉 自分だけのリンク集、完成！
というわけで、Dottiq CMSのLINKSページは、
- 自分で好きにカスタムできて
- 多言語も柔軟に対応できて
- 並び順までドラッグで管理できる
という「かゆいところに手が届くリンク集」として仕上がりました。
🧭 今後の拡張アイデア
今後は、アイコンにマウスオーバーしたときの説明表示や、クリック数のカウント機能なども検討中。 使うたびに「作ってよかった」と思える、自分だけのツールになってきました。
次回は自作のアプリやChrome機能拡張を紹介&ダウンロードができるToolsのお話をしようかなと思っています。