株式会社ダンデライオンズ公式ブログ
今回の社内勉強会のテーマは、「暗号化」です。担当は第３ユニットのえむです。
第3ユニットは、インフラ、セキュリティをメインに担当しています。
近年、個人・企業問わず、様々な形でサイバー攻撃による被害を聞くことがあります。
万が一企業が被害に遭うと、顧客からの信頼の損失や多額の損害賠償などにつながる可能性があり、最悪の場合企業の存続を大きく左右してしまいます。
そこで大切な情報を守り、漏洩を防ぐ一つの方法としてデータや通信内容の「暗号化」が必要となります。
暗号化とひと口に言っても様々な種類があるため、その中の一つとしてディスク・ファイルの暗号方法を学びました。
暗号化ソフトとして、VeraCryptを勉強しました。
暗号化仮想ドライブ作成ソフトです。
「VeraCrypt」は、“ 暗号化された秘密のドライブ ” を作成することができるソフトです。
今回使用したソフトは、PCや外付けのメモリなどでデータを持ち運ぶ機会がある時に簡単で安全に使用できると感じました。
暗号化は、その他にも様々なケースがあるので、今後も学んでいきたいですね。
As an engineer blog, I would like to introduce the learning content that I am working on on a daily basis.
This is the second unit with the theme of low-code development.
This time’s theme: “Using JavaScript in Outsystems”
In our second unit, we regularly use Outsystems for low-code development.
Outsystems provides tools that allow you to develop intuitively by dragging and dropping parts without having to code as much as possible.
However, if you want to implement details such as the UI part as you want, there may be cases where the properties provided by Outsystems are not enough.
In such a case, you may be able to implement your ideal by using JavaScript. This time I will introduce one such example.
This time, I would like to change the UI of DataGrid in Outsystems using JavaScript.
Specifically, we will introduce the following contents.
・Cancel the DataGrid’s default setting of coloring every other row.
・Color a specific column of DataGrid with your favorite color
How to use DataGrid
How to use the OutSystems Data Grid
First, we will change the coloring of every other row of the grid, which is set by DataGrid by default.
Normally, if no settings are made, every other row of the grid will be colored automatically, as shown below.
We will change this using JavaScript.
First, prepare a ClientAction (DataGridOnInitialize) for displaying the DataGrid in the screen element where the grid is located, and add an Input parameter called GridWidgetId.
Next, in the Event item of the DataGrid property to which you want to apply JavaScript, set the ClientAction you created earlier to Handler.
At this time, also set the GridWidgetId added with the Input parameter.
Set the following JavaScript in the ClientAction you created last.
(When defining a variable in JavaScript, the Input parameter GridWidgetId is specified.)
//Get the Grid information created on the screen var grid = GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider; //Abolish coloring for each row grid.alternatingRowStep = 0;
Next, we will use JavaScript to color only specific columns of the grid.
I would like to color only the Name and Age columns in the grid above in gray to make it easier to visually understand that they are non-editable columns.
This time, we will implement it by first coloring the entire grid gray, and then making only the editable Email column white.
First, write the following CSS in the Style Sheet of the screen.
.wj-cell{
background: lightgray;
}
.rowcolor{
background-color: white;
}
Next, add the following code to the JavaScript in ClientAction to complete the process.
//Set format for the acquired Grid
grid.itemFormatter = function(panel,r,c,cell){
//Color the Email column (3rd column) with white
if(c === 2 ){
//Add class definition to cell
wijmo.addClass(cell,’rowcolor’);
}
};
As you can see, OutSystems provides a variety of properties, but I found that you can implement them the way you want by using JavaScript.
It felt like I was able to reach out to a specific area of concern, and I felt that the scope of development was expanding.
Why not consider using JavaScript if you cannot achieve the desired results using Outsystems properties alone?
In the second unit, we will continue to develop blogs for engineers using low-code tools such as OutSystems, so please look forward to it.
技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、ローコード開発をテーマにしている第2ユニットです
今回のテーマ：『OutsystemsでのJavaScriptの活用』
我々第2ユニットでは日頃Outsystemsを利用してローコード開発を行っております。
Outsystemsでは、なるべくコーディングすることなく部品のドラッグ＆ドロップなどで直感的に開発できるようにツールが用意されています。
しかし、UI部分などの細かいところを思った通りに実装したい場合、Outsystemsで用意されているプロパティだけでは賄えない場合もあります。
そんなときに、JavaScriptを利用することで自分の理想通りの実装が可能になるかもしれません。今回はそんな一例をご紹介します。
今回はOutsystemsでのDataGridのUIをJavaScriptで変更していきたいと思います。
具体的には、下記の内容をご紹介します。
・DataGridのデフォルト設定である１行おきに色付けされるのを解除する
・DataGridの特定の列を好きな色で色付けする
<参考>DataGridの使い方
How to use the OutSystems Data Grid
はじめに、DataGridがデフォルトで設定している、グリッドの１行おきの色付けを変更していきます。
通常何も設定をしていないと下のように、グリッドの行が１行おきに自動で色付けされてしまいます。
こちらをJavaScriptを使って変更していきます。
まず、グリッドがある画面のエレメントにDataGrid表示用のClientAction（DataGridOnInitialize）を用意し、GridWidgetIdというInputパラメータを追加します。
次にJavaScriptを適用させたいDataGridのプロパティのEvent項目で、先ほど作成したClientActionをHandlerに設定します。
このときInputパラメータで追加したGridWidgetIdも一緒に設定します。
最後に作成したClientAction内で下記のようなJavaScriptを設定します。
（JavaScriptで変数定義する際にInputパラメータのGridWidgetIdを指定しています。）
//画面上で作成したGrid情報を取得
var grid = GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;
//一行ごとの色付けを廃止する
grid.alternatingRowStep = 0;次にグリッドの特定列のみJavaScriptで色付けをしていきます。
先ほどのグリッドのName列とAge列のみグレーで色付けし視覚的に編集不可の列だということをわかりやすくしていきたいと思います。
今回は先にグリッド全体をグレーで色付けをし、編集可能のEmail列のみ白色にするといった方法で実装していきます。
まず、画面のStyle Sheetに下記のようなCSSを記載します。
.wj-cell{
background: lightgray;
}
.rowcolor{
background-color: white;
}次にClientAction内のJavaScriptに下記のようなコードを追記すれば完了となります。
//取得したGridに対してフォーマットを設定
grid.itemFormatter = function(panel,r,c,cell){
//Email列（３列目）を白で色付けする
if(c === 2 ){
//クラス定義をセルに追加
wijmo.addClass(cell,'rowcolor');
}
};このように、OutSystemsでは様々なプロパティが用意されていますが、JavaScriptを使うことによって自分の思うように実装できることがわかりました。
まさに痒い所に手が届くようで、開発の幅が広がる感じがしました。
皆さんもOutsystemsのプロパティだけではなかなか上手く実現できない場合に、JavaScriptの利用を検討されてみてはいかがでしょうか。
第2ユニットではこれからもOutSystemsなどのローコードツールを使った技術者ブログを展開していきますのでお楽しみに。
Hello everyone. This is “Pyu🐤” from the Business Management Department!
This time, I would like to introduce myself, what led me to join Dandelions, and my impressions after joining the company.
I’m French and have been living in Japan for two years now. My university major is Japanese language and culture, and I have been interested in Japan for several years. My hobbies are watching anime and drawing manga-like pictures. I also like to travel around Japan and I have been to various places. Of all the places I have traveled to, my favorite is Mt. Fuji, the most famous mountain in Japan. Below is a picture I took last year near Mt. Fuji.
Last year, I started job hunting in Japan and I joined Dandelions in September 2023.
The reason I joined the company was because I felt a good atmosphere at Dandelions. During the interview, I was asked about my hobbies. It was a very good interaction and there was no stress.
Also, there are people from various countries working at this company, which I thought was a very positive factor. For foreigners, working in Japan at a company made up of only Japanese people can be scary. For that reason, I felt a little relieved because people of different nationalities were working at a Japanese company.
The atmosphere is good, and most of my co-workers are in their 20s. My seniors listen to me and help me if I have any trouble. I was also able to learn new skills through various fields such as marketing, translation, and web design. Additionally, I was able to deepen my knowledge of important IT topics, which I believe will be advantageous in any future job.
That’s all for now.
Look forward to the next employee introduction!
皆さん、こんにちは。業務管理部の「ピュー🐤」です!
今回は、自己紹介と株式会社ダンデライオンズに入社するきっかけと入社した後の感想を話していきたいです。
フランス人で、来日したのは今年2年間になります。大学の専門は日本語と日本文化で、日本の事は数年前から興味を持っています。趣味はアニメを観ることと、漫画っぽい絵を描くことです。日本を旅することも好きで、様々なところに行きました。旅した場所の中で、富士山の代表的な日本の山が一番好きです。以下、富士山の近くに去年撮った写真です。
去年は日本で就職活動を始めて、2023年9月に株式会社ダンデライオンズに入社することになりました。
入社するきっかけは、株式会社ダンデライオンズの良い雰囲気を感じたからです。面接の時に、自分の趣味について質問されました。 とても良いやりとりで、ストレスはありませんでした。
また、この会社には様々な国の方が働いていて、それもとても良い要素だと思いました。外国人にとって、日本で日本の方だけの会社で働くのは怖いかもしれません。その理由で、日本の会社で国籍がバラバラの方が働いているので少し安心できました。
雰囲気も良く、同僚は20代がほとんどです。 先輩たちは話を聞いてくれて、困ったことがあれば助けてくれます。
マーケティング、翻訳、Web デザインなどの様々な分野を通じて、新しいスキルを学ぶことができました。また、重要なITに関する知識を深めることができて、将来的にはどの仕事でも有利になると思います。
今回は以上になります。
次回の社員紹介もお楽しみに～！
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.
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.
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年度の社員旅行はどこになるのかな～？
楽しみです！
次回のブログもお楽しみに。
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.
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.
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.
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!
皆さん、こんにちは、第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ロジックの記載所が表示されます。
感想
過去にAPIを触ったことがなかったので、今回は0から始まりました。不明なことがたくさんありましたが、インターネットで情報を調べて、慌てずに一個ずつを解消していくことで完成できました。今回の勤怠システム連携課題のおかげで、APIの分野を学習し、新しい知識やスキルなどを蓄積することができ、大変勉強になりました。
次回は作成したメソッドの中身を説明したいと思います。お楽しみに！
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
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.
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.
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”.
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.