はじめに FontAwesomeのアイコンをオリジナルアプリに取り入れています。 そこでサイズを変更がなかなかうまくいかなくて時間がかかったので投稿します。 間違えたこと <div class="review-gear"> <i class="fas fa-cog"></i> <i class="fas fa-trash-alt"></i> </div> .fas { width: 5px; height: 5px; } 変わりませんでした。。。 正解 .fas { margin-right: 5px; font-size: 25px; } 画像と勝手にとらえてたので勘違いをしていました。 このアイコンは文字ととらえfont-sizeなのかなと思いました。 ※正しいやり方かは分かりません・・・

発端 「女子トイレの一番奥の扉を３回ノックして、花子さん遊びましょって３回言うと花子さんが出て来るんだけど、順番や制限時間は定められていないの。２回ノックして３回名前を呼んで放置しておけば、誰かが扉を１回ノックしただけで花子さんが出てくるってわけ」「デバッカーみたいなことをするな」— 真弓創 (@nofun1978) July 9, 2021 この例があまりにも初学者向けに使いやすいと思ったので、投稿してみます。 引用では 一番奥となっていますが例を作るために少し変更しています。 取り急ぎ仕様 三番目の個室を三回ノックする 花子さんの名前を呼ぶ 花子さんが出現する 仕様通りに実装してみる ３回ノック(クリック)して、呼んでみると花子さんが出現されます。 See the Pen call_hanako_san_1 by keima (@matsugena) on CodePen. 仕様を疑え 三番目の個室を三回ノックする 花子さんの名前を呼ぶ 花子さんが出現する 上の３つの仕様書は全く足りていません 1.については、引用ツイートの通り事前にノックされてしまうことで破綻します。 あえて解説のため、グローバル変数として実装しています。 HTMLだと開いた時点で0になっていますが、多数が利用するトイレとして、同じページを複数回操作する再現にしました。 現実ではサーバー側で管理されると思います。 その場合でも、日付でリセットされるのか個人ごとに管理するのか、仕様を詰めるだけ詰める必要があります。 2.については、実装者(私)が呼んだことをトリガーに実装しています。 1.2. ２つの条件が揃った際に花子さんが出現するということなのかどうかを詰める必要があるでしょう。 3.花子さんが複数人出現する。 すでに何人ものハナコさんを召喚されているかたはここを読み飛ばしてください。 花子さんの上限は仕様からは読み取れません。 花子さんはひとりじゃないかもしれませんし、複数かもしれません。 ここも条件を詰めましょう。 仕様変更 さらに、仕様の変更が発生した場合どうなるでしょう。 花子さんは地域によって様々な呼び方ルーティンがあるようです。 例えば、一部の地域(localeId=11110)では、４番目のドアを１５回ノックした場合にだけ現れるようにしたいという変更がありました。 function callSomething(){ let name = document.getElementById('name').value; let localeId = document.getElementById('localeId') if(localeId != 11110 && knockCount == 3 && name === '花子さん'){ return appearHanakoSan(); }else if(localeId == 11110 && knockCount == 15 && name === '花子さん'){ return appearHanakoSan(); }else{ alert("しかし花子さんは現れなかった"); } } もちろん、上の実装はやってしまった例なので真似をしてはいけません。 さらに、別の地域でN番めのドアをM回ノックした場合に現れるようにしてほしいといった要望が続々発生し果ては呼び名も違う場合や時間の指定があることも想定しなければいけません。 else ifが地域の数やパラメータの数だけ増え続けます。 というわけで、改善例は以下になります。 function callSomething(){ let form = document.getElemetnById('nameForm'); let name = form.name; // クライアント側での最低限のエラーチェック if(!name){ return; // ユーザにエラーを知らせるべきですが、名前を呼ばれていないという認識として省略します } form.submit(); //送信されたサーバーで花子さんの出現をチェックしましょう } もちろんサーバーに実装できずクライアントで判定ロジックを実装しなければいけないこともありますが少数だと思います。 サーバーにロジックを用意することで、全国の学校(仮に5000として)のトイレで地域別に花子さんを用意する必要が発生した際に5000花子さんを用意する必要がなくなります。 まとめ 仕様変更が無いという言葉は信用するな 補足(アンチパターン:マジックナンバー) 仕様書の件と直接関わりはないですが、 花子さんを出現させるための、以下のif文ですが仕様の通り間違ってはいませんが、やってはいけない例(アンチパターン)になっています。 "3"番の個室 "3"回ノックする "花子さん"という名前 3つの値をif文で直接扱うことで実装した人にしか分からない数字及び文字列になっています。 以下の通り改善できるでしょう。 // 悪い例 if(toiletNumber == 3 && knockNum == 3 && callName === '花子さん'){ return appearHanakoSan(); } // 意味をもたせる例 const correctToiletNumber = 3; const correctKnockNum = 3; const correctCallName = '花子さん'; if(toiletNumber == correctToiletNumber && knockNum == correctKnockNum && name === correctCallName){ return appearHanakoSan(); } ロジックが複雑かつクライアントに実装しなければならない場合であれば、if内の条件式を関数化することも想定できます。

floatプロパティとは？ 
要素を横並びに配置することができるCSSコード。 書き方 float: 値； 「値」には、 ・left…左寄せ ・right…右寄せ 以下2つを使うことはあまりない。 ・ none…フロートやめる ・ inherit…継承させる 例） 以下のように横並びしたい時は…。 対象のクラスにfloat: left；。要素の２つともに記述すること。 floatの解除 -clearfix　-clearプロパティ floatの解除する理由は、floatプロパティによる回り込みを防ぐため！！ なので、clearfixという解除用classを親要素へ与え、子要素のfloatを解除することを行う。 clear fixの書き方 .clearfix::after { content: " "; display: block; clear: both; } clearfix::after…clearfixクラスの後ろ(after)に対しての要素に下記のCSSを適用するという意味。 content: “”;…「” “」の間に文字を入れる。 display: block;…指定された範囲をブロック要素に変換。 clear: 値;…値に入力された側に寄せられた要素に対する回り込みを解除。 both;【左寄せも右寄せも解除】 left;【左寄せされた要素に対する解除】 right;【右寄せされた要素に対する解除】

はじめに みなさん、Wikipediaは利用してますでしょうか？ 私はよく利用させていただいています。 サイトを利用している方なら下記のような、募金を促すお知らせをみたことがありますよね？ ↓↓↓ 募金の有無に関わらず、定期的に表示され邪魔に感じているのではないでしょうか？ 今回はUserJSを利用してパージしてみようと思います！ 準備 UserJSというサイト表示時にJavascriptを挿入してくれるChrome拡張機能を使用します！ User Javascript and CSS https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld 実装 まず、DOMを調べる このメッセージの箇所を調べます。 <div id="siteNotice"> id="siteNotice"というのがサイト全体のお知らせになっているようですね。 その中の、id="centralNotice"やclass="cn-fundraising", class="frb-xxx"辺りが 募金系のメッセージのようです (fundraising=募金) JSでDOMを削除する 今回は、サイトのお知らせ自体削除してしまいます。 (記事が見れれば問題ないですしね) UserJS window.addEventListener('load', () => { const siteNotice = document.getElementById('siteNotice') if (siteNotice) { siteNotice.remove() } }) ※ UserJSはheadタグ内に追加されるコードを記述できます いざ、実行 $\color{red}{\rm {Now\ it's\ clean!\ ?}}$ さいごに 今回は、UserJSを利用してWikiの募金メッセージを削除してみました。 DOMが変わると対応できなくはなりますが、広告削除などにも応用が効きますので よく利用するサイトであれば、UserJSなどでパージしておくと便利になるかなと思います！ ではでは　✈️

はじめに これからプログラミングを学習するにあたって、学ぶ言語について以下にまとめました。 （間違いがありましたら、ご指摘を頂けますと幸いです） HTML 言語の正式名称　 　ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略 　 ハイパーテキスト 　文書・画像・図表・音声・動画などのリンクを貼ったり、埋め込むことができる仕組み 　 マークアップ 　サイト内の文書に意味づけをしていく作業。 　HTMLでは文書をタグで囲むことで意味をつけていくことで、 　コンピューターが正しく認識できるようにする。 　 ランゲージ 　言語 開発された経緯　 　WEBページを作成するために開発された言語である 主にどのように利用されているのか 　ほとんどのWEBページにおける基本的な骨組みはHTMLで構成されている メモ 　SEO「検索エンジン最適化（Search Engine Optimization）」を意識しタグを使うことで、 　検索エンジンが、より正確に文書の中身を理解できるようになる。 　 　 CSS　 言語の正式名称 　カスケーティング・スタイル・シート（Cascading Style Sheets） カスケーティング 　カスケードとは、何段も連なった小さな滝のこと。 　転じて、同じものがいくつも数珠つなぎに連結された構造や、 　連鎖的あるいは段階的に物事が生じる様子を表す。 スタイルシート 　構造化文書などにおける表示形式を制御する仕組み。 　・・・WEBページのデザインやレイアウトなどの見栄えを変更できる 開発された経緯 　WEBページの見た目の部分を編集するために開発された 主にどのように利用されているのか 　文字のサイズや色、レイアウトなどのWEBページ上で表現される部分を 　細かく編集する際に用いられる。 メモ 　HTMLとセットで使用されることが多い。 　HTMLは「ページの構造」cssは「ページの装飾」を指定する言語といえる。 JavaScript（JS） 言語の正式名称 　ジャバスクリプト（JavaScript ）  開発された経緯 　元々はWEBページに動作をつけるために開発された 主にどのように利用されているのか　 　・ポップアップウィンドウを出現させる 　・ブラウザ上で画像を拡大表示してWebページを見やすくする 　・メッセージ送付フォームやパスワードの入力フォームなどを設置する　等 　 メモ 　クライアントサイドの言語である。（反対＝サーバーサイド言語） 　プログラミング言語のJAVAとは、全くの別物。メロンとメロンパンくらいの違う。 Ruby 言語の正式名称 　ルビー（Ruby） 開発された経緯 　まつもとひろゆき氏により開発されたオブジェクト指向言語・スクリプト言語である。 　全てのデータがオブジェクトとして扱う純粋なオブジェクト指向スクリプト言語であり 　可読性を重視した構文が特徴。 主にどのように利用されているのか 　Ruby on Railsというフレームワークを使うことで 　効率よくWEBサイトやWEBベースの業務システムを開発することができる メモ 　フリーソフトウェアであるため、無料で利用でき、コピー・変更・再配布が自由である。 　 Ruby on Rails 言語の正式名称 　ルビー・オン・レールズ 開発された経緯 　Rubyを使用したフレームワークの一つ。 　Rubyを使って簡単なコードでWEBアプリケーションの開発ができるように作られた 主にどのように利用されているのか 　クックパッド（お料理レシピサイト） 　グノシー（ニュースアプリ） 　食べログ（グルメサイト）　等 メモ 　Ruby on RailsはMVCアーキテクチャ（アーキテクチャ＝構造）で構成されており 　Model（データを扱う箇所） 　View（ユーザーが直接目にする箇所） 　Controller（ModelとViewの連携を行う箇所）の要素に分解し、開発を行う。 　 調べていて気になった単語 クライアントサイドとサーバーサイド ・クライアントサイド言語 　（JavaScript・CSSなど） 　WEBサーバーから結果がプラウザに返ってきて 　プラウザ側で処理するときに動作する言語 ・サーバーサイド言語 　（Ruby・PHPなど） 　サーバー内部で動く言語でデータベースの処理を行う仕組みを作る言語 　 コンパイラ言語とインタプリンタ型言語 　前提として 　・プログラムを実行するには、 　　機械で理解するように言語を翻訳（コンパイル）する必要がある 　・翻訳の方法の違いにより呼び方が異なる 　 ・コンパイラ言語 　記述したプログラムをコンピューターが理解可能な形式に事前に一括でコンパイルする言語 ・インタプリンタ型言語 　記述したプログラムを１行ずつコンパイルする言語 ＊気をつける点 　 インタプリンタ型言語≠スクリプト言語 　 スクリプト型言語とは 　開発で使用されるコードの内、読みやすく簡易的に記述できるプログラミング言語の汎称

概要 htmlのvideoタグをJavaScriptで操作する時の注意点です。 videoをpause()すると動画は停止するのですが、ロードは止まりません。複数の動画があり、一方を止めてもう一方を再生したら、両方ともロードし続ける場合があります。 videoタグの仕様を調べても解決方法は見つからず、ロードを止める方法を探すのに手間取りました。 解決方法 解決方法は以下の通りです。（解決してしまえば、納得） videoをpause()する。 sourceのsrcを空にする。 videoをload()する。 ちなみに、以下の方法はダメでした。ロードが続きます。 srcを空にした後、load()しない。 JavaScriptでvideoタグを削除する。 サンプルコード１ javascript const video = document.querySelector('video'); // 再生 video.play(); // 一時停止 video.pause(); // ロードストップ const source = video.querySelector('source'); source.src = ''; video.load(); サンプルコード２ ロードを止めた後、もう一度再生するためにsrcを扱いやすくしたサンプルです。 html <video loop muted playsinline preload="none"> <source src="" data-src="./mov/sample.mp4" type="video/mp4"> </video> javascript const video = document.querySelector('video'); const source = video.querySelector('source'); // 再生 source.src = source.dataset.src; video.load(); video.addEventListener('canplay', () => { video.play(); }); // 一時停止 video.pause(); // ロードストップ source.src = ''; video.load(); data-srcを使用するとvideoのpreloadが機能しません。もしpreloadを使いたい場合は、srcとdata-srcを両方書くか、JavaScriptでsrcの値を保持しておき、再再生時に使うと良いと思います。 おわり 再生もロードも止まるstop()が欲しいところですが、無いので自分で止めました。 こちらを参考にしました。 https://stackoverflow.com/questions/4071872/html5-video-force-abort-of-buffering