最近はクラフト系のゲームをプレイしていたので私が好きなアクション系のゲームを探していたところ、最近発売された"SAND LAND(サンドランド)“というゲームをプレイしました。まだ10時間もたってないですが… このゲームはバンダイから発売されたゲームで「ドラゴンボール」の作者である鳥山明先生が手掛けたアクションRPGになります。 ざっくりとあらすじを言うと悪魔の子である"ベルゼブブ"と仲の良い物知り爺さんの"シーフ”、保安官61歳の"ラオ"と幻の泉を求めて旅をする話になります。漫画とアニメ、映画もあるので興味があれば見てください。 基本操作はベルゼブブで道中は戦車などのマシンを使って移動できます。ファストトラベルもできるので一度行けばすぐに移動できます。 対人戦のアクションも楽しいですが、戦車などのマシンを使った戦闘も面白いです。様々なカスタマイズと強化ができて状況に応じて使い分けていく必要もありますし、不得意なメカで戦う必要も出てきます。 マップはこんな感じで様々なスポットや行った場所、クエストなどが表示されています。 キャラクターの強化もでき、スキルポイントを割り振ることで威力やコンボを追加することができます。 またお供キャラクターの強化もあります。プレイアブルではないですが先頭に参加したり、冒険に役立つスキルを覚えることができます。私は性格的に冒険に役立つスキルを優先しがちですが、戦闘が苦手であればそのスキルを取ると戦いが苦手な人でも楽になるとは思います。 それからマシンのカスタマイズもいろいろあり、部品ごとに効果も様々です。砲台や機関銃、エンジンや装甲、強化チップが存在します。レアリティもあるみたいですが武器の強化次第ではレア度が低くても多少強くなるので、素材が集まり次第強化していくといいと思います。 メインクエストがストーリーの道筋になりますがサブクエストや懸賞金と呼ばれる討伐クエもあるので寄り道もちょこちょこ必要になります。必須ではないですがやると色々もらえますので 原作やアニメを見たことがある人はオチがわかっていると思うのでストーリーを楽しめるかはわからないですが、私は見たことも聞いたこともなかったので現時点でかなり楽しめています。 キャラゲーみたいですが全く知らないのでかなり楽しめている気がします。ゲームの進行度的にはまだまだなのでもっともっと楽しんでいきたいと思います。ではでは。

PCが故障したという話をしたのですが、コンセントから電源が抜けてたというオチでした。 なのでRAGの開発を再開しました！ 前回開発した部分は 質疑応答画面の作成 今回開発する部分は 画面(Next.js)から送られるデータを受け取るエンドポイントをFlaskに設定 ベクトル化するプログラムをクラス化 Flaskも触ったことないのでChat-GPTに質問しながら触ってました。一旦中身は以下の内容にしています。 from flask import Flask, request, jsonify from flask_cors import CORS import pdf_to_model import logging logging.basicConfig(level=logging.DEBUG) app = Flask(__name__) CORS(app) @app.route('/process', methods=['POST']) def process_question(): data = request.get_json() query = data.get('query') logging.debug("Received query: %s", query) try: vector = pdf_to_model.PDFToVector() result = vector.main(query) # 結果を JSON 形式で返す return jsonify(result[0]) # return jsonify({'result': 'Processed result of ' + query}) except Exception as e: logging.error("Error processing query: %s", str(e)) return jsonify({'error': str(e)}), 500 if __name__ == "__main__": app.run(debug=True) ログの設定はする必要はないですが、まだ開発段階なので一旦設定しています。それから"CORS(app)“ですね。少し調べたのですが異なるオリジン間でのリソース共有を可能にするために必要な設定みたいです。そもそも同一のオリジンとは以下の3つが同じであることが条件です。 ...

“The Planet Crafter"ほぼ完クリしました！実績はこんな感じ 1つだけ終わってないのですがこれは時間がかかる上に少し面倒なのでまだ終わってないです。ただ自動化できているのでいずれ終わります。 このゲームはタイトルの通り惑星をテラフォーミングしていくゲームになります。最初は水も緑もない中で3つの要素である"熱”、“気圧”、“酸素"を増やしていきます。これは酸素がない中各地を探検し、いろんな素材を集めて建築を進めていけば大丈夫です。 その他に"バイオマス"という要素を増やしていきます。これはテラフォーミングを進めていくと水と緑が少しづつ増えていきます。その時に新しく増える項目でもう少し細かく分類すると 植物 昆虫 動物 が出てきます。緑が増えると植物が増え昆虫を増やす建築物が作れるようになり、昆虫を増やすと動物を増やす建築物を作れるようになります。この6つの増やしていくことでテラフォーミングが進んでいきます。 ある程度建築物を作ったらロケットでブーストするのもありだと思います。私はめんどくさがりなので最終的にロケット20発ずつ打ってました（笑） このゲームのエンディングは3種類あります。条件はテラフォーミングした後、“ある物"を破壊してこの惑星から脱出することになります。“ある物"はネタバレになりますのでここでは控えます。エンディングは センチネル社に戻る とある民のもとに向かう 密航者となる です。1は上記を行った後抽出プラットフォームを作れば到達できます。2は鍵を10個集めてコンテナに入れると到達できます。3が大変で50万ものトークンと5個のソーラークォーツが必要になります。 2に行く場合はエンディングである物破壊するのですが、その時に必要な鍵を10個集めれば問題ありません。ただ、ヒントは別の場所にあり滝の下の水没した道の先にあります。石板に書かれているので気になった方は読んでください。 3に行くのが最も大変でトークン集めがしんどいです。トークンはアイテムの売買かポータルを作って難破船で取得することができます。アイテムの売買は高くても1個80トークンなので6250個必要になります(遠い目)… 他の方法で難破船に行くというのもあるのですが、探索するのが面倒で道に迷いやすい構造になってますので嫌になります。ただもらえるトークンは1回のポータルで5000くらい稼ぐことができます。運が良ければ1万ですかね？ トークンだけあればいいので荷物も拾わず食べ物と水さえあれば何とでもなるかもしれないですね。貧乏性なのでついつい荷物を拾っちゃうのですが… またポータルを開くにはある程度クォーツが必要になりますのでそれも集めたほうがよさそうですね。めんどくささを考えた結果、私は80トークンを自動生成→自動売買するようなシステムにして放置することにしました。寝てる間にも勝手にやってくれますし。 3に行くヒントはエンディングの爆破をする場所である場所の座標が書かれた台座があります。そこに行くと"パラダイス"という実績がもらえます。その後に1のエンディング条件を満たすとメールが届きます。そこにトークンやクォーツの話が出ています。 少し時間がかかりましたがほぼ終わらせることができました。なかなか手ごたえがありましたが楽しかったです。今度は違うゲームをやってみようと思いますが、そろそろ開発を再開しようと思います。ではでは。

自身のWebサイトを立ち上げてから大体半年が経過しそうなところです。 自身のアウトプットを行う機会を作りたいなと思ってなんとなくで立ち上げたのですが、まだ続けられているので継続する力は一応あるんだなと思ってます。まあ毎日書いてるわけではないですし、書いてるジャンルもバラバラなので微妙なラインですが… さて今回は自身のサイトのパフォーマンス向上したり、閲覧数を増やしたりする試みをしてみようということで少し調べてみました。 使用したツールは以下の2つになります。 Lighthouse axe DevTools 1つ目のLighthouseについてはGoogleの開発者ツールにデフォルトで導入されています。 使い方の流れとしては 自身のサイトにアクセスする 開発者ツールを開く Lighthouseタブでレポートの生成を行う 開発者ツールの開き方はいくつかありますが、右上のオーバーフローメニューのアイコンをクリックして"その他のツール" > “デベロッパーツール"から開くことができます。 もしくは自身のサイトを右クリックして"検証"をクリックしていただいても開けます。 見た結果がこちらになります。メインのページを見てみました。 パフォーマンスが圧倒的に低く、ユーザー補助とSEOがちょい低めですね。下にスクロールすると計測した結果が見れます。改善どころは多いですね。 とはいえ私はサイトの運営とか詳しくないのでChat-GPTに改善策を聞いてみました。 改善方法はいろいろありそうなので少し調べつつプラグインの導入とか考えようと思います。 2つ目のaxe DevToolsはウェブアクセシビリティのチェックに使えます。こちらの拡張機能から利用することができます。 Web Content Accessibility Guidelines (WCAG) などの国際的なアクセシビリティ基準に照らし合わせて評価する、低ければ低いほどよいというものになります。 使い方としてはLighthouseと同様開発者ツールを開いた後、タブからaxe DevToolsを選択します。 タブから開いたら"Scan ALL of my page"を実行します。 実行した結果がこちらです。問題がどのくらい存在するか、どのくらい重要かが表示されます。スクロールすると原因も見ることができます。 こちらの解消法もChat-GPTにも聞いてみました。こちらはプラグインで何とかなるものではなさそうなので少しづつ調べて解消していこうと思います。 さていろいろ調査をしてみましたが、1つ気になることがありました。それはある2つの画像です。 これは同じページで同様の調査をした結果です。どうやら説明の時に利用した画像よりもいいスコアが出ています。ただ、何も解消はしていません。ではなぜこんなことが起きるのでしょうか？ 2つ目の画像では別のPCで確認したものになります。どうやらPCによっても差が出るみたいです。また、実は初めに出した画像も動画を見ながら調査した結果になります。動画を見なければもう少しパフォーマンスがよくなります。 つまり、人によって環境が異なるのでパフォーマンスも変化します。ここで考えるべきことは低スペックな環境に合わせてパフォーマンスを良くした方がいいという点です。 いくら自身のPCで確認してパフォーマンスが良くなっても、古いスペックのスマホやPCで遅いとなればそのサイトに訪れようという気は失せると考えられます。 本当は低スペックのスマホやPCを使って確認したほうがよさそうですが、難しそうなので動画だったり良い画質のゲームを開いたまま確認するのも手ですかね？あるいは激安の低スペックスマホを買ってwi-fiにつないで確認するのもありそうですね。 とはいえここまでする人はいなさそうですが、本気でやるとここまでやることになりそうです。よく言われるのが阿部寛さんのHPですね。爆速で有名ですが、あれを同じように作れたらすごいんだろうなと思います。 ということで少しづつサイトの改善を考えていこう話でした。ではでは。

題名の通りPCが故障しました( ;∀;) 使っていたのはこちらになります。 性能としてはに以下になります。 RAM: 16GB SSD: 512G 11世代 Core i5 GeForce RTX 3050 + Intel UHD Graphics 修理に関してはパソコン修理24に依頼しました。近場の店舗に問診票を提出したので返信が返ってきたら出してこようと思います。 もう一つPCホスピタルという場所もありましたが、値段が少しだけ高かったので見送りました。とはいえ5千円くらいですし、Googleの口コミだと悪い評価もあったので次回故障した場合はこっちに頼もうかと思いますが… 作ったものをGithubにしっかりとコミットしておけばよかったのですが、面倒だったのでやらなかったのが失敗でした。修理から帰ってきたら変更のたびにコミットしようと思います。 社内で作ったものであれば更新するたびにコミットしてますが、現場では修正が完了したらコミットなので見直した方がいいのかもしれないですね。 一応次回はFlaskを使ってpythonとNext.jsの受け渡しの部分を行おうと思っています。 また、前回Next.jsを選定した理由を書きましたが、コストの面について考えていなかったのでもしかしたらReactに変えるかもしれません。予定は未定です。 少し落ち込んでますが、この修理が完了するまではVRで遊んだり本を読んだりして日々を過ごそうかと思います。ではでは。

さて前回までやったこととしては 全データのベクトル化(途中で断念) 画面の作成(Next.jsのインストールと起動) というところまでやってみました。今回は 質疑応答画面の作成 というところまでやってみます。Next.jsは初めて触るので進みが遅々としていますがご了承ください。 さてインストールするタイミングでこのようなことを聞かれました。 Would you like to use TypeScript? » No / Yes Would you like to use ESLint? » No / Yes Would you like to use src/ directory? » No / Yes 他にもいくつか聞かれたので一応Claudeにどんな意味があって導入することのメリットデメリットを聞きながら質問に答えました。大体Yesにしましたが… さて前回の画面表示まで行けたのでここからどう作業を進めればいいのかわかってなかったので聞いてみました。 ということで質疑応答画面を作っていきます。本格的なデザインは気にせずに簡易的なものを作っていきます。 と言ってもからコード書くのは大変ですし、学ぶのにも時間がかかるので今回もClaudeに手伝ってもらおうと思います。それで最初書いてもらったコードがこちら page.jsx import QuestionForm from './components/QuestionForm'; const HomePage = () => { return ( <div> <h1>RAGシステム</h1> <QuestionForm /> </div> ) } export default HomePage; QuestionForm.jsx import { useState } from 'react'; const QuestionForm = () => { const [question, setQuestion] = useState(''); const handleSubmit = (e) => { e.preventDefault(); // 質問をサブミットする処理をここに書く console.log('Submitted question:', question); setQuestion(''); } return ( <form onSubmit={handleSubmit}> <textarea value={question} onChange={(e) => setQuestion(e.target.value)} placeholder="質問を入力してください" rows={5} /> <button type="submit">送信</button> </form> ) } export default QuestionForm; ちなみに上記の書いてる内容はよくわかってないのでこっちはChat-GPTに解説してもらってました。新卒の時の研修で書いたHTMLやJSを思い出します。 ...

前回で一通り作りたいものが作れたのでこの先はWebアプリ化できないかな～？という緩い感じで進めていこうと思います。 前回行ったのは 検索クエリのベクトル化 コサイン類似度の計算 今回行ったのは pdfファイルの全データベクトル化(途中で断念) Web画面の作成(一部) pdfファイルのベクトル化に関しては前回やったのでそれをfor文で回してます。pdfは1つ1つ出力するようにして、後ほど全体を結合しようとしていました。 file_path_list = glob.glob(input_pdf+'/*.pdf') for pdf_path in file_path_list: # 前回やったベクトル化 ・ ・ ・ # JSON形式でベクトルデータベースを保存 with open(json_save_name, 'w', encoding='utf-8') as file: json.dump(vector_database, file, ensure_ascii=False, indent=4) 大体2500ファイルぐらいベクトル化したのですが、9$くらいになってました。残り12000ファイルほどあるので少し時間がかかるのと料金も計50$近くになりそうだったのでいったん中断しました。 別の作業としてWeb画面を作っていこうと思ったのでまずは技術の選定からですね。ここに関してはChat-GPTとClaude両方に聞いてみましたが、Claudeのほうを採用しました。こんな感じです。Googleストアと書いたんですが1ミリも予定はないです（笑） 返ってきた回答がこちら ということでおすすめにしたがってNext.jsにしようと思います。ユーザーのストレスを考えるのは今じゃなくてもいいんですがせっかく自身のスキルにもつながるので選びました。 ちなみにおススメした理由とかわかってなかったのでいくつか聞いてみました。 なぜNext.js(React)+Tailwind CSS や Vue.js はreactに比べてユーザーにストレスがかかりにくいのですか？ 単一ページアプリケーション(SPA)とはどういうものでしょうか？ Flash Of Unstyled Content(FOUC)や、SPAでよくみられるバンク画面の発生とはどういったものでしょうか？ バックエンドではpythonを使用しているのでpythonフレームワークのflaskやdjangoという選択肢もあったと思いますが、なぜ候補から外れたのでしょうか？ フロントエンドフレームワークとバックエンドWebフレームワークの違いは何ですか？ そこからいろいろ聞いていた結果、Next.jsとFlask(python)の組み合わせにしようと思います。Webについては全く分からなかったので色々聞いてみました。流れとしては以下の感じです。 Web画面から入力を受け取る 画面から受け取った入力を引数としてpythonに渡す pythonで引数をベクトル化しコサイン類似度の計算を行う pdfファイルを全てベクトル化して結合したものを取得して、入力に類似しているファイルのタイトルと内容を取得する 取得したタイトルと内容を画面に表示する 1と5がNext.js、2がflask、3と4がpythonという流れでやる予定で、今回は1をやっていきます。 というわけでまたClaudeに使い方を聞いて進めていきます。 これでインストールとプロジェクトの作成が完了して、デフォルトの画面が表示されるようになりました。こんな感じです。 私はvscodeを使っているのですがターミナルからうまく実行できてないので少し調べる必要がありますね。それから"AppData/Roaming"の中にnpmというファイルが必要なのですが、インストールで作成されなかったので手動で作成したりと少し導入で手間取ってしまいました。 今回はここまでにして次回は簡単な画面を作成していこうと思います。恐らく稚拙な画面になりそうですがまずは作るとこらからです。ではでは。

最近発売され2024/04/24まで"30%オフ"かつ"圧倒的に好評"のクラフトゲーム「The Planet Crafter」をやっています。 またクラフトゲーム？と思われますが、私もそう思っています（笑） たまたまSteamを見て気になって、日本語も対応していたので速攻買ってプレイしてみました。 目的はシンプルで惑星をテラフォーミングする！つまり自然豊かな惑星に変えていく！ただこれだけです。 やることは大まかに2つ 探検 クラフト 探検に関してはいろんな場所にいって素材の採掘や設計図の入手、この惑星で起こった出来事の調査を行っていきます。 最初は食料や水がいくつかあるのですがそのままだとなくなりますので、探検で探したり、いずれは自給自足ができるようにクラフトの素材を集めます。 また宇宙が舞台なので酸素が必要になります。酸素自体は簡単に作れますので探検に行く際は必須になります。なぜコバルトから作れるかは不明です。 出来事の調査は必須ではないのでやる必要はありませんが、事故が起きている理由や主人公がテラフォーミングする理由がわかったりします。 クラフトについては採掘や探検でとれた素材をクラフトし、惑星のテラフォーミングをする装置や探索がしやすくなる装備の開発をしていきます。 テラフォーミングをする際に大まかに必要な項目が 酸素：植物を装置に入れて生成 熱：少し珍しい鉱物を利用した装置を使って生成 気圧：ドリル(なぜ？) エネルギー：上記の装置を動かすのに必要 こんな感じです。後で必要な項目もありそうですが最初はここを意識すれば十分です。 それから探検がしやすくなる装備では バックパックの容量拡張 酸素ボンベの容量拡張 採掘速度上昇チップ 移動速度上昇の装備 などいろんな装備やバージョンアップができます。 少しネタバレをすると後々ジェットパックが解放されます。これにより広範囲の探索ができるようになるのでかなり楽しくなります。いくつか酸素ボンベを持っていればマップの端に沿って探検もできます。 だいたいこんな感じのゲームになります。まだゲームの終わりが見えているわけではないですが、半分行ったかどうかぐらいな気がします。ということで最近遊んでいるゲームの紹介でした。ではでは

このpartで目標としていた基本形は作れたことになります。簡単な質問で"タイトル"と"内容"が返ってくるものになります。 前回やったのは 特殊文字の削除 大文字小文字統一 ベクトル変換 今回行ったのは 検索クエリのベクトル化 コサイン類似度の計算 になります。ベクトル化に関しては前回も行ったので同じものになります。 # これが検索用の文字列 QUERY = '保険金が欲しい' # 検索用の文字列をベクトル化 query = openai.embeddings.create( model='text-embedding-3-large', input=QUERY ) # ベクトル取得 query = query.data[0].embedding ちなみにモデルの部分に関しては’text-embedding-3-large’の他に’text-embedding-3-small’もありますのでお好きな方を使ってください。精度はlargeのほうがいいですが料金は下がると思います。 次はコサイン類似度の計算になります。こちらは昔OpenAIでも提供されていたみたいですが、前のバージョンで提供されていたみたいなので他のもので代用します。簡単に自作できますがめんどくさい方はsklearnでも提供されているのでそちらを使ってください。 import numpy as np def cosine_similarity(v1, v2): # ベクトルのドット積 dot_product = np.dot(v1, v2) # ベクトルのノルム norm_v1 = np.linalg.norm(v1) norm_v2 = np.linalg.norm(v2) # コサイン類似度 similarity = dot_product / (norm_v1 * norm_v2) return similarity # 総当りで類似度を計算 results = map( lambda i: { 'title': i['title'], 'body': i['body'], # ここでクエリと各文章のコサイン類似度を計算 'similarity': cosine_similarity(i['embedding'], query) }, vector_database ) # コサイン類似度で降順（大きい順）にソート results = sorted(results, key=lambda i: i['similarity'], reverse=True) これで関連するファイルと内容が取得できます。‘result[0]‘であれば最も関連するもの、‘result[-1]‘であれば関連しないものあるいは反対のものになります。反対かどうかはコサイン類似度の値が負の値になってるかで確認できます。 ...

このpartで基本が8割がた作れました。内容としては簡単な質問をすると"タイトル"と"内容"が返ってくる程度です。まだまだ理想には遠いですね。 前回やったのは PDFファイル読み込み ページ番号取得と削除 色んな空白を削除 今回行ったのは 特殊文字の削除 大文字小文字統一 ベクトル変換 この辺も全てChat-GPT任せでした。特殊文字に関してはURLとメールアドレス、特殊文字の削除になります。まあ私が扱ってるものの中にURLやメールアドレスはあまりなさそうですが、一般的には必要だと思います。 text = re.sub(r'http[s]?://\S+', '', text) text = re.sub(r'\S*@\S*\s?', '', text) text = re.sub(r'[!#\$%&\'()*+,\-./:;<=>?@\[\\\]^_`{|}~]', '', text) 次は大文字小文字の統一ですね。これが少し特殊ですが例えば “１２３ａｂｃｱｲｳｴｵ①②③¹²³"という文字があった時に"123abcアイウエオ123123"となるように変換しています。これもあまり使われてないと思いますが、一応変換しています。 normalized_text = ''.join([unicodedata.normalize('NFKC', char) if not unicodedata.east_asian_width(char) in ('F', 'W', 'A') else char for char in text]) それからベクトル変換ですね。OpenAIの埋め込みベクトルに変換していきます。課金が必要なので他のやり方がないか考えたいところですが、簡単に実装するために使用します。いつかはTF-IDFかWord2Vecを使ってみたいです。 openai.api_key = os.environ['OPENAI_API_KEY'] vector_database.append({ 'title': filename, 'body': text, 'embedding': vector }) 課金といっても10000字くらい埋め込みベクトルに使っても0.01$もかかりませんので数円くらいならお試しで触ってみてください。 一つだけ注意点を話すと8192トークンまでしか入力として受け取れないので、もし文字数が多くなる場合は分割して、それぞれの平均を取るといいかと思います。私の場合はとりあえず7000文字くらいで分割しています。 for i in range(0, len(text), max_tokens): # max_tokens=7000 segment = text[i:i+max_tokens] res = openai.embeddings.create( model='text-embedding-3-large', input=segment ) vectors.append(res.data[0].embedding) average_vector = np.mean(vectors, axis=0).tolist() そういえばいつからかはわかりませんが埋め込みベクトルの数値を取り出す方法が変わってたみたいで、‘res[data][0][embedding]’ から ‘res.data[0].embedding’に変わっています。前の方法が良ければバージョンを下げていただければ大丈夫です。 ...