JavaScriptを使い、multipart/form-dataでファイルをアップロードする

## 概要
JavaScriptを使い、multipart/form-dataでファイルをアップロードする。

## 実装

※書き方が一部Reactになっているので読み替えてください

“`jsx:HTML側

“`

“`javascript:inputタグからファイルが選択された際にデータを格納する部分
handleUpload = e => {
const target = e.target.files[0];
// ファイル選択→キャンセル押下でundefinedがくるのでその対応
if (target === undefined) { return; }
this.data = target; // this.dataはデータを格納する先なら何でも可（thisじゃなくていい）
}
“`

“`javascript:実際にデータをアップロードする部分（handleUpload()が実行されている前提）

Tomcat + WebSocket で 1002 エラー

#結論

WebSocket で 1002エラーが発生するとサーバー側でエラーが発生している可能性が高い。

#経緯

JavaScript に限らないが、WebSocket プログラミングでサーバーから 1002 のエラーコードが返ることがある。

“`javascript

ws.onclose = function(event) {
if (event.wasClean) {
alert(“[close] Connection closed cleanly”);
} else {
console.log(“[close] Connection died ” + event.code + “,” + event.reason);
}
};

“`

“`
[close] Connection died 1002,An unrecoverable IOException occurred so the connection was closed
“`

しかしサーバー側(Tomcat 8.5) のコンソールを見ても何も表示され

【f.attachment_filed】 gem refile 使用時　画像送信ボタン　CSS 変更

#【ゴール】
gemfile ‘refile’ 使用時の画像送信ボタンのレイアウトを変更

#【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

#【実装】
アプリケーション内のGemfile内に以下を記述

“`アプリケーション内.Gemfile
＃refileをインストール
gem “refile”, require: “refile/rails”, github: ‘manfe/refile’
gem “refile-mini_magick”

＃jqueryをインストール
gem ‘bootstrap-sass’, ‘~> 3.3.6’
gem ‘jquery-rails’
“`

gemfileを対象アプリへ認識させます

“`Mac内.terminal
$ bundle install
“`

お好きなviewページで以下を入力(これが画像を送信するボタン)

“`(お好きな.view)

v-ifの描画時のmounted処理をいい感じにしたい

# はじめに
Vue.js では [v-if](https://jp.vuejs.org/v2/guide/conditional.html#v-if) という構文を使うことで条件付きレンダリングをすることができます。

# やりたかったこと
基本的にVue.jsでDOMを直接操作するのはイケてないと思いますが、jqueryでしか作成されていないLibraryを使う際にDOM操作をする必要性が出てきます。[jquery datepicker](https://jqueryui.com/datepicker/)等
`v-if` で宣言したタグの中身のタグに対してDOM操作を描画時に行う際、 その呼び出し元のVue.jsファイルの `mounted()` に書いてもDOMがないので参照エラーにて失敗してしまいます。
なので、`v-if` で宣言しているタグが描画されたタイミング(v-ifの中の式が trueになるタイミング)でDOM操作を実行したいと思いました。

# プロセス
`v-if` で宣言されているタグは vue.js インスタンスとして生成されます(あっているか不安なので指摘

vue-cliで作成したNetlify Functionsのローカルでの検証環境の注意点

Netlify Functions利用することで、サーバーレスアプリケーションを構築できる。JavaScriptとGoで構築が可能だが、この記事ではJavaScriptのみ説明する。

なおNetlify Functionsは、デフォルトではURLがわかれば、誰でもアクセスできてしまう。アクセスを制限したい場合にはNetlify Identityによる認証などを検討する。

作成したプログラムのテストのときに、プログラムを修正するたびにNetlify環境に適用していては、こまめなテストが難しくなる。そのためNetlify Functionsにはローカル環境でテストをするためのパッケージ(netlify-lambda)が用意されている。このパッケージをインストールすると、ローカル環境でNetlify Functionsが実行できる。

Netlifyのサイトとローカル環境との違いを説明する。

# ポート番号が違うことによるCORS違反

Netlifyのサイトとローカル環境では、webページとファンクションのURLの関係に違いがある。下の表の例のwebページはvue-cliで作成してい

【100行で出来る】在宅でもブレストがしたいので、オンラインホワイトボード（付箋アプリ）を作ろう stayhome-board

エンジニアとしては最近の在宅勤務ブームは割とハッピーですが、ブレストはやっぱりやりにくいなぁという感想です。とはいえ、出社してしまうと感染リスクもあるので、ブレストもオンラインで出来た方が人類のためになりそうだったので、作ってみました。（色々オンラインコラボレーションツールはありますが、モダンなフロント技術でサクッと作れないかなぁと思って試したところ、思った以上にオンライン付箋アプリを作るのは簡単だったので、作り方をシェアできればと思って書いてます。本当のオンラインホワイトボードにするには、もうちょっと修行が必要そうでした・・・）

## ぬるぬる動く、成果物
– デモ： https://stayhome-board.firebaseapp.com/demo (デモページは予告なく消すかもしれません。)
– コード： https://github.com/TsuyoshiNumano/stayhome-board

![result.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26095/45b8c

Node.jsのマルチプラットフォームなボット開発フレームワークBottenderの紹介とLINE Botの実装例

# Bottenderとは

BottenderはNode.jsのボット開発フレームワークです。以下のような機能を提供してくれます。

– 以下のプラットフォームに対応
– messanger、whatsapp、line、slack、telegram、viber
– 宣言的なAPI
– テンプレートの作成
– Ngrokで開発用のローカルサーバーを外部に公開
– ホットリロード
– セッション管理
– コンソールでのテスト

ドキュメント: https://bottender.js.org/docs/en/getting-started

# 始め方

“`sh
$ npx create-bottender-app {$APP_NAME}
# yarnの場合
$ yarn create bottender-app {$APP_NAME}
# TypeScriptを使いたい場合
$ yarn create bottender-app –typescript {$APP_NAME}
“`

すると以下のようにどのプラットフォームのBotを作成するか、どこにセッションを保持す

TypeScriptでキャンセル可能なsetTimeOut()関数を作る

## はじめに
TypeScriptを書いていてキャンセル可能なsetTimeOut関数が欲しいなと思ったので書きました。もっといい書き方があれば教えていただきたいです！！

## 実装
他にもいくつか方法はあると思いますが、今回は引数に遅延時間(duration)とコールバック関数を渡すと、実行開始の関数とキャンセル用の関数が帰ってくるような仕組みにしました。

“`typescript

const disposableTimeOut = (duration: number, callback: () => void): {
on: () => Promise,
dispose: () => void,
} => {
let timeOutId: NodeJS.Timeout | null;
let resolve: () => void
const on = () => new Promise((_resolve) => {
resolve = _resolve;
timeOutId = setTimeout(() =

Promiseを用いる非同期処理

#同期処理と非同期処理

* 同期処理：プログラムを上から下へと順番に処理を行う（途中で時間のかかる処理があるとそれ以降の処理が全てストップしてしまう）．
* 非同期処理：結果を待たずして次に進む処理

“`Javascript:
unction asyncFunc(param) {
// 非同期処理
setTimeout(() => {
console.log(param)
},100)
}

// 順番が前後する例
function test() {
console.log(‘1’)
// 非同期処理
asyncFunc(‘2’)
console.log(‘3’)
}
test()
“`
“`:出力
1
3
2
“`

##Promiseを用いて非同期処理を実装
非同期処理の実装には，処理（関数）を返却する際にPromiseオブジェクトを用いる．

“`Javascript:

function asyncFunc(param) {
return new Promise((resolve, reject) => {
setT

Gatsby １つのページで複数のクエリを実行する方法

１つのページでお知らせやブログなど複数のコンテンツを表示したい場合はクエリを複数作成することができる。

サイドバー用のカテゴリ一覧など複数ページで共通のデータを使う場合はstaticQueryを使ってコンポーネントごとにクエリを実行する。

## 複数クエリを１つのページで実行する
複数クエリの実行は頭に名前をつけるだけ。名前は自由。

“`js
post: allMarkdownRemark(){}
“`

“`jsx
import React from “react”
import { graphql } from “gatsby”

const MultipleQuery = ({ data }) => {
const post = data.post
const portfolio = data.portfolio
const siteTitle = data.siteMetaData.siteMetadata.title

console.log(data)

return (

test

)
}

export def

Google Tag ManagerでPV数をCookieに保持しておく方法

## PV数を保存しておくと美味しい

広告の最適化等でかなり役に立ちます。マイクロコンバージョンとして送るも良し、リマーケティングタグの発火条件に設定するも良し。このあたりの広告の最適化方法はまた後日紹介します。

## 設定概要

Google Tag Managerを使って、CookieにPV数を保存しておきます。Cookieを使う理由は期限があるため。期限を30分後にしておくと、Google Analyticsのセッションに近い形で値を保持しておくことが出来ます。もし期限付けず、ブラウザ単位での累積のPV数が良ければlocal Storageを使う事をおすすめします。

## 設定方法

新規タグで、カスタムHTMLを選択して以下のコードを挿入します。

“`javascript