社内勉強会: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ユニットの技術者ブログもお楽しみに!

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.

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

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

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

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

多賀大社

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結び

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

社員紹介(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.