AIRBNBのようにGOOGLEMAPをWEBに追加

# 追加背景
今自分で習いながらAIRBNBのような民泊シェアリングエコノミーサイトを作っているので、その中でもGOOGLEMAPの位置表示機能を追加する手順をシェアできればかと思います。今回は部屋の掲載ページに載せるので主にROOM関連のファイルで編集していきます。

# GEM追加

“`Gemfile.
gem ‘geocoder’, ‘~> 1.4’
“`
bundle install

#DB migration
rails g migration AddFieldsToRoom latitude:float longitude: float (掲載した部屋のページに表示したいのでこの場合ROOMのDBに追加)
rails db: migrate

## rooms table
|Column|Type|Options|
|——|—-|——-|
|home_type|string|null: false|
|room_type|string|null: false|
|accommodate|integer|null: false|
|bed_room

[JavaScript] 配列の存在チェック（空判定）は if (array.length) {…} でいいよって話

配列の存在チェック（空判定）について個人的に思うことです。
少しだけECMAにも触れます。

## 配列の存在チェックどうしてる？

チェックの方法って結構バラバラですよね。

“`js:配列の存在チェック例
// array => []
if (array.length === 0) {…}
if (array[0]) {…}
if (array.length > 0) {…}
“`

## チェックはもうこれで良いんじゃないかな

“`js
if (array.length) {…}
if (!array.length) {…}
“`

## 理由
1. そもそも、`length`って名前が0以上の数値ってことが自明だから
1. JavaScriptでは、0が`false`、1以上は`true`となるから

## まとめ
早いですが、一旦まとめます。
別に大した話じゃなく、配列の存在チェックは`array.length`でなんら問題ないということです。
`array.length === 0`とかが駄目という話ではないということは念のために書いておきます

[コピペでOK] GoogleAppsScriptでログを出力する

# はじめに

GoogleAppsScript（GAS）でconsoleのスプレッドシートシート出力機能を作成しました。GASでは`Logger`や`console`などのログ表示機能が備わっておりますが、ここでは使用しません。コピペですぐに使えるものを目指しています。

機能としては下記の通りです。
– ログレベル
– 出力先指定

# 使い方
使い方は下記の通りです。

“`javaScript:main.gs
function main() {
try {
console.error(‘log: error.’);
console.warn(‘log: warn.’);
console.info(‘log: info.’);
console.debug(‘log: debug.’);
console.log({a:”aaa”,b:1,c:{d:2},d:[3,4,5]});
throw new Error(‘log: throw error’);
} catch (

Promise 入門

# はじめに

[`Promise`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) は**非同期処理の最終的な完了もしくは失敗を表すオブジェクト**です。

Promise はコールバックを関数に渡すかわりに、関数が返したオブジェクトに対してコールバックを登録するようにする、というものです。

以下のコードは `createAudioFileAsync()` を使用したもの

“`js
function successCallback(result) {
console.log(“Audio file ready at URL: ” + result);
}

function failureCallback(error) {
console.log(“Error generating audio file: ” + error);
}

createAudioFileAsync(audioSettings, successCallback, fa

CSSだけで幻想的な光を放つニキシー管を作れるのか？

# はじめに
htmlとCSSでニキシー管を作ってみました。（[デモのページ](https://portfolio.interimadd.com/works/css_nixietube)）
動的な数字の切り替えに対応しているので、いろいろな用途で使えると思います。

## ニキシー管とは
ニキシー管は文字や数字を表示させる発光装置です。ガラス管の中にネオンガスが入っていて、電圧を印加するとワイヤーが幻想的なオレンジ色の光を放ちます。今は数字を表示するデバイスは6セグのLEDにとって代わられてしまっていますが、そのスチームパンクな外観に加えて、デジタルな制御なのに表示される数字がアナログという良さから愛好家が多いデバイスです。STEINS;GATEのダイバージェンスメーターに使われているのはあまりにも有名です。

## なぜ作ろうと思ったのか
ニキシー管は今は量産されておらず、手に入れようと思うと基本的にはソ連製のデッドストック

obniz + Machinist でラクラク IoT センサーロガー：スマホでも開発可能！おうち IoT

# obniz でラクラク IoT センサーロガーを無料で維持したい！
[前回の記事](https://qiita.com/y-hira/items/bf2a161e90e3132b05a0)のように、Google Cloud Functions で [obniz](https://obniz.io/) を 1分おきに動かして、センサーの値を記録していました。しかし、Google スプレッドシートに記録していたため、データが溜まってくるとシート自体を開くにも重すぎて開けなくなってきてしまいました。

そこで、IoT 向けのデータ保存サービスを試してみたいと思っていたのですが、AWS IoT など少額かもしれませんが維持費がかかるため、とりあえずクレジットカード登録不要で無料プランのある、IIJ の [Machinist](https://machinist.iij.jp/) を使用してみました。

ハードウェアとインターネットが繋がる IoT 開発では、複数のプログラムが必要になることが多いですが、今回の方法では

– プログラムはたった1枚のHTML
– 環境構築不要・スマホでも開発

Vue.jsで頑張るハンバーガーメニュー

#はじめに#
**「ハンバーガーメニューは古臭い」**

最近、僕はその言葉を聞く機会が増えた。
それでも、僕はハンバーガーメニューが好きだ。

確かに、ハンバーガーメニューにはメニュー項目を探しにくいという欠点がある。
しかし、コンテンツを表示するエリアを広く使える、つまり表示エリアをほぼ占領しないというメリットがあるので時と場合によってはまだまだ現役で使えると僕は思っている。

ということで、Vue.jsを使ってハンバーガーメニューを実装してみる(‘ω’)

とりあえず、完成形はこんな感じになる。


サンプルサイトはこちらから
https://helloworld753315.github.io/vue_hamburger/

GitHubのリポジトリはこちらから

【備忘録】TypeScriptの主要な型注釈早見表

#主要な型一覧
##string型
文字列に使用する。

“`typescript
const single: string = ‘hello’;
“`
##Number型
数字に使用する。
小数点・負の数もOK。

“`typescript
const positive: number = 10;
const float: number = 3.14;
const negative: number = -100;
“`

##Boolean型
真偽値に対して使用する。

“`typescript
const bool: boolean = false;
“`

##Object内の値
「Object型」も存在するが、それはオブジェクト全般を指すので、開発ではより厳密に定義するためこちらを使用する。

“`typescript
const friend: {
name: string;
age: number;
} = {
name: ‘Mike’,
age: 25,
};
“`

##Array型
配列に使用する。

“`typescript
con

React の React.memo、useCallback、useMemo の使い方、使い所を理解してパフォーマンス最適化をする

## はじめに

React（v16.12.0）の`React.memo`、`useCallback`、`useMemo`の基本的な使い方、使い所に関しての備忘録です。

デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。

### 本記事で用いている用語

– メモ化
– 計算結果

#### メモ化

計算結果を保持し、それを再利用する手法のこと。

キャッシュのようなものだとイメージすれば良いと思う。

そのため、以下の言葉の意味は大体同じ。

– 「メモ化された値」=「計算結果が保持された値」
– 「メモ化する」=「計算結果を再利用できるように保持する」

メモ化によって都度計算する必要がなくなるため、パフォーマンスの向上が期待できる。

#### 計算結果

以下のような計算の結果のこと。

“`js
// result は 1 + 2 の計算結果を格納している変数
const result = 1 + 2;

// result2 は [1, 2, 3, 4, 5].map(number => number * 2)

javascriptで動画の明るさを調整できるchrome拡張機能を作ったから、作り方を1から解説してみる

#初めに
[adjusting the video bright](https://chrome.google.com/webstore/detail/kpcjmbjaopdgkfgjbpggiibcgfipjajn/publish-accepted?authuser=1&hl=ja)
Youtubeやニコニコ動画の動画の明るさを調整できるchrome拡張機能です。

地味に便利な拡張機能と思います。

自分なりの解釈で書いているので、間違っているところがあるかもしれないので参考程度に見ておいてください。

##必要なファイル
– index.html (browser actionで開くときに必要)
– background.js (backgroundで必要)
– content.js (content_scriptで必要)
– manifest.json (chrome拡張機能の名前や説明、使うchrome APIなどを記述するときに使う 必須なファイル)
。

##まとめる
まず、コードを書く前にやるべきことをまとめます。

**1,ポップアップ画面はどのような画面にするか

Rails6.0でselectboxの複数選択をおしゃれにするJavaScriptライブラリ「select2」の導入方法

# はじめに
皆様、こんにちは！
佐久間まゆちゃんのプロデューサーの@hiroki_tanakaです。

先日、Rails6.0系でselectboxの複数選択をおしゃれにするプラグインのselect2を導入することがありました。
その際にRails5系までの導入方法との違いに少しハマったので、調べたことをまとめました。

# 利用環境
– Ruby 2.6.6
– Rails 6.0.2

# select2とは
select2とはHTMLのselectboxのデザインをおしゃれにするJavaScriptのライブラリです。
公式サイトはこちらです。→[select2](https://select2.org/)
単一選択のselectboxのUIだけでなく、複数選択のselectboxも簡単に実装する事ができるプラグインです。

#### [公式サイト上のサンプル](https://select2.org/getting-started/basic-usage)
– select2導入前
![image.png](https://qiita-image-store.s3.ap-nor

GoogleMapを使ってサイクリングに出かけよう

タイトルから、何の技術の話かわからないですね。
GoogleMapにナビゲーション機能ってありますよね、それをサイクリングでナビゲートしてもらおうというものです。
サイクリング中は、手が使えないので、音声ナビがあると便利です。
ですが、ポケストップを探すたびに、立ち止まってスマホを見るのは手間ですし、軽快ではありません。

そこで、(ポケストップに限りませんが)サイクリング前に、途中のチェックポイントを複数覚えておいて、チェックポイントまでの道のりをナビゲートしてもらって、到着したら、ポケストップのアイテムをもらったり、コンビニで休憩したのち、次のチェックポイントを目指す、というものです。


# 原理の説明：GoogleMapの機能

GoogleMapは、外部のアプリやブラウザから起動させることができます。
その際に、パラメータの指定によって

async/await(Promise)のreturnとエラーハンドリング

# 目的
JavaScriptにおけるasync/awaitとPromiseは同じものですが、
エラーハンドリングに関しては違いがあったり、returnに気をつけないといけなかったり、
はまったり、見落としたりする箇所があるので、まとめておきます。

async/awaitとPromiseの関係性については、記事中で詳しくは触れません。

# おさらい
## Promise
### 正常系
“`
// 非同期でメッセージがかえってくる
const pResult = Promise.resolve(“結果です”);

// 結果が帰ってきてないので、Promise型
console.log(pResult.toString()); // “[object Promise]”

// thenで結果を待つ
pResult.then(result => {
console.log(result.toString()); // “結果です”
});
“`

### エラー発生
“`
// 非同期でErrorがthrowされた状態
// RESTでAPIエラー起こすなどでここに入る

Day23 Javascriptメソッドまとめ

#window.alert(”)
“`javascript
window.alert(‘表示したい文’);
“`

#console.log(”)
“`javascript
console.log(‘こんばんは’);
“`

#変数の宣言 `let`, `const`
“`javascript
let name = ‘yamada’;
console.log(name + ‘さん、こんばんは’);
“`

#条件分岐 `if`, `else if`
“`javascript
let num = 60;

if (num % 15 == 0) {
console.log(num + ‘は3と5の倍数です’);
} else if (num % 3 == 0) {
console.log(num + ‘は3の倍数です’);
} else if (num % 5 == 0) {
console.log(num + ‘は5の倍数です’);
} else {
console.log(num + ‘は3の倍数でも、5の倍数でもありません’);
}

=>60は3

Javascriptで作る　モーダルウィンドウ

まず、モーダルを作る場合、部品が何個あるのか考えます。
今回のモーダルウィンドウでいうと、
①モーダルを呼び出すボタン
②モーダルが出てきた際の背景が黒い画像
③モーダルウィンドウ

大きく分けて、この３つが必要となる。

①モーダルを呼び出すボタン

“`html

ボタンを押すとモーダルウィンドウが開きます

開く

“`

②モーダルが出てきた際の背景が黒い画像

“`html

“`
③モーダルウィンドウ

“`html

Vue.js Modal Window！

@kintone/rest-api-client への移行を考える

# えっ！？ kintone JS SDK が・・・！！？

kintone の主戦場である JavaScript/TypeScript 界隈で kintone とのやりとりをカプセル化・抽象化するツールとして欠かせない存在である [kintone JS SDK](https://github.com/kintone/js-sdk)。

**なんといつの間にか deprecated になっていました。**

最終バージョンは 0.7.8 と、結局正式版リリースまで到達せず終了と言う事になりそうです。

旧 JS SDK の代替として 2020 年 2 月に [@kintone/rest-api-client](https://github.com/kintone/js-sdk/tree/master/packages/rest-api-client) 正式版がリリースされていました。
Git リポジトリのパスが妙に深いのが気になるところではありますが、執筆時点（2020 年 5 月下旬）では最新版が 1.3.0 まで上がって来ており、一般的な利用の範囲内では旧 JS SDK を置き換え

Java Scriptの基礎

####JavaScriptとは
`JavaScript`とは、プログラミング言語の一つで、1990年代中盤に登場しました。
サイトのプルダウンや画面を更新しないでサーバーと通信したい時に使われます。
略称は、`JS`です。
####HTMLへの導入方法
htmlファイルと同じ階層にJSファイルがある場合htmlファイルに以下のように記述するとJSファイルが読み込まれます。

“`index.html



“`
headタグ内にある、`scriptタグ`の`src`属性にファイル名を記述します。JSの拡張子は`.js`です。

####window.alert()
ブラウザにアラートを表示させるメソッドです。
表示させたい値を引数にとります。また、変数でも可能です。

####console.log()
ブラウザのコンソールにテキストを表示させるメソッドです。
表示させたい値を引数にとります。また、変数でも可能です。

変数での記述方法は以下になります。

“`script.js
v

mapboxでお手軽に人工衛星の軌道を投影する

人工衛星がどの位置にあるのか、[mapbox](https://github.com/mapbox/mapbox-gl-js)上にパッと表示する方法です。

地図は[地理院タイル](https://maps.gsi.go.jp/development/ichiran.html)を利用します。

衛星の位置はTwo Line Elements(TLE)を[celestrak](https://celestrak.com/)から入手します。

TLEを緯度経度に変換するアルゴリズムは、[sgp4](http://celestrak.com/publications/AIAA/2006-6753/AIAA-2006-6753-Rev2.pdf)が有名です。
このアルゴリズムは観測から15日後の衛星位置を[数10km程度](http://celestrak.com/publications/AAS/07-127/AAS-07-127.pdf)の誤差で予測できるすぐれものです。

自前で作ろうと思いましたが、アルゴリズムの中身を見ると精度が良いだけに面倒だったので、素直に既存のライブラリに頼るこ

WebAssemblyをwindows上で使用する

# はじめに
Web画面の開発などでは良くJavaScriptが使用されていますが複雑な処理を行うと動作が遅くなる場合があります。
そのため、より早くより効率的に開発をするためにCやC++といったコンパイル可能な言語を使用してWebの開発を可能にしたものがWebアセンブリになります。
Emscriptenを使用してWindowsの開発環境を作る方法は[公式](https://emscripten.org/docs/index.html)に記載されていますが、自分の悩んだところやエラーなどを含めてまとめてみました。

# 環境
– windows 10
– python:3.6.5
– emcc:1.39.16
– clang:11.0.0

# 環境作成
2020/05/24時点で、EmscriptenはGit上からソースを取得してインストールを行う方法しかないようです。
GitのクライアントをWindowsに入れたくないため、GitのWebからソースをダウンロードしてインストールしています。

## ソースのダウンロード
[Gitのサイト](https://github.co

簡単なローカルサーバーの立て方

Javascriptを使ったホームページ制作などをしている際に、ちょっと動作を確認しようとブラウザでファイルを直接開いた場合(URLがfile:// ~ の場合など)、JSが動作しない時があります。
これは同一性ポリシーと呼ばれる制約を受けるからなのですが、私を含め多くのプログラミング初心者はこの時初めて同一性ポリシーについて知ると思うので、この場面に直面した時の「じゃあ結局どうすれば動作確認できるようになるの？」について紹介します。

あくまで、初心者に対する動作確認をするための紹介であり、同一性ポリシー及びCORSについての説明はほとんどしません。(知りたい人は各自調べてください。)

### 対象でない人
Apacheとかnginxを自分でセットアップできる人

## 解決策の手順
解決方法は２つあります。
1. VSCodeの「Live Server」拡張機能を使用する
2. python3を用いてターミナルで`python -m http.server`を使用する
ここで、python3としているのは現在のpythonの標準がpython3だからで特に理由はありません。pyt