タグ: 勉強会

投稿日:

In-House Study Session: About Git

We held an in-house study session on Friday, April 11th this year, so we’d like to share a summary.The theme was “About Git.” This blog post is written by Xig from Team 0.

In this study session, we started by explaining what Git is in the first place,
and then actually used Git to experience what it can do.

The session followed the structure below:

  • What is Git?
  • Explanation of Git tools and web services
  • Setting up Git
  • Basic concepts of Git (terminology and what it can do)
Inside the Session

What is Git?
Since there were participants unfamiliar with Git or who hadn’t used it in a while,
we started from the very basics: “What is Git anyway?”
Personally, I’ve had some minimal experience with version control systems like SVN and Git,
but nowadays it feels like most projects around me manage their assets with Git.
How about you?

Explanation of Git Tools and Web Services
Here, we briefly introduced some tools and web services related to Git.
As for Git tools, those bundled with development environments like Eclipse are probably the most well-known.

[Web Services]

  • GitHub ★ Used during this session
  • AWS CodeCommit
  • Gitea

[Git Tools]

  • TortoiseGit ★ Used during this session
  • SourceTree
  • Development tools like Eclipse

Setting Up Git
In this session, to get hands-on with Git,
we used GitHub as the web service and TortoiseGit as a visual Git tool.
Just between us, when signing up for a GitHub account, email verification was required.
I tried doing it the day before the session,
but it took three hours for the verification email to arrive, so I was panicking a bit inside!

Basic Concepts of Git
We experienced a full range of Git operations, including:
“Cloning,” “Committing,” “Checking Differences,” “Viewing Logs,”
“Undoing Changes,” “Pulling,” “Pushing,” “Conflict Resolution,”
“Creating Branches,” and “Sending Pull Requests.”

One thing we noticed during the session was that the term “master branch”
is no longer commonly used.
It seems the term “main branch” has become the standard,
as “master” is now considered a potentially discriminatory term. That was a good learning moment.

Summary
In this session, we studied Git.
Personally, I hope this helped everyone understand even a little
the importance of asset management.
Whether you were revisiting Git after a long time or trying it for the first time—
you’ve now got the basics of Git down… right?

Stay tuned for our next study session article!

投稿日:

社内勉強会：Gitについて

今年の4月11日(金)に社内勉強会を行いましたので紹介します。
テーマは「Gitについて」です。ブログ記事担当はチーム0のxigです。

今回の勉強会では、Gitについてそもそも何？という説明を行い、
実際にGitを触って、どんなことができるか体験を行いました。

勉強会は以下の流れで実施しました。
・Gitとは何か
・Gitのツール、WEBサービス説明
・Gitの導入
・Gitの基礎説明(用語やどんなことができるか)

勉強会の様子

Gitとは何か

　勉強会では、Gitに馴染みの無い方、久しく触ってない方が居たので、
Gitとはそもそも何ぞ？
というところから始めました。私はバージョン管理システムとしてSVN、Gitを申し訳程度に触ったことがありますが、最近の身の回りだとGitで資産を管理しているプロジェクトが多い気がしますね。皆様はいかがでしょうか。

Gitのツール、WEBサービス説明

　ここでは、GitのツールとWEBサービスとして以下のようなサービスがあるとさらっと説明を行いました。Gitのツールとしては、Eclipseなどの開発ツールに付属されているものが割と有名どころかと思います。
【WEBサービス】
・GitHub　★当勉強会で使用
・AWS Code Commit
・Gitea
【Gitのツール】
・Tortoise Git　★当勉強会で使用
・SourceTree
・Eclipseなどの開発ツール

Gitの導入

　今回の勉強会では、Gitを触るべく、WEBサービスとして「GitHub」、Gitを視覚的に操作するツールとして「Tortoise Git」を導入しました。
ここだけの話、GitHubのアカウント登録の際に、メールで本人認証する必要があり、
私は勉強会の前日に実施したのですが、認証メールが飛んでくるのに3時間かかったので、内心凄く焦っていました。

Gitの基礎説明

　ここでは、Gitの一連の操作として、「クローン」「コミット」「差分確認」「ログの確認方法」「変更の取り消し」「プル」「プッシュ」「コンフリクト」「ブランチの作成」「プルリクエスト送信」を体験しました。

体験する中での気づきなのですが、最近は「マスターブランチ」という言葉は使用せず、
「メインブランチ」という言葉が使用されるようになったみたいですね。どうやら「マスター」という言葉が差別用語に当たるとのこと。ためになりましたね。

まとめ

　今回の勉強会ではGitについて学習しました。
これを通して、資産管理の大切さを少しでも感じ取って頂けたら良いかなと私個人は思っています。
久しぶりに触った人も、未経験だった人も
これでGitの基本操作はバッチリデスネ・・・

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

投稿日:

社内勉強会「セキュリティの基本」

今回の社内勉強会を行いましたので紹介します。テーマは「セキュリティの基本」となります。担当はチーム0のチキンキウイです。

今回の勉強会では、セキュリティインシデントが発生した場合、どんなリスクがるのかや、
普段勤務する上で、どのような対策ができるのかの基本について学びました。

勉強会は以下の流で行いました
・セキュリティの必要性
・発生し得る問題について
・情報セキュリティ５か条
・ダンデライオンズで行っているセキュリティ対策について
・情報セキュリティクイズ

勉強会の様子

セキュリティの必要性

ここでは、セキュリティ対策や、インシデントが発生した場合に、会社に発生する
社会的な影響や、法律、道義的な影響について学びセキュリティの必要性について勉強を行いました。

発生し得る問題について

ここのでは起こりうるセキュリティリスクについて、実際の事例から学びました。
会社攻撃により会社が受ける影響だけでなく、セキュリティ対策不備があった場合に会社や、経営者に問われる法的責任、会社間の関係性の変化についても学びました。

情報セキュリティ５か条

IPAが紹介しているセキュリティ5箇条から、個人きを付けるべきセキュリティ対策について学びました。主に以下のことについて事例や、対策について確認しました。

1.OSやソフトウェアは常に最新の状態にしよう
2.ウイルス対策ソフトを導入しよう
3.パスワードを強化しよう
4.共有設定を見直そう
5.脅威や攻撃の手口を知ろう

まとめ

今回はセキュリティの重要性や、基本的な対策方法について勉強しました。
勉強会を行うにあったってIPAで公開されているセキュリティ対策ガイドラインを参考としています。
IPAでは情報セキュリティについて様々な情報を発信していますので興味あがある方はwebページをのぞいてみてください。

IPA 中小企業の情報セキュリティ対策ガイドライン
https://www.ipa.go.jp/security/guide/sme/about.html

次回の記事もお楽しみに。

投稿日:

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.「コヨーテ」

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

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

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

最後に

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