ページ | On the ghost Internet

Devというのはデベロッパーの略称です．

2024.06.20

Logging

おはようございます、Devというのはデベロッパーの略称です．決してデブだからDevと記載しているわけでもなく、DevとBlogは別れていてそれぞれのリンクに遷移するように出来ていますw．

この頃、あまり個人開発をしていない感じですが、それでも一年に一回は何かしら作っています．正確には作っては消したりしています．Devのリンクには含まれないtool/demoという物が存在しています．

こちらでは今まで、サンプルコードとして作ってきたものが見えるようになっていました．この度、tool/demo-list/というモノを作りました．これにより今までのリンクに簡単に遷移出来るようになります．

なお、Demoページに関しては全てのページが動作しているとは限りません！中には動作を停止しているものもあります

明日へ続く．

著者名 @taoka_toshiaki

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

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

OFUSEで応援を送る

投稿日時 2024年06月20 06:00日

タグ

blog, demo-list, Demoページ, dev, tool, ｗ, サンプルコード, それぞれ, デブ, デベロッパー, ページ, リンク, 一回, 個人開発, 全て, 動作, 度, 物, 略称, 遷移出,

gistの埋め込みで盡く、デザインが崩れていた話。

2023.05.29

Logging

おはようございます、gistの埋め込みで盡く、デザインが崩れていた話です。いつからか分からないですが、gistの埋め込みを行っていた部分がすべて崩れていたので、先日の早朝に全ての崩れを直しました。

せっかく訪問してくださったのに、見栄えが崩れていてページの下部まで見ないと分からない状態になっていた事を陳謝します🙇。

https://t.co/4djXDNbAqdで埋め込んでいるものがことごとく、見栄えが崩れていた（対応済み）。ワードプレスの話。
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) May 26, 2023

極力デザインの崩れはないのかを確認しているのですが、デザインの崩れに気づかずに数ヶ月も放置していました。原因はおそらくワードプレスのバージョンアップによる影響かと思います。こういう仕様になったのか、それとも一時的なことなのか分からなかったのでプラグインに差し替えてプログラムコードを貼り付けています。

おそらくこちらの方が安全だと思うので、そういう形にしています。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

gist, すべて, デザイン, バージョンアップ, プラグイン, プログラムコード, ページ, ワードプレス, 下部, 仕様, 全て, 原因, 形, 影響, 数ヶ月, 早朝, 状態, 見栄え, 話, 部分,

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, コード, しらかわ, ソース, そちら, データ, ネーション, ページ, まさと, ライブラリ, 下記, 事, 今回, 使い方, 使用, 場合, 日, 昨日, 昼間, 朝, 正人, 白川, 簡単, 紹介,

Qiitaのfeedを取得して表示するだけのコード。 #php

2022.11.05

Logging

おはようございます、土曜日の朝ですね😗。

今日は文化の日にQiitaにUPしたfeedを取得して表示するだけのコードを書きました。見た目はこんな感じでQiitaの雰囲気を取り入れたデザインにしています。デモ版として実際にサーバーで起動しているモノです、feedを取得しているユーザーは自分を入れて３人です。

表示する人数が多くなるとページを描画する時間が遅くなるので実質、１０人が限度かも知れないです。もし何人ものユーザーを取得したいと考えている方は表示部分と処理部分を別けて、尚且つ処理部分は非同期処理で変更することを推奨します。

尚、明日には２つに別けたプログラムコードを別記事として記載しますので、しばしお待ち下さいませ🙇。

今回のソースコードはこんな感じになってます。

<?php
    function get_Qiitafeed(string $feedUrl){
        $xml = @simplexml_load_file($feedUrl);
        if(isset($xml->entry)){
            print("<ul class='qiita_feed-list'>");
            foreach($xml->entry as $key=>$val){
                print("<li><a href='{$val->url}'>".$val->title."</a></li>");
            }
            print("</ul>");
        }
    }
?>
<!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">
<style>
    .qiita_feed-list > li{
        /* font-weight: bold; */
        color:aliceblue;
    }
    .qiita_feed-list > li > a{
        color:aliceblue;
    }
    body{
        background-color:#60b111;
    }
    .shadow-lg {
        box-shadow: 0 1rem 3rem rgba(255,255,255,.195)!important;
    }    
</style>
<title>Qiita-feed</title>
<?php
    require $_SERVER['DOCUMENT_ROOT'] ."/header_script.php";
?>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="text-light">Qiita-feed</h1>
            </div>
        </div>
    </div>
    <div class="container mt-2">
        <?php
            $Id_List = ["taoka-toshiaki","mpyw","suin"];
            foreach ($Id_List as $key => $id) {
            ?>
        <div class="row shadow-lg p-3 mb-5 bg-body rounded">
            <div class="col-12">
                🌿<span class="text-light">://qiita.com/<?=$id?>/feed :[引用]</span>
                <?=get_Qiitafeed("https://qiita.com/".$id."/feed")?>
            </div>
        </div>            
            <?php
            }
        ?>
        Copyright <?=date("Y")?>  <a href="https://358tool.com">358tool.com</a>
    </div>
<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.6.0/js/bootstrap.min.js"></script>
</body>
</html>

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

10, 2, ３, feed, feedUrl, function, GET, lt, php, qiita, Qiitafeed, string, UP, お待ち, コード, こと, サーバー, ソース, デザイン, デモ版, プログラム, ページ, もの, ユーザー, 人数, 今回, 今日, 何人, 処理, 別記事, 取得, 同期, 土曜日, 変更, 実質, 実際, 感じ, 推奨, 描画, 文化の日, 方, 明日, 時間, 朝, 自分, 表示, 見た目, 記載, 起動, 部分, 限度, 雰囲気,

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, アプリ, アレ, インストール, コード, こと, コレ, サーバー, デモ, フレームワーク, ページ, ポート, 事, 仕様, 初学者, 勉強, 動作, 土日, 後, 概念, 気, 為, 理由, 背景, 記入, 設計, 認識, 起動, 道具, 開発, 関係, 雨,

あのサイトをリニューアルしました。👏、やっとのことで。 #renew #site #よさこい祭り

2022.09.25

Logging

おはようございます、昼間は暑い日もありますが夜は涼しくなりましたね😄。

今日は昨日、一日かけて【よさこい祭り動画検索】サイトをリニューアルしました。ソースコード（プログラム）も１からやり直しています。表示するのに結構時間がかかっていた部分は瞬時に表示されるように調整しました。

以前は検索結果が全て表示されるような仕様でしたが、ページに分割して表示されるように変更しました。また、検索ワードを入力すると検索結果（チーム名）が表示される様に変更しました。チーム名を押すとページへ遷移するようになっています。以前より直感的に操作出来る形になったかと思います。

尚、このサイトを作るにあってYOUTUBEのAPIを使用しているのですが、リアルタイムに動画を検索している訳では無くデータで押さえています。そのデータに関しては数ヶ月置きに更新するように致します。何故、データで押さえている理由はAPIの問い合わせに上限があり、その上限数を超える検索結果が返って来なくなる為です。この上限は申請を行えばある程度増やしてくれるそうですが、それでも上限数量を超えると表示されなくなるというデメリットがあるので、データで押さえています😌。

トイウコトデ、よさこい祭り動画検索サイトよろしくお願いします。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

１, API, com, https, renew, site, yosakoi-video, youtube, コード, サイト, ソース, チーム, データ, プログラム, ページ, よさこい祭り, リアルタイム, リニューアル, ワード, 一, 今日, 仕様, 以前, 使用, 入力, 全て, 分割, 動画, 変更, 夜, 形, 操作, 数, 日, 昨日, 昼間, 時間, 検索, 瞬時, 結果, 表示, 訳, 調整, 遷移, 部分,

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

サイトが無くなるのは悲しいな。まるで一つの…😶。

2022.08.31

Logging

こんにちは、2022年の８月は今日で最後です。

そんな日にスマホに撮り溜めた写真を初めて振り返って見ています、自分が撮った写真は大体、空か花ですがたまに旅先の写真なんか混ざっていたりして、そういうのを見ていると懐かしい気持ちになります。

何か懐かしいな。 pic.twitter.com/z39xD24QyN
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) August 31, 2022

そんな写真の中に駆け出しの芸術家の展覧会に見に行っていた時の写真を発見しました、その人の作品をぐぐってみるとFBページと商品ストアは発見したもののコロナ禍で何だか活動を辞めたみたいで、ホームページなどは見えなくなっていた。そういうサイトが消えるのをみると何か、悲しい気持ちになりますね。夢半ばで諦める人が多い、それも花が開きそうなそんな人達がなんか辞めていく、そういうのを見ると本当にもったいなって・・・。

売れっ子にならなくても良いので続けるべきです、とても大事なことや好きな事は売れっ子にならなくても、あなたの人生にとって大切なことになる、続けることと発信する事を辞めないことは人生を後から振り返った時、絶対あの時、諦めなくて良かったと思うときが決ます。なので好きなものは手放さない方が良い、人生は一度きりだから。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2022年08月31 01:18日

タグ

2022, 8, FB, あなた, こと, コロナ, サイト, ストア, スマホ, それ, たま, ページ, ホームページ, 一つ, 中, 事, 人, 人生, 今日, 作品, 写真, 半ば, 商品, 売れっ子, 夢, 大事, 大体, 大切, 展覧会, 旅先, 日, 時, 最後, 本当, 気持ち, 活動, 発信, 発見, 禍, 空, 自分, 花, 芸術家, 駆け出し,

Photo by Francesco Ungaro on Pexels.com

Laravelで再構築した2bbs-video.comをヨロシク😌

2022.08.10

Logging

こんにちは、よさこいをしている踊り子さん達へ、熱中症にはお気をつけてくださいませ。

本日はあまり使用されていなかった、2bbs-video.comをLaravelで再構築したお話を記載します。2bbs-video.comはYOUTUBE動画を共有するのに特化したサイトになります。当然、YOUTUBEのアドレスのない投稿はできません。今のところ動画の投稿内容は管理人が独断と偏見で管理します、その為、投稿していた内容が削除されるという事もあります。

サイトをLaravelで再構築していて、ページネーションが半端ないぐらい楽に生成できたのは凄く便利だなって感じましたが、逆にベタで構築できる技術も必要じゃないかなって思います。

laravelのページネーション（ページ番号の割付け）が楽だ。楽過ぎる。良いのかコレで🙄、#フレームワーク #Laravel pic.twitter.com/qojE6vEVpZ
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) August 8, 2022

そしてLaravelにはパッケージが豊富にあるのだけど、正直な所、どれが良いパッケージ（有名所）なのか分からないので調べる必要があるなって感じました。それまでは自分で作るしか無いかもしれない、そういう所などの経験値を積まないとLaravelゴリゴリ使えますとは言えないなと。ただ、大体の勘所は掴めましたね。あとは習うより慣れろ感覚でいろいろと制作していきます😌。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2022年08月10 05:32日

タグ

2, bbs-video, com, Laravel, youtube, アドレス, お気, お話, キャッチャー, サイト, ところ, どれ, ネーション, パッケージ, ページ, ベタ, よさこい, 事, 今, 使用, 便利, 偏見, 共有, 内容, 削除, 動画, 半端, 必要, 所, 技術, 投稿, 有名, 本日, 構築, 正直, 為, 熱中症, 特化, 独断, 生成, 管理, 管理人, 記載, 調, 豊富, 踊り子, 逆,

Laravelというフレームワークを使って既存のサービスを置き換えていました。

2022.08.09

Logging

おはようございます。今日は花火大会があるそうですが昼から雨が降るらしいのです。本当なのか信じられないほどの上天気です。

さて、現在、既存のサービス（WEBAPP）をLaravelへ置き換えているのですが、その置き換える中でLaravelは楽だなって思える所がありました、例えばページネーションはとても楽に設置出来たりログイン機能なども比較的楽に構築できる反面、データーベース、主にテーブルの操作は不便だなって思ったりしました。サブクエリなどを使用している箇所などはララベル用に置き換えないといけないので、既存のサービスを移植するのは、少し工数がかかります。

laravelのページネーション（ページ番号の割付け）が楽だ。楽過ぎる。良いのかコレで🙄、#フレームワーク #Laravel pic.twitter.com/qojE6vEVpZ
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) August 8, 2022

でも、いろいろな事がLaravelで構築すると楽というのが自分の総合評価なのですが、ゴリゴリコードを書くというよりは、ララベルのお作法に従って対応するというのが正しいかな。元々、Laravelにはいろいろな機能があるので、その機能を使用してコードを書くほうがベストだという事。

今ではググると日本語でのLaravelの解説もあるのでググった後に公式ドキュメントで例文を見てコードを修正するのがベストかなって思っています。

今まで頓挫していた開発も暇な時間を使い少しずつ少しずつ作っていこうと思います。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2022年08月09 09:35日

タグ

Laravel, WEBAPP, いろいろ, クエリ, コード, サービス, サブ, データー, テーブル, ネーション, フレームワーク, ページ, ベース, ララベル, ログイン, 上天気, 不便, 中, 事, 今日, 作法, 使用, 反面, 大会, 対応, 少し, 工数, 所, 操作, 既存, 昼, 本当, 構築, 機能, 現在, 移植, 箇所, 総合, 自分, 花火, 設置, 評価, 雨,

Photo by eberhard grossgasteiger on Pexels.com

英語学習用、サイトを構築中。基本自分用（お裾分け😌）

2022.08.05

Logging

おはようございます。今日はウォーキングしてきましたよ。自分が歩いているのは超早期です（笑

作りかけ pic.twitter.com/pjStv5NgI2
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) August 4, 2022

さて、自分用に英語学習用サイトを構築中です（現在進行形）。主に単語を覚えるためだけのサイトです、毎日数十単語の入力しています。1800単語まで数日はかかりそうですが全部、手動で入れます。因みに自分が学習しているのは中学生レベルです。中学生の英語を網羅するには1800単語を覚えないといけないらしいです。その作業が終わって自分が1800単語を覚えたら次は高校生で覚える単語も別途ページを構えて作ろうと思っています。

因みにサイトはシンプルで自分にとっては効率が良い作りを追求しようと思っていますので、あまりごちゃごちゃしたサイトにはしないで、必要最低限の作りのサイトで運用しようと思っています。その為、広告などは貼らないです。また、Topページ（358tool.com）では今後、いろいろなツールを作っていきますので、TOPページではそのリンクと概要を記載していきます。サービスは自分が欲しいと思ったものを中心に構築していきます、尚、広告を貼るサービスもありますので悪しからず！

では、今後とも宜しくお願い致します🙇。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2022年08月05 06:49日

タグ

1800, 358, com, tool, TOP, いろいろ, ウォーキング, お裾分け, サイト, シンプル, ため, ツール, ぺ, ページ, レベル, 中学生, 今後, 今日, 作り, 作業, 入力, 全部, 別途, 効率, 単語, 基本, 学習, 広告, 必要, 手動, 数十, 数日, 早期, 最低限, 構築, 次, 毎日, 為, 現在, 笑, 網羅, 自分, 英語, 追求, 進行形, 運用, 高校生,

Photo by cottonbro on Pexels.com

新さくらレンタルサーバーが昨日から使えるようになっている。

2022.02.17

Logging

おはようございます、今日の朝は一段と寒さを感じました。

さて今日はレンタルサーバーの話です。タイトル通り新さくらレンタルサーバーが昨日から使えるようになっているので使用してみました😌。

処理能力は確かに早くなっている気がします、まだブログなどを取り扱っていないのでどこまで早くなっているかは計測できてはいません。何故、ワードプレスなどを使用すると表示速度が遅くなるのかという疑問を持つ人も多いと思います。答えは一概に言えないのですが。記事数が増えてくるとデータベース（保管庫）から記事を探し出すのが遅くなるという理由が第一に上げられます。その他、レンタルサーバー側の通信速度やデータベースの処理能力が遅い、レタリング能力が遅いなどいろいろな理由により表示速度が変わります。

レンタルサーバーを使用していたとき、TOPページなどは表示速度が早いけど記事ページになると遅いというサイトを見かける人もいるかと思います、これはキャッシュ（一時的保存）という技術を取り入れているからです。この方法を取り入れると良くアクセスするサイトは表示速度は早いけど、あまり参照しないページは遅くなるという事に繋がります。

ここまで話しましたが表示速度を本当に改善したい場合はレンタルサーバーをグレードアップさせるよりもサーバー側の通信速度を改善するのが一番手っ取り早く表示速度が早くなります。

プラグインを導入したり、画像を軽量化するなどの巷に溢れる情報で改善するよりか、サーバーサイドの通信速度を見直すこととサーバー側の処理能力を見直すことの方が断然に表示速度が早くなります。

因みに今日から自分が作った掲示板サービスを運用します、こちらでの告知はもう少し後になります。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2022年02月17 07:15日

タグ

TOP, いろいろ, キャ, これ, サーバー, サイト, さくら, その他, タイトル, データベース, とき, どこ, プレス, ブログ, ページ, レタリング, レンタル, ワード, 一, 人, 今日, 使用, 保管, 処理, 昨日, 朝, 気, 理由, 疑問, 答え, 能力, 表示, 計測, 記事, 話, 通信, 速度,

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">
<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" />

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

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

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

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

タグ

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

T2のお問い合わせフォームフロント側が緩く完成、続きは今の所なしかな。

2021.10.26

Logging

朝起きは三文の徳ですが・・・。本当なのでしょうか、朝方からお問い合わせフォームのちょこちょこと残りを制作しておりました。

T2のお問い合わせフォームフロント側が緩く完成しました、パチパチ?。この雛形を元に制作してくださいと業者へ持っていくと値引きはしてくれるとは思います。即興ですが一応、汎用性がある作りにしています。

code{0} お問い合わせフォーム編-part1

フロント側は実はあまり得意ではないです、全然わからない訳ではないのですがこの頃、コードを書かなかったら抜け落ちている部分が結構あり反省しております?

code{0} お問い合わせフォーム編-part2

ソースコードはgithubに置いてありますのでご自由にご使用くださいませ。あまり労力とかかけていないのですが、pushしてもgithubのページに反映されないという事象が何度もありまして反映待ちで結構な時間を取られました。

https://github.com/zip358/T2_pg/tree/main/inquiry

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2021年10月26 04:57日

タグ

2, am-BShXaVuI, com, github, https, push, watch, www, youtube, お問い合わせ, コード, ソース, フォーム, フロント, ページ, 三, 事象, 今, 何度, 作り, 使用, 元, 制作, 労力, 即興, 反映, 反省, 完成, 得意, 徳, 所, 時間, 朝方, 朝起き, 本当, 業者, 汎用性, 結構, 訳, 部分, 雛形, 頃,

simロックの外し方以前auだった人へ送る。無料でsimロック解除出来るよ。

2021.09.22

Logging

昨日は中秋の名月だったみたいですね、そんな中、自分はsimロック解除と戦っていました。ぐぐると何やらsimロック解除は無理だとか、有料で解除が出来る。au店頭に行けば解除が可能だけど3000円、費用がかかる。はたまたsimロック解除用のsimがあるのでそれを買いなさいみたいな。そんな情報までありましたが・・・。

無料で出来る方法はないものなのかとググりまくって、ようやく「すまほん」さんのサイトの記事にsimロック解除の方法が記載されていたのを発見しました?。

https://smhn.info/202004-how-to-unlocking-au-simlock

simロック解除にはau IDが必要になるですけど、メールアドレスがあれば誰でもau IDは発行できるみたいですね。なのでau IDを発行後、auのSIM解除のページで解除申請をします。そうすると申請確認メールが届くのでそこに記載されているURLにアクセスします。するとsimロックが解除されます。解除されるとiPhoneの設定画面の情報のsim表記がsimロックなしと表示されます。

auが中古・解約済み端末のSIMロック解除を無料化、手順を解説 – すまほん!!https://t.co/x5YAbeKy58
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) September 21, 2021

尚、simロック解除する場合、すべての手順をスマホ端末で出来るようにしておくと簡単にsimロック解除が出来ます。あと自分はsimロック解除完了という表記が出たあと、iPhoneの電源を落としてsimを挿し再度、起動させました。

トイウコトデ、現場からは以上です?。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2021年09月22 09:50日

タグ

-how-to-unlocking-au-simlock, 202004, 3000, au, https, ID, info, SIM, smhn, アドレス, サイト, すまほん, そこ, それ, ページ, メール, もの, ロック, 中, 中秋, 人, 以前, 可能, 名月, 店頭, 必要, 情報, 方法, 昨日, 有料, 無料, 申請, 発行, 発見, 確認, 自分, 解除, 記事, 記載, 誰, 費用,

C#でwebview2を使用して情報を収集するためのサンプルコード。

2021.08.22

Logging

今日は日曜日ですね。先日は久しぶりにお天気になったので外へ出ていっておりました。これを投稿する日は晴れているでしょうか。

さてjavaを勉強している合間にC#も勉強しております。javaを勉強しているとC#に応用が効くのでとてもやりやすいですね。webview2というオブジェクトをインストールして使用しました、VC#2019で開発しているのですが既存のwebBrowserというオブジェクトは全然というほど役に立ちません。例えばYahooのトップページを開いたらjavascriptエラーのアラートが表示されたりして動作してくれません。おそらくwebBrowserというオブジェクトを使用して何か開発している人はあまりいないじゃないかなと思います。

今回、作成したサンプルコードはYahoo!ニュースのITニュースのタイトルとリンクを収集するものですが、この方法を応用してブラウザの作業を自動化することはそれ程難しくないと思っています。

サンプルコードの一部を記載します＝ボタンをクリックする場所に埋め込んだソースコードになります。因みにawaitを使用しているのでボタンクリックにはasyncしてあげる必要があります。

※注意事項としてYahoo!ニュースのソースコードが変わればそれに対応したコードを記載する必要があります。

C# webview2でテスト

PM> Install-Package Microsoft.Web.WebView2 -Version 1.0.902.49

        async private void button1_Click(object sender, EventArgs e)
        {

         var result = await webView21.ExecuteScriptAsync(
                "(()=>{let obj = document.querySelectorAll(\"#uamods-topics > div > div > div > ul > li > a\");" +
                "let str = \"\";" +
                "for (let i = 0; i < obj.length; i++)" +
                "{" +
                "str += obj[i].innerText + \"[\" + obj[i].href + \"],\";" +
                "}" +
                "return str;" +
                "})();"
             );
            richTextBox1.Text = result.Replace(",","\n").Replace("\"","");
        }

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2021年08月22 08:54日

タグ

2, 2019, IT, java, javascript, VC++, webBrowser, webview, Yahoo, アラート, インストール, エラー, オブジェクト, コード, こと, これ, サンプル, タイトル, ため, ドップ, ニュース, ブラウザ, ページ, もの, リンク, 久しぶり, 人, 今回, 今日, 作成, 作業, 使用, 先日, 勉強, 動作, 収集, 合間, 外, 天気, 役, 応用, 情報, 投稿, 方法, 既存, 日, 日曜日, 自動, 表示, 開発,

radiko[ラジコ]のWindowsアプリがないので作りました。

2021.03.24

Logging

昔、ラジコのWindowsアプリが存在していたのだけど今は使えなくなっていたのでradiko[ラジコ]のWindowsアプリを作りました。簡単な仕様です・・・とても簡単で単なるwebブラウザをはめ込むようにしているだけです。なのでこのページからリンクを辿れば別のサイトに移動することができます。何故、これを作ったのかというとブラウザとは別にアプリとして開きたかったという経緯があります。動作環境はwindows10です。

使用したい方は下記のURLからダウンロードしてくださいませ。

https://zip358.com/tool/radiko-view-Setup-1.0.0.zip

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2021年03月24 10:19日

タグ

1.0.0, 10, 358, com, https, Radiko, radiko-view-Setup-, tool, url, web, Windows, www, zip, アプリ, こと, これ, サイト, ダウンロード, ブラウザ, ページ, ラジコ, リンク, 下記, 今, 仕様, 使用, 別, 動作, 存在, 方, 昔, 環境, 移動, 簡単, 経緯,

マウスの動きをトラッキング（追跡）する。

2020.11.17

Logging

サイトのマウスの動きをトラッキングして行動パターンを知りたいという案件がクラウドでありました。応募はしていませんが考え方はこのような感じだと思います。ただ楽天サイトだという制約があったのでクロスサイトへ接続可能なのかはわからないけれど…ね?。

考え方のソースコードとdemoサイトのリンクを貼っときます、因みにIPを取れるJSライブラリもあるみたいなので、それを使用すると案件の内容が完結すると思います。
尚、PHPで再度、返却していますが、実際トラッキングする場合はPHP側でJSから送ったデータを保存処理を行う処理とクライアントが開いている状態のページの画面をキャプチャする機能などが必要になるかと思われます。そういう処理をPHP側で行わないといけないので、実際はJS側ではマウスのトラッキングとクライアントがブラウザで開いた画面サイズもPHP側に送信する必要はあるかなと。そういう事をPHP側に追加すれば良いのかと・・・感じました。

Demo22:: https://zip358.com/tool/demo22/

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

window.onload = function(){
	document.body.addEventListener("mousemove",(e)=>{
		var timeInMs = Date.now();
		document.querySelector("#log").innerHTML = navigator.userAgent + "<br>" + "x=" + e.offsetX  + "y=" + e.offsetY;
		var data = {timeInMs:timeInMs,userAgent:navigator.userAgent,x:e.offsetX,y:e.offsetY};
		move_xy(data).then(function(response){
			console.log(response);
		});
		
	});
};

async function move_xy(data){
	return await new Promise(function(resolve) {$.ajax({
		type: "POST",
		dataType: "json",
		url: "./move_xy.php",
		data: data,
		success: function (response) {
			if(response.res==="ok"){
				
				resolve(response);
			}
			resolve(false);
		},
		error:function(XMLHttpRequest, textStatus, errorThrown){
			resolve(false);
		}
	});});
}

<?php
$obj["timeInMs"] = $_POST["timeInMs"];
$obj["userAgent"] = $_POST["userAgent"];
$obj["x"] = $_POST["x"];
$obj["y"] = $_POST["y"];
$obj["res"] = "ok";

print json_encode($obj);

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2020年11月17 05:00日

タグ

demo, IP, JS, php, あるかな, キャプチャ, クライアント, クラウド, クロス, コード, サイズ, サイト, ソース, それ, データ, トラッキング, パターン, ブラウザ, ページ, マウス, ライブラリ, リンク, 事, 使用, 保存, 側, 内容, 再度, 処理, 制約, 可能, 場合, 完結, 実際, 必要, 応募, 感じ, 接続, 案件, 楽天, 機能, 状態, 画面, 考え方, 行動, 返却, 追加, 追跡, 送信,

Fox-Black.comというサイトを開設。

2020.09.29

Logging

Fox-Black.comというサイトを開設。本当はblack-fox.comが良かったのだけどPlayStationのアカウント(blackfox)が取られていてfoxblackにしてPlayStationのアカウントを取得。そのいうことでサイトも設置したいなと思いサイトを開設。
最初はfc2の無料サイトでサイトを開設していたのだけど、やっぱ独自のドメインで構築したくなったので、ドメインを取得。

そしてサイトを構築しました。まだ何もないのだけど、なんかやっていきたいなとGame logページまで作りましたが、たぶんゲームはあまりしないのでログとして残らないだろうから、何か違うものに変わっていくと思います。

ちなみにドメインはfox-black.comというドメインです、実は静的ページに見えてWPで出来ているですよ。昨日突貫工事でサイトを構築しました。ワードプレスだけどサイドバーという概念は除けてます。

明日、WPの超シンプルなコードを公開します。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2020年09月29 07:18日

タグ

2, black-fox, blackfox, com, fc, Fox-Black, FoxBlack, Game, log, PlayStation, wp, アカウント, ゲーム, こと, サイト, ドメイン, バー, プレス, ページ, もの, ログ, ワード, 取得, 工事, 明日, 昨日, 最初, 本当, 概念, 構築, 無料, 突貫, 設置, 開設,

わざわざ対策した、これでも。

2020.06.18

Logging

非同期通信する部分にデータ投げてアクセスカウンターをわざわざ増やしてくれる人がいたので、わざわざ対策した、これでも抜けてくるようだと違法な領域かと思います。
わざわざ対策しないといけないというのが、自分としては変だなと思うところ。
何故、そこまでするのか・・・。
意味がわからないが…。

そもそもあんぽんたんな自分に関わっても意味がないのではと思っている。トイレで目が覚めてアレ、アクセスが増えていると思って・・・。

一時間ばかり、ぼーけーってして10分ぐらい、対策用のコードを書いてバグとりして、まぁネタになるので今、ブログを書いています。

話全然変わるけど、Twitterで音声投稿が可能になるだってさってのをタイムラインで見てすぐにRTしました。

Twitterで音声の投稿が可能に https://t.co/ydywTsJB6V pic.twitter.com/N0nDOMdt2X
— PC Watch (@pc_watch) June 17, 2020

実装されたら面白そうだけど、いろいろと問題も出てきそうだと思います。デジタルツールってそういう所がありますよね。

ちなみに話戻して、ページを切り替えるとアクセスカウンターは増えます。その対応は出来ますがしません。どうぞアクセスカウンターを増やしてください。SEO的にもとても有り難いことなので・・・。

アクセスカウンターが増えて得することはあるけど、損することはないじゃないかと思います。初めて訪問されるユーザーにとってはアクセス数が多いページは信頼されやすいです。仕様的にはアクセスカウンター増えやすい仕様にあえてしてますよ。

数字マジック、数の印象は大体あると思います。客が並んでいるお店はもしかしたら美味しいかもと思い込むのと同じです。

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2020年06月18 03:10日

タグ

10, rt, Twitter, アクセス, アクセスカウンター, アレ, あんぽんたん, いろいろ, コード, これ, そこ, タイムライン, ツール, データ, デジタル, トイレ, ところ, ネタ, バグ, ブログ, ページ, わざわざ, 一, 人, 今, 可能, 同期, 問題, 変, 実装, 対策, 意味, 所, 投稿, 目, 自分, 話, 通信, 違法, 部分, 音声, 領域,

windows Terminal1.0を使ってみた。

2020.05.24

Logging

windows Terminal1.0を使ってみた、感想はカスタマイズして何だか良い感じですね。これからVS codeみたいにバージョンアップすればいろいろと便利になるみたいなので、良い感じです。今後に期待感もあります。

The new Windows Terminal

因みにカスタマイズの方法は公式ページに日本語で書かれているのでなんて親切なんだと思ってしまいました。
こちらがそのページになります。json形式の記述でカスタマイズすることでカラーの変更や透過することなど自分好みにwindows Terminalをカスタマイズすることが可能です。

https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/profile-settings

尚、windows Terminalのダウンロードはこちらからになります。
https://www.microsoft.com/ja-jp/p/windows-terminal-preview/9n0dx20hk701?activetab=pivot:overviewtab

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2020年05月24 07:15日

タグ

1.0, Code, com, customize-settings, docs, https, ja-j, ja-jp, json, microsoft, profile-settings, Terminal, VS, Windows, www, アップ, いろいろ, カスタマイズ, カラー, こちら, こと, これ, ダウンロード, バージョン, ページ, 今後, 便利, 公式, 可能, 変更, 形式, 感じ, 感想, 方法, 日本語, 期待感, 自分, 親切, 記述, 透過,

WEBお問い合わせフォームのお値段はいったい幾ら？

2020.01.17

Logging

WEBお問い合わせフォームのお値段はいったい幾らなのか？
堀江貴文氏はデジタルの値段は限りなくゼロに近くなると言っていたけど、無料のWEB申し込みフォームやお問い合わせフォームはある。自分もお問い合わせフォームの簡易的な物を作ってみましたのでファイルをアップしますね。

テンプレートエンジンとしてtwig3.0を使用しています、そのため動作環境はPHP7.2以上になります。ソースコードの可変は行って構いません、またこのソースコードの動作保証などは致しません。WEB担当者様が確認を行いバグ等があれば修正を行ってください。

尚、Composerでtwigをインストール済みという事が前提となります。また送信部分やエラー処理についてはご自身で機能の追加が必要となります。

サンプルページ
https://zip358.com/tool/request/

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>お問い合わせ</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <script src="js/common.js"></script>
    <style>
        .jumbotron {
            background-color: #2bd4d0;
            color: #fff;
        }

        .btn-primary {
            color: #fff;
            background-color: #2bd4d0 !important;
            border-color: #2bd4d0 !important;
        }

        .input-group-text {
            background-color: #2bd4d0;
            border: 1px solid #2bd4d0;
        }
    </style>
</head>

<body>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">お問い合わせ</h1>
            <p class="lead">必須項目を入力し送信ボタンを押してください。<br>DEMOのため送信はできません</p>
        </div>
        <div class="alert alert-warning" id="error_sendmail" role="alert">
        </div>
    </div>
    <form action="index.php" method="POST">
        <div class="container">
            <div class="row">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">お名前[必須]</span>
                    </div>
                    <input type="text" name="name" class="form-control" id="name" placeholder="name" value="{{name}}">
                </div>
                <div class="alert alert-warning" id="error_name" role="alert">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">メールアドレス[必須]</span>
                    </div>
                    <input type="email" name="email" class="form-control" id="email" placeholder="name@example.com"
                        value="{{email}}">
                </div>
                <div class="alert alert-warning" id="error_email" role="alert">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">@</span>
                    </div>
                    <input type="text" name="twitter_account" class="form-control" placeholder="twitter account"
                        aria-label="twitter account" aria-describedby="basic-addon1" value="{{twitter_account}}">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">お問い合わせ内容[必須]</span>
                    </div>
                    <select name="meun" class="form-control" id="exampleFormControlSelect1">
                        {% for selectop in meun_option %}
                        <option value="{{selectop.value}}" {{ selectop.value == selectoped ? " selected":"" }}>
                            {{selectop.name}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="alert alert-warning" id="error_meun" role="alert">
                </div>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">コメント[必須]</span>
                    </div>
                    <textarea name="comment" rows="10" class="form-control" aria-label="コメント">{{comment}}</textarea>
                </div>
            </div>
            <div class="row">
                <footer class="blockquote-footer">
                    <small class="text-muted">
                        ご自由に記入ください。
                    </small>
                </footer>
            </div>
            <div class="alert alert-warning" id="error_comment" role="alert">
            </div>
            <button type="submit" class="mt-2 btn btn-primary btn-lg btn-block">送信する</button>
        </div>
    </form>
</body>

</html>

<?php
session_start();
require __DIR__ . '/vendor/autoload.php';
use Twig\Environment;
use Twig\Loader\FilesystemLoader;

$loader = new FilesystemLoader(__DIR__.'/templates');
$twig = new Environment($loader);
$meun_option = json_decode(file_get_contents("js/select.json"));

$form = ["name","email","twitter_account","meun","comment"];
$data = [];

if($_POST){
	foreach($_POST as $key=>$val){
		$_SESSION[$key] = strip_tags($val);
	}
}
if($_SESSION){
	foreach($_SESSION as $key=>$val){
		$_SESSION[$key] = strip_tags($val);
	}
}

foreach($form as $key => $val){
	$data[$val] = $_SESSION[$val]?$_SESSION[$val]:"";
}

extract($data);

print $twig->render('index.html.twig',["name"=>$name,"email"=>$email,"twitter_account"=>$twitter_account,"selectoped"=>$meun,"comment" => $comment,"meun_option"=>$meun_option]);

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2020年01月17 02:46日

タグ

3.0, 358, 7.2, com, Composer, DOCTYPE, gt, html, https, lt, php, request, tool, Twig, web, www, zip, アップ, インストール, エラー, エンジン, お問い合わせ, コード, ご自身, サンプル, ゼロ, ソース, ため, デジタル, テンプレート, バグ, ファイル, フォーム, ページ, 事, 使用, 保証, 修正, 値段, 処理, 前提, 動作, 堀江貴文, 幾ら, 必要, 担当者, 機能, 無料, 物, 環境, 確認, 簡易的, 自分, 追加, 送信, 部分,

@Blog

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

Devというのはデベロッパーの略称です．

gistの埋め込みで盡く、デザインが崩れていた話。

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

Qiitaのfeedを取得して表示するだけのコード。 #php

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

あのサイトをリニューアルしました。👏、やっとのことで。 #renew #site #よさこい祭り

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

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

サイトが無くなるのは悲しいな。まるで一つの…😶。

Laravelで再構築した2bbs-video.comをヨロシク😌

Laravelというフレームワークを使って既存のサービスを置き換えていました。

英語学習用、サイトを構築中。基本自分用（お裾分け😌）

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

新さくらレンタルサーバーが昨日から使えるようになっている。

最新記事を非広告記事で読みたい方用のページを作りましたよ😏。

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

T2のお問い合わせフォームフロント側が緩く完成、続きは今の所なしかな。

simロックの外し方以前auだった人へ送る。無料でsimロック解除出来るよ。

C#でwebview2を使用して情報を収集するためのサンプルコード。

radiko[ラジコ]のWindowsアプリがないので作りました。

マウスの動きをトラッキング（追跡）する。

Fox-Black.comというサイトを開設。

わざわざ対策した、これでも。

windows Terminal1.0を使ってみた。

WEBお問い合わせフォームのお値段はいったい幾ら？