<![CDATA[Cloud CIRCUS Dev Blog]]> https://dev.startialab.blog/ Tue, 16 Aug 2022 04:55:34 +0900 Tue, 24 May 2022 09:11:42 +0900 CMS Blue Monkey http://blogs.law.harvard.edu/tech/rss <![CDATA[【CSS】三点リーダーで文章を省略して表示]]> https://dev.startialab.blog/css/a190
目次

はじめに

今回は、3点リーダーでの文章の省略をCSSで実装したいと思います!

実装

■方法1

こちらは、最も単純な方法です。要素の幅に対してはみ出した行の扱いを指定しています。
```
.sample_class {
  width: 300px; //幅を指定
  overflow: hidden; //はみ出したテキストを非表示に
  text-overflow: ellipsis; //三点リーダーで表示
  white-space: no-wrap //自動改行をしない
}
```

■方法2

こちらは、複数行目以降を省略したい場合の方法です。下記は、3行目以降を省略する実装例です。
```
.sample_class{
  display: -webkit-box; //要素の折り返しを指定。flexと同義だが、古いios等対策
  -webkit-box-orient: vertical; //子要素を縦方向に積み重ね
  -webkit-line-clamp: 3; //省略の行数を指定
  overflow: hidden; //はみ出したテキストを非表示に
}
```

■フォントについて

実装していく中で、三点リーダーを行の下部に表示したいのにも関わらず、真ん中に表示されてしまう現象に遭遇しました。
調べてみると、どうやらfont-familyに指定されているフォントによるもののようです。
こちらを変更すると影響範囲が大きすぎるため、今回はそのままにしておきました。
下記参考記事です。
https://www.koikikukan.com/archives/2013/02/27-012345.php

終わりに

三点リーダーは複数の実装方法がありますが、対応する予定のブラウザ・フォント等考慮して選択する必要がありそうです。]]>
Tue, 24 May 2022 09:11:42 +0900
<![CDATA[オフィス出社の特徴10選!]]> https://dev.startialab.blog/uncategorized/a225 こんにちは!

二筒です。

春は花粉症で睡眠不足です…

 

今回は私が思うオフィス出社の特徴

(クラウドサーカス福岡オフィスの場合です)

 

特徴10選

・仕事に集中しやすい

・出社している社員の方と話せる

・美味しいご飯屋がたくさん

・椅子が良い

・ウォーターサーバーがある

・通勤ついでに運動できる

・ディスプレイ常備

・出社時間を自分で決められる

・マスク着用

・交通費支給

 

 

仕事に集中しやすい

個人差があると思いますが、

私は断然出社した方が集中できます。

 

出社している社員の方と話せる

リモートワークを続けていると、

直接人と話す機会がほとんどありません。

 

話すことが好きな人にとって

仕事の休み中にちょっとした世間話は

楽しくて、心が休まります。

 

美味しいご飯屋がたくさん

福岡は本当にご飯が安くて美味しいです。

オフィス近くだけでかなりの数があります。

 

 

椅子が良い

おそらくコレ使ってます!

https://www.office-com.jp/products/detail.php?product_id=171525&gclid=Cj0KCQjw_4-SBhCgARIsAAlegrXsHdG4PH-9DvICYmodoN0oFpR5oTq-SuuQORxIkKUxuFFUZq1ceG0aAuopEALw_wcB#

 

ウォーターサーバーがある

水を飲めます。

私はプロテイン溶かして飲んでます。

 

 

通勤ついでに運動できる

通勤の時だけでも歩くことで

運動不足を少しでも解消できます。

 

しかし、満員電車や天候に

気をつけなければなりません。

 

 

ディスプレイ常備

オフィスはフリーデスク形式です!

 

 

出社時間を自分で決められる

8:00~17:00

9:00~18:00

10:00~19:00

から選ぶことが可能です。

 

昼休みは基本12:00~13:00です。

 

マスク着用

基本的にマスクをつけてます。

 

交通費支給

自宅からオフィスまでの交通手段を

申請することで交通費を支給して頂くことができます。

(電車のみ)

]]>
Mon, 23 May 2022 11:26:02 +0900
<![CDATA[発表勉強会!!二筒の発表方法]]> https://dev.startialab.blog/uncategorized/a224 こんにちは!二筒です。

最近になってテトリス99にハマっています(笑)


テトリスを99人同時対戦形式にするなんて

考えた人は天才ですね

 

 

 

今回は、先月2月16日に行われた

発表勉強会」の報告

 

 

私が思う

・発表のポイント

・資料作成方法

などもまとめてありますので

ぜひ読んでみてください!

 

 

 

発表勉強会

 

クラウドサーカス株式会社は

福岡県の博多オフィスの他に

飯塚オフィスがあります。

 

 

飯塚オフィスでは、

私の卒業した九州工業大学の学生が

アルバイトスタッフとして勤務しています。

(絶賛募集中!!!)

 

 

 今回、そのアルバイトの学生に

「先輩としてプレゼン発表をしてほしい」

とお声がけ頂き、

発表勉強会が開かれる事になりました。

 

  

内容は

e-ZUKAスマートフォンアプリコンテストで

発表した「麻雀支援アプリ」

 

 

 

最初に私が約5分間の発表を行い、

学生のみんながアプリや発表に関する

質疑を行い知見を高める形式でした。

 

参加してくださった

学生や上司の方々から

多くの質問を頂けました。

 

発表に興味を持って頂け

本当に嬉しい限りです。

 

 

質問の中で多かった

発表のコツや発表資料について

私のポイントをまとめてみました。

 

 

発表のポイント

 

私は発表する時

・伝わりやすい順序

・伝えたいポイント

を意識して資料作成・発表をしています。

 

 

 

伝わりやすい順序

 

今回私は

 

・背景(課題)

・現状の解決策

・課題

・提案する解決策

・実現方法と内容

・まとめ

 

の順で発表しました。

実は大学の研究発表でも、

私はこのような順序で発表します。

 

 

まず背景があって、

みんなが困っている課題があります。

 

そして大抵の課題は

既に誰かが解決しようとしている事がほとんどです。

 

ポイント1


その既に実施されている解決策をしっかりと調べます。

(研究で言う「論文サーベイ」)

 


調べると必ず

【未解決な課題】【新たに生まれた課題】

などが見つかります。



 

その見つけた課題に対して

自分が考えた解決策を発表で提案しましょう。

 

ポイント2


提案する解決策は、

オリジナル(新規)性】が必須です。

 

ここで、既に実施されている解決策を提案してはいけません。

 


「それ、〇〇で良いのでは?」

「〇〇のサービスとの違いはありますか?」

などと言われないよう要注意です。

 

 

反対に、

どんなに馬鹿げた内容でも

誰も提案したことないような解決策を

出せればあなたの勝ちです!



 

99人対戦のテトリスなんて

まさに良い例だと思います(笑)

 

 

そして解決策の実現方法を紹介しましょう。

ポイント3


実現方法は具体的に!

 

本当に、課題を解決できるかを

ここで明確に説明する必要があります。

 


アプリ開発なら、どのような手法・技術を使うのか

理由を含めてしっかりと説明できると良いです。

 


そして、写真や動画、グラフなどを使うと

説得力が増します!

 


 

最後は、

提案した解決策により解決できた事を
まとめて発表はおしまいです。

 

 

発表資料は当たり前ですが

見やすい資料を作成しましょう。

 


とりあえず、

伝えたい内容を全て作成し

重要性や時間に合わせて

添削すると作りやすいです。

 

 

そして、伝えたい内容を

色を変えるなどして

しっかり強調させましょう!

 

おすすめは高橋メソッドです。

https://www.slideshare.net/fujimotta1/ss-14746432

 

 

研究発表だと、

私は1枚のスライドに情報を詰め込み

説明している間に読んで理解できるように

作成しています。



 

口頭だけでは、内容が伝わらないからです。

言語が違えばなおさら。

 

 

 

まとめ

 

私の個人的な発表ポイントですが、

参考にして頂ければ幸いです。

 

資料が作成できれば

あとは練習あるのみ!

「発表時間は絶対に守りましょう!」

 


 

辿々しくなっても大丈夫!

伝えたいという思いや話し方は

原稿丸暗記よりも確実に相手に届きます。

 


 

大学のサークル内や

研究室で共有会などで

ぜひ練習してみましょう!

]]>
Thu, 21 Apr 2022 09:37:09 +0900
<![CDATA[EC2初期設定 よく使うコマンド (証明書期限確認)]]> https://dev.startialab.blog/linux/a158 証明書期限確認 openssl コマンド

# openssl x509 -noout -dates -in /etc/pki/tls/certs/cert.pem;

notBefore=Sep 14 08:40:18 2020 GMT

notAfter=Dec 13 08:40:17 2029 GMT

etc  [ˌet ˈsetərə; ˌɪt ˈsetərə]  详细X
基本翻译
abbr. 等等,及其他 (et cetera)
网络释义
ETC: 电子不停车收费(Electronic Toll Collection)
Car Life etc: 车联网业务
]]>
Fri, 25 Mar 2022 18:29:15 +0900
<![CDATA[EC2初期設定 よく使うコマンド (証明書内容確認)]]> https://dev.startialab.blog/linux/a157 証明書ファイルの内容を確認

# openssl x509 -text -noout -in /[FilePath]/[CertFile]

秘密鍵ファイルの内容を確認

# openssl rsa -text -noout -in /[FilePath]/[KeyFile]

CSRファイルの内容を確認

# openssl req -text -noout -in /[FilePath]/[CSRFile]
]]>
Thu, 17 Mar 2022 10:07:04 +0900
<![CDATA[リッチテキストエディタ【Quill】を導入してみた。]]> https://dev.startialab.blog/javascript/a180 はじめに 弊社では社内ツールに各メンバーの
プロフィールを見られるWebアプリケーションがあります。

固いツールではなく、各々がプロフィール写真や自己紹介を登録できます!
個性が出るので見ていて楽しいものになっています😊

今回、自己紹介文の中でより知ってもらいたいポイントを強調できるように
リッチテキストエディタを導入しようと考えました。

1番お伝えしたいことはページ下部にありますので
最後までご覧ください!

導入方法

主に
  1. CDN
  2. 公式からダウンロード
  3. NPMでインストール


我々はVue.jsを使用しているので3.を用いました。

具体的な導入方法は

と、
過去の私の投稿

にお任せしようと思います😃

導入したら


私は今回、以下のようにオプションをセットしました。

```
editorOption: {
    theme: 'snow',
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],
            ['blockquote', 'code-block'],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            ['clean']
        ]
    },
    placeholder: '自己紹介を入力してください。',
}
```

するとこんな見た目で表示されます!

lab-mem-quill-editor.png


Quillの導入はここまで。

もう1点大事なのは、
保存したリッチテキストが正しくプロフィール画面で表示されることですね!!

ここでハマった


自分のプロフィール画面を見てみるかと思ったところ、
ほとんど反映されていない!

そこで、
プロフィール画面にQuillのCSSが読み込まれていること → 読み込まれている
プロフィール画面にもQuillを導入しreadonlyにしてみる → これもうまくいかない
をやってみました。

解決方法


これでした!!

```
<div class="ql-snow">
    <div class="ql-editor" v-html="ここに出力"></div>
</div>
```

CSSを適用するには
  1. ql-snow
  2. ql-editor

の順番でクラスをラップしてあげる必要があります。

また、リッチテキストエディタを用いた内容を保存、表示する場合は
クロスサイトスクリプティング対策のサニタイズを忘れないようにしてください!


今回は以上です。
貴方の一助になれば幸いです😄]]>
Wed, 16 Mar 2022 09:11:43 +0900
<![CDATA[【二筒】エンジニア就職に役立った事2選]]> https://dev.startialab.blog/uncategorized/a178
こんにちは!二筒です。


ひな祭りですね!
男三兄弟だった我が家には無縁でしたが(笑)


今回は、私が大学時代にやってきたことを
クラウドサーカスへの就職に
結びつけながらご紹介します!



エンジニアを目指している大学生の方は
ぜひ参考にしてみてください!
(私個人の見解ばかりですが...笑)



やってきた事2選



ハッカソン
アプリコンテスト参加


ハッカソン



ハッカソンとは、2,3日の間に
決められたテーマをもとに
アプリを開発・発表を行うイベントです。


大学時代に数回参加しました。
参加した当時は、
開発能力はほとんどありませんでした。



しかし、
周りのレベルの高さ
アプリの完成度などを見て


自分も開発技術を伸ばしたい!
受賞して結果を残したい!
アプリ開発を仕事にしたい!

と思うようになりました。


アプリコンテスト



大学院1年の時、ハッカソンとは違い
長期間で実施されるアプリコンテストに参加しました。


参加したのは
「e-ZUKAスマートフォンアプリコンテスト」
「チャレキャラ」


e-ZUKAスマートフォンアプリコンテスト


毎年福岡県飯塚市で開催される
アプリコンテストの全国大会。


企画から開発、当日発表で約一ヶ月。
友人たちと企画書を書いてエントリーし、
麻雀支援アプリを開発しました。




チャレキャラ


九州の学生のための育成型アプリコンテスト。


大学院の同期とチームを組み
約半年かけてサブスク管理アプリを開発しました。



長期の開発のため、
スケジュール決めやタスク管理など
ハッカソンとは違い
技術以外の能力も必要でした。


就活



これらの経験・コンテストで頂いた功績は、
就職活動に大きく役立ちました。




クラウドサーカス株式会社での採用面接や
就活イベントである「逆求人」などの場で


・自分が開発したアプリの目的や実現方法
・チーム開発での自分の担当
など自分がやってきた事をしっかりと話す事ができました。




まとめ




エンジニアは、やってきた事を
しっかり論理立てて話す事が重要です。



私の研究室の教授は、
志望動機」と「在学中に何をやってきたか
死ぬほど練習しろと教えてくださりました。



おかげで、今こうして
クラウドサーカス株式会社で働く事ができております。
皆様もぜひ参考にしてみてください!




エンジニアを目指している方は、
ぜひ一度開発イベントに参加してみると
一気に世界が広がります!



福岡でイベントに参加するなら...
ハックツハッカソン : https://hackz.team/news?tag=Event
e-ZUKAスマートフォンアプリコンテスト:http://e-zuka.info/2021/
チャレキャラ:https://challecara.org/




もしくは、大学での研究を一生懸命取り組んでみてください!
なぜこのようなテーマにしたのか
なぜこのような手法を選択したのか
などをしっかりと論理立てて説明する事ができれば大丈夫です!

]]>
Wed, 09 Mar 2022 09:58:16 +0900
<![CDATA[二筒が思う「大学時代にやっておくべき事」]]> https://dev.startialab.blog/uncategorized/a177

こんにちは!
最近、「卒業確定!」という呟きを見て
もうすぐ今年度が終わるんだなと実感しております。
卒論・修論発表お疲れ様です!




今回は、二筒が思う
大学時代にやっておくべき事
をご紹介します。



「大学生の方々」
(範囲が広いですが笑)

ぜひ読んでみてください!





やるべき事2選



長期間かけてできる事をする
徹夜で〇〇


長期間かけてできる事をする



1番はこれです。
大学時代が1番長い休みがあります。

社会人になったら1ヶ月単位の休みはありません。
有給などを駆使して作ったとしても
同じような休みの友人はまずいません。
(1日予定を合わせるだけで一苦労です...)


日本一周

システム開発

学園祭準備

長期アルバイト・インターンなど


何もせずダラダラとした生活ができるのも
大学時代だけです。
(中学・高校は部活に受験勉強と忙しいですからね)



どう過ごすのか
費用はいくらか
誰と一緒にするのかなど
しっかり考えて長期休みを有意義に!




●やりたい仕事
●新たな趣味
●一生の友達
などぜひ見つけてください!


私は、
半年かけて友人とアプリ開発
学生限定の開発イベントやLT会に参加
友人たちと温泉巡りやキャンプ
委員会活動などをやってました。






徹夜で〇〇



「長期間かけてできる事をする」
の延長になります。



社会人になったら徹夜なんてできません!
仕事に支障をきたします。
会社や周りの人に迷惑をかける事になりかねません。



徹夜で友人たちと
・課題や勉強をしたり

・アプリ開発したり

・ゲーム等で遊んだり



不健康な日々を過ごせる
最後のチャンスです。
(就職前までには辞めましょう。)




おすすめは、
友人とハッカソン参加!
1日でテーマに沿ったアプリを
チーム開発するイベントです。


エンジニアを目指す人は
ぜひ一度参加して見てください!


株式会社Hack'z
↑ 九州内の大学に在学している方々におすすめ





まとめ



以上2選です。


要は、
大学時代にしかできない事を
精一杯やっておきましょう!
という事です。


社会人になってからでも
しっかり休んで遊ぶことはできますが、
恐らく1番に元気に自由に過ごせる
最後のチャンスです!
決して後悔のないように!





]]>
Fri, 04 Mar 2022 10:57:08 +0900
<![CDATA[【二筒】最初の1ヶ月]]> https://dev.startialab.blog/companyInfo/a175
こんにちは!
お久しぶりです。二筒です。
最近、スギ花粉が飛んで自分も被害甚大です...



今回は、私が新卒入社して過ごした
最初の1ヶ月をご紹介します。




「新卒として入社する予定のある方」
「クラウドサーカス株式会社に興味のある方」
はぜひ読んでみてください。


入社式

2021年4月1日に東京オフィスへ
そして入社式に出席。




入社式では、入社後の意気込みを語りました。
(恥ずかしかった...)




入社式後は、新人研修です。
エンジニア採用である私は、4月2日まででした。
(同期とのお別れも早いだと...)


福岡帰還

同期とお別れし、1人福岡へ
4月5日からは、福岡オフィスに出勤です!


まずは新人研修...と思いきや研修はなし!?
なんと福岡オフィスで働く方々のほとんどが中途採用です。
(実務経験豊富で優秀な方々ばかりです!)


そのため決められた研修はありません。
(今後、新入社員が増えると研修ができるかも)


まず初めに、支給されたMacBook Proのセットアップ
そして環境構築です。


MacBook Pro(16-inch, 2019)
2.6GHz 6コアIntel Core i7, 16GB


PhpStorm, Sourcetree, Slackなど
業務に必要なツールのインストール
アカウント作成などを実施

最終的に開発しているプロダクトを立ち上げ
動作確認できるようになれば完了です。

4月の残りは開発に必要な技術の習得に費やします。

技術習得


私の主な使用言語は
・JavaScript (Vue.js)
・PHP (Laravel)
です。


Vue.jsは初めてだったので
プロダクトのコードや技術書を元に勉強。
(重点的に学習すべき内容は上司からアドバイス頂きました。)


ある程度習得できた後は、実戦で慣れろ!
ということでチームに合流。

プロジェクトマネージーの指示のもと
バグ修正や新規機能の追加などを行います。



まとめ


あっという間の4月でした。
勉強だけではVue.jsの技術習得は難しかったです(涙)

わからない事だらけです。
ですが少しずつできることは増えています!
中途で入ってきた先輩方もVue.jsを触るのが初めてで
よく躓いていたそうです。(本当だと信じたい...)


もうすぐ1年、未だにわからない事は多いです。
Web技術の進化も早いです。(Next.jsとは一体...)
これからも業務を通じて日々勉強あるのみです!


]]>
Tue, 01 Mar 2022 13:23:34 +0900
<![CDATA[Pythonでコサイン類似性(Cosine Similarity)計算のまとめ]]> https://dev.startialab.blog/python/a170 scikit-learn ```
from sklearn.metrics.pairwise import cosine_similarity
import numpy as np

a = [2, 15, 3, 25]
b = [5, 25, 8, 28]

array_1 = np.array([a])
array_2 = np.array([b])
cos_sim = cosine_similarity(array_1 , array_2)
print(cos_sim)
# 結果:
# [[0.9753719]]
```

NumPy

```
from numpy import dot
from numpy.linalg import norm

a = [2, 15, 3, 25]
b = [5, 25, 8, 28]

cos_sim = dot(a, b) / (norm(a) * norm(b))
print(cos_sim)
# 結果:
# 0.9753719044721808
```]]>
Tue, 22 Feb 2022 09:29:50 +0900