React DOIカード：学術文献の表示をより優雅に

在学術研究とテクノロジーライティングにおいて、私たちはしばしば DOI 文献情報を引用し、表示する必要があります。従来のテキスト引用は標準的ですが、デジタル時代には少し退屈に感じられます。今日紹介するこのオープンソースプロジェクト React DOI Card は、私たちに新しく、より美しく直感的な文献表示方法を提供します。

🎯 プロジェクト概要#

React DOI Card は、魅力的な DOI 文献情報カードを生成するために特化した完全に独立した React コンポーネントライブラリです。従来の文献引用方法とは異なり、DOI に対応する文献メタデータを自動的に取得し、洗練されたカード形式で表示することで、学術コンテンツの表示をより現代的でユーザーフレンドリーにします。

コア機能一覧#

🌐 完全独立：ローカル API に依存せず、外部 DOI サービスからデータを直接取得
✅ バイリンガルサポート：英語文献（CrossRef API）と中国語文献（中国 DOI 解析）を同時にサポート
✅ TypeScript フレンドリー：完全な TypeScript サポートと型定義
✅ スマートテキスト処理：すべてのテキストコンテンツは長文の自動改行をサポート
✅ モダンデザイン：Microsoft Fluent Design に基づいた美しいインターフェース
✅ スマート解析：完全な DOI リンクまたは純粋な DOI コードを自動処理
✅ 状態管理：内蔵の完全な読み込み、エラー、成功状態処理
✅ 高度にカスタマイズ可能：CSS クラス名とインラインスタイルのカスタマイズをサポート
✅ 軽量実装：追加の依存関係なし、React のみ依存

🚀 使用シーン#

このプロジェクトは特に以下のシーンに適しています：

学術個人ホームページ：個人のウェブサイトで発表した論文を表示
研究プロジェクト文書：プロジェクトの README で関連文献を引用
ブログ記事：技術ブログで学術論文を引用
オンライン履歴書：学術成果と発表記録を表示
研究報告：オンライン研究報告の文献引用

💻 迅速な体験#

インストールは非常に簡単で、すべての主要なパッケージマネージャーをサポートしています：

# npmを使用
npm install react-doi-card

# yarnを使用  
yarn add react-doi-card

# bunを使用
bun add react-doi-card

基本的な使用法も同様にシンプルです：

import { DoiCard } from 'react-doi-card';

function App() {
  return (
    <div>
      {/* 英文文献 */}
      <DoiCard doi="10.1038/nature12373" lang="en" />
      
      {/* 中文文献 */}
      <DoiCard doi="10.11821/dlxb202001001" lang="zh" />
      
      {/* カスタムスタイル */}
      <DoiCard 
        doi="10.1038/nature12373"
        className="my-custom-card"
        style={{ 
          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
          borderRadius: '12px'
        }}
      />
    </div>
  );
}

デモ：https://doicard.gankun.cn.ma/:::div{style="max=width: 300px"}

:::

🎨 デザインのハイライト#

プロジェクトのデザインは非常に心がこもっており、主に以下の点に表れています：

視覚デザイン：Microsoft Fluent Design デザイン言語を採用し、シンプルで現代的
情報階層：明確な情報アーキテクチャ、タイトル、著者、ジャーナル、年などの情報がはっきりしている
レスポンシブレイアウト：異なる画面サイズに適応し、良好な視覚効果を維持
状態フィードバック：読み込み状態、エラー状態にはそれぞれ視覚的フィードバックがある
アクセシビリティデザイン：アクセシビリティを考慮し、スクリーンリーダーをサポート

🌟 技術実装#

技術的な観点から見ると、このプロジェクトにはいくつか注目すべき点があります：

バイリンガルサポートの実装#

プロジェクトは巧妙に二つの API を統合しています：

英文文献：CrossRef API を使用して国際ジャーナルのメタデータを取得
中文文献：中国 DOI 解析サービスを使用し、中国語文献の表示問題をうまく解決

状態管理#

カスタム Hook useDoiDataを使用してデータ取得状態を管理します：

const { data, loading, error } = useDoiData(doi, lang);

TypeScript サポート#

完全な型定義を提供し、良好な開発体験を提供します：

interface DoiCardProps {
  doi: string;
  lang?: 'en' | 'zh';
  className?: string;
  style?: React.CSSProperties;
}

🔗 多様な使用方法#

プロジェクトは React コンポーネントだけでなく、API サービスも提供しており、HTTP リクエストを通じて SVG 形式のカードを直接取得できます：

![DOI Card](https://your-domain.vercel.app/api/doi-card?doi=10.1038/nature12373)

スクリーンショット 2025-07-02 14.27.20

この方法は特に Markdown 文書や GitHub README などのシーンで使用するのに適しています。

🚀 デプロイと統合#

プロジェクトは Vercel へのワンクリックデプロイをサポートしています：

https://vercel.com/new/clone?repository-url=https://github.com/Riceneeder/doi_stats_card

デプロイ後、あなた自身の DOI カード生成サービスを持ち、画像をサポートする任意の場所で使用できます。

🎯 アプリケーション例#

実際の使用において、GitHub README で論文を次のように表示できます：

## 私の発表論文

### 2024年発表

![論文1](https://your-domain.vercel.app/api/doi-card?doi=10.1038/nature12373)

### 2023年発表  

![論文2](https://your-domain.vercel.app/api/doi-card?doi=10.1126/science.abm6609)

または、個人ブログで関連文献を引用できます：

## 関連作業

私たちの研究は以下の重要な作業に基づいています：

![基礎理論](https://your-domain.vercel.app/api/doi-card?doi=10.1038/nature12373)

この論文は私たちに理論的基盤を提供しました...

🔮 未来の展望#

このプロジェクトは学術コンテンツのデジタル表示の新しい可能性を示しています。オープンソースコミュニティの参加により、私たちは期待できます：

より多くのデータソース：より多くの学術データベースと DOI サービスをサポート
テーマカスタマイズ：より多くの視覚テーマとスタイルオプション
インタラクティブ機能：クリックでの遷移、引用統計などの機能を追加
モバイル端末最適化：より良いモバイル表示効果
国際化：より多くの言語の文献表示をサポート

📝 まとめ#

React DOI Card は非常に実用的なオープンソースプロジェクトで、学術文献表示の課題を解決します：

開発者フレンドリー：シンプルな API、完全な TypeScript サポート
ユーザーフレンドリー：美しい視覚効果、明確な情報表示
デプロイが簡単：ワンクリックデプロイ、すぐに使用可能
使用が柔軟：React コンポーネントと HTTP API の 2 つの方法をサポート

あなたが学者、ブロガー、または開発者であっても、デジタルコンテンツで学術文献を引用する必要がある場合、このプロジェクトは試す価値があります。それはコンテンツの視覚効果を向上させるだけでなく、学術交流をより現代的にします。

プロジェクトのアドレス：

Riceneeder/doi_stats_card

这是一个用于生成DOI统计卡片的react组件以及API服务

JavaScript00

このプロジェクトが役に立つと思ったら、⭐ Star を付けて、コードやアイデアの貢献も歓迎します！