へっぽこエンジニアのへっぽこ道場

サービス作りたいエンジニアが色々見て体験したことを発信

初心者VR・3Dチャレンジ1

何をやるのか

javascriptで3Dをやってみたい

やってみた

参考情報

ics.media

three.jsとは

Three.jsとは、手軽に3Dコンテンツを制作できる商用利用可能なJavaScriptライブラリ

threejs.org

基本的な考え方

  • 3Dモデルを置くキャンバスを作成
  • 立体的に見るためにどこの視点(x,y,z軸)から撮影するか設定
  • 光源の設定
  • 3dオブジェクト生成
  • アニメーションの設定

なんか作ってみた

https://codepen.io/tagajun0303/pen/WNRybEx

https://codepen.io/tagajun0303/pen/OJWEVyb

他にもいろいろできるよ

1からいろいろ学べる

ics.media

blender + three.js

入門

qiita.com

liginc.co.jp

3dデザイン参考サイト

sankoudesign.com

www.awwwards.com

問題

3d作って色々やるにはちょっとハードルが高い....

ちょっと自由に障るためには、色々と学ばないといけないことが多い.....

いい方法はないものか.....

解決策:Cables.gl

note.com

ノーコード(ローコード)で3dアニメーションなどを作成できるツール

ドキュメントが一番情報がわかりやすかった

メリット

  • 学習コストが低そう
  • 手軽に作れる
  • htmlに変換できる(monacaでも利用できるかも)

デメリット

  • 日本語の情報がほぼない....
    • UGに参加したほうがいいのかも

少し利用してみた

  • 左の枠に設定を追加して、何に対してどういう順番で行うのかつなげていくとアニメーションやゲームなどが作成できる

ics.media

  • エクスポートするとhtmlとjsファイルが出力されるのでmonacaでも利用できそう
    • htmlとjdファイルを取り込めば行けそう( 他のファイルは関係なさそうなファイルなので無視していいと思う )

RPAについて

背景

業務でRPAを利用する機会があったので、 RPAについて調べ、実際に利用してみて思ったことをまとめました。

RPAとは

そもそもRPAとは

RPAとは ロボティック・プロセス・オートメーションの略で ソフトウェアによるオフィスワークのルーティン作業を自動化することである。

話を脱線するが、自動化の歴史について

作業の自動化の歴史は古く 金の計量が面倒なので、通貨という共通の単位の登場により 計量の自動化を行ったり、 第一次産業革命の蒸気機関の発明によって動力源が刷新され工場の機械化により作業の自動化が進んだりと 第二次、第三次、第四次と時代が進むにつれ様々なものが自動化されてきた。 そして現在は、デスクでの作業の自動化としてRPAが注目されている。

RPAの前身

RPAの前身となるのが1999年10月に公開された UWSC と呼ばれるソフトウェアで、 Windows上のキーボードやマウス操作を自動化が可能

www.vector.co.jp

UWSCとRPAの違い

まず、UWSCの特徴として、マウスやキーボードの動作を記録して同じ動作を実行することが可能である。 もう一つの特徴としては、複雑な操作はプログラミングのようにスクリプトを書く必要がある。

RPAは比較的直観的に複雑な操作( シナリオ )も作成が出来るところが、RPAとUWSCの大きな違いだと思う。

RPAの利用方法

RPAにもUWSCと同じように操作を記録してシナリオを作成することが出来る。

基本的に、ブロックを積み上げていくように必要な操作を順番に組み合わせてシナリオを作成する。 操作ごとに細かい設定を行い複雑な操作の自動化を行う。

RPAを触ってみた

利用したツールはテリロジー社のEzAvaterである。

EzAvater導入事例 デザインフィル様 | 株式会社テリロジー

RPAを利用してみて感じたポイント

とりあえずシナリオを作ろうという気持ちで始めると トラブルが発生した時の対応や他の人が似たようなシナリオを作成するときに大変な思いをする。

そのため以下の手順でシナリオを作成した。

  • どのような課題があってどうやって作業を確認しているのかをまとめる 個人的にポイントだと思ったのは、視覚的にどこを見て判断しているのか 問いかけを行いながら分析することが大切だと感じた。

例) 集計行の内容を取得したい

  1. 視覚的に集計行をどうやって確認しているのか?
  2. 集計と書かれた行の箇所を確認 → その行のG列を確認する

  3. まとめた内容を手順にする

  4. 手順にした内容を元にシナリオに当てはめる

  5. 1~3の内容を資料にまとめる これを行っていないとトラブルや引継ぎや他の人が同じようなシナリオを作成する際に 無駄なコストがかかる。

感じたこと

  • 昔も今も人はより楽になるための方法を模索しているのだなと感じた
  • プログラミングに関する知識が必要
    RPAはプログラミングを全くしなくていいわけではなく、少なくともブロックを積み上げて処理を作る必要があるので、
    ノーコードではなくローコードツール( つまり少ないコードでアプリケーションを開発する)といった認識を持った。
    そのため、最低限小学生が行うようなアルゴリズムに関する知識が必要だと感じた。
    個人的に勉強になりそうなものとして、Googleの迷路ゲームなどがRPAでも必要なアルゴリズムの考え方の参考になると思う。

blockly.games

  • 保守や運用に関しても考えておく必要があると思う

何もドキュメントがないままRPAのシナリオを作成するとトラブル対応や類似シナリオを作成するときも苦労する。

  • 力技でサービスと連携できるのは凄い APIがないサービスでもクリックなどの操作の自動化でログインして操作できるのは強いと感じた。 何かデータを入力するプラットフォームだけおいて中身はRPAで行うようにすることで柔軟に対応することが出来る。 これがエンジニア無しで開発が出来る。 seleniumとかでも可能だがそれよりも手軽に作れる。

まとめ

  • RPAは人が自動化を求めていった末にたどり着いたソフトウェア
  • 小学生レベルのプログラミングに関する知識(考え方)が必要
  • APIがないサービスでも連携できるのがすごい

スピーチや会話の「えーっと」がなくなる本のを読んで

今回は、「スピーチや会話の「えーっと」がなくなる本」を読んだ内容をまとめてみた

スピーチや会話の「えーっと」がなくなる本 | 高津和彦 | プレゼンテーション | Kindleストア | Amazon

会話中の「えー」「あのー」の正体

心・思考・声で思っている言葉を一致させようとして、考えている隙間を埋める際に出てくるもので、「フィラー」と呼ばれている このことを意識しながら話すことで、フィラーを防ぐことができる体にそのことを覚えさすこと

フィラーについて

会話の途中でフィラーが入ることで、文章に余計なノイズが入ってしまうため、 何を話しているのかわかりにくくなる。

そのため、短く簡潔に話すことを意識すると良い。

後、心・思考・声で思っている言葉が一致していないことでよく発生するため、 自信、うそ、言い訳や考えが定まっていないと思われる。

フィラーが発生しやすいシチュエーション

外からのプレッシャーやストレス(面接等)と心や思っていることが一致していない場合によく発生する。

フィラーがでてしまう理由

性格面の問題

自分の中で背負い込んでしまい逃げようとすると発生してしまうようである。

そのため、人と話したりして自分で背負いこまなかったり 死にはしないと思って腹を括って話すことを意識していくことで改善されると思われる。

対策

  • 考えがまとまってなくてもはっきり言い切る(大きな声を出す)ことを意識する
  • 思いで話すようにする
  • 短い文でまとめる
  • フィラーがでそうな時は文を区切って一旦一呼吸する
  • 間を作るのを恐れない ⇨ ジョブズのプレゼンのように
  • 大きな声で話すようにして声の震えをなくす

全体を通じて

 自分の考えがまとまっていない自分が軸を持たないであいまいにしているため、 フィラーが発生していると感じた。

その為には、自己評価が低いところが問題で、 もっと自信をもって行動していかないといけないと思う。

その為には、批判を恐れず受け入れて行動すべしと自分を鼓舞する。

考えただけでも、心拍数が上がるのを何とかしないと.......

Swiftの利用方法メモ

プロジェクトの作成

Xcode12だとプロエクトの作成方法が検索で出てきた内容と異なるようだった 自分の場合は、
Create a new Xcode project > iOS > App
でプロジェクトを作成した。

Xcode12について

Xcode 12 - Apple Developer

プロジェクトの構成は新しい開発フレームワークの設定のSwiftUIとstorybordで異なる

storybord

GUIで画面レイアウトや画面遷移などを設定することができるため 直観的で使いやすい 部品などに分けて作成を行うのが苦手なようである

SwiftUI

2019年くらいに出てきた新しい開発フレームワーク 基本的にコードで記述を行うため直観的ではない。 その分エンジニアライクになっており、部品課がしやすいようである。

SwiftUIで読み漁ったもの

@マークの考え方

SwiftUIの機能 @State, @ObservedObject, @EnvironmentObjectの違いとは| 開発者ブログ | 株式会社アイソルート

画面レイアウトにつて

【SwiftUI】 Viewのレイアウト(VStack、HStack、ZStack) | カピ通信

テキストフィールド作成

【SwiftUI】TextFieldの使い方 | カピ通信

画面遷移

【SwiftUI】NavigationViewでの画面遷移 | カピ通信

storybordで読み漁ったもの

開発する際の基本について

XcodeとSwiftを使ってアプリ開発を体験してみよう – WPJ

Xcodeのストーリーボードを使う方法【iPhoneアプリの画面が簡単に作れる】 | TechAcademyマガジン

画面遷移方法

【Swift/iOS】ViewControllerの追加方法 | カピ通信

ボタン作成時のArgumentのsenderについいて

IBActionのsenderはAnyでなく具体的な型を指定しよう(Swift) - Qiita

IBActionの引数にあるsenderの使いみち(Swift) - Qiita

キーボード入力数字化

UITextFieldで数字入力する方法 | Swift | offブログ!

セレクトボックス作成

[iPhone] UIPickerView の基本的な設定

Swift - PickerViewの使用の時のエラーについて|teratail

コードの記述に関して

Storyboardとプログラムの連携 - iOS Docs

Xcodeでボタンを押すとテキストが変わる簡単なアプリをつくってみるよ | 株式会社LIG

WEB APIの呼び出し

swiftでwebAPIを呼び出してjsonデータを表示させる - Qiita

外に出れないときの気分転換 ライブ配信

コロナの影響で、テニスのプロの大会が開けなくなってしまい

代わりに、プロの選手がテニスゲームで試合を行う大会が開かれることになりました。

その名も、 マドリードオープンテニス バーチャルプロ

日本からは錦織選手が出場してます(1次リーグ敗退しました)。

他にも配信している映像などがあるのではと思い、

他にどのような配信があるのかまとめてみました。

コロナ疲れもあると思うので、主に癒されそうなものをまとめました。

内容 リンク 感想
衛星からの地球の映像 リンク 地球の映像の中で一番シンプルで好きです
月面の映像 リンク 月面の映像は飽きやすいかもしれません
オランダの首都の映像 リンク 意外と人いてびっくりしました
4Kで撮影した景色をライブ配信 リンク 色々な綺麗な景色を音楽と共に聞けておすすめです
リラックスした音楽を聴きながら自然の映像を見る配信 リンク 上に同じく
水族館の熱帯魚の映像 リンク 魚系では一番好きです
水族館のサメの映像 リンク
猫の映像配信 リンク 猫のごろごろしている姿には癒されます
オーロラ リンク もう少しきれいな映像だと嬉しいな
森の定点カメラ リンク 動物の自然の姿を見ることができます
ハチドリ リンク ハチドリのゆっくりしている姿が見れます
森のリスや鳥 リンク 森の動物たちがえさを取りに来る姿が見れます
子犬 リンク 子犬が多い、そしてかわいい

他にもyou tubeでいろいろ配信されていますので是非検索してみてください!!

ライブ配信で一緒に勉強しようなんて言うものもあったりします!!

リモートワークで集中するために!!

リモートワークで作業を行うようになって あれよあれよと1か月

環境に慣れてきたのはいいが、 誘惑が多くて作業に集中できなかったり...... ずっと仕事ばかりしてしまったり......

公私混同してしまう.....

どうしたらいいものやら

いろいろ相談などをしていった結果

ポモロード・テクニックを実践していこうと思う。

ポモドーロ・テクニック

  • 25分集中して5分休憩を繰り返すテクニック
  • 名前に由来はトマト型のキッチンタイマーらしい

メリット

  • 集中力の維持
  • マルチタスクの防止
  • モチベーションの向上
  • 頻繁に休憩が取れる
  • 仕事や勉強のプロセスを改善できる
  • 余った時間も有効活用できる

やり方

  1. 実行タスクを決める
  2. 25分間タイマーをセットして作業実施(ノってるときは25分以上伸ばしてもいい)
  3. 実績の記録
  4. 5分間休憩する

これを1ポモドーロとして繰り返す 4セット繰り返したら、15-30分の長い休憩を入れる 1日の仕事が終わったら、完了したポモドーロを記録

記録する内容 - 日付 - 開始時刻 - 活動の種類 - 活動の説明 - ポモドーロ数 - 結果についてのメモ - 改善点

公式が例にしている休憩 - 呼吸法 - 瞑想 - コーヒー - 散歩 - ストレッチ - 雑談

ポモドーロテクニックは、大きく5つの段階に分かれています。

段階 タイミング 内容
プランニング(計画) 1日の始まり その日の活動を決める
ラッキング(追跡) 1日中 1ポモドーロごとに計測する
レコーディング(記録) 1日の終り 1日の活動を記録する
プロセシング(処理) 1日の終り データを集計し、情報に変換する
ビジュアライジング(視覚化) 1日の終り 情報を整理・分析し、改善する

継続的に分析して改善し続ける方が大切

分析の例 - 1週間のポモドーロ数 - 〇〇に必要なポモドーロ数平均 - 曜日平均のポモドーロ数 - 不要なタスク調査 - ベストな活動・休憩時間 - 月ごとのポモドーロ数 - 進捗具合とポモドーロ数 - 1ポモドーロの稼ぎ

ポモドーロのタスクに関して - 5-7ポモドーロ以上になる場合はタスクを分割する - 1ポモドーロ以下になる場合はタスクを結合させる - 優先順位をつけて高いものから消化するように - ふと思い出した内容は記録をつける

作業の中断に関して

中断が多いと、何らかの対処が必要 2.8秒の中断でエラーの発生率が2倍、4.4秒の中断でエラーの発生率が3倍になるといわれている パフォーマンスが低下する

今更ながらリモートサービスをまとめてみました

先週、会社の人とリモート飲み会をためしてみました。

はじめは、Zoomを利用した企画を考えていたのですが、無料版アカウントだと40分しか利用できないので 『たくのむ』というサービスを利用

このサービスは、無料アカウントだと時間無制限で最大4人まで同時にビデオチャットできるとてもいいサービスですが、 今度問題になったのは、通信環境が貧弱なためラグやタイムアウトが多発という問題........

諦めてlineのグループ通話のカメラオフでリモート飲み会を実施しました。  

案外顔出さなくても楽しめるものですね!!

リモート飲み会は実際の居酒屋と違って、オーダーストップがないため だらだら時間が過ぎてしまうの注意です!!

リモート飲み会を行って、『他にリモート飲み会のサービスがどのようなものがあるのか』『リモートで何か行うサービスは他に何があるのか』 まとめて見ました。

リモート飲み会

サービス名 url 無料利用 最大人数 時間制限 その他
zoom リンク 100人 40分 背景を設定できるのが魅力的
たくのむ リンク 4人 無制限 カメラオフにしても回線が貧弱な人が良く落ちました
line リンク 200人 無制限
skype リンク 50人 無制限
messanger リンク 6人 無制限

lineが200人も同時にできるなんてすごいですね!! ( 200人も同時に通話することはないと思いますが..... )

リモートサービス一覧

サービス名 url 概要 備考
Netflix Party リンク みんなで動画を同時視聴できるサービス 全員net frixのアカウントが必要
Bord Game Arena リンク オンラインでボードゲームを遊べるサービス 種類が豊富
ズムキャバ リンク zoomで楽しめるキャバクラ セット, 指名料, 延長料だけで楽しめる

他にも調べていくと色々ありそうですね。

以上、初投稿でした。