JavaScript関連のことを調べてみた2019年10月31日

Highcharts : データラベルのふちどりを消す

## データラベルがデフォで縁取られる


Highchartsの円グラフにデータラベル（グラフ内へ項目名）を配置したら、テキストが縁取られるのがうすらダサいので対処した。

ちなみにこの状態のコードは以下。

“`javascript
Highcharts.chart(‘pie1’, {
chart: {
type: ‘pie’
},
title: {
text: ”
},
tooltip: {
pointFormat: ‘{point.percentage:.1f}%‘
},
plotOptions: {
pie: {
cursor: ‘pointer’,
data

JavaScript（メソッド/オーバーライド）

#メソッド

インスタンスの動作（のようなもの）を**「メソッド」**と呼ぶ。

「名前」や「年齢」などの情報はプロパティで追加したのに対して、
メソッドは「挨拶をする」「値を計算する」などの処理のまとまりを表す。

メソッドはクラスの中で定義する。
書き方:`メソッド名() { }`

メソッドは関数と似たようなもので、中括弧「{ }」の中にそのメソッドで行いたい処理を記述する。

“`js

//例
class クラス名 {
constructor(){
・・・・・・・
}
メソッド名(){
行いたい処理
}
}
“`

メソッドは、そのクラスから生成したインスタンスに対して呼び出す。
具体的には、以下の図のように「インスタンス.メソッド名()」とすることでそのメソッドを呼び出し、処理を実行することができる。

“`js

//例
class Animal{
constructor(name,age){
・・・・・・・
}
greet(){
console.log(“こんにちは！”)
}
}

const animal = new Animal(

cradle.js (0.7.1) が動かなかった話

cradle使おうとしたんです。
[node.jsから驚くほど簡単に使えるNoSQLサーバ Couchbase(CouchDB)を試す!](http://wise9.jp/archives/4291)

を参考に、expressのバージョンが上がってるからちょこちょこ修正しつつ、さてDB編集だと言った時にこんなエラーが。

“`
C:\home\minori\program\js\app4\node_modules\cradle\lib\cradle.js:316
if (! o.__lookupGetter__(attr)) {
^

TypeError: o.__lookupGetter__ is not a function
at C:\home\minori\program\js\app4\node_modules\cradle\lib\cradle.js:316:21
at Array.forEach ()
at C:\home\minori\program\js\

しゃべるYOLO作って見た！blogspotを開くだけ。

YOLOに音声発生を接続してみた。
https://randomwalkjapan.blogspot.com/2019/10/aiai-tells-you-what-she-sees.html

テキストに音声がついただけなのに、見ていると、防犯、視覚障害支援など、いろいろな想像が湧いてくるのは不思議だ。

GitHubは次のリンクです。

https://github.com/tanakayutaka/YOLO-that-speaks/blob/master/index.html

問題点としては、iOS（ipadなど）Safariでは、videoと同時に利用するせいだとおもうけれど、音声がでない。今、回避策を調査中。

Linked YOLO to speechSynthesis. Simple but now YOLO started to look like real. Also surprized that this simple change made me to have more concrete imagination on application such as

JavaScriptでTodoリストを作ったときの不明点まとめ

[JavaScriptでTodoリストを作ろう!](https://qiita.com/__init__/items/d1c59c87808fc180c871)を見ながら製作した際に調べたことのまとめです。(JavaScriptのみ)

# document.querySelector()

cssセレクターでHTML要素を取得する。

“`javascript
let home = document.querySelector(a.home);
“`
でclass=”home”をもつaタグ要素を取得する。
ただしclass=”home”をもつaタグ要素が複数ある場合には最初の１つだけを取得する。
すべて取得したい場合には`querySelectorAll( )`を使う。

“`javascript
let home = document.querySelectorAll(a.home);
“`

# アロー関数の省略記法
アロー関数は引数が1つだけのとき( )を省略できる。
たとえば

“`
(　引数　) => {　処理　};
“`

は次の

ゲームをつくる：どのヘックスをタッチしたか判定する

#この記事は、
ヘックスマップが好きな筆者が、最近スマホでイケてるヘックスSLGが無いので自分で作る奮闘記です。

# この記事のまとめ
タッチしたヘックスの判定は、

– ざっくり計算する。エッジケースの誤判定が発生する
– 誤判定の発生を三角形の比から検出する
– 誤判定を修正する

という形で実現しました。

## 今回目指すもの

タッチしたら、それぞれのヘックスの座標、例えば5,5とか6,4とかが取得できること。

## ヘックス描画の前提
タッチ位置検出は、ヘックスの描画方法から逆算して判定します。
まずは、ざっくりおさらい。下の赤い三角形の各辺の長さから、ヘックスを描画しています。
ゲームをつくる：CocosCreator v2.x でタッチ位置を検出する

#この記事は、
大戦略好きが、最近スマホでイケてるヘックス・ターン制SLGが無いので自分で作る奮闘記です。

# この記事のまとめ
– Cocos Creator v2.xのTouch Eventはスクリーン座標なので
– CameraでWorld座標に変換した後
– 該当NodeでNode座標に変換して判定する

## Cocos Creator v2.x のタッチイベント
基本的に、cc.Nodeに用意されているイベントコールバック用のメソッドを使います。

“`javascript:
node.on(cc.Node.EventType.TOUCH_START, callback, this);
“`
イベントが発生すると、callbackが呼ばれます。
最後のthisは、callbackが呼ばれた際のターゲットの指定。省略可。

今回はヘックスマップがあるSLGを作る予定です。なのでどのヘックスにタッチされたか検出する必要があります。
すべてのヘックスにそれぞれイベントを貼るのは処理が重くなりそうで嫌なので、ゲーム全体をカバーするタッチ検出用の大きなnodeを作って、状況に

JavaScriptでRedmineのワークフローの設定で対角線にチェックを入れる方法

# 初めに

[Ankosoft](https://www.ankosoft.co.jp)の山崎です。
redmine.tokyo の[第17回勉強会](https://redmine.tokyo/projects/shinared/wiki/第17回勉強会)まで後3日と迫っていますので、少しでもRedmineを盛り上げられればと思い、Redmineの改善のお話をしたいと思います。

Redmineで管理者権限があるユーザーが「ワークフロー」ページの「ステータスの遷移」タブで、各ロールごとに、各トラッカーごとに、ワークフローを設定することができます。

ステータスの種別が多い場合、一つ一つのチェックボックスをクリックするのは、相当な回数ボタンをクリックする必要があります。
下図は15行かける14列なので、全部で最大210のチェックボックスをオン、オフする必要があります。
手動で全てのチェックボックスをオン、オフするのは効率が良くないため、Redmineでは「現在のステータス」のレ点の部分をクリックすることによりワンクリックで簡単に全部の項目の一斉オンオフができます。

![alt](h

エンジニアスタンプラリー～フロントエンド編＃15

## 企画主旨
[Frontend Developer Roadmap](https://roadmap.sh/frontend)をひたすら巡回する企画
詳しくは[こちら](https://qiita.com/tonchan1216/items/8d5f072cf769dfe1bc4f)

## 今回の実施内容
デスクトップアプリ

## Desktop Applications

#### Electron
[ようこそ！Electron入門](https://qiita.com/umamichi/items/6ce4f46c1458e89c4cfc)を参考にさせていただいた。
main.jsの参照先として、いままでReactをビルドしたファイル([v12](https://github.com/tonchan1216/WDR-frontend/tree/v12))を指定する。

“`javascript:main.js
const electron = require(‘electron’);
const app = electron.app;
const BrowserWind

VueアプリをReactアプリに変換するツールを作ってみた

理由はともかく、
まず`convertVueToReact`ツールの動きがよくわかるGIFを用意しました。


## なぜこんなことができるのか？

気づいている人もいると思いますが、ReactもVueも、内部にDOMの表象を持っているからです。DOMの表象というのは、DOMの構造とまったく同じ構造を持っている、単純なオブジェクトです。実際にコンソールで、Vueの`app`インスタンスにある`_vnode`プロパティを調べてみると、DOMに関する情報がわかります。


Reactは、`R

vue-routerチートシート

関連:
– [Vue.jsチートシート(基礎編)](https://qiita.com/morrr/items/289b6e7ac82e969a7a58)
– [Vue.jsチートシート(コンポーネントと構成編)](https://qiita.com/morrr/items/2642135a927d6a3e7584)

Vueチートシートに引き続き公式チュートリアルの抜粋です。

参考
————————————————————
– [公式](https://router.vuejs.org/ja/)

概要
————————————————————
– vue-router = Vue.jsにおける公式のルータ
– SPAのためのページルーティング機能を提供する

– 公式によると以下を特徴としている:

> – ネストされたルート/ビューマッピング
> – モジュール式、コンポーネントベースのルー

Nuxt.jsチートシート

関連:
– [Vue.jsチートシート(基礎編)](https://qiita.com/morrr/items/289b6e7ac82e969a7a58)
– [Vue.jsチートシート(コンポーネントと構成編)](https://qiita.com/morrr/items/2642135a927d6a3e7584)

Vueチートシートに引き続き公式チュートリアルの抜粋です。

参照
————————————————————
– [Nuxt.js日本語公式](https://ja.nuxtjs.org)
– [ガイド](https://ja.nuxtjs.org/guide)

概要
————————————————————
– Nuxt.js = Vue.jsおよびそのプラグインに基づくサーバサイドフレームワーク
– NuxtはVue.js, vue-router, vuex, Vue Server Ren

Vue.jsチートシート(コンポーネントと構成編)

関連: [Vue.jsチートシート(基礎編)](https://qiita.com/morrr/items/289b6e7ac82e969a7a58)

基礎編に引き続き、公式チュートリアルからの抜粋です。

参照
————————————————————
– [Vue.js公式](https://jp.vuejs.org/)
– [ガイド](https://jp.vuejs.org/v2/guide/)
– [APIリファレンス](https://jp.vuejs.org/v2/api/)

コンポーネント
————————————————————
### 前提
– コンポーネント = VueにおけるUIの単位
– W3CによるWeb Componentsの概念に影響されている
– コンポーネントはツリー状に配置される

– コンポーネントは再利用可能なVueインスタンスである
–

Vue.jsチートシート(基礎編)

公式チュートリアルからの抜粋になります。
Vueに入門したての人(私)が開発するためのカンペなので、これからVueを学習したい方は公式のほうを読まれることをおすすめします。

つづき: [Vue.jsチートシート(コンポーネントと構成編)](https://qiita.com/morrr/items/2642135a927d6a3e7584)

参照
————————————————————
– [Vue.js公式](https://jp.vuejs.org/)
– [ガイド](https://jp.vuejs.org/v2/guide/)
– [APIリファレンス](https://jp.vuejs.org/v2/api/)

概要
————————————————————
– Vue = Webフロントエンドフレームワーク
– Progressive Framework = 非モノリシックな作りで少

年末まで毎日webサイトを作り続ける大学生 〜12日目 オブジェクト指向に触れる〜

##はじめに
初めまして。
年末まで毎日webサイトを作っている者です。
今日もMDNを見て勉強していたんですが、とうとう中級編に突入しました。
そして出ましたオブジェクト指向！
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は12日目。(2019/10/30)
よろしくお願いします。

##サイトURL
https://sin2cos21.github.io/day12.html

##やったこと
テキスト入力欄に名前と趣味を書いたら、内部でオブジェクトを作って反応するようにしました。
作り方だけ学んで実装したので、もしかしたら、オブジェクトの使い方間違っている可能性がありますがご了承ください。

では動作から↓


内部はこうなっています↓

“`javascript