LuckyBox紹介

Lucky Box とは?

Lucky Boxは、アメリカとフランスのお客様に特別な日本のスナックを毎月お届けするサブスクリプションサービスです。私たちのチームが厳選したお菓子を、直接お客様のもとへ送ります。毎月異なる内容で、新しい味覚の発見が楽しめます。

お客様は、一度のみの購入や、3ヶ月、6ヶ月、1年という複数月の前払いオプションから選べます。どのプランも、日本の季節や文化を反映するお菓子を楽しむことができ、毎回新しいサプライズがあります。特に、私たちのスナックは東海地方という、日本のあまり知られていない地域から主に調達しており、この地域独自の風味や香りを体験できる絶好のチャンスです。

さらに、このサービスは、遠く離れた日本の味を身近に感じることができる絶好のチャンスです。Lucky Boxを通じて、世界中のお客様に日本の伝統的な味だけでなく、最新の人気スナックも紹介しています。どのプランもお客様のニーズに合わせて柔軟に選べるため、自分へのご褒美や大切な人へのプレゼントにも最適です。月々のお楽しみとして、Lucky Boxをお試しください。

なぜLUCKYBOX

Lucky Boxプロジェクトを始めた理由は、東海地方(愛知県、岐阜県、静岡県、三重県)が海外であまり知られていないため、外国人観光客の訪問者数が少ないことにあります。この地域の魅力や文化が十分に認識されていないという深い問題を解決するため、私たちはLucky Boxを通じて東海地方を積極的に紹介しています。アメリカやヨーロッパの人々にこの美しい地域を知ってもらい、地元のビジネスチャンスを増やすことが私たちの目標です。この取り組みが東海地方への関心を高め、より多くの観光客を引き寄せるきっかけになることを期待しています。

Luckybox.jp 紹介

当ウェブサイトでは、毎月異なる日本のスナックを詳しく紹介しています。ブログでは、私たちのチームが選んだスナックの詳細なレビューと栄養情報を提供しており、どのスナックを選ぶかの良い参考になります。これにより、お客様は自分の好みや健康に合ったスナックを見つけやすくなります。さらに、Instagramでビデオレビューを公開しており、スナックの色や形、味の特徴を直接見て楽しむことができます。これらのビデオは、スナックの魅力をより身近に感じさせます。

また、当サイトでは東海地方の魅力に焦点を当てた情報も豊富に扱っています。東海地方は、自然が豊かで歴史も深い地域です。この地域からのスナックを取り上げることで、地域の特産品や文化を広く紹介しています。地元のアニメも取り上げ、東海地方の文化や風土がどのようにアニメに反映されているかを紹介しています。このセクションを通じて、東海地方の知られざる魅力を世界に伝えることができます。

Luckybox.jpを利用することで、お客様には新しいスナックだけでなく、日本の文化や地域の特色についての理解も深めていただけます。毎月の配送が、ただの食べ物を超えた、学びと発見の機会を提供することを目指しています。

SNSの活用について

Luckybox.jpでは、Instagramを積極的に活用しています。この選択は、当社のターゲット層である20代から30代の日本文化に興味がある若者たちがInstagramを頻繁に使用しているためです。Instagramのアルゴリズムは、このようなユーザーに自動的に当社のコンテンツを推薦し、効率的にターゲット層にリーチすることができます。

当社は毎週、Instagramでビデオレビューを投稿しており、アメリカ向けのアカウントでは英語で、フランス向けのアカウントではフランス語でコンテンツを提供しています。これにより、各国の言語と文化に合わせたアプローチをとっており、より多くのフォロワーにリーチすることが可能です。

主なコンテンツはスナックのレビューで、そのスタイルは軽快でユーモラスです。この楽しい雰囲気は視聴者にポジティブな印象を与え、エンゲージメントを高めています。当社のビデオが視聴者に楽しさを提供することで、製品への興味を引き出し、最終的には購入につながることを期待しています。

このようにして、Luckybox.jpはInstagramを通じて、ブランドの魅力を世界中の若者たちに広め、日本のスナック文化をより身近なものにしています。

ゴールズ

2024年までに達成した目標:

  1. 洗練されたデザインの機能的なウェブサイトを作成する。
  2. プロジェクトを促進するためのSNSを作成する。
  3. 定期的に活動し、Instagramに毎週ビデオを投稿し、ブログを毎月更新する。

年内に達成する目標:

  1. 購入者数を増やす。
  2. ソーシャルメディアでの影響力を拡大する。

Internal Study Session: About Monaca

I’m “xig” from Unit 0, and I’ll be writing this study session article.

The theme of this in-house study session is “Monaca.”

It’s a familiar topic in Unit 0, but we held the study session with the aim of allowing inexperienced people to actually try it out and deepen their understanding. I was the one teaching, but the number of people who participated was greater than we initially expected, so I was a little nervous.

The study session went as follows:

①Outline of Monaca

②Introduction to the environment

③Hands on actually trying out Monaca

Overview of Monaca

In the 0th unit, we used Monaca’s cloud IDE (browser-based development environment),
so we focused on that and explained what Monaca is and what it can do.

I’ve found the following three points to be useful when actually using it,
and I hope that the participants were able to understand them.

〇 Easy to get started with an internet connection

〇 Easy to check operation (on a browser or smartphone)

〇 Easy to publish to the store

Environment introduction

After I gave them an overview, I had them create an account to start using Monaca.
I also showed them an actual screen and explained what items are available.
I personally didn’t feel any resistance to it because the UI is similar to the integrated development environment I normally use, but what did you all think?

Let’sTry

After the explanation, we did some coding exercises using Monaca’s sample programs. Monaca has pre-made templates, so this time we used the Todo app template, changed the background color, and added functions to add and delete database functions to actually create an app.

Summary

In this study session, we actually used Monaca to experience developing a simple app.

– I want to write a simple sample program, but setting up the environment is a hassle…
– I want to quickly develop an app for iOS or Android…
– I hope that when you feel like this, you will remember the exercises from today and put them to good use.

So, please look forward to the article from the next study session!

社内勉強会:Monacaについて

今回の勉強会記事を担当する第0ユニットの「xig」です。


今回の社内勉強会のテーマは「Monaca」となります。

第0ユニットではなじみ深いものですが、未経験者にも実際に触ってもらい、より理解を深めてもらうことを目的とし勉強会を行いました。私自身は教える側でしたが、当初の予想を超える人数ご参加いただき、少し緊張してました。

勉強会の流れは以下の通りです。

①Monacaの概要説明

②環境導入

③実際にMonacaを触ってもらう

Monacaの概要説明

第0ユニットでは、MonacaのクラウドIDE(ブラウザベースの開発環境)を利用しているため、
それを中心にMonacaとは?どんなことができるのか?などを説明いたしました。

実際に使っていて以下3点、便利だなーと思っているのですが、
それが参加者にも伝わっていれば嬉しいです。

〇ネット環境があればすぐに簡単に始められる

〇動作確認がすぐできる(ブラウザ上で、スマホ上で)

〇ストア公開までが簡単

環境導入

概要を説明したら、Monacaを使ってい頂くために各自アカウントを作成しました。
合わせて実際に画面を出してどんな項目があるかを説明しました。
自分は普段使っている統合開発環境にUIが近いこともあって、抵抗感は少ないのですが、皆様はどう感じたでしょうか…?

Let’sTry

一通り説明が終わったらMonacaのサンプルプログラムを使って実際にコーディング演習を行いました。Monacaにはあらかじめテンプレートというものがあるので、今回はTodoアプリのテンプレートを使って、背景色を変えてみたり、DB機能の追加や削除機能を追加して実際にアプリを作りました。

まとめ

今回の勉強会ではMonacaを実際に使って簡単なアプリ開発を体験しました。
・ちょっとしたサンプルプログラムを組みたいけど、環境を用意するのが面倒…
・IOSやアンドロイド向けのアプリをサクッと開発してみたい…
そんな時にはぜひ、今回の演習のことを思い出して活用頂けたら幸いです。

それでは、次回の勉強会の記事をお楽しみに!

Tech Blog: ChatGPT-4o: OpenAI Unleashes New Possibilities for Innovative Conversational AI

As a technical blog, I would like to introduce the learning content that I am working on on a daily basis. This is the first unit on the theme of AI and big data. The theme this time is OpenAI’s latest model, ChatGPT-4o. For each section, we will have ChatGPT4o create images and image descriptions.

In the world of artificial intelligence, OpenAI has always been at the forefront of innovative advancements, especially in the field of large-scale language models (LLMs). The newly announced ChatGPT-4o represents a breakthrough in the field of conversational AI, introducing various enhancements that allow users to interact with language in unprecedented ways.

Unlocking the Power of ChatGPT-4o
ChatGPT-4o builds on the foundations of its predecessor, ChatGPT, and introduces a set of sophisticated features that take its capabilities to new heights. Let’s take a closer look at the key features that set ChatGPT-4o apart.

  1. Enhanced Speed ​​and Efficiency:

ChatGPT-4o runs twice as fast as its predecessor while cutting computational costs in half. This incredible efficiency translates into a smoother and more responsive user experience, especially when conducting complex tasks or long conversations.

  1. Expanded Message Limits:

Free users of ChatGPT-4o now have a 5x increase in message allowance, allowing them to interact with the model for extended periods of time without restrictions and explore its full potential. This answers the growing demand to freely explore language capabilities.

  1. Multilingual Mastery:

ChatGPT-4o transcends language boundaries, enabling seamless conversations across multiple languages. This multilingual capability allows users to engage in meaningful interactions with audiences around the world, fostering intercultural understanding and cooperation.

  1. Multimodal Integration:

ChatGPT-4o seamlessly integrates text, audio, and visual data for a more comprehensive and immersive conversational experience. This multimodal capability opens new avenues for creative expression, knowledge exploration, and interactive storytelling.

Explore the applications of ChatGPT-4o
ChatGPT-4o’s enhanced features empower users across a range of sectors to explore its potential.

  1. Content Creation:

ChatGPT-4o can be a powerful tool for content creators, generating a variety of creative text formats, translating languages ​​accurately, and creating engaging content that resonates with audiences.

  1. Education and Learning:

In the education sector, ChatGPT-4o innovates the learning experience by providing personalized instruction, answering questions in an informative manner, and generating summaries of complex topics. This personalized approach caters to individual learning styles and promotes deeper understanding.

  1. Business Solutions:

Businesses can leverage ChatGPT-4o in a variety of ways to enhance their operations. From developing customer service chatbots that provide 24/7 support to conducting market research analysis and generating compelling marketing copy, ChatGPT-4o streamlines business processes and drives growth.

Conclusion: A Look into the Future of Conversational AI
ChatGPT-4o marks an important milestone in the evolution of conversational AI, offering a glimpse into a future where humans and machines can interact with unprecedented levels of understanding and nuance. Its enhanced speed, expanded features, and multilingual capabilities will make ChatGPT-4o a valuable tool for individuals and organizations across sectors. As ChatGPT-4o continues to evolve, we expect to see even more groundbreaking applications emerge, transforming the way we communicate, learn, and create.

技術者ブログ:ChatGPT-4o:OpenAIが放つ革新的な会話型AIの新たな可能性

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。今回はAI、ビッグデータをテーマにしている第1ユニットです。 今回のテーマはOpenAIの最新モデル、ChatGPT-4oについて説明させていただきます。セクションごとにChatGPT4oに画像と画像の説明を作成させてみます。

人工知能の世界において、OpenAIは常に革新的な進歩の最前線に立っており、特に大規模言語モデル(LLM)の分野においては目覚ましい成果を上げてきました。今回発表されたChatGPT-4oは、会話型AIの分野における飛躍的な進歩を意味しており、ユーザーが言語と前例のない方法で対話できるよう、様々な機能強化を導入しています。


ChatGPT-4oの力強さを解き明かす
ChatGPT-4oは、前モデルであるChatGPTの基盤の上に構築されており、その能力を新たな高みに引き上げる一連の洗練された機能を導入しています。ChatGPT-4oを際立たせる主要な機能について詳しく見ていきましょう。

1. 強化された速度と効率性:

ChatGPT-4oは、前モデルの2倍の速度で動作し、同時に計算コストを半分に削減します。この驚異的な効率性は、特に複雑なタスクや長時間の会話を行う際に、よりスムーズで応答性の高いユーザー体験を実現します。

2. メッセージ制限の拡大:

ChatGPT-4oの無料ユーザーは、メッセージ許容量が5倍に増加し、制限なく長時間モデルと対話して、その完全な可能性を探求できるようになりました。これは、言語能力を自由に探求したいという高まる需要に応えます。

3. 多言語マスター:

ChatGPT-4oは言語の境界を超え、複数の言語間でシームレスな会話を可能にします。この多言語能力により、ユーザーは世界中の視聴者と有意義な交流を行うことができ、異文化理解と協力を促進します。

4. マルチモーダル統合:

ChatGPT-4oは、テキスト、音声、視覚データをシームレスに統合し、より包括的で没入感のある会話体験を実現します。このマルチモーダル機能は、創造的な表現、知識探求、インタラクティブなストーリーテリングのための新たな道を開きます。


ChatGPT-4oの応用例を探る
ChatGPT-4oの強化された機能は、様々な分野のユーザーがその可能性を探求する力を与えます。

1. コンテンツ作成:

ChatGPT-4oはコンテンツ制作者にとって強力なツールとなり、様々なクリエイティブなテキスト形式を生成し、言語を正確に翻訳し、視聴者に響く魅力的なコンテンツを作成することができます。

2. 教育と学習:

教育分野では、ChatGPT-4oは個別指導を提供し、質問に情報提供的な方法で答え、複雑なトピックのサマリーを生成することで、学習体験を革新します。この個別化されたアプローチは、個々の学習スタイルに対応し、より深い理解を促進します。

3. ビジネスソリューション:

企業は、ChatGPT-4oを様々な方法で活用して業務を強化することができます。24時間365日サポートを提供する顧客サービスチャットボットの開発から、市場調査分析の実施、説得力のあるマーケティングコピーの生成まで、ChatGPT-4oはビジネスプロセスを合理化し、成長を促進します。

結論:会話型AIの未来への展望
ChatGPT-4oは、会話型AIの進化における重要なマイルストーンであり、人間と機械がかつてないレベルの理解とニュアンスで対話できる未来への展望を示しています。強化された速度、拡張された機能、多言語能力により、ChatGPT-4oは、様々な分野の個人や組織にとって貴重なツールとなります。ChatGPT-4oの進化が進むにつれて、さらに画期的なアプリケーションが登場し、コミュニケーション、学習、創造のあり方を変革していくことでしょう。

Employee Introduction

Self-introduction

Hi, my name is Joseph from Dandelions. I’m a 27-year-old American who has been living in Japan for three years. I’m from Arizona in the United States. What is Arizona like? It’s a very hot area with large cacti. It’s known as one of the hottest areas in the United States, with temperatures exceeding 45 degrees in the summer and 35 degrees at night being the norm. As a result, it doesn’t feel “hot” unless it exceeds 40 degrees, and the summer in Japan is relatively comfortable. I have a variety of hobbies, but recently I’ve become obsessed with game development using a programming language called PYTHON.

Reason for joining the company

Before joining Dandelions, I worked as an English teacher and manager in Maizuru, Kyoto. In that position, I gained a lot of experience, not only teaching English, but also teaching new employees and junior employees in both English and Japanese, and managing operations. Through my work as a manager, I was also involved in schedule management, planning, and human resources, and I began to feel that this job was suitable for me in the future.

One day, a friend who works at Dandelions told me that the company was recruiting new members. After the interview, it became clear that working at Dandelions would allow me to utilize my experience and areas of expertise from my previous job. I was also attracted by the opportunity to try a technical job, so I decided to start a new career and a new life.

Impressions after joining the company

Since joining the company, I have had many wonderful experiences and acquired new skills. There are many skills I have acquired, but I would like to introduce three that are particularly important.

First, Japanese business manners and behavior. Before joining the company, I was unfamiliar with Japanese business culture and was anxious, but thanks to the careful guidance of my wonderful seniors, I learned how to exchange business cards, respond on the phone, and use honorific language correctly, and I was able to gain confidence.

Secondly, technical skills. After joining the company, I greatly improved my IT-related skills. For example, I learned web development technology and was able to be involved in building the company’s website. I also learned the application of programming and the basics of IT, and acquired skills that can be used in the industry.

In addition, my teaching skills have also improved. I work as a lecturer in the Learning Enterprise division. Before starting classes, I received a lot of training, and by actually participating in practice classes and lecturer training within the company, I was able to improve my abilities as a lecturer.

Not only did I acquire skills, but I also had many great experiences. I feel rewarded by being able to work in a great workplace every day and working with great colleagues. In addition to work, there are also many fun activities such as drinking parties and karaoke with all the employees, which are precious memories.

I feel really glad that I joined this company. I will continue to put in even more effort.

社員紹介

自己紹介

はじめまして、ダンデライオンズのジョセフと申します。27歳のアメリカ人で、3年間日本に住んでいます。出身はアメリカのアリゾナ州です。アリゾナ州はどんなところかというと、大きなサボテンがあり、非常に暑い地域です。アメリカで最も暑い地域の一つとして知られており、夏には気温が45度を超え、夜でも35度は当たり前です。そのため、40度を超えない限り「暑い」とは感じず、日本の夏は比較的過ごしやすいです。趣味はいろいろありますが、最近はPYTHONというプログラミング言語を使ってゲーム開発に夢中になっています。

入社きっかけ

ダンデライオンズに入社する前は、京都府舞鶴市で英会話講師およびマネージャーとして働いていました。その職で多くの経験を積むことができ、英語教育に留まらず、新入社員や後輩への英語と日本語を用いた指導や、業務管理も行いました。マネージャーとしての職務を通じてスケジュール管理や計画策定、人事業務にも携わり、将来的にこの仕事が自分に適していると感じるようになりました。

ある日、ダンデライオンズで働いている友人から、会社が新しいメンバーを募集していると聞きました。面接を経て、ダンデライオンズでの仕事が前職での経験や得意分野を生かせることが明確になりました。また、技術関連の仕事に挑戦できる機会も魅力的で、新しいキャリア、そして新しい生活を始める決意をしました。

入社してからの感想

入社してから、多くの素晴らしい経験をし、新しいスキルも身につけました。習得したスキルは多数ありますが、特に重要な3つを紹介したいと思います。

まず、日本のビジネスマナーと行動についてです。入社前は日本のビジネス文化に不慣れで不安でしたが、素敵な先輩たちが丁寧に指導してくれたおかげで、名刺交換、電話対応、敬語の正しい使い方を学び、自信を持つことができるようになりました。

次に、技術スキルです。入社後、IT関連のスキルを大いに伸ばしました。例えば、ウェブ開発の技術を学び、社内のウェブサイト構築に関わることができました。また、プログラミングの応用やITの基礎を学び、業界で活用できるスキルを身につけました。

さらに、教育スキルも向上しました。私はラーニングエンタープライズ部門で講師として活動しています。授業を始める前には多くの訓練を受け、実際に社内での練習授業や講師訓練に参加することで、講師としての能力を高めることができました。

ただスキルを習得するだけでなく、素晴らしい経験も多くあります。毎日素敵な職場で働けること、素晴らしい同僚と共に仕事ができることにやりがいを感じています。仕事だけでなく、社員全員での飲み会やカラオケなど、楽しい活動も充実しており、大切な思い出となっています。

この会社に入社して本当に良かったと感じています。これからも一層の努力を続けていきたいと思います。

どうぞよろしくお願いします。

ジョセフ・カーリー

Recreation: Handmade gyoza party

Thank you for watching.

I’m Chen from the 1st unit, and I’m in charge of introducing this event!

I’m here to report on the cooking event that was held at the end of March 2024. The theme of this event was “Making delicious dumplings together.” We made both boiled dumplings and pan-fried dumplings, and enjoyed comparing the taste.

Preparing to make dumplings

First, the participants were divided into two groups. One group made gyoza skins, and the other made gyoza filling. The gyoza skin group kneaded the dough using strong flour and weak flour, let it rest, and then rolled it out into a circle to make gyoza skins. On the other hand, the gyoza filling group mixed minced meat and seasonings to make meat filling, which they then seasoned well.

We decided to use store-bought wrappers for the pan-fried dumplings, and focused on making the boiled dumplings by hand. Once everything was ready, we started to make the boiled and pan-fried dumplings. We boiled the boiled dumplings in a pot and ate them with soup. We steamed the pan-fried dumplings in a frying pan, and finished them off with sesame oil to add flavor.

After cooking was finished, everyone enjoyed the gyoza they had made. Homemade gyoza have a special taste, and making them together as a team made them even more delicious. Through this cooking event, all participants had fun while learning cooking techniques and had a fulfilling time.

Looking back on the cooking party

I would like to report on the overall impressions of the cooking event. This was our first attempt at a cooking event, and although there were many issues, we were able to make it a success. We would like to take everyone’s opinions into consideration and make the next event even better.

First of all, although we were in a hurry due to lack of preparation, we felt that it was a success in the end. Some people also felt that it was fun to work together as a team because there was a lot to do. Many people said that it was great that we were able to keep to the schedule even though it was our first cooking event. Some people also mentioned that they should have communicated each person’s duties more clearly. Others said that they learned how to make boiled dumplings, felt a sense of teamwork by working together, and that the food was delicious as good points. On the other hand, some people pointed out that the start time was later than scheduled and the importance of time management.

Future events mentioned include a mini 4WD tournament, a sports day, athletics, a picnic, and an amusement park. This cooking event was both educational and fun. We appreciate everyone’s cooperation. Let’s make use of the lessons learned from this event to make our next event even more fulfilling. We’re looking forward to our next event. If you have any comments or suggestions, please let us know. Finally, the content of this blog was written using ChatGPT.

That’s all for today’s introduction. Please look forward to our next in-house event introduction!

レクリエーション「手つくり餃子パーティー」

ご覧いただきありがとうございます。

今回のイベント紹介を担当しています。第1ユニットの「チェン」です!

2024年3月末に開催された料理会についてのレポートをお届けします。今回のテーマは「一緒に美味しい餃子を作ること」でした。水餃子と焼き餃子の両方を作り、食べ比べを楽しみました。水餃子のレシピは以下になります。⇒ここで確認

餃子作りの準備

まず、参加者を2組に分けました。一方は餃子の皮を作る組、もう一方は餃子のあんを作る組です。餃子皮組は、強力粉と薄力粉を使って生地をこね、休ませた後に円形にのばして餃子の皮を作りました。一方の餃子あん組は、ひき肉と調味料を混ぜて肉あんを作り、しっかりと味付けをしました。

餃子を作る様子

焼き餃子用の皮は市販のものを使用することにし、手作りの部分は水餃子に集中しました。全ての準備が整ったところで、水餃子と焼き餃子の調理を開始しました。水餃子は鍋で茹で、スープとともにいただきました。焼き餃子はフライパンで蒸し焼きにし、最後にごま油で風味を加えて仕上げました。

作った餃子

調理が終わった後は、皆で出来上がった餃子を美味しくいただきました。手作りの餃子は特別な味わいがあり、チームで協力して作ることで一層美味しく感じました。今回の料理会を通じて、参加者全員が楽しみながら料理の技術を学び、充実した時間を過ごすことができました。

料理会の振り返り

料理会全体の感想について報告します。今回の料理会は初めての試みで、さまざまなことがありましたが、無事に成功させることができました。皆さんのご意見を参考にして、次回のイベントをさらに良いものにしていきたいと思います。

まず、準備不足でバタバタしてしまったものの、最終的には成功したと感じました。また、やることが多かったため、チームで協力することが楽しかったと感じた意見もありました。二つのグループに分けたにもかかわらず、みんなで一緒に作業している一体感があり、とても良かったという声が多くありました。

初めての料理会だったにもかかわらず、スケジュールをギリギリ守ることができた点を良かったと感じる声もありました。各自の任務分担をもっと明確に伝えるべきだという反省点も挙げられました。また、水餃子の作り方について勉強になったこと、みんなで一緒に作業することでチームワークを感じられたこと、そして料理が美味しかったことを良かった点として挙げる意見もありました。一方で、開始時間が予定より遅れたことや時間管理の重要性についても指摘がありました。

今後のイベントとしては、ミニ四駆大会、運動会、アスレチック、ピクニック、遊園地などが挙げられました。今回の料理会は、多くの学びと楽しさがありました。皆さんの協力に感謝します。次回のイベントもさらに充実したものにするために、今回の反省点を活かしていきましょう。次回の企画も楽しみにしています。ご意見や提案があれば、ぜひお知らせください。最後に、このブログの内容は、ChatGPTを使用して書いたものです。

今回の紹介は以上になります。次回の社内イベント紹介もお楽しみに!

Google Maps Platformで地図を出してみた

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
今回はWEBデザインをテーマにしている第0ユニットです。
本記事ではGoogle Maps Platformを使ってみたので紹介していきます。

Google Maps Platformとは

Google Maps Platformを使用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことができます。
Google Maps Platformの詳細は公式ページで紹介されています。
https://mapsplatform.google.com

事前準備

Google Maps Platformを使うためには事前に、Googleアカウントを作成し支払いの設定をしておく必要があります。
支払いの設定はGoogle Cloudから設定することができます。
https://cloud.google.com/

APIキー取得

Google Maps APIを使用するには、APIキーを取得を取得しておく必要があります。
APIキーの取得は「有効なAPIとサービス」から行います。

「Maps JavaScript API」を選択します。

「鍵と認証情報」APIキーからAPIキーを取得することができます。

MAPの表示

地図の表示

APIは「Dynamic Library Import」、「NPM js-api-loader パッケージ」の方法で利用することができます。
利用方法の詳細は公式のガイド参照してください
Maps JavaScript API を読み込む


下記は地図を出すサンプルソースです。

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    http://js/map.js
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "{APIキー}", v: "beta"});</script>
        
    <script>
      // Initialize and add the map
      let map;
      
      async function initMap() {
      
          // Request needed libraries.
          //@ts-ignore
          const { Map } = await google.maps.importLibrary("maps");
          const { AdvancedMarkerElement } = await google.maps.importLibrary("marker")
      
      
          // 地図の初期設定
          map = new Map(document.getElementById("map"), {
              zoom: 18,
              center: position1,
              mapId: "DEMO_MAP_ID",
          });
      
          // ピンの地点を設定
          const position1 = { lat: 35.165455654239224, lng: 136.90517107048055 };
          const position2 = { lat: 35.16480168326663, lng: 136.90544465580453 };

          // 地図にピンを設定する
          const marker = new AdvancedMarkerElement({
              map: map,
              position: position1,
              title: "ナディアパーク",
          });
      
          const marker2 = new AdvancedMarkerElement({
              map: map,
              position: position2,
              title: "矢場公園",
          });
      }

      initMap();
    </script>
  </body>
</html>

地図のAPIは下記の部分で読み込んでいます。
サンプルでは「Dynamic Library Import」でAPIを読み込んでいます。

script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "{APIキー}", v: "beta"});</script>

地図の表示は下記の部分で表示を行っています

      // GoogleMapの読み込み
         const { Map } = await google.maps.importLibrary("maps");
          const { AdvancedMarkerElement } = await google.maps.importLibrary("marker")
      
      
          // 地図の初期設定
          map = new Map(document.getElementById("map"), {
              zoom: 18,
              center: position1,
              mapId: "DEMO_MAP_ID",
          });

また、下記のようにピンを複数設定することで、地図に複数のピンを立てることもできます。

// ピンの地点を設定
          const position1 = { lat: 35.165455654239224, lng: 136.90517107048055 };
          const position2 = { lat: 35.16480168326663, lng: 136.90544465580453 };

          // 地図にピンを設定する
          const marker = new AdvancedMarkerElement({
              map: map,
              position: position1,
              title: "ナディアパーク",
          });
      
          const marker2 = new AdvancedMarkerElement({
              map: map,
              position: position2,
              title: "矢場公園",
          });

今回はGoogle Maps Platformを使って地図を表示したり、
地図にピンを立てる方法をまとめました。

次回の第0ユニットの技術者ブログもお楽しみに!