Growiの編集時に自動でslack通知ボックスにチェックを入れる

# 前提
・SlackとGrowiの連携はすませてある。
・使用者が通知ボックスにチェックを入れる習慣がないが、一方でページの編集・作製は通知したい。

# すでにある取り組み
https://qiita.com/ymm1x/items/15278f6ef1794b718955
https://qiita.com/nao-guitarist/items/82ed2ed7cb2e9eacd08a

# なぜ改めて記事を書いた？
* Growiの仕様変更により要素の指定先が変わっている。（これだけなら編集リクエストすれば良いのだけど）
* Qiitaに記事を初めて書いてみたかった。（そのついでにという感じ）
* Growiの記事もっと欲しかった。（ささやかなあがき）

# 結論
管理者アカウントでログイン後、カスタムスリプト内に以下を書く。

“`JavaScript:admin/customize
function slackPostTrue() {
document.querySelector(‘div label input’).closest(‘label’).click()

jsでオセロゲーム作成

##二次元配列

“`js
// 初期画面起動時
var turn = 0 //ターン目　1：黒、‐1：白
var ban_ar = new Array(8) //ここで要素数が8の配列にする
for (var x = 0; x < ban_ar.length; x++){ ban_ar[x]=new Array(8) } ``` 盤面の状況を二次元配列で定義する。 まずはArrayオブジェクトで```bar_ar```の要素を8つ作る。 それからfor文でban_ar[0~7]の要素に8つの要素を作ることで8×8の64個の要素を作る事が出来る。 これをconsoleで出力すると  となる >解説参考

JavaScriptで多次元配列を扱う

Arry

オセロゲーム作成の下準備

##大まかな処理
スタート画面
白黒の順番にターンを繰り返していく
何らかの形で決着がつく（64マス埋まる・どちらかが0になる）

##各ステップでの細かな処理
###スタート画面
縦横8の64マスを作る
中央4マスに白黒の石を2枚を置く
どちらかから始まる

###白黒の順番でひっくり返す
####まずそのターンを実行できるか？（置ける場所があるか？）
#####ある場合
クリックしたマス
石がないか？
ターン側の石が置けるか？

を確認してそれで置けるなら画面に反映させる
#####ない場合
相手にターンを渡す

###ゲームの続行は可能か？
#####可能な場合
相手にターンを渡す

#####不可能な場合
勝敗のポップアップを表示する

WebフォントのFOUT問題・Web Vitals対策を検証してみた

# いろんな意味での良いWebフォント表示方法

:link: [オリジナルページはこちら](https://www.northdetail.co.jp/blog/1324/)

弊社サイトでは3種類のWebフォント(font-weight的には8タイプ)を使用しております。
**【’Noto+Sans+JP:400,700′, ‘Noto+Sans:400,700’, ‘Raleway:200,400,500,700’】**
全てライセンスフリーの Google Fonts です。
Googleさん！ありがとう！！
ひじょうに助かります。お世話になっております。足を向けて寝られません！

その Google のエラい人が、来年あたりに検索結果に反映させると明言している **` Web Vitals `** ^※1 対策と、画面表示の際に **` 一瞬チラつく `** ^※2 問題を解消するためには、Webフォントをどのように実装するのがベストなのかを検証してみました。

優先順位はありませんがイイ感じに折り合いが付くように、検証と調整を行う前提

【JavaScript】コールバック関数の型【メモ】

## 第一引数と第二引数の値を処理する関数

“`JavaScript
function doSomething(a, b, callback) {
const result = callback(a, b)
console.log(result)
}
// 掛け算をする関数
function multiply(a, b) {
return a * b
}
// 足し算をする関数
function plus(a, b) {
return a + b
}
// …

// doSomething関数を実行すると、第一引数の2と第二引数の2を掛け算し、4が出力される
doSomething(2, 2, multiply)

// 第3引数にplusを入れた場合は、2+3が実行され、5が出力される
doSomething(2, 3, plus)
“`
## 思ったこと
最初に、今回でいう「doSomething()」のような関数を用意しておくことで、後々に別の機能（例えば引き算させる関数「minus」など）を追加する際に、記述量が少なく済み、可読性も上がると感じました

Vue歴5日でポートフォリオサイトを作成する 2

[前回](https://qiita.com/grinch1252/items/19786b370754f0911af0)からの続きです。

[完成したポートフォリオサイト](https://condescending-hodgkin-24c144.netlify.app/#/)

ここから本格的にポートフォリオサイトの作成に着手していきます。

#使用したライブラリ

###vue-smooth-scroll
スムーススクロールを手軽に実装できるライブラリです。どうやらsmoothscrollとsmooth-scrollの二つがあるみたいなのですが、今回はスクロールの位置を調整できるsmooth-scrollを採用しております。(smoothscrollの方でも位置調整は出来るのかもしれませんが)

“`
$ npm install –save vue-smooth-scroll
“`

“`main.js
import vueSmoothScroll from ‘vue-smooth-scroll’

Vue.use(vueSmoothScroll)

[PlayCanvas] Buttonの入力イベント(修正)

# はじめに
PlayCanvasにはクリックやタップなどの入力に反応してイベントを発火させる事が出来るButtonというものがあります。
これには**Hover**, **Pressed**, **Inactive**という項目があり、それぞれ未入力時、押下時、非活性時のボタンのビジュアルが設定できます。
[基本的な実装方法](https://qiita.com/yushimatenjin/items/3479ee3fd7aa712cbefe)は割愛しますが、これにより以下のようなものが実装できます。

# 本題
先の動画には問題があり、Blackと書かれたボタンは非活性状態にしているものなのですが、動作しています。
非活性にしているということは本来動作してほしくない部分のハズです。

想定している動作はこのようになります↓
![demo_2.

三点リーダーを❤に置換するJavaScript

TLに流れてきたので。

“`js:replace.js
function rplc(){
h=[…’❤’][0];
document.body.innerHTML = document.body.innerHTML.replace(/…/gi, h);
}
rplc();
“`

Unicode絵文字だからすんなり行けるかと思ったけど、「❤」を出力するのは一手間いる感じだった。

おまけ。
ブックマークレット

“`js:中身
javascript:{function r(){h=[…’❤’][0];document.body.innerHTML=document.body.innerHTML.replace(/…/gi, h);};r();}
“`

JavaScriptでジャイロセンサー（方向センサー）つかって遊んでみた

ジャイロセンサ使ってみた。色々遊べそう。
（※センサを搭載していないデバイスで閲覧している場合、何も面白くないものが表示されていると思います。）

センサを搭載してても、Qiita記事への埋め込みだとセンサが取れないっぽい。
codepenのサイトから直接閲覧する必要あり。

See the Pen JavaScript勉強日記＃１

①確認ダイアログボックスの表示

・目的：下記のダイアログボックスを表示する
https://gyazo.com/3da5a0c50544d85af25c1c7cd4adce3b
https://gyazo.com/f9808943633140799071c34fea626e74

“`index.html

“`
`window.confirm(‘message’)`で表示できた。
alertメソッドとの違いはT/Fでリターンを返してくる事。

②テキストを持ったダイアログを表示
・目的：下記のダイアログの表示
https://gyazo.com/c24d08dedc4a761b0f2faea00317ae3e
https://gyazo.com/67b10557bbb964c2fbcf729

【JavaScript ~カウントダウンタイマー応用~】勉強メモ14

JavaScriptちゃんと学習中。
今回はカウントダウンタイマーの応用です。
残り時間が刻一刻と変化する実装をします。
ほぼ自分の勉強メモです。
過度な期待はしないでください。

前回の記事を参照の元作成してます。
必要が有れば参照下さい。
[【JavaScript ~カウントダウンタイマーの作成~】勉強メモ13](https://qiita.com/k-yasuhiro/items/7e7afa7f04a2d860be5a)

完成図
–

実装手順
–
– 残り時間を再計算をする関数を作成
– その関数を1秒ごとに繰り返す為の関数を作成

前回迄のコード
–

“`.js:JavaScript
‘use strict’;

function countdown(set) {
const now = new Date();

const rest = set.getTime() – now.getTime

ドラクエ５の結婚イベントを考える

結婚する相手毎にメッセージを変更する。

“`ruby:index.html.rb

“`

コードの内容は`window.confirm()とwindow.alert()、条件式if(){}`だけなのでとてもシンプルです。
ドラ○エらしくYes/Noで作りたかったのでこの形を取りました。
`windows.prompt()`を使えばもっと短く表現できるのであとで

Udemy フルスタック・Webエンジニア講座　セクション5.jQuery

jQueryとは

jQueryとは、JavaScriptで作成されたライブラリで、JavaScriptの書き方などを簡単にすることが出来る。実際、私がJavascriptを勉強した後にjQueryを学習してみると、Javascriptよりコードを書く量が少なく、簡単に書くことが出来た。

clickの使い方

**click**のメソッドは、要素をクリックすることでイベントを呼び出すことが出来る。

“`javascript:test.js
$(“#circle”).click(function(){
alert(“円がクリックされました！”);
});
“`
上のようなコードを書くと、円(“#circle”)をクリックすることで『円がクリックされました！』というアラート(alert)を呼び出すことが出来る。

“`javascript:test.js
$(“#circle”).click(function(){
$(“#circle”).fadeOut(“slow”);
});

Vue歴5日でポートフォリオサイトを作成する 1

JavaScriptはRailsでアプリを作成する際に数行しか書いたことがありませんでしたが、Vueを触り始めて5日ほどで簡単なポートフォリオサイトなら作成することが出来ました。その過程について書いていきます。

[私のポートフォリオサイト](https://condescending-hodgkin-24c144.netlify.app/#/)

#事前準備
手始めにVueで開発する為に必要なものをインストールしていきます。

コマンドラインインタフェースをインストールします。

“`
$ npm install -g @vue/cli
“`

次にプロジェクトを作成します。今回はリファレンスの多さからVue2で書いています。

“`
$ vue create my_portfolio
“`

プロジェクトの作成が完了した後、一旦立ち上げてみます。

“`
$ cd my-portfolio
$ npm run serve
“`

以下のメッセージが表示されましたら、localhost:8080にアクセスします。

“`
Your application is run

配列内の文字列を置換する

#配列内の文字列を置換したい

userNameをたけしくんにする覚えがきです

“`index.js
const array = [“userNameくんかっこいいよね”,”userNameくんどこに住んでるの” ,”userNameくん乳首透けてるよ”]
“`

“` index.js
//配列を展開
array.forEach((text) => {
//指定した文字列が入っているか判断する(userName)
const stringInUserName = text.includes(“userName”);
if (stringInUserName) {
　　//tureならuserNameをたけしくんにする
text = text.replace(“userName”, “たけし”);
}
return text;
});
“`

“`index.js
たけしんくんかっこいいよね　たけしくんどこにすんでるの　たけしくん乳首透けてるよ
“`

以上

Nuxt.js、Firebase、axiosでパパッと掲示板！

#この記事の概要
超簡単な掲示板アプリをパパっと作成します。
細かいことはいいからとりあえずNuxt.jsで何かアプリを作ってみたいという方にオススメです。

以前[書いた記事](https://qiita.com/higa08/items/7aa43e1579d9f12918bb)のNuxtバージョンです。

#目標物


#開発環境
・macOS Catalina 10.15.7
・@nuxt/cli v2.14.7
・npm 6.9.0
・node v10.16.0

# 前提
・nuxtのプロジェクトが作成済み。
・firebaseのプロジェクトを作成済み。
・Cloud FirestoreのDBを作成済み。

# axiosの導入
プロジェクト直下で`npm add @nuxtjs/axios `を実行

“`:ターミナル
プロジェクト名＄　npm add @nuxtjs/axios
“`

**nuxt.config.js**に以下の様に記述

Javascript再び

前回の復習も兼ねてまた始めてみようと思う。
憎きjavascriptに復讐。

#出力とコメント
出力って。いちいち言葉が難しい。私は「何らかのデータ（結果）を表示すること」と解釈した。

##出力の種類
– window.alert（）
– document.write（）
– innerHTMLプロパティ
– console.log

console.logから馴染んでいこうと思う

###コメントアウトのやり方
– 1行のコメントは「//」 `//1行コメントをここに書く`
– 複数行のコメントアウトの場合ははじめに`/*開始～終わり*/`を記載します。（cssと同じだね！

（コメントアウトって、チーム内でのコードの役割や使い方のメモの他に、自分用でも内容整理のために使っていくと良いと思った。

#デバッグについて

console.logを使用したデバッグを使う方法で行っていく（Googleが提供しているChrome Developer Toolsを利用）

#演習
“`js
//文字列”りんご”を出力
console.log(“りんご”);

//割り算の結果
cons

TypeScriptの基本的な型

# 参考
[超TypeScript入門 完全パック(2020)](https://www.youtube.com/watch?v=F9vzRz6jyRk&t=28s)
→非常に分かりやすいです。ありがとうございます。

# Typescript 型についてのメモ
udemyの講座より学んだTypeScriptの型に関するメモになります。
初学者故に意味を履き違えている箇所がある可能性があります。
お気づきになられた方はお手数ですがご指摘いただけると幸いです。

個人的にJavaやC#をかじった経験があるので、TypeScriptの書き方は
非常に馴染みやすく、スッと頭に入りました。
Java、C#のご経験のある方は一度触れてみてはいかがでしょうか！

## boolean

“`typescript
let hasValue: boolean = true;
“`
（因みに）
変数名をマウスホバーすることで、どの型で設定されたかがわかる。

—
## number
numberで整数、負数、不動小数すべてを表現

“`typescript
let count: numbe

続・「シューティングゲームの当たり判定をQRコード読み取りでやってみた」やつをスマホで使えるようにした。

#スマホでシューティングゲーム

スマホで使えるようになった！！#protoout pic.twitter.com/XojNglWjiI

— sawa (@sawakoshi_yy) November 24, 2020

#まずは前回の記

prettierの使い方とコーディングルールの登録

# prettier

コードの整形ができるツール。ESLintと併用でき、ESLintよりも整形力にすぐれている。

## install

“`
npm i prettier
// ESLintと併用 + Googleのcoding rule
npm i prettier-eslint prettier-eslint-cli eslint-config-google
“`

## setting

登録したいルールを下記のように記述する。

“`js
// .prettierrc.js ( new file )

module.exports = {
singleQuote: true,
semi: false,
}
“`

packageも書き加える。

“`js
// package.json

“scripts”: {
“format”: “prettier –write ‘src/**/*.{js,json,md,html,ts}'” // +
}
“`

また、ESLintの設定もできる。

“`js
// eslintrc.json ( ne