html | zip358.com

Photo by Pixabay on Pexels.com

そこに便利な機能があっても使わない。

2023.10.05

おはようございます、そこに便利な機能があっても使わないと落合陽一さんがボヤいていました。スマホが浸透するのに10年ぐらいかかりました。恐らく生成AIも同じぐらい浸透するのに時間がかかるじゃないだろうかなって思います。

【前編】「GINZA CROSSING Talk ～時代の開拓者たち～（ゲスト:落合陽一さん）」　2023年9月7日放送

そこの頃のエンジニアは生成AIが書いたコードを修正したり加工する仕事が殆んど担っているかも知れません。10年後、人が一からコードを書くことがなくなりコードを書けるひとは、尊敬されるかも知れません。

生成AIが世に広がってそれほど時間が経過していませんが、生成AIを使う人ってあまりいないじゃないかなって思います。率先して使用しているのはIT界隈かなって思っていて他の業界で使用している話を聞かない。ITリテラシーが高い人ととの格差は広がる一方だと感じます。

10年後、どこまで生成AIでコードを書ける様になるのかは未知数ですが、今の段階ではデザイナーさんが描いたデザインをコード化することは可能になっています。なのでHTMLはもう人が一からコードを書かなくて良い時代です。これからは生成AIが書いたHTMLを手直しするという作業になるでしょう。

フロントエンドエンジニアのお仕事の一つがなくなると思っています。10年後にフロントエンドエンジニアと同様なことがバックエンドでも起こりうる時代になっていると。プログラマーは生成AIが書いたコードを見て、これは残す残さないを判断したりコード修正が主な仕事になると思います、また、その頃にはIT人材はそれほど要らなくなり中小企業などは無く成り大企業とスモールカンパニーや個人事業が主になると思います。アイディア次第で大企業に負けないアプリが作れるようになっていると思います。また、アプリも今以上に増えていくようになるでしょうね。

その頃には村の人しか使わないようなスモールアプリみたいな物が増えていくだろうと。ともあれ生成AIが浸透するのには10年はかかるだろうなぁって。

明日へつづく😂

著者名 @taoka_toshiaki

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

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

OFUSEで応援を送る

投稿日時 2023年10月05 06:00日

タグ

html, ITリテラシー, IT人材, IT界隈, アイディア次第, エンジニア, スモールアプリ, スモールカンパニー, バックエンド, ひと, プログラマー, フロントエンドエンジニア, ボヤ, 一方, 未知数, 村, 格差, 段階, 生成AI, 落合陽一さん,

Bladeのinjectという物を使えば独自関数を呼び出せる。#laravel

2023.02.01

Logging

おはようございます、週に一個は技術ネタを入れようかなと思っている中の人です。

今回はタイトル通りのお話になります。bladeで独自関数を使用したいなと思ったことはありませんか。そういう時に重宝するのはinjectだというお話になります。使い方は下記の方法で可能です。

@inject('代入される任意の変数名', 'namespaceを含むクラス名')
{{ $代入される任意の変数名->呼び出すメソッド名() }}

これを知ったのは次のサイトになります。因みにbladeとはLaravelで使用できるテンプレートエンジンになります。いうなれば昔、流行ったSmartyという物と同じ位置づけですね。

因みに、この記事はあまりSEOを意識していませんので検索にヒットしないかも知れませんので、是非ともシェアして頂けると有難いです😄。

余談なんですかもう一つ、bladeでHTMLを含む文字を変数に代入するとそのまま表示されてしまいますよね、それをHTMLコードとして認識させたい場合は下記のようにすることでHTMLコードとして認識されます。

{!! 任意の変数名 !!}

追伸、こちらの方が手っ取り早いような気がします．

{{ app()->call('App\Http\Controllers\TestController@test') }}

{{app()->call('App\Http\Controllers\QiitaController@aiueo',['a'=>'test'])}}

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2023年02月01 06:00日

タグ

$代, App, AppHttpControllersQiitaController@aiueo&#39, AppHttpControllersTestController@test, blade, call, gt, html, inject, Laravel, namespace, SEO, Smarty, テンプレートエンジン, メソッド名, 余談, 変数, 変数名, 追伸, 関数,

今年も残る所あと半月ほどになりましたね。 #半月 #2022年大晦日まで

2022.12.15

Logging

おはようございます、今年も残る所あと半月ほどになりましたね😆。

先日、呟いた通りですが、フルリモートのお仕事が出来るようになりました。先ずは三ヶ月の雇用との事です、実際に働き出すのは1月からですが今から猛勉強💦します。Laravelは平たく理解しているのですが、今の知識は入門書止まりだと思うので、短期間で実践レベルにまで押し上げていきたいです。

現行はlaravelとjquery動いているのかな？それをvue.js >> react.js にシフトしていくのかな。実際、中身を見てみないと分からないことばかり。
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) December 14, 2022

その他にもvue.jsやReact.js等（TypeScriptも含む）も勉強しつつHTMLやCSSを再勉強するつもりでいます。あとバージョン管理でGitLabを使用するみたいなのでそちらも慣れなければいけないなと思っています。

正直な所、自信がないのです、なんかレベル高そうな気がして怖いなー。自信がないのでカバーする為にも勉強するしか無いですね…。

この頃、使用していないjqueryも再勉強しないと・・・やらなければいけない事が山積みだけど頑張るしか無いな。

これから1月半ばまで勉強のアウトプットを記事になると思います、トイウコトデよろしくお願いします🙇。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

css, gitlab, html, jquery, Laravel, React.js, TypeScript, vue.js, アウトプット, トイウコトデ, バージョン管理, フルリモート, 入門書, 勉強, 実践, 所あと半月, 猛勉強, 短期間, 自信, 雇用,

Photo by Suzy Hazelwood on Pexels.com

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

2022.11.28

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にアップしているので参照してみてくださいな（音楽は軽やかなんですけど…😅）。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

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

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

2022.11.14

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

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

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

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

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

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

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, インターネット, こと, ソース, データ, ところ, ブログ, プログラム, 下記, 不思議, 今回, 以心伝心, 使用, 処理, 初学, 利点, 動画, 参照, 受信, 同期, 意味, 方法, 有利, 次回, 温暖化, 考え方, 要点, 解説, 送信, 送受信, 音声, 音楽,

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 Fanóš Kolský on Pexels.com

Next.jsやNuxt.js.コレやアレやでport80は使えない。

2022.10.15

Logging

おはようございます、土日は雨が降るとか降らないとか🥕。

さて、Node.jsを飛び越えRact.js、Vue.jsを飛び越えてNext.jsやNuxt.jsの事を調べてたりデモページを起動してみたりして、わかったこと。コレはアプリ開発の為の道具なんだという事を改めて認識。

オープンなWebサーバーで動くように設計されていない。ポート８０番上で動くように設計されていないのだから、この理由はnode.jsのインストール仕様や動作仕様が関係しているような気がします。

TypescriptとNext.jsをアプリ開発しながら学んでみよう【Typescript入門】

Next.jsやNuxt.jsが出来た背景はHTMLコードを記入したりするのが面倒くさいからだと…w。だからこういうフレームワークが出来たんだろう。フレームワークの概念はLaravel等と概念的にはあまり変わりないので、まぁそんなにって思うけど、初学者はVue.jsを勉強してNode.jsを触った後にRact.js、Next.jsが良いと思います。因みにVue.jsのフレームワークがNuxt.jsです。

Next.jsでlocalhost:3000で表示させるのは簡単なだけど、独自ドメインで表示する方法はドキュメント以外に表示されていなかった。ググっても出てこない事もあるのだなと・・・。

Advanced Features: Custom Server | Next.jshttps://t.co/gyI0GUO7fE
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) October 14, 2022

ツイッターにメモとして呟いて置きましたので、そちらを参照ください。この独自ドメインを使う調査に数十分使用してしまった。この時間、とても勿体無いメンターが欲しいなって思います。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

80, html, JS, Laravel, NEXT, node, nuxt, port, Ract, vue, web, アプリ, アレ, インストール, コード, こと, コレ, サーバー, デモ, フレームワーク, ページ, ポート, 事, 仕様, 初学者, 勉強, 動作, 土日, 後, 概念, 気, 為, 理由, 背景, 記入, 設計, 認識, 起動, 道具, 開発, 関係, 雨,

Dockerは楽だなという事を今頃理解しましたよ。 #vbox #docker

2022.10.03

Logging

おはようございます、月曜日の朝はテンション低めな方も多いはず😇。

さて、今日は先週の木曜日と金曜日にふと今後のためにDockerをもう少し触ってみようと思い作業終了後触ってみました、触れて気づいた事は開発環境を作るのがとても楽だということ（気づくの遅い？🫠）。自分は昔の人間なのでvisualboxばかり触っていたのですがDockerは素晴らしい。サーバー周りが得意な人にイメージを作ってもらってそれを共有すれば皆、同じ環境下で開発が出来るので良いという事に今頃気づいた・・・。

 docker run -it -d -v C:\var\www\html\:/var/www/html --privileged -p 80:80 --name こんてな命名 イメージid /sbin/init

※Visualboxでも可能ですけどね。Dockerのだとそこが楽だしマウント（フォルダ共有）もスムーズに行くので自分は良いなと感じました。

ちょっと残念だった点は自宅で作業している中、バッファローのNAS🍆に作業ファイルを入れているのですが、それとは共有出来なかった点です、対応として実PCをrobocopyしてNASと同期を取るという形にしました。これで問題はなくテスト環境下で開発ができます。尚、高級なNASではそういう問題なく上手くいくそうですよ。※NASはバックアップデータになりました。

robocopy <コピー元> <コピー先> /E /DCOPY:DAT

尚、mirのオプションにしなかったのには理由があります。コピー元のファイルが消えたり、ディレクトリが破損した場合、コピー先のファイルやディレクトリが消えて無くなるらしいので・・・。完璧なミラーリングは辞めました。

こんな感じで快適なテスト環境が作れます（上記のコマンド参考に）。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

--privileged, -p, -v, 80, D-, docker, html, ID, init, IT, name, run, sbin, var, vbox, Visualbox, www, イメージ, こと, こんてな, サーバー, スムーズ, そこ, それ, ため, テンション, パス, フォルダ, マウント, 事, 人, 人間, 今後, 今日, 今頃, 低め, 作業, 先週, 共有, 可能, 周り, 命名, 得意, 方, 昔, 月曜日, 朝, 木曜日, 理解, 環境, 皆, 終了, 自分, 行, 金曜日, 開発,

退職日まで日数を求める・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, カウント, カウントダウン, コード, こちら, サイト, もの, 下記, 不安, 事, 人様, 何日, 参考, 土日, 土曜日, 場合, 後, 拝借, 日数, 日曜日, 月曜日, 構築, 無名, 物, 確認, 考慮, 記載, 退職, 関数,

サーバーの引っ越しのヒントです。いや答えですねｗ😌

2022.06.16

Logging

おはようございます。あと一ヶ月もすれば炎天下の下でお仕事をする人もいるでしょう。大変ですね。

昔はよくサーバーの引っ越しを仕事でしていました。代わりに誰か出来る人もいなかったので自分が行っていましたが、サーバーの引っ越しほど時間のかかる仕事はありません。

scp -r -p /var/www/html/ user@example.com:/home/user/www/
scp [コピー元のファイル] [コピー先のユーザー名@コピー先のホスト] [コピー先のファイル]

何より責任、重大ですから色々と経験して思ったのは、サーバーの移行作業後に何らかの「動かない」というバグとりを速やかに行えるかどうかが大事かと思います。それはある意味、経験が物を言う世界かもしれません。こんなズブの素人でも少しだけサーバーの事を理解できたので、今思えば良いことなのかもしれません。

因みに上記に記述しているコマンドを旧サーバー環境で実行すれば新サーバーへファイル転送出来ます。いちいちFTPソフトでダウンロードしてアップロードするという事を行わなくて良いです。そして何よりパーミッションやタイムスタンプまで引き継いでくれるので便利かと思います。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2022年06月16 05:16日

タグ

-p, -r, com, example, home, html, SCP, user, var, ｗ, www, お仕事, こと, コピー, コマンド, サーバー, それ, どり, バグ, ヒント, ファイル, ホスト, ユーザー, 一, 上記, 下, 世界, 事, 人, 今, 仕事, 何より, 作業, 大事, 大変, 実行, 少し, 引っ越し, 意味, 昔, 時間, 炎天下, 物, 理解, 環境, 移行, 答え, 素人, 経験, 自分, 色々, 記述, 誰, 責任,

JavaScriptのdocumentがドキュメントな訳。

2022.06.07

Logging

おはようございます。そろそろ梅雨入りなのかもなって。

さて、タイトル通りドキュメントな訳を知りたい方もいると思います、自分も何故、document（資料）なのかなって数秒間考えた結果、インターネットやHTMLの歴史を調べれば分かると思いますが、もともと研究者同士の情報交換（資料共有）に使用されていたのがモノがあるきっかけで注目を浴びた結果、今日では世界中で使用されるようになったのだと考えるとdocumentの意味がわかる。

因みにJavaScript（JS）はプログラミング学習、初学者には最適な言語だと思います、何故ならブラウザの開けるパソコンが一台有れば学習できる言語だからです。尚、JavaScriptを学んでVue.jsなどのフレームワークを学ぶのが定石だと思います。JavaScriptで独自プラグインを作ることが出来ればフレームワークの勉強に進んでも挫折しないと思います。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

document, html, javascript, JS, vue, インターネット, きっかけ, こと, タイトル, ドキュメント, パソコン, ブラウザ, プラグイン, フレームワーク, プログラミング, もの, 一, 世界, 交換, 今日, 使用, 共有, 初学者, 勉強, 同士, 学習, 定石, 情報, 意味, 挫折, 数秒, 方, 最適, 梅雨入り, 歴史, 注目, 研究者, 結果, 自分, 言語, 訳, 資料,

Photo by Markus Spiske on Pexels.com

デモ５５ajax=jqueryを使わずに非同期通信するのが普通に。

2022.05.03

Logging

おはようございます。

祝日が始まりましたね、お休みの方も多いかと思います。

そんな中、連休からプログラミングの勉強を始めようと考えている方もいるかと思いましたので、フロントエンドエンジニアがバックエンドエンジニアとの連携で一番初めにぶち当たる壁である、非同期通信のコードを書きました。コードをコピペして階層など合わしてご自身の実行環境で実行してみてください。この頃ではフロントエンドエンジニアの方は非同期処理でコードを書いているので、非同期という言葉を聞くことも多くなったと思います。

非同期処理は処理の結果を待たずして次の処理を実行することです、非同期通信も同じです。バックエンド側に処理を問い合わせて処理の結果は待たずして行います。結果も順番に帰ってくる訳では無いのでフロント側で処理するときに注意も必要になります。

<!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>Document</title>
</head>

<body>
    <button id="api">非同期通信</button>
    <script>
        document.getElementById("api").addEventListener("click", api);

        function api() {
            let data = [];
            data.push({"name":"樹龍"});
            console.log(param(data));
            fetch("./api.php", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body:param(data)
            }).then(
                response => response.json()
            ).then(data => {
                console.log('data', data);
            }).catch(error => {
                console.log('error', error);
            });
        }
        function param(data){
            let str = [];
            for(key in data){
                for(keyname in data[key]){
                    str.push(keyname +"="+ encodeURIComponent(data[key][keyname]));
                }
            }
            return str.join("&");
        }
    </script>
</body>

</html>

<?php
$name = htmlspecialchars(strip_tags($_POST['name']));
$response['res'] = $name;
print json_encode($response);

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2022年05月03 05:33日

タグ

55, ajax, DOCTYPE, gt, html, jquery, lang, lt, quot, エンジニア, エンド, お休み, コード, こと, コピペ, ご自身, デモ, とき, バック, プログラミング, フロント, 中, 処理, 勉強, 同期, 壁, 実行, 必要, 方, 普通, 次, 注意, 環境, 祝日, 結果, 言葉, 訳, 通信, 連休, 連携, 階層, 頃, 順番,

新サービスをいま作っています、お披露目はさくらレンタルサーバー、Newサーバ…。

2022.02.10

Logging

今日の朝は雨がシトシトと降っていますね☔。昼からは高知県、晴れるそうです。

新サービスをいま作っています、お披露目はさくらレンタルサーバー、新サーバーがリリース後になります、いま、大枠のデザインとHTMLコードを書いています、バックエンドの部分はこれからです。

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

尚、このサービスはさくらレンタルサーバーのNewサーバーで出来れば運用したいと思っています、何故なら新サーバーでは、表示速度が今までと違いかなり早くなったそうです。そしてセキュリティ面もありますから、そこらへんを心配しないで良いというのは心配しないで開発だけに没頭出来ますからね。

因みにどんなサービスかといえば、掲示板なのですが２ｃｈなどと違って、今作っている掲示板では競合が少ない分野でこれからも伸びそうな分野の掲示板です。その掲示板を開発して３月頃から運用していきたいなって思っています。リリース後にこちらでもアナウンス（報告）したいなって思っていますので、ブログチェックしてみてください。よろしくお願い致します。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

2, ３, ch, html, new, アナウンス, いま, エンド, お披露目, かなり, コード, こちら, これ, サーバ, サーバー, サービス, さくら, セキュリティ, そこら, デザイン, バック, べん, リリース, レンタル, 今, 今日, 分野, 大枠, 心配, 掲示, 昼, 朝, 没頭, 競合, 表示, 速度, 運用, 違い, 部分, 開発, 雨, 高知県,

コード書き初め、そろそろネタが尽きてきたよ「始め」！？

2022.01.03

Logging

コード書き初めは何が良いのかなぁなどと考えておりましたが、やはりこれかなっていう事で文字のグラデーションを徐々に変えてい行くものを作ってみました。IEとかでは動きませんが、最新のChromeやFirefox、エッジなどでは動くかなと思います。ソースコードを写景してみて、コードの動きがわかればソースコードを変更していろいろと試してみてください。

Rewind 2021 – Love of the Code

動作はこちらから確認くださいませ。

https://zip358.com/tool/demo51/

尚、このコードは２０２１年の１２月２８日に書いたものになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Happy New Year 2022</title>
<style>
    body{
        background-color: black;
    }
    #HNY{
        font-weight: bold;
        font-size: 222px;
    }
</style>
</head>
<body>
    <h1 id='HNY'>Happy New Year 2022</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
    let color1 =["40","E0","D0"];
    let color2 =["FF","8C","00"];
    let color3 =["FF","00","80"];
    let postion =[2,0,1];
    setInterval(() => {
        if((parseInt(color1[postion[0]],16) + 1)<255){
            color1[postion[0]] = (parseInt(color1[postion[0]],16) + 1).toString(16);
        }else{
            color1[postion[0]] = (100).toString(16);
            postion[0]--;
        }
        if((parseInt(color2[postion[1]],16) + 1)<255){
            color2[postion[1]] = (parseInt(color2[postion[1]],16) + 1).toString(16);
        }else{
            color2[postion[1]] = (50).toString(16);
            postion[1]--;
        }
        if((parseInt(color3[postion[2]],16) + 1)<255){
            color3[postion[2]] = (parseInt(color3[postion[2]],16) + 1).toString(16);
        }else{
            color3[postion[2]] = (80).toString(16);
            postion[2]--;
        }
        
        for(key in postion){
            if(postion[key]<=-1){
                postion[key] = 2;
            }
        }
        //console.log(`#${color1.join("")}, #${color2.join("")}, #${color3.join("")}`);
        document.getElementById('HNY').style = `
        color: #FF8C00;
  background: -webkit-linear-gradient(0deg, #${color1.join("")}, #${color2.join("")}, #${color3.join("")});
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
        `;    
    }, 70);
</script>
</body>
</html>

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

12, 2021, 28, 8, cGLonkCQ, charset, Chrome, com, D-, DOCTYPE, Firefox, gt, head, html, https, IE, ja, lang, lt, meta, name, quot, UTF-, viewport, watch, www, youtube, いろいろ, エッジ, グラデーション, コード, こちら, これ, ソース, ネタ, もの, 事, 何, 写, 動作, 変更, 文字, 景, 書き初め, 最新, 確認,

Twitterカードを確認するための公式チェックページが便利。

2021.10.26

Logging

先週は寒かったですが、今週からまた暖かくなると天気予報のキャスターが言っていたそうですが、どうなることやら。

Twitterカードを確認するための公式チェックページが便利です。そもそもTwitterカードって何と思った方もいると思いますので、簡単に説明するとTwitterでシェアする時にホームページ画面の画像やホームページの説明が表示されるアレです。因みにTwitterカードの設定をしていないとURLだけがタイムラインに流れていきます。

どうやればTwitterカードが設定することが出来るか？答えは結構かんたんです、HTMLタグのヘッダー部分に下記のmetaダグを記載してあげることでTwitterカードが表示されます。因みに今回はフェイスブックでシェアした時にも対応した形のソースコードです。フェイスブックの部分は良いよという方は、その部分は除いてください、また、ご自身のURLや表示したい説明に変更するようにしてくださいな。

<meta property="og:url" content="https://zip358.com/tool/tenji/">
<meta property="og:type" content="website">
<meta property="og:description" content="日本語を点字に変換します。α版です（日本語、英数字などを含むものを日本語点字に変換します）。">
<meta property="og:image:alt" content="tenji-image">
<meta property="og:image" content="https://zip358.com/tool/tenji/images/web-image.png.webp">
<meta property="og:locale" content="ja">
<meta property="og:site_name" content="日本語を点字に変換する機械">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@zip358com" />
<meta name="twitter:domain" content="zip358.com" />
<meta name="twitter:title" content="日本語を点字に変換します。α版です（日本語、英数字などを含むものを日本語点字に変換します）。" />
<meta name="twitter:creator" content="@zip358com" />
<meta name="twitter:image" content="https://zip358.com/tool/tenji/images/web-image.png.webp" />

最後に上記の設定した後、上手くTwitterカードが機能しているかを確認するためのTwitter公式のチェックページがあります、そちらにチェックしたいページのURLを記入することによりチェックが可能です。

https://cards-dev.twitter.com/validator

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2021年10月26 09:00日

タグ

html, meta, Twitter, url, アレ, カード, かんたん, キャスター, コード, こと, ご自身, シェア, ソース, タイムライン, タグ, ため, チェック, フェイスブック, ページ, ヘッダー, ホームページ, 下記, 予報, 今回, 今週, 便利, 先週, 公式, 変更, 天気, 対応, 形, 方, 時, 画像, 画面, 確認, 答え, 簡単, 表示, 記載, 設定, 説明, 部分,

Tellus[テルース]というサイトで機械学習などがお勉強できる。それも無料で！

2021.10.18

Logging

平日は大体、自転車で一時間程度ですが運動していますが、今の所、その効果はあまり無いです。唯、帰ってくる時には顔が若干細くなります。仕事が安定するまで続けようと思います。（明日は休むけどね？）

さて、今日はタイトル通り「Tellus[テルース]というサイトで機械学習などがお勉強できる。それも無料で！」です、無料で機械学習などが出来ちゃうって、数年前ではあまり無かったのですが、この頃は大手企業やベンチャー企業などで初学者向けに掲載しているサイトがあります。

Tellus MovieNew Business,New Possibility～Tellusがもたらす新しいビジネス、新しい可能性～

機械学習やディープラーニングなどのエンジニアは人材不足の状態が続いているにも関わらず、それを勉強する人はあまりいないです。駆け出しのエンジニア志望の人は大体はWEBの基礎のHTMLとかから始めJavaScriptで向いていない人は挫折します、でも、もしこれからエンジニアになりたいと思ったら機械学習から初めることをお勧めします、何故なら、上記でも書いたように人材不足だからです。逆にWEBエンジニアは足りていますので競争率は逆に高いかと思います。

最後に初心者向けテルース学習コースのリンクを貼っときますので、これから機械学習などを学習したい方は是非、読んでみてくださいな?

https://tellusxdp.github.io/start-python-with-tellus/index.html

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2021年10月18 09:00日

タグ

html, javascript, Tellus, web, エンジニア, お勉強, お勧め, こと, これ, サイト, それ, タイトル, ディープ, テルース, ベンチャー, ラーニング, 一, 人, 人材, 今, 今日, 仕事, 企業, 初学者, 効果, 勉強, 基礎, 大体, 大手, 学習, 安定, 平日, 志望, 所, 挫折, 掲載, 数, 明日, 時, 機械, 無料, 状態, 自転車, 若干, 運動, 頃, 顔, 駆け出し,

彼のVue.jsの入門解説動画が分かりやすいかも。超入門は理解しました。

2021.07.12

Logging

vue.jsを勉強したい方はよしぴーのYouTubeプログラミングスクールの超Vue.jsの入門解説動画が分かりやすいかも。自分は入門版は理解しました。尚、bodyにID付けて試すのは辞めとけよ。bodyにIDを付けて動かないなぁとかしないように！！ドキュメントにもbodyにIDを付けるのは推奨しないと記載しております。動画を見て背景の色を動的に変えるvue.jsの簡単なサンプルプログラム作りました。コード書いていてjavascriptで書くよりもvue.jsなどのライブラリ？を使用して書くほうが短いコードで書けるので良いなと実感。

超Vue.js 2 入門完全パック – Vueでアプリを作りたい方必見！ (Vue Router, Vuex含む)

vue.jsの入門、動画を見て😅
使ってみた便利といえば便利かも。

背景の色を変えるhttps://t.co/nUWb5qqa4B
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) July 1, 2021

htmlコードとvue.jsのコードは下記になります、最終的にはvue.jsでアプリ作りたいな（時間がない？^^;）。SPAに関して難しいという意識がある人も触っていくうちに慣れると思います。因みに学習能力が高い人はこんなの作れちゃうみたいですね、学習してまだ二週間しか経過していなくてゴニョゴニョ作れている所がへぷさん（@HEP1147）、凄いところ！！ですね。

https://www.youtube.com/watch?v=kltx14qMt5M

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<style>
    #el{
        width: 100vw;
        height: 100vh;
    }
</style>
<title>背景の色を変える</title>
</head>
<body>
<div id="el" v-on:mousemove="mouseXY($event)">
    <span v-on:click="colorclick('#000')"style="color:#000">■</span>
    <span v-on:click="colorclick('#fff')"style="color:#fff">■</span>
    <span v-on:click="colorclick('#4eaeec')"style="color:#4eaeec">■</span>
    <span v-on:click="colorclick('#4eeccc')"style="color:#4eeccc">■</span>
    ---{{ color }}---
    X={{x}},Y={{y}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="./main.js?<?=time()?>"></script>
</body>
</html>

var vm = new Vue({
    el:"#el",
    data:{
        color:"#fff",
        x:0,
        y:0
    },
    methods:{
        colorclick:function(c){
            this.color = c;
            document.body.style.backgroundColor = c;
            return true;
        },
        mouseXY:function(event){
            this.x = event.clientX;
            this.y = event.clientY;
        }
    }    
});

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2021年07月12 02:34日

タグ

body, html, ID, javascript, JS, SPA, vue, youtube, アプリ, うち, コード, サンプル, スクール, ドキュメント, プログラミング, プログラム, よし, ライブラリ, 下記, 人, 使用, 入門, 勉強, 動画, 学習, 実感, 彼, 意識, 推奨, 方, 時間, 理解, 簡単, 背景, 能力, 自分, 色, 解説, 記載, 超,

Laravelは作って覚えようということで。

2021.03.20

Logging

チームラボがフレームワークの解説をしているサイトに出会いました。こちらを参考にLaravelを勉強中です。フリーランスの仕事はLaravel（ララベル）案件かRuby on Rails（ルビオンレイルズ）の案件が多いです。WEB系はそんな感じで未経験者はフレームワークのポートフォリオサイトでも作ってアピールしないと仕事もらえれない感じですね。因みにLaravelの難易度はそれ程高くないのではないかと思っています。MVCの感覚さえ覚えればそんなに覚えるのには時間がかからないのではないかなと思います。

チームラボのLaravel（ララベル）解説サイトはこちらです。

https://team-lab.github.io/skillup/step2/01-framework.html

尚、チームラボを知らない方のためにチームラボがどんな事をしているかを軽く説明するとインタラクティブな創作？活動をしている会社（チーム）です、テクノロジーと芸術の融合している集団ですがクリエイティブなWEBサイトなどからアプリなど多岐にわたる開発をしています。チームラボを率いる取締役社長は猪子寿之さんです。

Ever Blossoming Life Tree – Giant Taro Cedar

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2021年03月20 01:35日

タグ

01, 2, Framework, github, html, https, io, Laravel, MVC, ON, Rails, Ruby, skillup, step, team-lab, web, アピール, インタラクティブ, オン, こちら, こと, サイト, ため, チーム, チームラボ, テクノロジ, フリー, フレームワーク, ポートフォリオ, ララベル, ランス, ルビ, レイルズ, 事, 仕事, 会社, 創作, 勉強, 参考, 感じ, 感覚, 方, 時間, 案件, 活動, 系, 経験者, 解説, 説明, 難易,

広告を挿入される無料レンタルサーバーの仕組み。

2021.03.19

Logging

タイトル通り、広告を挿入される無料レンタルサーバーの仕組みはこれだけだと思います。ApacheでWEBサーバーを構築することで可能だということを知っているのですが、nginxではどうかはまだ調査中です。広告をどのタイミングで入れ込んでいるかというと表示する間際でApacheのモジュール、mod_layoutを使用して広告を差し込んでいるだと思います。

差し込み方法はこんな感じです。

AddOutputFilter LAYOUT html htm cgi php
LayoutHeader /header.html
LayoutFooter /footer.html

こうすることで、サーバーの配下に広告を差し込んでいるだと思います。LayoutHeaderやLayoutFooterがどのような役割をしているかはググると解説サイトがありますのでそちらを参照ください。あと、このモジュールの入れ方を解説しているサイトがありましたので紹介します。

Apache2.4.6にmod_layoutを導入する >>https://qiita.com/mr_wednesday/items/8b799aacf41447c004e7

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2021年03月19 05:41日

タグ

AddOutputFilter, Apache, cgi, footer, header, htm, html, layout, LayoutFooter, LayoutHeader, mod, nginx, php, web, こと, これだけ, サーバー, サイト, そちら, タイトル, タイミング, モジュール, レンタル, 使用, 入れ方, 参照, 可能, 広告, 役割, 感じ, 挿入, 方法, 構築, 無料, 表示, 解説, 調査, 配下, 間際,

全国各地のダム貯水率を可視化してみた。

2021.03.02

Logging

全国各地のダム貯水率を可視化してみた。以前、高知県のダムの貯水率を可視化した事を記事にしたのですが、意外にもある一部の人達に好評なので全国のダムファンのために、全国各地のダム貯水率を可視化してみましたよ。あまり好評だったら、取得してきているサーバーに負荷がかかるため、中止します。

なお、どこから取集してきているかというとダムの貯水状況 – 国土交通省からです、正直なところcsvデータ化して頂きたいなと思う人もいるのではないでしょうか？

追記 2021：この頃、ブロックされて私のHPから拾えなくなりました・・・。もしくはHTMLの構造が変わった可能性があります。

	[
		{
			"ken": "北海道道北", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/0102/ipDamGaikyo_pc0102_pg1_fw0.html",
				"dam_name": ["愛別ダム", "西岡ダム", "有明ダム", "小平ダム", "岩尾内ダム", "サンルダム", "留萌ダム", "大雪ダム", "金山ダム", "忠別ダム"]
			}
		},
		{
			"ken": "北海道道東", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/0103/ipDamGaikyo_pc0103_pg1_fw0.html",
				"dam_name": ["佐幌ダム", "庶路ダム", "鹿ノ子ダム", "十勝ダム", "屈足ダム", "札内川ダム", "糠平ダム", "元小屋ダム", "活込ダム", "仙美里ダム"]
			}
		},
		{
			"ken": "北海道道央", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/0104/ipDamGaikyo_pc0104_pg1_fw0.html",
				"dam_name": ["美唄ダム", "栗山ダム", "徳富ダム", "当別ダム", "朝里ダム", "豊平峡ダム", "夕張シューパロダム", "滝里ダム", "漁川ダム", "定山渓ダム", "桂沢ダム", "芦別ダム"]
			}
		},
		{
			"ken": "北海道道南", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/0105/ipDamGaikyo_pc0105_pg1_fw0.html",
				"dam_name": ["新中野ダム", "矢別ダム", "上ノ国ダム", "高見ダム", "様似ダム", "浦河ダム", "美利河ダム", "二風谷ダム", "厚幌ダム"]
			}
		},
		{
			"ken": "青森県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/0201/ipDamGaikyo_pc0201_pg1_fw0.html",
				"dam_name": ["津軽ダム", "遠部ダム", "飯詰ダム", "浅瀬石川ダム", "久吉ダム", "相馬ダム（利水）", "世増ダム", "下湯ダム", "小泊ダム", "浅虫ダム", "清水目ダム（利水）", "川内ダム"]
			}
		},
		{
			"ken": "岩手県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/0301/ipDamGaikyo_pc0301_pg1_fw0.html",
				"dam_name": ["四十四田ダム", "胆沢ダム", "早池峰ダム", "御所ダム", "綱取ダム", "入畑ダム", "湯田ダム", "遠野ダム", "遠野第二ダム", "田瀬ダム", "滝ダム", "鷹生ダム", "日向ダム", "綾里川ダム"]
			}
		},
		{
			"ken": "宮城県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/0401/ipDamGaikyo_pc0401_pg1_fw0.html",
				"dam_name": ["鳴子ダム", "花山ダム", "長沼ダム", "上大沢ダム", "化女沼ダム", "小田ダム", "荒砥沢ダム", "栗駒ダム（利水）", "漆沢ダム", "宮床ダム", "南川ダム", "樽水ダム", "釜房ダム", "大倉ダム", "七ケ宿ダム", "七北田ダム", "惣の関ダム", "払川ダム"]
			}
		},
		{
			"ken": "秋田県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/0501/ipDamGaikyo_pc0501_pg1_fw0.html",
				"dam_name": ["早口ダム", "山瀬ダム", "素波里ダム", "萩形ダム", "森吉ダム", "森吉山ダム", "砂子沢ダム", "旭川ダム", "鎧畑ダム", "玉川ダム", "皆瀬ダム", "板戸ダム", "岩見ダム", "大松川ダム", "協和ダム", "大内ダム"]
			}
		},
		{
			"ken": "山形県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/0601/ipDamGaikyo_pc0601_pg1_fw0.html",
				"dam_name": ["長井ダム", "高坂ダム", "白水川ダム", "寒河江ダム", "木地山ダム", "田沢川ダム", "最上小国川流水型ダム", "留山川ダム", "蔵王ダム", "前川ダム", "神室ダム", "綱木川ダム", "白川ダム", "荒沢ダム", "月山ダム", "月光川ダム", "温海川ダム", "横川ダム"]
			}
		},
		{
			"ken": "福島県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/0701/ipDamGaikyo_pc0701_pg1_fw0.html",
				"dam_name": ["摺上川ダム", "三春ダム", "堀川ダム", "真野ダム", "木戸ダム", "小玉ダム", "こまちダム", "高柴ダム", "四時ダム", "大川ダム", "新郷ダム（利水・東北電力）", "山郷ダム（利水・東北電力）", "上野尻ダム（利水・東北電力）", "片門ダム（利水・東北電力）", "奥只見ダム（利水・電源開発）", "田子倉ダム（利水・電源開発）", "本名ダム（利水・東北電力）", "滝ダム（利水・電源開発）", "大鳥ダム（利水・電源開発）", "上田ダム（利水・東北電力）", "宮下ダム（利水・東北電力）", "柳津ダム（利水・東北電力）", "只見ダム（電源開発）", "日中ダム", "東山ダム", "田島ダム"]
			}
		},
		{
			"ken": "栃木県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/0901/ipDamGaikyo_pc0901_pg1_fw0.html",
				"dam_name": ["塩原ダム", "寺山ダム", "西荒川ダム", "東荒川ダム", "川俣ダム", "川治ダム", "三河沢ダム", "中禅寺ダム", "五十里ダム", "湯西川ダム", "松田川ダム"]
			}
		},
		{
			"ken": "群馬県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/1001/ipDamGaikyo_pc1001_pg1_fw0.html",
				"dam_name": ["四万川ダム", "矢木沢ダム", "藤原ダム", "草木ダム", "八ッ場ダム", "薗原ダム", "相俣ダム", "奈良俣ダム", "桐生川ダム", "塩沢ダム", "道平川ダム", "大仁田ダム", "坂本ダム", "霧積ダム"]
			}
		},
		{
			"ken": "埼玉県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/1101/ipDamGaikyo_pc1101_pg1_fw0.html",
				"dam_name": ["渡良瀬遊水地", "下久保ダム", "二瀬ダム", "荒川第一調節池", "浦山ダム", "滝沢ダム", "有間ダム", "合角ダム"]
			}
		},
		{
			"ken": "千葉県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/1201/ipDamGaikyo_pc1201_pg1_fw0.html",
				"dam_name": ["亀山ダム", "片倉ダム", "高滝ダム", "矢那川ダム"]
			}
		},
		{
			"ken": "神奈川県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/1401/ipDamGaikyo_pc1401_pg1_fw0.html",
				"dam_name": ["城山ダム", "宮ヶ瀬ダム", "宮ヶ瀬副ダム", "三保ダム"]
			}
		},
		{
			"ken": "新潟県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/1501/ipDamGaikyo_pc1501_pg1_fw0.html",
				"dam_name": ["大石ダム", "揚川ダム（利水・東北電力）", "豊実ダム（利水・東北電力）", "鹿瀬ダム（利水・東北電力）", "早出川ダム", "下条川ダム", "刈谷田川ダム", "笠堀ダム", "城川ダム", "破間川ダム", "広神ダム", "三国川ダム", "正善寺ダム", "三面ダム", "奥三面ダム", "胎内川ダム", "奥胎内ダム", "内の倉ダム", "加治川治水ダム", "鯖石川ダム", "久知川ダム", "新保川ダム", "大野川ダム", "柿崎川ダム", "大谷ダム"]
			}
		},
		{
			"ken": "富山県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/1601/ipDamGaikyo_pc1601_pg1_fw0.html",
				"dam_name": ["宇奈月ダム", "室牧ダム", "熊野川ダム", "久婦須川ダム", "和田川ダム", "利賀川ダム", "境川ダム", "刀利ダム", "子撫川ダム", "城端ダム", "臼中ダム", "朝日小川ダム", "角川ダム", "上市川ダム", "上市川第２ダム", "白岩川ダム", "舟川ダム", "布施川ダム", "大谷ダム"]
			}
		},
		{
			"ken": "石川県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/1701/ipDamGaikyo_pc1701_pg1_fw0.html",
				"dam_name": ["手取川ダム", "赤瀬ダム", "犀川ダム", "辰巳ダム", "内川ダム", "新内川ダム", "我谷ダム", "九谷ダム", "小屋ダム", "八ヶ川ダム"]
			}
		},
		{
			"ken": "長野県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/2001/ipDamGaikyo_pc2001_pg1_fw0.html",
				"dam_name": ["浅川ダム", "大町ダム", "松川ダム", "片桐ダム", "小渋ダム", "美和ダム", "高遠ダム", "横川ダム", "味噌川ダム", "牧尾ダム（利水）"]
			}
		},
		{
			"ken": "岐阜県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/2101/ipDamGaikyo_pc2101_pg1_fw0.html",
				"dam_name": ["丹生川ダム", "御母衣ダム（利水）", "小里川ダム", "丸山ダム", "中野方ダム", "阿木川ダム", "岩屋ダム", "大ヶ洞ダム", "横山ダム", "徳山ダム", "阿多岐ダム", "岩村ダム", "打上ダム（利水）"]
			}
		},
		{
			"ken": "静岡県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/2201/ipDamGaikyo_pc2201_pg1_fw0.html",
				"dam_name": ["長島ダム", "佐久間ダム", "秋葉ダム", "船明ダム", "太田川ダム", "奥野ダム", "青野大師ダム"]
			}
		},
		{
			"ken": "愛知県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/2301/ipDamGaikyo_pc2301_pg1_fw0.html",
				"dam_name": ["新豊根ダム", "宇連ダム", "矢作ダム", "木曽川大堰（利水）"]
			}
		},
		{
			"ken": "三重県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/2401/ipDamGaikyo_pc2401_pg1_fw0.html",
				"dam_name": ["君ヶ野ダム", "蓮ダム", "宮川ダム", "三瀬谷ダム（発電）", "安濃ダム（利水）", "比奈知ダム(機構)", "滝川ダム", "青蓮寺ダム(機構)", "小森ダム（電発）"]
			}
		},
		{
			"ken": "福井県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/1801/ipDamGaikyo_pc1801_pg1_fw0.html",
				"dam_name": ["九頭竜ダム", "龍ヶ鼻ダム", "広野ダム", "二ツ屋分水堰", "永平寺ダム", "浄土寺川ダム", "浄土寺川ダム（貯砂ダム）", "笹生川ダム", "真名川ダム", "雲川ダム（利水）", "桝谷ダム", "河内川ダム", "大津呂ダム"]
			}
		},
		{
			"ken": "滋賀県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/2501/ipDamGaikyo_pc2501_pg1_fw0.html",
				"dam_name": ["青土ダム", "日野川ダム", "永源寺ダム（利水）", "宇曽川ダム", "姉川ダム", "余呉湖", "石田川ダム", "天川ダム"]
			}
		},
		{
			"ken": "京都府", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/2601/ipDamGaikyo_pc2601_pg1_fw0.html",
				"dam_name": ["和知ﾀﾞﾑ（利水）", "大野ダム", "日吉ダム(機構)", "天ヶ瀬ダム", "高山ダム(機構)", "畑川ダム"]
			}
		},
		{
			"ken": "大阪府", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/2701/ipDamGaikyo_pc2701_pg1_fw0.html",
				"dam_name": ["箕面川ダム", "狭山池ダム", "滝畑ダム（利水）"]
			}
		},
		{
			"ken": "兵庫県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/2801/ipDamGaikyo_pc2801_pg1_fw0.html",
				"dam_name": ["三宝ダム", "栗柄ダム", "一庫ダム(機構)", "大路ダム", "与布土ダム", "但東ダム", "権現ダム", "平荘ダム", "川代ダム", "大川瀬ダム", "呑吐ダム", "糀屋ダム", "みくまりダム", "安富ダム", "引原ダム", "青野ダム", "生野ダム", "菅生ダム", "安室ダム", "金出地ダム", "長谷ダム", "石井ダム", "天王ダム", "大日ダム", "分水堰", "牛内ダム", "成相ダム", "北富士ダム", "諭鶴羽ダム"]
			}
		},
		{
			"ken": "奈良県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/2901/ipDamGaikyo_pc2901_pg1_fw0.html",
				"dam_name": ["布目ダム(機構)", "室生ダム(機構)", "初瀬ダム", "大門ダム", "天理ダム", "白川ダム", "岩井川ダム", "大滝ダム", "猿谷ダム（利水）", "九尾ダム（利水）", "川迫ダム（利水）", "二津野ダム（電発）", "風屋ダム（電発）", "池原ダム（電発）", "坂本ダム（電発）"]
			}
		},
		{
			"ken": "和歌山県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/3001/ipDamGaikyo_pc3001_pg1_fw0.html",
				"dam_name": ["七色ダム（電発）", "二川ダム", "椿山ダム", "七川ダム", "広川ダム", "切目川ダム"]
			}
		},
		{
			"ken": "鳥取県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/3101/ipDamGaikyo_pc3101_pg1_fw0.html",
				"dam_name": ["殿ダム", "賀祥ダム", "菅沢ダム"]
			}
		},
		{
			"ken": "島根県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/3201/ipDamGaikyo_pc3201_pg1_fw0.html",
				"dam_name": ["尾原ダム", "布部ダム", "山佐ダム", "志津見ダム", "八戸ダム", "大長見ダム", "御部ダム", "三瓶ダム", "浜田ダム", "第二浜田ダム", "益田川ダム", "嵯峨谷ダム", "笹倉ダム", "大峠ダム", "銚子ダム", "美田ダム", "清瀧ダム", "津田川ダム"]
			}
		},
		{
			"ken": "岡山県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/3301/ipDamGaikyo_pc3301_pg1_fw0.html",
				"dam_name": ["苫田ダム", "八塔寺川ダム", "津川ダム", "旭川ダム", "湯原ダム", "竹谷ダム", "河平ダム", "鳴滝ダム", "河本ダム", "千屋ダム", "新成羽川ダム", "黒鳥ダム", "三室川ダム", "高瀬川ダム", "楢井ダム"]
			}
		},
		{
			"ken": "広島県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/3401/ipDamGaikyo_pc3401_pg1_fw0.html",
				"dam_name": ["土師ダム", "灰塚ダム", "庄原ダム", "三川ダム", "八田原ダム", "野間川ダム", "四川ダム", "御調ダム", "山田川ダム", "温井ダム", "小瀬川ダム", "弥栄ダム", "福富ダム", "椋梨ダム", "魚切ダム", "梶毛ダム", "野呂川ダム", "仁賀ダム"]
			}
		},
		{
			"ken": "山口県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/3501/ipDamGaikyo_pc3501_pg1_fw0.html",
				"dam_name": ["小瀬川ダム", "佐波川ダム", "島地川ダム", "阿武川ダム", "菅野ダム", "向道ダム", "御庄川ダム", "生見川ダム", "中山川ダム", "荒谷ダム", "一の坂ダム", "厚東川ダム", "木屋川ダム", "湯免ダム", "黒杭川ダム", "川上ダム", "末武川ダム", "今富ダム", "大坊ダム", "見島ダム", "屋代ダム", "真締川ダム"]
			}
		},
		{
			"ken": "徳島県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/3601/ipDamGaikyo_pc3601_pg1_fw0.html",
				"dam_name": ["池田ダム（機構）", "宮川内ダム", "川口ダム（利水）", "長安口ダム", "正木ダム", "福井ダム"]
			}
		},
		{
			"ken": "香川県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/3701/ipDamGaikyo_pc3701_pg1_fw0.html",
				"dam_name": ["内場ダム", "五名ダム", "大川ダム", "前山ダム", "長柄ダム", "府中ダム（利水）", "吉田ダム", "門入ダム", "五郷ダム", "粟井ダム", "粟地ダム", "殿川ダム", "千足ダム", "大内ダム", "田万ダム", "内海ダム"]
			}
		},
		{
			"ken": "愛媛県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/3801/ipDamGaikyo_pc3801_pg1_fw0.html",
				"dam_name": ["柳瀬ダム", "新宮ダム（機構）", "富郷ダム（機構）", "銅山川ダム群", "石手川ダム", "野村ダム", "鹿野川ダム", "黒瀬ダム", "鹿森ダム", "玉川ダム", "台ダム", "須賀川ダム", "山財ダム"]
			}
		},
		{
			"ken": "高知県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/3901/ipDamGaikyo_pc3901_pg1_fw0.html",
				"dam_name": ["早明浦ダム（機構）", "永瀬ダム", "大渡ダム", "桐見ダム", "中筋川ダム", "横瀬川ダム", "鏡ダム", "坂本ダム", "鎌井谷ダム", "以布利川ダム"]
			}
		},
		{
			"ken": "福岡県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/4001/ipDamGaikyo_pc4001_pg1_fw0.html",
				"dam_name": ["犬鳴ダム", "力丸ダム", "福智山ダム", "陣屋ダム", "藤波ダム", "江川ダム", "小石原川ダム", "山神ダム", "寺内ダム", "日向神ダム", "油木ダム", "北谷ダム", "ます渕ダム", "鳴淵ダム", "南畑ダム", "瑞梅寺ダム", "猪野ダム", "牛頸ダム"]
			}
		},
		{
			"ken": "佐賀県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/4101/ipDamGaikyo_pc4101_pg1_fw0.html",
				"dam_name": ["平木場ダム", "厳木ダム", "本部ダム", "狩立・日ノ峯ダム", "伊岐佐ダム", "井手口ダム", "矢筈ダム", "嘉瀬川ダム", "都川内ダム", "有田ダム", "竜門ダム", "深浦ダム", "岩屋川内ダム", "横竹ダム", "中木庭ダム"]
			}
		},
		{
			"ken": "熊本県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/4301/ipDamGaikyo_pc4301_pg1_fw0.html",
				"dam_name": ["下筌ダム", "竜門ダム", "緑川ダム", "市房ダム", "石打ダム", "氷川ダム", "上津浦ダム", "亀川ダム", "路木ダム"]
			}
		},
		{
			"ken": "大分県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/4401/ipDamGaikyo_pc4401_pg1_fw0.html",
				"dam_name": ["耶馬溪ダム", "松原ダム", "大山ダム", "ななせダム", "野津ダム", "稲葉ダム", "黒沢ダム", "床木ダム", "安岐ダム", "行入ダム", "青江ダム"]
			}
		},
		{
			"ken": "宮崎県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/4501/ipDamGaikyo_pc4501_pg1_fw0.html",
				"dam_name": ["祝子ダム", "松尾ダム", "渡川ダム", "綾南ダム", "瓜田ダム", "岩瀬ダム", "綾北ダム", "田代八重ダム", "立花ダム", "長谷(補助)ダム", "広渡ダム", "日南ダム", "沖田ダム"]
			}
		},
		{
			"ken": "鹿児島県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/4601/ipDamGaikyo_pc4601_pg1_fw0.html",
				"dam_name": ["鶴田ダム", "川辺ダム", "西之谷ダム", "大和ダム"]
			}
		},
		{
			"ken": "沖縄県", "Children": {
				"url": "https://www.river.go.jp/kawabou/html/list/7/4701/ipDamGaikyo_pc4701_pg1_fw0.html",
				"dam_name": ["福地ダム", "新川ダム", "安波ダム", "普久川ダム", "辺野喜ダム", "漢那ダム", "羽地ダム", "倉敷ダム", "金武ダム", "座間味ダム", "金城ダム", "我喜屋ダム", "大保ダム", "儀間ダム"]
			}
		}
	]

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2021年03月02 09:49日

タグ

2021, Children, CSV, go, HP, html, https, jp, kawabou, ken, lis, quot, river, url, www, サーバー, ダム, ため, データ, どこ, ところ, ファン, ブロック, 一部, 中止, 事, 人, 以前, 全国, 北海道, 取, 取得, 可能性, 可視, 各地, 国土交通省, 好評, 構造, 正直, 状況, 私, 記事, 負荷, 貯水, 追記, 道北, 頃, 高知県,

Hallo worldの定番。

2020.12.11

Logging

<?php
print("Hello world");

「こんにちは世界」がコンピューター言語の参考書にもっとも記載されている言葉だと思います。誰がこれを始めたのか自分は知らないのですが、定番中の定番ともいえる言葉です。プログラマーなら誰しも知っているだろうなと思います。

いままで、プログラマーという職業は嫌煙されていましたが今でなりたい職業の中に入ってきました。これも時代の流れなのかもしれませんが実際、プログラマーってデジタル土方さんなんですよね。これは今でもそうだと思います、人がコードを入力して書いているわけですから・・・・。近い将来、人工知能が簡単なアルゴリズムなら書いてくれるとは思います。いまでも自らをコードを自己進化して成長する人工知能は存在します。

ただ、自己進化と口頭で言ったことからプログラムが出来る人工知能は未だ存在しません。ただ簡単なこと、例えばデザインをHTML化してくれるサービスは存在していて精度もなかなか良いです。またロゴを生成してくれる人工知能も存在していますが、やはりこれ以上の難しいことは人工知能は出来ません。

なので今後、２０?３０年はプログラマーという職業はなくならないと思っています。もっともらしい例を出すと電子書籍が登場しても本はなくならなかったという事です。今のところですけどね、遠い将来は消えているかもしれませんが。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2020年12月11 08:30日

タグ

Hallo, Hello, html, lt, php, print, quot, world, アルゴリズム, いま, コード, こと, これ, コンピューター, サービス, デザイン, デジタル, プログラマー, プログラム, 世界, 中, 人, 人工, 今, 入力, 参考書, 口頭, 土方, 嫌煙, 存在, 定番, 実際, 将来, 成長, 時代, 未だ, 知能, 簡単, 職業, 自ら, 自分, 自己, 言葉, 言語, 記載, 誰, 進化,

外部VPSサーバーからさくらレンタルサーバーのDBに接続する方法。

2020.12.04

Logging

外部VPSサーバーからさくらレンタルサーバーのDB（データベース）に接続する方法は下記のコードだけでは上手く動かない。だけど、tmpファイルを生成時にパーティションにu+xの権限を与えればこのコードは要件をみたします。因みにプロセスが残ったままになるので接続が終わったら、プロセスを削除してあげてください。なのでどのプロセスを削除する機能として追加しないと使えないかな？、時間があれば完成したコードをアップします。

なお、変数の初期値はご自身で入れてください。あとポート開放やexpectが入っていない場合はyumなどでインストールする必要もあります。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="Description" content="Enter your description here" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
	<link rel="stylesheet" href="assets/css/style.css">
	<title>ssh sqli</title>
</head>

<body>
	<?php
	print ssh_sqli_connect();
	?>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>
<?php
function ssh_sqli_connect()
{
	global $dblink,$dbname,$sshuser, $sshhost, $sshpassword,$host,$sshport;
	$ret = null;
	$cmd = "#!/usr/bin/expect -f
set timeout 3
expect -c \"spawn ssh -f -N -L $sshport:$host:3306 $sshuser@$sshhost -oStrictHostKeyChecking=no
expect \\\"$sshuser@$sshhost's password:\\\"
send \\\"$sshpassword\\n\\\"
\"
";

	$tmpfname = tempnam(sys_get_temp_dir(), 'ssh');

	$handle = fopen($tmpfname, "w");
	fwrite($handle, $cmd);
   	shell_exec("sh $tmpfname");
	sleep(3);
	$dblink = db_connect();
	try{
		for($id = 1 ;$id<=99;$id++){
			$ret = $dblink->query("SELECT * FROM $dbname.X.xtbl where $dbname.X.xtbl.id=$id;");
			if ($cnt = (int) mysqli_num_rows($ret)) {
			  $row = mysqli_fetch_assoc($ret);
			  print ($row["id"].", ".$row["name"]);
			}
		}
	}catch(PDOException $e){
		echo "失敗: " . $e->getMessage() . "\n";
	}

	fclose($handle);
	unlink($tmpfname);

	db_close();
	return "未完成";
}

function db_connect()
{
	global $dblink, $host, $user, $password, $dbname,$sshport;
	try {
		$dblink = new  mysqli("127.0.0.1", "$user", $password, $dbname ,$sshport);
		//$dblink->set_charset("utf8");
		return $dblink;
	} catch (PDOException $e) {
		echo "接続失敗: " . $e->getMessage() . "\n";
	}
}

function db_close()
{
	global $dblink;
	$dblink->close();
}

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2020年12月04 06:35日

タグ

8, charset, db, DOCTYPE, en, expect, gt, head, html, lang, lt, meta, name, quot, tmp, UTF-, vie, VPS, yum, アップ, インストール, コード, ご自身, サーバー, さくら, データベース, パーティション, ファイル, プロセス, ポート, まま, レンタル, 下記, 初期, 削除, 場合, 変数, 外部, 完成, 必要, 接続, 方法, 時間, 権限, 機能, 生成, 要件, 追加, 開放,

VirtualBoxで共有フォルダ設定とApacheが表示されるまで。

2020.11.29

Logging

前処理としてこのコマンドを打つ。

yum -y groupinstall "Development Tools"
yum -y update kernel
yum -y install kernel-devel kernel-headers gcc gcc-c++

起動したらメニューから[デバイス]-[Guest Additions CDイメージの挿入]

mount /dev/cdrom /mnt
cd /mnt
./VBoxLinuxAdditions.run

reboot

cd /var/www/
ln -s マウント先 sf_html

gpasswd -a oreore vboxsf
gpasswd -a apache vboxsf

mount -t vboxsf -o dmode=0755,fmode=0755 （共有名） (マウント先）

reboot

Apacheのconfig設定ではリンク先はシンボルリンクを参照させとこう、これでリブートさせて完了やねん。さてこれで理解できたら、あなたは凄いです。これは単なるメモ書き記載なので、わからないと思います。

なので、参考にしたサイトのリンクを貼っときます。
http://itemy.net/?p=1355
https://www.codelab.jp/blog/?p=2587

これらでおそらく大体の人が理解できたと思います。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2020年11月29 12:02日

タグ

-o, -s, -t, -y, 0755, A`, Additions, Apache, cd, cdrom, dev, Development, dmode, fmode, gcc, gcc-c, gpasswd, groupinstall, Guest, html, install, kernel, kernel-devel, kernel-headers, ln, mnt, mount, oreore, quot, reboot, run, SF, Tools, UPDATE, var, VBoxLinuxAdditions, vboxsf, virtualBOX, www, yum, イメージ, コマンド, デバイス, フォルダ, マウント, メニュー, 共有, 前処理, 挿入, 表示, 設定, 起動,

サブドメインをワイルドカードで割り付ける方法：熨斗（のし）

2020.11.15

Logging

サブドメインをワイルドカードで割り付ける方法を記載します。まず初期の設定としてAレコードを下記のように設定します。ドメイン名はご自分のドメイン名に変更ください。バリューも任意に設定ください。

*.example.com 123.123.123.123

次にVirtualhostsを下記のように設定します。%1の部分がサブドメインの値が入ってきます。これで出来上がりです。因みにSSL認証はどうするれば良いのかという人にヒントを記載します。「ワイルドカードSSL認証」などとググると方法が記載されているHPに行き当たると思います。そちらを試すと容易にワイルドカードのSSLも出来ちゃうですね?

<VirtualHost *:80>
  ServerName www.example.com
  DocumentRoot "/var/www/html/example.com"
  ErrorLog /var/log/httpd/example.com_error_log
  <Directory "/var/www/html/example.com">
    AllowOverride All
  </Directory>
</VirtualHost>
<VirtualHost *:80>
  ServerName example.com
  ServerAlias *.example.com
  VirtualDocumentRoot "/var/www/html/subdomain/%1"
  ErrorLog /var/log/httpd/sub.example.com_error_log
</VirtualHost>

案外簡単で拍子抜けひともいるかも知れないですが、これで何かのサービスを作ることは可能かと思いますよ。どうぞお試しあれ。

因みにexample.comというドメインは存在します、参考書や参考サイトなどで使われる「例えばサイト」は存在します。玄人志向の方はtestなどのドメイン名を使わずに上記のドメイン名を使用します。それには理由があるのです、察しがいい人は分かるかと思いますが、安全でないサイトへ飛んでしまったりする人がいるためです。あとダミー画像を生成したいのなら、Placehold.jpを使用すると良いですよ。運用しているのはソフテルという日本の会社です?

追記でSSL認証も書いときますね。Let’s Encryptでワイルドカード証明書の場合はこんな感じです。まず、certbotが入っているということが前提としてあります、無い場合はインストールしてください。まず最初に下記のコマンドを打ちます。ドメイン名は自分用に変えてください。

certbot certonly --manual \
-d *.example.com -m mail@example.com --agree-tos --manual-public-ip-logging-ok \
--preferred-challenges dns \

このような内容が表示されますので、TXTレコードの設定を行います。英語が分からなければコピペして翻訳アプリにかけてください。

_acme-challenge.example.com XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

TXTレコードが設定されたどうかの確認はMSDOSなどで下記のコマンドを打ちます。設定が完了された場合はVALUEの値が返ってきます。

nslookup -type=TXT _acme-challenge.example.com 8.8.8.8

上手く通ったあと、エンターを打ち次に進みます。上手くいくとpemが生成されましたよというメッセージが出るのでその階層をコピーします。コピーしたものを元にApacheのVirtualhostのconfigの設定を行います。こんな感じです。

<VirtualHost *:443>
  ServerName www.example.com
  DocumentRoot "/var/www/html/example.com"
  ErrorLog /var/log/httpd/example.com_error_log
  <Directory "/var/www/html/example.com">
    AllowOverride All
  </Directory>
  SSLEngine on
  SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
</VirtualHost>
<VirtualHost *:443>
  ServerName example.com
  ServerAlias *.example.com
  VirtualDocumentRoot "/var/www/html/subtaxi/%1"
  SSLEngine on
  SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
  ErrorLog /var/log/httpd/example.com_error_log
</VirtualHost>

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2020年11月15 12:00日

タグ

１, 123.123.123.123, 80, com, DocumentRoot, Error, example, gt, HP, html, lt, quot, servername, SSL, var, VirtualHost, Virtualhosts, www, カード, これ, ご自分, サブ, そちら, ドメイン, ドメイン名, のし, バリュー, ヒント, レコード, ワイルド, 下記, 人, 任意, 値, 初期, 変更, 容易, 方法, 次, 熨斗, 記載, 設定, 認証, 部分,