SvelteでSupabaseを使う例

superbase

今日は最近流行りのSvelteスタックで基本的な操作を理解できる例を紹介しますね。 Supabaseのセットアップ 前回のSupabaseの記事を読んでおきましょう。 次に、テーブルを準備します。 このスクリプトを選択します。 “Run”または “Execute” ボタンをクリックして選択したスクリプトを実行します。これにより、データベースに「Todo」テーブルが作成され、必要な行レベルのセキュリティルールも設定されます。 スクリプトが正常に実行されると、テーブルとルールが作成されたことを示す確認メッセージが表示されます。 “Data” タブに移動して、「Todo」テーブルが作成されていることを確認できます。 APIキーの取得 URLとキーの取得 プロジェクト設定に移動して(歯車アイコン)、APIタブを開き、API URLと匿名キー(anon key)を見つけてください。これらは次の手順で必要になります。 匿名キーは、クライアント側のAPIキーです。ユーザーがログインするまで、データベースへの「匿名アクセス」を許可します。ユーザーがログインしたら、キーはユーザー自身のログイントークンに切り替わります。これにより、データの行レベルのセキュリティが有効になります。 注意:サービスロールキーはセキュリティポリシーをバイパスし、データに完全なアクセス権を持っています。これらのキーは秘密に保つ必要があり、サーバー環境でのみ使用され、クライアントやブラウザ上で使用しないでください。 プロジェクトのクローン SupabaseのプロジェクトができたらSvelteのToDoリストのサンプルリポジトリがるのでこれをクローンしましょう。 https://github.com/supabase/supabase/tree/master/examples/todo-list/sveltejs-todo-list 下記のコマンドだとSupabaseの全部のリポがクローンされてしまうのでサイズはちょっと大きいかも ではSvelteの例があるディレクトリに移動してライブラリをインストールしましょう。同じディレクトリにNext.jsとNuxt.jsで作られたToDoリストのサンプルプロジェクトもあるようですね。 ではcode . のコマンドでVSCodeを開きましょう。 ルートディレクトリに.env.exampleのファイルがあるので名前を.envに変更します。 次に中にある環境変数に先ほどSupabaseでとってきた値を入力します。 アプリの起動 ではnpm run devのコマンドでSvelteアプリを起動します。 でサインアップをするとメールにちゃんとサインアップの確認メールが届きました。 そうするとToDoリストに誘導されてタスクを入力できるようになりましたね。 登録されたユーザーはAUthentication(認証)タブのユーザーから確認できますね。 でSvelteのアプリから追加したタスクもデータベースのテーブルに反映されていました。 Googleでのログインを追加する まずは、Gooelデベロッパーコンソールからプロジェクトを作成をします。Google Developer ConsoleからSupabaseのGoogle認証に使用するOAuthのClient IDを取得する手順は以下の通りです: ではSupabaseの認証タブでキーを登録します。 これだけで、OKです。素晴らしいですね。 ではGoogleでもログインできることを確認しましょう。 今日はコードの説明なしですが、次回詳しくSvelteのファイル構成と一緒に見ていきましょう。

Vue3でQuasarのUIライブラリを使おう

始める前に 今日はVueのUIフレームワークを紹介します。先にVueの基本、Viteの使い方、Node.jsの基本を知っていると理解しやすいです。 Quasarフレームワークとは Quasarの特徴を紹介します。 Quasarとは? Quasarで作成できるもの: Quasarのモットーは、コードを一度書き、それをウェブサイト、モバイルアプリ、および/またはElectronアプリとして同時に展開できるフレームワークです。1つのコードベースで最新のCLIを使用してアプリを効率的に開発し、ベストプラクティスに基づく高速なQuasarウェブコンポーネントを提供します。 Quasarを使用する際、Hammer.js、Moment.js、またはBootstrapなどの追加の重いライブラリは必要ありません。軽量化されたこれらのライブラリもQuasarで使用できます。 ここまで読めばQuasarを始めない理由はありません。早速セットアップの仕方を見てみましょう。 条件 使用するコンピュータに、Node.jsのバージョン14以上(または新しいLTS Node.jsバージョン)と、NPMのバージョン6.14.12以上、またはYarnのバージョン1.21.1以上がインストールされていることを確認してください。 このコマンドを実行すると、現在のNode.jsのバージョンがターミナルに表示されます。 このコマンドを実行すると、現在のNPMのバージョンがターミナルに表示されます。 プロジェクトの作成 以下のコマンドを実行してください: createまたはinitコマンドを実行すると、いくつかのオプションがプロンプトで表示されます。あなたのニーズに応じて、CLIのタイプ(ViteまたはWebpack)を選択したり、TypeScriptサポートを追加したり、異なるCSSプリプロセッサを選択したりできます。オプションについて不明点がある場合、デフォルトを選択(Enterキーを押す)して進んでも問題ありません。後で必要に応じて、CLIのタイプ以外のオプションを変更することもできます。 下記にセットアップのオプションの例を記載します。 オプショナル – グローバルCLIのインストール Quasarをより多く活用するために、グローバルCLIもインストールすることをお勧めします。これにより、ターミナルで直接Quasarコマンドを実行したり、テスト用のローカルHTTPサーバーを実行したり、プロジェクトをアップグレードしたりすることができます。 以下のコマンドを使用してグローバルCLIをインストールできます: これにより、Quasarのコマンドをプロジェクトの外からも使用できるようになります。 依存ライブラリをインストール 新しく作成したプロジェクトフォルダに移動し依存ライブラリをインストーします。 次に、以下のコマンドで開発用サーバーを起動します。グローバルCLIをインストールしている場合は: グローバルCLIをインストールしていない場合は、以下のコマンドで実行できます: このコマンドを実行すると、開発用サーバーが新しいアプリケーションをコンパイルし、完了すると新しいアプリがブラウザで開きます。これで開発を開始できます!お気に入りのIDEやコードエディターを使用してアプリを開発できます。 これでデフォルトのQuasarアプリが起動しました! ファイル構成 Quasar Frameworkのデフォルトのフォルダ構成は、クエーサーアプリケーションの基本的な構造を定義します。以下は一般的なQuasarプロジェクトのデフォルトのフォルダ構造の概要です: これらのデフォルトのフォルダ構造は、Quasarアプリケーションの基本的な構造を提供し、効率的な開発をサポートします。ただし、プロジェクトの要件に応じてカスタマイズできます。 コンポーネントを使ってみる では参考までにボタンのコンポーネントを使ってみます。 メインページになっているsrc/pages/Index.vueを下記のように変えましょう。 これでボタンのコンポーネントが表示されましたね。 これらのコンポーネントはグローバルにインポートされているので各.vueファイルでインポートする必要がありません。 ちなみにこのscriptの書き方がちょっと古いので必要に応じてscript setupに書き変えることをお勧めします。 次にテーブルのコンポーネントを使ってみましょう。 このように簡単で軽量なウェブアプリができてしまいます! 慣れてきたらモバイルアプリにも挑戦してみたいですね。

【LangChainドキュメンテーション・JS版】概要とインストール

この記事はLangChainのJavaScriptバージョンのドキュメンテーションを翻訳したものです。 LangChain は、言語モデルを活用したアプリケーションを開発するためのフレームワークです。私たちは、最も強力で差別化されたアプリケーションは、単に API 経由で言語モデルを呼び出すだけでなく、以下の特徴を備えると考えています。 LangChain フレームワークは、上記の原則を考慮して設計されています。 はじめに 以下のガイドをチェックして、LangChain を使用して言語モデルアプリケーションを作成する手順を確認してください。 コンポーネント LangChain は、いくつかの主要なモジュールのサポートを提供しています。各モジュールには、いくつかの例と概念に慣れるためのリンクがあります。各例は、使用されているモジュールの API ドキュメントにもリンクしています。 これらのモジュールは以下のとおりです(複雑さの順): API リファレンス LangChain のすべてのモジュールの API リファレンス、エクスポートされたクラスと関数の詳細なドキュメントは、以下からご覧いただけます。 API Reference 本番環境 プロトタイピングから本番環境への移行にあたり、以下のリソースを開発中です。 追加のリソース アプリケーションの開発に役立つと思われる追加のリソースのコレクションです。 サポートされている環境 LangChain は TypeScript で書かれており、次の環境で使用することができます。 クイックスタート もしも Node.js で LangChain を素早く始めたい場合は、このリポジトリをクローンして README の手順に従って依存関係が設定されたボイラープレートプロジェクトを作成してください。 もしくは、ご自身でセットアップを行いたい場合や他の環境で LangChain を実行したい場合は、以下の手順をご覧ください。 インストール LangChain をインストールするには、以下のコマンドを使用します。 または、以下のコマンドを使用してインストールすることもできます。 TypeScript LangChain は TypeScript で書かれており、すべての公開APIに対して型定義が提供されています。 ライブラリの読み込み ESM … Read more

【Node.js】ChatGPTに自分のデータに対して質問させる

前回の記事ではPythonで同じことを行いました。今回はNode.jsを使ってChatGPTに自分で準備したテキストファイルを読ませてそれに対して質問させるアプリのデモを作成します。 目的 ユーザーがChatGPTに質問をするとOpenAIが持っているデータベースを参照して回答してくれます。しかしこのデータは2021年までしか保存されていないため、それ以降のデータは質問しても回答してくれません。しかし自分で準備しておいたデータ(大量のファイルも可能)を読ませておくことで自分の好きな著者と会話をしたり、最新のデータから必要なデータを検索させるシステムを作成することが可能になります。 プログラムの完成イメージ このように通常ChatGPTが知らないデータでも事前に教えておくことでチャット形式でデータを参照することができるようになります。 使用するテクノロジー 今回はOpenAIのAPIキー(有料、カード登録が必要)が必要になります。先に下記の記事を読んで各フレームワークの理解とキーの取得をしておきましょう。 リポジトリのクローン ではこちらのGitHubのリポからコードをクローンしましょう。 ファイルの実行は下記のコマンドでできます。(APIキーを登録しないとエラーになります。) 下準備 テキストファイルの準備 では、ChatGPTに読み込ませたいファイルを準備しましょう。ファイル名はconst txtFilenameに格納しておきます。 APIキーを環境変数に登録 OpenAIのAPIキーを.envファイルに保存します。 コードの説明 ではindex.jsを見てください。 このコードは、Node.jsを使用してOpenAIのRetrieval-based Question Answering(質問応答)モデルを実装するものです。以下に、コードの主な機能を説明します。 このコードは、OpenAIのモデルとベクトルストアを使用してユーザーの質問に応答するシンプルな質問応答システムを作成しています。ユーザーが質問を入力すると、モデルが応答を生成し、それがコンソールに表示されます。 OpenAIモジュール OpenAIモジュールは、OpenAIの自然言語処理モデルを利用するためのモジュールです。このモジュールは、OpenAIのAPIとの通信やテキスト生成タスクの実行を簡素化するための機能を提供します。 OpenAIモジュールを使用すると、以下のようなことが可能です: OpenAIモジュールは、様々な自然言語処理タスクに対して利用されます。具体的には、文章生成、文章の意味理解、文章の分類、質問応答などのタスクに使用されます。 コードの例では、OpenAIモジュールが使用されています。OpenAIクラスをインスタンス化し、そのインスタンスを利用してOpenAIのモデルを初期化しています。このモジュールを使用することで、OpenAIのモデルを簡単に利用できます。 RetrievalQAChainモジュールとは RetrievalQAChainは、質問応答(Question Answering)タスクを処理するためのモジュールです。このモジュールは、与えられた質問に対して適切な回答を見つけるために使用されます。 具体的には、RetrievalQAChainは以下のような機能を提供します: RetrievalQAChainは、ベクトルストアを使用して質問と回答の類似性を計算し、最も適切な回答を見つけるための機能を提供します。このモジュールは、大規模なテキストデータセットから効率的に質問に対する回答を見つけることができます。 コードの例では、RetrievalQAChainモジュールがOpenAIのモデルとベクトルストアリトリーバーを使用して初期化され、質問が与えられると回答が取得されます。質問と回答の検索は、ベクトルストアの中から最も類似した文書を見つけることによって行われます。 HNSWLibモジュール HNSWLibモジュールは、高次元のベクトルデータの効率的なインデックス構築と検索を可能にするためのモジュールです。HNSWは、ハイブリッドネットワークスワップ(Hierarchical Navigable Small World)と呼ばれるアルゴリズムを使用して、高次元ベクトルの類似性検索を高速に実行します。 HNSWLibモジュールは、LangChainという自然言語処理ライブラリの一部として提供されています。このモジュールは、ベクトルストアの作成と操作を行うためのインターフェースを提供します。 具体的には、HNSWLibモジュールを使用すると、以下のようなことが可能です: HNSWLibは、高次元ベクトルの類似性検索において効率的でスケーラブルな解決策を提供するため、情報検索、機械学習、自然言語処理などの分野で広く利用されています。上記のコード例では、HNSWLibモジュールが使用されており、ベクトルストアのロードや作成に利用されています。 OpenAIEmbeddingsモジュールとは OpenAIEmbeddingsモジュールは、LangChainという自然言語処理ライブラリの一部として提供されているモジュールです。このモジュールは、テキストデータや文章をベクトル表現に変換するための機能を提供します。 具体的には、OpenAIEmbeddingsモジュールを使用すると、以下のようなことが可能です: OpenAIEmbeddingsモジュールは、自然言語処理タスクにおいてテキストデータの表現や解析に広く活用されます。テキストデータをベクトルに変換することで、機械学習モデルの入力や比較、検索などのさまざまなタスクを実行することができます。上記のコード例では、OpenAIEmbeddingsモジュールが使用されており、ドキュメントからベクトルストアを作成する際に利用されています。 ベクトルストアファイル ベクトルストアファイル(Vector Store file)は、テキストや文書の埋め込み(ベクトル化)を保存して管理するためのファイルです。ベクトルストアは、テキストデータを高次元の数値ベクトル空間にマッピングし、各文書をベクトルとして表現します。これにより、類似性の計算や検索などの情報検索タスクを効率的に実行できます。 ベクトルストアファイルは、一般的にデータベースや検索エンジンのバックエンドとして使用されます。ファイルには、テキストデータの埋め込みベクトルや関連するメタデータが格納されます。これにより、大規模な文書コレクションを効率的に管理し、特定の質問や検索クエリに対して迅速な検索結果を提供することができます。 ベクトルストアファイルは、一度作成されると、後続の検索や質問に対して再利用できます。これにより、テキストデータの埋め込み処理を繰り返し行う必要がなくなり、処理時間やリソースの節約につながります。 コードの例では、ベクトルストアファイルを使用してテキストデータを保存し、ユーザーの質問に対して迅速に応答するために利用しています。ファイルが存在しない場合は、テキストデータを埋め込み処理してベクトルストアファイルを作成し、次回以降の検索に使用します。ファイルが存在する場合は、ベクトルストアファイルをメモリに読み込んで再利用します。 OpenAIEmbeddingsモジュールとは OpenAIEmbeddingsは、テキストデータの埋め込み(ベクトル化)を行うためのクラスです。このクラスのメソッドは、与えられたテキストデータをOpenAIの埋め込みモデルを使用してベクトルに変換します。 具体的には、OpenAIEmbeddingsクラスの主要なメソッドは次のとおりです: … Read more

【React・Vue】Ionicでモバイルアプリを作ろう

Ionic 基本

Ionicの特徴について説明しているので先に前回の記事を読んでおいてください。 また、今回の記事はVueフレームワークの基本が理解できている前提で説明します。 今日の目的 Ionicを使用してデモプロジェクトの作成しiOSとAndroidのネイティブアプリにコンパイルしてみます。 今日はVueを使って紹介しますがReactやAngularも同じ要領でできます。 Ionic Vue概要 @ionic/vueは、Vue開発者向けに調整されたツールとAPIを組み合わせた、コアIonic Frameworkのエクスペリエンスを提供します。 Vueバージョンのサポート Ionic VueはVue 3.0.0をベースにしています。もし以前のバージョンのIonic Vueでアプリを作成している場合は、最新リリースにアップグレードし、Vueの依存関係もアップグレードする必要があります。 Vueツール Ionic Vueプロジェクトは通常のVue CLIプロジェクトと同じツールを使用します。つまり、Vue CLIとその機能を使用してビルドします。さらに、スタータープロジェクトにはデフォルトでいくつかの機能が有効になっています。例えば、ルーティングやTypeScriptのサポートなどです。 ネイティブツール Capacitorは公式のクロスプラットフォームのアプリランタイムであり、Ionic VueのウェブアプリをiOS、Android、Webでネイティブに実行します。 Cordovaプラグインを使用する際のIonic Vueの技術的な制約は特に知られていませんが、公式にはCapacitorが推奨されています。現時点では、Ionic CLIのツールではIonic VueのCordova統合をサポートする予定はありません。 Ionicをインストール では下記のコマンドでionicのプロジェクトをセットアップしましょう。myAppはプロジェクト名になりますので自身で好きなものに変えてください。 tabsはテンプレートのフラグになり、vue-routerで設定されたページごとのURLが付いてきます。 ではionic serveのコマンドでローカルホストにデモのアプリが起動されたことを確認しましょう。 ファイル構成 Ionic Vueの一般的なファイル構成は以下のような形式です: このようなファイル構成によって、Ionic Vueアプリケーションはコンポーネントベースのアーキテクチャを活用し、使いやすく保守しやすい構造を実現しています。 capacitorとは Ionicをインストールするとcapacitor(キャパシター)というライブラリが一緒についてきます。 Capacitorは、ウェブ技術(HTML、CSS、JavaScript)を使用して作成したアプリケーションをネイティブアプリケーションとして実行するためのオープンソースのクロスプラットフォームツールです。 Capacitorは、Ionicフレームワークの開発チームによって開発され、Ionicアプリケーションをネイティブに実行するための代替手段として提供されています。Ionicアプリケーションは、一度作成することでiOS、Android、Webなど複数のプラットフォームで動作させることができます。 Capacitorの特徴としては、以下の点が挙げられます: Capacitorは、ハイブリッドアプリケーションやクロスプラットフォーム開発に興味がある開発者にとって、強力なツールとなっています。Ionic Vueなどのフレームワークと組み合わせることで、使いやすいUIとネイティブ機能を組み合わせたアプリケーションを開発することができます。 IonicとCapacitor 上記までをまとめます。Ionicはモバイル用のコンポーネントで、capacitorが実際にWebアプリケーションをモバイルアプリにコンパイルしてくれるツールになります。ちなみにどちらのライブラリも同じ組織によって管理されており、両方を使ってモバイルアプリを作ることが一般的です。しかしcapacitorだけでモバイルアプリを作成することも可能であることは理解しておきましょう。 アプリのビルド 下記のコマンドで実際にデモのアプリをモバイルアプリとして出力してみましょう。 ionic build このコマンドは、Ionicアプリケーションのビルドプロセスを実行します。アプリケーションのソースコードやリソースをコンパイルし、必要なファイルを生成します。ビルドが完了すると、distディレクトリにアプリケーションのビルド結果が出力されます。このディレクトリには、最適化されたHTML、CSS、JavaScriptファイルなどが含まれます。 ionic cap add ios このコマンドは、iOSプラットフォーム向けのCapacitorプロジェクトを追加します。Capacitorを使用してIonicアプリケーションをiOSネイティブアプリケーションにビルドするために必要なファイルと設定を生成します。実行すると、iosディレクトリが作成されます。 … Read more

【ChatGPT】Vue.jsを使ってAIチャットアプリを作成しよう

ChatGPTを使ってチャットアプリを作ろう

今日はVueフレームワークを使用した簡単なチャットアプリを紹介します。初めてChatGPTを使う人にも分かりやすく基本だけをまとめた簡単なものです。しかし、AIが今までの会話を記憶しているように構築できるので、過去の会話を参考にした質問も可能になります。 もちろん、記録を残したい場合は、別にデータベースなどを作成しないとブラウザがリロードした際にすべて初期化されてしまいます。 完成したコードはGitHubのリポジトリから見てください。 完成したものはこんな感じになります。 先に知っておくべきこと User-Agent エラー 上記の記事で紹介したNodeでChatGDPを使ったCLIではopenaiのライブラリを使いました。しかし、クライアント側で実行できるJavaScriptアプリでnpm i openaiでインストールしたライブラリを使ってOpenAIををコールをかけると下記のエラーが出ます。 これは前回の記事で使用したopenaiライブラリはより安全なNode.jsやPythonなどのサーバー側からのコールを許可したもののみになるからです。 今回はaxiosを使ってコールをかけますが、下記にopenAIのエンドポイントにHTTPリクエストを送るaxiosを使わないサンプルコードを紹介しておきます。 今日の記事では、axiosのライブラリを使って作業をするので自分の好みでコードを変えてください。 Vueのセットアップ ではViteを使ってVueのプロジェクトを作成します。 次にaxiosをインストールします。 では、テキストエディタを開いて、早速コードを書いていきます。 コードを書こう では以下のようにApp.vueにコードを書いていきます。 App.vue 補足: 最後にスタイルを追加して完了です。 アプリの検証とまとめ ではnpm run devのコマンドでアプリを起動してテストしてみましょう。 今日は基本のOpenAI APIの使い方を紹介しました。 OpenAIのAPIを使用すると、さまざまなタスクとアプリケーションを構築できます。以下にいくつかの例を挙げます: このように色々なことに活用できそうなので今後も注目が集まりそうです。

【10分でできる】Node.jsを使ってChatGPTのAPIを使用したチャットCLIを作成

Node.jsでChatGPTを使ってみよう

今日の記事で紹介するChatGPTのAPIキーの取得の仕方はこちらの記事を参考にしてください。 完成したコードはGitHubのリポジトリから見てください。 https://github.com/DanNakatoshi/Node-ChatGPT-CLI 初めに この記事では、Node.jsとChatGPTを使用してチャットアプリケーションを構築する基本的な方法を紹介します。Node.jsのCLIアプリとして動作するチャットアプリケーションを作成し、OpenAIのChatGPTを活用してAIとの対話を実現します。このチュートリアルに従えば、誰でも簡単に始めることができます。 このサンプルコードを利用して、メールの起案や他の文章作成、ドキュメントに関する質問への回答、対話エージェントの作成、ソフトウェアに自然言語インターフェースを与えること、さまざまな科目でのチュータリング、言語の翻訳など、様々な活用方法があります。 この記事では、チャットの完成機能を使ってチャットアプリケーションを構築する基本を学びます。プログラマーの方でも簡単に始められるような内容です。このチュートリアルに従って進めれば、自分でもできると思えるようになるでしょう。 このチュートリアルは、gpt-3.5-turboモデルをベースにしています。 前提条件として、JavaScript、CSS、Node.jsの基本的な知識が必要です。 また、chatGPTがホストされているOpenAIプラットフォームのアカウントも必要です。アカウントは無料で作成できますので、こちらから作成してください。 Node.jsを使用してCLIチャットAIアプリを作成する方法について、以下に焦点を当てて説明します。 まず、プロジェクトのためのディレクトリを作成します: これにより、プロジェクトの詳細を追跡するためにpackage.jsonファイルが作成されます。 以下のコードをファイルに追加します: これにより、ES6モジュールのimport文を使用することができるようになります。 次のコマンドを使用してOpenAIをインストールします: メインのコードが実行できるファァイルを作成します。ファイルの名前はindex.jsとしますt: OpenAIモジュールからConfigurationとOpenAIApiをimportし、readlineモジュールからreadlineをimportします: ※readlineモジュールは、Node.jsの組込みモジュールの1つであり、コンソールやターミナル上でのユーザーの入力を扱うためのインタラクティブな機能を提供します。 次のようにOpenAIの設定を構築します: ※APIKeyは他人とシェアしないこと!また.envファイルの環境変数から呼ぶようにしましょう。 このコードはConfigurationオブジェクトの新しいインスタンスを作成します。その中には、アカウントが組織の場合は企業コードとapiKeyの値を入力します。組織の詳細は「設定」で確認でき、apiKeyの情報は「APIキー」で確認できます。既存のAPIキーを持っていない場合は、新しく作成できます。個人アカウントで作成した場合は、組織のコードは不要になります。 次のコードを設定の後に入力して、OpenAI APIの新しいインスタンスを作成します: これをプロジェクト全体で使用します。 以下のコードを入力してcreateChatCompletion関数をテストします: このコードはcreateChatCompletion関数を呼び出し、エンドポイント(https://api.openai.com/v1/chat/completions)をトリガーします。この関数は、使用するchatGPTのモデルと、ユーザーとAIの間のメッセージの配列という引数のオブジェクトを受け取ります。次のセクションで、チャットの履歴を保持し、アプリを改善するためにメッセージ配列を使用する方法について見ていきます。 各メッセージは、送信者(つまり、メッセージがAIからのものであればassistant、人間からのものであればuserという値)と内容(送信される情報)を含むオブジェクトです。 最後に、以下のコマンドを使用してターミナルでファイルを実行します: 数秒後にAIからの応答が返されます。 これでチャットボットを作成するために必要なものがすべて揃いました! ただし、ユーザーがメッセージの内容をコードにハードコーディングするのではなく、ユーザーからの入力をリクエストしてアプリケーションをよりインタラクティブにすることが望ましいでしょう。readlineモジュールがそのために役立ちます。 インタラクティブにするために、最後に入力したコードを削除し、以下を追加します: このコードは、ユーザーが質問を入力できるようにターミナル上にUIを作成します。 次に、ユーザーにメッセージを入力するように促すために、以下のコードを追加します: 最後に、以下のコードを入力します: 上記のコードでは、 ファイルを実行してAIとの対話をしてみましょう。以下のような画像のようになります: これで対話型のCLIチャットが完成しました。 完成したコードはGitHubのリポジトリから見てください。 https://github.com/DanNakatoshi/Node-ChatGPT-CLI 私のPCはアメリカで設定されているので日本語を入力するとコマンドプロンプトがフリーズしてしまいましたが、環境が日本で設定されている場合は問題がないと思います。(もし分かれば教えてください。) これはエンジニアなど一部の人々にとって有用ですが、サーバーサイドにあるためセキュリティが良好です。 しかし、CLIアプリケーションの使用方法を理解できないかもしれない他のユーザーのために、もっと使いやすく、より良いユーザーインターフェース(UI)とユーザーエクスペリエンス(UX)を備えたアプリケーションが必要になることもあるかもしれません。 次回以降では、クライアント側のJavaScriptやVueを使用してより洗練されたチャットアプリケーションを作成する方法を見ていきます。 ではお疲れ様でした。

Vue.jsにVuetifyのMaterial Design Iconを追加する方法

Vueにマテリアルデザインのアイコンを追加する方法

今日はVueにMaterial Designのアイコンの追加の仕方を紹介します。公式のドキュメンテーションが分かりづらかったので、役に立つと思います。 Vuetifyのインストールはこちらを確認してください。 Material Designとは Material Designは、Googleによって開発されたデザインシステムであり、ユーザーインターフェース(UI)のデザイン原則とガイドラインの集合体です。現実の物理的な素材や表面の振る舞いを模倣することで直感的なインターフェースを提供し、ユーザーエクスペリエンスを向上させます。シンプルでクリーンなデザインと視覚的な一貫性を重視し、さまざまなプラットフォームで使用されます。 Material Design Iconsとは Material Design Iconsは、Googleが提供する無料のオープンソースのアイコンセットです。Material Designシステムに基づいており、さまざまなカテゴリやテーマのアイコンが含まれています。ベクターフォーマットで提供され、拡大縮小しても画質が損なわれません。デザイナーや開発者にとって便利なリソースであり、一貫性のあるデザインを実現するのに役立ちます。オープンソースであり、自由に使用できます。 ①VuetifyからMDIをインポートする方法 MDI(Material Design Icons)をVuetifyからインポートする方法です。  src/plugins/vuetify.jsもしくはmain.jsに下記を追加 テンプレートでこのように定義できます。 ②Material DesignのSVGを使う方法 これは、アプリケーションを本番環境向けに最適化する際に推奨されるインストール方法です。Vuetifyコンポーネントで内部的に使用されるアイコンのみがアプリケーションバンドルにインポートされます。アプリケーションの他の部分には、独自のアイコンを提供する必要があります。 src/main.js ではMDIからアイコンをインストールします。 これでコンポーネントから必要なアイコンをインポートしてv-iconコンポーネントで使えるようになります。 他にも、FontAwesomeが使えたりするので必要に応じて調べてみましょう。 お疲れ様です。

VueでGoogleでログインしているユーザーのみにFirestoreのCRUD権限を与える方法

VueとFirebaseでログインしたユーザーのみにVRUD権限

今日はVue3のフレームワークを使ってGCP(Google Cloud Platform)のAuthenticationの機能からGoogleでログインしているユーザーを認知し、ログインしているユーザーのみにFirestoreのデータベースのCRUD権限を与える方法を紹介します。 まず初めにこの記事を読んで理解しておきましょう。 完成したコードはGitHubから確認してください。 https://github.com/DanNakatoshi/Vue-userLogin-Firebase-CRUD 今日の目的 VueとFirebaseを使ってGoogleでログインしているユーザーにデータベースの書き込み権限を与える(記事の投稿など) プロジェクトのセットアップ では上記の記事をもとにしてプロジェクトを作成します。 本日は、Googleの認証システムに集中するので詳しいセットアップやGoogleクラウドの説明は省きます。 では下記のようなコードをApp.vueに記載しましょう。 テンプレート(Template)セクション: スクリプト(Script)セクション: このコードは、Vue.jsとFirebaseを組み合わせて、ユーザーのログイン状態に基づいて表示内容を切り替えるシンプルなアプリケーションの一部です。ユーザーがログインしている場合、表示名やプロフィールへのリンクが表示され、ログアウトボタンが表示されます。ログアウト状態では、ログインボタンが表示されます。 では、main.jsはこのようになります。 このコードは、Vue.jsを使用して作成されたアプリケーションのエントリーポイントです。以下では、コードの主な機能と各セクションについて説明します。 ※APIキーは環境変数からインポートするようにして他人とシェアはしないように! では、vue-routerをインストールして、index.jsをこのように書きます。 このコードは、Vue Routerを使用してルーティングを設定し、Firebase Authenticationを使用して認証状態を監視するためのルーターファイルです。以下では、コードの主な機能と各セクションについて説明します。 このコードでは、Vue Routerを使用してアプリケーションのルーティングを設定し、Firebase Authenticationを使用して認証状態を監視し、必要な場合には適切なページにリダイレクトするルーターナビゲーションガードを実装しています。 ではnpm run devのコマンドでログインとログアウトができることと、ユーザー名の取得ができることを確認しましょう! ここまでできたら、次にFirestoreのデータベースを作成して、デフォルトで表示させるデータとユーザーのプロフィールページを作成してみます。状態管理はPiniaで行うとコードもスッキリするのでまずはPiniaをインストールしましょう。 詳しいPiniaの使い方はこちらの記事を参照して下さい。 ではpinia.jsなど適当なファイルを作成してPiniaを定義していきます。 App.vueではこのようにインポートしてPiniaにユーザーのデータを保管します。 下記の様にdataStoreからPiniaにユーザーのデータを保管させます。 ※必要に応じてこの記事を参照してください。 次にこちらのGitHunのリポを参考にFirestoreのデータベースに接続して初期のデータをロードできるようにしましょう。 例としてpost(記事)コレクションを作成してGoogleのユーザーに付属するuidの情報を割り当てます。これでどのユーザーが記事を作成したか、またuidが一致するユーザーのみ記事の編集や削除が行えるようにします。 まずはfirestoreをmain.jsでインポートしてイニシャライズします。必要な部分だけ追加してください。 次にApp.vueに下記の様なコードを追加します。 postsはVue.jsのリアクティブなデータ(ref)です。refはVue.jsでデータを監視し、変更を追跡するために使用されます。 onMountedはVue.jsのライフサイクルフックの1つであり、コンポーネントがマウントされた後に実行される関数です。つまり、コンポーネントが表示された後に実行される処理を指定するために使用されます。 このコードでは、コンポーネントがマウントされた後に非同期関数が実行されます。非同期関数は即時関数(() => {})として定義されています。 即時関数内部では、FirestoreのgetDocsメソッドを使用して、’post’というコレクション内のドキュメントを取得します。取得したドキュメントはquerySnapshotというオブジェクトに格納されます。 querySnapshotオブジェクトは、取得したドキュメントのスナップショットであり、forEachメソッドを使用して各ドキュメントに対してループ処理を行います。 ループ内部では、各ドキュメントのデータを取得し、postオブジェクトとして作成します。postオブジェクトには、ドキュメントのID、タイトル、および完了フラグの情報が含まれます。 また、console.logを使用してドキュメントのIDとデータをコンソールに表示し、fbPosts配列にtodoオブジェクトを追加します。その後、fbPosts配列もコンソールに表示されます。 最後に、posts.valueにfbPosts配列を代入します。これにより、Vue.jsのリアクティブなデータであるpostsが更新され、コンポーネント内でこれらのデータを使用できるようになります。 では、実際にFirestoreにデータを作成してみましょう。 ではHome.vueに下記のようなコードを書きPiniaに保管したFirestoreのデータベースを読み込ませます。 テンプレート部分では、v-forディレクティブを使用して、dataStore.posts内の各要素に対して反復処理を行います。dataStore.postsは、データストアから取得した投稿データの配列を指します。 v-forディレクティブ内では、postという名前の変数を定義し、dataStore.posts内の各要素を参照します。:keyディレクティブは、各要素の一意な識別子であるpost.idを指定します。これにより、Vue.jsが要素を効率的に追跡し、リレンダーの最適化を行うことができます。 v-cardコンポーネントは、Vue Materialのカードコンポーネントであり、データストア内の各投稿に対して表示されます。:title、:subtitle、:textなどのプロパティには、投稿のタイトル、ユーザー名、コンテンツなどのデータがバインドされます。 これでランディングページにForestoreのデータが表示されるようになりました。 … Read more

【MongoDBの基本コマンド】WindowsでMongndoDBのシェルを使う方法

mongoshの使い方

前回の記事ではwindowsのPCにMongoDBをインストールしてGUIから実際にデータを作成しました。 今回はコマンドラインを使ってMongoDBのデータ操作をしてみましょう。 なぜMongoDBのコマンドを学ぶべきなのか MongoDBのコマンドを学ぶことにはいくつかの理由があります。 これらの理由から、MongoDBのコマンドを学ぶことは、MongoDBデータベースの管理や操作、パフォーマンスの最適化、システム管理、自動化などに関わる様々なタスクを効果的に実行するために重要です。 MongoDBのコマンドは実際にJavaScriptでコードを書くときに役に立つ MongoDBのコマンドは実際にJavaScriptでコードを書く際に非常に役立ちます。 MongoDBはJavaScriptを使用して操作することができるため、MongoDBのコマンドをJavaScriptコードに組み込んで使用することができます。以下にいくつかの具体的な例を挙げます。 以上のように、MongoDBのコマンドをJavaScriptコードに組み込むことで、データベースの操作や管理、パフォーマンスの最適化、自動化などを効果的に実行することができます。 Windowsの環境変数にMongoDBを登録する では前回の記事でMongoDBをインストールしていることを前提にします。デフォルトでは下記のファイルパスが存在することを確認しましょう。 C:\Program Files\MongoDB\Server\6.0\bin 6.0はバージョン名なので、自分のバージョンにあったものがインストールされていればOkです。 次に公式ページからMongoDB Shellをダウンロードします。Zipファイルなので解凍してmongosh.exeファイルがあることを確認します。このmongosh.exeと一緒に入ってきたdll¥ファイルをC:\Program Files\MongoDB\Server\6.0\binに移動しておきましょう。 ではシステム環境変数に上記のパスを登録してwindowsが認識できるようにしてあげます。 ※私のPCが英語なので分かりづらくてすいません。。。 これでコマンドライン(コマンドプロンプト)からmongoshを入力するとMongoDBに接続できたことが分かりますね。 もしうまくいかない場合は直接mongosh.exeをクリックしてコマンドプロンプトが開くところから確認してください。これでmongoshが起動すれば実行ファイル自体は問題がないことが確認できます。 mognodbの基本コマンド mongoshを使用すると、MongoDBデータベースと対話的にやり取りすることができます。以下にいくつかの基本的なmongoshコマンドを示します。 mongoshを起動し、指定したホスト、ポート、およびデータベースに接続します。 接続されているサーバー上の利用可能なデータベースの一覧を表示します。 指定したデータベースに切り替えます。データベースが存在しない場合、新しいデータベースが作成されます。 現在のデータベース内のすべてのコレクションの一覧を表示します。 指定したコレクション内のドキュメントを検索します。クエリはドキュメントのフィルタリング条件を指定します。 指定したコレクションに単一のドキュメントを挿入します。 指定したコレクション内の最初にマッチしたドキュメントを更新します。フィルタは更新対象のドキュメントを絞り込むための条件を指定します。 指定したコレクション内の最初にマッチしたドキュメントを削除します。 実際にデータを操作してみる では上記のコマンドを例にデータを操作してみます。 “test>”は、mongoshシェルでデフォルトのデータベースが”test”に設定されている場合に表示されるプロンプトです。”test”はMongoDBのデフォルトのテスト用データベースです。 mongoshを起動し、デフォルトで使用するデータベースを指定しない場合、mongoshは”test”データベースをデフォルトで使用します。そのため、mongoshのプロンプトは “test>” と表示されます。 このプロンプトの下でコマンドを入力すると、”test”データベース内での操作やクエリが実行されます。ただし、別のデータベースを使用したい場合は、use データベース名コマンドを使用して切り替えることができます。 ではデータベースの一覧を見てみます。 このようにadminやconfigのデフォルトでついてくるデータベースが表示されました。newdbというのは前回に作成したデータベースです。 ではmydbという名前でデータベースを作成します。MongoDBではデータベース名が存在しない場合には新しいデータベースが作成されます。 ではこのようにmydbが作成されtestmydbに切り替わりました。 次にコレクションを作成します。コレクションはリレーショナルDBでいうテーブルのことです。例としてuserというコレクションを作成します。 このようにokが返ってきてDB操作に成功したことが分かりますね。 ドキュメントの挿入: 作成したコレクションにドキュメント(データ)を挿入します。以下は例です。 では先ほど作成したyoshiさんのデータを検索してみます。 このように自動で作成されたidと作成したドキュメントが結果として返ってきました。 まとめ このように簡単にmongodbへ接続してmongoshを使用してデータを操作することができました。 次回はnode.jsからmongodbに接続する方法を紹介していきたいと思います。 お疲れ様でした。