メインコンテンツまでスキップ

「TypeScript」タグの記事が6件件あります

TypeScript / JavaScript の実装やテクニックに関する記事。

全てのタグを見る

Decap CMSのUXを最適化する config.yml と index.html の改善

· 約8分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

以前の記事で、DocusaurusサイトにDecap CMSを導入した方法について解説しました。導入によってコンテンツ更新の基盤は整いましたが、実際に日々利用する中で、特にモバイル環境での使い勝手や定型入力の効率化に改善の余地があると感じていました。

この記事では、それらの課題を解決するためにstatic/admin/config.ymlstatic/admin/index.htmlに施した、より実践的なカスタマイズの内容を紹介します。

また、本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

  • config.ymlの最適化: 入力の手間を減らし、ミスを防ぐための設定
  • index.htmlの改造: モバイルでの操作性を向上させるCSSとJavaScriptの追加

これらのチューニングによって、PCはもちろん、スマートフォンからでも快適に記事を更新できる環境を構築しました。GitベースのCMSが持つカスタマイズ性の高さを活かした一例として、参考になれば幸いです。

Docusaurusにシェアボタンを実装した記録とトラブルシューティングの備忘録

· 約7分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

シェアボタンを実装する

このサイトの各記事に、SNSで共有するためのシェアボタンを設置しました。この記事では、その実装プロセスと、背景にある技術的な判断などについて記録します。

完成したコンポーネントの特長は、ページのタイトルとURLを自動で取得する点です。これにより、一度設置すれば、記事ごとに特別な設定を追加する必要がなく、メンテナンスの手間がかかりません。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

Docusaurusで多言語対応ニュースリンク集ページを作成

· 約5分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

この記事では、Docusaurusサイト内に、国内外のニュースサイトを一覧できる「ニュースページ」を実装した際の整理をします。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

1. ページの目的と主要機能

個人的な情報収集の起点として、信頼できるニュースソースへ素早くアクセスできるページの構築が目的。すべて静的ページとしてビルドし、高速な表示や利便性、メンテナンス性を重視しました。。

ブラウザメモ機能:URL共有とUX改善の実装記録

· 約4分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

ブラウザメモ機能:URL共有とUI/UX改善の実装記録

はじめに

以前に実装した ブラウザメモ 機能(初回実装の記録)について

これまでの使用感や競合サービスの調査の結果、大幅な機能改善を実施。

本記事では、URLによるメモ共有機能の実装と、その過程で行ったUI/UX改善の技術的ポイントを整理します。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

Docusaurusのナビゲーションバーとフッターを国際化(i18n)する手順

· 約4分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

Docusaurusサイトの主要UI、ナビゲーションバーフッターを国際化(i18n)編集した際の備忘録として整理します。

基本的な i18n の導入手順は Docusaurus サイトを多言語対応するための実装手順 を参照してください。

また、本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

1. 目的

Docusaurusのi18n機能は、サイトのテキストを多言語に対応させるための仕組み。今回は、ナビゲーションバーフッター に新しい項目を追加し、それを日本語(デフォルト)から英語へ翻訳するまでの流れを解説します。

Docusaurus サイト内ブラウザメモ機能の実装記録

· 約6分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

この記事では、DocusaurusサイトにReactとTypeScriptを利用して、クライアントサイドで動作するシンプルなブラウザメモ機能を実装した際の主要な仕様と技術的ポイントを整理。

なお、本機能はその後 URL共有機能とUX改善 で大幅に拡張しています。

また、本記事は実装当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 にまとめています。

1. 基本機能と目的

ユーザーがブラウザ上で手軽にテキストメモを作成・保存し、次回訪問時にも内容を保持できる機能の提供。 サーバーサイドの処理を介さず、すべてクライアントサイド(ブラウザのlocalStorage)で完結させることによる手軽さと応答性を重視。