PJ概ね完了報告: VSCode ExtensionでSNSに投稿する

PJ概ね完了報告: VSCode ExtensionでSNSに投稿する

Intro

前回の記事から3日程度で実は当初の目的は果たせた。
今回はその報告とKPTを行う。

TL; DR

  • VSCodeの拡張機能を作成し、Misskeyに投稿できるようにした
  • 一部の機能が未実装であるが、短期間で基本的な機能は実装できた
  • 今後の課題として、SNSの選定基準やユーザー体験の向上、技術的な課題の解決、自動テストの導入を挙げる

draw.ioで作成した拡張機能のアイコン

以下、GitHubのREADME.mdより引用

Features

この拡張機能を使用すると、VSCodeのエディタ内から直接SNSへの投稿が可能になります。

Post

たとえば下記の通りMarkdownに記入して、Ctrl+Shift+Pでコマンドパレットを開いてSimple Post SNS: Post with Fileを選択すると、Misskeyに投稿されます。

demo_vscode
demo_misskey

他の投稿方法として、選択範囲を指定してSimple Post SNS: Post with Selectionを選択することで、選択範囲のみを投稿することも可能です。

  • Simple Post SNS: Post with Clipboard

Title Content

各見出しの内容は、以下の通り解釈されます。

  • config misskey: misskey投稿用の設定
  • visibilityに対する有効な値 (public, home, followers, specified): 投稿の公開範囲として解釈されたうえで、続きはPostとして投稿される
  • その他および空白: 見出しの内容は無視されたうえで、続きの内容がPostとして投稿される

Title Depth

各見出しの深度は、以下の通り解釈されます。

  • 見出しの深さが変わるごとに、投稿が切り替わる
  • configは、その階層以下の続く投稿に対して有効
  • level 3以上の見出しはlevel 2の見出しの連投として解釈される

Config on Posting

Misskey

  • Misskey投稿用の設定の既定は下記の通りです。
  • 拡張機能の設定や投稿時のconfig misskeyで設定を変更できます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const POST_BODY_DEFAULT: IPostBody = {
visibility: 'specified',
visibleUserIds: [],
cw: null,
localOnly: false,
reactionAcceptance: null,
noExtractMentions: false,
noExtractHashtags: false,
noExtractEmojis: false,
replyId: null,
renoteId: null,
channelId: null,
text: "There is something wrong with VSCode Ext.",
};
  • 一部の項目には、以下のような制約があります。
1
2
3
4
const ALLOWED_KEYS: { [key: string]: string[] } = {
visibility: ["public", "home", "followers", "specified"],
reactionAcceptance: ["likeOnly", "likeOnlyForRemote", "nonSensitiveOnly", "nonSensitiveOnlyForRemote"],
};

Install

vsixファイルまたは、VSCodeの拡張機能検索からインストールしてください。

Conditions

この拡張機能を使用するには、VSCodeがインストールされていることが必要です。また、SNSへの投稿を行うためのアカウント情報およびそのサービスにおけるAPIトークンの取得が必要となります。

Configuration of this Extension

この拡張機能の設定のうち、Misskey投稿時の設定を除いた内容は下記の通り。

  • 詳細な説明の追加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
"simple_post_sns.misskey_token": {
"type": "string",
"description": "misskey token"
},
"simple_post_sns.misskey_folder_id": {
"type": "string",
"description": "misskey folder id"
},
"simple_post_sns.misskey_image_name_rule": {
"type": "string",
"default": "{dt}_{name}{ext}",
"description": "misskey image name rule if alt text is `Alt text`, {name}{ext} = {base}"
},
"simple_post_sns.file_name_rule": {
"type": "string",
"default": ".*",
"description": "this extension only triggered when file name matches this rule"
},
"simple_post_sns.clean_always": {
"type": "boolean",
"default": false,
"description": "clean text file or selection without after posting"
},
"simple_post_sns.clean_never": {
"type": "boolean",
"default": false,
"description": "never clean text file or selection after posting"
}

Future Work

  • 連投の時間調整
  • optionの充実
  • 投稿済みメッセージに追記
  • 投稿済みのclean
  • 選択して部分投稿
  • preview?
  • ファイル名で絞り込み
  • default tag
  • README.mdの作成
  • misskey REST APIのメモ
  • 構造体でrewrite
  • post from clipboard
  • 長文が自動分割される

Release

0.1.0

  • Misskeyへの投稿
  • 画像の投稿
  • 投稿後のclean
  • 投稿時の設定調整
  • 拡張機能の設定

KPT

Keep

開発プロセス

  • 久々のVSCode拡張機能の開発だったが、テンポよく進めることができた
  • 短期間で概ねの完成までたどり着けた
  • GitHub Issueを利用できた (終盤だけだが)
  • ChatGPTやGitHub Copilotの助けを借りて、作業を進めることができた

技術的成果

  • tsできれいに書けたScriptを書けた
    • 一度作成してからうまく構造体に書きなおせた
  • 画像の投稿もできた
  • Misskey APIの情報が錯綜している中、各サイトやScriptを参考に完成させた
  • READMEも流れの中で作成できた

Problem

SNS選定とユーザー体験

  • SNSの選定が甘く、何度か選び直すことになった
  • 使い方からスタートしていないため、現状では使いづらい。
    • 「この拡張機能を使うため」以外で使いづらい。この修正は今後の課題
    • Markdown以外のファイルの際の対応、投稿内容の確認や精査など必要かもしれない

技術的課題

  • VSCodeのDebugで拡張機能がインストールされない問題が発生し、これの解決に手間取った
  • 参照コピーを発端とする問題を経験しているにもかかわらず、またしても経験してしまった
  • 自動テストを今回も導入できていない

Try

SNS選定とユーザー体験

  • SNSの選定基準を明確にし、初期段階で慎重に選定する
  • ユーザーフィードバックを収集し、使いやすさを向上させるための改善を行う
    • Markdown以外のファイルの対応や、投稿内容の確認・精査機能を追加する

技術的改善

  • VSCodeのDebug環境での問題解決方法をドキュメント化し、再発防止に努める
  • 参照コピーの問題を避けるためのベストプラクティスを模索し、実践する
  • 自動テストを導入し、品質保証を強化する
    • 単体テストや統合テストを計画し、継続的に実行する

まとめ

  • visxファイルからインストール可能
  • VSCodeからさまざまな設定を加えてMisskeyへの投稿が可能

コメント