下記 | zip358.com - パート 2

dockerでlaravel環境構築したお話。 #hosts

2022.12.08

おはようございます、今日は早朝に明日の記事を書いています😆。

さて、dockerでlaravel環境構築したお話を書いていきます、Dockerの環境でApacheをインストールし、バーチャルホストを設定してwindows側のhostsも変更しDocker側のhostsも設定、起動確認も取れたので、一旦Dockerを終了し再度立ち上げるとDocker側のhostsが初期値に戻っている🤔。

Dockerの話は明後日ぐらいにします🙆‍♂️ pic.twitter.com/RTd06XAkxH
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) December 6, 2022

これDockerの仕様らしいので、下記のようにdocker-compose.ymlを設定(extra_hosts)するか、Docker runでコンテナを立ち上げる場合はパラメーター–add-hostを付与してあげないといけない😳。

version: "3"
services:
  web:
    image: almalinux:latest
    container_name: Apache_v2.4
    ports:
      - 80:80
    privileged: true
    command: /sbin/init
    extra_hosts:
      - "example1.com:127.0.0.1"
      - "example2.com:127.0.0.1"
    volumes:
      - E:\var\www\html:/var/www/html

docker run --add-host=example1.com:127.0.0.1 .....

尚、Docker側のhostsを変更しないまま、立ち上げてもLaravelは動かないと思います。何故、動かないかはここでは割愛させて頂きます🙇。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2022年12月08 06:00日

タグ

--add-host, ３, almalinux, ap, Apache, container, docker, docker-compose, extra, hosts, image, Laravel, latest, name, quot, run, services, Version, web, Windows, yml, インストール, お話, これ, こんてな, バーチャル, パラメーター, ホスト, 一旦, 下記, 今日, 仕様, 付与, 側, 再度, 初期, 場合, 変更, 早朝, 明日, 構築, 環境, 確認, 終了, 記事, 設定, 起動,

Photo by Singkham on Pexels.com

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

2022.11.30

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ファイルの背景色を変えることが可能です。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年11月30 06:00日

タグ

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

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

2022.11.21

Logging

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

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

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

API

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

<?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.webp'>");
print((int)($hasWeatherdata->main->temp) . "℃");

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年11月21 06:00日

タグ

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, ウェザー, お話, コード, こと, ソース, プログラマー, マップ, 三日坊主, 下記, 世の常, 事, 今日, 勉強, 大事, 天気, 後ろ, 簡単, 記載, 話, 誰, 超簡単,

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

2022.11.12

Logging

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

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

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.webp);
    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;

}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年11月12 06:00日

タグ

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

Photo by Quang Nguyen Vinh on Pexels.com

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

2022.11.10

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なんかのページネーションを使用していた事はありますが、フロント側で出来る事を知り驚きを隠せませんというのは大袈裟ですけど使い道は有るなって思います。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年11月10 06:00日

タグ

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

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

2022.11.07

Logging

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

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

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

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

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

https://www.youtube.com/watch?v=pDhmhB1qI-0

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年11月07 06:00日

タグ

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

Photo by cottonbro on Pexels.com

windowsパッケージマネージャー平たく言えば #windows

2022.10.13

Logging

おはようございます、寒さが足元から来る季節になりましたね😖。

さて、今日はwindowsパッケージマネージャーのお話をします。windowsパッケージマネージャーとはなんぞやという方もいると思いますので、簡単な説明を記載しときます。ウィンドウズパッケージマネージャーとは、Windowsにインストールされているソフトの管理をするものです。

コレだけ覚えとけば🙄
winget upgrade –all pic.twitter.com/8wjsPpVMO1
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) October 10, 2022

Windowsパッケージマネージャーがインストールされていない方は、こちらのURLからインストール下さいませ。

これをインストールする事により何が良いかと言えば、ソフトウェア（アプリ）のアップデートが一括で出来たりします。コマンドプロンプトに下記のコマンドを入力すればほぼ自動でアップデートしてくれてとても便利です。

winget upgrade --all

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年10月13 06:00日

タグ

all, upgrade, url, Windows, winget, アップデート, アプリ, インストール, ウィンドウズ, お話, こちら, コマンド, これ, ソフト, ソフトウェア, パッケージ, プロンプト, マネージャー, もの, 一括, 下記, 事, 今日, 何, 便利, 入力, 季節, 方, 管理, 簡単, 自動, 記載, 説明, 足元,

WP予約投稿ツイートプラグイン作り方。＃php言語 #code #v2

2022.10.11

Logging

おはようございます😤 お仕事に飢えてます…寒い季節ですね…。

さて、今日はWP予約投稿ツイートプラグイン作り方を記載していきます。ワードプレスでプラグインを作る場合はWordPressの下記の場所に任意のフォルダを作り、その中にディレクトリ名（任意名）と同じファイル名でphpファイルを作ります。※昔の名残なので今は命名が違っても動くかも知れませんが・・・。

cd /wp-content/plugins
mkdir mytweets
vi mytweets.php

そして、命名したファイル名を開き、ファイルの上部に下記のコメントを記載します。プラグイン名やプラグインの説明、プラグインバージョンをそれぞれ変更して頂き保存、その後サーバーサイドにアップロードします（フォルダごと）。

<?php
/*
Plugin Name: My tweets
Description: tweets
Version: 1.0
*/

これで何も動作しないプラグインが出来上がります。

後はコマンドラインからプラグインフォルダにcomposerをインストールしtwitteroauthのライブラリを入れます。

此処までが前手順です。此処までで挫折した人は結構いると思います🙄。

因みに此処までの事がすんなりと出来る人は、このブログの情報は必要ないものです。なのでココからはソースコードを記載します。WP予約投稿ツイートプラグインなんてオチャノコサイサイだと思います。

<?php
/*
Plugin Name: My tweets
Description: tweets
Version: 1.0
*/
if (!defined('ABSPATH')) exit;
require_once  "tw-v2-config.php";
require_once  "./vendor/autoload.php";

use Abraham\TwitterOAuth\TwitterOAuth;

function mytweets($new_status, $old_status, $post)
{
    
    if ($new_status == 'publish' && $old_status != 'publish') {
        try {
            $connection = new TwitterOAuth(APIKEY, APIKEYSECRET, ACCESSTOKEN, ACCESSTOKENSECRET);
            $connection->setApiVersion('2');
            $response = $connection->post('tweets', ['text' => get_the_title($post->ID) . "\n" . get_permalink($post->ID)], true);
        } catch (\Throwable $th) {
            //throw $th;
        }
    }
}
add_action('transition_post_status', 'mytweets', 10, 3);

上記のコードを記載した上で上書き保存＆アップロードします。その後ワードプレスの管理画面よりプラグインを有効にして出来上がり、今回はtwitteroauthのライブラリを使用しましたがcrulなどのを理解している人はライブラリは特に必要ないのかなとも思います。ライブラリを使用すればお手軽ですが、万が一何かあった時に困るのでライブラリを使用せずにコードを書くという方もいらっしゃると思います。

自分も極力、公式のライブラリしか使わないようにしています🙇。

トイウコデ、ワードプレスのプラグインの作り方でした。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年10月11 06:00日

タグ

2, cd, Code, description, lt, mkdir, My, mytweets, name, php, plugin, plugins, Tweets, Vers, vI, WordPress, wp, wp-content, アップロード, お仕事, コメント, サーバー, それぞれ, ツイート, ディレクトリ, バージョン, ファイル, フォルダ, プラグイン, プレス, ワード, 上部, 下記, 中, 予約, 今, 今日, 任意, 作り方, 保存, 名残, 命名, 場合, 場所, 変更, 季節, 後, 投稿, 昔, 言語, 記載, 説明,

Photo by Abby Chung on Pexels.com

基本情報技術者試験ワード集と単語帳作りアプリで学習の下準備をする方法！ #FE #英語 #効率

2022.10.06

Logging

おはようございます、朝、３時半頃から起きています😪。

先日から英語の勉強をアプリではじめました、自分が使用しているのはモノグサというアプリです。このアプリをインストールしたのは二年前の話です、そのアプリを使用して効率良く英単語を覚えていってます、なんかよく分からないけど覚えて行けている🙄。

夜のピックアップモノグサというアプリ🙄
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) October 2, 2022

さて、それとは別に本題のお話です、単語帳作りアプリを使って基本情報技術者試験に出てくるワードを再学習しています。ワードの方は基本情報技術者試験ドットコムから引っ張ってきています、そのワードをCSV化してアプリに入れました。個人的に使用している分にはOKですが、これを公開や共有するとNGになりますので使用時はお気をつけてください🙇。

ワードを収取する方法はブラウザのコンソール画面に下記のコードを貼り付けて収集しました。
基本情報技術者試験ドットコムのキーワード集「あ」から「ん」までのリンクページをそれぞれ開きコンソール画面でコードを実行して、それをUTF8のファイルにペーストして一つのファイルにしてCSV保存。本当はnode.jsでコードを書いて実行でもしようかなと思っていたのですが、それすら面倒くさいと思ったので、こちらの地味な方法を選択しました。尚、行末に必要なカンマを追加して上げてくださいね🙄。

let s = [];
let $moji = function(m){
   return String(m).replace(/[\,|\n|'|"]/g," ");
};
Object.keys(document.querySelectorAll(".big")).forEach((e)=>{
    s[e] = "'" + $moji(document.querySelectorAll(".big")[e].innerText) + "'" + "," + "'" + $moji(document.querySelectorAll("ul > li > div > div")[e].innerText) + "'";
});
copy(s.join("\n"));

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年10月06 06:00日

タグ

３, CSV, FE, NG, OK, アプリ, インストール, お気, お話, キーワード, コード, これ, コンソール, それ, ドットコム, ブラウザ, モノグサ, ワード, 下準備, 下記, 二, 使用, 先日, 公開, 共有, 分, 効率, 勉強, 半, 単語帳, 収, 収集, 取, 基本, 学習, 情報, 技術者, 方, 方法, 朝, 本題, 画面, 自分, 英単語, 英語, 試験, 話,

Photo by Vlada Karpovich on Pexels.com

検索されなかったワード埋もれた価値について! #javascript #php

2022.09.26

Logging

おはようございます、今日は引き落とし日です🫠。

さて、今日は検索されなかったキーワードの価値のお話です。此処で言う検索されなかったというのは、エンターキーや検索ボタンを押さなかった、キーワードの価値のお話です、たぶん、その情報をGさんは収集してそうな気がします。GサイトやYサイト等のキーワード収集は基本出来ませんが、自サイトの検索フォームの情報を収集出来ます。

此処からは技術的なお話になりますが、検索ボタンを押した時とは別に文字入力をしたときの挙動を感知するプログラムを導入する事により比較的簡単に導入できるかと思います。例えば下記のようなjavascriptコードを検索フォームに導入します。

document.getElementById("sh").addEventListener("input",(e)=>{
    $.ajax({
        type: "post",
        url: "example.com/sh.php",
        data: {text:this.value},
        dataType: "json",
        success: function (response) {
            
        }
    });
});

あとはPHP側でデータを受信しデータベース等に保存すれば良いだけです。この検索されなかったワードは、結構価値があると思います。より細かな情報を取得したい方はIPアドレスやどのページからの情報なのかも取得可能です。

これらのデータを元に販路開拓は十分出来ると思います。情報を保存する際に大量の情報が収集されるので、保存先に一工夫必要になります。JSで制御する手段もありますが、それだとあまり情報収集出来ないですからね。

因みにこのサイトに情報収集の処理は導入していません（今後の導入は未定）。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年09月26 06:00日

タグ

addEventListener, ajax, document, getElementById, gt, input, javascript, php, quot, sh, エン, お話, キーワード, コード, サイト, ターキー, とき, フォーム, プログラム, ボタン, ワード, 下記, 事, 今日, 価値, 入力, 収集, 基本, 導入, 情報, 感知, 挙動, 文字, 日, 時, 検索, 此処, 気, 簡単, 自,

ページ無限スクロールの作り方 #インフィニティ#InfinityPageScroll #JavaScript

2022.09.22

Logging

おはようございます、台風１４号が過ぎ去ってからいきなり秋模様ですね🫠。

さて、先日ツイートしたページ無限ループが出来るJavaScriptコードを書きました。これを作ろうと思ったキッカケは、自分が運営しているWordPressサイトに巷のページ無限スクロールプラグインが尽く（ことごとく）使用出来なかったので自分で自作した訳です。因みにページ無限スクロールプラグインとはページを送りをしなくてもページの最下までスクロールすると次頁を読み込んでくれるプラグインの事を指します。

下記のコードは自サイト専用なのでそのまま使用することは出来ませんが、重要な部分だけ抜き取って再利用すれば、独自のページ無限ループに対応することは可能かと思います。

👇自分のサイトが特殊なので使えないので自前する。
作り方は明後日のブログに書きます💦。

Infinite Scroll インフィニティスクロール＝無限スクロールhttps://t.co/4oFZDaOpJK
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) September 20, 2022

コードを読んで頂ければ分かることですが、重要なポイントはページを読み込む方法とそれをDomに変換する方法だと思います。まず、ページを読み込む方法は下記のファンクションで可能です。

fetch(next_url).then(
                response => response.text()
            ).then(data => {

そしてDomに置き換えている所はこの部分になります。これら２つの箇所が重要になります。

                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');

これらの事に注意して独自コードを書いてみてください。最後に全コードを記載しときます。


let cnt = 2;
let blk = 0;
async function nextpage() {
    if (cnt !== blk) {
        blk = cnt;
        await (async () => {
            let next_url = "https://fox-black.com/blog/page/" + cnt;
            return await fetch(next_url).then(
                response => response.text()
            ).then(data => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');
                let blogs = doc.querySelectorAll('.blogpage');
                cnt++;
                if (blogs[0].innerHTML !== undefined) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", (function (elm) {
                        let str = "";
                        for (const key in elm) {
                            const element = elm[key];
                            if (element.innerHTML !== undefined) {
                                str += "<div class=\"blogpage\">" + element.innerHTML + "</div>";
                            }
                        }
                        return str;
                    })(blogs));
                } else {
                    if (document.querySelector("#fin") === null) {
                        document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                    }
                }
            }).catch(error => {
                if (document.querySelector("#fin") === null) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                }
            });
        })();
    }
}

if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
    window.addEventListener("scroll", async function () {
        let s = (() => {
            let tgt;
            if ('scrollingElement' in document) {
                tgt = document.scrollingElement;
            } else if (this.browser.isWebKit) {
                tgt = document.body;
            } else {
                tgt = document.documentElement;
            }
            return tgt;
        })();
        if (document.querySelector("#fin") === null && s.scrollTop >= (s.clientHeight - 650)) {
            await nextpage();
        }
    });
} else {
    document.querySelector(".foxpage").addEventListener("scroll", async function () {
        if (document.querySelector("#fin") === null && document.querySelector(".foxpage").scrollTop >= (document.querySelector(".foxpage").scrollHeight - 300)) {
            await nextpage();
        }
    });
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年09月22 06:00日

タグ

14, dom, InfinityPageScroll, javascript, WordPress, インフィニティ, キッカケ, コード, こと, これ, サイト, スクロール, それ, ツイート, プラグイン, ページ, ポイント, ループ, 下記, 事, 作り方, 使用, 先日, 利用, 可能, 台風, 変換, 対応, 専用, 巷, 方法, 最下, 模様, 次頁, 無限, 秋, 自, 自作, 自分, 訳, 運営, 部分, 重要,

Photo by Rodolfo Clix on Pexels.com

ヘンテコな学習ヘンテコな呟き😌。説明不足はいつものこと🤔

2022.09.13

Logging

おはようございます、夜中のほうが学習効率高いです🌃。

昨日、一つ出来そうなことを連続的につぶやいたので、それを皆さんが理解できる内容に文章としてまとめたいと思います。まず昨日の晩に下記のつぶやきをしました。これを追って何をしたいのかや何が理解できたのか、分かった方はこれから書くことを読まなくても良い人です。

こういうツールを自前して購入履歴までのデータやカゴ落ちしたデータを収集する。データを機械学習にかける。そのデータからサイト構造なんかを見直す。こういう事が出来るエンジニア増えてきている気がするけど？
問題はどれぐらいの容量が必要なのかという事ぐらいかな？
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) September 11, 2022

まず、次のアイディアが生まれました、アクセス解析を自前してサイトの訪問者の動向を事細かに蓄積する事は出来ないだろうか、もし出来たらどのような事が出来るだろうか🤔？考えた結果、ECサイトなら購入する確率、ページ推移の予測などが出来ること、ページ単位だとどの場所にどんなデザインを置けばクリック率が上がるのかなどそういう事が、アクセス解析のデータから割り出す事が出来るのではないかと。

次にページを可視化するには、どうすれば良いのだろうかという疑問。調べていくうちに隣接行列で可視化（数値化）出来ることがわかった。これからどうすれば予測出来るのだろうかと考えた結果。ページの可視化は隣接行列で表わすことが出来るが、今の自分ではココから予測データを導き出せないなと思い、隣接行列は可視化するために使おうと考えを改める。

では、どうすれば予測できるかを考察した。まず機械学習の予測にはどのような種類があるのか、どのようなデータを与えれば適切な予測を導き出すことが出来るのかを調査。最終的にランダムフォレストという手法で予測するのが今の自分でも出来そうな方法ではないかと判断に至った😌。

尚、機械学習で注意しないといけないのは過学習【過剰適合 / オーバーフィッティング】により上手く予測出来なることがあることを注意しないといけない。

そして思ったことは、自分でも出来そうだなって事🤐。もう機械学習は参考書を買わなくてもYOUTUBEやネットで調べれば、なんちゃって機械学習予測は出来るようになっているということ。後はどんなデータを機械に与えるか、そしてどれぐらい学習させるのか。そういう事が大事になってくる事を理解したのだった。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年09月13 06:00日

タグ

EC, アイディア, アクセス, いつも, うち, クリック, こと, これ, サイト, それ, データ, デザイン, ページ, ヘンテコ, 一つ, 下記, 予測, 事, 人, 何, 内容, 効率, 動向, 単位, 可視, 場所, 夜中, 学習, 推移, 数値, 文章, 方, 昨日, 晩, 次, 理解, 疑問, 皆さん, 確率, 結果, 自前, 蓄積, 行列, 解析, 訪問者, 説明, 購入, 隣接,

一億円の配当金が入るXさんの利回りを調べてみました。

2022.08.19

Logging

おはようございます、今日は偏頭痛もなく一日を過ごしたいです。

先日、株式デイトレーダーで生活している人、その界隈では有名なテスタさんが下記の呟きをしていたので、配当利回り率を調べてみました。

ついにここまで来ました・・( ；∀；)

夢の不労所得口座５７https://t.co/XUQCjPOk7V
— テスタ (@tesuta001) August 17, 2022

配当利回りを見ると殆どの銘柄で配当利回り５％超え。配当利回り率の高い銘柄では７％超えの物もありました、平均すると５％超えになります。データで見てみると意外に手堅いなと思う反面、結局、堅実派が勝つだなって印象を持ちました。

必勝法なんて無くて株が下がりだしたら売って、株が買値より高くなったら売る、その繰り返しで坦々と出来る人、そして復習と明日の策を考えられる人がトレーダーとして勝っていくだろうなって、そういう意味ではIT関係者はそういう素質を持っている人は結構多い気がします。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年08月19 07:00日

タグ

5, 7, IT, データ, デイトレーダー, テスタ, トレーダー, 一, 一億, 下記, 人, 今日, 偏頭痛, 先日, 利回り, 印象, 反面, 堅実, 平均, 復習, 必勝法, 意味, 明日, 有名, 株, 株式, 殆ど, 気, 物, 生活, 界隈, 策, 素質, 買値, 配当, 配当金, 銘柄, 関係者,

Photo by cottonbro on Pexels.com

2023年７月からGA4に変わるだってさ。桐島くん。

2022.07.20

Logging

おはようございます。下記の記事には桐島くんは関係ありません😌。

2023年７月からGA4に変わるそうです、一年前から告知している、Gさん。自分は2022年の７月から変わるだと思い込んでAnalyticsの対応を全て行いました。対応後、2023年じゃんって気づいて吐息…😩。

さてGA4になるとどのように変わるのか、例えばユーザーのカウントの仕方が変わったりするそうですね。今までのカウントの数え方よりもっと厳密になるそうです。そして今まで（GA3）はリアルタイムに反映されていた訪問者数が今のところ、翌日に反映されるように！！これはあまり有り難くない仕様変更です。リリースされる頃にはリアルタイムに変更されていることを願ってます。

【新登場 Google Analytics 4】を分かりやすく解説（基礎知識編）

ともあれ、2023年７月から無料版GA3は廃止され、GA4に移行しなくてはならないです。アクセス解析のソースコードの入れ替えを行わないといけないので、WEB業界としてはちょっと美味しいメンテナンス作業ですね。費用が発生すればの話ですけど・・・。

詳しい仕様変更の違いを呟いている人やサイトがありますので、詳しい違いはそちらを参照ください。尚、自分としてはUI（ユーザーインターフェース）がガラリと変わって少し戸惑いました。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年07月20 05:22日

タグ

-GA, 2022, 2023, ３, 4, 7, Analytics, web, アクセス, あれ, カウント, コード, こと, これ, ソース, ところ, ユーザー, リアルタイム, リリース, 一, 下記, 今, 仕方, 仕様, 全て, 反映, 吐息, 告知, 変更, 対応, 廃止, 数え方, 桐島, 業界, 無料, 移行, 翌日, 自分, 解析, 記事, 訪問者, 関係, 頃,

Photo by SHOCKPhoto by Szoka Sebastian on Pexels.com

覚えとくと良いChromeの小技？大技！？

2022.07.06

Logging

おはようございます。お腹すきすぎて目が覚めました・・・。

今日はChromeブラウザの小技を紹介していきます。まずお使いのChromeのバージョンを知りたい場合、アドレスバーに下記のように入力するとバージョンが確認できます。わざわざ、ヘルプから見ないでも詳細な情報が見れます。

chrome://version/

次にChromeタブを閉じずに再起動したいなど、そういう事がある方は下記のURLsをアドレスバーに入力してみてください。すぐに再起動がかかります、また再起動後、タブは保持されたままです。

chrome://restart/

その他、いろいろな機能があります、どんな機能があるのか知りたい場合は下記の情報を入力してみてください。

chrome://chrome-urls/

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年07月06 05:14日

タグ

Chrome, chrome-urls, restart, URLs, Version, アドレス, いろいろ, お使い, お腹, その他, タブ, バー, バージョン, ブラウザ, ヘルプ, まま, わざわざ, 下記, 事, 今日, 保持, 入力, 再起動, 場合, 大技, 小技, 情報, 方, 機能, 次, 目, 確認, 紹介, 詳細,

退職日まで日数を求める・JSでカウントダウンコードを構築してみた😆

2022.07.02

Logging

おはようございます。ちょっと退職後の事を思うと不安が過りますが、何とかなる何とかします😆。

さて、退職日まで後何日あるかを確認出来る物を作りました、土日はカウントしない場合も考慮しています。このコードは人様のコードを拝借して再構築したものになります。

参考にしたサイトはこちらです。土曜日、日曜日は除くように新たに無名関数を入れ込んでいます。土日はカウントせず月曜日のカウントになります。JavaScriptのコードは下記になります。HTMLコードに敢えて記載しません、ご自由に書き換えて試してくださいませ。

var showDiffDate = function( tYear, tMonth, tDay) {
    var nowDate = new Date();
    var dnumNow = nowDate.getTime();
    var targetDate = new Date( tYear, tMonth-1, tDay );
    var dnumTarget = targetDate.getTime();

    var diffMSec = dnumTarget - dnumNow;
    var diffDays = diffMSec / ( 1000 * 60 * 60 * 24 );
    var showDays = Math.ceil( diffDays ); 
    var Msg;
    if( showDays >= 0 ) {
       Msg = "" + showDays + " days(" + function(){
         var is_days = parseInt(parseInt(showDays) - Math.floor(showDays / 7) * 2);
         is_days = (nowDate.getDay() === 0)?is_days -2:is_days;
         is_days = (nowDate.getDay() === 6)?is_days -3:is_days;
         return is_days;
       }() +")";
    }
    else {
       Msg = "" + (showDays * -1) + "";
    }
    return Msg;
 };

 document.getElementById("days").innerText = showDiffDate(2022,7,15);

尚、このコードはそれほど難しいことはなく難易度で言えば最も簡単なコードだと思います。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年07月02 05:44日

タグ

date, dnumNow, function, getTime, html, javascript, JS, new, nowDate, showDiffDate, targetDate, tDay, tMonth, tY, tYear, var, カウント, カウントダウン, コード, こちら, サイト, もの, 下記, 不安, 事, 人様, 何日, 参考, 土日, 土曜日, 場合, 後, 拝借, 日数, 日曜日, 月曜日, 構築, 無名, 物, 確認, 考慮, 記載, 退職, 関数,

Photo by Josh Sorenson on Pexels.com

Windows10~起動時にアプリ（ソフト）を自動起動させる方法です。

2022.06.23

Logging

おはようございます。隠しフォルダーが見える環境です。

さて、今日のお題はITエンジニアなら朝飯前のことだと思います。「Windows10~起動時にアプリ（ソフト）を自動起動させる方法です。」知らなかったら恐らくとても運の良いITエンジニアかと思います。方法を箇条書で記載しますねーーー😌。

隠しフォルダが表示できるようにエクスプローラーの設定を変更します（ググって）。
下記のフォルダ場所まで移動します（ユーザー名はご自身の環境によって違います）。
移動したフォルダにご自身が自動起動したいアプリのショートカットリンクファイルをコピペ（コピーアンドペースト）します。
再起動してみてアプリが自動起動している事を確認する。

C:\Users\ユーザー名\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup

職場のPCが変わったりした時は必ず最初にやっていた作業になります。これをすることで出社しPC立ち上げ後、アプリの立ち上げなどは全くしなくて良くなります。因みにショートカットリンクにパラメーターを与えてあげることで、もっと短縮できる可能性があります。そこは割愛します。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年06月23 05:11日

タグ

10, AppData, IT, menu, microsoft, PC, Programs, Roaming, start, Startup, users, Windows, アプリ, アンド, エクスプローラー, エンジニア, こと, コピー, コピペ, ご自身, ショートカット, ソフト, ファイル, フォルダ, フォルダー, ペースト, ユーザー, リンク, 下記, 事, 今日, 再起動, 場所, 変更, 方法, 時, 朝飯, 環境, 確認, 移動, 箇条書, 職場, 自動, 表示, 記載, 設定, 起動, 運, 題,

Photo by asim alnamat on Pexels.com

Gさんのスマートグラスはスマホの次の覇者になるのかなぁ🤔

2022.05.20

Logging

おはようございます。これが投稿された頃には梅雨になっているかもしれません。

Gさんのスマートグラスはスマホの次の覇者になるのかなぁ🤔、下記の動画を見てください。

Breaking down language barriers with augmented reality | Google

これは凄いなって思います。それぞれ中国語と英語を喋っているのにコミュニケーションが取れている。他にも出来ることが増えていくと思います、特に自分が期待しているのは、誘導です。ここで言う誘導とは仕事の効率的にする誘導や初めての街を歩く時に目的地までの誘導などに期待しています。

今でもGさんはグーグルマップでライブ機能（スマホカメラ使用）すれば出来るのですが使用している人を見たことがありません。理由は道に迷っているという事がわかるからだと思いますが、スマートグラスを使用して同じ事ができればバレずにグーグルマップが誘導してくれると思います。

【#GoogleIO2022】スマホを時代遅れにしちゃうスマートグラス、ついに！！

最終的にはスマートグラスだけで完結することが出来るようになると思いますが、最初はBluetoothでスマホからデーターを転送し表示させる機能になると自分は思っていますが、Gさんはいきなりスマートグラスで全てを完結したものを提供してくれるかもしれません。

いやースマートグラスにはかなり夢がありますね！！

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年05月20 06:17日

タグ

com, ExJ-sISIJrY, https, watch, www, youtube, カメラ, グーグル, クラス, ここ, こと, コミュニケーション, これ, スマート, スマホ, それぞれ, バレ, マップ, ライブ, 下記, 中国語, 事, 人, 今, 仕事, 他, 使用, 初めて, 動画, 投稿, 時, 期待, 梅雨, 機能, 次, 理由, 目的, 自分, 英語, 街, 覇者, 誘導, 道, 頃,

Photo by Brett Sayles on Pexels.com

光の速さでUSBを繋ぐ、いずれ全て通信処理は光の速さで行うことになるのか？

2022.05.02

Logging

おはようございます。

月曜日休めばかなりの長期のお休みを頂ける人もいると思います。さて、今日のお題は下記になります。尚、自分で考えたお題なのに引用で記載しています😂。

光の速さでUSBを繋ぐ、いずれ全て通信処理は光の速さで行うことになるのか？
zip358.com

先日、光ファイバーでできたUSBケーブルが登場しました。そうだよね～。光で伝送すれば一番早いよねと・・・・。この技術は他にも応用できると思いますし、もうその研究は始まっていると思います。パソコン周りの機器のデータ転送は光で通信を行うことが当たり前になると思いますし、LANケーブルも光ファイバーで作られる日も近いかも知れません。

光ファイバーでできたUSBケーブル登場転送速度10Gbps、最長15m https://t.co/LBArFGsf72 #情報源 #feedly
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) April 28, 2022

通信速度が速くなるということは、その分データの取り出すのも速くなるということですから、ハッキングされた場合もデータを瞬時に取り出すことが可能になるということです。光ファイバー技術は良いようで悪いこともありますね。本当に大切なデータは古いパソコンの中に保管して、ネットにも繋げない状態で保管していると、案外データは取り出しにくいのかも知れません。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年05月02 05:51日

タグ

358, com, LAN, USB, zip, お休み, かなり, ケーブル, こと, データ, パソコン, ハッキング, よねと, 下記, 人, 今日, 他, 伝送, 先日, 光, 光ファイバー, 全て, 処理, 分, 可能, 周り, 場合, 引用, 当たり前, 応用, 技術, 日, 月曜日, 機器, 登場, 瞬時, 研究, 自分, 記載, 転送, 通信, 速度, 長期, 題,

デジタルマネーへシフトしようとか言っているのかな？

2022.04.15

Logging

おはよう御座います。

今日はこの一週間の中で一番手抜きな記事ですが、一番、いま自分が思っていることです。

英語がわかれば世界が広がるのになぁと思うことがあります。下記の動画をみてあぁーどんな会話をしているのか、わかればなぁって思いました。

Disruptive Evolution in Monetary Policy: Prosperity, Bubbles, and Inflation

英語がわかれば世界が広がる、英語が話せればもっと世界が広がると感じます。英語を理解できればremoteok.comなどからお仕事を調達することも可能になるからね、本当に英語を理解したいのでなんとか三日坊主でも勉強できる方法を模索しています。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年04月15 05:20日

タグ

com, remoteok, いま, お仕事, こと, シフト, デジタル, マネー, 一, 三日坊主, 下記, 世界, 中, 今日, 会話, 勉強, 動画, 可能, 手抜き, 方法, 本当, 模索, 理解, 自分, 英語, 記事, 調達,

一見似ていて全然違うコードですよ、初心者のどつぼの壺。

2022.04.02

Logging

おはよう御座います。土曜日の朝です😪。

下記のコードは一見似ていて全然違うコードですよ、初心者のどつぼの壺と言いますか・・・。初心者がハマりやすい、thisの領域です。特にメンターのいない独学で勉強をしている人はハマりやすいかなと思ったので今回、サンプルコードを記載しました。昔、自分が何故と思ったのですが今ではfunctionがねぇと気づく内容のコードです。

document.getElementById("example").addEventListener("input",function(){
    main()
})
document.getElementById("example").addEventListener("input",main);

function main(){
    if(this.value){
        console.log(this);
    }
}

最初はみんな初心者です、間違いながら覚えていけばよいのです、失敗しながら覚えていけばバグ取り🐤が上手になります。そのうち、動作するバグ🐞になっていきます。動作するバグが一番厄介です、動作するのでエラーコードを出力しないのでバグを取るにはトレースか当たりをつけてトレースするしか無いのです。

そういうことなので、初心者の皆様気おつけてくださいませ😌。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年04月02 05:02日

タグ

addEventListener, document, example, function, getElementById, if, input, main, quot, this, value, コード, サンプル, ドツボ, メンター, 一見, 下記, 人, 今, 今回, 内容, 初心者, 勉強, 土曜日, 壺, 昔, 朝, 独学, 自分, 記載, 領域,

お店のホームページ（サイト）の作り方その参

2022.03.05

Logging

お店のホームページ（サイト）の作り方その参は下記の動画を見ていただければお店のホームページは完成できます。わからない事があれば知恵袋などで質問するとひとりで出来上がります。ちなみに動画では５００円代をおすすめしていますが、１００円代のサーバでも問題なく機能します、違いはデーターベースというものを使用するかどうかです。今回は静的なサイトなので１００円代で十分です。

これでお店のホームページ（サイト）の作り方その参は終了します。もし自分で出来なさそうというのであればクラウドワークスなどでサーバーの設定、ファイルのアップロード、ドメインの登録などを代行でしてもらうのも一つの手なのかもしれません。値段は３万ぐらいが相場かと思います。また完了後、かならずサーバーのパスワードの設定を変更してください！。

さくらサーバー&ドメイン新規登録の手順を解説

さくらサーバーでサーバーとドメインを紐付けする方法

【さくらのレンタルサーバ】Let's Encrypt（無料SSL）を設定してみよう

【FTPツール】で大量ファイルをサクッとサーバーUPしよう！FileZillaが便利！

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年03月05 09:55日

タグ

100, ３, 500, アップロード, おすすめ, お店, クラウド, これ, サーバ, サーバー, サイト, データー, ドメイン, パスワード, ひとり, ファイル, ベース, ホームページ, もの, ワークス, 一つ, 万, 下記, 事, 今回, 代行, 作り方, 使用, 値段, 動画, 参, 変更, 完了, 完成, 手, 機能, 登録, 相場, 知恵, 終了, 自分, 設定, 質問, 違い,

お店のホームページ（サイト）の作り方その弐

2022.03.05

Logging

おひさしぶりです。
ブログを数日休んでいました。こらからは不定期という感じでブログを書いてきます。
このブログはお店のホームページ作り方その壱の続きになります。

お店のホームページ（サイト）の作り方その壱

下記が予約ボタンと地図の作成手順です、こちらの変更部分をindex.phpのファイルを書き換えてください。予約には予約システムSelectType (セレクトタイプ)を使用しているのでアカウントを作りご自身のお店に合わして管理画面から設定してみてください。

会社の地図に関しては、GoogleMapを使用しています、こちらをindex.phpに貼り付けるのですが必要ない部分があるのでその部分を削除して貼り付けています。動画を注視してみるとわかるかと思います。

予約ボタン

ぐーぐるまっぷ・お店の地図

今回はここまでです。次回はさくらレンタルサーバにファイルをアップロードする方法とSSLの設定を行い完了となります。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年03月05 09:25日

タグ

6, com, GoogleMap, https, index, php, SelectType, SSL, vMSy-CCthA, watch, www, youtube, アカウント, アップロード, お店, ここ, こちら, ご自身, サーバ, サイト, さくら, システム, セレクト, タイプ, ファイル, ブログ, ホームページ, ボタン, レンタル, 下記, 不定期, 予約, 今回, 作り方, 作成, 使用, 削除, 動画, 地図, 壱, 変更, 弐, 感じ, 手順, 数日, 方法, 次回, 注視, 画面, 管理, 設定, 部分,

『WIRED』創刊エグゼクティヴエディターを務めたケヴィン・ケリー（Kevin Kelly）が語る動画が良い感じです！！

2022.01.28

Logging

「『WIRED』創刊エグゼクティヴエディターを務めたケヴィン・ケリー（Kevin Kelly）が語る動画が良い感じです！！」というタイトル通り下記の動画良い感じです。他にもYOUTUBEにUPしているWIRED（ワイヤード）の動画はブランド感があって良い感じに作られていますよね😌。

私はテレビのニュースは絶対に見ない | ケヴィン・ケリーが語る、いまこそ楽観主義が必要な理由 | get WIRED | Ep1 | WIRED.jp

因みにWIREDとは最先端の技術などを取り上げているデジタル雑誌になります、昔は紙の雑誌も出版されていたけど、今はデジタルに置き換わったみたいです。

尚、ケヴィン・ケリー（Kevin Kelly）が書いた「5000日後の世界」に関して自分が本を読んで思ったことなどを感想にしていますので、そちらも合わせて参照くださいませ…。👈

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年01月28 06:00日

タグ

5000, Kelly, Kevin, UP, WIRED, youtube, エグゼクティヴ, エディター, ケヴィン, ケリー, こと, そちら, タイトル, デジタル, ブランド, ワイヤード, 下記, 世界, 今, 他, 出版, 創刊, 動画, 参照, 感, 感じ, 感想, 技術, 昔, 最先端, 本, 紙, 自分, 雑誌,

@Blog{zip358.com}

日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。

dockerでlaravel環境構築したお話。 #hosts

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

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

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

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

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

windowsパッケージマネージャー平たく言えば #windows

WP予約投稿ツイートプラグイン作り方。＃php言語 #code #v2

基本情報技術者試験ワード集と単語帳作りアプリで学習の下準備をする方法！ #FE #英語 #効率

検索されなかったワード埋もれた価値について! #javascript #php

ページ無限スクロールの作り方 #インフィニティ#InfinityPageScroll #JavaScript

ヘンテコな学習ヘンテコな呟き😌。説明不足はいつものこと🤔

一億円の配当金が入るXさんの利回りを調べてみました。

新着記事が表示されるWPの非公式プラグインを作りました。

2023年７月からGA4に変わるだってさ。桐島くん。

覚えとくと良いChromeの小技？大技！？

退職日まで日数を求める・JSでカウントダウンコードを構築してみた😆

Windows10~起動時にアプリ（ソフト）を自動起動させる方法です。

Gさんのスマートグラスはスマホの次の覇者になるのかなぁ🤔

光の速さでUSBを繋ぐ、いずれ全て通信処理は光の速さで行うことになるのか？

デジタルマネーへシフトしようとか言っているのかな？

一見似ていて全然違うコードですよ、初心者のどつぼの壺。

お店のホームページ（サイト）の作り方その参

お店のホームページ（サイト）の作り方その弐

『WIRED』創刊エグゼクティヴエディターを務めたケヴィン・ケリー（Kevin Kelly）が語る動画が良い感じです！！