From 24e629ca5c50789ff0aba31532ae66b51148d70f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Fri, 3 Nov 2023 15:35:07 +0900 Subject: [PATCH] =?UTF-8?q?enhance:=20=E5=88=9D=E6=9C=9F=E8=A8=AD=E5=AE=9A?= =?UTF-8?q?=E3=81=A8=E3=83=81=E3=83=A5=E3=83=BC=E3=83=88=E3=83=AA=E3=82=A2?= =?UTF-8?q?=E3=83=AB=E3=82=92=E7=B5=B1=E5=90=88=20(#12141)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * better onboarding experience * enhance: iroiro * (add) title * (enhance) 戻る・次へボタンを全ページでstickyに * fix merging * (add) iroiro * remove unnecessary file * Update CHANGELOG.md * tweak texts * (fix) reactionViewer mock * change strings * Update MkTutorialDialog.Note.vue * Update ja-JP.yml * (fix) reactionViewer error * (fix) path * refactor * fix * Update MkPostForm.vue * Update ja-JP.yml * Update ja-JP.yml * tweak text * Update ja-JP.yml * Update ja-JP.yml * Update ja-JP.yml * (add) achivement * (add) もう一度見れますよメッセージを追加 * Revert "feat: レジストリAPIをサードパーティから利用可能に (#12229)" This reverts commit 79346272f8792d35955efd3aaaa1e42e0cd2a6e3. * Revert "(add) もう一度見れますよメッセージを追加" This reverts commit 6123b35215133f0d5e5db356bb43f4acbafab8fa. * Revert "Revert "feat: レジストリAPIをサードパーティから利用可能に (#12229)"" This reverts commit bae684e484ef99308d7ac816a822047117efe1c6. * tweak --------- Co-authored-by: syuilo --- CHANGELOG.md | 1 + locales/index.d.ts | 98 ++++++- locales/ja-JP.yml | 88 +++++- .../backend/src/core/AchievementService.ts | 1 + packages/frontend/assets/tutorial/ai.webp | Bin 0 -> 12238 bytes .../assets/tutorial/natto_failed.webp | Bin 0 -> 13196 bytes .../frontend/assets/tutorial/timeline_tab.png | Bin 0 -> 2860 bytes packages/frontend/src/components/MkInfo.vue | 20 +- packages/frontend/src/components/MkNote.vue | 150 +++++++--- .../frontend/src/components/MkNoteHeader.vue | 14 +- .../frontend/src/components/MkPostForm.vue | 28 +- .../src/components/MkPostFormAttaches.vue | 17 +- .../components/MkReactionsViewer.reaction.vue | 52 ++-- .../src/components/MkReactionsViewer.vue | 19 +- .../src/components/MkTutorialDialog.Note.vue | 117 ++++++++ .../components/MkTutorialDialog.PostNote.vue | 135 +++++++++ .../components/MkTutorialDialog.Sensitive.vue | 144 ++++++++++ .../components/MkTutorialDialog.Timeline.vue | 87 ++++++ .../src/components/MkTutorialDialog.vue | 260 ++++++++++++++++++ .../src/components/MkUserSetupDialog.vue | 77 ++++-- .../frontend/src/pages/timeline.tutorial.vue | 123 --------- packages/frontend/src/pages/timeline.vue | 16 +- packages/frontend/src/scripts/achievements.ts | 6 + packages/frontend/src/store.ts | 9 +- packages/frontend/src/ui/_common_/common.ts | 9 +- 25 files changed, 1223 insertions(+), 248 deletions(-) create mode 100644 packages/frontend/assets/tutorial/ai.webp create mode 100644 packages/frontend/assets/tutorial/natto_failed.webp create mode 100644 packages/frontend/assets/tutorial/timeline_tab.png create mode 100644 packages/frontend/src/components/MkTutorialDialog.Note.vue create mode 100644 packages/frontend/src/components/MkTutorialDialog.PostNote.vue create mode 100644 packages/frontend/src/components/MkTutorialDialog.Sensitive.vue create mode 100644 packages/frontend/src/components/MkTutorialDialog.Timeline.vue create mode 100644 packages/frontend/src/components/MkTutorialDialog.vue delete mode 100644 packages/frontend/src/pages/timeline.tutorial.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 6837cf6e1b..4fdf9687ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ - 外部サイトでの実装が必要です。詳細は Misskey Hub をご覧ください https://misskey-hub.net/docs/advanced/publish-on-your-website.html - Feat: 通知をグルーピングして表示するオプション(オプトアウト) +- Feat: Misskeyの基本的なチュートリアルを実装 - Feat: スワイプしてタイムラインを再読込できるように - PCの場合は右上のボタンからでも再読込できます - Enhance: タイムラインの自動更新を無効にできるように diff --git a/locales/index.d.ts b/locales/index.d.ts index f6db40e944..b45559eea2 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1182,10 +1182,91 @@ export interface Locale { "pushNotificationDescription": string; "initialAccountSettingCompleted": string; "haveFun": string; - "ifYouNeedLearnMore": string; + "youCanContinueTutorial": string; + "startTutorial": string; "skipAreYouSure": string; "laterAreYouSure": string; }; + "_initialTutorial": { + "launchTutorial": string; + "title": string; + "wellDone": string; + "skipAreYouSure": string; + "_landing": { + "title": string; + "description": string; + }; + "_note": { + "title": string; + "description": string; + "reply": string; + "renote": string; + "reaction": string; + "menu": string; + }; + "_reaction": { + "title": string; + "description": string; + "letsTryReacting": string; + "reactToContinue": string; + "reactNotification": string; + "reactDone": string; + }; + "_timeline": { + "title": string; + "description1": string; + "home": string; + "local": string; + "social": string; + "global": string; + "description2": string; + "description3": string; + }; + "_postNote": { + "title": string; + "description1": string; + "_visibility": { + "description": string; + "public": string; + "home": string; + "followers": string; + "direct": string; + "doNotSendConfidencialOnDirect1": string; + "doNotSendConfidencialOnDirect2": string; + "localOnly": string; + }; + "_cw": { + "title": string; + "description": string; + "_exampleNote": { + "cw": string; + "note": string; + }; + "useCases": string; + }; + }; + "_howToMakeAttachmentsSensitive": { + "title": string; + "description": string; + "tryThisFile": string; + "_exampleNote": { + "note": string; + }; + "method": string; + "sensitiveSucceeded": string; + "doItToContinue": string; + }; + "_done": { + "title": string; + "description": string; + }; + }; + "_timelineDescription": { + "home": string; + "local": string; + "social": string; + "global": string; + }; "_serverRules": { "description": string; }; @@ -1533,6 +1614,10 @@ export interface Locale { "title": string; "description": string; }; + "_tutorialCompleted": { + "title": string; + "description": string; + }; }; }; "_role": { @@ -1861,17 +1946,6 @@ export interface Locale { "hour": string; "day": string; }; - "_timelineTutorial": { - "title": string; - "step1_1": string; - "step1_2": string; - "step2_1": string; - "step2_2": string; - "step3_1": string; - "step3_2": string; - "step4_1": string; - "step4_2": string; - }; "_2fa": { "alreadyRegistered": string; "registerTOTP": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 1b79c399e7..8fd77afd92 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1170,7 +1170,7 @@ _announcement: _initialAccountSetting: accountCreated: "アカウントの作成が完了しました！" - letsStartAccountSetup: "アカウントの初期設定を行いましょう。" + letsStartAccountSetup: "さっそくアカウントの初期設定を行いましょう。" letsFillYourProfile: "まずはあなたのプロフィールを設定しましょう。" profileSetting: "プロフィール設定" privacySetting: "プライバシー設定" @@ -1180,10 +1180,80 @@ _initialAccountSetting: pushNotificationDescription: "プッシュ通知を有効にすると{name}の通知をお使いのデバイスで受け取ることができます。" initialAccountSettingCompleted: "初期設定が完了しました！" haveFun: "{name}をお楽しみください！" - ifYouNeedLearnMore: "{name}(Misskey)の使い方などを詳しく知るには{link}をご覧ください。" + youCanContinueTutorial: "このまま{name}(Misskey)の使い方についてのチュートリアルに進むこともできますが、ここで中断してすぐに使い始めることもできます。" + startTutorial: "チュートリアルを開始" skipAreYouSure: "初期設定をスキップしますか？" laterAreYouSure: "初期設定をあとでやり直しますか？" +_initialTutorial: + launchTutorial: "チュートリアルを見る" + title: "チュートリアル" + wellDone: "よくできました" + skipAreYouSure: "チュートリアルを終了しますか？" + _landing: + title: "チュートリアルへようこそ" + description: "ここでは、Misskeyの基本的な使い方や機能を確認できます。" + _note: + title: "ノートって何？" + description: "Misskeyでの投稿は「ノート」と呼びます。ノートはタイムラインに時系列で並んでいて、リアルタイムで更新されていきます。" + reply: "返信することができます。返信に対しての返信も可能で、スレッドのように会話を続けることもできます。" + renote: "そのノートを自分のタイムラインに流して共有することができます。テキストを追加して引用することも可能です。" + reaction: "リアクションをつけることができます。詳しくは次のページで解説します。" + menu: "ノートの詳細を表示したり、リンクをコピーしたりなどの様々な操作が行えます。" + _reaction: + title: "リアクションって何？" + description: "ノートには「リアクション」をつけることができます。「いいね」では伝わらないニュアンスも、リアクションで簡単・気軽に表現できます。" + letsTryReacting: "リアクションは、ノートの「＋」ボタンをクリックするとつけられます。試しにこのサンプルのノートにリアクションをつけてみてください！" + reactToContinue: "リアクションをつけると先に進めるようになります。" + reactNotification: "あなたのノートが誰かにリアクションされると、リアルタイムで通知を受け取ります。" + reactDone: "「ー」ボタンを押すとリアクションを取り消すことができます。" + _timeline: + title: "タイムラインのしくみ" + description1: "Misskeyには、使い方に応じて複数のタイムラインが用意されています（サーバーによってはいずれかが無効になっていることがあります）。" + home: "あなたがフォローしているアカウントの投稿を見られます。" + local: "このサーバーにいるユーザー全員の投稿を見られます。" + social: "ホームタイムラインとローカルタイムラインの投稿が両方表示されます。" + global: "接続している他のすべてのサーバーからの投稿を見られます。" + description2: "それぞれのタイムラインは、画面上部でいつでも切り替えられます。" + description3: "その他にも、リストタイムラインやチャンネルタイムラインなどがあります。詳しくは{link}をご覧ください。" + _postNote: + title: "ノートの投稿設定" + description1: "Misskeyにノートを投稿する際には、様々なオプションの設定が可能です。投稿フォームはこのようになっています。" + _visibility: + description: "ノートを表示できる相手を制限できます。" + public: "すべてのユーザーに公開。" + home: "ホームタイムラインのみに公開。フォロワー・プロフィールを見に来た人・リノートから、他のユーザーも見ることができます。" + followers: "フォロワーにのみ公開。本人以外がリノートすることはできず、またフォロワー以外は閲覧できません。" + direct: "指定したユーザーにのみ公開され、また相手に通知が入ります。ダイレクトメッセージのかわりにお使いいただけます。" + doNotSendConfidencialOnDirect1: "機密情報は送信する際は注意してください。" + doNotSendConfidencialOnDirect2: "送信先のサーバーの管理者は投稿内容を見ることが可能なので、信頼できないサーバーのユーザーにダイレクト投稿を送信する場合は、機密情報の扱いに注意が必要です。" + localOnly: "他のサーバーに投稿を連合しません。上記の公開範囲に関わらず、他のサーバーのユーザーは、この設定がついたノートを直接閲覧することができなくなります。" + _cw: + title: "内容を隠す（CW）" + description: "本文のかわりに「注釈」に書いた内容が表示されます。「もっと見る」を押すと本文が表示されます。" + _exampleNote: + cw: "飯テロ注意" + note: "チョコのかかったドーナツを食べました🍩😋" + useCases: "サーバーのガイドラインにより必要とされるノートに指定したり、ネタバレ投稿やセンシティブな文章を自主規制したりするときに使います。" + _howToMakeAttachmentsSensitive: + title: "添付ファイルをセンシティブにするには？" + description: "サーバーのガイドラインにより必要とされる際や、そのまま見れる状態にしておくべきではない添付ファイルには、「センシティブ」設定を付けます。" + tryThisFile: "試しに、このフォームに添付された画像をセンシティブにしてみてください！" + _exampleNote: + note: "納豆のフタ開けるのミスったわね…" + method: "添付ファイルをセンシティブにする際は、そのファイルをクリックしてメニューを開き、「センシティブとして設定」をクリックします。" + sensitiveSucceeded: "ファイルを添付する際は、サーバーのガイドラインに従ってセンシティブを適切に設定してください。" + doItToContinue: "画像をセンシティブに設定すると先に進めるようになります。" + _done: + title: "チュートリアルは終了です🎉" + description: "ここで紹介した機能はほんの一部にすぎません。Misskeyの使い方をより詳しく知るには、{link}をご覧ください。" + +_timelineDescription: + home: "ホームタイムラインでは、あなたがフォローしているアカウントの投稿を見られます。" + local: "ローカルタイムラインでは、このサーバーにいるユーザー全員の投稿を見られます。" + social: "ソーシャルタイムラインには、ホームタイムラインとローカルタイムラインの投稿が両方表示されます。" + global: "グローバルタイムラインでは、接続している他のすべてのサーバーからの投稿を見られます。" + _serverRules: description: "新規登録前に表示する、サーバーの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。" @@ -1456,6 +1526,9 @@ _achievements: _smashTestNotificationButton: title: "テスト過剰" description: "通知のテストをごく短時間のうちに連続して行った" + _tutorialCompleted: + title: "Misskey初心者講座 修了証" + description: "チュートリアルを完了した" _role: new: "ロールの作成" @@ -1778,17 +1851,6 @@ _time: hour: "時間" day: "日" -_timelineTutorial: - title: "Misskeyの使い方" - step1_1: "この画面は「タイムライン」です。{name}に投稿された「ノート」が時系列で表示されます。" - step1_2: "タイムラインにはいくつか種類があり、例えば「ホームタイムライン」にはあなたがフォローしている人のノートが流れ、「ローカルタイムライン」には{name}全体のノートが流れます。" - step2_1: "試しに、何かノートを投稿してみましょう。画面上にある鉛筆マークのボタンを押すとフォームが開きます。" - step2_2: "初めてのノートの内容は、あなたの自己紹介や「{name}始めました」などがおすすめです。" - step3_1: "投稿できましたか？" - step3_2: "あなたのノートがタイムラインに表示されていれば成功です。" - step4_1: "ノートには、「リアクション」を付けることができます。" - step4_2: "リアクションを付けるには、ノートの「+」マークをクリックして、好きな絵文字を選択します。" - _2fa: alreadyRegistered: "既に設定は完了しています。" registerTOTP: "認証アプリの設定を開始" diff --git a/packages/backend/src/core/AchievementService.ts b/packages/backend/src/core/AchievementService.ts index 1b8718335b..88fc033859 100644 --- a/packages/backend/src/core/AchievementService.ts +++ b/packages/backend/src/core/AchievementService.ts @@ -86,6 +86,7 @@ export const ACHIEVEMENT_TYPES = [ 'cookieClicked', 'brainDiver', 'smashTestNotificationButton', + 'tutorialCompleted', ] as const; @Injectable() diff --git a/packages/frontend/assets/tutorial/ai.webp b/packages/frontend/assets/tutorial/ai.webp new file mode 100644 index 0000000000000000000000000000000000000000..d9d456494272913452dba78c1b13192db0e7d49d GIT binary patch literal 12238 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 OptO2=XuHEK1_l5~0pKtI literal 0 HcmV?d00001 diff --git a/packages/frontend/assets/tutorial/natto_failed.webp b/packages/frontend/assets/tutorial/natto_failed.webp new file mode 100644 index 0000000000000000000000000000000000000000..87db5f7732de56cf1f9074e38de6dd80c6cdfcba GIT binary patch literal 13196 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 VrApEnyYxZrR!>(ymvv4FO#snnA{YPw literal 0 HcmV?d00001 diff --git a/packages/frontend/src/components/MkInfo.vue b/packages/frontend/src/components/MkInfo.vue index 37490887e1..19402a44ce 100644 --- a/packages/frontend/src/components/MkInfo.vue +++ b/packages/frontend/src/components/MkInfo.vue @@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
- +
+
@@ -16,11 +17,23 @@ import { } from 'vue'; const props = defineProps<{ warn?: boolean; + closable?: boolean; }>(); + +const emit = defineEmits<{ + (ev: 'close'): void; +}>(); + +function close() { + // こいつの中では非表示動作は行わない + emit('close'); +} diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index b31ee78532..d71b07c51b 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
- +
@@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ appearNote.channel.name }} - + @@ -136,7 +136,7 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue new file mode 100644 index 0000000000..9b55a1dca7 --- /dev/null +++ b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue @@ -0,0 +1,135 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue new file mode 100644 index 0000000000..768d00bb07 --- /dev/null +++ b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue @@ -0,0 +1,144 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue new file mode 100644 index 0000000000..75b917f33c --- /dev/null +++ b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue @@ -0,0 +1,87 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkTutorialDialog.vue b/packages/frontend/src/components/MkTutorialDialog.vue new file mode 100644 index 0000000000..e28838425f --- /dev/null +++ b/packages/frontend/src/components/MkTutorialDialog.vue @@ -0,0 +1,260 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkUserSetupDialog.vue b/packages/frontend/src/components/MkUserSetupDialog.vue index d60e01c44d..05b55f77a7 100644 --- a/packages/frontend/src/components/MkUserSetupDialog.vue +++ b/packages/frontend/src/components/MkUserSetupDialog.vue @@ -46,24 +46,32 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -214,10 +234,21 @@ async function later(later: boolean) { box-sizing: border-box; } +.pageRoot { + display: flex; + flex-direction: column; + min-height: 100%; +} + +.pageMain { + flex-grow: 1; +} + .pageFooter { position: sticky; bottom: 0; left: 0; + flex-shrink: 0; padding: 12px; border-top: solid 0.5px var(--divider); -webkit-backdrop-filter: blur(15px); diff --git a/packages/frontend/src/pages/timeline.tutorial.vue b/packages/frontend/src/pages/timeline.tutorial.vue deleted file mode 100644 index 66b8e796e5..0000000000 --- a/packages/frontend/src/pages/timeline.tutorial.vue +++ /dev/null @@ -1,123 +0,0 @@ - - - - - - - diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue index 5b97385ead..cfe270aefb 100644 --- a/packages/frontend/src/pages/timeline.vue +++ b/packages/frontend/src/pages/timeline.vue @@ -8,7 +8,9 @@ SPDX-License-Identifier: AGPL-3.0-only
- + + {{ i18n.ts._timelineDescription[src] }} +
@@ -31,9 +33,10 @@ SPDX-License-Identifier: AGPL-3.0-only