Webアプリでカメラ操作したいときに見るメモ（javascript）

HTML

“`html

“`
・width：横幅
・height：縦幅
・muted：動画の音をでないように設定
・autoplay：動画を自動再生
・playsinline：インライン再生を可能にする

参考
[【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ]
(https://webliker.info/52510/)

JS

“`javascript
async function main() {
// デバイス（カメラ・マイク）からのデータ取得を試みる
// 映像や音声が使えるデバイスが確定するまで時間がかかるためawaitを使う
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
});
// IDが”my

ボタンを作る時のタグの使い分け

ボタンを作る時のタグの選択肢は

– aタグ
– buttonタグ
– input type=”button”

があるがそれぞれどんな時にどれを使えばいいか理解していないかった。
だから今回しっかりと理解するためにいろいろと調べてみた。

# 結論

クリックで他のページの飛ぶ時→**aタグ**

クリックでJavascriptを動かすとき→**buttonタグ**
フォームの送信→**buttonタグ**

buttonタグが使えないhtml4の時→**input type=”button”**

それぞれの場面について考えていく。

### クリックでページ遷移はaタグ
ページ遷移を作動させるにはタグにリンクを記述する必要がある。
その際buttonタグよりaタグの方が記述が少なく済むからだ。
またaタグが最も普及してることも考慮するとaタグの方が無難である。

### input type=”button”はほとんど使わない
buttonタグと機能はほとんど同じだがinputタグには閉じタグがないため子要素を作る・擬似要素を使うことが出来ないのでデザインのカ

Vue.jsを使って簡単なカウンターアプリを作ってみた

最近Vue.jsの勉強を本格的に始めました。ひとまず何か簡単なものを作ろう！ということで、今回はカウンターアプリを作ってみました。良ければお試し下さい→[カウンターアプリ](https://takanoriokawa.github.io/CounterApp/)

##実現したいこと
1.ボタンをカチカチして数値を変更し、計算させる。
2.計算方法は足し算、引き算、掛け算、割り算を用意する。
3.計算方法の表記は、切り替えたタイミングで上に表示させる。


#コード
“`html:index.html




「Qiita」と「WordPress」のRSSを取得して、PHPで静的HTMLに表示する方法

#外部サイトのRSS情報を取得して表示させる方法

参考にしたページはこのあたり。
>PHPで外部サイトのRSS情報を取得して表示させる方法。 – 株式会社オンズ
>https://on-ze.com/archives/1615
>
>新着情報を受け取る！PHPでRSSを取得する方法 | TechAcademyマガジン
>https://techacademy.jp/magazine/18803

これで「Qiita」の記事を新着情報に表示させたい的なことをやろうとして、
サンプルはその通りにしたら表示されるのですけど、
「Qiita」のRSSフィードだと上手く行かなくてですねー、

結論として言うと
ページによって「RSSフィード」の形式が違うのが原因でした。

##output-rss-qiita.php
それで「Qiita」のRSS形式に合わせた
RSSフィードを取得して表示する「.php」がこちら

“`php

【初心者向け】ボタンホバー時に透過しても背景が見えないようにする方法

# どうも7noteです。透過時に背景が見えてしまう対策方法

背景色が入っている箇所の上にボタンを配置した時、ボタンがhoverで透過した際に背景色がうっすら見えてしまう対策方法について。

画像を使わずに、背景色で作成したボタンであれば次の方法で対策をすることができます。

（※ボタンが画像の場合は[こちら](https://qiita.com/7note/items/eba35487ccd7d2e099a8)）


## ソース

“`index.html

透けちゃう。

透けないよ！

“`

“`style.css
.box {
padding: 50px;

Webページ表示速度高速化、始めます！

# 背景
– 先週からWebページ高速化を勉強しはじめて、なんとか最初の改善リリースを終えました。
– TOPページとLPをリニューアルしたのですが、表示速度が極端に低くなった([PageSpeed Insights
](https://developers.google.com/speed/pagespeed/insights/)で5/100点！)ため、急いでWebページ高速化に取り組まざるをえなくなった。最終的には数日程度で50点近くまで上げることができた。
– とにかく急いでやったプロジェクトだったんですが、似たような状況に追い込まれた人のために、やったことを残しておきます。

# やったこと
## 1. 「初歩からのPageSpeed Insights」 を読む

とりあえずまず以下の本を読みました。

[重いサイトを軽くする、Webページ表示速度の高速化10の基本: 初歩からのPageSpeed Insights (にししふぁくとりー叢書)](https://www.amazon.co.jp/%E9%87%8D%E3%81%84%E3%82%B5%E3%82%A4%E3%

HTMLをコードとして実行する前に知るべきこと4選

#HTMLの構成
HTMLはコードとして実行する前に**やるべきこと・知っておくべきこと**が４つあります。
まずはHTMLの構成を理解することです。

HTMLは主に**head要素とboby要素**の2つの要素で構成されています。
それぞれ順にどんな役割があるのかを解説していきます。

##head要素
この要素はウェブサイトの見た目とは関係のない要素ですが、HTML&CSSを実行するならば欠かすことのできない要素です。
役割としては、**ウェブサイトの情報やCSSの読み込み、CSSファイルの情報を記載すること**が主な役割です。

具体例をあげると、ウェブページのタイトルとなる部分(ウェブページのタブの情報)、装飾するためのCSSファイルの指定、外部ファイルの読み込みなどを行います。
要するに**ウェブページには表示されない**けれどページのデザインをしたり、そのページがどんなページなのかを指定したりする**下準備**をするための要素ということです。

それでは実際の記述を見てみましょう。

“`

【JavaScript】要素に指定したCSSスタイルを取得したい！

#プログラミング勉強日記
2020年11月15日
ドットインストールでJavaScriptを学習中にふと、『CSSのスタイルはどうやって取得するのか？』と気になりました。
自分的には、ややこしかったので今後間違えないように記録していきます。

#取得したいこと
* CSSファイルに記述したbackgroundプロパティの値を取得したいと思います。


“`index.html

“`
“`style.css
.box {
width: 100px;
height: 100px;
background-color: rgb(204,204,204);
}
“`

#完成コード
まず最終的に取得で

aタグの下線、リンク色の変更方法(CSS)

ヘッダーのロゴを画像ではなく文字を使用する場合など、
aタグで囲むと設定されるデフォルト値の下線、リンクの(青)色の解除方法を記載します。

# text-decoration: none;を指定し下線を非表示

“`css:style.css
a {
text-decoration: none;
}
“`

# color: 色コード;を指定しリンクの色を変更
“`css:style.css
a {

の黒丸を非表示にする方法(CSS)

# CSSでliタグにlist-style:noneを指定する


“`css:style.css
li {
list-style: none
}
“`


【JavaScript / jQuery】Googleドライブに保存した画像をHTMLで表示させる

####はじめに

初めての投稿です。自分の復習も兼ねて、Qiitaに記事投稿していこうと思います。
至らない点があったらスミマセン。
今回JavaScriptでご紹介していますが、変数にGoogleドライブのURLを格納できる言語でしたらどの言語でも問題ありません。
というより、imgタグに直接記述するだけならHTMLのみで完結します。

内容

JavaScript,jQueryを利用してGoogleドライブの画像をHTMLに引っ張ってくるという趣旨の記事になります。

趣味でよくiPadを使ってイラストを描くのですが、描いた絵を自分の開設しているWebページへ表示させる時にPCに送ってサーバに送って・・・という作業が面倒だったので、iPadから直接Googleドライブに画像を置いて、そこからプログラムで引っ張ってくればいいじゃないかと思ったのが始まりです。

Googleドライブに画像を保存している前提で執筆していきます。

Googleドライブに保存した画像の設定を変更する

コンテンツを右クリックし、「リンクを取得」を選択します。
![スク

【初心者向け】画像のボタンホバー時、背景が透けてしまう問題の解決法2つ

# どうも7noteです。透過時に背景が見えてしまう対策方法

背景色が入っている箇所の上に画像のボタンを配置した時、ボタンがhoverで透過した際に背景色がうっすら見えてしまう対策方法について。

画像で作成したボタンの場合、2つの方法で対応することができます。

※ボタンをCSSのみ（背景色）で作成した場合は[こちら](https://qiita.com/7note/items/751a5a532cc1ed7f47b3)

**通常時**

**ただ透明にしたら後ろが透ける**

**対策すると・・

「画像でゴミ分類！」アプリ作成日誌day7～サイドバーのスライドメニュー化～

# はじめに
「画像でゴミ分類！」アプリ作成日誌7日目の今日はサイドバーのスマホ対応ということでHTML,CSS,JavaScriptをガッツリ書いて、横から出てくるスライドメニューを実装していく回です。

＜記事一覧＞

– [「画像でゴミ分類！」アプリ作成日誌day1～データセットの作成～](https://qiita.com/eycjur/items/7d8223b28758c7dfaaa0)
– [「画像でゴミ分類！」アプリ作成日誌day2～VGG16でFine-tuning～](https://qiita.com/eycjur/items/3e954cb70dc15f996c2d)
– [「画像でゴミ分類！」アプリ作成日誌day3～Djangoでwebアプリ化～](https://qiita.com/eycjur/items/9c618538177c82f7fdc3)
– [「画像でゴミ分類！」アプリ作成日誌day4～Bootstrapでフロントエンドを整える～](https://qiita.com/eycjur/items/7b58c28eb8b16e722b5d)
– [

【HTML】tableタグのメリットとデメリット

#プログラミング勉強日記
2020年11月14日
いつもはtableタグを何気なく使ってたけど、デメリットもあることを知り改めてtableタグの使い方をまとめる。

#tableタグとは
　tableタグは名前の通りテーブル(表)を作成するタグ。表の基本的な構造は、`

`内に`

`で表の1行を定義して、さらにその中に`

`でセルを定義する。
　テーブルの各セルには見出しを定義するヘッダセルと、データを定義するデータセルがあり、ヘッダセル内のテキストは一般的なブラウザでは太文字でセンタリングされて表示される。

“`html:HTML

スポーツ	種類	考案者
バスケ	球技	ネイスミスによって考案されたスポーツ

“`
実行結果
![image.png](https://qiita-image-s

rails６　form_with（ヘルパー）のラジオボタンにCSSを装飾する方法

目的：rails6にてform_withでラジオボタンを実装、それに対してCSSで装飾を行います。

苦戦したこと：ヘルパーを使っていることにより、ラジオボタンの内部構造が見えなくなってしまった。

①他のオプションと違いラジオボタンはclassをセレクタにしてもCSSを反映する事ができない。
②label forが設定されていない事により、選択作業が反映できないバグが発生。

以下、内容を記載。

①ラジオボタンはclassセレクタではCSSが反映されない。

HTML

CSS
.second{
font-size: 14px;
font-weight: bold;
display: block; /* ブロックレベル要素化する */
float: l

HTMLページがHerokuにデプロイできない時の対処法

##目次
[エラー内容](#エラー内容)
[解決方法](#解決方法)

## エラー内容
以前『Heroku』にデプロイした際におきたエラー内容です。

“`
! NO default language could be detected for this app.
HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
See https://devcenter.heroku.com/articles/buildpacks
! Push failed
“`

HTML,CSS,JSファイルだけのアプリケーションはHerokuではアプリケーションとして認識してもらえないみたいです。

## 解決方法
HTML,CSS,JSファイルのアプリケーションをPHPとして読み込ませる方法です。

追加するファイルは2つです。

index.php と composer.json です。

下記の様に『index.html』のメイ

【初投稿】売れた商品に対して、SoldOutの文字を出力する

条件式でexists?メソッドを使用し、指定したテーブル内のカラム名(item_id)と売れた商品(item.id)が一致したら商品にSoldOutの文字を出力するコードを書きました。

“`ruby:qiita.rb
<% if Order.exists?(item_id: [item.id]) %>

Sold Out!!

<% end %>
“`

私のコードの書き方で当たり前なことかもしれませんが、こういう動作をさせたいといいう目的がある場合、今回の動作であれば売れた商品にSoldOutを表示させたいという目的がありました。

その目的に対して、exists?メソッドはいきなり見つけたわけではなく、まず商品を購入してitem_idを商品情報と一緒にorderテーブル保存しているのでitem_idがorderテーブルにあることに気が付きます。

商品のid、item_idを見境なしに判別してしまうのは違うので、orderテーブルにitem_idが存在した場合トップページに存

DOM操作とは？【JavaScript】初心者の疑問

どうも、三町哲平です！

以前作成した[【JavaScript】分からない部分まとめてみたら最強だった件 – Qiita](https://qiita.com/TeppeiMimachi/items/b3528b4f37b06383b3cc)の記事は、現在(2020/11/14 時点)なんと25,000PVを超えました！

本当に読んでくれた皆様には、感謝、感謝なのですが、実際私は、確かに__JavaScriptの分からない部分はまとめた__のですが、JavaScriptに関しては依然素人も素人…

もう超ド素人な訳なんです。

そんな私のJavaScriptの謎の中に__DOM操作__というものがあります。

__JavaScriptの特徴の一つにDOM操作がありますよ！__なんて言われても超ド素人からすれば、その__DOM__が分からんよ…てな話

では、そのDOMについてのお話。

## まずは、ググってみる
Google先生に頼ってみますか。

「ドム　とは」

![スクリーンショット 2020-11-12 2.17.59.png](https://qiita-imag

HTML・CSSとは

#HTML・CSSの役割
HTMLとは**ウェブページの見た目を作る**言語で、CSSは**その見た目を整える**言語です。
つまり、HTMLはウェブページについての情報を記載する言語であり、CSSは記載した情報をユーザーにとって見やすいものにするための言語です。

それでは実際にどういう感じにプログラムを書くのか見てみましょう。

#HTMLの実際のコード

“`html

これは見出しです

“`

このような感じでHTMlのコードを書いていきます。
重要なのは**要素をタグで囲うこと**です。

タグとは**<>**このカッコのことで、ここに囲まれている部分が要素です
この例では「これは見出しです」が要素ということになります。
そして、この要素には様々な種類のものがあり、それぞれに役割があります。

例えば、このコードの**h1要素**は見出しを作る要素です。
h1要素の他にもh2~h6まであり、数が小さくなるほど見出しも小さくなります。
このようにHTMLではタグと要素の関係が基礎となってきます。

#CSSの実際のコード

“`css
h1 {
col

フォーム入力時に自動で名前やアドレスを補完してくれるアレ

あると便利なこの機能についてです。
使う側としても、住所などの長いものが一発ではまると気持ち良いですよね。実装のほんのひと手間でユーザーのフォーム入力の負担を軽減できるのなら、わたしはそれができる大人になりたいと思いました。
## autocomplete属性
ひと手間どころか、もはや知っているか知らないかなのですが、input要素にautocomplete属性を割り振るだけというお手軽さです。
下の例では、名前の場合は`autocomplete=”name”`、 メールアドレスの場合は`autocomplete=”email”`としています。

“`html

名前