abyt

フロントのメモ帳

abyt

フロントのメモ帳

マガジン

  • Vue.js/Nuxt.js

  • フロントエンド

  • Ruby/Rails

記事一覧

removeEventListener

bind(this)でイベントを追加した場合、removeできない現象を書きコードで解決した。 export default class WebGL { init(){ this.resize = this.resize.bind(th…

abyt
3年前

ノイズ周り

GLSL には(バージョンにもよる)ノイズを生成してくれるビルトイン関数は無い。自前で実装しないといけない。 ノイズとは ものすごくざっくり言うと乱数のこと。乱数に…

abyt
4年前

WebGLノート2

サインは、円周軌道上の縦の移動量、すなわち Y を求めるのに使える。 コサインは、円周軌道上の横の移動量、すなわち X を求めるのに使える。 GLSL の世界では(他の一般…

abyt
4年前

WebGLノート

大まかな流れ ・Javascriptでシェーダのソースコードを読み込み、シェーダオブジェクトを生成する。そのシェーダオブジェクトをプログラムオブジェクトとリンクさせる。 ・…

abyt
4年前

Nuxt.js ページスクロール時に要素にclass付与

ページスクロールしてフェードしながら要素を出したいときなどに使う公式ドキュメントにも書いてあるので、そこが一番参考になる。 plugins/scroll.js (v-scroll=""を使え…

abyt
5年前
1

Nuxt.js ページ遷移時の処理

ページ遷移時のタイミングで処理をしたいpluginでページ遷移時の処理を書き、nuxt.config.jsで読み込む方法がある。 例. plugins/routerOption.js export default async (…

abyt
5年前
2

Nuxt.configについて

head内にgoogle tag managerなどのscriptを挿入するhead:{ script:[ { innerHTML: "ここにscript内記述" } ], __dangerouslyDisableSanitizers: ['script']}…

abyt
5年前
2

ruby/rails ノートその3 form_forについて

<%= form_for(@user) do |f| %> 例えばユーザ登録のさい form_forをこのように記述していた。 paramsを参照するためのキーになり、第二引数でpostのurlを指定。 @userと省…

abyt
5年前
1

ruby/rails ノートその2

_pathと_urlの違い_urlはhttpからの出力になり、_pathは相対パスになる。 リダイレクトする際は_urlを使い、それ以外は_pathとかくと良い。 Railsの規則。 render とはren…

abyt
5年前

ruby/rails ノートその1

配列から最初の3つをeachで出力a = ["test1","test2","test3","test4"] 3.times.each do |i| puts a[i]end classのsuperメソッド小クラスではsuperメソッドが使える。 …

abyt
5年前
1

Vue cliからの環境設定

Nuxtを使わないVue-cliからの環境設定のメモ。 プロジェクト生成vue init webpack my-project 途中選択肢は好みで。 今回yarnを選択。 Routerの調整 別ページ作成impor…

abyt
5年前

MySQL コマンド

Cloud9上で作業する際のメモ 起動sudo service mysqld start 停止sudo service mysqld stop 起動状態確認sudo service mysqld status DB接続mysql -u root

abyt
5年前

Nuxt.js ルーティング(nuxt-linkによる動的切り替え)

ルーティングの定義pagesフォルダがこのような構成だった場合、 pages/--| index.vue--| projects/----| index.vue----| _id.vue 以下のようにルーティングが定義される…

abyt
5年前
6

Ruby + MySQL セキリュティ

input入力から<script></script>などの入力を受け付けないようにし、 htmlタグが文字列に変換される。 ERB::Util.html_escape(...) また、ユーザーから入力されたデータ…

abyt
5年前

Ruby Classについて 1

attr_accessorクラス内で変数を定義するためのメソッド。 引数に与えられたシンボルがクラス内の変数として定義される。 attr_accessor :name, :type, :date #こちらが一

abyt
5年前

Nuxt.js プロジェクト作成手順とフォルダの種類

プロジェクト作成vue init nuxt-community/starter-template my-app パッケージのインストールcd my-appyarn #パッケージのインストールyarn dev #サーバー起動 ディレク…

abyt
5年前
3

removeEventListener

bind(this)でイベントを追加した場合、removeできない現象を書きコードで解決した。

export default class WebGL { init(){ this.resize = this.resize.bind(this) window.addEventListener("resize",this.resize) } resize

もっとみる

ノイズ周り

GLSL には(バージョンにもよる)ノイズを生成してくれるビルトイン関数は無い。自前で実装しないといけない。

ノイズとは

ものすごくざっくり言うと乱数のこと。乱数にも品質の善し悪しがあるシェーダでは速度と品質のバランスを見て使い分けfract sin noise は結構偏った結果になる。step 関数は一定より小さいかどうか、を判定できる関数

一定より小さいと判定された場合に 1.0 を返す

もっとみる

WebGLノート2

サインは、円周軌道上の縦の移動量、すなわち Y を求めるのに使える。
コサインは、円周軌道上の横の移動量、すなわち X を求めるのに使える。

GLSL の世界では(他の一般的なプログラミング言語と同様に)、角度はラジアンという単位で扱う。
円の一周を 360 度のような度数で考えるのではなく、円の一周を 2 パイで考えるのがラジアンの考え方。

頂点シェーダは頂点の座標変換が主な役割
座標変換と

もっとみる

WebGLノート

大まかな流れ
・Javascriptでシェーダのソースコードを読み込み、シェーダオブジェクトを生成する。そのシェーダオブジェクトをプログラムオブジェクトとリンクさせる。
・プログラムオブジェクトがCPUとGPUの橋渡しな存在になってくれる
・ようやくあとはGLSLを書いて描画していく

これらを全て生WebGLでやろうとするとかなりコードを書く必要があり面倒なので、多くの人はthree.jsやpi

もっとみる

Nuxt.js ページスクロール時に要素にclass付与

ページスクロールしてフェードしながら要素を出したいときなどに使う公式ドキュメントにも書いてあるので、そこが一番参考になる。

plugins/scroll.js (v-scroll=""を使えるようにする。)

import Vue from 'vue'Vue.directive('scroll', { inserted: function (el, binding) { let

もっとみる

Nuxt.js ページ遷移時の処理

ページ遷移時のタイミングで処理をしたいpluginでページ遷移時の処理を書き、nuxt.config.jsで読み込む方法がある。
例. plugins/routerOption.js

export default async ({ app,store }) => { app.router.afterEach((to, from) => { let page_name; pag

もっとみる

Nuxt.configについて

head内にgoogle tag managerなどのscriptを挿入するhead:{ script:[ { innerHTML: "ここにscript内記述" } ], __dangerouslyDisableSanitizers: ['script']}

generate先フォルダを変えるgenerate:{ dir: "hoge/test" }

loca

もっとみる

ruby/rails ノートその3 form_forについて

<%= form_for(@user) do |f| %>

例えばユーザ登録のさい form_forをこのように記述していた。
paramsを参照するためのキーになり、第二引数でpostのurlを指定。
@userと省略して書かなければ

<%= form_for(:user, uri: users_path) do |f| %>

とも書ける。
省略できるのはUserモデルが存在するから。

もっとみる

ruby/rails ノートその2

_pathと_urlの違い_urlはhttpからの出力になり、_pathは相対パスになる。
リダイレクトする際は_urlを使い、それ以外は_pathとかくと良い。
Railsの規則。

render とはrender :new とはそのコントーラーに対応するviewを表示する。
例えば、users_controllerにこのrenderが書いてあれば、views/users/new.html.er

もっとみる

ruby/rails ノートその1

配列から最初の3つをeachで出力a = ["test1","test2","test3","test4"] 3.times.each do |i| puts a[i]end

classのsuperメソッド小クラスではsuperメソッドが使える。
superは親クラスのメソッドを呼び出せる。

class A def hoge puts "aiueo" end def hoge2 put

もっとみる

Vue cliからの環境設定

Nuxtを使わないVue-cliからの環境設定のメモ。

プロジェクト生成vue init webpack my-project

途中選択肢は好みで。 今回yarnを選択。

Routerの調整 別ページ作成import Vue from 'vue'import Router from 'vue-router'import Meta from "vue-meta"import HelloWorl

もっとみる

MySQL コマンド

Cloud9上で作業する際のメモ

起動sudo service mysqld start

停止sudo service mysqld stop

起動状態確認sudo service mysqld status

DB接続mysql -u root

Nuxt.js ルーティング(nuxt-linkによる動的切り替え)

ルーティングの定義pagesフォルダがこのような構成だった場合、

pages/--| index.vue--| projects/----| index.vue----| _id.vue

以下のようにルーティングが定義される。

router: { routes: [ { name: 'index', path: '/', component: 'pages/ind

もっとみる

Ruby + MySQL セキリュティ

input入力から<script></script>などの入力を受け付けないようにし、
htmlタグが文字列に変換される。

ERB::Util.html_escape(...)

また、ユーザーから入力されたデータを直接SQL文に含めるのは危険。
例として、

book_title = params['book_title']statement = client.prepare('INSERT

もっとみる

Ruby Classについて 1

attr_accessorクラス内で変数を定義するためのメソッド。
引数に与えられたシンボルがクラス内の変数として定義される。

attr_accessor :name, :type, :date #こちらが一般的attr_accessor (:name, :type, :date) #こういう書き方と同じ意味

これらのインスタンス変数として定義され、実際には@name、@type、@dateとし

もっとみる

Nuxt.js プロジェクト作成手順とフォルダの種類

プロジェクト作成vue init nuxt-community/starter-template my-app

パッケージのインストールcd my-appyarn #パッケージのインストールyarn dev #サーバー起動

ディレクトリ構造assets
画像、css(scss)、Javascriptの管理。
webpackでコンパイルなどしたいファイルを置く。

components
Vueコ

もっとみる