社員紹介

皆さん、こんにちは。業務管理部の「ブー👻」です!
今回は、自己紹介と株式会社ダンデライオンズに入社するきっかけと入社した後の感想を話していきたいです。

自己PR

フランス人で、来日したのは今年2年間になります。大学の専門は日本語と日本文化で、日本の事は数年前から興味を持っています。趣味はアニメを観ることと、漫画っぽい絵を描くことです。日本を旅することも好きで、様々なところに行きました。旅した場所の中で、富士山の代表的な日本の山が一番好きです。以下、富士山の近くに去年撮った写真です。

富士山🗻の素敵な姿

入社するきっかけ

去年は日本で就職活動を始めて、2023年9月に株式会社ダンデライオンズに入社することになりました。
入社するきっかけは、株式会社ダンデライオンズの良い雰囲気を感じたからです。面接の時に、自分の趣味について質問されました。 とても良いやりとりで、ストレスはありませんでした。
また、この会社には様々な国の方が働いていて、それもとても良い要素だと思いました。外国人にとって、日本で日本の方だけの会社で働くのは怖いかもしれません。その理由で、日本の会社で国籍がバラバラの方が働いているので少し安心できました。

入社した後の感想

雰囲気も良く、同僚は20代がほとんどです。 先輩たちは話を聞いてくれて、困ったことがあれば助けてくれます。
マーケティング、翻訳、Web デザインなどの様々な分野を通じて、新しいスキルを学ぶことができました。また、重要なITに関する知識を深めることができて、将来的にはどの仕事でも有利になると思います。

今回は以上になります。
次回の社員紹介もお楽しみに~!

We went glamping by the sea!

Hello, this is Yamaguchi from Unit 0.

We went on a company trip on October 27-28, 2023.
In 2023, the event was held in two sessions for each section.
Members at Dandelions could participate in both if they payed the participation fee, and it turned out to be a fun trip with almost everyone participating this time.

The destination was Noma’s “Wood Design Park Noma”.

When you arrive and enter your room, a stylish room with an ocean view.
Everyone was so excited and was taking lots of photos.

We played in the sea and took pictures until dinner.
Although it was October, the temperature was warm and the sea water was just right. I was planning to just lightly wet my feet, but some people were completely absorbed in it.
Some people said “I might be doing the most summery thing this year!” and I had a great time.

The long-awaited dinner!

In the mountain part, there was a lot of meat, but this time we were in the sea part, so there was a variety of seafood. We enjoyed delicious meat, seafood, and alcohol. But on the way there was heavy rain and thunder. Everyone hurriedly evacuated the food and had a hurried dinner.
But it’s also a good memory.

After returning to our room, we held a surprise! On this trip, there were members whose birthdays were on the same day and we all celebrated.

Such an happy expression on his face!

At night, we talked and played games together in our rooms.
There was also a place where you could make a bonfire outside, so we were able to have some fun together.

This year’s company trip was held with the theme of “glamping”. I enjoyed both the mountains and the sea.

Where will the company trip take place in 2024?
I’m looking forward to it!

Please look forward to the next blog.

海のグランピングに行ってきました!

ご覧いただきありがとうございます。
第0ユニットのやまぐーちです。

2023/10/27-28で社員旅行へ行ってきました。
2023年度はセクションごとに
2回に分けて開催しました。
(前半の社員旅行ブログはこちら)
参加費を支払えば両方とも参加可能としており
今回はなんとほぼ全員が参加するという
楽しい旅行となりました!

行先は野間にある
「ウッドデザインパーク野間」さんです。

到着してお部屋に入ると、
おしゃれでオーシャンビューなお部屋に
みんなテンション爆上がり(笑)
みんな写真をたくさん撮っていました。

夜ご飯までは、海で遊んだり写真を撮ったりしました。
10月でしたが、暖かい気温で海の水もちょうど良く
軽く足だけ濡らすつもりが、
がっつり入ってしまっていた人も(笑)
今年一番夏らしいことしてるかも!と
言ってる人もいて楽しく過ごせました。

お待ちかねの夜ご飯!


山の部ではお肉が多かったですが、今回は海の部という事もあり様々な魚介がありました。
おいしいお肉&魚介類、お酒を楽しみました。
…が!なんと途中ですごい大雨&雷に。
みんなで、慌てて食べ物類を退避させたりと慌てた夜ご飯となりました。
が、それも良い思い出です。

お部屋に戻った後は、サプライズ!
今回の旅行でも誕生日当日のメンバーがおり、
みんなでお祝いしました。
とてもうれしそうな表情を見れました。

夜はお部屋でお話ししたりみんなでゲームをしたり、
外で焚火ができる場所があったので焚火をしたりと各々楽しむことができました。

今年の社員旅行は「グランピング」をテーマにして行われましたが
山も海も楽しかったです。

2024年度の社員旅行はどこになるのかな~?
楽しみです!

次回のブログもお楽しみに。

Engineer’s blog Introducing Outsystems and API.

Hello everyone, this is Ien from Unit 1. For this engineer’s blog, I will introduce what I learn on a daily basis.

This time, I’m using Outsystems to create an API.

Overview of Outsystems and APIs

What is Outsystems? What is API? I think there are people who will ask those questions.

OutSystems provides high-performance, low-code and cloud-native development platforms for forward-thinking enterprises globally.

API is an abbreviation for “Application Programming Interface”. Simply put, it refers to an interface that connects software, programs, and web services.

RestAPI is provided as an extension service of Outsystems. RestAPI is a type of program calling convention (API) for externally using a web system. Use RestAPI to expose methods that allow another system to retrieve or manipulate information.

How to create an API

I would like to introduce what I have created to help you learn more about Outsystems and the API.

To turn your company’s attendance system into a smartphone app using Outsystems, you will need an API that can be called from the app. So I created an API using the RestAPI service provided by Outsystems. The APIs called by the app are attendance information registration and annual leave registration.

In this article, we will introduce how to create a RestAPI service and RestAPI method in Outsystems.

・First, create a blank app.

① Start Outsystems and click “New Application”.

② Select “From scratch” and click “Next”.

③ Select “Reactive Web App” and click “Next”.

④Write the app name and Description and select “Create App”.

⑤ You have created the app.

⑥Click “Create Model” to open development tools etc. I became the catcher below.

・Next, follow the steps below to create a RestAPI service.

① Open the Integrations folder on the [Logic] tab.

② Right-click [REST] and select [Expose REST API…].

③ Set the name of RestAPI.

・Next, create a RestAPI method.

① Right-click the created RestAPI service and select [Add REST API Method].

② Set the name of the RestAPI method.

Example: GETRegisterUser

Double-click the creation method to display the API logic description.

This is the logic of the GETRegisterUser method.
Annual leave and attendance information will be displayed, and by pressing the annual leave, attendance, and attendance buttons, you can register the input information in the DB.

My inpressions

Since I had never touched the API in the past, I started from 0 this time. There were a lot of things I wasn’t sure about, but by looking up information on the internet and solving them one by one without panicking, I was able to complete the process. Thanks to this attendance system coordination assignment, I was able to learn about the field of API and accumulate new knowledge and skills, which was a great learning experience for me.

Next time, I would like to explain the contents of the method I created. looking forward to!

技術者ブログ OutsystemsとAPIについて、紹介します。

皆さん、こんにちは、第1セッションのイエンです。技術者ブログとして、日ごろ学習内容をご紹介します。

今回は、OutsystemsでAPIの作成をデーマにしています。

OutsystemsとAPIの概要

Outsystemsって何?APIって何?とういう方はいると思います。

OutSystemsは、先進的な企業向けに高性能ローコード/クラウドネイティブ開発プラットフォームをグローバルに提供しています。

APIとは「アプリケーション・プログラミング・インターフェース(Application Programming Interface)」の略称です。一言で表すと、ソフトウェアやプログラム、Webサービスの間をつなぐインターフェースのことを指します。

Outsystemsの拡張サービスとしてRestAPIが提供されています。RestAPIとは、Webシステムを外部から利用するためのプログラムの呼び出し規約(API)の種類の一つです。メソッドを公開して別のシステムが情報を取得または操作できるようにするには、RestAPIを利用します。

APIの作成方法

OutsystemsとAPIをより深く知っていただくために、作成したものを紹介したいと思います。

自社の勤怠システムをOutsystemsでスマホアプリ化するには、アプリから呼ばれるAPIが必要となります。それで、Outsystemsでの提供されているRestAPIサービスを使用して、APIを作成しました。アプリから呼ばれるAPIは勤怠情報登録と年休登録です。

本記事ではOutsystemsでRestAPIサービスとRestAPIメソッドの作成方を紹介します。

・はじめに空アプリを作ります。

①Outsystemsを起動して、「New Application」をクリックします。

②「From scratch」を選択して、「Next」をクリックします。

③「Reactive Web App」を選択して、「Next」をクリックします。

④アプリ名とDescriptionを書いて、「Create App」を選択します。

⑤アプリを作成できました。

⑥「Create Model」をクリックすると、開発ツールなどが開きます。下記のキャッチャーになりました。

・次にRestAPIサービスを作成するには、下記のステップの通りです。

①[Logic]タブで、Integrationsフォルダを開きます。

②[REST]を右クリックし、[Expose REST API…]を選択します。

③ RestAPIの名前を設定します。

・続いてRestAPIメソッドを作成します。

① 作成したRestAPIサービスをを右クリックし、[Add REST API Method]を選択します。

② RestAPIメソッドの名前を設定しま。

例: GETRegisterUser

・作成メソッドをダブルクリックすると、APIロジックの記載所が表示されます。

GETRegisterUserメソッドのロジックです。
年休と勤怠情報が表示され、年休、出勤、退勤ボタンを押下すると入力情報をDBに登録できます。

感想

過去にAPIを触ったことがなかったので、今回は0から始まりました。不明なことがたくさんありましたが、インターネットで情報を調べて、慌てずに一個ずつを解消していくことで完成できました。今回の勤怠システム連携課題のおかげで、APIの分野を学習し、新しい知識やスキルなどを蓄積することができ、大変勉強になりました。

次回は作成したメソッドの中身を説明したいと思います。お楽しみに!

In-house study session: Low-code development experience using Outsystems

The theme of this in-house study session is “Low-code development experience using Outsystems.”
I am “TT” from Unit 2.

Outsystems has been featured frequently on engineer blogs, but we held a study session for those with no experience to try it out and deepen their understanding.
Additionally, this time we had members who had experience developing with Outsystems participating, and we could see their high level of interest.

The flow of this study session is as follows.

① Basic learning by watching videos

② Obtain a development account

③ High-speed development experience using scaffolding function

①Basic learning by watching videos

First, to look back on what I’ve learned so far, I watched learning videos provided by Outsystems official website.
The learning videos above are part of a training course, and review questions are provided at the end of each section to help you check your understanding.

A look at the study session. They were listening to the learning video with great interest.

② Obtain a development account

After that, we created an account for each participant in order to actually proceed with the development at hand.
By creating an account, a workspace is created in the cloud area, so individual development is possible by installing the development tool ServiceStudio.

③ High-speed development experience using scaffolding function

After setting up the environment, we demonstrated the development.

Here, we had students experience development using the scaffolding function of Outsysmtes.

This function is an Outsystems development assistance function that automatically creates templated list/detail screens based on entity (table) definitions that have been created in advance.
The existence of this feature allows Outsystems to create general master/detail screens much faster than with scratch development.
One member of the team who has actually done scratch development for web applications said, “It was more than I imagined that something that would have taken two to three days to do by hand could be done with such simple operations”.

In conclusion

This study session was mainly aimed at members who had no experience developing with Outsystems, so the learning content was mainly basic.
In the future, we will gradually step up the learning content, including screen development with Outsystems without using the scaffolding function,“batch data import/output function” and “utilization of the open source library “Forge”. We plan to continue learning about practical content.

Please look forward to the next study session article.

社内勉強会:Outsystemsを用いたローコード開発体験

今回の社内勉強会のテーマは「Outsystemsを用いたローコード開発体験」となります。
担当は第2ユニットのTTとなります。

これまで技術者ブログでも頻繁に取り上げてきたOutsystemsですが、未経験者にも実際に触ってもらい、より理解を深めてもらうことを目的とし勉強会を行いました。
また、今回はOutsystemsによる開発を経験したことのあるメンバーも参加しており、関心度の高さを伺うことができました。

今回の勉強会の流れは以下の通りでした。

①動画視聴による基礎学習

②開発用アカウント取得

③スキャフォールディング機能を用いた高速開発体験

①動画視聴による基礎学習

まず、これまでの振り返りとして、Outsystems公式が提供している学習動画を視聴しました(リンクはこちら)。
上記学習動画はトレーニングコースの一環となっており、各セクションの終わりには復習用の問題が用意されていますので理解度を確認できるつくりとなっています。

勉強会の様子。興味深げな様子で学習動画に聞き入っていました。

②開発用アカウント取得

その後、実際に手元で開発を進めるため、参加者ごとにアカウントの作成を行いました(リンクはこちら)。
アカウントを作成することでクラウド領域上にワークスペースが作成されるため、開発ツールであるServiceStudioをインストールすることで個人単位での開発が可能となります。

③スキャフォールディング機能を用いた高速開発体験

環境構築が整った後は、開発の実演を行いました。

ここでは、Outsysmtesが持つスキャフォールディング機能を用いた開発を体験してもらいました(リンクはこちら)。

本機能は、予め作成しておいたエンティティ(テーブル)の定義を基に、テンプレート化された一覧/詳細画面を自動で作成してくれるというOutsystemsの開発補助機能です。
本機能の存在により、Outsystemsは一般的なマスタ/ディティール画面を、スクラッチ開発と比べて非常に高速で作成することが可能となっています。
実際にWebアプリケーションのスクラッチ開発を行ったことのあるメンバーの一人は「手組みなら2~3日程度は必要とするところを、これだけの単純操作でできるとは想像以上だった」と感心しきりな様子でした。

まとめ

今回の勉強会では、主にOutsystemsによる開発を経験したことのないメンバーをターゲットにしていたため、学習内容も基礎的なものが中心でした。
今後は学習内容を徐々にステップアップさせていき、「スキャフォールディング機能を用いない、Outsystemsでの画面開発」「データの一括取込/出力機能」「オープンソースライブラリ”Forge”の活用」など、より実践的な内容について学習を進めていく予定です。

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

In-house event introduction

Hi, this is “Chen” from Unit 1! I am in charge of introducing this event.
I would like to introduce the Dandelions year-end report presentation held at the end of November 2023. I would like to talk about what each section introduced, their plans for next year, and my impressions. This term, reports have been made in sections.

Section 0

Section 0 consists of Unit 0 (WEB Design) and Unit 3 (Cloud Infrastructure). Let’s start with unit 0. The main contents are as follows.
• Website trend survey
• Recruitment site: https://dandelions.co.jp/recruit/
• Corporate site: https://dandelions.co.jp/

Dandelions’ web site

The keyword for Unit 0 is web design, so we introduced recent trends in web design, as well as updates to the Dandelions recruitment site and corporate site. The newly created homepage is very stylish and beautiful!

Introducing the latest ransomware

Section 1

The first section consists of Unit 1 (AI) and Unit 2 (low code). The presentation contents of the first unit are as follows.
• Introduction of the card game “Hello World”
• Introduction to AI image recognition system
• Lucky Box: https://luckybox.jp/ec/

The keywords for Unit 1 are AI and big data. This term’s deliverables were an AI image recognition system and an AI battle card game called “Hello World” that combined AI and big data. AI image recognition is a technology that uses an image recognition system trained in advance by the user to identify objects on a smartphone or computer. Although it is still under development, it is a technology that can be used in a variety of situations, so I have high expectations for it. Also, at the recital, we scanned the QR code and actually played the “Hello World” card game!

EC sites using AI image recognition system

Section 2

The presentation contents of Unit 2 are as follows.
• Attendance system changed to OutSystems
• About attendance app API
• Discussion (operation feel/requests)

Unit 2 is primarily responsible for developing internal attendance management systems. When using the attendance management system that everyone is already using, we listen to opinions such as what features they would like to add, and add various functions. You can now enter attendance at any time.

Image on smartphone

Next term plans

At this term-end report meeting, each unit presented their achievements for this year. I also set goals for what I would do from the next term onwards. Until now, development has been carried out by taking advantage of the characteristics of each unit, but as the next agenda item, we are aiming to first complete the deliverable. Once the deliverable is completed, the different parts are linked together to create a single deliverable. For example, with conventional attendance entry systems, if an employee forgets the password for their computer or tablet, they may not be able to enter attendance. However, by introducing an image recognition system, security can be strengthened as authentication is performed using biometric information such as an employee’s face or fingerprint.

Thoughts

I felt that the efforts of Unit 0, such as introducing trends in web design, were useful in improving the impression both inside and outside the company. I also think that introducing updates to the recruitment site and corporate site is effective for recruitment activities and branding.
I felt that the efforts of Unit 3, which is in charge of internal infrastructure construction and security, are making a significant contribution in invisible ways. I also think that the members of the third unit are a great source of support for the members of other units.
I think the AI image recognition system and the AI battle card game “Hello World” are both technologies that can be expected to play an active role in the future. In particular, I think AI image recognition systems have the potential to be used in a variety of situations. I also think that the AI battle card game “Hello World” has the potential to be used for a variety of purposes, including education and entertainment.
I think that adding functions to the in-house attendance management system and supporting attendance input using smartphones are good initiatives that will improve convenience for employees. In particular, inputting time and attendance using smartphones may contribute to reforming the way employees work.

That’s all for today’s introduction. Please look forward to the next company event introduction!

社内イベント紹介

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

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

2023年11月末に開催したダンデライオンズの期末報告発表会を紹介します。各セクションが紹介した内容、来期計画、また感想について話したいと思います。今期はセクション単位での報告になりました。

第0セクション

第0セクションは、第0ユニット(WEBデザイン)と第3ユニット(クラウド・インフラ)で構成されています。まず、第0ユニットからです。主な内容は以下になります。

第0ユニットのキーワードはWebデザインなので、最近のWebデザインのトレンドを紹介したり、ダンデライオンズのリクルートサイトやコーポレートサイトの更新内容も紹介しました。新しく作ったホームページがすごくおしゃれで綺麗ですね!

コーポレートサイト

第3ユニットの発表内容は以下になります。

  • サーバー管理 常時対応
  • サーバー管理 今期特別対応
  • サーバー管理 セキュリティ増強
  • ランサムウェアについて

第3ユニットは、主に社内インフラ構築とセキュリティを担当しています。ほかのユニットと比べて表に見えにくい活動ですが、第3ユニットのメンバーたちが支えていくれているこそ、日常業務がいつも作業しやすい環境ができるんです。ありがとうございます!

最新のランサムウェアを紹介

第1セクション

第1セクションは、第1ユニット(AI)と第2ユニット(ローコード)で構成されています。

第1ユニットの発表内容は以下になります。

  • カードゲーム「ハローワールド」の紹介
  • AI画像認識システムの紹介
  • ラッキーボックス:https://luckybox.jp/ec/

第1ユニットのキーワードは、AIとビッグデータです。今期の成果物は、AIとビッグデータを融合してAI画像認識システムとAI対戦カードゲーム「Hello World」でした。AI画像認識というのは、ユーザーが事前にトレーニングした画像認識システムを使ってスマホやパソコンでものを識別させる技術です。まだまだ開発途中ですが、色んな場面で活躍できそうな技術なので、とても期待しております。また、発表会の時に、QRコードを読み込み、実際に「Hello World」のカードゲームを体験しました!

AI画像認識システムを使用しているECサイト

第2ユニットの発表内容は以下になります。

  • 勤怠システムのOutSystems化
  • 勤怠アプリAPIについて
  • ディスカッション(操作感・要望)

第2ユニットは、主に社内勤怠管理システム開発を担当しています。すでにみんなさんが使われている勤怠管理システムは、使っている時、追加してほしい機能あればいいななどの意見を聞いて、様々な機能を追加したり、さらに、APIを使って、スマホでいつでも勤怠入力ができるようになりました。

スマホでのイメージ

来期計画

今回の期末報告会では、各ユニットは、今年度それぞれの成果物について発表してきました。そして、次期から何をするのかについても目標をあげました。今まで各ユニットの特徴を活かして開発が行われてきましたが、次のアジェンダとして、まずは、成果物を完成するよう目指しています。成果物が完成したら、それぞれ違うものを連携して、一つの成果物を作ります。例えば、従来の勤怠入力システムでは、社員がパソコンやタブレット端末のパスワードを忘れてしまうと、勤怠入力ができなくなる可能性があります。しかし、画像認識システムを導入することで、社員の顔や指紋などの生体情報で認証を行うため、セキュリティを強化することができます。

今年の目標

感想

ウェブデザインのトレンドを紹介するなど、第0ユニットの取り組みは、社内外からの印象をアップさせるのに役立つと感じました。また、リクルートサイトやコーポレートサイトの更新内容を紹介したことは、採用活動やブランディングにも効果的だと思います。

社内インフラ構築とセキュリティを担当する第3ユニットの取り組みは、目に見えない部分で大きな貢献をしていると感じました。また、第3ユニットのは、他のユニットのメンバーにとっても心強い支えになっているのではないでしょうか。

AI画像認識システムとAI対戦カードゲーム「Hello World」は、いずれも今後の活躍が期待できる技術だと思います。特に、AI画像認識システムは、さまざまな場面で活用できる可能性を秘めているのではないでしょうか。また、AI対戦カードゲーム「Hello World」は、教育や娯楽など、さまざまな用途に活用できる可能性があると思います。

社内勤怠管理システムの機能追加やスマホでの勤怠入力への対応は、従業員の利便性向上につながる良い取り組みだと思います。特に、スマホでの勤怠入力は、従業員の働き方改革にも貢献するのではないでしょうか。

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

anime.jsを使ってみた

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
今回はWEBデザインをテーマにしている第0ユニットです。
本記事ではanime.jsを使ってアニメーションを作成してみましたのでその方法をご紹介します。

anime.jsとは

anime.jsは、軽量なアニメーションライブラリです。
ちょっとしたアニメーションを簡単に導入することができますし、 工夫すれば凝ったアニメーションも作成できます。
また、公式サイトで公開されているドキュメントやサンプルも充実しています。

導入方法

公式のGitHubからダウンロードしてきた「anime.min.js」を読み込ませれば使用することができます。

公式サイト
https://animejs.com/

anime.min.jsは解凍したZIPファイルのlibフォルダの中に入っています。
入手したjsファイルをHTMLに読み込ませれば使用できます。

<head>
    http://js/anime.min.js
</head>

また、npmを使用していインストールすることもできます。

アニメーションを作ってみる

使用する準備ができたのでアニメーションを作ってみます。
今回は公式のサンプルでも公開されているサンプルを作ってみます。

上記はgif画像なので多少ちらつきがありますが、ちらつきなくアニメーションを作成することができます。
下記のコードで比較的簡単に実装することができます

html

<div class="box" id="elem"></div>

css

.box {
    background-color: blue;
    width: 80px;
    height: 80px;
}

JS

var cssSelector = anime({
    targets: '#elem',
    translateX: 250,
    rotate: '2turn',
    scale: 2,
    easing: 'easeInOutQuart',
    duration: 2000,
    direction: 'normal',
    loop: true
});

アニメーションは読み込まれたタイミングで自動的に実行されますが、
クリック実行時にアニメーションを実行することもできます。

html

    <button id="btn-like" class="btn btn-like">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-heart-fill like-icon pointer"
            viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314" />
        </svg>
    </button>

css

.btn-pink {
    --bs-btn-color: pink;
    --bs-btn-border-color: deeppink;
    --bs-btn-hover-color: pink;
    --bs-btn-hover-bg: pink;
    --bs-btn-hover-border-color: deeppink;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: pink;
    --bs-btn-active-border-color: pink;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: pink;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: pink;
    --bs-gradient: none;
}

.btn-like {
    --bs-btn-hover-color: pink;
    --bs-btn-active-color: #fff;
    color: deeppink;
}

JS

let likeBtnAni = anime({
    // targets: '.btn-like',
    targets: '.btn-like',
    rotate: '2turn',
    easing: 'easeInOutQuart',
    direction: 'normal',
    loop: false
});

//アニメーションの停止
likeBtnAni.pause();

//クリック時にアニメーションを実行
document.querySelector('.btn-like').addEventListener('click', likeBtnAni.play);

今回はanime.jsを使ってアニメーションを実装してみました。
次回の第0ユニットの技術者ブログもお楽しみに!