タグ: 勉強会

投稿日:

Internal Training Session: Low-Code Development Experience Using Outsystems Part 2

Hello! I’m Ogi, responsible for this edition of our study session blog. I’m excited to share the highlights of our recent internal training session, “Low-Code Development Experience Using Outsystems Part 2”!

Check out the highlights from our previous study session here!

Building on our last session, the goal of this study meeting was to deepen our understanding of low-code development and Outsystems by gaining hands-on experience with Outsystems development. This time, we had many new members join us, making the session even more vibrant and engaging.

Here’s how the study session unfolded:

  1. Recap of the Previous Session
  2. Watching Educational Videos – Focus on UI Development
  3. Hands-On Development with Outsystems
  4. Summary and Q&A

Watching Educational Videos – Focus on UI Development

We kicked off the session by watching official educational videos provided by Outsystems. This time, the videos focused on UI development, where we learned the basics of screen widgets, variables, and client-side logic.

If you’re interested, you can watch the videos here (an Outsystems account is required).

Hands-On Development with Outsystems

After watching the videos, each participant used their own Outsystems environment to start developing. During this hands-on session, we primarily focused on:

  • Adding Widgets and Logic to Screen
  • Utilizing Aggregates ( Learn more about Aggregates here.)
  • Displaying Data on Screen

We experienced firsthand the unique advantages of developing with Outsystems, such as the simplicity of adding widgets through drag-and-drop and the visual manipulation capabilities provided by Aggregates for data retrieval and sorting.

Throughout the development process, we followed the instructor’s explanations and worked on our own projects, enhancing our practical skills.

While listening to the instructor’s explanations, we proceeded with development in our own environments.

Summary

In this study session, we tackled more hands-on content compared to the previous one, successfully conveying the benefits of low-code development and Outsystems. The development experience segment fostered active discussions and Q&A among the participants, further deepening our understanding.

We plan to continue hosting study sessions focused on Outsystems development in the future. Stay tuned for our next article!

投稿日:

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

今回の勉強会記事を担当します、第2ユニットのオギです。
今回は社内勉強会「Outsystemsを用いたローコード開発体験 part2」が開催されましたので、その様子をご紹介します！

前回の勉強会の様子はこちら！

前回に引き続き、今回の勉強会も「Outsystemsでの開発を体験することで、ローコード開発やOutsystemsへの理解をより深めていくこと」を目的としています。
今回からの参加となるメンバーも多数いて、さらに活気ある勉強会となりました。

勉強会の流れは以下のとおりです。
⓪前回の勉強会のおさらい
①学習動画視聴 -UI開発について-
②Outsystemsでの開発体験
③まとめ、質疑応答

学習動画視聴 -UI開発について-

まずはOutsystemsが公式で提供している学習動画を視聴しました。
今回はUI開発についての動画を通して、画面のウィジェットや変数、クライアントのロジックについての基礎知識を学んでいきます。

こちらのリンクから視聴することができる(Outsystemsのアカウント取得が必要になります)ので、ご興味がある方は見てみてください！

Outsystemsでの開発体験

動画を視聴した後は、各々が構築したOutSystemsの環境を用いて実際に開発を進めました。

今回実施したのは主に以下のとおりです。
・画面へのウィジェット、ロジックの追加
・Aggregateの活用 (Aggregateについてはこちら)
・画面へのデータ表示

画面にウィジェットをドラッグ&ドロップで簡単に追加できたり、Aggregateを用いることでデータの取得やその条件、ソートなどを視覚的に操作できたりといったOutsystemsでの開発ならではの利点を体験しました。

講師の説明を聞きながら自分の環境で開発を進めていきます。

まとめ

今回の勉強会では前回よりもさらに実践的な内容を取り上げ、ローコード開発やOutsystemsの良さを伝えられた会になったかと思います。
開発体験のパートでは、近くのメンバーとの話し合いや質疑応答が盛んにおこなわれ、理解も一層深められたのではないでしょうか。

今後もOutsystemsの開発をテーマとした勉強会を開催予定です！
次回の記事もお楽しみに。

投稿日:

Internal Study Session: About Monaca

I’m “xig” from Unit 0, and I’ll be writing this study session article.

The theme of this in-house study session is “Monaca.”

It’s a familiar topic in Unit 0, but we held the study session with the aim of allowing inexperienced people to actually try it out and deepen their understanding. I was the one teaching, but the number of people who participated was greater than we initially expected, so I was a little nervous.

The study session went as follows:

①Outline of Monaca

②Introduction to the environment

③Hands on actually trying out Monaca

Overview of Monaca

In the 0th unit, we used Monaca’s cloud IDE (browser-based development environment),
so we focused on that and explained what Monaca is and what it can do.

I’ve found the following three points to be useful when actually using it,
and I hope that the participants were able to understand them.

〇 Easy to get started with an internet connection

〇 Easy to check operation (on a browser or smartphone)

〇 Easy to publish to the store

Environment introduction

After I gave them an overview, I had them create an account to start using Monaca.
I also showed them an actual screen and explained what items are available.
I personally didn’t feel any resistance to it because the UI is similar to the integrated development environment I normally use, but what did you all think?

Let’sTry

After the explanation, we did some coding exercises using Monaca’s sample programs. Monaca has pre-made templates, so this time we used the Todo app template, changed the background color, and added functions to add and delete database functions to actually create an app.

Summary

In this study session, we actually used Monaca to experience developing a simple app.

– I want to write a simple sample program, but setting up the environment is a hassle…
– I want to quickly develop an app for iOS or Android…
– I hope that when you feel like this, you will remember the exercises from today and put them to good use.

So, please look forward to the article from the next study session!

投稿日:

社内勉強会：Monacaについて

今回の勉強会記事を担当する第0ユニットの「xig」です。


今回の社内勉強会のテーマは「Monaca」となります。

第0ユニットではなじみ深いものですが、未経験者にも実際に触ってもらい、より理解を深めてもらうことを目的とし勉強会を行いました。私自身は教える側でしたが、当初の予想を超える人数ご参加いただき、少し緊張してました。

勉強会の流れは以下の通りです。

①Monacaの概要説明

②環境導入

③実際にMonacaを触ってもらう

Monacaの概要説明

第0ユニットでは、MonacaのクラウドIDE(ブラウザベースの開発環境)を利用しているため、
それを中心にMonacaとは？どんなことができるのか？などを説明いたしました。

実際に使っていて以下3点、便利だなーと思っているのですが、
それが参加者にも伝わっていれば嬉しいです。

〇ネット環境があればすぐに簡単に始められる

〇動作確認がすぐできる(ブラウザ上で、スマホ上で)

〇ストア公開までが簡単

環境導入

概要を説明したら、Monacaを使ってい頂くために各自アカウントを作成しました。
合わせて実際に画面を出してどんな項目があるかを説明しました。
自分は普段使っている統合開発環境にUIが近いこともあって、抵抗感は少ないのですが、皆様はどう感じたでしょうか…？

Let’sTry

一通り説明が終わったらMonacaのサンプルプログラムを使って実際にコーディング演習を行いました。Monacaにはあらかじめテンプレートというものがあるので、今回はTodoアプリのテンプレートを使って、背景色を変えてみたり、DB機能の追加や削除機能を追加して実際にアプリを作りました。

まとめ

今回の勉強会ではMonacaを実際に使って簡単なアプリ開発を体験しました。
・ちょっとしたサンプルプログラムを組みたいけど、環境を用意するのが面倒…
・IOSやアンドロイド向けのアプリをサクッと開発してみたい…
そんな時にはぜひ、今回の演習のことを思い出して活用頂けたら幸いです。

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

投稿日:

In-house study session: “The strongest encryption that can be used by ordinary people”

The theme of this in-house study session is “encryption.” The person in charge is Emu from the 3rd unit.
The 3rd unit is mainly responsible for infrastructure and security.

In recent years, we have heard of damage caused by cyber attacks in various forms, both for individuals and businesses.
If a company were to suffer damage, it could lead to a loss of trust from customers and a large amount of compensation, and in the worst case scenario, the survival of the company could be greatly affected.
Therefore, one way to protect important information and prevent leaks is to encrypt data and communication content.

There are many different types of encryption, and I learned how to encrypt disk files as one of them.

Study session title
What is encryption?
Study session scene

I studied VeraCrypt as an encryption software.
Encrypted virtual drive creation software.
“VeraCrypt” is software that allows you to create a “secret encrypted drive.”

VeraCrypt site
VeraCrypt encrypted hidden volume

I felt that the software I used this time was easy and safe to use when I had the opportunity to carry data around on a PC or external memory.

There are many other cases of encryption, so I would like to continue learning about them.

投稿日:

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

投稿日:

社内勉強会-カードゲーム事情

前回の勉強会の様子

社内勉強会 – SNS映えする写真加工術

今回の勉強会記事を担当する第2ユニットの「TT」です。
さて、今回のテーマである「カードゲーム事情」についてですが、弊社では「HELLO WORLD」というカードゲームを取り扱っております。
そうした中で、本作品のバージョンアップ、もしくは次弾の構想検討に際し、
既存のカードゲームに実際に触れてみることで理解を深め、どのような要素があり、またその内どれを参考にするべきか（あるいは取り入れるべきか）を学ぶことを目的とし開催しました。
以下、実際に当日プレイしたゲームの紹介となります。

1.「はぁって言うゲーム」

今回集まったメンバーはあまりボードゲーム・カードゲームに馴染みのあるメンバーではなかったため、まずは軽いアイスブレイクとしてルールがシンプルで分かりやすい「はぁって言うゲーム」（リンク先：幻冬舎edu様製品紹介ページ）に挑戦。
ジャンルとしてはいわゆる「体験型」に属しており、体や言葉を使ったゲームなので子供から大人まで年齢を問わず楽しめるのが魅力です。

各プレイヤーは、全体に公開されたお題カードと、自身にのみ公開されたアクトカードに従い、お題を演じます。
他のプレイヤーは、どのお題を演じているかを出題者の声と表情からのみ推測し、投票します。
見事正解できれば出題者にも正解した人数分の得点が入るため、多少大袈裟になっても分かりやすい演技をするといいようでした。

プレイ中の様子。「思ってたんと違う！」「そうはならんやろがい！」と大惨事に（笑）

2.「ハゲタカのえじき」

場が温まったところで、続けてプレイしたのは「ハゲタカのえじき」（リンク先：メビウスゲームズ様製品紹介ページ）。
ジャンルとしては「心理戦」タイプでしょうか。与えられたカードを元に相手の動きを読む、駆け引きが白熱するゲームとなっています。

各プレイヤーは1～15までのカードから1枚を選び、一斉に公開します。
公開された中で最も高い数字を出していたプレイヤーが場の中央に置かれた得点札を獲得できるのですが、本ゲームでは「バッティング」と呼ばれるメカニクスが採用されています。
これは、他プレイヤーと同じ数字カードを出してしまうとその数字は打ち消しあい、次に大きな数字カードを出していた人に権利が移るという仕組みです。
たとえば上図の場合、11が最大ですが重複しているため互いに打ち消しあい、次に大きい数字である5を出したプレイヤーが得点札を獲得できます。

プレイ中の様子。最後の最後で大量にバッティングが発生し、高得点カードを掻っ攫っていくまさかの展開に！？

3.「コヨーテ」

この日最後にプレイしたのは「コヨーテ」（リンク先：ニューゲームズオーダー様製品紹介ページ）。
先に挙げた「体験型」と「心理戦」の複合となっており、箱に描かれた女の子のようにカードを額に当てる（＝自分からは見えなくする）という変わったプレイスタイルが特徴です。

「ブラフ」と呼ばれるゲームジャンルの作品で、場に出ている札に書かれた数字の合計を下回るように一人ずつ数字を宣言していきます。
ただし、必ず前に宣言された数字よりも大きな数を宣言しなければならないため、どこかで合計値を上回る宣言をするプレイヤーが出てきます。
直前のプレイヤーの宣言が怪しい！と思った場合「コヨーテ！」と宣言し、嘘をついていたら直前に数値を宣言をしたプレイヤーの負け、本当のことを言っていたらコヨーテを宣言したプレイヤーの負けです。
ここで重要になってくるのが「プレイヤーが見ることのできる札は自分『以外』の札だけである」という点です。
誰かがコヨーテを宣言するまで自分が何の札を持っているか分からないため、周りのプレイヤーの表情や宣言から推測するしかないのです（そして多くの場合、周りのプレイヤーはあなたを勘違いさせようとするでしょう）！

プレイ中、平然と上限を上回るような宣言をし、それに釣られて数字を釣り上げてしまう隣のプレイヤーを見て大爆笑…といった具合に、こちらも大いに盛り上がりました。

最後に

社員の多くが社外へ出向していることに加え、昨今のコロナ禍により中々大勢で集まって何かをやるという機会に恵まれませんでしたが、今回の勉強会ではソーシャルディスタンスを保ちつつも、多くの人数が集まり大いに盛り上がりました。
冒頭で述べたカードゲームの研究の他にも、社内交流の活性化という面でも期待がもてそうです。
今後も折を見て開催していけたらいいですね。

投稿日:

社内勉強会 – SNS映えする写真加工術

前回の勉強会の様子

勉強会－ビジネス日本語研修

今回の勉強会記事を担当する第3ユニットの「じょーじ」です。入社してから参加させていただきました初めての勉強会では、SNSに投稿する写真の加工について学びました。

1.　ディズニー加工

土日の穏やかな散歩、連休の遠くへの旅行、毎日の帰り道。目の前に広がる驚きの一瞬。思わず写真に収めて人に見せたくなります。しかし、天気が撮影に協力してくれない日もありますね。そういう時にこそ、「ディズニー加工」で、アッピールアップ！

iPhoneの写真編集機能を使って、好みの一枚を以下の設定で加工をすると、肉眼で見るよりも鮮やかで華やかな写真になります。いわゆるディズニー加工というSNS映えする加工方法です。

  • ブリリアンス　　100
  • ハイライト　　　10
  • シャドウ　　　　10
  • 彩度　　　　　　50
  • 自然な彩度　　　50
  • シャープネス　　25
  • 精細度　　　　　25
元の写真
ディズニー加工後

2.　簡単に別人へ

自分自身をもっと輝かせたい時には、携帯電話の機能だけではなく、「B621」や「ibis Paint X」などのフリーアプリも使えます。些細な変更から、大きなイメチェンまでできます。そしてイメチェンの先には…

加工する写真選び

まずは、「B612」の肌補正機能を使ってスムーズ化して、タッチ補正で顔のサイズや形を整えます。次に、「ibis Paint X」で細かいブラッシュアップをします。そして、iPhoneの写真編集機能でカラーバランスなどを変更します。すると…

元の写真
美人の誕生？！

個人的に一番驚いたのは、AIによる顔認証の精度です。例えば、「B612」で鼻のサイズを変更しようと思えば、写真の中で鼻をタップして、その輪郭をなぞるなどの操作がまったく必要ではありません。アプリが鼻を自動的に特定して、自然に変更していきます。

このような高度なツールがあれば、誰でもSNSアーティストになれると思います。

次回の勉強会の記事をお楽しみに！

投稿日:

社内勉強会 – Adobe XDを使ってみよう

前回の勉強会の様子
http://dandelions.co.jp/blog/2019/12/04/artcle-12/

勉強会テーマ 『Adobe XDの基本』

今回はXD勉強会の初回ということで、XDの基本について勉強しました。
勉強会の様子を紹介していきます。

Adobe XDとは

webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。


https://helpx.adobe.com/jp/xd/how-to/what-is-xd.html

XDで和定食店の紹介ページデザイン作ってみた

今回は和定食店の紹介WEBページのデザインを作りながら、基本を学びました。
ワイヤーフレームがサクサク作れる機能が盛りだくさんです。
特にリピートグリッド機能は簡単に類似パーツを作成できて、メニュー表の作成に役立ちました。

リピートグリッド1
リピートグリッド結果

このようにスクロールするだけで簡単に類似パーツを作成できました。
また、作成したパーツにまとめて、別々の画像を挿入することも簡単。

画像挿入
画像挿入完了
マウス操作で簡単挿入

他にもページの動作付けや、画像の切り取り、装飾の作成も簡単に行うことができました。またIllustratorで作成した図形も使えるらしく、WEBデザインが捗りそうです。
最終的にはこんな感じに仕上がりました。

メニュー完成
初心者でも1時間程度で作れる

いかがでしたでしょうか。
今回は触り程度でしたがXDは初心者にもやさしい便利な機能が盛りだくさんでした。
プロトタイプ機能でデザインだけでなく、画面の遷移も簡単に確認できるのも完成をイメージし易くてよかったです。
次回の勉強会もお楽しみに!!

投稿日:

社内勉強会 – InDesign 実践！効率の良いデータ作りをしよう

前回の勉強会の様子
https://dandelions.co.jp/blog/2019/09/30/artcle-2/

勉強会テーマ
『実践！効率の良いデータ作りをしよう』

今回はInDesignの作業を効率よく行うための「効率化、自動化」に関わる以下６つの機能について学びました！

１．正規表現スタイルの設定および適用
２．検索・置換機能の活用
３．他のドキュメントファイルからのスタイル活用
４．ライブラリ機能によるオブジェクトの効率的な再利用
５．ブック機能による複数ドキュメントを集約
６．データ結合機能

本稿では「6.データ結合機能」をご紹介します。

データ結合機能とは…

InDesign でデータ結合パネルを使用すると、データソースファイル（CSV または TXT ファイル）を InDesign ドキュメントに結合することで、ドキュメントの複数のバリエーションを簡単に作成できます。例えば、データ結合機能を使用して、数百種類の手紙、封筒、郵送ラベルをすばやく正確に作成できます。データ結合は、メールマージとも呼ばれます。

引用：https://helpx.adobe.com/jp/indesign/using/data-merge.html

用意するものは以下の２つだけです。
① CSV または TEXT形式のファイル
②テンプレートとなるIndesignドキュメントファイル

今回はCSV形式のファイルを使用します。

画像ファイルを読み込む場合は、フィールド名の頭に「＠」を入力する必要があります。
CSVファイルと画像ファイルは同一フォルダに配置します。

続いてInDesignでテンプレートを作成します。
画像フレーム、テキストフレームを用いてドキュメントを作成します。
CSVの各フィールドをイメージしながら作成します。

レイアウトデータとcsvのフィールドを簡単なクリック操作で紐付けられます。

データ結合機能により、CSVファイルの各フィールドとテンプレートの項目を紐付け定義します。

プレビューの結果です。

複数レコードを一括して処理し、結合ドキュメントとして作成することもできますので皆さん是非実践してみてください！

和気あいあいとした楽しい勉強会でした！

今回の勉強会では、InDesignが文字データだけでなく、画像データについても効率的に取り扱えることを学びました。まだまだ操作は拙く、どこに何の機能があるのかを探しながらの勉強会ですが、継続していけば今回の機能も使いこなせるようになると思います！
次回の勉強会もお楽しみに！