Postem

TomblooとかTombfixのようなクロスポストクライアントアプリ。

:memo: Note: このアプリはservice.jsでプラグインとして拡張可能な設計になっており、各サービスのAPIキーやカスタムロジックの実装が必要なため、バイナリ配布は行っていません。 利用する場合は、手元でソースコードをクローンし、必要なサービスプラグインを実装してから実行してください。

Features

• Twitter、はてなブックマークなどへのクロスポスト
• はてなブックマークを使ったタグ補完
• 独自に対応サービスを追加可能
• 入力欄はtextlintでのリアルタイムLint
• URLスキームを使ってブラウザから起動できる
• Claude Code連携によるAI説明文生成

<img width="448" alt="image" src="https://github.com/azu/postem/assets/19714/deb060a9-57ad-4bdc-a012-40ab2bb27581">

Installation

アプリに必要な依存をnpmでインストールします。

npm install

アプリを起動する前に利用するサービスの設定をservice.jsで定義してください。

サポートしているサービス

利用するサービスは後述するservice.jsに定義します。 postemリポジトリに実装があるビルトインサポートしているサービスは次の通りです。

• はてなブックマーク
• Twitter
• Slack
• asocial-bookmark
• Bluesky
• debug

利用するサービスの設定

クロスポストできるサービスの一覧をservice.jsで定義します。

• src/service.example.jsをservice.jsにリネームして設定

cp src/service.example.js src/service.js

デフォルトでは次のサービスが有効になっています。

• Twitter
• はてなブックマーク
• デバッグ(Development modeのみ有効)

また、src/servicesを参考にして独自のサービスを追加できます。

Usage: 起動方法

Development mode:

npm start

Production mode:　dist/ディレクトリにバイナリが出力されます。

npm run dist
# dist/ にアプリができる

Browser mode: asocial-bookmark形式のリポジトリに対応しています。

• https://postem.netlify.com/?title={TITLE}&url={URL}&github.owner={Owner名}&github.repo={リポジトリ名}&github.ref={refsheads%2Fブランチ名}&github.indexPropertyName={プロパティ名}&github.token={GitHub_Token}

使い方: 投稿

1. 投稿するサービスの選択(アイコンをクリック or ショートカット)
2. タグや説明欄を入力
3. "Submit"で送信(<kbd>Cmd+Enter</kbd>)

使い方: ショートカット

表示されているアイコンの左から順番に<kbd>Cmd+数字</kbd>のショートカットが振られています。

• <kbd>Cmd+1</kbd>: Twitter
• <kbd>Cmd+2</kbd>: はてなブックマーク

最後のアイコンだけは<kbd>Cmd+0</kbd>が振られています。

使い方: コマンドライン引数

次の引数を付けて起動すると初期値が入った状態で起動できます。

• --title: set default title
• --url: set default url

./bin/cmd.js --title "タイトル" --url "https://example.com"

使い方: URL scheme(production)

URL schemeはproduction modeで作成したバイナリを一度起動しておく必要があります。 起動すると、次のURL schemeが自動的に登録されます。

postem://

今見ているサイトについて投稿する場合は、次のJavaScriptを実行するとアプリが起動できます。

location.href = `postem://?url=${encodeURIComponent(window.top.location.href)}&title=${encodeURIComponent(window.top.document.title)}`

Claude Code連携

Claude Codeを使ってURLから説明文を自動生成できます。

設定

service.jsにclaudeCodeConfigをexportします。

export const claudeCodeConfig = {
    enabled: true,
    cliPath: process.env.CLAUDE_CODE_CLI_PATH || `${process.env.HOME}/.local/bin/claude`,
    workDir: "/path/to/work/dir",
    model: "claude-sonnet-4-5-20250929", // オプション: 使用するモデル
    mcpConfig: {
        mcpServers: {
            // HTTP MCP Server
            "example-http": {
                url: "https://example.com/mcp",
                type: "http"
            },
            // stdio MCP Server
            "example-stdio": {
                type: "stdio",
                command: "npx",
                args: ["some-mcp-server"],
                cwd: "/path/to/cwd",
                env: {}
            }
        }
    },
    // 文字列または関数
    prompt: ({ url, title }) => `以下のURLの内容を要約してください\n\nURL: ${url}\nTitle: ${title}`
};

設定項目

| 項目 | 説明 | |------|------| | enabled | 機能の有効/無効 | | cliPath | Claude Code CLIのパス | | workDir | 作業ディレクトリ（MCPサーバーの実行に影響） | | model | 使用するモデル（オプション、例: claude-sonnet-4-5-20250929） | | mcpConfig | MCPサーバー設定（オプション） | | prompt | Claude Codeに渡すプロンプト（文字列または({ url, title }) => string形式の関数） |

使い方

1. URLを入力すると自動でClaude Codeが実行されます（1秒のデバウンス付き）
2. 結果はプレビューエリアに表示されます
3. <kbd>Cmd+Shift+J</kbd>またはクリックで結果をコメント欄に挿入します

注意事項

• Claude Code CLIが事前にインストール・認証されている必要があります
• --dangerously-skip-permissionsフラグを使用するため、MCPツールは自動承認されます

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT