フルスタック

SvelteでSupabaseを使う例

by
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のファイル構成と一緒に見ていきましょう。

Bun: モダンなJavaScriptランタイムの登場

by
Bunの使い方

近年、JavaScriptエコシステムは急速に進化し、新しいツールやランタイムが登場しています。その中でも、Bunという新しいJavaScriptランタイムが注目を集めています。Bunは、モダンなJavaScriptエコシステムに対応するためにゼロから構築された新しいランタイムで、その設計には3つの主要な目標があります。 また、BunはNode.jsの代替として設計されており、Node.jsやWeb APIなど、数百ものNode.jsとWeb APIをネイティブに実装しています。これにより、既存のNode.jsプロジェクトをBunに移行することが容易に行えます。 Bunの目標は、世界中のほとんどのサーバーサイドJavaScriptを実行し、パフォーマンス向上、複雑さの削減、開発者の生産性の向上をサポートするツールを提供することです。JavaScriptエコシステムの未来を明るくするために、Bunは新しい選択肢として期待されています。 新しい時代のJavaScriptランタイムとして、Bunはどのようなプロジェクトに適しているのか、その素晴らしい機能やパフォーマンスを活用して、開発者コミュニティに貢献することで、私たちのJavaScriptエコシステムをさらに進化させています。将来のプロジェクトにBunを取り入れることで、高速で効率的なJavaScriptアプリケーションの開発が可能になるでしょう。 JavaScriptおよびTypeScriptアプリケーションのためのオールインワンツールキット 続いて、Bunの魅力的な特徴について詳しく見ていきましょう。BunはJavaScriptおよびTypeScriptアプリケーション向けのオールインワンツールキットで、単一の実行可能ファイルで提供される「bun」というコマンドラインツールを含みます。 Bunランタイム: Bunの中核には、Node.jsの代替として設計された高速なJavaScriptランタイムであるBunランタイムがあります。これはZigで書かれ、内部ではJavaScriptCoreを活用しており、起動時間とメモリ使用量を劇的に削減します。この特徴により、Bunは高速な実行を実現し、リソース制約のある環境で効果的にプロダクションコードを実行できます。 コマンドラインツール: “bun”コマンドラインツールは、テストランナー、スクリプトランナー、およびNode.js互換のパッケージマネージャーも実装しており、既存のNode.jsプロジェクトで使用する際にも、ほとんどまたは全く変更を加える必要がありません。これにより、以下のような多くのタスクを迅速に実行できます。 Bunはまだ開発中ですが、開発ワークフローを加速したり、サーバーレス関数などのリソース制約のある環境でシンプルなプロダクションコードを実行するのに利用できます。また、Node.jsとの互換性や既存のフレームワークとの統合を向上させる作業も進行中です。Bunの今後のリリース情報を追跡するために、Discordに参加し、GitHubリポジトリをウォッチしてください。 ランタイムとは？: JavaScript（または正式にはECMAScript）は、プログラミング言語の仕様です。誰でも、有効なJavaScriptプログラムを取り込み、実行するJavaScriptエンジンを作成できます。現在最も人気のあるエンジンは、Googleが開発したV8と、Appleが開発したJavaScriptCoreです。どちらもオープンソースです。 ランタイムの役割: しかし、ほとんどのJavaScriptプログラムは単独で実行されるわけではありません。これらは、有用なタスクを実行するために外部の世界にアクセスする方法が必要です。ここでランタイムが登場します。ランタイムは、実行するJavaScriptプログラムに提供される追加のAPIを実装します。ブラウザには、Web固有のAPIを実装したJavaScriptランタイムが組み込まれており、これらのAPIはグローバルなwindowオブジェクトを介して利用できます。 Node.js: 同様に、Node.jsはサーバーなどの非ブラウザ環境で使用できるJavaScriptランタイムです。Node.jsで実行されるJavaScriptプログラムは、OSレベルのタスクを実行するための組み込みモジュール（node:fsなど）およびNode.js固有のグローバル（Buffer、process、__dirnameなど）にアクセスできます。Node.jsはCommonJSベースのモジュールシステムと解決アルゴリズムも実装しており、JavaScriptのネイティブモジュールシステムよりも前から存在しています。 Bun：Node.jsの代替としての設計: Bunは、Node.jsの代替として設計され、以下のデザイン目標を持っています。 最終的な目標は、BunをJavaScript/TypeScriptでアプリケーションを構築するための統一されたインフラストラクチャツールキットとして提供し、パッケージマネージャー、トランスパイラ、バンドラ、スクリプトランナー、テストランナーなどを含めることです。Bunは、新しいランタイムとしてだけでなく、開発者の生産性を向上させるための包括的なツールセットとして、JavaScriptエコシステムを進化させることを目指しています。 Bunのインストール Bunは、いくつかの異なる方法でインストールできる単一の実行可能ファイルとして提供されています。 macOSおよびLinux Linuxユーザー：Bunをインストールするにはunzipパッケージが必要です。Kernelバージョン5.6以上が強く推奨されますが、最小要件は5.1です。 以下は、macOS、Linux、およびWSL（Windows Subsystem for Linux）で使用できるインストールコマンドの例です（curlを使用）： Windows Bunは、Windows向けに限定的で実験的なネイティブビルドを提供しています。現時点では、Bunランタイムのみがサポートされています。 テストランナーやパッケージマネージャー、バンドラはまだ開発中であり、以下のコマンドは無効化されています。 アップグレード 一度インストールされたら、バイナリ自体をアップグレードできます。 Homebrewユーザーの場合は、Homebrewとの競合を避けるために次のようにしてbunをアップグレードしてください。 protoユーザーの場合は、次のようにして最新のcanaryビルドにアップグレードできます。 TypeScript プロジェクト内でBunの組み込みAPIのTypeScript定義をインストールするには、bun-typesをインストールします。 次に、tsconfig.json内のcompilerOptions.typesに”bun-types”を含めます。 TypeScriptサポートに関する詳細なガイドは、「エコシステム > TypeScript」を参照してください。 コンプリーション Bunのインストール時には、シェル自動補完が自動的に設定されるはずです。 設定されていない場合は、以下のコマンドを実行します。これにより、使用しているシェルを特定し、適切な場所に補完ファイルを書き込みます。bunのアップグレードごとに自動的に再実行されます。 カスタムの場所に補完ファイルを書き込むには、次のようにします。 これで、Bunのインストールと設定が完了しました。このユニークなツールを活用して、効率的な開発を行いましょう。 クイックスタート 簡単なHTTPサーバーを組み立ててみましょう。Bunに組み込まれているBun.serve APIを使用します。まず、新しいディレクトリを作成します。 新しいプロジェクトをスキャフォールドするには、bun initを実行します。これは対話型のツールで、このチュートリアルでは各プロンプトのデフォルト回答を受け入れるために単にEnterキーを押します。 「bun init」は、最小のプロジェクトで始めるのを助け、適切なデフォルトを推測しようとします。いつでも^Cを押して終了できます。 … Read more

【埋め込みデータベース】Chromaとは

by

埋め込みデータベースとは 埋め込みデータベース（Embedding Database）は、データの特徴表現を効率的に保存・検索するためのデータベースです。埋め込み（Embedding）は、データを低次元のベクトル空間に変換する手法であり、データの意味や特徴を抽出した表現を得ることができます。 埋め込みデータベースは、一般的に機械学習や自然言語処理のタスクにおいて特に有用です。例えば、顔認識システムでは、顔画像を埋め込みベクトルに変換してデータベースに格納し、そのベクトルとの距離を計算することで、特定の人物の顔を識別することができます。また、文書の類似性検索では、文書を埋め込みベクトルに変換し、ベクトル間の距離を計算して類似した文書を検索することができます。 埋め込みデータベースは、高速な検索やクエリ処理を実現するために最適化されています。特に、近傍探索（Nearest Neighbor Search）などの高度な検索アルゴリズムが使用され、大規模なデータセットに対しても効率的な操作が可能です。 Chromaとは Chromaはオープンソースの埋め込みデータベースです。Chromaは、知識、事実、スキルをLLM（Language Model）にプラグイン可能にすることで、LLMアプリケーションの構築を容易にします。 Chromaは、以下のような機能を提供します： Chromaは、以下の点を重視しています： Chromaには、PythonクライアントSDK、JavaScript/TypeScriptクライアントSDK、およびサーバーアプリケーションが含まれています。 Chromaのインストール Python Pythonでは、Chromaはメモリ内またはクライアント/サーバーモード（アルファ版）で実行することができます。 メモリ内モードでは、Chromaはデータベースをメモリ内に展開し、データを高速に処理することができます。これは小規模なデータセットや一時的な処理に適しています。 クライアント/サーバーモードでは、Chromaはクライアントとサーバーの役割を分けて動作します。クライアントはPythonのChromaクライアントSDKを使用してデータベースにアクセスし、サーバーはChromaサーバーアプリケーションを実行してデータの永続的な保存と検索を担当します。これにより、大規模なデータセットや分散環境での処理が可能となります。 ただし、クライアント/サーバーモードは現在アルファ版であり、開発中の機能です。 Chromadbインストールのエラー 上記のコマンドでchromadbをインストールするとエラーがでるかもしれません。 エラーの原因一つの理由として、Pythonのバージョンがあげられます。最新のPythonをインストールして再度試してみましょう。 次にpipのバージョンも最新のものに更新しておきます。 ウィンドウズのビルドツールからMicrosoftのC++ビルドツールをインストールする このエラーについてはGitHubの ではこのリンクからMicrosoftのビルドツールをダウンロードします。 https://visualstudio.microsoft.com/visual-cpp-build-tools/ 実行ファイルを起動してVisual Studio Installerを起動します。Modifyをクリックします。 次にIndivisual Componentsのタブから、MSVCのツールを探します。これは自分のマシンによって選択するものが変わりますが、Windowsの場合はx64/x86になります。 次にwindows11（若しくは10）のSDKを探しチェックします。 ではこの2つを選択した状態で右下のModifyのボタンを押しましょう。 では再度pip install chromadbのコマンドを実行します。 私の場合はこれでうまくいきました！ これでもまだうまくいかない場合はGitHubのIssueを確認しましょう。 https://github.com/chroma-core/chroma/issues/189

【Python】Flaskを始めよう

by
Flaskを始めよう

Flaskとは Flaskは、Pythonで開発された軽量なWebアプリケーションフレームワークです。Webアプリケーションの構築を容易にするために設計されており、シンプルさと柔軟性が特徴です。 Flaskは、HTTPリクエストを受け取り、レスポンスを返すためのルーティングやビューを定義することができます。また、テンプレートエンジンを使用して動的なコンテンツの生成や、データベースとの連携、セッション管理など、一般的なWebアプリケーション開発に必要な機能を提供します。 Flaskの特徴の一つは、軽量かつシンプルな設計です。これにより、開発者は必要な機能を選択し、カスタマイズすることが容易になります。また、Flaskは拡張性が高く、多くのサードパーティ製拡張モジュールが利用可能です。これにより、データベース処理、認証、API開発など、さまざまな機能を追加することができます。 Flaskは人気のあるWebフレームワークであり、小規模なプロトタイプや中規模なアプリケーションの開発に適しています。また、FlaskはPythonのエコシステムともシームレスに連携することができるため、Pythonの豊富なライブラリやツールを活用することができます。 総じて言えば、Flaskはシンプルさと柔軟性を重視したPythonのWebフレームワークであり、Webアプリケーションの開発を迅速かつ効率的に行うためのツールです。 Flaskのインストール Flaskを始めるためには、以下の手順に従ってインストールを行う必要があります。 macOS/Linux（Bashシェルを使用する場合）: Flaskのインストール: 仮想環境をアクティベートした場合は、コマンドラインで以下のコマンドを実行してFlaskをインストールします: Flaskはデフォルトでローカルホスト（http://127.0.0.1:5000/）でアプリケーションを実行します。Webブラウザを開き、このURLにアクセスすると、”Hello, World!” と表示されるはずです。 これで、Flaskのインストールと初めてのアプリケーションの作成・実行が完了しました。 FlaskにHTMLを使ったテンプレートを作成する方法 Flaskでは、HTMLを使ったテンプレートを作成することができます。以下の手順に従って、FlaskでHTMLテンプレートを作成する方法を説明します。 これで、FlaskでHTMLテンプレートを作成し、動的なコンテンツを表示することができます。テンプレート内では、フローティング変数、条件分岐、ループなどの制御構造を使用して、より複雑なテンプレートを作成することも可能です。FlaskのテンプレートエンジンにはJinja2が使用されているため、Jinja2の文法と機能を学ぶことも有用です。 if __name__ == ‘__main__’: if __name__ == ‘__main__’: と app.run() の組み合わせは、Pythonスクリプトが直接実行される場合にのみ、Flaskアプリケーションを実行するための一般的なパターンです。以下に詳細を説明します。 Pythonのスクリプトファイル（.pyファイル）は、他のスクリプトやモジュールからインポートされることもありますが、また、直接実行されることもあります。 if __name__ == ‘__main__’: は、Pythonインタプリタが現在実行しているスクリプトがエントリーポイント（直接実行されるファイル）である場合に条件が真となります。一方、他のスクリプトからインポートされた場合は条件が偽となります。 app.run() は、Flaskアプリケーションを起動するためのメソッドです。FlaskがローカルのWebサーバーを立ち上げ、アプリケーションを実行します。通常、app.run() はFlaskアプリケーションを実行するために必要な一行のコードです。 組み合わせると、if __name__ == ‘__main__’: ブロック内に app.run() を配置することで、Pythonスクリプトが直接実行された場合にのみ、Flaskアプリケーションが実行されるようになります。他のスクリプトからインポートされた場合には、app.run() は実行されず、アプリケーション自体は起動されません。 このパターンは、Flaskアプリケーションを開発しているときに便利です。開発中に、他のスクリプトからアプリケーションをインポートしてテストしたり、モジュールとして再利用することができますが、同時にスクリプト単体として実行して動作を確認することもできます。 templatesに作成したindex.htmlにCSSとJavaScriptのファイルを追加する Flaskのテンプレート内にCSSファイルやJavaScriptファイルを追加するには、以下の手順に従ってください。 {{ url_for(…) }} は、Flaskのテンプレート内で静的ファイルのパスを生成するための特殊な構文です。これにより、正しいファイルパスが生成されます。 これで、index.htmlテンプレートにCSSファイルとJavaScriptファイルが追加されました。Flaskはこれらの静的ファイルを自動的に探し、リンクやスクリプトとして適切に読み込みます。Webブラウザでアプリケーションを実行すると、CSSが適用され、JavaScriptが実行されるはずです。

【OpenAI】ChatGPTのAPIキーの取得の仕方

by
ChatGDPのAPIキー取得の仕方

※ChatGPTで使用できるAPIは有料のサービスになります。クレジットカードを登録する必要があるので必要に応じて自己責任で進めてください。 ChatGPTとは ChatGPTは、OpenAIが開発した自然言語処理のモデルです。ChatGPTは、言語の理解や生成に関するタスクを行うことができ、対話型のコンテキストで人間のような会話を行うことができます。 ChatGPTは、GPT（Generative Pre-trained Transformer）というモデルのバリエーションです。GPTは、大規模なテキストデータセットを使用してトレーニングされたニューラルネットワークモデルであり、文章の言語モデリングや文章生成に非常に優れた性能を持っています。ChatGPTは、このGPTモデルを対話型の環境に適応させたものです。 ChatGPTは、ユーザーとの対話を通じて質問に答えたり、情報を提供したり、一般的な会話をしたりすることができます。ユーザーの入力に基づいて適切な応答を生成するため、コンテキストを理解し続けることができます。ただし、ChatGPTは、対話に関する事前の知識や特定のトピックの知識を持っているわけではありません。そのため、一部の質問や要求に対しては、正確な回答や適切な対応ができない場合もあります。 ChatGPTは、様々な用途に活用することができます。ユーザーサポート、情報提供、クリエイティブな文章生成、言語学習、エンターテイメントなど、多岐にわたる場面で利用されています。ただし、注意点として、ChatGPTは人工知能であり、完全な理解力や意識を持っているわけではないことを認識しておく必要があります。 日本でChatGPTを使用している会社 日本でもChatGPTを利用している会社はいくつかあります。以下にいくつかの例を挙げますが、これらはあくまで一部の例であり、他にも利用している会社は存在します。 これらの会社は、ChatGPTを使用して顧客サービスの向上や効率化を図ることを目的としています。ChatGPTを活用することで、自動化された対話システムを導入し、迅速かつパーソナライズされた対応を提供することが可能となります。 ChatGPTの使い方 ChatGPTを使うためには、以下の手順に従うことが一般的です。 以上が一般的なChatGPTの使い方の手順です。ただし、具体的な実装や利用方法は、選んだプラットフォームやツールによって異なる場合があります。 API KEYの取得 OpenAIのAPIキーを取得する手順は以下の通りです。 APIキーは機密情報ですので、他人と共有せず、安全な場所に保管してください。APIキーを持っていれば、OpenAIのAPIエンドポイントにアクセスしてChatGPTを利用することができます。

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

by
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

VueとFirebaseでGoogleアカウントを使ったログインシステムを作る

by
ユーザーをGoogleアカウントでログインさせる

前回はGoogleが提供するFirebaseのサービス（Baas:Backend as a Service）を紹介しました。 今日は、このFirebaseとJavaScriptのフレームワークのVueを使ってユーザーのログインシステムを作ってみましょう！ まずは、基本となるメールアドレスを使ってのログインのロジックを理解することが重要になります。順に従って進めていくことをお勧めします。 完成したコードはGitHubからどうぞ。 環境 なぜGoogleアカウントを使ってログインを作る必要があるか Googleアカウントである必要はありません。Twitterでも、GitHubアカウントでもOKです。数年前から見かけるようになったGoogleアカウントを使ってログインなどの認証方法はOAuthと言います、 OAuth方法を使用することで下記のメリットがあります。 以上のことから開発のスピードが速くなることとセキュリティが強化されることが理解できます。 Firebaseは必要か 詳しいFirebaseの説明は前回の記事を参照して下さい。Firebaseはあくまでもオプショナルです。しかし、無料でバックエンドのサービスを始められること、簡単にOAuthのロジックをフロントエンドに組み込められることから使っていて損はないシステムだと思います。またクライアント側はVueで作成するので必要に応じてバックエンド側のみ、フロントエンド側のみのテクノロジーを変更することができるのもメリットになります。 Vueプロジェクトの作成 今回はViteのビルドツールを使用してVueアプリを作成します。詳しいViteの使い方はこちらを参照してください。 ではテキストエディタを開いて基本のページを作成していきます。 Emailを使ったユーザー登録 では参考例として、Emailを使用したユーザー登録を作成していきます。その後にGoogleアカウントを使用したユーザーログインを作成します。 まずは、srcフォルダにFeed.vue、Home.vue、Register.vue,SignIn.vueを作成します。Feed.vueはログインしたユーザーのみアクセスさせるように進めていきます。 次にURLのラウティングを行うためにvue-routerをインストールします。下記のコマンドを実行してください。 次にsrc/routerフォルダを作成しindex.jsファイルを作成します。 ではrouter/indewx.jsに下記の様にページとなるコンポーネントを登録していきます。 つぎに作成しtarouterをmain.jsにインポートして読み込ませます。 次にデフォルトでついてきたHelloWorld.vueを削除して、App.vueに行きます。 App.vueにrouter-viewを登録してURLごとに読み込まれるページViewをレンダーさせます。 App.vue では、各Home、SignIn、Register、Feedのコンポーネントに適当なHTMLを入れてサーバーを起動するとURLごとにViewが変わることが確認できますね。 では最後にナビゲーションバーを作成して、URLではなくボタンからユーザーがページにジャンプできるようにします。 App.vue ここまで問題がないことを確認してください。 Firebaseのプロジェクトを作成 ではFirebaseのプロジェクトを作成していきます。詳しくはFirebaseを始めようの記事を参考にしてください。 手順だけ説明します。 下記のコマンドでfirebaseのライブラリをインストールします。 下記のようなコードがでるのでコピーしておきます。 認証システムを設定する firebaseの構築タブからAuthenticationを選択します。 始めるのボタンを押します。 Emailを追加します。 次にGoogleを追加します。 これで２つのプロバイダが登録されました。 では、npm install firebaseのコマンドを実行していることを再度確認してテキストエディタに戻ります。 次に先ほどコピーしておいたfirebaseのスニペットをmain.jsに貼り付けます。 initializeApp(firebaseConfig);の部分だけ変更してOKです。 認証システムを追加する では下準備が整ったところでいよいよユーザー認証のロジックをコードにしていきます。 ①ユーザー登録（Register.vue） 以上のようなテンプレートを作成します。 Vueの基本が理解されていることを前提に進めています。もしVueの基本を学びたい方はこちらのVue講座を読んでください。 今回注目してほしいところは、firebaseのライブラリからgetAuthとcreateUserWithEmailAndPasswordをインポートしてユーザー登録を完了させ、firebaseにデータを飛ばしてあげたことです。 ではfirebaseに戻り、Usersタブを見ると新しいユーザーが登録されていることが分かります。 もちろん実際には、強いパスワードのみ許可し、パスワードの再確認のインプットも作成すべきですが、今回は省きます。 … Read more

JSひろばアプリ開発5日目：Djangoのデプロイ

by
JSひろばアプリ作成まで～5日目

前回まではJSひろばのVueアプリとDjangoのAPIを大まかに作成しました。 今日はフロントエンドのVueのデプロイよりも先にDjangoのアプリをデプロイして実際のAPIを使ってVueからAPIコールができるようにします。実際にデプロイをしたあとに細かなセキュリティの設定やAPIのデータを入力していくようにします。 作業日 2022年12月14日 作業にかけた時間 5時間 合計作業時間 16時間 作業内容 ドメインの取得Ubuntuサーバーの設定サーバーのユーザー設定PostgreSQLのインストールリポジトリのクローンDjangoのデプロイNginxの設定SSLの取得 ドメインの購入 ドメインは〇〇.comとかウェブサイトのアクセスリンクになる部分ですね。今回は個人的なお勧めのNameCheap.comからドメインを購入します。APIの方もIPアドレスからAPIのエンドポイントを作成しようと思いましたがセキュリティの面からもドメインを使った方が良いとのことなのでDjangoとVueのアプリケーションのどちらにもドメインを割り当てます。 では、asameshi-api.cloudとjs-hiroba.comを購入します。合計で年間12ドルなので安いですね。SSL Certificate（HTTPS）は無料でサーバー側で設定できるのでここで購入する必要はありません。 サーバーにドメインを登録 今回もまた、個人的なお勧めのLinodeサーバーを使います。東京にサーバーを作りましたので先ほど購入したドメインをサーバーに登録しましょう。ではNameCheapのドメイン設定からカスタムDNSを設定します。 ところがLinode側で登録すると以前に設定していたサーバーと紐づけされてエラーになってしまいました。 これは私の方では何もできないので一旦、サポートにお願いをして待ちます。 その間にIPアドレスからデプロイしちゃいます。 サーバーの設定 まずはLinodeでサーバーを作ります。Linodeサーバーを月額500円で始めるという記事があるのでそちらを参考にしましょう。 サーバーを作成したらLinode側でドメインを登録します。 同じようにapiで使う方のドメインも登録しておきます。 サーバーにSSHで接続 詳しいSSHの使い方はこちらの記事で説明しています。サーバー構築で必ず役に立つので理解しておきましょう。 ではSSHクライアントを使ってサーバーに接続しましょう。SSHクライアントのMobaXtermを使います。 Djangoのデプロイ 詳しいDjangoのデプロイの仕方はこちらで説明しています。 同じような手順で設定していきましょう。 この後にデータベースを作成しましょう。 詳しくはDjangoのデプロイの仕方でカバーしているので確認しておきましょう。 次に仮想環境の設定です。 次にGunicornのテストをしました。 でNginxのコンフィグはこのようになりました。 ではNignxをテストして、サービスをリロードします。 ドメインをsettings.pyに登録していなかったのでエラーが出ました。しかしこれでDjangoのエラーのページが出たので正しくNginxとGunicornが動いていることが確認できますね。 これでサーバーを再起動してAPIのURLにアクセスすると問題が解決していることが確認できました。 しかしURLを見ても分かるようにまだHTTPのままなのでSSL Certificateを取得して安全なサイトにするようにします。 この作業はLet’s EncryptでSSL取得の記事を見て行いましょう。 ここで、安いプランのシェアサーバーだったせいか、SSLのセットアップに少し苦難し、２時間余計に時間がかかってしまいました。 特に、DNSを使ったSSL証明のチャレンジ、HTTPからHTTPSへのリダイレクトなど初めての作業だったのでとても良い経験になりました。

JSひろばアプリ開発2日目：スタイルの設定

by
JSひろばアプリ作成まで～2日目

前回の記事ではアプリの概要とデザインを全体像として決めました。 今日は、もう少し具体的なフロントエンドのデザインを設計していきます。ファイル構成（どの段階でコンポーネントにするか）とPrimeVueのライブラリを見ながらサクサク進めていきたいです。 ちなみにバックエンドも同時に進めても良かったのですが、割と簡単な作業になりそうなので、モックのJSONファイルで先にフロントエンドでテストをしてからでも良いと判断しました。ですので先にVueのアプリケーションから固めていきます。 作業日 2022年12月10日 作業にかけた時間 3時間 合計作業時間 6時間 作業内容 Figmaのデザインを形にしていくファイル構成を考えるVueコンポーネントの作成Piniaのインストール PrimeFlexのインストール 前回入れていなかったので、今回使うCSSライブラリのPrimeVueで使うCSSユーティリティをインストールします。 これでクラスを使ってマージンの設定やFlexの設定ができるようになりました。 次にGoogleフォントを追加しました。CDNでfontをリンクさせました、必要に応じてフォントのファイルをダウンロードしてローカルから使うようにすることも考えています。 main.jsに下記のimport ‘@/assets/global.css’をインポートしました。 スタイルはできるだけPrimeVueのものを使い、カスタムしたい場合は.Vueファイルの下に<style></style>を作成してそこにCSSを書きました。 ざっくりと全体像を作成しました。 ユーザーエクスペリエンスの向上のために下記のことを先に達成したいです。 これを実現するにはいくつか方法がありますが、PrimeVueのコンポーネントでダイナミックダイアログというものがあったのでこれで対応していきます。 さらに上記でごちゃごちゃした検索機能とか、ボタンの枠を固定してボタンを押すとこのダイアログが表示されるようにします。なのでこれらはコンポーネントにまとめてあげましょう。 とりあえずポップアップが開くところまではOKですね。 Piniaのインストール 次にPiniaをインストールします。単純にreactive()でオブジェクトとしてデータまとめても良いのですが、propsでごちゃごちゃしていくと後からの修正が大変なので、グロバールでアクセスできるPiniaの方がよいと判断しました。 Piniaの使い方はこちらで説明しています。 ではPiniaのインストールが完了したらmain.jsに追加します。 その後にstore.jsというファイル名でアプリに使うデータをPiniaを使ってここに保管させます。 どのようなデータを保管するか具体的な構成は次回までに考えておきます。 とりあえずこんな感じでPiniaで作成したStoreデータをメインの画面に表示させることができました。 Piniaのファイルはこのように書きました。 App.VueのファイルにはこのようにPiniaをインポートしました。 では、次回にポップアップの中身と検索機能を作成していきたいと思います。 お疲れ様です。

SSHクライアントのMobaXtermでUbuntuサーバーに接続しよう。

by
MobaXtermの使い方

日本の皆さん、こんにちは。 前回はLinodeのサービスを使って月500円でUbutnuサーバーを作りましたね。 しかし、このサーバーに遠隔で入れなければこの先、何もできませんね。 そういうことで、今日は無料ソフトのMobaXtermを使ってこのサーバーに接続してみましょう！ SSHとは SSHはScure Shellの略で、コマンドラインからサーバーに接続することができる技術のことです。 サーバー側はOpenSSHなどでSSH用のポートが空いていることが条件になります。 クライアント側（あなた、もしくはユーザー側）はSSHクライアントを使ってこのサーバーに接続することができます。 SSH接続はWindowsのコマンドプロンプトでもできますし、無料ソフトの有名なPuTTYでもOKです。 今日はとても使いやすいMobaXtermを紹介します。 今日の環境 遠隔で接続できるサーバー サーバーの接続情報（IP、ユーザー名、パスワード） クライアント側のPC（今回はwindows10） MobaXtermのダウンロード では、無料アプリのMobaXtermをダウンロードします。 https://mobaxterm.mobatek.net/download.html 次にダウンロードしたいバージョンを選びます。 Portable（ポータブル）とInstaller（インストーラー）のバージョンがありますが、インストールするほどの者でもないし、USBに入れて持ち歩きたいのでPortableの方(青）をダウンロードします。 ダウンロードされたら解凍し、使いやすいところに置いておきます。 では、実行ファイル(.exe)をクリックしてアプリを立ち上げましょう。 セッションを作成する では上にあるツールバーからSessionを選択し、接続情報を入力しましょう。 ちなみに、SFTP（ファイル転送）や、IPのPingアプリもあるのでこれは本当に便利ですね。 で、SSHをクリック。 Remote Hostが接続先になるのでIPアドレスを入れます。 Specify Usernameにチェックを入れてユーザーネームを入れます。 今回はrootになりますが、rootで接続するのは良い習慣ではないので接続したら、別のユーザーを作成して権限を変えることをお勧めします。(rootだと、分かりやすいし、最高の権限があるためです。） ポートは何も変更していない場合はデフォルトで２２になります。 でOKを押します。 パスワードを聞かれるので、入力し、エンターを押します。 ここで覚えておきたいのがLinuxはパスワードを売ってもカーソルが動かないのでキーボードが壊れたかと思いがちですが、ちゃんと入力されているので、自身をもって打ち込んでください。 MobaXtermに接続情報を保管できるので保管したい人はYESを押してください。 繋がりました！！ ここからコマンドラインを使ってサーバーのアプリを更新したり、ファイヤーウォールを設定したり、何でもできちゃいます。 とりあえずSSHクライアントを使ってUbuntuサーバーに接続できたので今日はここまで！ お疲れ様です。 下に、前に作った動画もあるので是非チェックしてみてください。