xig – dandelionS Blog

2025年6月25日2025年6月25日

社内勉強会：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の基本操作はバッチリデスネ・・・

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

2025年1月22日

技術者ブログ –QRコード生成について

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はＷＥＢデザインをテーマにしている第0ユニットです。
普段触ることないQRコード生成について触れる
機会があったので、そちらをご紹介したいと思います。

準備

今回はjavaで作っていきたいと思います。
私の開発環境はgradleを使っているので、
build.gradleファイルに以下追記してあげるだけで、必要なライブラリーが読み込まれます。
(便利な世の中になりましたね…)

参考サイト：Getting Started Developing · zxing/zxing Wiki · GitHub

使用しているライブラリーは、「ZXing」です。
Javaで実装されているオープンソースで、一次元コード（バーコードなど）、二次元コード（QRコードなど）の作成／読取を行うことができる画像処理ライブラリです。

作成

作成するにあたってポイントになるのが、「QRCodeWriter」の「encode」メソッドです。
コメントにざっくり書いてありますが、以下パラメータを指定することができます。
第一引数：表示する内容
第二引数：出力フォーマット指定(BarcodeFormat (ZXing 3.5.3 API))
第三引数：縦横のサイズ

生成したものをBitMatrix型の変数(bm)に格納し、writeToStreamメソッドで出力形式を指定すれば出力することができます。今回はQRコードをpng形式で出力してみました。
本実装はAPIリクエストを受け付けてそれに対応する出力結果を画面に返却していますが、
そこの部分は割愛します。

まとめ

今の時代は、一回だけお試しに作りたい時などの場合、わざわざプログラムを組まなくても
ネットで検索すれば多数の生成サイトが見つかります。
中にはデザインをいじれたり、用途に応じてフォーマットが用意されていたりと探してみると意外と面白いです。
というわけで、本投稿ではシンプルな部分だけではありますが、
QRコードを作成する仕組みをご紹介致しました。
少しでも興味を持っていただければ幸いです。

それでは、次回の技術者ブログをお楽しみに。

※QRコード内容は締めの挨拶です！

2024年6月26日

社内勉強会：Monacaについて

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

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

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

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

①Monacaの概要説明

②環境導入

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

Monacaの概要説明

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

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

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

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

〇ストア公開までが簡単

環境導入

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

Let’sTry

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

まとめ

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

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

2023年9月20日

技術者ブログ – Reactの紹介

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
今回はWEBデザインをテーマにしている第0ユニットです。
本記事では、第0ユニットが注目している「React」についてご紹介をします。

Reactとは？

Facebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリです。React.jsやReact.JSと呼ばれることもあります。よくAngularJSやjQueryと比較されますが、React自体はフレームワークでなく、あくまでもUIを構築するだけのライブラリです。

投稿者もこの記事を書く上で、調べるまで前者の人間でした。
実際、第0ユニットで利用しているMonaca上で、フレームワークを使用したテンプレートを作成する際、ReactやAngularJSが選べるため、わりと勘違いすることが多いかもしれないです。

Reactは、開発元の「Facebook」をはじめ、「Instagram」はもちろん、「Yahoo!」「Netflix」など、世界中で数多く採用されているみたいです。

特徴

・宣言的なView
・コンポーネントベース

宣言的なView

Reactは、Webアプリの各部分のView（見た目）を、「こういう表示にしたい」と宣言的に記述できます。
記述について触れましたが、ReactのViewの記述にはJSXという構文を使用します※1。
JSXは、HTMLとほぼ同じ構文で記述でき、JavaScriptの処理も組み合わせた記述も可能です。JSXを使うことで、HTMLのようにシンプルでわかりやすい宣言的なコードが書けます。
JSXの書き方について、投稿者の所感では、人によっては違和感を拭うのに時間がかかるかもしれないです。
※1…Reactを使う際にJSXを必ず使わなくてはいけないわけではないようです。

コンポーネントベース

Reactでは、WebアプリのUIをコンポーネントと呼ばれる部品に分割して管理します。コンポーネントは、単独で機能する再利用可能な部品です。大規模なJavaScriptコードも部品化させることで保守性を高め、既存のReactコンポーネントを再利用することで、開発工数を減らすことができます。

さて、ここまでの特徴のイメージを持ってもらうために、サンプルコード(中身部分)を用意しました。

JSXの書き方として、文字列以外の値（数字、boolean、変数など）を HTML タグの属性に代入する際には {} を使う特徴があります。※2
※2…他にも沢山特徴はありますが、今回は割愛させて頂きます。

例として、37行目を見ると{this.onInput}と書かれていることが確認できるかと思います。
ここでは、onInput(<input> 要素の値が変更)の際に、定義しているonInputを呼び出し、setStateによってnameの状態をイベントから取得した際の値で変更しています。
このようにコンポーネント(この例ではテキストボックス)毎に分割してWebアプリのUIを作っていきます。



import React, { Component } from 'react';
export default class Todo extends Component {
    constructor(props) {
        super(props);
        this.state = {
          todos: [],
          name: ''
        };
      }

      //テキストフィールドに入力された値を name として state に保存
      onInput = (e) => {
        this.setState({
          name: e.target.value
        });
      }
      //登録ボタン処理
      addTodo = () => {
        const { todos, name } = this.state;
        this.setState({
          todos: [...todos, name]
        });
      }
      //削除ボタン処理
      removeTodo = (index) => {
        const { todos, name } = this.state;
        this.setState({
          todos: [...todos.slice(0, index), ...todos.slice(index + 1)]
        });
      }

      render() {
        const { todos } = this.state;
        
        return (<div>
        超簡易版ToDoりすと<br/>
          <input type="text" onInput={this.onInput} />
          <button onClick={this.addTodo} >登録</button>
          <ul>
            {todos.map((todo, index) => <li key={index}>
                {todo}
          <button onClick={() => { this.removeTodo(index) }}>  削除</button>
            </li>)}
          </ul>
        </div>);
      }
}

上記ソースコードを環境整えた後にブラウザで表示してみました。
テキスト入力欄にデータを入れて、登録ボタンを押すと
画面上のリストが更新されたのが確認できます。
このように、データをどのように配置するかを定義しておくだけで、データの変更を検知し、自動的に表示を更新する。といった点もReactならではの特徴です。

今回はReactについて紹介しました。
次回の第0ユニットの技術者ブログもお楽しみに！

2023年6月29日

社内勉強会：要件定義について2

前回の勉強会の様子 – 要件定義について

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

前回は「要件定義」をテーマとして勉強会が開催されました。
今回はその内容を基に後日実施した勉強会の様子の紹介です。

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

①前回「要件定義」を振り返り

②ヒアリング内容を整理するため、業務フローの作成

③振り返り、まとめ

今回の勉強会では、前回勉強会のヒアリング内容を基に、
•要求をかみ砕き、細分化することで実装すべきか内容を洗い出す
•必要な機能、性能などを書き起こす
ということを実施しました。

ヒアリング内容を整理するため、業務フローの作成にチャレンジしていきます。

業務フローとは？

特定の業務に対する作業の流れを示すフロー図のことを指します。. 業務の始まりから終わりまでの間に、誰（どの部署）が何をやるのか、その時に利用するシステムは何か。
そして、その作業順番を図にすることで、それぞれのつながりを示し、業務プロセスを可視化するための図です。

ということで、業務の内容や課題を共有していきます。

こちらが業務フローを実際に作成している様子です。
ホワイトボードに内容を書いていき、
それに対して意見を交えながら業務の流れをまとめました。

業務フローを作成する人は場面ごとに交代で実施しました。
ここでは、サービスに登録するためのお店情報を
どうやって編集するかを整理しようとしているところです。

まとめ

今回の勉強会では業務フローを作成することで、
業務の内容や課題を整理しました。
突然ですが、皆さんは

「QRコードの読み込みをPayPayみたいにピッと支払いをするイメージで」
と聞いてどんなイメージをするでしょうか？

この一言を基に内容を整理した際、
「QRをお店が読むのか、利用者が読むのか」
が結局のところ分からなく、再度確認をする場面がありました。

実際の業務でも今回の勉強会の内容を生かして
整理することでクライアントとの認識齟齬をなくしていき、
クライアントとのレビューに臨んでいきたいですね。(´ºωº｀)

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

2023年1月29日2023年2月16日

社員紹介（23－2）

閲覧いただきありがとうございます。
2度目の社員紹介になります、「xig」です。
前回の記事はコチラです。

前回、様々な趣味があると冒頭に書かせていただきました。
今回は食べ歩きの趣味にフォーカスを当てて、最近食べた美味しいものを紹介させていただこうと思います！

熱々！
焦がしニンニクのスープ×極厚肉ラーメン

1品目に紹介するのは、
静岡県袋井市のIC付近にある麺屋はやたろうで食べた
その名も「厚肉」。
画像ではわかりにくいのですが、
思っているより2.5倍はチャーシューが厚いこちらのラーメン。
なのに、口に入れた一瞬で溶けるそれはまさに角煮のような感覚でした！
(食べた瞬間思わず笑ってしまいましたｗ)

また、焦がしニンニクが効いたスープは、なめらかだけどパンチのある濃さで、ラーメンを熱々に保ってくれるため、最後の一杯まで楽しむことができました！

禁断の組み合わせ！鰻と牡蠣のカバうな丼！

2品目に紹介するのは、静岡県の浜松市舘山寺にあるうなぎ・和食処松の家で食べた
「元祖牡蠣カバうな丼」(冬限定)です。
メニューを見た瞬間目を疑いましたが、ホントに名前通りの物が出てきましたｗ
あっさり寄りのタレは、クリーミーな牡蠣と相性が抜群で、
鰻のカリッとした触感が食欲をより一層引き立てます。
食べても飽きが来ないので、値段に目をつむれば無限に食べれちゃうかもです！
ちなみに、このお店は某グルメ系ドラマでも紹介されており、
著名人のサインもいくつか店舗に飾ってありました。
(腹が…減った…)

今回は以上になります。
次回の社員紹介もお楽しみにして頂けると幸いです！

2022年6月29日

身だしなみ研修- 2022年度

こんにちは！第0ユニットの「xig」です。

今回は、2022年5月25日(水) に参加したダンデライオンズの身だしなみ研修についての記事です。今年の研修も去年に引き続き、Brilliant Impressionの森内様に講師をしていただきました。

この場をお借りしてお礼申し上げます。

研修内容は「マナーに関する座学」→「オーダーメイドのスーツ作成」という流れで行われました。

マナーに関する座学

こちらでは、男性の身だしなみ、女性の身だしなみについて国際標準を基に学びました。

男性はキャリア・職位があがると共に服装の自由度が減る点、

女性は逆に服装の自由度があがる反面、品格が求められ、NGパターンが増える

というルールを知り、スーツやネクタイ、靴やシャツの着こなし等について教えて頂きました。本ブログでは折角なので、男性目線で個人的に興味を持った点を2つほど紹介させてください

【1.ネクタイの柄】

自分は仕事やお祝いの席ではいつもストライプ柄のネクタイを使っていました。しかし、本研修を通して特にお祝いの席ではストライプ柄はNGだということを知り、ショックを隠せませんでした。ネクタイの柄でもそれぞれに意味があり、例えば

・無地は品格と正統感があり、誠実さを伝えることができる

・ストライプ柄は攻めのイメージが強く、士気を高めるスピーチや演説に有効

など、TPOに応じて使い分けるのが重要ということを学びました。

【2.シャツについて】

ビジネス用のシャツとして流通しているボタンダウンのシャツですが、カジュアルな印象を与えてしまうため、冠婚葬祭など厳格な場では着用するのは良くないということを本研修を通して知ることができました。

また、仕事をする上で、初対面の人と面談などでやり取りする際も、ボタンダウンシャツは控えた方が良いということで、次から気を付けていきたいと思います。

講座の様子

オーダーメイドのスーツ作成

座学研修の後に、KASHIYAMA名古屋栄店様にて、研修参加者全員のオーダメイドースーツを作っていただきました。座学で抑えた要点を基に、カジュアルになりすぎないように、スーツの生地から形まであらゆるものを真剣に選びました。採寸の際も、冗談を交えながら店員の方と出来上がるスーツについてイメージを膨らませていき、とても素敵なひと時でした。

採寸の合間の様子

まとめ

今回の研修を通して、ビジネスだけでなく幅広い場面での身だしなみについて学ぶことができました。今後もし、ビジネスや日常生活で特別な場面と遭遇した場合、今日の研修のことを思い出して活かせていけたらと思います。また、本日作成したオーダーメイドスーツの仕上がりも楽しみです！

今回の記事は以上になります。
次回以降の記事もお楽しみに！

2022年2月16日

社員紹介(23)

ご覧いただきありがとうございます。
はじめまして、この度社員紹介を務めます「xig」です。

肩書

新卒で前の会社に4年務め、
転職という形でダンデライオンズに入社しました。現在は第0ユニットに所属しています。

経歴

地元は静岡ですが、愛知の工業大学へ進学をきっかけに愛知県に引っ越しました。
家族や周りに機械(アプリケーション)に強い人がいなく、強い危機感を持ったのと、
自分もまた情報弱者だったので、
そんな人に近い目線で寄り添えるような人になりたいと思い、この業界に足を踏み込みました。

現在の業務

アプリ開発の基盤となるフレームワークの開発チームに在籍しています。
フレームワークを使っていただいているアプリ開発者様のご要望にお応えするべく、
不具合改修、機能改善対応などを仕様書作成からテストまで
一通り行っています。
勤務形態はテレワークがメインですが、
チームメンバー全員とても親身にしていただいているので、
とてもありがたいことなのですが、コミュニケーションには特に困ってないです。

自己PR

趣味は、ゲーム全般、食べ歩き、トレカ、お風呂、マイナー映画鑑賞等色々あるのですが、
最近は特撮が自分の中では熱いです。

特撮と言っても戦隊ヒーロー、ウルトラマン、仮面ライダー…etc
がありますが、
自分は特に仮面ライダーが大好きで、毎週日曜日の朝が楽しみだったりします。
そんな仮面ライダーですが、自分の高校生時代に放送されていて、
仮面ライダーを見始めるきっかけとなった、
「仮面ライダーオーズ」が、
今年3月に本編後の話が映画公開されます！
さらに合わせて「仮面ライダー展」がこれもまた今年3月に愛知県の金山で開催！
ということで、
今からドキドキわくわくなのです！
余談：去年末に公開された「ゴーカイジャー」や、
「ウルトラマンティガ」の後継作品など、最近の特撮界隈はあの時青春時代を送っていたヲタを全力でターゲットにしていますよねｗ