今さら聞けないHTML　2020年05月08日

初心者によるプログラミング学習ログ 309日目

#100日チャレンジの309日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
309日目は、

おはようございます
309日目　2h
・ポートフォリオ作成

課題とかデザインカンプからのサイト模写とかできなかった・・・#早起きチャレンジバックエンドエンジニアがタグ書くのが面倒で組んだgulpfile晒します

# はじめに

完全な個人メモです。
フリーでもらった仕事の請求書書くのに、せっかくエンジニアなんだからHTMLをPDFで印刷しようというアイデアではじめました。

バックエンドエンジニアからするとタグを正確に書くにはHTMLは文字数が多すぎる。ということでpugを入れたり色々やってそこそこ気に入ったので、一段落ということで投稿します。
github: [https://github.com/iwamoto-takaaki/invoice_sheet](https://github.com/iwamoto-takaaki/invoice_sheet)

# 導入機能一覧

[packege.json](https://github.com/iwamoto-takaaki/invoice_sheet/blob/master/package.json)

1. gulp関連
1. “coffeescript”: “^2.5.1”
gulpfileはcoffeeにした。なくても通るかもしれない。
1. “gulp”: “^4.0.2”

元記事を表示

Javascriptを使って独自のダイアログボックスを作成する

【開発環境】
macOS Catalina
バージョン 10.15.3
visual studio code

#Javascriptを使ってダイアログボックスを作成する
[](https://gyazo.com/989777ab5c0e478af1a9f95c52772734)

ダイアログボックスは一般的にalert()やprompt()などで作ります。しかし、これらで作るとカスタマイズができません。
今回は自作で、自由にカスタマイズできるダイアログボックスを作っていきます。
##骨組みとなるhtmlとcssを作っていきます
まず、html.cssを作っていきます。

“`index.html

ボタンをクリックしてください

【自動化】WEBサイトの変更を検知してLINEに通知する

# はじめに
高校生になりました。
このコロナの影響で学校にいけなくなり、学校側が用意したWEBサイトを定期的に見てそのサイトに書いてある指示に従って自宅で学習するように言われましたが、そのWEBサイトが重く、また毎日更新を確認するのは面倒です。しかしできるだけ情報は早く入手したいです。そこでWEBサイトの更新を検知してLINEに通知するPythonのプログラムを書くことにしました。

# 全体の流れ
1. Pythonの標準ライブラリであるurllibを使ってWEBサイトのHTMLを取得します。
2. それをBeautifulSoupというライブラリを使って分析し、必要な部分だけ抽出します。
3. （２ループ目以降）今回抽出したものと前回抽出してファイルに保存したものを比較します。
3. 新しく抽出したものをCSV形式でファイルに保存します。
4. ３で比較した結果をLINENotifyで通知します。

これを繰り返します。
実行するたびに前回実行したときに取得したものと比較します。（このプログラム自体は毎回起動しては終了する）
このプログラム自体に定期的に実行する機能はなく、こ

元記事を表示

Vue.js クラスとスタイルのバインディング

#Vue.js クラスとスタイルのバインディング

前回の記事はこちら
[Vue.js　監視プロパティ](https://qiita.com/fumiya0414/items/ba37ddcfc632ed546e12)

##クラスのデータバインディングの基本
まずはVue.jsを使ってCSSのクラスを動的に設定しましょう。
[jsfiddle](https://jsfiddle.net/)で実際に記述しながら読むことをおすすめします。

“`html:index/html

Hello Vue.js!

“`

“`javascript:index.js
var app = new Vue({
el:’#app’,
data:{
isLarge:tr

Laravelでモーダル画面から関連した投稿の削除機能を行う

LaravelでCRUD掲示板を作成していた際、モーダルウィンドウから投稿を削除するかユーザーに選択してもらい削除機能を実装しようとしたがかなりハマったのでメモ。

## 原因
HTML側から記事の投稿IDを引数に選択してなかったこと。
JS側で処理が呼び出された際にどの投稿IDかわからずずっと一意の投稿IDのみが選択されていた。

## 行ったこと
モーダルを投稿の数だけ配列で回して用意した
JSを呼び出す際に引数を指定してJSと紐付けた

##コード
“`php:main.js

let modalMenu = false;

//HTMLからの引数から投稿IDを取得
let editModal = function(id) {

//.editModal-投稿IDと一致するものを定数に格納
let checkForm = document.querySelector(‘.editModal-‘ + id);
scrollTo(0,0);
if(modalMenu === false) {
checkForm.style.display = “flex”;
mo

Vue.js　監視プロパティ

#Vue.js　監視プロパティ

前回の記事はこちら
[Vue.js　算出プロパティ](https://qiita.com/fumiya0414/items/964d47d2bb9bb095060f)

##監視プロパティとは
データやプロパティを監視して変化があった時に登録した処理を実行します

##監視プロパティの基本
[jsfiddle](https://jsfiddle.net/)で実際に記述しながら読むことをおすすめします。

messageプロパティのデータが変更されたら
コンソールに新旧の値を表示しましょう

以下のコードを記述します。

“`html:index/html

{{ message }}

  {{ $data }}

顔を認識してサーボモーターを動かすやり方は下の記事を参考に。

obnizで作る顔検出扇風機

ほとんどこの記

formタグの配下にbuttonを入れないようにしたいとき

#解決したいこと

- formタグがたくさんあるから、HTMLファイルの下の方にまとめてしまいたい。
- liタグの中にformタグを入れるとレイアウトが崩れるから、liタグの外に出したい。
- formタグとボタンを関連付けしたい。

#よく見るformタグ
formタグの中にbuttonタグを入れて、送信を押すとformタグ内のinputの内容がサーバー側に送られる、
というのが一般的な作りだと思います。

↓こんな感じの

```php

@csrf

名前

【Rails 忘備録】devise_viewを編集しても反映されない問題

#はじめに
「Ruby on Rails」の「devise」を使ってユーザー新規登録/ログイン機能を実装する際、viewを編集しても一向に反映されない問題が発生しました。表示はされることからエラーでもなさそうなため追う術もありません。これを回避するために小技や、devise特有の注意点があることがわかったため、備忘録として残します。

#現象
deviseをインストールし、ビューを「rails g devise:views Model」で作成すると、以下のデフォルトのビューが表示されます。
私の場合は Model = devise で作成しました。
この状態からビューの編集を始めたのですが、どれだけ編集して、どれだけ対策を打ってもデフォルトのビューが表示されるというループにハマりました。


SmartNews向け記事コンテンツで使えるタグ・使えないタグ

SmartNewsに記事を配信する場合に必要な、SmartNews向けRSSフィードの記事本文内で使用可能なタグについてまとめてみました。

# 背景

SmartNewsに記事を配信するにはRSSを拡張した、「SmartFormat」と呼ばれる形式で記事データを提供する必要があります。
(参考：[記事配信開始までの流れ – SmartNews 媒体運営者サポートサイト](https://publishers.smartnews.com/hc/ja/articles/360010888174))

そして「SmartFormat」の本文内(`content:encoded`内)では、CSSによるスタイルの設定(外部ファイル、インライン問わず)をすることはできない、ということになっています。[^appearanceOnAndroid]

[^appearanceOnAndroid]: iOS版では確かにCSSがほぼ無効になっているようですが、Android版では今の所一部中途半端に当たっているようです……
また、公式のバリデーションツール([SmartFormat Valid

Webプログラミング知識0の人間がPWAっぽいサイトを作る話

はじめまして、Иagiです。

今回はWebプログラミングの知識皆無な私がPWA(Progressive Web Appsの略)っぽいウェブページを作ります。

実際にはPWAとなるためにはいろいろ要件があるようなのですが、Webプログラミング知識皆無の私には詳しいことがよく分からないので、今回はひとまずPWAの一番分かりやすい「ネイティブアプリっぽく表示」を目指します。

## PWAになるのに必要なもの
ウェブページをPWAにするには次の5項目が必須になる模様。

* HTML
* HTTPS
* Service Worker
* manifest.json
* いくつかのmetaタグ

アイコン画像もあると良いでしょう。

* アイコン画像

それぞれ解説します。

### HTML
当たり前ですが、ウェブページなのでウェブページ本体となるHTMLファイルが必要です。

後述するService Workerやmanifest.jsonが紐づけられ、metaタグが記入されます。

### HTTPS
PWAとして動作させるにはセキュリティの問題でウェブページがHTTPSで表示できる

［Node.js + PostgreSQL］Node.js アプリから PostgreSQL DB に接続

### 書くこと
Node.js で作成したアプリから、PostgreSQL DB に接続する方法

### 前提条件
接続するDBは、下記記事で作成したものを利用する。
[［DB/SQL］要件をテーブルに落とし込む手法のメモ書き（複式簿記のテーブル設計を例に）](https://qiita.com/tanakadaichi_1989/items/09e0ce35f3ebc9afc352)

### フォルダ構成
```
NodeJSSampleApp
┣ app.js
┣ node_modules
┣ package-lock.json
┣ package.json
┣ public
┗ views
┗ journal.ejs
```

### コード

```js:app.js
const express = require('express');
const app = express();

app.use(express.static('public'));

var {Client} = require('pg');

var client = new Client(

CSSのborderで描いた三角形を配置した時に生じる隙間を消す方法

CSSのborderを組み合わせて描いた三角形を、下図のように長方形の左辺にくっつけて配置してできた図形をレスポンシブ対応にしたい。つまり、三角形と長方形の相対的な位置関係を維持したまま、ウインドウ幅に応じて図形のサイズを変化させたい。そんなCSSを書いたところ、ブラウザに依存した現象にハマりました。その解決策のメモです。
**動作環境**
macOS 10.14 (Mojave), Retinaディスプレイ(Radeon Pro 575), Firefox 75, Safari 13.1

## ダメな例
まずは失敗例から。本記事では話を簡単にするため、長方形のサイズは固定とし、三角形のみサイズを可変にしたもので説明します。三角形の高さを6vwとしましょう。

```html:html

jQueryとCSSとDraggableでかっこいいスライダーを作る。

# はじめに
## どんなやつ？
こうゆうやつを作りたい(作った)。Android的にはシークバーっていうんだけどなんて呼ぶのが正しいのだろうか。

## どうやって？
最小値0で最大値100で作る。この値はあくまで表示なので値を足したりかけたりすればどんな範囲でも作れる。また、値の変動はスムーズにしたいので四捨五入する。これらの値は独自属性を作り、格納する。

背景(`Bar`とする)と移動する丸(`Toggle`とする)は別々にしてDivで実装。同一の親に入れとく。

# 実装
## HTML
jQueryとjQueryUIの導入を忘れないように。

```html:index.html