Cloud CIRCUS Dev Blog

【Three.js】簡単なオブジェクト＋パーティクルを表示

Fri, 26 Aug 2022 14:16:14 +0900

はじめに
実装

はじめに

こんにちは！
今回はTree.jsを使用して簡単なオブジェクトとパーティクルを実装してみました。
学習用のお試しなので悪しからず！

実装

今回はこちらのサイトの実装を参考にさせていただきました。
https://www.mitsue.co.jp/knowledge/blog/frontend/201912/20_0000.html
まず、下記からthree.jsをダウンロードします。
https://threejs.org/

ダウンロードしたら、その中にあるthree.jsというファイルを探し、プロジェクトフォルダに配置しましょう。
同階層に、下記のhtmlファイルを作成します。

index.html

```

```
こちらのcanvasタグにスクリーンが描画されます。
そうしましたら、jsファイルを実装していきましょう。
今回は単純な表示なので、initメソッド内に全て記述していきます。

index.js

```
window.addEventListener('DOMContentLoaded', init);

function init() {

const width = 1500;
const height = 1200;

// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#myCanvas'),
alpha: true,
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
renderer.set

// シーンを作成
const scene = new THREE.Scene();

// カメラを作成
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.set(0, 0, +1000);

const hatMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 })

const hat = new THREE.Mesh(
//円柱のジオメトリー(上面半径,下面半径,高さ,円周分割数)
new THREE.CylinderGeometry(25, 25, 40, 30),
hatMaterial
);
hat.position.set(0, 50, 0); //(x,y,z)

const hat_line = new THREE.Mesh(
new THREE.CylinderGeometry(26, 25, 20, 30),
new THREE.MeshLambertMaterial({ color: 0xe60033 })
);
hat_line.position.set(0, 35, 0);

const hat_collar = new THREE.Mesh(
new THREE.CylinderGeometry(40, 40, 5, 30),
hatMaterial
);
hat_collar.position.set(0, 32, 0);

const whole_hat = new THREE.Group();

whole_hat.add(hat, hat_line, hat_collar);

scene.add(whole_hat);

// 平行光源
const light = new THREE.DirectionalLight(0xFFFFFF);
light.intensity = 20; // 光の強さを倍に
light.position.set(1, 1, 1);
// シーンに追加
scene.add(light);

const ambient = new THREE.AmbientLight(0xf8f8ff, 0.9);
scene.add(ambient);

const geom = new THREE.Geometry(50000, 50000, 50000);

//マテリアル（サイズ・頂点色彩を使うか・色）
const material = new THREE.PointsMaterial({
size: 4, //サイズ
transparent: true,// 透過true
opacity: 0.6, //透過性の数値
vertexColors: true, //頂点色彩を使うか
sizeAttenuation: true,//カメラの奥行きの減退
color: 0x3EDBF0 //色
});

//5000個のランダムな頂点作成
const range = 500;
for (var i = 0; i < 5000; i++) {
//THREE.Vector3(x,y,z)
const particle = new THREE.Vector3(
Math.random() * range - range / 2,
Math.random() * range - range / 2,
Math.random() * range - range / 2);

//頂点をジオメトリに追加
geom.vertices.push(particle);

//頂点の色を追加
const color = new THREE.Color(0xeffffc);
geom.colors.push(color);
}

let cloud = new THREE.Points(geom, material);
cloud.name = "particles";
scene.add(cloud);

let zoom = 1000;

// 初回実行
tick();

function tick() {
requestAnimationFrame(tick);

// 箱を回転させる
whole_hat.rotation.y += 0.01;
whole_hat.rotation.x += 0.01;
whole_hat.rotation.z += 0.01;

cloud.rotation.y += 0.005;
cloud.rotation.x += 0.005;
cloud.rotation.z += 0.005;

zoom -= 1;
camera.position.set(0, 0, +zoom);

if(zoom <= 300) {
zoom = 1000;
}

// レンダリング
renderer.render(scene, camera);
}
}
```
こちらで実装は完了です。
それでは、表示してみましょう！
下記のようになりましたでしょうか？？

思ったより簡単に3Dオブジェクトが実装できたかと思います。

WSL2でDockerを使用する際に発生するパーミッション問題の解決方法

Fri, 26 Aug 2022 14:16:14 +0900

普段Windows環境で開発することがなくハマったポイントです。
WSL2でDockerを使用してRails等の環境を構築し、コンテナ内でファイルを作成するとコンテナ外から上書きできなくなるパーミッション問題が発生します。

解決方法は、WSL2とコンテナのUID、 GIDを合わせることで解消できます。

Dockerfileに以下を追加します。


ARG USERNAME=vscode

ARG USER_UID=1000

ARG USER_GID=$USER_UID



RUN groupadd --gid $USER_GID $USERNAME \

 && useradd --uid $USER_UID --gid $USER_GID -m $USERNAME \

 && apt-get update \

 && apt-get install -y sudo \

 && echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \

 && chmod 0440 /etc/sudoers.d/$USERNAME

↑vscodeというユーザーを追加し、UIDとGIDを1000にしています。
docker compose run する際に-uをオプションを使うか、docker-compose.ymlにUSERを追記して実行ユーザーを指定できます。
これでコンテナ内で作成したファイルを上書きできるようになったはずです。

【JavaScript】ポップアップブロックを回避したい

Fri, 26 Aug 2022 14:15:05 +0900

はじめに
実装

はじめに

こんにちは！
リンクを押下した際に、サーバーとの通信を挟んでから別ウィンドウでページを開きたかったのですが、ポップアップブロックに阻まれてしまい開けませんでした。
今回は、それを回避する実装を記載したいと思います。

実装

当初の実装はこんな感じでした。
```
link_open: function(url) {
  logger.send_log().catch(() => {}).then(() => { //サーバーにログを送信
　 window.open()　//エラーがない場合は遷移
}
}
```
ところが、この実装だとポップアップブロックに阻まれてうまく遷移できませんでした。
原因はサーバーとの通信が挟まれたことにより、window.openがユーザー操作と見なされていないことでした。
ということは、サーバー通信が入る前に事前にwindowをopenしておけばいいわけです。
```
link_open: function(url) {
const targetWindow = window.open() //事前にwindowをopen
  logger.send_log().catch(() => {
  targetWindow.close() //通信に失敗した場合は対象windowを閉じる
})
}
```
こちらで想定の動作になりました。

Docker Composeで構成したRailsをCircleCIで並列テスト

Fri, 26 Aug 2022 14:15:05 +0900

CircleCIの環境変数に次の２つをセットしておく

CACHE_VERSION - キャッシュのバージョン
RAILS_MASTER_KEY - Railsのマスターキー

45行目のParallelisの数を変えることで並列で実行する数を変えることができます。

【Vue.js】nextTickがうまく動作しない

Fri, 26 Aug 2022 14:15:05 +0900

はじめに
実装
終わりに

はじめに

こんにちは！
以前、updatedの中でnextTickを使用し、DOM描画完了後にツールチップを付与する実装をしていたのですが、なぜか一部うまく動作しなかったのでそちらの解決方法を共有したいと思います。

実装

当初、下記の実装でDOM描画完了後にツールチップを付与しようとしましたが、なぜかうまくいきません、、
```
this.$nextTick(() => {
$('[data-rel="tooltip"]').tooltip();
$('[data-rel="tooltip-delete"]').tooltip({template:''});
});
```
念のために$nextTickの内部で対象のエレメントの取得を試みると、生成されていないようでした。
vue.jsの公式ドキュメントによると

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

【訳】
callback を延期し、DOM の更新サイクル後に実行します。DOM 更新を待ち受けるために、いくつかのデータを変更した直後に使用してください。

Vue.js APIリファレンス nextTick

とあるので、使用上はあり得ないはずなのですが、、、
原因不明なので、setTimeOutでツールチップ付与処理を遅らせることで対応しました。
```
this.$nextTick(() => {
setTimeout(function() {
$('[data-rel="tooltip"]').tooltip();
$('[data-rel="tooltip-delete"]').tooltip({template:''});
}, 100);
});
```

終わりに

今回のような事象はあまり報告がないようなので、同じような部分で悩んでいる方の一助になればと思います。
根本的な解決にはなっていないかと思うので、原因分かり次第共有させていただきたいと思います。

Vue.js×CSSの注意点

Fri, 26 Aug 2022 14:15:05 +0900

はじめに
調査

はじめに

こんにちは！
過去、Vue.jsのscopedでハマったことがあったので、その辺りについて調査してみました！
具体的には、特定のコンポーネントのCSSがscopedになっておらず、全体影響がでてしまい、その原因究明にかなり時間がかかってしまいました、、

調査

参考

Vueでcss書く時に意識していること
https://qiita.com/kitanote/items/87d99c7e066a1d7b8103
【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件
https://qiita.com/mascii/items/3202b9e18fd4a7366ac1
Vue.jsのScoped CSSがいかにしてスコープを実現しているのか検証してみた
https://qiita.com/mascii/items/623d4c97c3f95e6984c0

調べてみると、scoped cssにはいくつかの問題点があるようです。

scoped cssの問題点

・Scoped指定しても子コンポーネントのroot要素にはスタイルが効いてしまう
・Scoped CSS では、グローバルに定義されたclassセレクタが適用されることがあるという落とし穴があり、コンポーネントの外側から影響を受けやすい仕組みとなっている。
・Scoped CSS では親コンポーネントと子コンポーネントで同じclass名を用いると予期せぬ装飾がなされることがあるという落とし穴もある

これらのデメリットを解決する代替手段としてCSS Modulesというものを使用する方法があるらしい、、！
CSS Modulesを指定すると、class名自体を重複しにくいものに自動で変更してくれるため、前述した問題点がかなり起きにくいようです。

CSSセレクター・XPathの使い分けって？

Fri, 26 Aug 2022 14:15:05 +0900

セレクター・XPathってしってますか？
セレクターとは

セレクターの簡単な取得・検証方法

じゃあXPathとは？

じゃあXPathも取得方法行ってみましょう

セレクター・XPathってしってますか？

Webのシステムやサイト構成でいつかは意識しないといけない（気がしている）
セレクターはご存じでしょうか。
CSSのみならずJSからデザインや動きをつけるためにDOM構造などはみなさん意識されているのではないかな？と思います。

セレクターとは

こんな時は参考サイト！(っ'-')╮=͟͟͞͞　ブォン
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors

ざっくり言うとCSSのスタイルを適用するための条件式です。
しかし私は主にJavascriptで要素を特定するために利用していたりします。
・nameが「lastname」っていうINPUTを特定したい
・チェックが入っているcheckboxを検出したい！
こういう時にセレクターから検索することが可能ですφ(･ω･ )

セレクターの簡単な取得・検証方法

では実際にサイトではどんな要素にどんなセレクタが設定されているんでしょうか？
Chromeの検証ツールでは簡単にセレクターの取得が可能です。

① まずは検証ツールを表示！検索したい要素の上で、右クリック⇨検証　で表示可能です！
② 右クリックすると「要素」タブを選択しましょう！
③ この要素の上で右クリック⇨コピー⇨selector をコピー

これでセレクターの取得が可能です。
例えば：
#fSearch　・・・　こんな感じデータが取得された場合、IDが付与されているのでIDが取得できました。
.ClassName ・・・　こんな感じで「.」が先頭についている場合はクラス名が付与されていたのでクラスを取得しています。
さらに、こう言った値が取得できた場合は…
> #id_test> section.function_area > ul > li:nth-child(2) > div
これは擬似クラスと呼ばれるものです。色々な種類がありますが、選択した要素がIDやNAMEで一発で特定できない場合、
こう言った順番で取得が可能です。

Chromeでセレクタを取得しましたが、Chromeの検証ツールでは逆に「要素」タブを選択したまま
”Ctrl+F”でセレクタの文字列を検索することも可能です。

じゃあXPathとは？

XPathは（私だけかもしれませんが）Webではセレクターよりかは少しとっつきにくいイメージがあります。
例えばXMLファイルなどのツリー構造になっているものを指定できます。
HTMLファイルもツリー構造になっているので、XPathによって目的の要素を指定することが可能です。

セレクタとの違いは、要素のテキストで指定できる！複数条件の指定が可能！などセレクタよりも少しだけ自由が利きやすいです。
例えば、
グーグルのリンクだよ
こういった要素に対して、セレクタでは a[href="http://google.co.jp"] こう言った属性を使った指定は可能です。
しかし「グーグルのリンクだよってなってるAタグを探したいんだよ」と言う時にはセレクタでは不可能です。
（できるんでしょうか…見つからないだけかもですが…）
XPathでは、//a[text()='グーグルのリンクだよ']　こんな感じで要素の特定が可能です。

じゃあXPathも取得方法行ってみましょう

① まずは検証ツールを表示！検索したい要素の上で、右クリック⇨検証！
② 右クリックすると「要素」タブを選択しましょう！
③ この要素の上で右クリック⇨コピー⇨XPathをコピー

ほとんどセレクターと同じです。検索も同じ方法で可能です。

セレクタとXPathについては簡単ですが以上です。
次は実際にこう言った値を使って何をしたいの？どう言うことに使うと便利なの？というところを
ご紹介できればと思います！

【Node.js】バージョン差分について

Fri, 26 Aug 2022 14:15:05 +0900

初めに
調査

初めに

こんにちは！
過去に、業務の一貫でnpmのアップデート時の影響やバージョン差分について簡単に調べたので、そちらをシェアさせていただきたいと思います。
(ほとんど他の方々の記事のまとめになっていますが、ご了承ください、、)

調査

■Node.js 12→14アップデート時
変更点
https://qiita.com/yoshii0110/items/58ee4b37dea2e3d8e370

不具合
https://dev.classmethod.jp/articles/error-handling-node14-node-sass/
Node-sassが動かなくなるかも？
→node-sassのupdateで対応可能

■node.js 14→15 アップデート時
変更点
https://rightcode.co.jp/blog/become-engineer/major-update-node-js-v15-new-function

注意点
・奇数バージョンはサポートか短い代わりに最新の機能を使用できる(開発版)
→v15はすでにサポート終了している。
・偶数バージョンは安定版なので、長期サポート保証がある(v14だったら2023-04-30まで)
→安定した動作を求めるならこちらを待った方がいいかも

・AWS Lambda はNode.js 14までしか対応していないため、環境と合うか要確認
http://ichitcltk.hustle.ne.jp/gudon2/index.php?pageType=file&id=node_version_number.md

■npmアップデートの注意点やバージョン変更点など
Node.js / npmのアップデートを安全に行うために必要だった設定ファイルまとめ
・https://qiita.com/shibe23/items/a195811cb3810d0354e2
npm v7の主な変更点
・https://blog.watilde.com/2020/10/14/npm-v7%E3%81%AE%E4%B8%BB%E3%81%AA%E5%A4%89%E6%9B%B4%E7%82%B9%E3%81%BE%E3%81%A8%E3%82%81/

【RubyOnRails】send_dataでjsonをダウンロードする

Fri, 26 Aug 2022 14:15:05 +0900

はじめに
実装
終わりに

はじめに

こんにちは！
今回は、railsのsend_dataを使用してjsonファイルをダウンロードできる機能を実装したので、復習として記録しておきたいと思います！

実装

まず、controllerにdownload用のメソッドを用意します。

sample_controller
```
//jsonをダウンロード
def download_json
end
```
用意したメソッドにルーティングもしておきましょう。

routes.rb
```
get 'sample/download_json' => 'sample#download_json'
```

用意できたら、中身を実装してみましょう。
```
require 'json'

def download_json
//jsonを生成 json = JSON.generate({
name: params[:name]
prefecture: params[:prefecture]
})
send_data json, //データを指定
:filename => name + '.json',　//ファイル名を指定
:type => 'application/json', //ファイルタイプを指定
:disposition => 'attachment'　//ダウンロードするように指定
end ```
こちらを実装して
sample/download_json?name=niffy&prefecture=fukuoka
を叩くと、パラメーターを整形したjsonファイルが取ってこれるはずです！
send_dataに関する引数や他の使用法は下記ドキュメントに乗っていますので、参考にしてみてください。
https://railsdoc.com/page/send_data

【RubyOnRails】rakeタスクで完了時にログを出力する

Fri, 26 Aug 2022 14:15:05 +0900

はじめに
実装

はじめに

こんにちは！
業務でrakeタスクを実装した際、実行状況をより分かりやすくしたかったので、ログを出力させてみました。

実装

下記のような実装にしました。
rakeタスクの実行結果をターミナルに出力できているはずです！　
```
Rails.logger = Logger.new($stdout)　//loggerをnewする
begin
~処理~
Rails.logger.info('処理が完了しました!')　//成功の文言を出力
rescue => e
Rails.logger.info('処理が失敗しました。' + e.to_s)　//失敗の文言を出力
end
```