CSSファイルの設定を読み込んで一括背景色変更するコード。 #cssfile #javascript #coding #colors

20221130

Logging

おはようございます、先日の日曜日は原因不明の体調不良で寝込んでおりました(¦3[▓▓]。

今日は何とか体調が回復したので、CSSファイルの設定コード読み込んで一括背景色変更するプログラムコードを作成しました。※実際、自分のブログ・サイトで動いているコードになります。

<link rel="stylesheet" href="examplestyle.css">

導入方法はまずヘッダーに変更したいCSSファイルを記述します。次にbody内に下記のコードを記述します。

<span id="site_description"></span>

最後にJSコードを挿入します。JSコードはファイルで読み込むでもベタ書きでも良いのですが、上記のHTMLタグより下に記述してください。そうしないと動作しません😗。

let htmlcode = ["#efefef", "#181B39", "#262a2e", "#192734", "#1c483b", "#bf7800", "#83094f"].map(elm => `<span class='color_code' style='color:${elm}' data-color-code='${elm}'>■</span>`).join("\n");

const basecolor = "#262a2e";
let cookiefn = function (CodeColor) {
    let r = document.cookie.split(';');
    return r.length ? ((r) => {
        let changecolor = "";
        for (let ii = 0; ii < r.length; ii++) {
            let content = r[ii].split('=');
            for (let i = 0; i < content.length; i++) {
                if (content[i].replaceAll(" ", "") === "bgcolor_code") {
                    changecolor = content[i + 1];
                }
            }
        }
        return changecolor?changecolor:CodeColor;
    })(r) : CodeColor;
};

let old_color = cookiefn(basecolor);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
[...document.querySelectorAll(".color_code")].forEach(elm => {
    elm.addEventListener("click", function (e) {
        color_set(elm.getAttribute("data-color-code"));
    });
});

color_set(old_color);

function color_set(color) {
    for (let ii = 0; ii < document.styleSheets.length; ii++) {
        if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
            for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
                let element_css_code = document.styleSheets[ii].cssRules[i];
                try {
                    element_css_code.style.backgroundColor = color;
                    if (color === "#efefef") {
                        element_css_code.style.color = "#000000";
                        
                    } else {
                        element_css_code.style.color = "#FFFFFF";
                    }
//いらないかも領域🤔👇
                    document.querySelectorAll("#wp-calendar > tbody > tr > td > a").forEach(elm=>{
                        elm.style.backgroundColor = "#909091";
                    });
                    document.getElementById("searchsubmit").style.backgroundColor = "#000";
                    document.querySelector("#s").style.backgroundColor = "#909091";
                    [...document.querySelectorAll("code")].forEach(elm=>{
                        [...elm.querySelectorAll("span")].forEach(childen_elm=>{
                            childen_elm.style.backgroundColor = "#565656";
                        });
                    });
//いらないかも領域🤔👆                    
                } catch (error) {
                }
            }

            document.cookie = "bgcolor_code=" + color;
        }
    }
}

注意事項:背景色を変更するCSSファイルをJSコードでチェックしています。そのチェックしている部分を外すと全てのCSSファイルの背景色を変えることが可能です。

タグ

, body, coding, colors, css, cssfile, description, examplestyle, gt, href, ID, javascript, JS, link, lt, quot, rel, site, span, stylesheet, コード, サイト, ファイル, ブログ, プログラム, ベタ, ヘッダー, 一括, 下記, 不明, 不良, 今日, 体調, 作成, 先日, , 原因, 回復, 変更, 実際, 導入, 挿入, 方法, 日曜日, 最後, 背景色, 自分, 記述, 設定,


ブログ記事を書く作業/一コマ(キーボードが弾まない) #blog #vlog

20221129

Logging

おはようございます、続けるということは殆どの人にとって簡単なようで難しいことなのかもしれません😗(自分には簡単なことです)。

今日は毎日書いているブログ執筆の作業風景を取ってみました、作業と言ってもブログではそれ程、収益を上げていないので、ある意味奉仕活動のような気もしますが塵も積もれば山となる、ブログも積もれば資産となります。

ブログ記事を書く作業/一コマ(キーボードが弾まない)

因みに無償で提供している各Webサービスの方が収益を生み出していますし、メンテナンスとたまにする機能追加だけで、ブログの収益を軽く超えています…。そのことが何ともやりきれない感があります、どちらも自分が生み出したものですが、前者は日々の作業が発生し後者はほぼ作業が発生しません。

後者は言うなればマイナスがない株を値動きのようなものですね。でも自分としてはブログで花を咲かせたいです。WEBサービスは勝ちパターンみたいなものが見えてきていますが、まだまだコレではご飯が食べれない。もう三桁ぐらいアクセス数が上がれば質素な生活が送れるかも知れませんけどね。今はまだサーバー代などや各ドメインを相殺するレベルです。

タグ

blog, Vlog, web, キーボード, こと, コレ, サービス, たま, どちら, パターン, ブログ, マイナス, メンテナンス, もの, 一コマ, , 今日, , 作業, 値動き, 前者, 収益, , 執筆, , 奉仕, , 後者, 意味, , 提供, , 日々, , 機能, 殆ど, 毎日, , 活動, 無償, 発生, 簡単, 自分, , 記事, 資産, 追加, 風景,


超簡単なコード🦋マウス追従をする。 #javasriptcode

20221128

Logging

おはようございます。先週、土曜日の朝は雨がしとしとと降っていましたね☔。

そんな中で一つのデモコードの動画撮影をしていたのですがボツにしました。理由は超簡単過ぎるコードなので、再生回数が狙えそうにないなという判断からです(尺も短いし…)。でも一応コードを書いたのでソースコードはリリースします。タイトル通り、マウス追従するコードです。マウスポインターを一定の距離間隔で追従します。ソースコードはjavasriptだけ貼っていますが、CSSやHTMLを使用して円を描いています。そちらはデモサイトを検証して頂けたらと思います。

let circle = document.getElementById("circle");
document.body.addEventListener("mousemove",function(e){
    let a = e.currentTarget.getBoundingClientRect();
    let x = e.clientX - a.left;
    let y = e.clientY - a.top; 
    circle.style.top = `${y}px`;
    circle.style.left = `${x}px`;
    circle.style.transform = `translate(50px,50px)`;
})

余談:
この頃、ブログがスランプ状態ですね、キーボードも弾みません、波に乗っているときは結構早く一つの記事を書くことが出来るのですが全然ですね。そんな弾まないブログ記事作成の一コマの風景を動画に撮りました。明日の記事かYOUTUBEにアップしているので参照してみてくださいな(音楽は軽やかなんですけど…😅)。

タグ

addEventListener, body, circle, css, currentTar, document, function, getElementById, html, javasript, javasriptcode, let, mousemove, quot, コード, サイト, ソース, そちら, タイトル, デモ, ポインター, ボツ, マウス, リリース, 一つ, 一定, , 使用, 先週, , 再生, 判断, 動画, 回数, 土曜日, , 撮影, , 検証, 理由, 超簡単, 距離, 追従, 間隔, ,


オクトパストラベラー壱と弐が良さげ #マルチプラットフォーム #RPG

20221127

Logging

おはようございます、毎日5記事も記事を書いている人は強者だと思いますよ。例えばブロガーだったイケハヤさんとか、そうだったみたいです。自分も毎日記事を書くことは出来るけど、毎日記事を5記事は書いた事はありません。

さて、今日はPRGゲームの話です、ドット絵の進化系HD-2D(昔ながらのドット絵に3DCGの画面効果を加えた幻想的な世界)というシステムで作られた、オクトパストラベラーという作品(スマホ版:無料版)を少しだけプレイしてみたので感想を書いていきます。

『OCTOPATH TRAVELER(オクトパストラベラー)』紹介映像 総集編
オクトパストラベラー紹介映像

紹介映像を見てもらったら分かるかと思いますが、昔のFFをプレイしているかのようでいるのだけど、映像は綺麗だし戦闘システムややりこみ要素が結構豊富で長くプレイできそうなそんな作りになっているRPGだと感じました。

このオクトパストラベラーは今年(2022年)の12月に続編、オクトパストラベラー2が発売される予定です。スクエアエニックスで続編が発売されるということは、それなりに人気があるRPGだったという事を意味していると思います。

収益化が右肩上がりになればオクトパストラベラー1と2を購入してプレイしたいなと考えています。今は少し難しいけれども、面白そうな作品だなって…〆😆。

タグ

12, 2, 2022, , 5, DCG, FF, HD, PRG, RPG, イケハヤ, オクトパス, ゲーム, こと, システム, スマホ, ドット, トラベラー, プラットフォーム, プレイ, ブロガー, マルチ, 世界, , , , 今年, 今日, 作品, 効果, , 少し, , 強者, 感想, 戦闘, , 映像, 毎日, 無料, 画面, 発売, 紹介, , 続編, 綺麗, 自分, 要素, 記事, , 豊富, 進化,


ドラえもんは日本のディズニーかもなって。 #ネトフリ #STANDBYME2

20221126

Logging

おはようございます、土曜日の朝、太陽に感謝!🙏

勤労感謝の日にこの記事は書いています、スタンド・バイ・ミードラえもん2を観ました。前作を観たのでその勢いで観ました。何かディズニー映画を観ているようなそんな感覚ですね。のび太を見ていると何だか頑張ろうってなりますし、そして何だか温かな気持ちになりますよね。

『STAND BY ME ドラえもん 2』スペシャルPV ~菅田将暉「虹」ver.~
STAND BY ME ドラえもん2 予告

こういう作品を作っている人は心優しい人なんだろうなって思います。そして熱い情熱を持って作品を作っているのだろうなって見ていて感じました。藤子不二雄さんが描いていた未来とは違うところはいろいろとあるけれども、ロボットは登場しているし人工知能は着実に進化しています。

まとめ:未来は明るいと思って生きていけそうなそんな作品です、まさに日本のディズニーだと思いますし、夢がある作品だなって思います。子供に見せつつ大人が楽しんでいる作品なのかも。

昔懐かしいドラえもん是非、心温まる作品です。

タグ

2, BY, ME, STAND, STANDBYME, いろいろ, スタンド, ディズニー, ところ, ドラえもん, ネトフリ, のび太, はい, まとめ, ミー, ロボット, 予告, , 人工, 作品, 前作, 勢い, 勤労, 土曜日, , 大人, 太陽, 子供, , 情熱, 感覚, 感謝, , 日本, 映画, , 未来, 気持ち, 登場, 着実, 知能, 藤子不二雄, 記事, 進化,


理詰め。そんなに変わるだろうかと思う反面。 #人工知能 #シンギュラリティ

20221125

Logging

おはようございます、祝日の昨日は雨でしたね😗。今日は3記事ほど予約投稿出来ました。

そんな中、PIVOTの対談を朝(夜も)から観ていました。佐々木さんと対談された落合陽一さん。落合陽一さん曰く、シンギュラリティは再来年にはやってくるだそうです。

【落合陽一のシンギュラリティ論】シンギュラリティは2025年に来る/ディフュージョンモデルの衝撃/知的ホワイトカラーが没落する/最新版デジタルネイチャー/音楽と論文が数秒でできる

落合陽一さんが得意ではない方もいるかと思いますが、聞いていて日本は遅れているなというのは良くわかります。英語圏の方は人工知能を使用して絵を作成したり、音楽を作成したりすることが容易に出来るけど、日本人は英語力がない人が多いのでテキストで思い通りに人工知能に指示することが出来ない。

【落合陽一の未来予測】シンギュラリティ後の世界と人間/大恋愛時代が来る/国家意識が薄れ、戦争が増える/自分以外は死なない/ロボットが消費者に/体を鍛えて、感じよく生きよ/ビジネス書は意味がない
デジタルネイチャー時代

そんな感じなので、絵を創作するならstability.ai、音楽を創作するならmubert(Mubert-Text-to-Music)を落合陽一さんが使用していたように海外の人たちは、もうこういうツールを使い始めています。日本だけが特殊な環境にあるなって思うところはあります。いろいろな分野にAI(人工知能)が浸透していくのは時間の問題かもしれないと思います。

特にホワイトカラー職は大手から変わるじゃないかと思います。下請けに外注していた単純作業などは恐らくAIに取って代わられる運命に有ると思います。猫も杓子もAIを使いだしたら、世の中は大きく変わるじゃないかな・・・。

タグ

, AI, mubert, Mubert-Text-to-Music, PIVOT, stability, こと, シンギュラリティ, ツール, テキスト, デジタル, ネイチャー, , 予約, , 人工, 今日, 佐々木, 作成, 使用, 再来年, 創作, 反面, , 容易, 対談, 得意, 思い通り, 感じ, 投稿, 指示, , 日本, 日本人, 昨日, 時代, 曰く, , 海外, 理詰め, 知能, 祝日, , 英語力, 英語圏, 落合, 記事, 陽一, , 音楽,


諦めたいと思った時が続ける時だ。 #KeepGoing

20221124

Logging

おはようございます、昨日はPM4時頃から晴れましたね、高知県の話ですけどw。

さて祝日後の仕事は憂鬱かもですね。そんなモチベーションを下がった時に見る動画。動画でも強調している継続(努力)出来ない人が多い、継続は力なんだと思いますよ。

継続こそ最大の力なり -KEEP GOING-【モチベーション動画・継続系】- Motivational Speech

因みに、仕事で大事なのは何かと言えば気持ちです。前向きな気持ちになれる環境が大事になります、人を貶しているような環境の職場ヤバい、そんな環境では生産性は上がりません。そういうのは伝染します、そうなったら足の引っ張り合いが始まり大きな発展はしません。

環境作りは大事だということ、皆がやるぞという環境を作るのが上司の役割なのかなって思います、ダメなものはダメだという意識付けが大事なんだと思います。

マインドが大事、それは技術よりもです、技術は熟していくと最低限の技術は付きます。人を称えない会社に未来あるのかな🤔。

頑張りましょう、いってらっしゃい!!。

タグ

4, KeepGoing, PM, , こと, それ, ため, マインド, モチベーション, もの, 上司, , 仕事, 会社, 伝染, , 前向き, , 努力, 動画, 大事, 強調, 役割, 意識, 憂鬱, 技術, 昨日, , 最低限, 未来, 気持ち, 環境, 生産性, 発展, , 祝日, 継続, 職場, , , 高知県,


映画、そして、バトンは渡されたを観ました。 #ネトフリ #映画 #Netflix

20221123

Logging

おはようございます、水曜日の朝ですね、書いているのは月曜日の朝です。

今日は映画を一本観ましたのでその感想を書いていきます。本日、観た映画は「そして、バトンは渡された」です。劇場で観えなかったのでやっと観えたなって感じです、映画館に足を運ぼうと思っていたのだけども、ちょっと女性が多そうという理由で行かなかった映画ですが、この度、ネトフリで映画を観ました。

映画『そして、バトンは渡された』本予告 2021年10月29日(金)公開
そして、バトンは渡された 予告

この映画は小説「そして、バトンは渡された」を映画化したものです、原作の小説は読まずに映画を観ました。原作読んでしまうと完璧なネタバレを見たあとの映画という事になるので、小説よりも映画が自分は好きなので、そういう順番になりがちです。

さて、ネタバレ無しで映画の感想を一言で表すと「感動」ですね😭。いや、ホントこれに尽きるかなって思います。観て良かった映画ですし、一度は観て欲しい映画なのかもなって思います。今、ネトフリで観れるようになっています。因みにNetflixはある期間が過ぎると見えなくなったりするので、お早めに観たいと思う方は観といた方が良いですよ😗。

タグ

2, 4, 95, com, fKypJ, https, Netflix, watch, www, youtube, あと, これ, すね, ネタ, ネトフリ, バトン, バレ, ホント, もの, , 一言, 予告, , 今日, 劇場, 原作, 女性, 完璧, 小説, , , 感動, 感想, 映画, 映画館, 月曜日, , 本日, 水曜日, 理由, 自分, , 順番,


Chromeブラウザの拡張機能を新たに作ったお話。 #拡張機能

20221122

Logging

おはようございます、転職活動はあまりしていません😯。

本当なら就職出来ている頃だと思います。なぜならハローワークだけで活動しているので、他のスカウトは無視しているという変な転職活動をしています。今年欲しいという求人は人手不足な会社かなと思いますし、年末押し迫って転職できるとはとても思い難いです。頑張っている事は確かですが、今は難しいという思いもあります。

そんな中でChromeブラウザの拡張機能を新たに作ったお話です、一応、皆さんが使えるようにGさんに申請しました。どんな拡張機能を作ったのかと言えば、サイト内検索が出来る拡張機能です、特に難しいコードなどは使用していませんが、人様の拡張機能は少し不安なので自分で自作した訳です。どんな時に使用するかは人によって違うかも知れませんが、例えばITエンジニアならサイト内のドキュメント検索に使用できるかなって思います。今のリファレンスサイトなどはサイト内検索が出来るようになっているモノのそれでも抜け落ちている部分があるので、それを拡張機能の力で補えるかなと思います。

Chrome拡張サイト内検索機能の動作手順。
サイト内、検索のChrome拡張機能の動作手順。

因みに中のmainコードはこれだけです。コレでサイト内検索を行っています。

document.getElementsByName("txt")[0].addEventListener("keydown", (elm) => {
    if (elm.key === "Enter") {
        chrome.tabs.query({ 'active': true,'lastFocusedWindow': true }, function (tabs) {
            var site = String(tabs[0].url).match(/https?\:\/\/[a-zA-Z0-9|\.|\-]*\/?/)[0].replace(/https?:\/\//,"").replace(/\//,"");
            chrome.tabs.create({
                url:"https://www.google.com/search?q=site" + encodeURI(":"+ site + " " + document.getElementsByName("txt")[0].value)
            });
        });
    }
});

追伸:公開されました。拡張機能はこちら👉

https://chrome.google.com/webstore/detail/site-search/ipemphkmnkbnfonlpmgacnmhnhfimmll/related?hl=ja&authuser=0

タグ

Chrome, IT, エンジニア, お話, コード, サイト, スカウト, ドキュメント, ハローワーク, ブラウザ, リファレンス, 不安, , , , 人手, 人様, , 今年, , 会社, 使用, , 少し, 就職, 年末, 拡張, , 本当, 検索, 機能, 求人, 活動, 無視, 申請, 皆さん, 自作, 自分, , 転職, ,


お天気APIを試してみました。#超簡単コード

20221121

Logging

おはようございます、今日は天気APIの話なので天気のお話はしませんが…。

さて、超簡単コードを記載しています。下記のソースコードとオープンウェザーマップのAPIKEYがあれば、誰でもプログラマーです。という事を言えば後ろから蹴られそうですが…。先ずは簡単なコードを見て勉強するのが大事かなって思います。

お天気APIを試してみました。#超簡単コード
API

いきなり難しいことを身に着けようと思っても、三日坊主になって先に進まないのが世の常ですw。なので、簡単なコードで楽しんで勉強するほうが大事かなって。

<?php
require "./assets/config.php";
$lat = "33.55972";
$lon = "133.53111";
$lang = "ja";
$url = "https://api.openweathermap.org/data/2.5/weather?units=metric&lang={$lang}&lat={$lat}&lon={$lon}&appid=".APIKEY;
$hasWeatherdata = json_decode(@file_get_contents($url));
print($hasWeatherdata->weather[0]->description);
print("<img src='./assets/images/". $hasWeatherdata->weather[0]->icon .".png'>");
print((int)($hasWeatherdata->main->temp) . "℃");

タグ

0, 133.53111, 33.55972, API, APIKEY, assets, com, config, ea, https, ja, lang, lat, lon, lt, php, quot, require, url, , watch, www, Xn-VCyGQ, youtube, ウェザー, お話, コード, こと, ソース, プログラマー, マップ, 三日坊主, 下記, 世の常, , 今日, 勉強, 大事, 天気, 後ろ, 簡単, 記載, , , 超簡単,


結局のところ、今が大事なのかもな。#雌伏

20221120

Logging

おはようございます、どんより曇り空らしいですが晴れてるかも知れません😯。

さて、自分がフリー状態なのは自分が悪いからだと思っている。そうなったのは自分の責任でそこから、挽回するのも自分だと。正解には答えがないけど失敗には答えがあるわけで、失敗は改善すれば良いわけです。

obake – Unit-00

時代のせいにはしないこと、時代が悪くても何とかなる人はいるわけですからね。人を恨んだり、人を貶したりしても何も意味がないのです。

そして本当に大事と思うなら諦めないことですよ、雌伏(はやぶさより)ですよ。

タグ

こと, そこ, ところ, はやぶさ, フリー, わけ, , , , 大事, 失敗, 意味, 挽回, 改善, 時代, 曇り空, 本当, 正解, 状態, 答え, 結局, 自分, 責任, 雌伏,


AとBをテストするABテスト #abtest

20221119

Logging

おはようございます、土曜日の朝🌅。今日は高知県は雨らしいですね。

ABテストとは何かは割愛させてもらってABテストの話を書いていきます。自分はこのABテストを結構します。特にブログやYOUTUBEはABテストを行っています、プレビュー数、再生数はどうすれば伸びるのか、試すにはABテストは最適です。

【10分で分かる】ABテストについて統計学的観点も交えて詳しく解説!

そういうテストを繰り返して小技を蓄積していくと伸びるものが創れるようになるし、勘どころが分かるようになります。これは伸びる伸びないなどがよくわかります。

これをテストするにはある程度、訪問者や閲覧者がいないと出来ないです。初期のブログはなかなか訪問者数もいないのでテストが出来ないですが、YOUTUBE等は投稿すればチャンネル登録者数がいなくてもYOUTUBEのアルゴリズムで、ある程度表示してくれます。

YOUTUBEのアルゴリズムは関連性の高い動画だと認識させれば、再生回数は伸びますしアイキャッチなども結構大事です、それはブログもそうなんですけどブログの場合は記事の内容が大事になります。

滞在時間と離脱してから次の行動も恐らくですがGアルゴリズムもページの善し悪しに盛込んでいると自分は考えています。もし自分なら、そういうアルゴリズムにしますから・・・。

まとめ、ABテストはSEOというよりは、人に寄り添って考える事が大事なのかなって思います🙇。

タグ

ab, abtest, com, D-leDiVDiqU, https, watch, www, youtube, アルゴ, アルゴリズム, これ, チャンネル, テスト, プレビュー, ブログ, もの, リス, 今日, 何か, 再生, 初期, 割愛, 勘どころ, 土曜日, 小技, 投稿, 最適, , 登録者, , 自分, 蓄積, 表示, 訪問者, , 閲覧者, , 高知県,


chart.jsでデモを試してみました。📈 #javascriptcode

20221118

Logging

おはようございます、朝が早いですねと言われますが、夜が早いだけです😅。

さて、今日はchart.jsのデモを試してみました。売上のグラフとかコレで作るのが一番じゃないかなと思うライブラリですね。動画で編集してみせたのは二箇所ですが、実際、業務で使用する場合は3箇所ほど変更して使用しないといけないのかなって。

chart.jsでデモを試してみました。📈
chart.jsでデモを試してみました。📈

そういう訳で、こちらのブログにソース・コードを貼り付けておきます。

        const ctx = document.getElementById('myChart');
        let data = [12, 19, 3, 19, 2, 3];
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['demo1', 'demo2', 'demo3', 'demo4', 'demo5', 'demo6'],
                datasets: [{
                    label: '# of Votes',
                    data: data,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true
                    }
                }
            }
        });

業務で変更しないといけない最低限3箇所はこちらです~😆。

  • ラベル
  • データーセットの中のラベル
  • データーセットの中のデータ

上記の3箇所を売上のデータや何やらに使用することで活用できるかと思います。

タグ

12, 19, 2, , 39, bar, chart, const, ctx, data, document, getElementById, javascriptcode, JS, let, myChart, new, type, グラフ, コード, こちら, コレ, ソース, デモ, ブログ, ライブラリ, , , 今日, 使用, 動画, 場合, 変更, , 実際, , 業務, 編集, ,


md5でいいのかそれで?。 #wp #phpcode

20221117

Logging

おはようございます、いきなり寒くなりましたね。朝起きるのに勢いが必要になってきました😆。

今日はワードプレスでもパスワードの暗号化に使用されているmd5に関して思うことがあります。そもそもmd5は強固な暗号なのか?、答えはnoだと思いますよ。md5を使用すると32文字の暗号化された文字列が返却されます。確かに暗号化されているですけど・・・。同じ文字をもう一度、暗号化すると同じ文字列が返却されます、なので暗号化された文字列になるかどうかで、元の文字が割り出せてしまいます。

総当たりすれば時間はかかりますがパスワードが分かちゃうので、パスワードを保存する方法としては△な感じかと思います。じゃ何が良いかといえばphpの場合、password_hashと言う関数があるので、そちらを使用した方が得策かと思います。Eメールなどはmd5でも良いかも知れませんが微妙。

echo password_hash("rasmuslerdorf", PASSWORD_DEFAULT);

因みに、パスワードなどやメールアドレスを平文で扱っている開発会社はよく見かけます。何故、平文を放置しているかと言えば直す暇がないなどの理由からだと思います。また、クライアント様がそうして欲しいなどの理由もあります。そういう事から個人情報が保護されていないデータベースはあります。

尚、自分が使用しているWEBサービスも個人情報にあたる部分は暗号化しています。なので、データーが流出しても直ぐに情報が漏れるということはないと思っています🫠。

タグ

32, 5, echo, hash, md, no, password, php, PHPCODE, quot, rasmusl, wp, こと, そちら, パスワード, プレス, メール, ワード, 一度, 今日, , 使用, 保存, , 勢い, 場合, 得策, 微妙, 必要, 文字, 文字列, , 方法, 時間, 暗号, 暗号化, , 答え, 総当たり, 返却, 関数,


あるアプリをja>>enに対応したお話。 #translation

20221116

Logging

おはようございます、運用資産が爆上がってほしいこの頃です🫠(まぁ上がってるでは意味がない。)。

さて、そんな中、稼ぎ頭のあるWEBサービスを英語圏に対応させました。英語力は全然無いのでGさんの翻訳機能を使って静的サイトを構築してurlパラメーターで日本語サイトと英語圏サイトにわけているという感じです。何故、英語圏にも対応させたかというともっと収益化したいから。

CODE WITH ME: Build a Chrome Extension | How to Build & Publish a Chrome Extension in 10 Minutes?

それに尽きるですけどね。日本の市場だけ狙っていても多分、ココから先上手くいかないだろうなって思っています。英語がわかれば英語圏のお仕事を取れたりすると同じ考えです。

今はリモートワークで海外のお仕事を取れる時代になっていて、コネクションさえあれば日本にいて海外のお仕事を取れたりします。そして今は円安。ドルでお給与もらって円に変えても利益がある状態です…。

これから先もこんな感じが続くかと思います。なので、自分は英語駄目駄目ですけど、英語が分かる方や喋れる方はとても優位なポジションになると思っています。

日本はもう後退国ですからね、日本だけの市場を狙っていても上手くはいかないと思います。

タグ

en, ja, translation, url, web, アプリ, お仕事, お話, ココ, コネクション, これ, サービス, サイト, それ, ドル, パラメーター, リモート, ワーク, , , , 円安, 利益, 収益, 対応, 市場, 意味, 感じ, 日本, 日本語, 時代, 構築, 機能, 海外, 状態, 稼ぎ頭, 給与, 翻訳, 自分, 英語, 英語力, 英語圏, 資産, 運用, , 駄目,


ザ・プレイリストを観ました。 #シーズン1 #ネトフリ#Spotify

20221115

Logging

おはようございます、日曜日(2022/11/13)は昼から高知県は夏日でしたね😯。

そんな日曜日にネトフリのザ・プレイリストを観ましたので感想なんかを書いていきます。ザ・プレイリストはSpotifyという会社の創業物語を色々な視点で描いた作品です。今では日本でも認知度は高めかと思いますが、昔はそれほど日本では認知度は高くなかった、そんなスポティファイは社名であり、音楽のストリーミングサービスのアプリ名でもあります。

The Playlist | Official Trailer | Netflix

今では、当たり前になったストリーミングサービスですが、ドラマを観ると技術面や著作権問題なんかでは、かなり苦労されている印象を受けました。特にこのサービスが上手くいったのは技術者と著作権問題をクリア出来たことにあると思います。

そしてプログラマーが難問を解く姿勢には頭下がりますね、本当に偉いなと思った次第です。最後にはルールを作って問題解決をしたところなんて、本当に凄い。天才プログラマー無くしてこのサービスは成り立っていないと・・・。

因みに後には残しての感想なのですが、恐らく印象は変わらないかなと思います。

タグ

, 11, 13, 2022, Spotify, アプリ, かなり, クリア, こと, , サービス, シーズン, ストリーミング, スポティファイ, ところ, ドラマ, ネトフリ, , プレイ, プログラマー, リスト, ルール, , 会社, 作品, 創業, 印象, 問題, 夏日, 天才, 姿勢, 当たり前, 感想, 技術者, 技術面, 日曜日, 日本, , , 最後, 本当, 次第, 物語, 社名, 色々, 苦労, 著作権, 視点, 解決, 認知, 難問, 音楽, , 高知県,


htmlとcssとphp-初学非同期処理とおまけ-No.3

20221114

Logging

おはようございます。月曜日の朝ですね‥お仕事探しは続いています。

さて、非同期処理とは何かと問われると詰まりますが・・・。いつ結果を返してくれない処理といえば良いのでしょうか。じゃ同期処理はといえば仕事が終わるまで次の仕事を進めない事といえば良いのかな🤔、教えるのが下手なのでぐぐってみてください。

document.querySelector(".btn").addEventListener("click", () => {
    let p = [document.querySelector("[name='name']").value, document.querySelector("[name='text']").value];
    [...document.querySelectorAll(".put")].forEach((elm, index) => {
        elm.innerText = p[index];
    });
    document.querySelector("#box2").style.display = "none";
    document.querySelector("#data").insertAdjacentHTML("beforeend", `<button class="btn2" type="button">非同期送信</button>`);
    document.querySelector(".btn2").addEventListener("click", async () => {
        //submit code
        let url = "./submit.php";
        let data = (() => {
            return ([...document.querySelectorAll(".put")].map((elm, index) => {
                return "test" + index + "=" + elm.innerText;
            })).join("&");
        })();
        const options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                "Content-Length": data.length,
                'Accept': 'application/json'
            },
            body: data //JSON.stringify(data)
        };
        await fetch(url, options).then(response =>
            response.json()
        ).then(resultdata => {
            document.getElementById("view").insertAdjacentHTML("beforeend", resultdata.test0 + "," + resultdata.test1);
        }).catch(error => {
            console.log(error);
        });
    });
});


function imgchg(imagename){
    document.body.setAttribute("style","background-image: url(./assets/images/" + imagename + ".jpg");
}

ぐぐると自分言っていた意味がなんとなく分かるかと思います。ちなみに非同期動画(youtube)のおまけとして、背景画像を変える処理のソースコードを書いています。プログラムコードとしては3行ですが、初学者の方はこの3行のソースコードの方が面白いのかもしれません。自分が書いたソースコードを所々、変更して動かしてみてください。そうすることで、徐々にコードの意味が理解してくると思います。

追伸:サンプルサイトの動画は少しお休みします()?

https://358tool.com/sample-site/

タグ

, 39, addEventListener, btn, click, css, document, gt, html, let, name, no, php, querySelector, querySelectorAl, quot, Text, value, いつ, おまけ, お仕事, , 仕事, , 処理, 初学, 同期, 月曜日, , , 結果,


映画、イントゥ・ザ・スカイ~気球でみらいを変えたふたり #アマプラ

20221113

Logging

おはようございます、昨日は晴天でしたね、この頃、暖かい日が続きます。

さて、遅ればせながら映画、イントゥ・ザ・スカイ~気球でみらいを変えたふたりを観ましたので感想を残しときます。実話を着色した映画になっていますが、よく出来ている映画。映画をあまり観ない人には悪くない評価を得そうな映画です。

【公式】『イントゥ・ザ・スカイ 気球で未来を変えたふたり』2020年1月17日(金)公開/本予告
イントゥ・ザ・スカイ~気球でみらいを変えたふたり~

自分の場合、映画をよく観ているので、ストーリー展開が在り来りかなと思えてしまってどうも見応えたっぷりだったとは言えなかったですが、これは自分の主観なので一般人とはズレているのかなと思います。

まとめ、映画の予告を観て観たいと思った方は観てみても良いじゃないかと思います。

タグ

アマ, イントゥ, これ, , スカイ, ストーリー, ズレ, , ふたり, プラ, ミライ, 一般人, 主観, 予告, , 場合, 実話, 展開, 感想, , , 映画, 昨日, 晴天, 気球, 着色, 自分, 見応え, 評価, ,


POSTとGETの考え方について伝えている動画。 #以心伝心

20221112

Logging

おはようございます、11月なのに寒くないって不思議です😗温暖化。

さて、POSTとGETの考え方について無音声(音楽あり)で伝えている動画です、以心伝心で意味が通じると良いですが、それではブログを書いている意味がないので要点だけ解説します。POSTとGETとは、インターネット上でデータの送信を行うのに使用します。POSTの利点はデータを隠して送れることと、比較的に重いデータも送れることにあります。ではGET送信の利点は、SEOに有利と言ったところでしょうか。

htmlとcssとphp-初学POSTとGETの考え方-No.2
htmlとcssとphp-初学POSTとGETの考え方-No.2

今回、POST送信とGET送信を行い、PHPのプログラムでPOSTとGETを受信する方法を動画で伝えています。次回は非同期処理を使用して送受信を行う方法をプログラムで書いていきます。

HTMLとPHPプログラムは下記のソースを参照下さいませ🙇。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo site</title>
    <style>
html {
    width: 100vw;
    height: 100vh;
}

body {
    background-color: rgb(0, 0, 0);
    color: aliceblue;
    background-image: url(./assets/images/aig-mid22910-120-xl_TP_V.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

div.box {
    border-color: aliceblue;
    border-style: inset;
    position: absolute;
    width: 300px;
    height: 450px;
    color: white;
    border-radius: 1em;
    padding: 1em;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    /* background-color: #ffffff80; */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-wrap: break-word;
    text-align: center;
}

div>form>p {
    font-weight: bold;
    margin: 13px;
}

input {
    opacity: 0.5;
}

textarea {
    opacity: 0.5;
}

button {
    padding: 5px;
    border-radius: 1em;
    border-style: solid;
    border-color: aliceblue;
    background-color: aliceblue;
    color: rgb(0, 0, 0);
}
button:hover{
    border-color: rgb(255, 255, 255);
    border-style: inset;
    background-color: rgb(27, 76, 119);
    color: aliceblue;
}
.put:nth-child(2){
    overflow: auto;
    height: 120px;
}
    </style>
</head>
<body>
    <div class="box">
        <div id="box2">
            <form action="submit.php" method="post">
                <p>名前:<input type="text" name="name"></p>
                <p><textarea name="text" id="" cols="30" rows="10"></textarea></p>
                <p><button class="btn" type="submit">確認</button></p>
            </form>
        </div>
        <div id="data">
            <p class="put"></p>
            <p class="put"></p>
        </div>
    </div>
    <script src="./assets/js/main.js"></script>
</body>

</html>
<?php
var_dump(xss_d($_POST));
print(xss_d($_POST["name"])."<br>");
print(xss_d($_POST["text"])."<br>");

function xss_d(mixed $val){
    if(!isset($val))return false;

    if(is_array($val)){
        foreach ($val as $key => $value) {
            $val[$key] = strip_tags($value);
            $val[$key] = htmlspecialchars($val[$key],ENT_QUOTES);
        }
    }else{
        $val = strip_tags($val);
        $val = htmlspecialchars($val,ENT_QUOTES);
    }

    return $val;

}

タグ

11, 2, css, DOCTYPE, GET, html, lt, no, php, POST, SEO, インターネット, こと, ソース, データ, ところ, ブログ, プログラム, 下記, 不思議, 今回, 以心伝心, 使用, 処理, 初学, 利点, 動画, 参照, 受信, 同期, 意味, 方法, 有利, 次回, 温暖化, 考え方, 要点, 解説, 送信, 送受信, 音声, 音楽,


映画 #すずめの戸締まり を観てきましたので感想を残しときます。 #ネタバレなしです、溢れそう。

20221111

Logging

こんにちは、映画を観終わった後も余韻が残っていてその余韻の中でこの記事を書きました。

映画予告とは全然違う印象何だかけど、想像していたストーリーとぜんぜん違うだけど、凄く良い内容の本編でした。自分は前もって小説なども読まずに映画予告を観ただけで映画館で本編を観たわけですけども、小説読んでいた人たちもおそらく想像以上の映像だったんじゃないかと思います。

『すずめの戸締まり』予告【11月11日(金)公開】
すずめの戸締まり

凄く良いという言葉が適切かどうか分からないけれども、新海誠監督が伝えようとしていることは、伝わる映画でした。今まで新海誠監督の長編映画を観てきた中で、一番ダイレクトに伝わってきた気がします。「言の葉の庭」「君の名は」「天気の子」、そして「すずめの戸締まり」どれも良い作品になっているこんな監督あまりいないと思います。

改めて新海誠監督の凄さが分かった気がします。

作品を作ってくれて、ありがとう。

タグ

こと, すすめ, ストーリー, ダイレクト, どれ, わけ, , 予告, , 余韻, 作品, 内容, 印象, , , 天気, , 小説, , , 想像, 感想, 戸締まり, 新海誠, 映像, 映画, 映画館, 本編, , 監督, 自分, 言の葉, 言葉, 記事, 適切, 長編,


cssとjsを動的に読み込むソースコード2。#jscode

20221111

Logging

おはようございます、すずめの戸締まりを本日、観に行きますという事で本日はお休み。感想は帰ったら別途書きます。

以前、ファイルを動的に再読み込みする方法という記事を書きまして、この記事がまぁまぁプレビュー数を取ってくれているので、ソースコードを書き直しました。以前と違うのは正規表現を見てくれればわかるかと思いますが、パラメータを初期からもっているJSファイルやCSSファイルは対象外にしている所です。

メンターがいない中、コードを見直したりするのはやっぱ時間がかかるものですね。いつも自分に必要なのはメンターだと思ったりしますが、なんだかそういう人が見当たらないですよね。やはり東京や大阪にいかないと見つけられないのかな?、今ではSNSがあるから見つけやすくなっているものの、自分よりも50%ぐらい技術力がある人がいないですよね。凄い技術力が上の人は知っているのだけども、そういう人の話を聞いてもさっぱりなので・・・。

近くにいないものなのかな、よく灯台下暗しという言葉もあるからいそうな気がするですけどね🫠。

ソースコードはこちらです。

"use strict";
document.querySelector("button").addEventListener("click",jsandcssreload);
function jsandcssreload(){
    let d = (new Date()).getTime();
    [...document.querySelectorAll("link")].forEach((elm)=>{
        elm.href = elm.href.replace(/(\.css)\??[0-9]{0,}$/,".css?" + d);
    });
    [...document.querySelectorAll("script")].forEach((elm)=>{
        elm.src = elm.src.replace(/(\.js)\??[0-9]{0,}$/,".js?" + d);
    });    
}

タグ

2, 50, css, JS, jscode, SNS, お休み, コード, すすめ, ソース, パラメータ, ファイル, プレビュー, メンター, もの, , , , , , 以前, 初期, 別途, 大阪, 対象, 必要, 感想, 戸締まり, , 技術力, 方法, 時間, 本日, 東京, 正規, 自分, 表現, , 記事, ,


データからページネーションが出来る。 #jscode

20221110

Logging

おはようございます、昨日は朝が寒く昼間は暑い日でしたね😗。

さて、データからページネーションが出来るライブラリがある事を知りましたのでそちらの紹介と使い方です。今回、使用したのはPagination.jsというライブラリです。使い方は簡単、下記のようなデータがあった場合、このようなソースコードを書いて使用します😮。

[
  {
    "id": 1,
    "name": "白川 正人",
    "hiragana": "しらかわ まさと",
    "age": "45",
    "bday": "1977年04月10日"
  },
  {
    "id": 2,
    "name": "大村 麻衣子",
    "hiragana": "おおむら まいこ",
    "age": "42",
    "bday": "1979年12月11日"
  },
  {
    "id": 3,
    "name": "大原 静香",
    "hiragana": "おおはら しずか",
    "age": "53",
    "bday": "1969年06月20日"
  },
  {
    "id": 4,
    "name": "吉田 佐代子",
    "hiragana": "よしだ さよこ",
    "age": "40",
    "bday": "1982年05月24日"
  },
  {
    "id": 5,
    "name": "宮原 和弘",
    "hiragana": "みやはら かずひろ",
    "age": "22",
    "bday": "2000年04月29日"
  },
  {
    "id": 6,
    "name": "伊藤 二郎",
    "hiragana": "いとう じろう",
    "age": "27",
    "bday": "1995年02月18日"
  },
  {
    "id": 7,
    "name": "井上 明子",
    "hiragana": "いのうえ あきこ",
    "age": "55",
    "bday": "1967年06月26日"
  },
  {
    "id": 8,
    "name": "恩田 雄",
    "hiragana": "おんだ ゆう",
    "age": "37",
    "bday": "1985年09月25日"
  },
  {
    "id": 9,
    "name": "山崎 幸志",
    "hiragana": "やまざき こうじ",
    "age": "29",
    "bday": "1993年03月24日"
  }
]
        $.extend($.fn.pagination.defaults, {
            className: 'paginationjs-theme-blue',
            pageSize: 3
        });
        let url = "json data のurl";
        (async () => {
            await fetch(url).then((result) => result.json()).then(
                (data) => {
                    data.reverse();
                    $('#demo').pagination({
                        dataSource: data,
                        callback: function (data, pagination) {
                            var html = table_make(data);
                            document.querySelector("#tbl").innerHTML = html;
                        }
                    })
                }
            )
        })();

        function table_make(data) {
            return (data.map((element) => {
                let str = "";
                str += "<tr>";
                str += ((Object.keys(element).map(el => "<td>" + element[el] + "</td>")).join(""));
                str += "</tr>";
                return str;
            })).join("\n");
        }
            <div class="col-12" id="demo">
                <table class="table table-dark" id="tbl"></table>
            </div>

コードを抜粋して書きましたが、このコードを書く事とjsのライブラリとcssファイルもダウンロードするようにして下さいね🫠。

因みに自分はこのライブラリを初めて使用しましたが、結構使いやすいですね。今まで開発ではLaravelなんかのページネーションを使用していた事はありますが、フロント側で出来る事を知り驚きを隠せませんというのは大袈裟ですけど使い道は有るなって思います。

タグ

04, , 10, 1977, 2, 45, age, bday, hiragana, ID, JS, jscode, name, Pagination, qu, quot, コード, しらかわ, ソース, そちら, データ, ネーション, ページ, まさと, ライブラリ, 下記, , 今回, 使い方, 使用, 場合, , 昨日, 昼間, , 正人, 白川, 簡単, 紹介,


Gドライブの画像仕分けがGASを使うと楽すぎでした! #gas #jscode

20221109

Logging

おはようございます。昨日は暖か陽気でしたね~?、今日はどうかな?🤔

今日はGoogleドライブで画像仕分けが楽すぎた件を書いていきます。GASとはgoogle apps scriptの略です、このGASを使用するとGmailやスプレッドシート、Googleドキュメント等をプログラムで操作出来ちゃうサービスです。尚、プログラムコードはjavascriptベースになっていてとても書きやすいです。

function imagesDrive() {
  //画像を仕分けフォルダID googleドライブURL->adaoiujxzouaunWxz33oam__ (ランダム英数字記号の部分)
  const folder = DriveApp.getFolderById('画像を仕分けフォルダID'); 
 //移動先のフォルダID googleドライブURL-> UQIJjaoskamlqaxalp98swq--e (ランダム英数字記号の部分)
  const imgfolder = DriveApp.getFolderById('移動先のフォルダID');
  let hasfiles = folder.getFiles();
  while(hasfiles.hasNext()){
    let hasfile = hasfiles.next();
    if(/(\.png|\.jpg)$/.test(hasfile.getName())){
      hasfile.moveTo(imgfolder);
    }
  }
}

今回、上記のようなコードを書いてサクサクと画像の仕分けを行いました。正規表現パターンを変えたりする事で任意の文字列ファイルだけを別フォルダに移動したりコピー、または削除したりすることも可能です(※コードの追加や変更が必要)。GASのエディタではコード補完機能もあるので初めての方でもプログラマーなら何とかなると思います。

プログラム初心者の方へ、jpg,png,gif等をそれぞれのフォルダに別けたい場合はどのようなコードを書いたら良いでしょうか?上記のコードをヒントにコードを書いてみて下さい。回答に関しては下記に一つの答えとして書いています。

function imagesDrive() {
  //画像を仕分けフォルダID googleドライブURL->adaoiujxzouaunWxz33oam__ (ランダム英数字記号の部分)
  const folder = DriveApp.getFolderById('画像を仕分けフォルダID'); 
 //移動先のフォルダID googleドライブURL-> UQIJjaoskamlqaxalp98swq--e (ランダム英数字記号の部分)
  let folderId = {png:'移動先のフォルダID1',jpg:"移動先のフォルダID2",gif:"移動先のフォルダID3"};
  Object.keys(folderId).forEach((keyname)=>{
    let imgfolder = DriveApp.getFolderById(folderId[keyname]);
    let hasfiles = folder.getFiles();
    while(hasfiles.hasNext()){
      let hasfile = hasfiles.next();
      let r = new RegExp("(\."+ keyname + ")$");
      if(r.test(hasfile.getName())){
        hasfile.moveTo(imgfolder);
      }
    }
  });
}

タグ

33, 39, adaoiujxzouaunWxz, apps, const, DriveApp, folder, function, GAS, getFolderById, Gmail, Google, gt, ID, imagesDrive, javascript, jscode, oam, script, UQIJjao, url, コード, サービス, シート, スプレッド, ドキュメント, ドライブ, フォルダ, プログラム, ベース, ランダム, 今日, , 使用, 操作, 昨日, 画像, , 移動, 英数字, 記号, 部分, 陽気,


The Peripheral:接続された未来。 #アマプラ

20221108

Logging

おはようございます、昨日の朝はなんだか寒かったですね🫠。

ペリフェラル -接続された未来のシーズン1の一話だけ観ました、一話だけなのでココから面白くなるかも知れませんが、ちょっとグロいシーンが一話の最後あたりにあったりして自分はこれからもこういうシーンが出てくるのかなと思い一話観ただけでお腹いっぱいになり観るのが止まっています。

The Peripheral Season 1 – Teaser Trailer | Prime Video
The Peripheral:接続された未来

ストーリーは面白いけど、結末は現実か仮想なのかが分からなくなって主人公が潰れてしまう気がします。もし自分が現実と仮想世界か見分けがつかないゲームにハマったら多分、一話目で潰れて人格が崩壊してしまいそうです😨。

でも、その内、そういう世界になるという事だけは確かな事です。脳にダイレクトに信号を送り仮想ゲームを楽しめるようになると・・・(何故、言い切れるかといえばこういう事が出来だしたからです「脳波から言葉を生成するAI「Brain-to-Text」 “声道”への指令を解読、言葉に変換」)。

そういう事への警鐘を鳴らす作品だと思います。

トイウコトデ、二話以降は時間の合間、合間に見ていこおうと思っています。

タグ

, AI, Brain, Peripheral, The, アマ, ゲーム, ココ, これ, シーズン, シーン, ストーリー, ダイレクト, プラ, ペリフェラル, , 世界, 主人公, , 人格, 仮想, 信号, , 崩壊, 接続, 昨日, 最後, , 未来, , 現実, 生成, 結末, , 脳波, 腹いっぱい, 自分, 言葉,


htmlとcssとjavascript-初学フロント側-No.1#code

20221107

Logging

おはようございます。今年もあと2ヶ月もないわけですよね早いものですね😮

htmlとcssとjavascript-初学フロント側-No.1という動画をYOUTUBEにUPしたのが昨日の9時のこと。これで理解出来るか、どうか分からない。解説もない教えもない、唯コードを書いているところを見せてるだけです。ソースコードは下記のサイトから参照できますが、次の動画作成のためにデザインや処理が変わっていたり、動作しなくなってたりするので注意が必要です。

https://358tool.com/sample-site/

自分はHtmlやcssはあまり覚えていないのですが、分かるのはそれなりに基本ベースがあるからだと思ってます。今からHtmlやcssを学ぶ人は全部を覚えようとはせずに、手を動かしてコードを書くことから始めて下さい。そのうち基本ベースは身につくことになると思います。

因みに自分が書いているclassの名前付けなどの書き方は駄目な書き方ですので、そういう所、お仕事として書く場合は会社によってキマりなんかが有りますので、そういう事まで知りたい人はこちらの動画を参照ください。

実戦マークアップ

タグ

, 2, 358, , cl, Code, com, css, html, https, javascript, no, sample-site, tool, UP, youtube, うち, コード, こと, これ, サイト, ソース, それなり, ため, デザイン, ところ, フロント, ベース, もの, 下記, , , 今年, 作成, 全部, 処理, 初学, 動作, 動画, 参照, 基本, 必要, , 昨日, , 注意, 理解, 自分, 解説, ,