MongoDBで使われるmongooseのフレームワークを解説

Mongoose

Mongooseは、MongoDBを操作するためのNode.js用のオブジェクトモデリングツールです。Mongooseは、MongoDBのドキュメントベースのデータモデリングをより簡単に行うための機能やAPIを提供しています。 mongooseの機能 具体的に、Mongooseは以下のような機能があります: Mongooseを使用することで、MongoDBの操作をより簡潔で直感的なコードで行うことができます。また、データモデルの定義やバリデーションのルールの管理、データの関連付けなどの作業も容易になります。 mongooseの開発者 Mongooseはオープンソースのプロジェクトで、開発と管理はGitHub上で行われています。Mongooseのリポジトリは、https://github.com/Automattic/mongoose で公開されており、オープンソースコミュニティによって管理されています。 Mongooseの初期バージョンは、オープンソースコミュニティのメンバーであるAaron Heckmannによって作成されました。その後、Mongooseは多くのプログラマーによって開発とメンテナンスが行われています。現在、Mongooseの主な管理は、オープンソース企業Automatticの一部であるMongooseチームによって行われています。 mongooseと相性の良いフレームワークは MongooseはMongoDBとの連携に特化したライブラリであり、主にNode.jsのバックエンドで使用されます。そのため、Node.jsベースのフレームワークと相性が良いです。以下に、Mongooseと相性の良いいくつかのNode.jsフレームワークをいくつか紹介します。 これらのフレームワークは、Mongooseとの連携を容易にするための豊富なエコシステムと共に利用されることが多いです。ただし、Mongooseは純粋なJavaScriptのMongoDBドライバーとも組み合わせて使用することができるので、他のフレームワークでも利用することは可能です。 mongooseの短所は MongooseはMongoDBとの連携を容易にする強力なツールですが、いくつかの短所もあります。 これらの短所は、Mongooseが提供する便利な機能と比較して考える必要があります。プロジェクトの要件やデータモデリングの複雑さに応じて、Mongooseを選択するかどうかを検討することが重要です。 ※ORMとは: ORM(オブジェクトリレーショナルマッピング)は、オブジェクト指向プログラミングとリレーショナルデータベースの間のデータ変換を自動化するテクニックやツールです。データベースではテーブルや関係でデータを扱いますが、オブジェクト指向プログラミングではデータをオブジェクトとして表現します。ORMはこのデータモデル間のマッピングを行い、オブジェクトとデータベースの相互変換を容易にします。開発者はORMを使用することで、データベースの詳細な操作やSQLクエリの作成と実行について意識する必要がなくなり、オブジェクト指向の方法でデータベースを操作できます。 オーバーヘッドとは: オーバーヘッド(Overhead)とは、ある処理や操作を実行する際に付随する余分なコストや負荷のことを指します。具体的には、時間、メモリ、リソースなどの面での追加的な負荷や消費を意味します。 まとめ Mongooseは非常に強力なツールであり、MongoDBとのインタラクションを簡素化するための優れたORM(オブジェクトリレーショナルマッパー)です。 Mongooseを学ぶことで、データベースの操作やデータモデリングをより効率的に行うことができます。Mongooseの豊富な機能を活用し、データベースのスキーマ定義、データの作成・読み取り・更新・削除、クエリの作成などを学びましょう。 Mongooseを学び始める前に、MongoDBの基礎知識を身につけることをお勧めします。MongoDBのドキュメントやチュートリアルを参照し、コレクション、ドキュメント、クエリの基本的な概念を理解しましょう。 次に、Mongooseのドキュメントを読み、APIの使い方や概念を学びましょう。モデルの作成、スキーマの定義、バリデーション、フック、クエリの実行などについて理解を深めましょう。 最終的には実際のプロジェクトでMongooseを使用してみることをおすすめします。 では、お疲れ様でした。

Svelteを始めよう!Reactよりも使いやすい?

Svelteとは

今日はSvelteのフレームワークを紹介します。 Svelteってどんなフレームワーク Svelteは、JavaScriptベースのフロントエンドフレームワークです。Svelteは、コンパイル時にコンポーネントを効果的に変換し、ブラウザで実行可能なJavaScriptコードを生成することで、高速なパフォーマンスと効率的なバンドルサイズを提供します。 Svelteの特徴的な点は、実行時にライブラリコードを含まずにコンポーネントをビルドすることです。ReactやVueなどの他のフレームワークと異なり、Svelteは仮想DOM(Virtual DOM)を使用せず、変更を追跡するための高度なリアクティビティシステムを備えています。これにより、ブラウザでの実行時のパフォーマンスが向上し、アプリケーションの応答性が向上します。 Svelteのコンポーネントは、HTML、CSS、およびJavaScriptを組み合わせて記述します。コンポーネント内の変数や状態を宣言することができ、これらの変数の変更は自動的にコンポーネントの再レンダリングを引き起こします。また、Svelteではトランジションやアニメーションの作成も容易であり、ユーザーインターフェースを豊かにするための強力なツールが提供されています。 Svelteの他の特徴には、ReactやVue.jsなどの他のフレームワークで使われている機能や構文のいくつかが組み込まれていることがあります。また、Svelteアプリケーションは、単一のJavaScriptバンドルファイルとして出力されるため、配信やホスティングが容易です。 総合的に言えば、Svelteは、高速なパフォーマンス、効率的なバンドルサイズ、シンプルな構文、および強力なリアクティビティシステムを提供するモダンなフロントエンドフレームワークです。 Svelteを開発した人は誰 Svelteは、Rich Harris(リッチ・ハリス)という開発者によって作成されました。Rich Harrisは、The New York TimesやThe Guardianなどのメディア企業でフロントエンド開発者としての経験を積んでいました。 彼は、既存のフロントエンドフレームワークが仮想DOMに基づいて動作することに対する懸念を抱いていました。そのため、Svelteを作成し、仮想DOMの代わりにコンパイル時に効率的なコードを生成することで、高速で効率的なフレームワークを提供しました。 Svelteは2016年に最初に発表され、以降、多くの開発者によって利用されています。Rich Harrisは、Svelteのリードデベロッパーとして、フレームワークの進化と改善に取り組んでいます。彼の革新的なアイデアと貢献により、Svelteはフロントエンド開発コミュニティで注目を集めています。 日本でSvelteを使っている会社 ではSvelteの利点や使うべき状況が理解できたところで早速Svelteのプロジェクトを作成します。 SvelteKitとSvelteの違い SvelteとSvelteKitは、どちらもSvelteフレームワークをベースにしたツールですが、いくつかの重要な違いがあります。 これらはSvelteとSvelteKitの主な違いです。Svelteは効率的なUIの構築に特化しており、SvelteKitはフルスタックのフレームワークであり、ルーティングやサーバーサイドレンダリングなどの機能を提供しています。どちらを選択するかは、プロジェクトの要件と目標によって異なります。 Svelte / Svelte Kitを始めよう ①Node.jsのインストール: SvelteはNode.js環境で動作しますので、まずはNode.jsをインストールしてください。公式ウェブサイト (https://nodejs.org) から最新の安定版をダウンロードし、インストールしてください。 ②Svelteアプリケーションの作成: Svelteプロジェクトを作成するために、ターミナル(コマンドプロンプト)を開き、以下のコマンドを実行します。 myappの部分は自分のプロジェクト名を入れましょう。 ※ちなみにViteでもプロジェクトの作成ができます! では実際にnpm run devのコマンドでアプリを起動してみましょう。ダイナミックでインタラクティブなウェブアプリが表示されましたね。(demoをインストールするとサンプルコードが見れます。) Svelte Kitのファイル構成 Svelteの一般的なファイル構成は、以下のような形になります。 SvelteKitの一般的なファイル構成は、以下のような形になります。ただし、プロジェクトの設定や追加のモジュールの導入によって、構成は変化する可能性があります。 終わりに いかがでしたでしょうか?Svelteを学ぶことは、モダンなフロントエンド開発において非常に有益です。Svelteはシンプルで直感的な構文を持ち、パフォーマンスに優れたアプリケーションを構築することができます。ReactやVueと合わせて是非、活用してみてください。

【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に接続する方法を紹介していきたいと思います。 お疲れ様でした。

MongoDBを始めよう!インストールとGUIを使ってデータを作成する方法

WIndows MongoDB インストール

MongoDBとは MongoDBは、NoSQL(非関係型)データベースの一種です。従来の関係型データベース(例:MySQLやPostgreSQL)とは異なるアプローチを採用しており、非常に柔軟なデータモデルを提供します。 よくリレーショナルベータベースのPostgreSQLやMySQLなどと比較されますが、アプリケーションによってリレーショナルデータベースとMongoDBのようなNoSQLが適切であるか判断することが重要になります。 MongoDBの特徴 MongoDBは以下のような特徴を持っています: MongoDBは、スケーラビリティと柔軟性を重視するアプリケーションや、大量の非構造化データを扱う場合に特に有用です。ウェブアプリケーション、モバイルアプリケーション、IoT(モノのインターネット)などのさまざまな領域で広く利用されています。 MongoDBの短所 MongoDBは柔軟性や拡張性に優れたデータベースですが、すべてのアプリケーションに適しているわけではありません。以下にMongoDBを使うべきでないアプリケーションの例を挙げます: これらは一般的なケースであり、MongoDBが適していないというわけではありません。最終的な選択は、アプリケーションの要件、データモデル、パフォーマンスの要件、チームの経験などを考慮することが大切になります。 MmongoDBをインストールしよう(Windows編) Nextを押します。 ライセンスを承認し、チェックボックスをクリックしてNext セットアップの仕方はComplete(すべてのプログラムがインストールされる)方法とCustom(任意で選択)する方法があります。お好きなほうを選択してください。 例としてCompleteを選択します。 次にService Configrationでサービスとしてインストールするか確認します。ローカルで使いたい場合は簡単に設定できるのでチェックボックスを入れておいてもOKです。 次にMongoDB Compassをインストールするか聞かれます。これはMongoDBのUIなので是非インストールして使ってみてください。特に初めての人には分かりやすいはずです。下記の画像ではチェックを外してインストールをスキップしてしまいましたが後からインストールすることも可能です。 最後にインストールする確認のメッセージが表示されるので、問題がなければInstallボタンを押してインストールを開始します。 インストールが完了したあと、PCの再起動が必要になります。 再起動が終わった後にWindowsのサービスを見てください。 先ほどインストール時に設定したようにMongoDBのサービスが起動していることが分かりますね。 MongoDB Compassを使ってみる ではMongoDBのGUI(グラフィックユーザーインターフェース)であるMongoDB Compassを起動してみましょう。 ConnectをクリックしてローカルのDBに接続します。 このように新しいデータベースを作成してコレクション(リレーショナルDBでいうテーブル)を作成してみましょう。 では試しにデータを作成してみましょう。 このようにidは自動で生成されますが、ストリングや数字のデータを好きなキー名で作成することができました。 更に同じことがコマンドラインからもできます。 次回はコマンドラインを使ってデータを操作する方法を紹介したいと思います。 お疲れ様でした。

Nuxt.jsの静的サイトジェネレータ(SSG)とは

Nuxt.jsとは Nuxt.jsはVue.jsフレームワークをベースにしたJavaScriptのフレームワークであり、Nuxt.jsのSSG(Static Site Generation)はその中でも特定の機能の一つです。 ではNuxt.jsで実際にコードを書く前にSSGについて知識を深めておきましょう。 SSGとは SSGは、静的サイト生成とも呼ばれ、事前にサーバーサイドでページを生成し、それを静的なHTMLファイルとして提供する手法です。これにより、クライアントのリクエストごとにサーバーがページを生成する必要がなくなり、パフォーマンスやスケーラビリティの向上が期待できます。 Nuxt.jsのSSGは、開発者がNuxt.jsを使用して静的なサイトを構築する際に便利な機能です。 Nuxt.jsのSSGの特徴 Nuxt.jsのSSGは、サーバーサイドで動的なデータの取得やAPIの呼び出しが必要な場合には、ビルド時に事前生成するデータを取得するための特別なメソッドを提供しています。 要約すると、Nuxt.jsのSSGは開発者が静的なサイトを効率的に構築できる機能であり、パフォーマンスやSEOの向上に貢献します。 Nuxt.jsを使用したSSGの短所 Nuxt.jsのSSGにはいくつかの短所があります。以下にいくつかの一般的な短所を挙げます: 以上が一般的な短所ですが、これらの制約はプロジェクトの要件や目標によって異なる場合があります。Nuxt.jsのSSGは、静的サイトのパフォーマンスやSEOの向上に役立つ機能であり、適切な使用場面で優れた選択肢となることがあります。 では、Nuxt.jsのSSGの短所も理解できたところでNuxt.jsの強みであるSSRと比較してみましょう。 SSRとSSGの比較 SSR(サーバーサイトレンダリング)とSSG(静的サイトジェネレータ)のパフォーマンスの違いを表にしました。 SSR SSG 最新のページを表示できる ★★★ ★☆☆ リスポンススピード ★★☆ ★★★ ホスティングの柔軟性 ★★☆ ★★★ ビルドのスピード ★★★ ★★☆ 上記に上げられたようにSSRと比べてホスティングに制約がないこととサイトのリスポンスが早いことは理解できましたがSSRに比べるとビルドのスピードが遅くなることと、SSRのようにページの柔軟性がなくなります。 また状況によってはSSRとSSGを組み合わせたハイブリッドのサイトを作成することも可能になります。 Nuxt.jsのプロジェクト作成 では下記のコマンドでNuxtのプロジェクトを作成しましょう。 ではデフォルトではapp.vueがランディングページになっていることを確認します。 ちなみにこの<NuxtWelcome/>のコンポーネントはライブラリから引用されるデフォルトのコンポーネントなので消してしまってOKです。 静的サイトのビルド では下記のコマンドで静的サイトをビルドしましょう。 ビルドが終わると.output/publictディレクトリが作成されウェブサイトに必要なファイルがコンパイルされましたね。この中にindex.htmlがあるのでクリックしてください。 これがSSGのエントリーポイントになります。 まとめ Nuxtを使うことでクライアント側のレンダー、サーバー側のレンダーを意識することが増えるようになります。またSSGを意識することによってさらにウェブ開発の見方が広がることになります。是非試してみてください。

Viteとmonaco-editorを使ってVSCodeと同じテキストエディタを作成しよう

Viteでmonao editorを使う

今日はMicroSoft社のテキストエディタVSCodeで使われているmonaco-editorを紹介します。Viteと組み合わせることで今後VueやReactなどにも簡単に組み込むことが可能になります。 VSCodeはどんどん進化しており、Co Pilotも公開されてからAIで次のコードを推測して予測してくれる機能はどのテキストエディタにもかないません。 完成例はこのようになり、ユーザーがVSCodeと同じようにコードを書くことができます。 ちなみにVSCodeをブラウザ上で起動したい場合はhttps://vscode.dev/からアクセスしてコードを書くことができます。 今日紹介するmonaco editorはこちらのURLで試してみることができるので是非使ってみてください。 https://microsoft.github.io/monaco-editor/ まずはmonaco editorのGitHubリポジトリを見てみましょう。 https://github.com/microsoft/monaco-editor このmonaco editorはオープンソースでMITライセンスになります。つまり。。。コードの商用、個人の利用に関わらず、改変でも、再配布でも、商用利用でも、有料販売でも、どんなことにでも自由に無料でつかうことができます。 Reactのコンポーネント ちなみにReactのコンポーネントとして使いたい場合は下記のURLからどうぞ。ライブラリがあるのでそちらを使うと簡単にReactで細かい設定までできるようになります。 https://www.npmjs.com/package/@monaco-editor/react monaco editorでできること monaco editorはVSCodeのです。つまりVSCodeのテキストエディタの部分と同じことができるようになります。 なぜVite monaco editorはESMとAMDの2つのモジュールのバージョンが使えます。今回はESMの方を使います。 どちらにしてもWeb packというバンドラーが入っているのでそれを使わないといけません。 良いことにViteではビルドインのWeb packのworkerのサポートができます。Viteは軽量かつ完成度の高いビルドツールとして標準化されてきているので是非、使うことをお勧めします。 Viteのプロジェクトを作成 では、monaco editorをインストールする前にViteでJavaScriptのプロジェクトを作成していきましょう。 詳しいViteの使い方はこちらの記事を参照してください。 monaco editorをインストール では下記のコマンドでmonaco editorをインストールしてみましょう。 では、サンプルのcounter.jsを削除してmain.jsをこのように書きます。 こちらのコードはGitHubのmicrosoft/monaco-editorから引用しました。 ちなみにダークカラーにしたい場合、テキストエディタをRead Onlyにしたい場合などの細かい設定は下記のようにできます。その他の例は、monaco-editorのPlay Groundで確認してください。 次にstyles.cssを適当に書きます。 重要なのは#contianerのサイズを指定しているところだけです。 このid=contianerにmonaco editorがレンダーされるようになるからです。 完成したコードはGitHubで確認してください。 お疲れ様でした。

Firebaseを始めよう

初めてのFirebase

フロントエンドを初めて実際にプロダクトをつくろうと思って始めたけど、バックエンドのテクノロジーに圧倒されていませんか?またフロントエンドの認証システムとバックエンドの認証システムを連携させる方法が難しいと思いませんか? そんな問題を解決してくれるのがGoogleが提供するFirebaseです。今日は、無料プランでDBを作成して実際にコードを書いてみます。 ちなみにFirebaseはトラディショナルなリレーショナルデータベース(MySQL,PostgreSQLなど)とは違うNoSQLデータベース(MongoDBなど)のデータベースを提供しています。NoSQLを使用する良い機会になるので是非試してみましょう! Firebaseとは Google Cloud Console(グーグルクラウドコンソール)上に作成されたバックエンドサービス(Baas:Backend as a Service)のことです。では、最初にFirebaseのデータベース(Realtime Database)でできることを紹介します。この他にFirestore Databaseという最新のデータベースサービスがありますが、それは後程紹介します。 Firebase Realtime Database:リアルタイムでデータを保存してユーザー間で同期できる、クラウドホスト型 NoSQL データベースです。 新機能のCloud Firestore なら、グローバル スケールでアプリデータを保存、同期、クエリできます。 デバイス間の連携が容易:リアルタイム同期により、ユーザーはあらゆるデバイス(ウェブ、モバイル)からデータに簡単にアクセスして、他のユーザーとの共同作業を効率的にできるようになります。 サーバー不要のアプリを構築:Realtime Database にはモバイルとウェブの SDK が含まれているため、サーバーがなくてもアプリを構築できます。Cloud Functions for Firebase を使用して、データベースでトリガーされるイベントに応答するバックエンド コードを実行することもできます。 オフラインでの使用に最適:ユーザーがオフラインになると、Realtime Database SDK はデバイス上のローカル キャッシュを使用してデータを表示し、変更を保存します。デバイスがオンラインになると、ローカルデータが自動的に同期されます。 高度なユーザーベースのセキュリティ:Realtime Database と Firebase Authentication の統合により、デベロッパーはシンプルかつ直感的な認証を利用できます。Google の宣言型セキュリティ モデルを使用して、ユーザー ID、またはデータのパターン マッチングによってアクセスを許可できます。 これで開発のスピードがあげられそうですね! そのほかに電話番号での認証やGoogleのアカウントを使っての認証も簡単に作成できてしまいます。 FirebaseではWebのみならずiOSやAndroidのアプリも作成できます。今回はWebに絞って紹介していきます。 Firebaseの料金 料金についてはこちらのリンクを参照してください。 まずは、無料プランからサービスを検証してみましょう。ではすぐに利用開始のボタンを押します。 Firebaseのプロジェクトを作成 Firebaseのプロジェクトを作成するとGoogle Cloud … Read more

コピペだけ!anime.jsでクールなスライドを作ろう

anime.js スライダー

今日はanime.jsのライブラリを紹介します。このライブラリを使う事で複雑なアニメーションをJavaScriptを使ってよりシンプルに書くことができます。 anime.jsはオープンソースなのでソースコードをGitHubからも見ることができます。CodePenから実際のデモを見ることもできるので見てみてください。 今日の完成プロジェクトはこのようになります。 今日の環境 では、大体どのようなことができるかを理解できたところで早速、基本のコードを書いていきましょう。 プロジェクトの作成 今回はVanilla JavaScriptでプロジェクトを作成しますがビルドツールとしてViteを使います。 anime.jsのインストール では、npmを使ってanime.jsをインストールしましょう。 コードを書こう ではテキストエディタを開いてコードを書いていきます。 Bootstrapを使ってUIを作成したい場合はViteを使ったBootstrapの設定の仕方はこちらの記事を見てください。 では、index.htmlをこのように書いてみます。 次にmain.jsの中身を消して下記のように書いてみましょう。 そうすると、ブラウザがロードされたときに.btnクラスのHTML要素が右に動きましたね。 これが基本になります。 もし、クリックしたらボタンがアニメーションしたいときはこのようになります。 JavaScriptの基本に戻りましょう。 完成するとこのようになりますね。 画像スライダーを作る こちらを参考にしました。 index.htmlはこのようになります。 各gridクラスのdivタグ内に画像ファイルがあることに注目しましょう。 次に、styles.css(styles.scss)を書きます。 最後に、main.jsでスライダーのロジックを作成します。 init()関数でブラウザがDOMContentLoadedのイベントを実行したときにイベントをマウントさせます。 この中でスライダーやナビゲーションのHTML要素を格納し、クリックイベントを実装します。 画像にdelay:の要素を加えていることに注目してください。 完成したコードはこちら(GitHub)からどうぞ。

Google Map APIを使ってカスタムマップを作成しよう

Google Map APIを使ってみる

今日はGoogle Map(グーグルマップ)のAPIを使ってカスタムマップを作成してみましょう!ワードプレスをお使いの方は簡単にプラグインを使って、カスタムマップを作成することができますね。同じことをマニュアルで行います。 これで不動産の物件を地図に表示したり、お店の位置情報を紹介することなどに使えたりすると思います。 完成したコードはGitHubから見てください。 注意 クレジットカードの登録なしでもAPIコールはかけられますが、Googleからのエラーのポップアップが表示されます。もし、一般ユーザー向けにAPIを使用したい場合は、アカウントの登録を完了してください。クレジットカードの登録が必要になります。 2023年の2月時点での参考料金表になります。 今日の環境 サンプルプロジェクトの確認 実際にコードを書く前にどのようなことができるのかデモで確認したい人はこの手順を追ってください。 GoogleマップのGitHubリポをクローンしてGoogleのデモGoogleマップを見てみます。GitとGitHubの使い方はこちらでも説明しています。 これでGoogleマップのデモが開くのでカスタムマーカーを使ったマップもこのように確認することができますね。 Playgroundというボタンをクリックするとコードを見ながら実際にどのように表示されるか試すことができます。 では、早速Google CloudからMAP APIのサービスを使っていきましょう! JavaScriptのプロジェクト作成 では今日はViteを使ってプロジェクトを作成します。Viteはビルドツールで、ReactやVueのアプリケーションを使う際に使う事がほとんどですが、Vanilla JS(普通のJavaScript)でも使う事ができます。 ではコマンドプロンプト(もしくはターミナル)を開いて下記の様に入力していきます。 では、npm i (installのi)のコマンドでプロジェクトができたらテキストエディタを開きましょう。 また、デフォルトのページをテストサーバーで見たい際はnpm run devのコマンドで確認することができます。 viteで作成されたmain.jsがデフォルトのJavaScriptのエントリーポイントになります。 Google Map APIを作る では、コードに入る前にgoogle Cloudを使ってGoogle MapのAPIキーを作成します。まずは、googleクラウドのページにアクセスします。 右上の無料で利用開始をクリックします。 では、フォームを入力していきます。 では、次のページも完了させ登録を完了させてください。 次にコンソールのページが見れるのでそこから、プロジェクトの選択をクリックします。 次に、新しいプロジェクトをクリックします。 次に、プロジェクト名を適当に入れて、作成ボタンを押します。 プロジェクトが作成できたら、メイン画面の右上にプロジェクトを選択するリンクが表示されるのでそれをクリックします。 次にGoogle Cloudの左上のタブから①APIとサービス、②Google Map Platformの二つを探してピンしておきましょう。ピンはホバーしたときに表示される画びょうのアイコンでショートカットのように上部に持ってこられるので今後探す手間が省けます。 カスタムマップの作成 では、Google Cloudからカスタムマップを作成します。 Google Maps Platformからマップ管理を選択します。 次にCREATE MAP IDを選択します。 次に、マップの情報を入力します。 名前は、自分のプロジェクトを適当に入力します。説明も同じように適当に入れます。Map Typeはデスクトップで表示させたい場合は、JavaScriptを選択します。 下にあるRasterとVectorの選択はたデフォルトのRasterを選択します。Vectorでも良いですが、ブラウザによって対応していないものもあるので注意。 … Read more

three.jsを使って360度動画をブラウザ上で再生してみる

ブラウザで360動画を再生しよう

今日は、three.jsを使って360度動画をブラウザ上で再生してみます。 さらにマウスを使ってカメラの方向を変えてみます。 今回使う360動画はmp4形式ですが、OggとWebM形式でもブラウザで再生できます。 完成イメージはこんな感じになります。 GitHubで完成したコードはこちらになります。 動画に使っている動画をそのまま再生すると下記の画像のように伸びたような状態になっています。 three.jsを使ってこれを球体に変換してあげます。 その球体の中央にカメラを置いて360度に見えるようにすることが今日の目的です。 今回はthree.jsのサンプルコードを参考にしています。 今日の環境 コードのクローン ではgitを使って完成したコードを自分の環境にクローン(コピー)しましょう。Gitの使い方はこの動画でも説明しています。 ブラウザでhttp://localhost:5173/にアクセスしても、このままだと何も表示されません。 まずは、自分の360度動画を用意してthree.js-360video直下にvideoフォルダを作成して、その中身sample_video.mp4の名称で動画を入れると動画が再生されます。 もし、ファイルパスや動画名を変えたい場合はindex.htmlの下記の行を変えましょう。 これで動画が再生できるようになりました。 コードの中身を理解 では、コードの中身を説明していきます。main.jsを参照してください。 まずはinit()関数です。 前回の記事でも説明したようにthree.jsに必要な要素を作成しinit(イニシャライズ)させます。 必要な要素はカメラ、シーン、物体:geometry(今回は球体 = SphereGeometry)です。 ここで、球体のgeometryにたいして、videoテクスチャを使用して、360度動画を貼り付けています。 rendererはレンダラーといい、シーンをHTMLにレンダーする役目をします。 ここではHTMLの幅いっぱいにレンダーするように指示しています。 最後に下記のイベントリスナーを加えています。 ではこれらを見ていきます。 onWindowResize関数 onWindowResize()関数では、ブラウザの幅が変わるたびに360動画のサイズを変更するように指示する関数です。 ポインター操作 マウスを使ってカメラの方向を変えます。いわば視線を変える関数になります。 動画の再生 動画の再生は2つの関数からできています。 animateでrequestAnimationFrameとupdateを繰り返しています。 requestAnimationFrameはJavScriptのデフォルトで使えるメソッド(Windowsオブジェクト)になります。これでブラウザが動画をレンダーする際に、update()を繰り返すようにしています。 update関数で使う用語を説明します。 lon:Longitude(経度) lat:Latitude(緯度) phi:poles(極・極座標) theta:equator angle(赤道角) これで、マウスを使って目線を変えるときの位置情報を更新するようにしました。