株式会社クイックのWebサービス開発blog

HAPPYなサービスプランナー・エンジニア・デザイナーのブログです。

サイトにハマる!デフォルメキャラクターの描き方

はじめまして、新卒入社5年目のネモトマです。 会社ではイラストレーターの業務を担当しています。

今回はじめての投稿となりますので、

「キャラクターがなんだか浮いて見える…良い感じにサイトに馴染ませたい!」

「キャラクターを発注したいけど、イメージ通りの指示が出せない」

…といったお悩みを持った方が、 キャラクター作成の際に知っておくとちょっと楽になる 「サイト内にハマるキャラクターづくり」をテーマにお話します。 細かく語ると長くなってしまうので、今回はデフォルメキャラクターに的を絞って進めたいと思います。

どうぞ参考までにご覧ください。

デフォルメとは

突然ですが「デフォルメ」という言葉を聞いたことはありますか? 正確には知らなくても、なんとなく知っている‥ そんなかんじではないでしょうか。 そして私も曖昧に使っていたのですが

Wikipediaでは、

デフォルメ(仏: déformer、動詞)、デフォルマシオン(仏: déformation、名詞)とは、絵画や彫刻などで、対象を変形・歪曲して表現すること[1]。

出典: フリー百科事典『ウィキペディアWikipedia)』

とあります。

写実的な絵に対して漫画っぽい絵はデフォルメにあたる…とも言えますが 今回は低頭身のキャラクターや情報を簡略化したイラストレーションを指した意味合いで話を進めます。

デフォルメキャラクターとは

高頭身キャラクターを低頭身化したキャラクターや、身体のパーツや線を簡略化したキャラクターのことを「デフォルメキャラクター」といいます。

また、頭身キャラクターを2~3頭身程の低頭身にし、 小さく可愛い印象を持たせたキャラクターのことを「ミニキャラ/ちびキャラ」とか「スーパーデフォルメ」などとも呼びます。

キャラクターをサイトに馴染ませる4つのコツ

いざ完成したキャラクターをサイトにあてはめてみたときに 「あれ?なんだかキャラが目立ちすぎてサイトに馴染まない‥」という現象、起こったことはありませんか?

せっかく作ったキャラクター、一から作り直すのはやや大変。 であればちょっとしたことを工夫してバシッとサイトにハマるよう調整してみましょう。

下記から、キャラクターの「頭身」「顔パーツの配置と特徴」「線画」「色塗り」に着目してご説明します。

1.頭身を見直す

キャラクターをデフォルメにする上で、頭身はとても重要です。 頭身が高ければキャラの動作感の幅が広がる一方、頭身が低ければこぢんまりとした愛らしさが付与されます。

f:id:aimstogeek:20210218112804p:plain

8頭身のキャラクターに対して、2~5頭身までのサイズ感が小柄で可愛らしいデフォルメキャラクターになるんじゃないかなと個人的には思っています。

上記の参考画像のように、頭身が高すぎるとデフォルメするのが難しくなります。

イメージに合った頭身を選択し、そのうえで頭部と身体のバランスを調整したり、 手足を長くしたり太さの調節をすることでオリジナリティのあるキャラクターを考えていきます。

2.顔パーツの配置と特徴で年齢感を設定

顔パーツ(目、鼻、口、眉毛など)の配置と特徴を変えることで 見た目を幼く~大人っぽく操作できる小技をご紹介します。

下の画像は、年齢感を意識してキャラクターを作る際に私が気を付けていることです。

f:id:aimstogeek:20210218113217p:plain

上記のように、「子ども」と「おとな」の顔立ちには特徴があります。上の画像はあくまで一部ですが、これをベースに考えるとキャラクターが作りやすいかもしれません。

「子ども」は顔パーツが中央寄りで額が広くなり、「おとな」はその逆になります。 また、子どもは全体的に丸い印象がありますが、おとなになるにつれて骨格が発達しシャープな印象が強まります。

たとえば、

「もっと愛らしく、保護欲を掻き立てられるようなキャラクターを作りたい」 と思った時には、顔のパーツを中央に寄せてみるだとか

「デフォルメ感は残したいけど、やや大人っぽさが欲しい」 というときは、顔のパーツを顔中央から離して配置し、骨格を意識して考えてみる・・・などなど工夫ができそうです。

上記のようなバランスを意識して他社のキャラクターを見てみると、キャラクターに込められたメッセージ性も紐解けるかもしれないですね。

3.キャラクターの「線画」を見直そう

まず最初にキャラクターを構成する「線画」は重要な要素。

線が太ければ力強さが表現できるもののサイト内での主張が強くなりすぎてしまったり、 均一な線は安定した印象を与えますが硬すぎる印象にもなり得ます。

逆に「線画」が決まればキャラクターも決まる・・・サイトにハマらないときにまず線をチェックしてみましょう。

f:id:aimstogeek:20210218124103p:plain

上の画像では、オリジナルに対して3例挙げてみました。 それぞれの線画の良いところは

  • 均一な線で隙間がない:まじめできっちりした印象。公式感」「信頼感」などを主張したい場合に望ましい。

  • 線画の間に隙間を加える:線と線の間に抜きを作ることで、堅苦しい印象が和らぐ

  • 線画の太さを部分的に変える:線に強弱をつけることで「こってり」した印象から「あっさり」に

  • 手書きタッチに変える:筆圧のあるブラシや鉛筆などのアナログ系のブラシで、親しみやすい印象に。あたたかさも増す。

などが考えられます。

キャラクターに「どういうメッセージ性を持たせるか」「どういうときに使用するか」など考えて、最もイメージに近い線画を選択できると良いでしょう。

4.イメージに合う「色塗り」を見つけよう

次にキャラクターに合う「色塗り」も重要な要素です。

こちらもサイトに当てはめてみたときにしっくりこない…そんなときのアイデアとして参考にしてみてください。

f:id:aimstogeek:20210218184426p:plain

塗りの情報を増やす・減らす、ハイライトを入れたり塗りをずらしてみたり、ドットなどのパターンを加えるなど…色々試してみながら、サイトの印象に合わせてぜひ調整してみてください。

まとめ

要点をまとめると下記3点がポイントです。

  • キャラクターの頭身を決めてから肉付けをする

  • 顔パーツの特徴と配置で年齢や印象を変更

  • キャラクターの「線画」と「色」を見直す

***

普段ぼんやりと考えていたことを言語化してみたのですが、伝わりましたでしょうか。 主観で語ってしまった部分も多いのですが、お役に立てましたら幸いです。

長い文章にも関わらず、ここまで読んでくださり誠にありがとうございました!


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! // 919.jp

AWS社内ハンズオンを目指してTerraformを利用してみた

ソフトウェアエンジニアの王子です。

最近はDyson Sphere Programというゲームにハマっていまして、寝ている間も効率のよい自動化設計を考え続けています。

さて、本日は「AWS社内ハンズオンをやりたい」という話をさせていただきます。

AWS、便利ですよね。
製品リリースでも個人で何かを公開するなどでも使えてしまう。

個人なら低コストの代替手段もありますが、どうせなら製品リリース時に知見を活かせるAWSで全部こなせるようになりたいものです。

とはいえどこのAWS。 一般的なエンジニアリング環境と違って、情報量や上限のないコスト面などで習得ハードルが高いものになっています。

本日はこのAWSのノウハウをどうやって全体で蓄積しようかと考えている進行形のお話です。

Terraformでスマートな環境情報の共有を

www.terraform.io

唐突にご紹介するこのTerraform。

インフラの状態を構成ファイルで宣言しプロビジョニング、更新、破棄などをここから実行するものでIaC(Infrastructure as Code)と呼ばれる分野のものです。

メリットは数あるWebサイトで紹介されているので深くは記載しませんがざっくりと下記の利点があります。

  • インフラ環境情報がファイル/ディレクトリに集約され見通しが良い
  • コード補完により存在しない設定をする可能性を下げられる
  • コンソール画面を共有せずにインフラ環境情報を共有できる
  • コードをgitなどで管理することでインフラ環境情報の管理ができる

製品リリースにそのまま利用できるだけでなく、実際に手を動かす必要のあるハンズオンに何と最適な環境ではありませんか。

Terraformのハンズオンに寄る形になりますが、これを習得することでAWSの知見を深められるのではと考えています。

コストは制約としても残したい

AWS、特に費用上限といった概念がありません。
必要な時に必要なだけサーバーを用意することができそしてその分だけお金がかかります。

製品リリースの品質に直結しているので、ハンズオンの段階から「この設定を適用すると¥100,000かかるかも…」

という緊張感を持って取り組んでもらいたいと思っています。

ここで費用を負担されることと緊張感のバランスをどう設定したら良いか…は目下の悩みです。

「いくらかかっても良いよ、好きに学習してOK!」はどうも緊張感のバランスが悪い気がするんですよね

なお、製品環境を想定した最小構成を立ち上げてみたところ

  • 作業しないときは全部廃棄する→ ¥3,000/month + ドメイン
  • 常時起動しておく→¥20,000/month

という感じでした

ここは引き続き検討していきたいと思います

まずは自分ができるようにならないと

さて、私自身がさもインフラ担当者のように書いていますがそんなことはありません。

まだプログラム歴のなかでは3Dグラフィックス関連の処理を書いていた時間の方が長いです。

これまで関わった製品でもインフラ関連の部分は専門職種の方にお願いしていましたし、AWSできるようになろうと急に思い立ったのも先月です

こういう右も左もわからない時は、まずは写経ですよね。

こちらの書籍を大変参考にさせていただきました。

KOS-MOSさん、技術書典さん、ありがとうございます!

booth.pm

Web検索を併用しながら
ドメイン作成 + VPS/ECS/S3/ALB/RDS/Redis/CloudWatch/CodePipeline
あたりを立ち上げて動作を確認していました。

なんとこれでGitHubにコミットしたコードで自動デプロイされる独自ドメイン環境の完成です。

社内のTerraform設定も読んで理解できるようになりましたので、「土日二日だけくらいなら起動しっぱなしでも良いかー」と起動したまま請求書を見て急いで停止したのも良い思い出ですワハハハハ

さいごに

写経開始時は結構なハードルかと思っていましたが進めてみると動作確認まで比較的スムーズでした。

この結果を元に次回は「ハンズオンをやってみた話」が出来ればと思っています!

とりとめのない話になってしまいましたが以上です。
読んで頂き、ありがとうございました!


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! // 919.jp

「地頭(じあたま)がいい」ってどういうこと?

「三密サイコーっ!!」って言いながら、居酒屋で楽しく飲める日が早く来るといいなと思っています。
テレワークにも慣れ、遠く離れた人とも飲むことができるオンライン飲みの良さにも慣れ、、、結果、そろそろ飽きてきました。

どーも、ご無沙汰しております。nakayanです。

2020年は社会的にも変化が大きかったですが、クイックのWeb事業企画開発室(Web室)でもとても大きな変化を起こしました。
大幅な組織の体制変更を行い、マネジメント体制の基盤を改めて強固にしていくための足がかりとなる1年でした。

そんな中でも採用活動は継続していましたが、一時的に昨年度よりもかなりペースを落としていたので、過去の採用活動を振り返り、「今後どういった組織をつくっていくのか」「どんな人を採用したいのか」を見つめ直すいい機会になりました。

僕たちが採用で見るポイントは色々あるのですが、その中のひとつに、「地頭がいい」というキーワードがよく出てきます。
世の中的にもよく使われる言葉でしょうか?

「地頭がいい。」
なんとなくニュアンスは分かりそうですが、認識が統一されていないと解釈がブレやすい言葉の一つかなと思います。

そこで、個人的に「地頭がいい」とはどういうことなのか、考えて整理してみることにしました。

「地頭(じあたま)」とは

大学などでの教育で与えられたのでない、その人本来の頭のよさ。一般に知識の多寡でなく、論理的思考力やコミュニケーション能力などをいう。
「地頭がいい」「地頭を鍛える」
引用:https://dictionary.goo.ne.jp/jn/92605/meaning/m0u/

「コミュニケーション能力」が入っちゃってるぅー!!

そうなんです。
「地頭がいい」の中には、「コミュニケーション能力が高い」が含まれちゃってるっぽい。
パーフェクトスキル疑惑浮上。

では、それ以外でどんな要素があるかなーと思いつくまま列挙します。

地頭がいい人の特徴

  1. 理解力が高い(物事の本質を見抜ける)
  2. 頭の回転が速い(臨機応変、思考の瞬発力)
  3. 論理力が高い
  4. 抽象化力が高い(具体化力もある)
  5. 仮説思考力が高い
  6. 複眼的思考力が高い(多角的視点、発想の飛躍)
  7. 柔軟な思考力
  8. 知的好奇心が強い(既知よりも未知)

他にも細かく挙げれば色々ありそうですが、ぱっと思いついたのは上記のような要素です。

一般的な「頭がいい」との違いは

「頭がいい」と「地頭がいい」では、具体的にどんな違いがあるのでしょうか?
「頭がいい」というのは、学生時代が分かりやすいと思いますが、

  • 勉強ができる
  • テストで良い点が取れる
  • 物知りである
  • (結果として)学歴がいい

みたいなことかなと思っています。

「あいつ、頭が良くて勉強はめっちゃできるけど、なんか仕事では賢さを感じなくてダメなんだよー」
みたいな場面、これが「地頭」が良くないということだと思っています。

個人的な考えとしては、

  • 頭がいい=知識力(物知り)
  • 地頭がいい=思考力(考える力)

なのではないかと。
(「頭がいい」は両方の意味を含んで使われる場面が多そうですが。)

「知識力」は、物知りであり、正解があるものを導いたり、過去からそれを引っ張ってくることは得意だと思います。
一方で「思考力」は、正解がないものや、未知のもの・未来を導き出すことができる力だと思います。

仕事では、レベルが上がるほど後者を求められることが多くなると思います。
知識だけ豊富で思考力が弱い人の場合は、過去の経験や自分が知っていることからしか考えることができず、「自分の中の当たり前」に固執してしまったり、新しい発想ができずに行き詰まってしまうのではないでしょうか。

フェルミ推定とかは、まさに「思考力」が問われている気がしますね。

「思考力」があれば「知識力」はなくてもいいのか

当たり前ですが、「知識力」もある方がいいに決まっています。
思考力があれば、多少知識がなくても突破できる場面はあるかもしれませんが、可能性はどうしても狭まってしまいます。
持っている知識や経験を連携させて、より思考力を活かすことで、新たな発想を生み出すといったことができると思います。

地頭が良ければコミュニケーション能力も高いのか

先ほど、「地頭」の意味に「コミュニケーション能力」が含まれていると書きましたが、個人的には分けて考えた方がいいと思っています。

地頭がいい人は、論理的で言語化能力もそれなりに高いと思うので、ある程度のコミュニケーション能力はあるのかもしれません。
ただ、コミュニケーションの重要な要素の大部分はそこではありません。(参考:『メラビアンの法則』)

地頭が良く、言っている内容は正論。でも、相手にうまく伝わらず物事がスムーズに進行しない場合などは、合理的ではあるが情理の部分が弱いと思われるので、コミュニケーション能力が高くはないということになります。

反対に、言葉は悪いですが「愛すべきアホ」みたいな人がいた場合は、「あいつ頭悪いけど、ホントみんなに好かれてるよなー」って感じで、人間的魅力があり、コミュニケーション能力が高いとも言えるのではないでしょうか。

優秀な人が持っている三要素

ここまで出てきた3つです。
どれも重要なのですべて兼ね備えていることが理想ですね。(なかなかいないと思いますが・・・)

  • 知識力(頭がいい)
  • 思考力(地頭がいい)
  • コミュニケーション能力

「知識力」を高めるには、読書なり色々な人の話を聞くなり、とりあえず勉強してインプットを増やしていけば高められますね。
では、「思考力(地頭力)」を高めるにはどうしたら良いのでしょうか?

地頭を良くする方法

地頭とは、「教育で与えられたのでない、その人本来の頭のよさ。」とありましたが、別に先天的なものではないと思っています。
ただ、幼い頃からの経験や考え方は強く影響していそうな気がします。

解き方や答えを教えてもらうような教育に偏っていた場合、どうしても暗記だったり正解を求めて「知識力」ばかりが伸びやすくなってしまうと感じています。

幼児期の「なぜ?」という、何にでも本質を求めて理解しようとし、新しいものを知りたいという意欲(知的好奇心)があった頃のまま、それを継続してクセづけている人ほど「地頭(思考力)」が良くなっているのではないかと思います。

なので、今から地頭を良くするためには、「Why(なぜ?)」を常に考える意識付けをしていくことが大事なのではないでしょうか。

「What(何を?)」から考えるクセがついてしまっている人は、答えを求めて急いでしまっているのかもしれません。
それによって目的を理解しないまま見当違いの方向へ進んだり、頑張っていることが無駄になってしまいかねません。もったいない。。。

まとめ

  • 「地頭がいい」とは、思考力(考える力)が高い。
  • 持っている「知識」を連携させることで、思考力をより活かすことができる。
  • 「知識力」「思考力」「コミュニケーション能力」を併せ持っている人が最強。
  • 「地頭(思考力)」を鍛えるためには、「Why(なぜ?)」から常に考える。

  • 「三密サイコーっ!!」って言いながら、居酒屋で楽しく飲める日が待ち遠しい。

さいごに

改めて「地頭がいい」とはどういうことか、自分の考えをまとめてみることで、「そもそも自分は出来てるんだっけ?」と見つめ直す機会になりました。
僕もまだまだ至らないところばかりなので、日々成長していけるように精進していきたいと思います。

また、採用においては地頭も含めた能力の部分も見ますが、それ以上にカルチャーフィット(社風・理念共感)や、スタンス・マインドセットといった価値観の部分の方が重要だと考えています。
どちらも実際にお話してみないとわからない部分なので、もしクイックに興味を持っていただけるようでしたら、ぜひ色々とお話させてください。

これからも、素敵な仲間と共に素晴らしい未来をつくっていきたいと思っています!!


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! //

919.jp

マズローの法則はデザインのヒントになるのか?その活用方法とは?

マズローの法則はデザインのヒントになるのか?その活用方法とは? こんにちは、最近人類史にハマっているデザイナーのachanです(特に人間とデザインの関係)。

人間の行動の動機づけとなる源は欲求です。欲求といえば、マズローの法則」があります(または「マズローの欲求階層説」と呼ばれる)。元々は心理学で使われていた用語で、現在ではマーケティング経営学看護学でも使われるようになっています。

今回は、その法則についてデザインの観点でお話しできたらと思います。

マズローの法則とは

アメリカの心理学者マズローが、「人間の欲求について自身の解釈を明らかにし、欲求が基本的なものから複雑なものへと、階層を形成していること」を提唱しました。

マズローの欲求階層説
マズローは、この欲求の階層においては、下位の欲求が満たされない限り、上位の欲求が前面には出てこないとしました。
各欲求について、要点を以下にまとめます。

  • 第1階層「生理的欲求」…… 生きていくための基本的・本能的な欲求。例:「呼吸」「食欲」「睡眠欲」
  • 第2階層「安全・安定欲求」……「身体」「雇用」「家族」「健康」「財政」の安全に対する欲求
  • 第3段階「所属と愛の欲求」…… 社会的な欲求。例:「友人関係」「家族」「性的関係」 に対する欲求
  • 第4段階「承認欲求」……「自尊心」「他者からの信頼」「他者からの尊敬」に対する欲求
  • 第5段階「自己実現欲求」……「正義感」「達成感」「自発的である」「問題が解決できる」状態に対する欲求
  • 第6段階「自己超越の欲求」……見返りを求めず、他者への献身や平和などを目標にして行動する状態

デザインのヒントになるのか

ユーザーインタフェースから考える

ユーザーインタフェース(UI)を「マズローの法則」に置き換えると以下のように考えられます。

  • 上位階層の欲求=UIの「創造性」や「楽しさ」
  • 下位階層の欲求=UIの「機能性」や「使い勝手」

しかし、デザイナーのみならずWebやアプリの制作者は下位階層の欲求を飛ばし「創造性」や「楽しさ」を求めてしまう傾向があります。
UIの「機能性」や「使い勝手」などの基本的な部分が整っていないデザインは、上位階層の「創造性」や「楽しさ」を獲得することは出来ないわけです。

f:id:aimstogeek:20210122101706p:plain 例えば、使っているUIがミスを誘発する構造になってしまうと、安全・安定欲求を脅かすことになります。
操作がうまくいかず困り果てた時には、誰かに頼りたくなり、そこでいろいろなメッセージやヘルプ、マニュアルなどが大きな支えになります。

一方、表示するメッセージがユーザーを尊重したものでなければ、ユーザーにはストレスになります。さらに、作業のゴールがわかりにくい業務システムであれば、達成感を得たいという欲求が満たされず、ユーザーに不満が生じやすくなります。

つまり、ユーザーの体験価値を最大化するために、UIを検討、デザインするうえでは、時々これら人間の欲求の観点に立ち返って考えることが重要だと思います。(例えばUIの情報構造や要件定義、ビジュアル設計などの参考になるのではないかと思います。)

サービスから考える

サービスやプロダクト開発に携わる人ならば、「ユーザーファースト」という言葉を耳にしたことがあるかと思います。言葉通り、ユーザー第一主義のことであり、利用者の利益や満足度を最優先する考えを指します。ただし、それはユーザーの声をそのまま鵜呑みにして開発に反映するという意味ではありません。
なぜなら、本質のユーザーファーストというのは、ユーザーが本当に求めている価値(本質的欲求)を実現することなのです。

また、物やサービスに溢れ同質化が進む現代では、「機能中心」から「人間中心」的なアプローチへ変わってきています。要はユーザーは利便性などの「役に立つ」という機能価値よりも、もっと感情的、内省的な「自分にとって意味があるか」という情緒価値を求めるようになってきています。 そのため、サービスやプロダクトのデザインにおいては、マズローの法則を活用し、競合との差別化を図ってサービスの提供価値を優位にしなくてはいけないと考えています。

言い換えると、昨今では、生存に必要な大体の欲求は既存のサービスによって満たされてしまっています。そのため、新規サービスを考える場合はより高い階層の欲求にアプローチするか、あるいは既存のサービスにおけるユーザーが価値を感じる対象を再定義し、マズローの法則を元に新しいアプローチで勝負を挑むことになるのではないかと感じています。

どう活用するのか

マズローの欲求階層説と同じく、スティーブン・ブラッドリーがデザインにおいても、下から機能性、信頼性、ユーザビリティ、上達、創造性の欲求という5階層のピラミッドが形成され、より上位の欲求に移る前には下位の欲求を満たす必要があるかを提示されています。現在は一つのデザイン指針としてデザイン戦略においても活用されています。

デザインの欲求階層説

  • 第1階層「機能性の欲求」…… 基本的な機能性を満たす欲求
  • 第2階層「信頼性の欲求」…… 機能・デザインに一貫性を持たせることで信頼性を満たす欲求
  • 第3段階「ユーザビリティの欲求」…… 使い勝手の良さを実感することで 愛着を持つようになる欲求
  • 第4段階「上達の欲求」…… 作業効率を改善し生産性を満たす欲求
  • 第5段階「創造性の欲求」……自分なりにプロダクトを駆使することで愛着を深めていく欲求

上記から、デザインが先走って革新性や創造性ばかりを追求すると、機能性、信頼性、ユーザビリティ、そして上達に対する配慮が欠けてしまうことになります。しかし「デザインがいいのだから、多少のことは我慢しよう」とユーザーに思われてはいけないということが見えてきます。
(具体的なデザインに落とすための方法は今後の記事にご期待ください)

まとめ

デザインを考える際は人の心を理解し寄り添っていくことが良質なUI、ひいては素晴らしいユーザー体験に繋がることが見えてきます。繰り返しになりますが、ユーザーの心理的欲求を満たすようなデザインを作ることが、サービスやプロダクトを継続的に使用してもらえるきっかけの一つになるでしょう。
もちろん、全てを満たす完璧なレベルのデザインができるようになるには長い時間がかかるでしょうが、目標を常に高く持って、ユーザーの本当に求めている価値の実現に少しでも近づいていけたらと思います。


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! //

919.jp

awkで作業効率アップ!

はじめまして!2020年6月に中途入社したソフトウェアエンジニアのたろーです!

皆さん、CSVやTSV形式のファイルの操作をする際にどのようなツールを使ってますか?
テキストエディタExcelスプレッドシート 、拡張子毎の専用エディタなどなど色々な方法があると思います。

でも、 「簡単な集計程度であればわざわざツールでファイル開いて関数とかフィルタを組み込んでいくような作業したくないな〜」 なんて思うことありませんか???

そこで今回僕から推したいのはかの有名なawkです!

普段CLIで作業を行っていなかったり、サーバサイドの開発をあまり行わなかったり、awkを使ったことない方からすると、
「サーバサイドエンジニアが使ってるのよく見るけど使ったことない…」 「名前はよく聞くけどなんとなく難しそう…」「よくわからないけど怖い」
のようにとっつきにくいイメージがあるんじゃないでしょうか?

ですが実際は簡単なお作法さえ覚えてしまえばとてもお手軽で便利なので、 今回は布教活動の一環として初めの1歩的な使い方を紹介したいと思います!

awkとは?

awkはテキストの加工や抽出が得意なプログラム言語です。
for文などのループ処理を書かずにファイルの行ごとの処理が行えます!
ほとんどのLinux系OSやmacOS等にも標準で入っているので導入も簡単です!

awk '実行スクリプト' 処理対象ファイル

のような形式で簡単にターミナルから実行できちゃいます。

実行スクリプトをファイルに記述している場合は

awk -f 実行スクリプトファイル 処理対象ファイル

のように-fで実行スクリプトファイルを指定することで実行可能です。

実際に使ってみましょう

まずは今回使うサンプルCSVです。 架空のテストの採点結果をCSVで出力しています。

受験者名 所在地 点数(数学) 点数(国語)
tanaka tokyo 100 100
yamada saitama 90 50
sato chiba 80 90
suzuki kanagawa 70 60
saito kanagawa 85 95
yamamoto saitama 88 75
kitano tokyo 90 95

生のファイルだとこのような感じです。
sample.csv

tanaka,tokyo,100,100
yamada,saiatama,90,50
sato,chiba,80,90
suzuki,kanagawa,70,60
saito,kanagawa,85,95
yamamoto,saitama,88,75
kitano,tokyo,90,95

ファイルの内容全てを出力したい

$ awk '{print $0}' sample.csv

print $nでn番目の列のデータを指定し表示できます。$0だと全ての列 を指定します。
でもファイルの内容表示だけであればcatを使った方が早いですね!

特定の列のみを出力したい

コマンド

$ awk -F, '{OFS=","}{print $1,$2}' sample.csv

出力結果

tanaka,tokyo
yamada,saiatama
sato,chiba
suzuki,kanagawa
saito,kanagawa
yamamoto,saitama
kitano,tokyo

-Fオプションで読み込みファイルのデリミタ、OFS=","で出力用のデリミタを指定が可能です。
今回はCSVなので入出力のデリミタにカンマを指定し、1列目の受験者名と2列目の所在地を出力しています。
このレベルでの使い方であればcutコマンドでも行えますが、

$ cut -d, -f1,2 sample.csv

デリミタの指定と指定列の抽出はawkの肝となるところなので是非覚えてください!

指定列の合計値をデータ毎に出力したい

コマンド

$ awk -F, '{OFS=","}{print $0,$3+$4}' sample.csv

出力結果

tanaka,tokyo,100,100 200
yamada,saiatama,90,50 140
sato,chiba,80,90 170
suzuki,kanagawa,70,60 130
saito,kanagawa,85,95 180
yamamoto,saitama,88,75 163
kitano,tokyo,90,95 185

awk感(?)でてきましたね!
5列目に数学と国語の合計点の列が追加されています!
$0,$3+$4で既存の情報の後ろに合計点を演算して出力しています。
わざわざExcel開いてsum関数を挿入していかなくても簡単に演算が行えるんです!

CSVに論理名のヘッダーを付与して、更にデータ毎に採番したい。

コマンド

$ awk -F, 'BEGIN{OFS=",";print"No","受験者名","所在地","点数(数学)","点数(国語)","点数(合計)"} {print NR,$0,$3+$4}' sample.csv

出力結果

No,受験者名,所在地,点数(数学),点数(国語),点数(合計)
1,tanaka,tokyo,100,100,200
2,yamada,saiatama,90,50,140
3,sato,chiba,80,90,170
4,suzuki,kanagawa,70,60,130
5,saito,kanagawa,85,95,180
6,yamamoto,saitama,88,75,163
7,kitano,tokyo,90,95,185

やりたいこと2つ盛り合わせです!
BEGIN{処理}で、行毎の処理を行う前に実行する処理が指定できます。今回は出力用デリミタの指定とヘッダ情報の出力を行っています。
次にprint NRで各行にデータ番号を出力しています。NRは用意されている組み込み変数で、処理中の行数が格納されています。
Excelで各行に番号をふる作業とはサヨナラですね!

平均値を出力したい

コマンド

$ awk -F, '{mSum+=$3;jSum+=$4} END{printf("数学%d点 国語%d点\n",mSum/NR,jSum/NR)}' sample.csv

出力結果

数学86点 国語80点

END{処理}で行毎の処理が終わった後に行う処理を指定することができます!
行毎の処理で数学と国語の点数を加算し積み上げ、
ENDブロックでは合計点を行数(NR)で除算することで平均を算出、printfを用いて整数値フォーマットを指定して出力しています。

指定列が一定の数値以上のデータのみ出力したい

コマンド

$ awk -F, '$4>=80{print $0}' sample.csv

出力結果

tanaka,tokyo,100,100
sato,chiba,80,90
saito,kanagawa,85,95
kitano,tokyo,90,95

4列目、国語の点数が80点以上のデータのみ抽出しています。
パターン{処理}でパターンにマッチしたときのみ処理をおこなっています。今回は数値の比較演算を用いましたが正規表現パターンによるマッチも可能です。
また、処理内にif文を記述することでも同様の処理を行えます!

$ awk -F, '{if($4>80){print $0}}' sample.csv

もちろんelse句も使えるので条件に応じてデータの出しわけも可能です!

$ awk -F, 'BEGIN{OFS=","}{if($4>=80){result="OK"}else{result="NG"};print $1,result}' sample.csv

出力結果

tanaka,OK
yamada,NG
sato,OK
suzuki,NG
saito,OK
yamamoto,NG
kitano,OK

指定列の合計値をデータ毎に出力し、合計値の降順でデータを並び変えたい

コマンド

$ awk -F, '{OFS=","}{print $0,$3+$4}' sample.csv | sort -t, -n -r -k5

出力結果

tanaka,tokyo,100,100,200
kitano,tokyo,90,95,185
saito,kanagawa,85,95,180
sato,chiba,80,90,170
yamamoto,saitama,88,75,163
yamada,saiatama,90,50,140
suzuki,kanagawa,70,60,130

他コマンドとの合わせ技です!5列目に数学と国語の点数の合計値の出力を行った後に、sortコマンドで並び替えています。
sortコマンドでは-tオプションでデリミタの指定、-nオプションで数値ソート指定、-rで降順指定、-kオプションで並び替え評価対象の列指定を行っています。
awkコマンド単体でもソートは行えるのですが、他のコマンドと組み合わせることでより簡単にやりたいことを実現できます!

最後に

基本の部分(とちょっとだけ応用)の使い方のみの紹介でしたが、思ったより簡単に色々なことができそうだと感じていただけたのではないでしょうか!?
他にもawkに用意されている関数を使ったり他のコマンドと組み合わせることで本当に色々なことがCLI上から行えます!
普段当たり前のようにExcelやファイルエディタでファイルを開いて行っていた作業が、コマンド1つで行えるのは作業効率アップにもつながりますね!

一見怖そうだけど実は優しい先輩コマンド(言語)代表のawkを是非活用していってください!


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! //

919.jp

クイックのエディターランキング!

あけましておめでとうございます!そして始めまして!新卒で入社したエンジニアのじゃがいもです。

新年早々食べ過ぎて胃もたれを起こしています。

早速皆さんに質問です

「初めてのエディターは覚えていますか?」

僕の初めてのエディターは、専門学校1年のときに使用したAtomでした。それまでメモ帳しか知らなかったので、急に出来る人感が出てニヤニヤしながら使っていました。
そこから「Sublime Text」→「Dreamweaver」→「VSCode」→「IntelliJ IDEA」と来ました。

分野によって使用するエディターに違いはあると思いますが、思い返すと懐かしい記憶がよみがえってくるのではないでしょうか。

愛好するソフトウェアの論争は「OS」や「ウェブブラウザ」「プログラミング言語」など多岐に渡りますが、今回は「エディター」にフォーカスして社内の人気ランキングを作ってみました!

それでは3位から発表します!!!

3位に輝いたのは

Sublime Textです

理由としては
「軽量」であること、「使い慣れている」ということが挙げられていました。

コメントにある通り、Sublime Textは非常に軽量でストレスを一切感じることなくコーディングに夢中になることができます。

プラグインも豊富で、テーマもかっこいい、無料で使用できるという良いこと尽くめなエディターです。

2位は!!!

Visual Studio Codeです

理由としては
「研修時代から使っていた名残」
「フリーで軽量、環境を選ばず利用できる点」
プラグインが優秀」
プラグインを入れなくても最初から使いやすい」
マークアップの記述がしやすい」
などが挙げられていました。

Visual Studio Codeは有料級の機能がすべて無料で使える軽量の素晴らしいエディターで、Microsoftが開発しているということもあって安心感もあります。

私自身、これだけ高機能でありながら、ここまでも軽量なのか、、、、、と最初は驚きました。

Visual Studio Code人気プラグイン

「LiveShare」
→リアルタイムの共同開発が出来るプラグインで、ペアプロや勉強会がしやすくなるものです。
googleドキュメントのようにリアルタイムにコードの共有ができるので、今の御時世とても重宝されるのではないでしょうか
これを使ってコードレビューとかしてみたいですね
 (セキュリティの問題があるので、会社で使用するときはルールに沿ってご使用ください) f:id:aimstogeek:20210106164224g:plain

「Material Icon Theme」
→ Materialなかっこいいアイコンが設定できます
f:id:aimstogeek:20210106164511p:plain

「Bracket Pair Colorizer 2」
→ 対応する括弧に色をつけてくれます
f:id:aimstogeek:20210106164716p:plain

などが挙げられていました。

お待ちかねの第1位は!!!

IntelliJ IDEAです

パチパチパチパチ👏

理由として
「Editor/DBViewerなどのツールを行き来せずに済む」
「ctagsなど別途管理しなくてもファイル検索が容易」
「やっぱIDEはコードをどんどん潜って読めるからいいね!サジェストも優秀でタイプ数が減るのもいい!」
「Git操作もDB操作もターミナルもなんでもできて素敵。会社支給(大感謝)だけど、自腹でも使い続けると思う」
「優れたオールインワンだと思います」
などなどたくさんのコメントを頂きました。

コメントにもありますが、IntelliJ IDEAは会社支給なんです!!!
とてもありがたいです。

InteliJはチェコに本社を置くJetBrains社が開発したIDEです。
VSCodeSublime Text等との一番の違いは有償である。ということが挙げられます。
他のエディターは無償が多いですが、InteliJは有償ながら20年以上も他のエディターに負けることなくエンジニアのパートナーに選ばれています。

しかし、有償になることでバグの対応が早かったり、アップデートも頻繁に行われる等のメリットがあります

JetBrainsの公式サイトには以下のように記述されています
企業によるIntelliJ IDEAへの投資は6か月未満で回収できることが分かりました。3年間の投資回収率(ROI)は850%です。

850%、、、すごいですね。

サジェストも優秀で、GitやDBの操作もしやすく、初心者用にも使いやすいものとなっています。

ただいいところばかりではなく、ところどころ動作の重さは感じます。
大量の機能が初めから付いていたり、表示している情報も多いので、VSCodeSublime Textに比べると軽量感では劣ってしまいます。

IntelliJ IDEAの人気プラグイン

「IdeaVim」
Vim操作ができるようになります

「CodeGlance」
→ 開いているファイルのマップを表示するプラグインです
f:id:aimstogeek:20210106163927p:plain

「Rainbow Brackets
→ 括弧を色分けして表示してくれるプラグインです f:id:aimstogeek:20210106164039p:plain

IdeaVimは数人使用している方がいました。IntelliJVimの組み合わせは最強ですね

番外編

「nova」(1票)
→ Coda 2の後継となるエディターで、非常にUIがかっこいいエディターです。気になった方はぜひ試してみてください! Panic - Nova f:id:aimstogeek:20210106202240p:plain

vim(1票)
→ 誰もがご存知、最強エディタです。
個人的な考えとして、vimemacsをメインで使用している人は技術力おばけのイメージがあります。

「さくらエディタ」(1票)
→ 日本製のWindows用老舗テキストエディタです。
半年ほど前に約2年ぶりのアップデートが行われるなど、現在も現役のエディターです。 f:id:aimstogeek:20210106204122p:plain

最後に

僕が使用しているエディターはランキング1位の「IntelliJ IDEA」です。
元々Visual Studio Codeを使用していましたが、DB操作の快適さや、ジャンプ機能(宣言元へ)の使いやすさもあり最近乗り換えました!

今度は違うソフトウェアでランキング記事を書いてみようと思います!
最後までお読みいただきありがとうございました


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! //

919.jp

参考サイト

marketplace.visualstudio.com plugins.jetbrains.com www.jetbrains.com ja.osdn.net

社内システムをリニューアルした年が終わった

こんにちは、ねこです。
締切直前まで宿題に手を付けない習性を改善できないまま1年経ってしまいました。
この原稿も締切後に仕上げている始末です。本当にすみません。
師走というにふさわしい日々ですが、年末にブログ当番が回ってきたのもなにかの縁ということで、今年を振り返って書き残しておこうと思いました。
カテゴリは100%ポエムです。

2020年3月某日、約2年間開発が続いたシステムをリリースしました。
コロナやオリンピックが無くても、私はこの1年のことを忘れないと思います。

リニューアルプロジェクトのこと

私がクイックに入社して2年ほど経った頃、社内システムのリニューアルプロジェクトが始動しました。
人材紹介事業本部の営業さんたちが扱う様々なデータやTODOを管理するシステムです。
どんなプロジェクトだったかというと

  • 8年使われたシステムを
  • フルリライト
  • オンプレからAWSへ移行し
  • DBもOracleからMySQL
  • テーブル定義をガッツリ変更してデータ移行
  • 新機能も追加する

という、今振り返ると経験者なら 「こいつ死んだわ」 と秒で手を合わせる案件でした。
よく2年で帰ってこれたな。

しかし、私が入社した頃からすでにプログラムは割と限界を迎えていて、「機能追加はリニューアルしたらやります」と言って大きめの新規開発をストップしたり、不具合を修正したら別の箇所で不具合が出たりと、レガシーシステムあるあるをすべて詰め込んでいた状態で、会社的にはどうしてもやらねばならぬ崖っぷちだったのでした。*1*2

リリースまでのこと

それはもうとんでもなく大変だったのですが、今回は今年1年を振り返る記事なので割愛します。 聞きたい人は入社してください。

リリース後の3ヶ月のこと

リリース後は不具合と要望の嵐でした。
事前に「ほんとに忌憚なくなんでもご意見おねがいします!!!」と伝えていたのもあったためか一週間で不具合・要望の報告リストが500件近くまで埋まり、スプレッドシートで公開していたのでWeb室のみなさんどころかシステム利用者の方々にまで心配された(というかちょっと引いてました)のを覚えています。
※ちなみに弊社の営業部は開発にとても協力的で、開発チームに気を遣いながらもたくさんご意見を送ってくださいます。いつもありがとうございます。

そんな中コロナウイルスこんにちは。

あれよあれよという間に開発チームは在宅になったのですが、セキュリティの関係上リモート環境ではリリースができず、ひたすら修正をGitに溜めることしかできない日々が続いたのでした。
開発したものがリリースできない&早く修正してくれと何度も要望が上がってくるというのもなかなかに地獄のような環境です。

緊急事態宣言が解除された6月、Webサイトが1つくらいまたできたんじゃないかという規模のリリースはリニューアルの時と同じくらい念入りにテストが行われ、無事終えることができました。

2020年後半戦と、これからのこと

そんな怒涛の3ヶ月を越え、リリースできる環境ができ、定期的に成果を出していくために「まずは週1でリリースしよう」と改めて走り始めました。
このときから続けている「定期リリース後の定期KPT」で、今の開発チームを支えるルールや文化が急速に作られていったように思います。

  • リリース日一週間前を締切として、1週間前にはリリースの準備ができている状態にする
  • 上記の状態でコンフリクト事故が起こらないようGitフローを整備
  • 誰でもテスト仕様書を作れるようにテスト仕様書のテンプレートを作成
  • 特定の人がやっている作業、よくある問い合わせをWikiにまとめて共有
  • 自分の事故を共有し、同じことを他のメンバーがやらかさないようにする
  • 勉強会を開催し、営業部の業務や設計・実装に関する知識の共有を行う

週1リリースは厳しくないか?と心配していた(されていた)時期もありましたが、KPTで改善を続けた結果、6月から現在までずっと続けられています。
この流れでなんとなくお互い雰囲気でやっていたことに関してもドキュメントが作成され、チームメンバーの変更があったときでも、引き継ぎや導入の時間が大幅に短縮されたのも大きな変化です。

9月頃からはリニューアルリリースのときにできた負債をあらかた返済し、ずっとやりたくてもできなかった新規機能の開発を進め始めました。
再び営業部を巻き込んでの大規模なあれそれで前前前世から全然気が抜けないのですが、これもリニューアルしなければできなかったことで、前世のことを思うと大変感慨深いです。

もうあと3ヶ月で営業部にもWeb室にも、新卒が入社してきます。
その新卒たちはリニューアル前のシステムのことなんて知る機会もないのでしょう。
「前と比べたら良くなっている」がどんどん「当たり前」になっていくのはさみしいですが、同時に誇らしくもあります。
すでにやたらでかい開発計画が後ろに控えているのですが、今後も恐れずひるまず過去を引きずらず、前へ上へと発展させていきたいと思うばかりです。

おわり

以上、社内システム開発の中の人からのお届けでした。
山のような不具合・突然のリモートワーク・文化の変化……リニューアルに伴って、周りの環境に何から何まで変化があった年となりました。

あまり表に出てこない社内システムプロジェクトがどんなもので、どんな人間が作ってるのかがなんとなく伝われば幸いです。

それではあと一週間、ちゃちゃっと仕事納めていきましょ〜


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! //

919.jp

*1:もっとやりようあったでしょとは言わないでください

*2:でも今後私が在籍しているうちは二度とやらせません。