勉強会 – dandelionS Blog

2024年3月27日

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.

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

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.

2024年1月24日

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;
}

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;
}

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

2022年10月5日

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

前回の勉強会の様子

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

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

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

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

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

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

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

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

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

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

3.「コヨーテ」

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

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

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

最後に

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

2022年8月24日

社内勉強会 – 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アーティストになれると思います。

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

2020年3月19日2020年3月19日

社内勉強会 – 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ページのデザインを作りながら、基本を学びました。
ワイヤーフレームがサクサク作れる機能が盛りだくさんです。
特にリピートグリッド機能は簡単に類似パーツを作成できて、メニュー表の作成に役立ちました。

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

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

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

2019年12月4日2019年12月9日

社内勉強会 – 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形式のファイルを使用します。