abyt

フロントのメモ帳

abyt

フロントのメモ帳

  • Vue.js/Nuxt.js

  • フロントエンド

  • Ruby/Rails

removeEventListener

bind(this)でイベントを追加した場合、removeできない現象を書きコードで解決した。 export default class WebGL { init(){ this.resize = this.resize.bind(this) window.addEventListener("resize",this.resize) } resize(){ console.log("") } remov

abyt

    • ノイズ周り

      GLSL には（バージョンにもよる）ノイズを生成してくれるビルトイン関数は無い。自前で実装しないといけない。 ノイズとは ものすごくざっくり言うと乱数のこと。乱数にも品質の善し悪しがあるシェーダでは速度と品質のバランスを見て使い分けfract sin noise は結構偏った結果になる。step 関数は一定より小さいかどうか、を判定できる関数 一定より小さいと判定された場合に 1.0 を返す カンマの部分に「小なり記号」を置いて考えるとわかりやすい？ しきい値以下の乱数

      abyt

      • WebGLノート2

        サインは、円周軌道上の縦の移動量、すなわち Y を求めるのに使える。 コサインは、円周軌道上の横の移動量、すなわち X を求めるのに使える。 GLSL の世界では（他の一般的なプログラミング言語と同様に）、角度はラジアンという単位で扱う。 円の一周を 360 度のような度数で考えるのではなく、円の一周を 2 パイで考えるのがラジアンの考え方。 頂点シェーダは頂点の座標変換が主な役割 座標変換といってもカメラやスクリーンが影響する様々なステップがあり複雑で冗長。 それを効率

        abyt

        • WebGLノート

          大まかな流れ ・Javascriptでシェーダのソースコードを読み込み、シェーダオブジェクトを生成する。そのシェーダオブジェクトをプログラムオブジェクトとリンクさせる。 ・プログラムオブジェクトがCPUとGPUの橋渡しな存在になってくれる ・ようやくあとはGLSLを書いて描画していく これらを全て生WebGLでやろうとするとかなりコードを書く必要があり面倒なので、多くの人はthree.jsやpixi.jsなどのライブラリを使用している感じ。 ・イメージ的にはGPUはweb

          abyt

        removeEventListener

        abyt

        マガジン

        • Vue.js/Nuxt.js
          5本
        • フロントエンド
          1本
        • Ruby/Rails
          12本

        記事

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

          ページスクロールしてフェードしながら要素を出したいときなどに使う公式ドキュメントにも書いてあるので、そこが一番参考になる。 plugins/scroll.js (v-scroll=""を使えるようにする。) import Vue from 'vue'Vue.directive('scroll', { inserted: function (el, binding) { let f = function (evt) { if (bindi

          abyt

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

          abyt

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

          ページ遷移時のタイミングで処理をしたいpluginでページ遷移時の処理を書き、nuxt.config.jsで読み込む方法がある。 例. plugins/routerOption.js export default async ({ app,store }) => { app.router.afterEach((to, from) => { let page_name; page_name = to.name; switch(page_name){

          abyt

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

          abyt

          Nuxt.configについて

          head内にgoogle tag managerなどのscriptを挿入するhead:{ script:[ { innerHTML: "ここにscript内記述" } ], __dangerouslyDisableSanitizers: ['script']} generate先フォルダを変えるgenerate:{ dir: "hoge/test" } localhostのパスを変えるrouter:{ base: "/aaa/bbb/"

          abyt

          Nuxt.configについて

          abyt

          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モデルが存在するから。 また、エラーパーシャルを別に用意してformの直下にrenderする手法がある。

          abyt

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

          abyt

          ruby/rails ノートその2

          _pathと_urlの違い_urlはhttpからの出力になり、_pathは相対パスになる。 リダイレクトする際は_urlを使い、それ以外は_pathとかくと良い。 Railsの規則。 render とはrender :new とはそのコントーラーに対応するviewを表示する。 例えば、users_controllerにこのrenderが書いてあれば、views/users/new.html.erbを表示し、sessions_controllerにrender :newが書い

          abyt

          ruby/rails ノートその2

          abyt

          ruby/rails ノートその1

          配列から最初の３つを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 puts "aiueo2" endendclass B < A def hoge

          abyt

          ruby/rails ノートその1

          abyt

          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 HelloWorld from '@/components/HelloWorld'import A

          abyt

          Vue cliからの環境設定

          abyt

          MySQL コマンド

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

          abyt

          MySQL コマンド

          abyt

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

          ルーティングの定義pagesフォルダがこのような構成だった場合、 pages/--| index.vue--| projects/----| index.vue----| _id.vue 以下のようにルーティングが定義される。 router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'projects',

          abyt

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

          abyt

          Ruby + MySQL セキリュティ

          input入力から<script></script>などの入力を受け付けないようにし、 htmlタグが文字列に変換される。 ERB::Util.html_escape(...) また、ユーザーから入力されたデータを直接SQL文に含めるのは危険。 例として、 book_title = params['book_title']statement = client.prepare('INSERT INTO books (book_title) VALUES(?)')state

          abyt

          Ruby + MySQL セキリュティ

          abyt

          Ruby Classについて １

          attr_accessorクラス内で変数を定義するためのメソッド。 引数に与えられたシンボルがクラス内の変数として定義される。 attr_accessor :name, :type, :date #こちらが一般的attr_accessor(:name, :type, :date) #こういう書き方と同じ意味 これらのインスタンス変数として定義され、実際には@name、@type、@dateとして定義されている。 initializeインスタンスを生成する時に最初に呼び出

          abyt

          Ruby Classについて １

          abyt

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

          プロジェクト作成vue init nuxt-community/starter-template my-app パッケージのインストールcd my-appyarn #パッケージのインストールyarn dev #サーバー起動 ディレクトリ構造assets 画像、css(scss)、Javascriptの管理。 webpackでコンパイルなどしたいファイルを置く。 components Vueコンポーネントの管理。 pages ルーティングに対応したコンポーネントの管理。

          abyt

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

          abyt