- 1. v-ifで同一のコンポーネントの表示を切り替えた時にcreatedが発火しない問題とその解決
- 2. A-FRAME: 物理演算でボーリングっぽい動きを実現してみる７（ピンのモデル）
- 3. ZEIT Nowで静的サイトの速度を15倍改善した話
- 4. UIをきちんと考えた実装 – モーダルダイアログ (モーダルウィンドウ)
- 5. JavaScriptの基本文法
- 6. HTML フォームの部品をまとめてみる（JavaScriptでの関連処理も）
- 7. エンジニアスタンプラリー～フロントエンド編＃16
- 8. ChromeならiPadでコンソール出力を確認できる
- 9. Axiosの前処理でAPIレスポンスのスネークケースをキャメルケースに変換する
- 10. Phina.jsテキストのスクロール実装について
- 11. vue2-leafletの使い方、GeoJsonデータの表示・操作など
- 12. 【初心者チャレンジ】BMIを計算する Herokuで実装
- 13. [FULL STATIC] Nuxt generate
- 14. Primitives vs Objects
- 15. 競馬の回収率、ディープラーニングを使わなくても100%をいくらでも超えられる
- 16. Vuetifyのv-messagesのmin-heightを0pxにしたい
- 17. Android Chrome/78.0.3904.108 にて起こっているpreload問題とその暫定的対応
- 18. Emacs 26.3 で vue-mode の js パートのインデントが効かなくなる件の対処法
- 19. 01. 「パタトクカシーー」
- 20. jQueryで顔認識機能を実装できる「jQuery Face Detection Plugin」を試してみた
v-ifで同一のコンポーネントの表示を切り替えた時にcreatedが発火しない問題とその解決
たぶんすごい基礎中の基礎なんだろうけど、結構詰まったので。
## どういうことか
こんなコンポーネントがあるとする。
渡したvalueを表示するだけのコンポーネント“`vuejs:TestComponent.vue
{{ value }}
“`こんな感じで利用する
“`vuejs:Main.vue
A-FRAME: 物理演算でボーリングっぽい動きを実現してみる７（ピンのモデル）
A-Frameをつかって物理演算ができるようにしてみます。
前回、ピンの物理的な形状を設定し、sphereとcylinderにおいて中心の不一致が見られました。今回は利用するモデルによって差があるのかどうかを確認してみます。
### 例１）pin1
以前から利用しているモデルです。
[demo](https://k38.github.io/aframe/physics-system/pin_model_1.html)
中心がずれてます。### 例２）pin2
これまでとは別のモデルを試してみます。
[deZEIT Nowで静的サイトの速度を15倍改善した話
# はじめに
[公開されているコンテナの脆弱性をまとめるサイト](https://qiita.com/tomoyamachi/items/e0e69da521505e73237b)を運用しています。
https://containers.goodwith.tech/サイトのホストには、当初Netlifyを利用していて、ファイルサイズの大きいデータがある場合、データのダウンロードにとても時間がかかっていたのですが、ためしにZEIT Nowを利用したところ、劇的に速
UIをきちんと考えた実装 – モーダルダイアログ (モーダルウィンドウ)
Webサイトやアプリなどのソフトウェア開発において、ユーザーのアクション・操作に対して何らかのレスポンスを返す、という相互的なUIを実装する機会があります。
こうしたUIに対し見た目先行で仕組み・機能への理解が足りないのか、疑問符のつく使われ方を見ることが割とあります。デザイナーであっても開発実装者であっても、**そのUIの原型がどういった目的や仕様で生み出されたものなのかを調べる**などして、適用前に一度問い直してみることは大事かなと思います。
## モーダルダイアログ (モーダルウィンドウ)とは？
なかでもよく誤用されるパーツの例として、今回は「モーダルダイアログ(モーダルウィンドウ)」を取り上げます。以下が大まかなモーダルダイアログの基本仕様です。
1. アクションを実行すると**画面最前面にウィンドウが現れ、選択肢を選ぶ、文字入力する、閉じるなど何かの操作をユーザーにさせる**
2. 別ウィンドウが表示され操作が終わるまでの間、**操作の起点となった画面(背景または親画面)は操作を受け付けない**「モーダルウィンドウ」での検索ボリュームのほうが大きいのですが「モーダ
JavaScriptの基本文法
#はじめに
この記事は、2019/11/1からプログラミング学習を始めた学生がプロのプログラマーになるまでのアウトプットする為の書き込みの場である。
#JavaScriptを呼び出そう
HTMLのコード中にJavaScriptのコードを記入しJavaScriptを呼び出す
##基本文法
– 出力 console.log
– 変数 変数の前にvarを入れる
– 変数 変数を宣言する場合、前にletとconstを入れる必要があります。1
– letは、後で書き換えることのできる変数宣言
– constは、後で書き換えることのできない変数宣言
– 条件分岐
– 条件式は()でくくる必要がある
– Ifの終わりに{}で囲む必要がある
– rubyでは、elsifであるが、else ifと記入する
– 関数
– rubyの場合、関数の前にdefがつきますが、jsの場合、functionと記入する##今日の感想 明日から
インプットをする機関を取りすぎてしまいアウトプットする時間が作る事ができHTML フォームの部品をまとめてみる（JavaScriptでの関連処理も）
#概要
Jsの学習を進める中で、フォームの部品に関しても学習する機会があったので、この際軽くまとめてみようと思う。本当に軽くね。#テキスト
“`text.html
“`
“`text.js
//テキストの値を取得
$(“#text”).val();
//テキストのvalueの設定
$(“#text”).val(“設定値”);
“`
#チェックボックス
“`check.html
“`
– 複数の部品のname属性に同じ値を設定すると、１つのグループを作れる。
– 「checked」を設定することで最初からチェックされている状態になる。“`check.js
//チェックエンジニアスタンプラリー～フロントエンド編＃16
## 企画主旨
[Frontend Developer Roadmap](https://roadmap.sh/frontend)をひたすら巡回する企画
詳しくは[こちら](https://qiita.com/tonchan1216/items/8d5f072cf769dfe1bc4f)## 今回の実施内容
モバイルアプリ## Desktop Applications
#### Electron
[Getting Started](https://facebook.github.io/react-native/docs/getting-started)を参考に導入及び環境構築を実施。
今まで作成してきたデザインや機能をそのまま移植する。“`tsx:App.tsx
import React from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;
import Form from ‘./Form’
import List from ‘./List’
import Bottom from ‘.ChromeならiPadでコンソール出力を確認できる
Chrome for iOSがv.74からjavascriptのコンソールのログ出力に対応していました。
# 使い方
通常のChromeのように開発者ツールを開くのではなく、アドレスバーに chrome://inspect と入力してアクセスすると以下のページが表示されます。
“ログ記録を開始”ボタンを押して、他のタブでページを開くとこのページにログが記載されていきます。
: boolean => Object.prototype.toString.call(target).slice(8, -1)
.toLowerCase() === ‘object’;const convertSnakeToCamel = (target: any): void => {
if (Array.isArray(target)) {
target.forEach((t) => cPhina.jsテキストのスクロール実装について
* Phina.jsのテキストスクロールについて
* Phina.jsを使用してアプリ開発をしていたところテキストのスクロールが必要な場面に遭遇したのですが
ネットで調べてもそれらしい記事が少なかったこととライブラリのコードを調べたときに実装途中のコードが
見つかりどうやら機能自体はあるようですがまだ未実装なようなのでそれを自分用に改良した
コードを役に立つかどうかは分かりませんが掲載しようと思います。（勘違いだったらすみません）
テキストのスクロール自体はLabelAreaクラスの要素scrollYのパラメータをいじることで可能なようです。以下コード
“`java:
//シーンクラス内で
this.group = DisplayElement().addChildTo(this);
var self = this;
this.labelArea = LabelArea({
text: “スクロール”,
width: 5vue2-leafletの使い方、GeoJsonデータの表示・操作など
## はじめに
ウェブ上で簡単に地図を表示する人気ライブラリ「Leaflet.js」をVue.js環境でお手軽に使えるラッパーライブラリ「vue2-leaflet」を5日くらい色々いじって得た知見を本記事にまとめます。いじった結果のゴール地点は以下の画像のようなウェブアプリケーションです。①地図エリアに.geojsonファイルをドラッグドロップすると地図上に地物を表示、②読み込んだGeoJsonレイヤを一覧表示、③地物をクリックするとその地物の属性をすべて表示、という以上の三機能をVue.jsの特性を活かし実装しました。本記事ではvue2-leafletの導入・実装と、機能①に焦点を絞って解説したいと思います。
## 環境
– npm 6.12.0【初心者チャレンジ】BMIを計算する Herokuで実装
##axios と javascript を使ってサイトをHerokuで実装
今週はHerokuを使ってサイトの実装をしてみたいと思います。
##参考資料
[【資料１】【喉頭がんの治療プロトコルをNode.jsでVueに表示しHerokuにデプロイ](https://qiita.com/doikatsuyuki/items/c332cda6a0c96d345631)
##環境
Node.js v10.16.3
Windows 10 pro
Visual Studio Code v1.39.1##概要
フォルダを作成し、中に ＞node_modules：node.jsのデータが入っているフォルダ
＞public：htmlデータを入れるフォルダ
＞index.html:サイトを[FULL STATIC] Nuxt generate<4つのアプローチまとめ>
最近ContentfulとNetlify、Nuxt.jsを利用してブログを立ち上げました。
ヘッドレスCMSとNuxt generateで静的なサイトを！と思ったのですが、実際にはクライアントからのアクセスのたびにContentfulへの通信が発生していました。
理由は明らかです。
asyncDataでContentfulからのデータ取得処理を行っているからです。サーバー側だけでなく、クライアント側でも再度取得処理が実行されてしまっているのですね…。Contentfulの記事更新時にNetlify上で generate⇒デプロイ まで自動で行うように設定しているので、記事は常に最新です。クライアントが新着問い合わせを行う必要はありません。「不要なアクセスがあるのは気持ち悪いな〜」と思って調べてみました。
# この記
Primitives vs Objects
#What is the difference between primitives and objects?###
Variables holding primitives actually holds the value of the primitive inside the variable.
Variables associated to an object doesn’t hold the object but holds a reference to where the object is stored. It points to the object.
“`JavaScript
// Primitives
var a = 23;
var b = a;
a = 46;
console.log(a); // 46
console.log(b); // 23// Objects
var obj1 = {
name: ‘John’,
age: 26
};// New object is not created but rather a new refere
競馬の回収率、ディープラーニングを使わなくても100%をいくらでも超えられる
煽ってすみません。まぁ後出しでいいんだったらですが。
例えば、今年の 11/24 までの、種牡馬、馬主、調教師、騎手別の単勝の配当を集計して、出走数＞100、回収率＞100、勝率＞10% で抜き出して回収率の高い順に並べたのが以下の表です。
データは JRA-VAN のデータを使っています。（残念ながら有料ですが、1ヶ月は無料期間があるようです）
データを以下のアプリを使って mongodb に落としたあと、javascript で集計しています。[jv2mongo](https://jra-van.jp/dlb/sft/lib/jv2mongo.html)
無料です。私作です。手前味噌ですみません（汗；
ちなみに1カラム目の意味は以下のとおりです。
* hn は種牡馬
* bn は馬主
* ch は調教師
* ks は騎手
Vuetifyのv-messagesのmin-heightを0pxにしたい
#背景
– エラー文言とかを入れるdivがvuetify使うとデフォルトでついてくる
– デフォルトはmin-height 12pxだからレイアウトが結構崩れるので0pxにしたい# 解決
– deep selectorで解決“`javascript
“`
# 参考
– https://stackoverflow.com/questions/50985783/vuetify-css-not-working-taking-effect-inside-componentAndroid Chrome/78.0.3904.108 にて起こっているpreload問題とその暫定的対応
## 何が起こっているのか
– [AndroidのChrome 78のPreload問題](https://qiita.com/m_kumamomi/items/3b01bf0336d30f84f4b5)
内容は上記の記事を見てもらうとすごくわかりやすくまとめてくれています。（同僚さんの記事です）
おそらく、ページ内の行動履歴？に関係する関連の高いaタグのhrefの中身を「自動で」preloadしてしまっているという問題## で、フロントとしてどうしたのか
まず、被害の大きい箇所、ページを調べて“`
a href=”/hogehoge/bar”
“`
を“`
span data-href=”/hogehoge/bar”
“`
という風に書き換えた上で、あとはJS側でdata-hrefの中身をclickでlocation.hrefに入れて飛ばす方法で暫定対応。
それか“`
a data-href=”/hogehoge/bar”
“`
という風にして、load時にdata-hrefの中身を抜き取ってhrefに入れるとかでも行けそうな。## 雑感
ひとまずEmacs 26.3 で vue-mode の js パートのインデントが効かなくなる件の対処法
`syntax-ppss-table` に何かが設定されているのが原因のようで、Issueにあった次の設定を追加したら直りました。
“`el
(setq mmm-js-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))
(setq mmm-typescript-mode-enter-hook (lambda () (setq syntax-ppss-table nil)))
“`# 参照
Indentation problems in \
