【GAS】Googelスプレッドシートからgeojsonを出力し、MapLibreで表示してみた

# はじめに
「やりたいこと」を実現するため、いろんな人の情報を参考にし、作成しました。
不備・間違いの指摘やもっと良い方法等があれば、ご教示頂けますと幸いです。

## やりたいこと
緯度・経度のついたデータをフォームを用いて収集し、地図表示したい

## 上記を実現するための具体的な仕組み
[Googleフォーム](https://www.google.com/intl/ja_jp/forms/about/)に回答した結果（緯度・経度情報あり）を[Googleスプレッドシート](https://www.google.com/intl/ja_jp/sheets/about/)に反映し、[geojson](https://datatracker.ietf.org/doc/html/rfc7946)に変換。その後、地図ライブラリ（今回は[MapLibre](https://maplibre.org/)）を用い表示した。

# 収集したデータ例

緯度・経度と日時、数値データが含まれたものを想定。
[Googleフォームでの回答をGoogleスプレッドシートに連携させる](h

DartとJavaScriptでPythonやRubyみたいに%書式（sprintf）を使えるようにしましょう

# はじめに

PythonとRubyを使っているみんなさん、いつも「%書式」を使っていますか？私はいつも使っています。これは元々C言語の機能で、printfとsprintfで文字列を出力する時に使われていたが、その後色んな言語で同じように搭載されています。

PHPなどではsprintfという関数の形で使えますが、文法の一部として扱えるPythonとRubyの方が直感的で便利です。

勿論、PythonとRubyは%書式以外に他の書式の機能がありますね。[前にもPythonで使える書式を比較する記事を書きました。](https://qiita.com/phyblas/items/0a122fe4a18a18a83050)それぞれ特徴があって違いがあります。**色んな言語共通で使える**のは%書式の長所です。

ただし残念ながらJavaScriptはこんな便利な機能を持っていません。関数という使いたいとしても追加パッケージをインストールする必要があります。

最初にJavaScriptを勉強した時に不便を感じて、ないなら自分で作ればいいよね、と思って結局頑張って実装してみました。

そ

FullCalendarのカスタマイズ：月表示で余分な翌週の行を消す

FullCalendarの仕様なのかわかりませんが、
月表示の時に、翌月の日にちが1週間分表示されます。(下図参照)

これを消したかったのですが、公式のドキュメントに消すためのオプションが見つからなかったため、
自分で消す方法を考えてみました。

## 結論
このコードを一番下あたりに追加してください。

“`javascript
/*
FullCalendar表示カスタマイズ:
翌週分の週が余計に1行表示されている部分を消す
*/
//【load】レンダリング、静的ファイルなど全ての読み込みが完了したタイミングで処理を開始する
window.addEventListener(‘load’, function() {

JavaScriptで長い配列を長さnの小さい配列に分割するワンライナー

# やりたいこと
例えば長さ12の配列を、
“`JavaScript:変換前
const src = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]
“`
このように、
“`JavaScript:変換前
[
[‘Jan’, ‘Feb’, ‘Mar’],
[‘Apr’, ‘May’, ‘Jun’],
[‘Jul’, ‘Aug’, ‘Sep’],
[‘Oct’, ‘Nov’, ‘Dec’]
]
“`
長さ3など短い複数の配列に分割したいとします。これを実現するワンライナーを紹介します。

# 答え（ワンライナー）
“`JavaScript:答え
const dst = Array(Math.ceil(src.length/n)).fill().map((_, i) => src.slice(n*i, n*(i+1)));
“`
– まず、`Math.ceil(src.length/n)`で分割数を求めます。例えば、長さ12を長さ3で分け

htmlで簡単なログイン画面を作る

# 初めに
皆さんはログイン画面を作ってみたいと思ったことはありませんでしょうか？
今回はhtml,javascipt,cssを使って簡単なログイン画面を作っていきたいと思います。
# ファイル構成
今回はloginというフォルダの下に、login.html,script.js,style.cssを作成します。図は以下の通りです。
“`
login—|
|
|–main.html
|
|–script.js
|
|–style.css
“`
# 完成版
以下が完成版の画像になります。
# コードを張り付ける-css
ではまずstyle.cssに以下のプログラムをコピペ

リーダブルコードを咀嚼する(第一章)

## 経緯
現場で誰もが理解しやすいコード、改修しやすいコードを書くことができなかったことで、思わぬバグを生み出す結果になってしまったため。

## 目的
新規参画者でもすぐに理解できるような実装を作成できる

## 課題
システムと密接に関わりすぎて、前提が新規参画者と異なってしまう
システムを作ることが目的になってしまい、システムを運用していくことまで考えられていない

## 解消策
エンジニア界隈では有名なリーダブルコードを読んで、見やすいコード、改修しやすいコードとは何かを理解するところから始めようと思いました。

[](https://amzn.asia/d/0KOIPKc)

## 対象者
コードを書くことに慣れてきたエンジニア🧑‍💻
新規開発に携わるエンジニア🧑‍💻
チーム開発を促進したいエンジニア🧑‍💻

ApexでJSのfindIndex的なメソッドを実装してみた

## 背景
特定の値が一致したら`Map`のキーを探したいというメソッドを作るためです。
そこでJS好きの僕はfindIndexを思い出しました。

## ロジック
ApexでJavaScriptのような`Map`の`findIndex`機能を実装するには、マップのエントリを反復処理し、各エントリを条件と照合する必要があります。Apexのマップは配列やリストのように順序付けられたインデックスを維持しないため、特定のキー値ペアの「インデックス」を条件に基づいて見つける必要がある場合、通常はリストを使用してこの機能をシミュレートします。

## 実装
“`apex
public class MapUtils {
/**
* 指定された条件を満たすMapの最初のエントリのインデックスを見つけます。
*
* @param map 検索するマップ。
* @param condition 各エントリに対して評価する条件。
* @return

ブックマークレットで発生するClipboard APIの “Document is not focused.” をなんとかする

久々にまともなやつ。

# やること
– JavaScriptで何かしらの情報をクリップボードへコピーするブックマークレットを作る

# 道具
– Clipboard API

https://developer.mozilla.org/ja/docs/Web/API/Clipboard_API

# 背景
昔は、`document.execCommand(“copy”);` というコードがありました。
ただ、こいつ今は非推奨なんですよね……

https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand

で、代わりになるClipboard APIという便利なAPIが登場しました。
登場からもうかれこれ5年以上は経過しているはず[未確認]で、最初は対応していないブラウザも多く、まだまだ`execCommand()`が使われていましたが、現在はもう（基本機能は）だいたいのブラウザで使えるはずです。

しかし、新しいAPIはとてもしっかりものなので、セキュリティがガッチリしているんですよね。~~は～～～面倒～～～~~

DOMとは

## DOMとは

DOMツリーは、HTMLドキュメントを表現するツリー構造です。木のように、各要素が枝分かれして繋がっています。

HTMLドキュメントの構造を理解しやすい: 視覚的に分かりやすく、ドキュメント全体の構成を把握しやすくなります。
要素へのアクセス・操作が容易: JavaScriptで特定の要素を操作したり、スタイルを変更したりする際に役立ちます。


## サンプルコード
“`html

タイトル

本文です

• 項目1

MapLibre　レイヤーから特定の市区町村の町丁目だけを抜き出して表示したいときのExpression

別の記事で、日本全国の町丁目ポリゴンのベクトルタイルから特定の市区町村の町丁目だけを色塗りする場面がありました。
その時のやり方があっているのか疑問だったので、振り返りつつ他の方法も考えてみます。
そのときの記事はこちら↓

https://qiita.com/4gou/items/0bd5dd6217d0fef64757#%E7%94%BA%E4%B8%81%E7%9B%AE%E3%83%AC%E3%83%99%E3%83%AB%E3%81%A7%E5%B9%B3%E5%9D%87%E5%B9%B4%E5%8F%8E%E3%82%92%E8%A6%8B%E3%82%8B

# index-ofでできけど、それでいいの？
その記事で使用した方法は以下のような感じです。（記事で使用したコードを少し簡略化しています）
ソースとして町丁目ポリゴンのベクトルタイルを指定し、レイヤーに町丁目ポリゴンの塗りつぶしレイヤーとラインレイヤーをセットしました。
“`js
import ‘./style.css’
// MapLibreの読み込み
import maplibregl from ‘map

Railsの動的プルダウンリストで`include_blank: true`を削除した際のJavaScriptの不具合とその解決法

## はじめに
Railsアプリケーションで動的なプルダウンリストを扱う際、初期状態を空白にすることがあります。このオプションは一般的に`include_blank: true`で実装しますが、この記述を削除すると、JavaScriptが正常に作動しなくなり、動的に選択肢を取得することができなくなる場合があります。特に、選択肢が一つしかなくユーザーがそれを変更できない場合、JavaScriptのイベントが発火せず、結果として動的に選択肢を更新できなくなる問題が生じます。この記事では、その問題の原因と解決策を一つのケーススタディとして紹介します。

## 問題の詳細

例えば、以下のコードは予約システムで使用されるフォームの一部で、ユーザーはスタッフを選択し、その選択に基づいて利用可能な時間帯のプルダウンリストが動的に更新されます。`include_blank: true`を使用して、初期選択肢として空白を提供しています。

“`erb
<%= form_with url: time_tables_path, method: :post, local: true, data: { co

Hexabase TypeScript SDKの使い方（フィールドの追加・更新・削除）

[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。

この記事ではHexabase TypeScript SDKのインストールと、データストアのフィールドをCRUD操作する方法を紹介します。

## インストール

インストールはnpmやyarnを使って行います。

“`bash
# npmの場合
npm install @hexabase/hexabase-js

# yarnの場合
yarn add @hexabase/hexabase-js
“`

## インポート

インポートすると、 `HexabaseClient` というオブジェクトが取得できます。

“`jsx
import { HexabaseClient } from “@hexabase/hexabase-js

Webpack入門：実務で理解するための第一歩

# はじめに
業務で`Rails`の`webpacker`を利用しています。
ただ、`webpacker`の使い方もそうですが、その前に`webpack`を学んだ方が理解できると思いました。

なので、今回は`webpackとは？`を中心に、学んだことをアウトプットしようと思います。

# webpackとは？
`webpack`とは、JavaScriptやCSSなどを一つまたは複数のバンドルにまとめるためのツールです。依存関係のあるモジュールを検出し、ブラウザで利用可能な形式に変換してパフォーマンスを向上させます。

https://webpack.js.org/

イメージとしては、以下になります。

“`mermaid
stateDiagram-v2
A.js –> webpackでモジュールをバンドル（プラグインを実行）
.css –> B.js: ローダーで変換
.png –> C.js: ローダーで変換
B.js –> webpackでモジュールをバンドル（プラグインを実行）
C.js –> webpackでモジュールを

ESLintの設定を視覚化してくれるESLint Config Inspector

## はじめに
ESLintは2024年4月5日をもってバージョン9.0.0を迎え、ルール設定ファイルのデフォルト形式がFlat Configになりました。これにより、`eslintrc`で記述される旧形式が非推奨となりました([リリースブログ](https://eslint.org/blog/2024/04/eslint-v9.0.0-released/))。

Flat Configでは1つのファイルから中央集権的に設定を構築するので、どのファイルに対してどのルールが有効になっているかが把握しにくくなっています。
そのため、旧形式からの移行やルールの増減時に設定を確認する作業が困難になります。

このような時、ESLint Config Inspectorを利用することで、視覚的に有効なルールと対象ファイルを確認できます。

![スクリーンショット 2024-04-08 11.37.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/23e8f4e3-b488-b5df-45a5-8b

Docker Composeで３層アーキテクチャ（ JS + Python + MySQL）を構築する

# はじめに

Docker Composeで３層アーキテクチャの開発環境を構築していきます。

* プレゼンテーション層はJavaScript
* アプリケーション層はPython
* データ層はMySQL

を使用します。

ソースコードは[こちら](https://github.com/ayakakawabe/docker-three-tiered-architecture)


## 開発環境

* MacBook M2
* Docker v.25.0.3
* Docker Compose v2.24.5

## ディレクトリ構成

“`
root/
├ web/
| └ sample.js
├ app/
| ├ api.py
| └

【WYSIWYGエディタ】Summernoteのオリジナルボタンの作り方

## はじめに
前回、Summernoteのエディタ部分へWordやブラウザからコピペする際に、プレーンテキストでコピーされるようにカスタマイズする方法を解説しましたが、蛇足だったかなぁと反省。
ただ、自分的には必要な機能だったのでメモとしては有りかなぁということで、今回はSummernoteでオリジナル機能を持たせるために専用のボタンを作成してツールバーに表示する方法をメモっていこうと思います。

前回の記事の内容はこちら

https://qiita.com/chika_pon/items/8847966b4be2139306a0

## 1. 基本のソース
以前投稿した「【WYSIWYGエディタ】Summernoteのツールバーカスタマイズ」のソースです。

https://qiita.com/chika_pon/items/27bc6b47ccf967ce573b

“`html:test.html


inertiajsによるリンク、form submit、APIリクエストの実装

### 画面遷移のリンクの場合
Linkを使う。
※aタグを直接使うとSPAによる部分リロードのメリットがなくなる。

https://inertiajs.com/links

通常はaタグにレンダリングされる。

“`javascript:
import { Link } from ‘@inertiajs/vue3’;

About
“`

### formのsubmitによる画面遷移
inertiajsのrouterかそのヘルパーであるformヘルパー(useForm)を使う
useFormの場合はデータのエラー時や、初期値のバインドも簡単にできる。

https://inertiajs.com/forms

“`javascript