dandelionS Blog

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!

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、ローコード開発をテーマにしている第2ユニットです。

今回のテーマ：『アプリケーションのモバイルアプリ化』

前回は、Advanced Excelを使用してOutSystems内の画面データをExcel出力する方法についてご紹介しました。
今回は、OutSystemsで作成したアプリケーションをスマホなどのモバイルアプリとして使用できるようにする方法をご紹介します。

モバイルアプリ化ってなんだか大変そう…

モバイルアプリと言われてパッと思い浮かんだのは、App storeやGoogle Playストアなどからインストールできるものでした。
（アプリとしてリリースするまでに手間や時間がかなりかかるみたいだし、アップデートもすぐに反映できないし、そもそもアプリの利用用途的にストアで配布までしなくても…うーん…。）
と、最初はモバイルアプリ化に対してちょっと身構えましたが、思っていたよりも手軽にモバイルアプリ化することができます！

OutSystemsでは、アプリストアを経由してインストールするアプリ（こちらはネイティブアプリといいます）を配布する方法のほかに、PWA（プログレッシブWebアプリ）として配布する方法が用意されています。

PWA（プログレッシブWebアプリ）とは？

プログレッシブWebアプリとは、スマホなどモバイル端末向けに設計されたWebサイトやWebアプリを、ネイティブアプリと同じように扱えるようにする技術のことです。PWAには以下のようなメリットがあります。
・アプリストアを利用する必要がない
・Webサイト上のコンテンツでありながら、アプリと似たような使い方ができる
・iOS/Androidで同じ仕様のものが使える
等々…

ここからは、OutSystemsで作成したアプリケーションをPWAとしてモバイルアプリ化する手順をご紹介します。

モバイルアプリ化してみよう：準備編

最初からモバイルアプリ化を見据えてアプリケーションを作成するときは、アプリケーション新規作成の際に「Tablet App」または「Phone App」を選択します。

そのあとは、画面やロジックを作成してアプリを作っていきます。

モバイルアプリ化してみよう：配布編①（OutSystems Service Studio）

アプリが完成したら、いよいよアプリケーションをモバイルアプリ化します。
まずは、OutSystems Service Studioで配布の準備をします。

①モバイルアプリ化したいアプリケーションを選択します
②「Distribute」を選択します
③「Progressive Web App(PWA)」の下にある「Distribute as PWA」をオンにします
④アプリケーションのQRコードが発行されます

モバイルアプリ化してみよう：配布編②（モバイル端末）

ここからは、ユーザのモバイル端末での操作になります。
今回はiOS(iPhone)の画面をご紹介しますが、Androidでも操作に大きな差はなくインストールすることができます。

①カメラ等で発行したQRコードを読み取りブラウザで開きます
②Safariの「追加・共有・保存」アイコン（画面下の真ん中）をタップします
③「ホーム画面に追加」をタップします
④名称を入力して「追加」をタップします

以上の手順を踏んで、ホーム画面にアプリケーションが追加されれば完了です！

「Reactive Web App」でアプリケーションを作成していたら…

最初にReactive Web Appを選択したけど、モバイルアプリとして使いたい…！と思うこともあるかもしれません。
ただ、Reactive Web AppにはDistributeタブはなく、PWAとしてモバイルアプリ化することはできません。また、アプリケーションのタイプを後から変更することは、OutSystemsの仕様上不可能です。
しかし、疑似的にモバイルアプリ化のようにする方法を併せてご紹介します。

①アプリケーションをブラウザで開き、「QRコードを作成」アイコンを選択します
②作成されたQRコードをモバイル端末で読み取り、配布編②の操作をします

もちろんアプリケーションの作られ方が違うので挙動等は違いますが、ホーム画面から直接アクセスできる便利さなどはReactive Web Appでもカバーすることができます。

まとめ

今回は、OutSystemsで作成したアプリケーションをスマホなどのモバイルアプリとして使用できるようにする方法をご紹介しました。
アプリストアで配布するモバイルアプリ化だけでなく、PWAで素早く手軽にアプリケーションをモバイルアプリ化することも可能ですので、アプリケーションの利用用途などに合わせて活用してみてください！

第2ユニットではこれからもOutSystemsなどのローコードツールを使った技術者ブログを展開していきますのでお楽しみに。

In August 2023, we held an internship with two Japanese students and four international students. In this article, we will introduce the experiences of the participants.

Nepali international student (man)

The internship at Dandelions was a very enjoyable experience. I met people from various countries and became friends with them. At the same time, I learned a lot as an intern. Participating in this internship training provided me with an opportunity to learn business manners necessary in the world of work. I studied computer science in high school and came to Japan to study in 2019. I am currently studying IT as a student at Aichi Sangyo University.

On the first day of the internship, we had to decide on captions for the LINE stamps of the company. I experienced working as a group, which was really interesting. Next, we worked on making our own business cards. We had to write a short self-presentation, including our past, present, and future. It was not easy to compile information about myself, but thanks to that, I was able to know more about myself.

On the second day, we had to taste sweets we bought and to write our impressions for the EC site. I learned that tasting the sweets and writing reviews about them was to make it easier for customers to understand what flavor, texture, aroma the sweets have.   

On the third day, we practiced exchanging business cards, which is not really something that you learn at school. After that, there was an explanation about web design. I had studied web design and HTML at school, but the explanations given during the internship were completely different from the ones given by school teachers who were limited to books. In the afternoon, we worked on creating personas and creating a website. I usually do presentations and university assignments by myself, but it was also a great experience to create something with my fellow interns.

Korean international student (woman)

I participated in this internship with the goal of experiencing something new. I was nervous as it was my first internship, but I had a great time working with other interns and discussing about not only IT-related knowledge but a variety of things.

On the first day, we decided on the captions for the LINE stamps. Some captions came to mind right away, while others did not, but after thinking about it as a group, we were able to decide on captions that were suitable for the stamps.

On the second day, we did a test experience. The test consisted on checking if a website was working properly or not. It was a good opportunity to understand the importance and the difficulty of website testing.

On the third day, we did web design. I realized that marketing research and persona setting are important before starting a design. Through group discussions, we worked on creating a persona that could convey the charms of the Tokai region. Although there were some tasks that required specialized knowledge, I believe that by working together as a group, we were able to create a highly complete web design.

The Dandelions internship was filled with new experiences, and I was able to achieve my own goals. I am glad that I was able to work on LINE stamps captions, web test, and web design, which I would not normally have the opportunity to.

Vietnamese international student (woman)

In August 2023, I participated in an internship with Dandelions. This experience was very meaningful and I learned a lot.

First of all, the actual work experience not only allowed me to implement the knowledge I had learned at school, but also provided me with practical knowledge that could not be learned from textbooks or classes. During the practical experience, I understood the importance of project progress management and team cooperation, and had the opportunity to improve my problem-solving skills during the week’s work.

Additionally, through communication with team members and supervisors, I learned the importance of manners and professionalism as a worker. I realized that proper reporting, proposal-making, and collaborative skills are essential to success in a workplace.

The internship at Dandelions was a big step in my career in Japan. It was an experience that bridged the gap between theory and practice in the field of IT management, exposed me to the latest trends and technologies in the industry, and gave me an opportunity to practice my skills. I am confident that this will lead to my future growth.