今さら聞けないHTML　2022年07月25日

2022年版 FlutterでGoogle mapを表示する

## 概要
Flutter初心者がGoogle Mapを表示するまで

## 手順

pubspec.ymlを下記のように書き換える
“`yml
dependencies:
flutter:
sdk: flutter
“`
↓
“`yml
dependencies:
flutter:
sdk: flutter
google_maps_flutter: ^2.1.3
google_maps_flutter_web: ^0.3.2+1
“`
Android Studioの場合上の方に表示される「Pub get」をクリック

main.dartを下記のように書き換える(公式等のをコピペすると微妙に記法が古く指摘される)
“`dart
import ‘dart:async’;

import ‘package:flutter/material.dart’;
import ‘package:google_maps_flutter/google_maps_flutter.dart’;

void main() => runApp(const MyApp()

【HTML】高さ(height)のまとめ【CSS】

## 大前提
・インライン要素には高さは指定できません。（幅も）
・子要素が親要素より大きい場合ははみ出ます。（親要素が広がる）
・設定値により基準があります。（vh,px,%,auto）

## vh
・vhはビューポート(viewport)の略
・ビューポートとは、端末の表示領域のこと。画面を表示できる領域のことです。
　ブラウザで言えば今あなたが見ているブラウザが表示できる範囲を言います。（PCブラウザなら可変です）
　携帯端末だと固定になることが多いです。
・heightを100vhに設定すると高さは画面の高さいっぱいに設定されます。（逆に1を設定すればビューポートの1/100の高さになる）
・基準がビューポートになるため、親要素に影響されません。

## %
・親の要素を基準として、その要素が何%の高さになるかを設定します。（親要素以外には影響されません。）
・親要素の高さがautoの場合は、%は聞きません。

## auto
・heightを設定しない場合、autoがデフォルトで設定されます。
・ブラウザ側が自動で高さを設定します。（とは言え計算方法はあり、画像だとその画

【#38 エンジニア転職学習】Go WebApp　フロントエンド部分作成

# はじめに
富山県に住んでいるChikaといいます。
毎日投稿を目標に、バックエンドエンジニア転職に向けた学習内容をアウトプットします。

使用しているGoのUdemy教材後半部分である、
Webアプリ作成演習を学習していきます。

バックエンドエンジニアになるまでの学習内容は以前投稿した以下の記事を基にしています。

https://qiita.com/Chika110/items/ef54dddd565a0193ef44

# 本日の学習内容
本日はCandleStickのデータフレーム作成、APIHandler、jQueryを使用したフロントエンド部分作成を学習しました。

* データフレーム
* APIHandler
* **フロントエンドchart作成　←Topics!!**

# フロントエンド chart作成
以下今回のフロントエンド部分作成時の個人的ポイントです。
* chart作成のHTMLは基本的なものは`developers.google.com/chart/`からテンプレート取得
* jQueryは「Google Hosted Libraries」よりリンク

【JavaScript・HTML・(Python)】tableにあるボタンを押した行をモーダル上で削除する

### ※注意！！
タイトルでは、「削除する」とありますが、記事に書いているのは、**tableの1行をボタンを押してモーダルを出す→削除する手前まで！！！** です。
削除機能実装については書いていませんのでご了承ください。

## 本記事の目的
1. JavaScriptを使って「欲しい！！」と思った**テーブルの行の情報を取得**できるようになる
1. ボタンをクリックして、**クリックした行の情報を取得**できるようになる
1. 上から降ってきた画面(モーダル)上のボタンを押して、プログラムを実行する手前まで実装することができる

の3つです！

## 目次
1. 実装した機能
1. この記事を書こうとした経緯
1. 具体的な実装方法
1. 参考にしたサイト

## 1. 実装した機能

今回実装したい機能は、こんな感じです。
![delete_event_category.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782282/676d34a9-8de8-4300-822a-e4db89

未経験からITエンジニアとして転職するためにテックキャンプに通ってみた

# テックキャンプを受講してみて
私は、未経験でのITエンジニアへの転職を行うためにテックキャンプというプログラミングスクールに通っていましたので、今後検討される方のために感想を中立な立場として記述したいと思います。
なお、こちらの記事の内容は一個人の見解ですので、参考程度にしていただければと思います。
その上で、私の属性は以下を参考にしていただければ幸いです。

# 前提条件
【当方の前提条件】
・大学は私立文系で3年次より金融専攻
・銀行の営業員として業務に従事
・新卒で入社した企業を1年で退社した、24歳の人
・在職中にHTML&CSSは本を使って学習
・スクール学習期間中は、11時間程度学習（土日関係なし）

# 結論
テックキャンプはお勧めできる。（条件付き）
考える上で「学習内容について」「費用面」「転職活動面」の大きく３つに分けてお話しします。みなさんが気になるであろう上記３つ以外にももちろんスクール選びのための要因や比較等もあると思いますが、ひとまずこちらの３点だけ記述させていただこうと思います。

### 学習内容について
他社サービスとは比較していないですが、テッ

htmlのtableであれこれ（前回の続き）

## テーブル機能追加
前回の記事で作ったヘッダ固定スクロール表に機能を追加。
+ 見出し列のグルーピングについて、スクロールして表示される範囲の中央に表示。
+ セルをクリックしてテキストボックスを表示（実際の編集処理は省略）

See the Pen
Untitled by cfd-ack (私の運営しているサイトを紹介

私は「ラブドールの教科書」というラブドールのお役立ち情報を発信しているサイトを運営しています。興味のある方はぜひ訪問してください！

https://lovedoll-text.com/

Railsプレイヤーと一緒に仕事をするWebデザイナー向けのノート

# 目的
Railsでサーバーサイド設計をしている僕が、Webデザイナーの方とチームを組んで1つのWebアプリを作ることになりました。
相手の方はWebデザイナーとして十分な実力を持っていますが、サーバーサイドエンジニアと一緒に仕事をするのは初めてということでしたので、Railで作成したWebアプリがどのようになっているのかをまとめたいと思います。

# 準備
実際に作業に入る前に、まずは一緒に仕事をする準備をしましょう。

## Rails環境を構築する
RailsでWebアプリを動かす（ローカルサーバ上でアプリを走らせる）には、Rails環境が必要になります。
下記記事を参考に、`rails s`でローカルサーバを立ち上げられるようにしておいてください。
[Ruby on Railsの環境構築をしてみよう！(Windows)](https://prog-8.com/docs/rails-env-win)

## gitでプロジェクトを共有
まずはgitでプロジェクトを共有します。
こちらの記事を参考に、自分のレポジトリにプロジェクトフォルダを作成してください。
[GitHub で他

画像の枚数に応じたレイアウトを自動で生成するJavaScriptライブラリを作成した

# この記事について
先日、インターンでの課題としてライブラリを作成しました。記事に残しておくと身になるという話をよく聞くので、作成した過程を書き残したいと思います。
筆者は駆け出しでありJavaScriptは勉強したてなので、アドバイスなどがあればお願いします！

# ライブラリの概要
* htmlのul要素に.js-photo-galleryというクラス名を付けるとli要素の画像がhttps://master.dxgxkh02xtdew.amplifyapp.com のようなレイアウトに自動で整形される
* 同じ枚数でも、画像のアスペクト比に応じて異なるレイアウトになる
* レイアウトはcssのGrid Layoutを使用する

# レイアウトの作り方

## css適用
下のサイトを参考にレイアウトを作成しました。
まず、好きな割合で区切りを決めると境目に番号が割り振られます（縦の線は左、横の線は上から1）。大きさをどの境からどの境までかで指定することで好きな形にできるという使い方でした。

https://developer.mozilla.org/ja/docs/Web/CS

HTMLの基礎知識（YoutudeのURL 投稿と反映）

みなさん今日もプログラミングの学習お疲れ様です！！

今回はYoutudeの動画を投稿し、それを詳細ページに反映する機能を実装していきます！！:sunny:

Step1:モデルを作成

“`ruby:ターミナル
rails generate migration AddYoutubeUrlToTweets youtube_url:string
“`

“`ruby:ターミナル
rails db:migrate
“`

Step2:コントローラーの追加

“`ruby:tweets_controller.rb
private
def register_params
params.require(:register).permit(:youtube_url)
end
“`

Step3:newにyoutude_urlのデータを追加

“`ruby:tweets_new.html.erb
<%= @tweet.label :youtube_url %>
<%= @tweet.t

Google スプレッドシートのセルから HTML Tag を生成したい

# Google スプレッドシートのセルから HTML Tag を生成したい

## 背景
クライアントから依頼を受けた案件を GAS/HTMLService + スプレッドシートで開発中に、クライアントがスプレッドシートに入力した文字列を書式付きで HTML に出す必要がでてきました。
流石に HTML やマークアップを知らない人に、「タグ書いてね」とは言えず、なにか手がないかと考えた結果、Google のセル内のリッチテキストを変換する方法を思いついたので、メモとして残します。

## やったこと

Google スプレッドシートシートは、セル内でリンクを貼ったり、一部の文字に色を付けたりでき、セル内でそれなりにリッチな表現ができます。GAS から セル内のリッチな書式を解析できるので、RichText -> HTML Tag コンバータを作成してみました。
今回は手抜きで、リンクと文字色しかサポートしていません。

1. セルアドレスを指定して セルのレンジオブジェクトを取得
2. セルの RichTextValue() を取得
3. 書式の異なる文字列ごとに配列分解
4. co

input type numberに指定範囲内の整数だけ出来るようにする

input type numberに指定範囲内の整数だけ出来るようにする。
※但しバックスペースで空欄化を可能にしたいので、意図的に空欄化は許している。

“`HTML