技術の試行錯誤 xLog 1 可行性の探索

技術の実験 xLog 1 可行性の探索

内部リンク

[[技術の実験 xLog 1 可行性の探索]]
[[技術の実験 xLog 2 xlog の認証の理解]]
[[技術の実験 xLog 3 obsidian プラグインの作成]]
[[技術の実験 xLog 4 unStorage を使用して xLogDriver をカプセル化する]]
[[速通 - xLog の背後にある CrossBell SDK]]
[[公式の XLOG Obsidian プラグインから学ぶこと]]
[[Obsidian Sync To Xlog プラグインの開発 - obsidian の画像の処理]]
[[速通 - CrossBell のオープンソース作品]]
[[速通 Obsidian Docs - プラグイン開発に焦点を当てる]]

シリーズの記事を書きたいです。技術的な視点から、地球上で最も優れたブログプラットフォームxlog.appを探求します。以下のことを実現することを目指します（また自慢話を始めましたが、新しい友達、これは私の表現スタイルです）：

愛しいテキストエディタを守り、obsidian を離れずに xlog ブログを公開する
ウェブページを開かずに、xlog にアクセスし、他の人のブログを読み、相互作用することができる
xlog ブログを同期し、独自のドメインとサーバーで自分のコンテンツを表示する
github + xlog = マルチテナント CMS
xlog のメンバーになる

口頭での紹介は終わりましたので、技術の可行性の探索を試してみましょう。今回の内容では、公式の openapi を使用して xlog のコンテンツにアクセスする方法について話しましょう。

要件の背景#

xlog は、地球上で最も優れたブログプラットフォームとして、2 つの小さな問題があります。国内でのアクセスは少し遅いかもしれません。xlog にブログを完全に移行した後、自分のサーバーはアイドル状態になります。

または、もっと簡単に言えば、xlog で記事を公開し、自分でデプロイできませんか？将来を見据えると、xlog.app が xlog にアクセスする唯一の方法ではないと言っているのではないでしょうか？xlog が地球上で最も優れたヘッドレス CMS になる可能性を制限しているのではないでしょうか？

それでは、始めましょう。

技術の探索#

現在公開されている情報によると、xlog は公式に xlog のコンテンツを取得するためのさまざまな方法を提供しています。自分のデータにアクセスするための方法として：

crossbell SDK を使用してデータにアクセスすることができます
http の RESTful API を使用してデータにアクセスすることができます

次に、これらの 2 つの方法を使用してデータにアクセスし、公開されている記事を取得します。

準備#

以下の内容を見るには、xlog のユーザーである必要があります。まだ登録していない場合は、すぐに登録してください。

公開アドレスを取得します。https://xlog.app/dashboard にアクセスし、画像で示されている場所をクリックします。【コピー済み】と表示され、これを現在のユーザーの xlog 上のユニークな ID として扱うことができます。複数の役割がある場合、ID は異なります。

この ID をメモしておきます。私の場合、後で使用するためにこれを記録します：0xA0fb033D4849b13A16690EEbdd575Dd90bF29711

次に、異なる方法でデータを取得します。

SDK を使用してデータにアクセス#

ここでは、Node.js 環境が必要です。Node スタック以外の技術に精通している場合は、次に紹介する公式の API を使用してください。

公式 SDK の Github アドレス：https://github.com/Crossbell-Box/crossbell.js

コメント：公式のドキュメントはあまり良くないので、後で修正するために貢献します。

まず、プロジェクトを作成します。

mkdir xlog-api-demo
cd xlog-api-demo && pnpm init
pnpm i crossbell
# TypeScript環境の準備
pnpm i typescript tsx -D
touch index.ts

index.tsに以下のコードを追加します。

import { createIndexer } from "crossbell";

const indexer = createIndexer();
const Address = process.env.USER_ADDRESS as `0x${string}`;

const getUserByAddress = async () => {
  const res = await indexer.character.getMany(Address);

  console.log(res);
};
getUserByAddress();

具体的な実行方法については、リポジトリを参照してください。アドレスに基づいてキャラクター情報を取得することができます。メタデータとキャラクター ID を取得できます。

// const characterId = 53710;
const getNotesByCharacterId = async (characterId: number) => {
  const res = await indexer.note.getMany({
    characterId,
    includeNestedNotes: false,
    limit: 10,
  });
  console.log(res);
};

これにより、ユーザーのデータを読み取ることができます。ページングは、total + cursor + limit を使用して実現できます。カーソルは、各リクエスト結果に含まれています。

具体的な詳細を取得するには、次のコードを使用します。

const noteId = 16;
const characterId = 53710;
const getNoteById = async (noteId: number) => {
  const res = await indexer.note.get(characterId, noteId);
  // console.log(res);
  console.log(res?.metadata?.content);
};
getNoteById(noteId);

他のメソッドも同様に推論できます。さまざまなデータの表示が可能です。

上記の 2 つの方法を使用することで、個人のブログを構築することができます。ホームページには基本情報、リストページには更新リスト、詳細ページには情報が表示されます。

2 つの詳細については、以下の点に注意してください。

カスタムの埋め込み（音声、ビデオなど）は、自分で互換性を持たせる必要があります。これについては後で取り上げます。
画像とリンクは常に ipfs を使用します。詳細については後で説明します。

ipfs プロトコル#

ipfs プロトコルは万能です。単純に言えば、ハッシュまたは cid によってネットワークリソースが識別されます。詳細は省略しますが、Web にとって ipfs は http プロトコルではないため、画像を表示するにはプロトコル変換が必要です。これには API ゲートウェイの解析が関与します。

最初はソースコードを自分で見つけてゲートウェイを見つけましたが、それほど特別なことではないことに気づきました。https://crossbell-ipfs-utils.vercel.app/img/bafkreiarfgti3xpv2oznl7rzanfbzm7gvklvcwn5poqb53wlhi3n4cwp2a このウェブページにアクセスすると、このウェブページは異なるゲートウェイから画像をロードします。見やすいものを選んでください。

注意：より高速な読み込み速度を実現するために、サブホスティングを検討する場合、リソースを自分で処理することが最善です。

また、xlog にはこの問題を解決するための専用のツールライブラリがあり、プログラミングソリューションとして使用できます。メモとして残しておきます。

import { ipfsFetch } from "@crossbell/ipfs-fetch";
ipfsFetch(ipfsUrl)
    .then((res) => {
      console.log(1, res);
    })
    .catch((err) => {
      console.log(3, err);
    });

詳細はこれで十分です。他のインタラクションについては API を参照してください。

公式 API を使用してアクセスする#

先ほどの技術的なソリューションは Node.js に依存しています。他の言語に精通している場合や、より簡単な方法をお探しの場合は、公式の API を使用して RESTful API を介して対話することもできます。

以下の URL にアクセスしてください。

https://indexer.crossbell.io/docs

SDK で言及されているアドレスを入力として使用します。

アドレスのキャラクターを取得するための Get characters of an address /v1/addresses/{address}/characters
キャラクター ID でキャラクターを取得するための Get a character by characterId /v1/characters/{characterId}
/v1/characters/{characterId}/notes でキャラクターの記事を取得する
/v1/notes/{characterId}/{noteId} で記事の詳細を取得する

これにより、SDK と同じ効果が得られます。

次に、SDK/API を使用してバックエンド管理を実現する方法について探求します。コンテンツの読み取りだけでなく、記事の作成、更新、削除などの操作を行いたいと考えています。

追加情報：ipfs ファイルのアップロード#

実際の体験では、xlog にアップロードされた画像、オーディオ、ビデオファイルは自動的に ipfs にアップロードされ、画像リンクが ipfs リンクに置き換えられます。

現在、2 つの方法があります。xlog の ipfs アップロードプロトコル、および http の独自のプロトコルを使用する方法です。

ここでは、ipfs のアップロード方法を指示します。xlog のソースコードに慣れるために、簡単なガイドを提供します。

アプローチは次のとおりです。

画像のアップロードはドラッグアンドドロップ、または貼り付けでトリガーされるため、ソースコードで drag/paste を検索し、src/components/ui/ImageUploader.tsx#handleDropに位置を特定します。
handleFile - uploadFile - useUploadFile - UploadFileに進みます。
指定されたインターフェースにファイルを POST することで実現されます。

スクリーンショットは一旦無視します。認証がないことに気づきました...

結論#

以上が可行性の探索です。少なくとも、データの取得はインターフェースを介して実現できます。次の記事では、認証を使用して記事の公開などの管理操作を実現する方法を探求します。その時点で、xlog はヘッドレス cms の機能を備えています。