投稿

投稿日:

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ユニットの技術者ブログもお楽しみに！

投稿日:

New Year’s Greetings & Diversity of Dandelions

Happy New Year!

Thank you very much for your continued support. We will continue to strive to further improve our services this year, so we appreciate your support!

We entered our 7th season last year, and Dandelions has been steadily growing, albeit little by little. We are looking forward to a very exciting year as we gradually increase the number of employees and work on business plans.

多賀大社

Impact of COVID-19

The world has faced great difficulties due to the effects of the new coronavirus. Dandelions was no exception to this great difficulty.

At Dandelions, we have prepared a secure network environment as an approach to telework since our founding, so setting up infrastructure for telework was not a problem.

What became difficult was “conveying information correctly”. When there was a high level of concern about the new coronavirus, the means of sharing information were online meetings, texts such as emails, and indirect sharing through managers.

Although we were able to communicate using any means of information sharing, there were many cases where the information was not conveyed correctly. There have been times when things have not been communicated correctly, leading to major misunderstandings.

Dandelions’ diversity and member cooperation

However, once we realized that the information was not being communicated correctly, we were able to immediately take measures to improve communication. I believe that one of the reasons we were able to improve the accuracy of information sharing and overcome the challenges was the diversity of our human resources and the cooperation of our members.

Dandelions has human resources gathered not only from Japan but also from various countries and regions such as the United States, France, the Czech Republic, Nigeria, China, and Vietnam. Each person has their own culture and values.

In order to understand diversity, we take cross-cultural communication and communicable Japanese training, including our non-Japanese members, and are working on communicative communication.

Within the company, we communicate and respect different cultures and generate new ideas and perspectives. We were able to improve the accuracy of information sharing by applying the consideration of diversity among our members to information sharing.

Thinking about growth and customer satisfaction through teamwork

I believe that by working together, we were able to accomplish things that we could not do alone. Even during the coronavirus pandemic, we worked hard every day to meet the needs of our customers.

We believe that the fact that we have been able to earn the trust and appreciation of our customers is the result of our teamwork.

This year, we aim to grow even further. To achieve this, we need to further deepen our diversity and cooperation, and we need to always put customer satisfaction first. The Dandelions aim to be united towards this goal.

Conclusion

Last but not least, for everyone, I sincerely hope that this year will be a wonderful year.
We appreciate your continued support of our company.
Thank you very much.

投稿日:

新年のご挨拶＆ダンデライオンズの多様性

新年、明けましておめでとうございます。

平素はご愛顧を賜わり、厚く御礼申し上げます。
本年も、更なるサービスの向上に努めて参りますので、
より一層のご支援、お引立てを賜りますようお願い申し上げます。

昨年で第７期を迎え、ダンデライオンズも少しずつではありますが、
一歩ずつコツコツと成長を遂げております。
社員も徐々に増えていき事業計画などを練りながら、
とてもワクワクする楽しみな年になることを期待しております。

多賀大社

新型コロナウイルスの影響

新型コロナウイルスの影響で、世界中が大きな困難に直面しました。
この大きな困難は、ダンデライオンズも例外ではありませんでした。

ダンデライオンズでは、創業時からテレワークへのアプローチとして
セキュアなネットワーク環境を整えておりましたので、
テレワークへのインフラ整備は問題ではありませんでした。

困難となったのは、「正しく情報を伝える（伝わる）」ことでした。
新型コロナウイルスへの警戒が高いときの情報共有手段は、
オンラインミーティングだったり、メールなど文章だったり、
責任者経由に間接的な共有だったりしました。

どの情報共有の手段も伝えることはできたのですが、
正しく情報が伝わらないことも少なくありませんでした。
正しく伝わらないことで大きな誤解を生じたこともありました。

ダンデライオンズの多様性とメンバーの協力

しかし、私たちは正しく伝わっていない状況を把握した後は、
直ぐにコミュニケーションにおける対策を取ることができました。
情報共有の精度を高め、乗り越えることができた要因の一つは、
人材の多様性とメンバーの協力があったからだと思っています。

ダンデライオンズは、日本だけでなく、
アメリカ、フランス、チェコ、ナイジェリア、中国、ベトナムなど、
さまざまな国や地域から人材が集まっています。
それぞれの人材は、自分の文化や価値観を持っています。

私たちは、多様性を理解するため、異文化コミュニケーションや、
伝わる日本語の研修を外国籍のメンバーも含めて受講し、
伝わるコミュニケーションに取り組んでいます。

社内では、お互いに異文化に対しコミュニケーションを取りあいながら
尊重し、新しいアイデアや視点を生み出しています。
私たちは、多様性に対するメンバー同士の心遣いを情報共有に
応用することで、情報共有の精度を高めることができました。

チームワークで成長とお客様の満足を考える

私たちは、メンバーが協力することで、
一人ではできないことを成し遂げることができたと思います。
コロナ禍の中でも、私たちはお客様のニーズに応えるために、
日々努力しました。

そして、私たちがお客様の信頼や感謝を得ることができましたことは、
私たちのチームワークの賜物だと感じています。

今年も、私たちはさらに成長することを目指しています。
そのためには、
私たちの多様性と協力をさらに深めることが必要であり、
そして、私たちは常にお客様の満足を第一に考えることが必要です。
ダンデライオンズは、この目標に向かって一致団結することを
目指します。

結び

最後になりましたが、皆さんにとって
今年が素晴らしい一年になることを心から祈っています。
そして、
私たちの企業に引き続きご支援いただけることを感謝しています。
どうぞよろしくお願いいたします。

投稿日:

社員紹介(22-3)

ご覧いただきありがとうございます。
今回社員紹介の記事を担当します、第二ユニットのオギです！
今回は、私がダンデライオンズに入社したきっかけと、入社してからについてお話しします。

入社したきっかけ

まずはダンデライオンズに入社したきっかけについてお話しします。
学生時代は情報学部でIT業界にずっと興味があって……というわけではなかったです。
学生時代は全く別のことを勉強していて、どちらかというとITから縁遠い人間でした。
ただ、プログラミングの勉強をしている友人がいて、その人がどんなことをしているのかなど話を聞いて、なんとなく面白そうだなと感じてはいました。

就職活動をしていく中では、事務職や総合職で探して何社か応募しました。
実は、ダンデライオンズで最初に応募したのはエンジニア職としてではなく、今の管理部門にあたる職種としてでした。
コーポレートサイトや、それこそこのブログの過去投稿などを見て、明るくてあたたかそうな会社だと感じて応募しました。
面接で話していく中で、IT業界やエンジニア職の仕事への興味が自分の中で強くなり、それが会社にも伝わったようで、エンジニア職としての採用を提案していただきました。
私としては、未経験であることに不安は感じながらも、IT人材として人の役立つことができたらいいなという思いもあり、エンジニア職として働かせていただくことになりました。

入社してから

新入社員として入社してから、現在3年目になります。
入社してからは3か月ほど研修期間があり、JavaやSQLなどエンジニアとしての仕事に必要な基礎知識を勉強しました。
研修期間を終えてからは、自社やお客様先のシステム開発案件や、お客様先システムの保守運用、モバイルサービス事業の技術アシスタントなど様々な案件に携わらせていただいて、経験を積んでいます。
業務の中で分からないことがあればすぐに他の社員に聞くことができる雰囲気がありますし、皆さんいつも丁寧に教えてくれます。

会社の雰囲気としては明るくあたたかい印象で、入社前と変わらずでした。
コロナ禍での入社だったので、最初のころはなかなか社員一同に会する機会もありませんでしたが、徐々に懇親会や社員旅行が開催できるようになり、普段は別のお客様先にいる同僚とのコミュニケーションも増えたと思います。

この夏のレクリエーションの様子です。詳しくはこちら！

まとめ

入社後3年近く経ち、様々な経験を通して入社当初よりできることが増えました。
今後の目標としては、入社以降ダンデライオンズの上司や先輩に教えてもらったことやいただいた優しさを、ダンデライオンズの後輩や未来の後輩に対して返していければと思います！
（話していたら長くなってしまったので、近況などはまた今度の機会に…）

次回の社員紹介もお楽しみに！


投稿日:

Engineer Blog: Creating app icons with CLIP STUDIO PAINT

As an engineer blog, I would like to introduce the learning content that I am working on.
This time, I will introduce how to create app icons using CLIP STUDIO PAINT, a software specialized for illustration and manga production.

About “CLIP STUDIO PAINT”

CLIP STUDIO PAINT is a paid software, and there are mainly three types.
・CLIP STUDIO PAINT EX: For those who want to use it not only for illustrations and web design, but also for manga production.
・CLIP STUDIO PAINT PRO: For those who want to use it not only for illustrations and graphic art, but also for web design, etc., and for those who do not create manga.
・CLIP STUDIO PAINT DEBUT: For those who want to use it only for illustration and graphic art production.

If you would like to know more, please click the link below:
https://www.clipstudio.net/ja/lineup/

The one I use is CLIP STUDIO PAINT EX, so this time I will introduce the functions installed in CLIP STUDIO PAINT EX.

How to create an “app icon”

The icon I created this time is as follows.

I will now introduce the specific production steps.

1. Launching a new canvas
This time, after creating the icon, I was told that I would be resizing it to various sizes and using it, so I prepared it a little larger and with a 1:1 ratio.

2. Design
I used the following tools to create the design.

  • 塗りつぶしツール
  • テキストツール
  • レイヤーの透過
  • ペンツール
  • パース定規①
  • パース定規②
  • 図形ツール(長方形)
  • 直線ツール
  • 対称定規

① Fill in the background with the fill tool
Personally, I wanted to design with the base color + white logo, so I used the background color fill tool to fill the entire canvas with color.

With this fill tool, if something is drawn on the canvas, you may not be able to fill it in the way you want unless you specify settings such as “Refer only to editing layer” or “Refer to other layers”.
This time, since the canvas was blank, this specification was not necessary, so I will omit it.

② Prepare the text that will become the foundation of the design using the text tool
This time, I used the TA Maru Gothic GF03 font, which is provided by default in CLIP STUDIO PAINT.

Fonts downloaded from external sites can also be used within CLIP STUDIO PAINT by clicking [Add font from file] from [Tool properties] under [Text] and selecting the font file you want to add.
*When downloading from external sites, please check if the font can be used commercially before downloading and using it.

➂ Do modifications based on the font prepared in ②
Lower the opacity of the font layer prepared in ② and make changes as shown below.

  • ❶レイヤー透明度を変更
  • ❷パース定規配置
  • ❸なぞるようにペンツールで描写
  • ❹図形ツールで長方形作成
  • ❺直線ツールで点線を描写
  • ❻対称定規を配置
  • ❼テキストツールで文字を配置
  • ❽バランスを見てペンツールでイラストを描写

④ Hide the original font layer
Once the design is complete, hide the original font.
You can delete the layer, but it is useful to have it hidden when changing or retaking the design, so it is convenient to leave it hidden.

3. Save
Even if you save it as is, it will be saved as a CLIP STUDIO PAINT file, so use Save a Copy (or Save As) to change the extension and save it as an image.

That’s all!

Look forward to the next engineer’s blog!

投稿日:

技術者ブログ：CLIP STUDIO PAINTでアプリアイコン制作

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
インフラをテーマにしている第3ユニットです。

今回は、CLIP STUDIO PAINTという、イラストや漫画制作に特化したソフトウェアを使用し、アプリのアイコンを制作する方法について、ご紹介します。

CLIP STUDIO PAINTについて

CLIP STUDIO PAINTは有料のソフトウェアで、主に3種類あります。
・CLIP STUDIO PAINT EX：イラストやWebデザインだけでなく、漫画制作でも使用したい方向け
・CLIP STUDIO PAINT PRO：イラストやグラフィックアートだけでなく、Webデザインなどでも使用したい方向けで、尚且つ漫画制作は行わない方向け
・CLIP STUDIO PAINT DEBUT：イラストやグラフィックアート制作のみで使用したい方向け

更に詳しく知りたい方は以下をご参照ください
https://www.clipstudio.net/ja/lineup/

私が使用しているものが、CLIP STUDIO PAINT EXの為、今回はCLIP STUDIO PAINT EXに搭載されている機能前提でご紹介します。

アプリアイコン制作方法

今回制作したアイコンは以下です。

具体的な制作手順を紹介していきます。

1.新規キャンバスの立ち上げ
今回はアイコンを作成後、様々なサイズにリサイズして使用するとの事でしたので少し大きめで、比率が1:1となるように用意しました。

2.デザインをする
デザインを制作する上で、以下ツールを使用しました。

  • 塗りつぶしツール
  • テキストツール
  • レイヤーの透過
  • ペンツール
  • パース定規①
  • パース定規②
  • 図形ツール(長方形)
  • 直線ツール
  • 対称定規

① 塗りつぶしツールで背景を塗りつぶす
個人的に土台の色+白色のロゴでデザインをしたいため、背景となる色を塗りつぶしツールでキャンバス全体に色を乗せます。

この塗りつぶしツールですが、キャンバスに何か描かれている場合は、「編集レイヤーのみ参照」や「他レイヤーを参照」などの指定をしないと思い通りに塗れないことがあります。
今回は何も描かれてないキャンバスだったため、この指定は必要なかったので割愛します。

② テキストツールでデザインの土台となる文字を用意
今回はCLIP STUDIO PAINTにデフォルトで用意されてるTA丸ゴシックGF03のフォントを使用しました。

また、外部サイトでダウンロードしたフォントも、[テキスト]の[ツールプロパティ]から[ファイルからフォントを追加]を押して、追加したいフォントファイルを選択するとCLIP STUDIO PAINT内で使用することができます。
※外部サイトからダウンロードする際は商用利用可能なフォントか確認してからダウンロードしてご利用ください。

➂ ②で用意したフォントを土台に手を加える
②で用意したフォントのレイヤーの不透明度を下げ、以下のように手を加えていきます。

  • ❶レイヤー透明度を変更
  • ❷パース定規配置
  • ❸なぞるようにペンツールで描写
  • ❹図形ツールで長方形作成
  • ❺直線ツールで点線を描写
  • ❻対称定規を配置
  • ❼テキストツールで文字を配置
  • ❽バランスを見てペンツールでイラストを描写

④元にしたフォントレイヤーを非表示にする
デザインが完成したら元にしていたフォントを非表示にします。
レイヤー削除をしても良いのですが、デザイン変更・リテイクの際にあると便利なため、非表示にして残すと便利です。

3.保存
このまま保存をしてもCLIP STUDIO PAINT用のファイルとして保存されてしまう為、複製を保存(または別名で保存)で拡張子を変更し、画像として保存をします。

以上となります。

次回の技術者ブログをお楽しみに。

投稿日:

Employee Introduction

Hi, I am “Pump Muscle” in charge of the redaction of this employee Presentation. This time, I would like to talk about why I joined the company and my impressions after joining it.

First of all, I would like to explain why I joined Dandelions. When I started job hunting, my first choice was to be an English conversation instructor. This is because it is the mainstream job in Japan for foreigners whose first language is English. In fact, many of my foreign acquaintances also work in English-related fields. The reason I did not apply for an English conversation teacher position but for an IT job was a casual remark from a girlfriend. “Since you are good at computers and interested in IT, why don’t you apply for an IT job?” When I heard this, I thought, “I want to continue working and living in Japan and there is a shortage of IT personnel. If I can get a job in the IT field now, there will be many more possibilities for me in the future. I want to acquire more skills and experience and become a person in demand.” From there, I applied to several IT-related companies. As I was interviewing for Dandelions, I felt the warm atmosphere of the company and decided that it would be great to work with them. It has now been 4 years since I joined dandelions.

I would like now to talk about my impressions after joining the company. Dandelions has a warm and fun atmosphere, and I feel like all the employees and their superiors get along pretty well. Moreover, there are regular drinking parties and company trips, which allow all employees to deepen their relationships.

This is a picture that I am really fond of taken on the last company trip.

I am currently in my 4th year at dandelions, and I still have a lot to learn, and I often stumble, but we have created a positive environment and deep relationships. Therefore, it is easy for employees to talk to each other, and when I need help, I am always supported by my reliable boss and colleagues. I hope to continue to create a better working environment with everyone I work with.

投稿日:

社員紹介

　社員紹介記事を担当する「パンプ筋」です。今回は私が入社したきっかけと入社後の印象について、お話させていただきます。

　まず始めに、私がダンデライオンズに入社したきっかけからお話しさせていただきます。就職活動を始めた時、最初、応募するのは英会話講師一択でした。なぜなら、第一言語を英語とする外国人には、それが主流だからです。実際に、知り合いの外国人も、英語関係で働いている方々が多いです。英会話講師だけではなく、ITの仕事にも応募したきっかけは、交際している彼女の何気ない一言でした。「パソコンに強いし、IT関係に興味があるなら、ITの仕事にも応募してみたら？」この一言を聞いて、「日本で働いて、住み続けていきたい。IT人材が不足している世の中で、今、ITの仕事に就くことができたら、これから先、進む道も広がっていく。技術と経験を身に付けて、需要のある人材になりたい。」と考えました。そこから、IT関連の会社に何社か応募しました。面接を受けていくなかで、会社の温かい雰囲気を感じ、一緒に働けたらいいなと思ったのが、ダンデライオンズでした。無事、内定をいただき、働き始めて、現在、４年目になります。

　次に入社後の印象について、お話させていただきます。ダンデライオンズは、温かい雰囲気で楽しく、仲の良い社員や上司が多いという印象を持っています。定期的な飲み会や社員旅行があり、社員全体の仲を一層深めることができます。

前回、社員旅行で撮っていただいたお気に入りの写真です。

現在４年目ですが、まだまだ学ぶことも多く、つまずくことも多いですが、社員同士話しやすい環境、関係が作られており、何かあった時、頼れる上司、同僚にいつも助けられています。これからも、一緒に働く皆さんと共に、より良い職場環境を作っていけたらと思っています。

投稿日:

Recreation: “BBQ & Physical Exercise”

At Dandelions, we regularly hold “recreation” events to deepen friendships among our employees!

I am “Joji” from the third Unit. In this article, I would like to leave behind the gradually getting colder season and talk about this year’s warm and dazzling midsummer, and introduce the “recreation” the third Unit hold. On July 28, 2023, we gathered at the Shonai Ryokuchi Park and enjoyed BBQ and did some physical exercise. The main person in charge of this event was “Kuroma”.

For the BBQ, “BBQ CANVAS Shonai Ryokuchi” helped us and prepared the BBQ site, equipment, and food, and we only brought in additional food. It was so much fun grilling and eating delicious meat and vegetables together! By the way, I recently learned the word nomikeshon (mix of the Japanese verb nomu which means “to drink”, and the word komyunikēshon, “communication”) and I thought that a tabenikeshon (mix of the Japanese verb taberu which means “to eat”, and the word komyunikēshon, “communication”) like this one would be enough to deepen our friendships.

The BBQ site
Grilling meat 🍖

The physical exercises were all kinds of games. For example, we played “Daruma-san ga Kotta” (the Japanese equivalent of the “Red light, Green light” game), and as a summer game, we also split watermelon. (Personally, I felt like “Oh, it’s summer in Japan!”)

Before splitting the watermelon…
…After splitting it!🍉

After the BBQ was over, we cleaned up the site and moved to the grassy area of the Shonai Ryokuchi Park, where we played dodgeball and other activities.

Just before we start playing dodgeball

Looking back on it now, several months later, it was a really fun event. As a member of the third Unit, which hosted the event, I was really glad that the weather was sunny and there were no major problems.

This is not the last Dandelions event, so stay tuned for the next one!

投稿日:

レクリエーション「BBQ&運動」

ダンデライオンズでは社員同士の親睦を深めるための「レクリエーション」を定期的に開催しています！

第3ユニットの「じょーじ」です。今回の記事では、だんだん寒くなりつつあるこの季節から暖かくて眩しい真夏に戻り、第3ユニット主催のレクリエーションを紹介したいと思います。夏なので外で遊べると考え、2023年7月28日に所内緑地公園に集まり、BBQと運動を楽しみました。ちなみに、今回のイベントのメイン担当は、第3ユニットの「クロマ」でした。

BBQは、「BBQ CANVAS 庄内緑地」さんにお世話になり、BBQ用のサイト、機材と食料を準備していただき、追加食料と遊び道具だけを持ち込みました。皆でおいしいお肉と野菜を焼き、食べるのは、とても楽しかったです！ところで、「飲みニケーション」という単語を最近知りましたが、今回のような「食べニケーション」でも十分に親睦を深められると思いました。（お酒もちょっと飲みましたが。）

サイトの様子
お肉BBQ

運動は、さまざまな遊びでした。例えば、「だるまさんがころんだ」をやったり、ボールで遊んだりしていました。そして、夏らしい遊びとして、スイカ割りもしました。（個人的には、「ああ、日本の夏だ！」と感じました。）

スイカ割り
見事に割った！

BBQが終わった後、サイトを片付け、所内緑地公園の芝生広場に移動し、ドッジボールなどをしました。

ドッジボール開始直前

数か月後の今に振り返っても、とても楽しいイベントでした。そして、主催した第3ユニットのメンバーとして、天気が晴れ、大きな問題がなかったことを、本当に良かったと思います。

ダンデライオンズのイベントがこれで最後ではないので、次回の紹介をお楽しみに！