Twitterやはてなブックマークにクロスポストできるクライアントアプリを書いた
PostemというTwitterやはてなブックマークへクロスポスト(同時に投稿)できるElectron製のクライアントアプリを作りました。
Features
- Twitter、はてなブックマークなどへのクロスポスト
- はてなブックマークを使ったタグ補完
- 独自に対応サービスを追加可能
- 入力欄はtextlintでのリアルタイムLint
- URLスキームを使ってブラウザから起動できる
PostemでTwitterとはてなブックマークへクロスポストしてる様子。https://t.co/N3EYvLIGDH pic.twitter.com/Xl9p8esrvd
— azu (@azu_re) May 1, 2019
一言でいえばTomblooやTombfixのようなクロスポストクライアントでスタンドアロンなアプリです。
以前紹介してたpost-tweetはこのPostemからTwitter部分だけ取り出したものです。
インストール
個人的な用途で作っているため(ある程度汎用的ですが)、バイナリの配布はしてないです。 単純にElectronのバイナリ配布が面倒なだけなので、インストールする手順を修正するPull Requestも募集していています。
リポジトリをcloneして、アプリに必要な依存をYarnでインストールします。
git clone https://github.com/azu/postem
cd postem
yarn
起動する前に利用するサービスの設定が必要です。
利用するサービスの設定
クロスポストできるサービスの一覧をsrc/service.js
で定義します。
src/service.example.js
をservice.js
にリネームして設定
cp src/service.example.js src/service.js
デフォルトでは次のサービスが有効になっています。
- はてなブックマーク
- デバッグ(Development modeのみ有効)
また、src/servicesを参考にして独自のサービスを追加できます。 自分用のJSer.infoやECMAScript Dailyのサービスが含まれています。 次の記事でも紹介していましたが、ブラウザから見ているサイトの情報をアプリに渡して(後述するURLスキームを使う)、PostemからGitHubにコミットしています。
起動方法
Developmentモードはそのまま起動できます。
yarn start
Productionモードではバイナリを作成して、バイナリとして起動できます。(URLスキームはProductionのみ有効) ビルド済みファイルを使うのでこっちのほうが起動は早いです。
yarn run dist
# dist/ にアプリができる
使い方: 投稿
- 投稿するサービスの選択(アイコンをクリック or ショートカット)
- タグや説明欄を入力
- “Submit”で送信(Cmd+Enter)
Notes: 初回だけサービスのログイン設定などが必要です。 各サービスでOAuth認証するダイアログがでたりします。
使い方: ショートカット
表示されているアイコンの左から順番にCmd+数字のショートカットが振られています。
- Cmd+1: Twitter
- Cmd+2: はてなブックマーク
最後のアイコンだけはCmd+0が振られています。
使い方: コマンドライン引数
次の引数を付けて起動すると初期値が入った状態で起動できます。
--title
: set default title--url
: set default url
使い方: 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)}`
自分の場合はSurfingkeysを使いブラウザで見ているサイトの情報が入った状態でPostemが起動できるようにしています。
mapkey('<Meta-e>', 'Open postem', function() {
location.href = `postem://?url=${encodeURIComponent(window.top.location.href)}&title=${encodeURIComponent(window.top.document.title)}`
});
おわりに
ブラウザ拡張がいろいろ制限や変更が多くて面倒だったので、スタンドアロンなアプリとしてクロスポストクライアントを作ったのが始まりです。 JSer.infoとかの更新のワークフローにも入っているので、この辺が更新されている限り更新される気がします。
textlintの設定がややハードコード(自分用のProofdict辞書使ってたり)するので、その辺も設定可能にしたい場合はPull Requestください。
あと楽にElectronアプリを配布する手段があったらお知らせ下さい。
お知らせ欄
JavaScript Primerの書籍版がAmazonで購入できます。
JavaScriptに関する最新情報は週一でJSer.infoを更新しています。
GitHub Sponsorsでの支援を募集しています。