ねこでじ(Nekodigi)

Nekodigi’s diary

学習中の気づきをまとめています。応援よろしくお願いします

【vocabNet】Pitch deck example of AI generated vocab list app.

Abstract

This pitch deck was created as a part of the UPenn capstone project. VocabNet was invented from my actual pain as an English Learner.

Target

Who wants to know the format of the pitch deck presentation. People eager to start up IT start-up

Presentation

Notes

cat-form-2c7.notion.site

Future plan

It's very important to create a detailed plan, but should not end up discarded. The next step is creating a minimal viable project, and it's very important to narrow down initial scope to maintain the agility of the start up.

IELTS6相当に独学で到達した方法と、IELTS7に到達するために頑張っていること

概要

プログラミングがきっかけで英語を学び始め、かれこれ6年以上になります。
これから、海外留学をしていくためにIELTSのことを考え始め、本格的に勉強を始めたので勉強方法などを共有したいと思います。

ターゲット

海外留学、ワーキングホリデーをしたい人 IELTSの点をどうしても伸ばさないといけない人

スキル別

Reading

Google Translateで日本語のページを強制的に英語に翻訳する設定ができます。強制的に英語に触れる機会ができるので結構おすすめです。
IELTSの公式問題集も良いです。メルカリなら中国から安い輸入品が買えます。 IELTSでは難しい単語はあまりでないですが、英検で難しい単語がいるときはSAT Wordpowerも結構面白いです。

Listening

NetflixのFriendsという番組は、日本からは見れないですが、VPNでSingaporeから接続すると見れます。年齢制限ありのコメディですが、英語学習者はほぼ全員見ているおすすめの番組です。Seinfeld, Odd parents, iCarlyもいいです。
中毒性が高いのが難点ですが、原神はVoice lineが多くてかなり勉強になります。Shadowingしながら見ると、Speakingも鍛えられて一石二鳥です。 Moocだと、テストがあるのでちゃんと理解しているかを確かめられます。結構聞いてるだけになりがちなので、テストしながらやるのはかなり重要です。

Writing

GrammaryとChatGPTを使うと、かなり完成度の高い文章が書けるようになります。
ちなみに、英作文をする機会ですが、MoocのFinantial aidに申し込むと3000文字程度の英語を強制的に書かされるので、お金も浮いて英語力も上がって一石二鳥です。受講中ももちろん、ListeningとReadingの力が上がります。 English Grammer in Useの最後の理解度確認問題をやって、できてないとこだけ重点的に学習すると効率的に文法が学べます。

Speaking

VRChatのEN/JP Exchange worldがかなりおすすめです。治安が良く、参加者が結構頭のいい人が多いです。日本語で話してしまいがちですが、それでも夢のある人や、海外の常識を学べるのはかなり価値があります。 喋り言葉を学びたい場合は、TV ShowやゲームをShadowingするのがおすすめです。学術的なものだと、TED、Kruzgesagtですが、日常会話が不足しがちなのでそちら優先で良いと思います。

Pronounciation

ELSA Speakがかなり便利です。 ただし、どうしてもできない音がある場合は、YouTubeの解説を見て、口の形など根本的な原因を探るのがおすすめです。

現状の課題

Listening, Readingは、問題形式に慣れて、しっかり集中できればBand 8ぐらいまでは到達できる可能性が高いです。
Writingは特に難しく、自分が繰り返し言ってしまいがちな言葉をParaphraseすると良いです。自己流でやってしまうと永遠に良くならないので、ChatGPTにFeedbackをもらうのが良さそうです。 SpeakingはELSA Speakが圧倒的に安くて良いので、自分の会話をしっかり振り返りながら弱点を潰していくと良さそうです。 Band 8, 8, 6, 6でOverall 7に到達できるよう頑張っていきたいです。

【Coursera, Edx】留学希望、海外志望の人におすすめ、CS50とDeepLearning.aiなどを受けてみた話

概要

最近コロナ禍で流行ったオンライン授業(MOOC)ですが、いざ始める勇気がなくてためらっている人も多いかと思います。
留学の向けてMOOCを受けてとても満足したので、その体験を共有したいと思います!

対象

海外の大学に留学したいけど、そんなお金はない人
英語で授業を受けて、海外就職をもっと現実的にしたい人

よくある誤解

海外の授業だから、数十万円ぐらいかかるのでは?

大抵のコースは1万円台で、しかもお金がなければ値段交渉を行うことができ、かなり高い確率で80%前後の大幅な値引きを受けることができます!
海外留学は難しくても、オンラインなら誰でも受けるチャンスがあります!!!
これまで受けた10コース合計でも、2万円程度しかかかっていません。

学校に通いながら、仕事しながらだと難しいのでは?

いつ受けても問題ありません。
頑張れば、コースに記載されている期間の5分の一ぐらいの時間で終わらせることも全然可能です。
対面でディスカッションする必要は全くなく、マイク、カメラOFFも不要で、課題を提出すればすぐにフィードバックが帰ってくる場合がほとんどです。

YouTubeやWebサイトの情報ではダメなの?

一般的なサイトよりも体系的に解説されているので、従来では本でしか学べなかった高度な内容が動画でわかりやすく学べるといったイメージです。
CS50の動画はYouTubeにも上がっていますが、Quizで定着率を常に確かめながら進めるMoocだからこそ、知識が受講後もしっかり残りやすいです。

受けたコースと感想

CS50 AI - Harvard

基礎的な技術の解説が多いですが、かなり進むペースが早くて、上級者でも知らないことがたくさんあると思います。
ページランクやゲームAIなど実用的なプログラミング課題があるのが本当にいいです!
講義のクオリティはものすごく高いと思います。そして、2万円で全ての動画が含まれていて認定証もあるのでいいです。自分はFinantial aidで90% offになりました。

Deep Learning Specialization - Deeplearning.ai

AIはGoogleなどかなり強い競合の講座がある中で、Deeplearning.aiはそれにも負けない人気を誇っている講座です。
最近話題のホットな技術について学ぶことができたり、AIをライブラリを使わず基礎から実装する体験もできるのがおすすめポイントです。 逆に基礎に興味がない人は4番のセクションから始めるのが良いと思います。

Entrepreneur Specialization - UPenn

起業について体系的な解説をしているサイトはかなり少ないので、参考になると思います。
また、単純に夢物語や無謀な起業ではなく、しっかりと現実を踏まえて、資金繰りやチームづくりの話をしっかり解説してくれる点が魅力的です。 最後のCapstoneは新しい動画はあまりなく本当に課題をやるだけですが、学生のクオリティの高いピッチのスライドやプロのスライドをたくさんみれるのでモチベーションには大きくつながります。

感想

Linkedinに認定証を貼れるのはかなり説得力があるかなと思います。
日本だけでしか通用しない資格とは違って、国によらずそこそこの知名度があるのがいいポイントです。
また、海外で働く前に英語で指示を聞いて、課題をやる力がつくのは本当にいい経験になって自信にもつながると思います。
本にも負けないクオリティですが、本と違って、いつでも好きなタイミングで見返せるのが良いです。
Linkedinに貼っておくと、海外からのオファーが若干来やすくなった気がします。

今後の展望

認定証も説得力としてはそこそこにあるのですが、AWS Cloud, GCP, Azureの資格や、海外大学の学位と比べるとやはりインパクトとしては落ちてしまうので、将来的には学位取得を目指していきたいです。
海外で、AIを使ったアプリのスタートアップで働くためにこれからも勉強していきたいです。

【BeatSaber】Best song for English learning and excercise.

Abstract

Beat Saber is one of the most famous VR games, and effective in relief from lack of exercise. I selected a refreshing, perfect-difficulty, clear English song.

Target

  • Gamer or programmer who rarely stands up.
  • English learner who wants to improve pronunciation.
  • People seeking relaxation during work breaks.

Playlist

www.youtube.com

Pickup

Legends never die.

Pure sound. Easy to sing. - Refreshing ★★★★★ - Exercise ★★☆☆☆ - English ★★★☆☆

Stronger

Very intense note. Perfect for working out. - Refreshing ★★★★☆ - Exercise ★★★★★ - English ★★★☆☆

Symphony

Pure sound, and swift movement. - Refreshing ★★★★★ - Exercise ★★★★★ - English ★★★☆☆

Enemy

High-speed rap. - Refreshing ★★★☆☆ - Exercise ★★★★☆ - English ★★★★★

Future plans

Make a good song search engine. Find by genre of song and purpose for playing. Beat sabers have so many EDM by default but some people seeking more elegant songs. More focus on calorie consumption and lyrics quality.

【書くVFX】GPUで動く!流体、FFTブラー、ChatGPTなど機能盛りだくさんのUnityライブラリを公開!

書くVFX

書くVFXは、UnityでHoudini並みの映像表現をするために作られたプロジェクトで、GPUパーティクル、流体シミュレーション、FFTブラー、ChatGPTによる自動生成の全てを備えた他に類を見ないプロジェクトです。

VFX Graphでは出来なかった、非常に自由度の高い表現が可能でVFX Graphとの互換性も兼ね備えています。豊富なサンプルプロジェクトを備えており、簡単なものなら素材を組み合わせるだけでコーディングは不要です。

これまでの技術を全て合わせた自信作で、国内最大級の学生ピッチコンテストである技育展でも発表を行いました。皆さんも書くVFXでワンランク上の映像表現に挑戦してみてください!

実際に使ってみる

Unity 2023, RTX 3060程度の環境が推奨です。 github.com

動作デモ

www.youtube.com

Neurosamaはたった5分で再現できる!簡単なAI Vtuberの作り方を紹介

デモ

www.youtube.com これは無料で再現ができる作り方なので精度は高くありませんが、工夫次第で格段にリアルにすることができます。 www.youtube.com これは英語ですが、自然な音声モデルを使って回答もよりカスタマイズしたものです。工夫次第ではこれ以上のレベルのものも作れます。

Neurosamaを作ろう!

Neurosamaは一から作るのは大変ですが、ChatGPTなどの既存ツールを使うと驚くほど簡単に作ることができます。 狙い通りの回答を得るためにはかなり技術が必要ですが、ここでは知識不要で作れる最も簡単な方法を紹介します。

作り方

STEP1 アバターの表示

VMagicMirrorを使うと、Webカメラなしでもリアルなキャラの動きを表現できます! booth.pm 公式の解説(日本語) malaybaku.github.io

STEP2 ChatGPTを喋らせる

Talk to ChatGPTというChrome拡張機能をインストールすると、ChatGPTを喋らせることができ音声入力にも対応します。 chrome.google.com 拡張機能を入れた後にChatGPTのページを開くと、右上にスタートボタンが出てくるので押してください。

そのままだと、言語や声の種類がうまく設定されていないので、一番右のボタンをクリックして設定を開いてください。

設定をこのようにすると、おなじみのGoogle先生の声になります。Saveを忘れずに押してください。

ChatGPTで返事が返ってきたときに読み上げられたら成功です。

STEP3 音声を元に口を動かす

読み上げ音声をマイク入力の代わりに使うために、このページからVB-Audioをダウンロードします。 vb-audio.com インストールが終わると、おそらく音声が聞こえなくなると思います。 音声の出力先として(仮想スピーカー)CABLE-Inputを選ぶと、(仮想マイク)CABLE-Outputにつながるという仕組みなのですが、CABLE-Outputの音声を自分が使っているスピーカーで出力しなければ音は聞こえません。
詳細の音声設定を開いて

CABLE Outputをダブルクリックして、Listen to this deviceを押してください。このとき、Playback through this deviceで今使ってるスピーカーを選んでください。

VMagicMirrorでリップシンクをチェックして、CABLE Outputを選択するとパソコンから音が出た時に、口が動くはずです。

STEP4 録画、もしくは配信

OBS Studioを使うと、録画も配信もできます。 VMagicMirrorを映したWindow Captureを用意して

右クリックしてFiltersを押して

左下の+ボタンを押してChromaKeyを追加してください。そうすると緑色の背景が透けるはずです。

これでNeurosamaもどきの制作は完了です!ChatGPTに話しかけるとそれに合わせて喋って動いてくれるようになりました!

さらなるクオリティを求めたい方へ

回答の質向上

ChatGPTのAPIを使うとさらにクオリティの高い回答を得られるのですが、使いこなすのは難しいです。そこで少し人間味もあるNeurosamaに近い回答ができる命令文を公開することにしました! 以下のリンクから開けます。 ChatGPTのAPIを使ったリアルな回答

音声の改善

お金はかかりますがGoogle TTSを使うと、もう少しきれいな音声になります。 Google TTSならNeural2 H Pitch 3.6以上がNeurosamaに近いです。

ChatGPTを使った文章修正と差分表示

動作デモ

youtu.be

きっかけ

VRでChatGPTを活用した英会話サービスを作れないかという話が学校で上がり、最終的にボツになったもののプロトタイプとして文章修正と差分表示を行うプロトタイプを完成させました。 ChatGPTは応答が遅いのが難点で、差分表示の部分では専用のライブラリを用いて高速に動作させています。シンプルなプロジェクトのため、簡易的にChatGPTを使ったプロダクトを作りたいプログラマにとっては参考になるかもしれません。 なお、VRでの使用を想定したためUnityでの表示コードも含まれています。

ソースコード

github.com github.com github.com

【ChatGPT】アプリを作って共有できるサービス

動作デモ

youtu.be

すぐに試せるサンプル

読み方表示アプリ 文章成型サンプル

きっかけ

ChatGPTは狙った回答を引き出すのが難しいと感じることも多いですが、適切な質問をすれば狙い通りの答えを得ることができます。 そこでChatGPTの質問文を作ってアプリ化、URLをコピーするだけで簡単に共有できるサービスを作りました。 単純に質問文が共有できるだけではなく、本家ChatGPTにはない例文入力機能やユーザーカスタム入力機能も備えているため、より高度なアプリを作成することもできます。

使い方

Promptから命令文を入力できます。命令文には役割を設定でき、それぞれの意味は以下の通りです。 system:現在の状況の説明や行ってほしい動作を記述 user:ユーザーの質問 assistant:ChatGPTの模範解答 また、重要な機能として{}で囲んだ文字がユーザーが入力できる値になるというものがあります。{}の中にはその値の説明を記入できます。 最後にリンクをコピーすれば同じものが誰にでも共有できます。

開発者向け

github.com github.com

【Stripe】自作アプリを収益化しよう!使用量に応じたサブスクを簡単に適応

収益化はめんどくさい!

実装が大変な使用量に応じたサブスクリプションを簡単に適応できるシステムを開発しました。既存のアプリに、ログインリンクと使用量通知機能を追加するだけで、最小限の労力で収益化が可能です。
サブスクリプション機能の実装は、買い切りのシステムに比べてはるかに難しいです。加えて、単純なサブスクリプションではヘビーユーザーによって赤字になる可能性があり、利用制限も考慮する必要があります。
そこで、過剰な使用を抑えると同時に、新規ユーザーが無料枠を使ってしっかりと体験できるシステムを開発しました。無料ユーザーにも有料ユーザーにとっても使いやすいシステムになっています。

使い方

利用者の手順

  1. ログインリンクからログインします。ログインしなくても、無料枠の使用は可能です。

  2. プランに加入します。支払いは1ヶ月ごとに行われ、追加のTokenがもらえます。

  3. プラン加入後にTokenがなくなった場合は、追加で購入することができます。

管理者の手順

  1. Firestoreにデータ登録 Firestoreにプラン情報を登録します。
/payment/[service_id]
id: string
name: string
allocQuota: string
remainQuota: string
updateAt: Date
plan: {
        free: {//free, basic...
            priceId: string  //price id in stripe
            currency: string  //used for display
            price: number
            mode: string
            quota: number
            quotaLeak: number //quota*[x]  (contribute global quota)
        }
}

2.ログインリンクの設置 ブラウザ毎に固有のID(ユーザーID)を取得し、それを含むログインURLを作成します。
GET [api_url]/subscription/url/:service_id/:user_id/:plan_id?success_url&cancel_url

3.課金対象の動作で、使用量通知 対象動作のコストに応じて、Tokenを使用する指示を出します。 ここでは、固有IDを渡す必要があります。
PUT /quota/use/:service_id/:user_id?amount=

※詳細については開発ドキュメントをご覧ください
Service Framework

デモ

https://service.nekodigi.com/pinyin-ocr

ソースコード

フロントエンド:GitHub - Nekodigi/charge-framework-frontend
バックエンド:GitHub - Nekodigi/charge-framework-backend

今後の課題

他のユーザーに対して操作を行うことはできませんが、自分のユーザーIDがわかっている場合は、Tokenの追加割り当てが可能です。不正使用を防止するために、APIキーを必要にするようにしたいと考えています。
サーバーダウン時のデータを蓄積するために、ログを管理するシステムを並行して実行したいと考えています。
現在は英語のみですが、多言語対応も実現したいです。

【クラス掲示Web】表からカレンダー作成を自動化!Google Appを使ったシステムで学校運営を便利に

Feature

  • Spreadsheetからカレンダーを自動生成
  • 今日のイベントの一覧、カレンダーの一覧を表示
  • 選択した日にちのイベントの確認も可能
  • フルスクリーン表示も可能

Miscellaneous

TODO

  • 複数日にまたがったイベント、時間指定のあるイベント

Setup

  1. SpreadsheetのQuickstart等を使ってtokenを取得 スコープの変更が必要。 const SCOPES = ['https://www.googleapis.com/auth/spreadsheets', '``https://www.googleapis.com/auth/calendar']; https://developers.google.com/sheets/api/quickstart/nodejs

  2. dev.envをboilerplateに沿って入力(Backend) Firebaseプロジェクト、Token、Spreadsheetを準備する必要があります。

  3. Frontendの環境変数 .env.localにBackendをデプロイしたAPI_URLを入力します。上手くいけば予定が表示される様になります。

Usage

STEP 1: Spreadsheetに予定を記入

Sheet名をイベントの名前に変更して、必須項目の[A行:タイトル,B行:開始時刻]を入力します。

D行:担当をカンマ区切りで入力すると、イベントの詳細に表示されます。

以下のURLにアクセスするとカレンダーが更新されます。 [backend url]/[calendar/update](https://class-post-web-backend-o3mmnjeefa-an.a.run.app/calendar/update)

STEP 2: 予定を表示

日にちを選択して、その日の予定を表示できます。下には、クリック可能なカレンダーへのQRコードが表示されます。スマホでの使用を想定しています。

[frontend url]

  • スクリーン表示

フルスクリーンボタンがあり、教室の画面全体に映すことができます。カレンダーと簡易表示がセットで表示されます。

[frontend url]/test

Source Code

  • Frontend

https://github.com/Nekodigi/class-post-web-frontend

  • Backend

https://github.com/Nekodigi/class-post-web-backend

【LINE GPT】チャットGPTをLINEで使えて、機能を無限に追加できるシステム

Demo

https://lin.ee/TRJzQJp

Feature

  • 機能を無限に追加
  • 会話、翻訳、励まし、要約が初めから使える
  • 引数もカスタマイズ可能

TODO

  • カスタム機能入力の簡易化

Setup

  1. ChatGPT API, Line公式アカウント, Firebaseの準備 boilerplateを参考に、Backendのdev.envにsecret等を入力します。

  2. 機能の定義 LINEで友達追加すると会話モードに移行しますが、会話モードも定義する必要があります。go run main.go setupを実行して会話などの基本的な機能を作成してください。

Usage

  1. 会話モードを使う 友達追加すると自動で会話モードに移行します。何かメッセージを送ると、GhatGPTがそのまま応答します。

  1. モード(コマンド)の切り替え デフォルトでは、[会話,翻訳,励まし,要約]が定義されています。命令名をチャットに入力すると、コマンドが切り替わり、以降のチャットの応答が変化します。

  1. カスタムコマンドの作成 カスタムと入力すると、作成が始まります。以下の順番で入力してください。

命令名
テスト命令
命令文
[{"Role": "user", "Content": "%s:%s"}]
命令文の%sにはユーザが入力した引数が入ります。最初の%sはユーザーからの入力で置き換えられます。それ以降の%sは、カスタムコマンドに入るときに一度だけ聞かれる引数で置き換えられます。
引数
["連結する命令"]
配列で、引数の呼び名を指定します。引数がない場合は空配列[]を指定します。

  1. カスタムコマンドを使う コマンド名を入力すると、カスタムコマンドが実行されます。引数がある場合は先に引数を聞かれます。カスタムコマンド実行中は、ユーザーの入力をもとにChatGPTの命令文が自動生成され、それに応じた返答が返ってきます。

Source Code

  • Backend

https://github.com/Nekodigi/line-gpt-dev

【Pinyin OCR】画像や選択中の中国語のピンインと意味を表示するChrome拡張機能

Demo

www.youtube.com

Feature

  • 画像から中国語を読み取る
  • ブラウザで選択中の文字を読み取る
  • 中国語の拼音を表示
  • 中国語の翻訳を表示
  • 他言語が検出された場合は、中国語に翻訳して表示
  • 選択した中国語の読み上げ

TODO

  • デザイン改善
  • Chrome Extensionへの投稿
  • 文字データの貼り付け
  • 翻訳先の言語の選択
  • 読み上げ音声の選択
  • 読み上げの禁止

Setup (for Developer)

  1. GCPの準備(Backend) 実行にはTranslate API, Vision AIが必要です。また、デプロイ先はCloud Runを推奨します。dev.envをboilerplateを参考に入力してください。
  2. 拡張機能の登録(Frontend) Backendのデプロイ先URLをsrc/env.tsを作成して入力します。yarn watchでdistフォルダを更新します。ChromeでDeveloper modeを有効にしてから、そのdistフォルダをLoad unpackedからロードします。

Usage

STEP1 画像から中国語を読み取る

Screenshotを撮りコピーします。拡張機能をクリックしポップアップを開いたら、ctrl+v等でペーストするかUPLOADボタンを押して画像をアップロードします。成功すると数秒で中国語が表示されます。

STEP2 Webサイトの文字を読み取る

画面の文字を選択した状態でポップアップを開くと、選択中の文字が表示されます。

STEP3 中国語を英語に翻訳する

中国語を選択すると、選択した部分の翻訳が表示されます。

STEP4 他言語を中国語に翻訳する

同様の手順で他言語を選択した状態でポップアップを開くと、中国語に翻訳された状態で表示されます。

STEP5 中国語の読み上げ

ポップアップを開いたタイミング、ポップアップ内で中国語を選択したタイミングの両方で再生されます。

Install

Chrome Web Storeへの登録が完了しました! 他の拡張機能と同様にワンクリックでインストールできます。

Pinyin OCR - Chrome Web Store

Developerモードを有効にしdistフォルダーをLoad unpackedから読み込んでください。

  • 参考

PC向けのGoogle Chromeに拡張機能/プラグインをインストールする方法

  • ダウンロード

Source Code

  • Backend
  • Frontend

【Webマークシート】登録不要&無料でマークシートを10秒で作れる!自作アプリを紹介。

Webマークシートとは

登録不要&無料でマークシートを10秒で作れる、現役学生が作った学生のためのWebアプリです。 印刷不要のマークシートで、TOEICの模試など資格試験の勉強をもっと効率的にしたいという思いから作成しました。 ページをリロードしても回答が「消えない」ので安心して回答することができるだけでなく、回答のダウンロードやアップロードもできるので、いつでも自分の回答を「見直す」ことができます。

使い方

nekodigi.github.io

「さっそく作る」の下にある、「問題数を入力」からマークシートの問題数を設定してください。 問題数を決めたら、選択肢をタップするだけですぐに回答を始められます。特別な知識は必要ありません。

保存

「問題数を入力」の横にあるボタンは、右から「ダウンロード」、「アップロード」、「全てリセット」のボタンになっています。 回答をダウンロードして過去の回答を保存してから、全てリセットして新しい問題に取り掛かることができます。

開発者に向けて

このプロジェクトはReact・MUIを使ったモダンな構成で作られています。 複雑な機能がないため、特に初心者の方にオススメです。 github.com

【原神】最小のモラで、最高の聖遺物を!新しくなった自作ツールを紹介。|聖遺物Sim

最小のモラで、最高の聖遺物を!

「原神」のプレイヤー必見!最小のモラで最高の聖遺物を求めることができる新しいツール「聖遺物Sim」がついに完成しました。

このツールには他サイトにはない機能があり、未強化の聖遺物を入力するだけでレベル20時点のスコアを予測することができます。充実したフィルタ・ソート機能と組み合わせて思い通りの聖遺物を作り出すことが出来ます。

画面のデザインも一から再設計され、スマホユーザーに最適な使いやすさを追求しています。ゲーム画面をアップロードするだけでAIが自動入力してくれるので、面倒な入力作業も不要です。

日本語と英語、ダークモードとライトモードの切り替えなど、自分好みにカスタマイズできます。保存データはダウンロードやアップロードができ、Genshin Optimizerなどの他サービスとも互換性があります。

このツールを使って「原神」の世界をもっと楽しみましょう!

Youtube解説

www.youtube.com 動画版の解説もご利用いただけます。

使い方

このリンクから、「聖遺物Sim」に移動できます。

artifact.nekodigi.com

Step1 スクリーンショットの準備

原神のゲーム画面から聖遺物一覧をスクリーンショットして準備します。聖遺物が収まるように撮ってください。

Step2 聖遺物エディタを開く

聖遺物Simに移動したら「エディタを開く」をタップします。

エディタが開いたら「聖遺物を追加」をタップして聖遺物エディタを開くことができます。

Step3 聖遺物の追加

「持ち物画面をアップロード」をタップしてアップロードします。自動入力のロードまで時間がかかることがあるので注意してください。

うまくいくと、レベルやステータス、予測スコアが自動的に更新されます。追加して保存するには「追加」をタップします。うまくいかない場合は、正しい値をタップして修正するか、手動入力することもできます。

Step4 目的の聖遺物を探す

スコア、レベル、聖遺物セットなどでフィルタリングできます。予測スコアを基にソートして、優秀な聖遺物を選択することができます。

Step5 聖遺物の管理

データベースから一括削除やデータの移行ができます。

番外編1 攻撃力の代わりにHPを使う場合などは?

まず、計算式が書かれている部分をタップしてください。

「計算式エディタ」が開いたら、「重み」の設定から、攻撃力%を0(0倍)に、HP%を1(1倍)に設定してください。そうすることで攻撃力%は無視され、HP%×1した値がスコアに反映されます。
同様の手順で、元素チャージを0.5倍した値をスコアに加えるといった微調整も可能です。熟知等の実数値を使う場合は、そのままでは大きくなりすぎるので、0.1といった小さい重みを設定してください。

無料で使おう!

artifact.nekodigi.com

「聖遺物Sim」は誰でも無料で使うことが出来ます!Webで簡単に試せるのでぜひ使ってみてください。

開発者に向けて

今回の開発にあたり、Frzycさんが開発するOSSであるGenshin Optimizerを参考にさせていただきました。

github.com

本プロジェクトもOSSとしてGithubに公開しています。

github.com

また、Tesseract OCROpencvを使った画像認識プログラムのみを切り分けたものも用意しています。

github.com

原神のツール開発に興味がある方、モダンWeb開発に興味がある方におすすめです!

【QRチャット】アカウント不要、QRコードを読むだけで使えるチャットアプリの開発。

きっかけ

「写真を共有したいんだけど、SNSアカウントを共有してないからできない」という経験はありませんか? OSやデバイスが違っても、初対面の人でも、このアプリを使うと簡単にチャットしたりファイル共有ができます。

使い方

chat.nekodigi.com

チャットを始めるボタンをタップして、新しいチャットを始めます。

新しいチャットを始めたら、メンバーを追加ボタンを押します。お友達に表示されるQRコードを読み取ってもらうと参加できます。

ファイル追加ボタンを押すと、ファイル追加もできます。現時点では10MBまで対応していること、送信に時間がかかってしまうことに注意してください。

ソースコード

フロントエンドはNext.js,Mui、バックエンドはNode.jsを使用し、Firebaseにデプロイしています。