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

2023.05.29

Logging

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

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

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

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

タグ

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

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

タグ

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を取得しているユーザーは自分を入れて3人です。

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

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

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

<?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>

タグ

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

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

2022.10.15

Logging

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

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

オープンなWebサーバーで動くように設計されていない。ポート80番上で動くように設計されていないのだから、この理由は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で表示させるのは簡単なだけど、独自ドメインで表示する方法はドキュメント以外に表示されていなかった。ググっても出てこない事もあるのだなと・・・。

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

タグ

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

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

2022.09.25

Logging

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

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

https://yosakoi-video.com/

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

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

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

タグ

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

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

2022.09.22

Logging

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

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

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

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

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

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

                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();
        }
    });
}


タグ

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

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

2022.09.13

Logging

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

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

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

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

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

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

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

タグ

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

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

2022.08.31

Logging

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

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

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

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

タグ

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

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

2022.08.10

Logging

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

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

2bbs-video.comのサイトキャッチャー

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

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

タグ

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

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

2022.08.09

Logging

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

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

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

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

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

タグ

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

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

2022.08.05

Logging

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

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

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

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

タグ

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

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

2022.07.24

Logging

こんにちは、朝の2時に起床し4時頃、ウォーキング。そして朝食後、コードを書いてその後、仮眠をとって今、記事を書いています。かなり不規則な生活リズムです😩、今日からは元の生活リズムへ戻そうと思っています。さて、WordPressの非公式プラグインを自前で制作致しましたのでお裾分けです。

今回はシングルページの記事の下に新着記事が表示されてカルーセルで動くというプラグインです。

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

アイキャッチ画像の大きさなどはご自身でソースコードを変更してご使用ください。尚、アイキャッチ画像がないには対応しておりません。

いらないパラメーターを投げている所があります。そちらは御自身で修正をお願いします、因みに今は新着記事5記事を取得している感じです、そちらも変更はソースコードを修正してお使いいただければと思っています。

ダウンロードのURLは下記になります。

https://zip358.com/plugin/new-post.zip

追伸:カールセルUIはSlickを使用しております。

タグ

2, 358, 4, 5, com, https, plu, url, WordPress, wp, www, zip, あい, ウォーキング, お使い, お裾分け, お願い, かなり, カルーセル, キャッチ, コード, ご自身, シングル, ソース, そちら, ダウンロード, パラメーター, プラグイン, ページ, リズム, , 下記, 不規則, , 今回, 今日, 仮眠, 使用, 修正, , 公式, 制作, 取得, 変更, 対応, , 感じ, , 新着, , 朝食, 生活, 画像, 自前, 自身, 表示, 記事, 起床,

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

2022.02.17

Logging

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

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

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

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

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

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

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

タグ

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

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

2022.02.14

Logging

おはようございます、俊足で朝からコードを書いたりしていました😌。

さて、自分のサイトを広告無しだったら読んでも良いという人が少なからずいると思いまして、この度、テキストオンリーのページを作りました。このページでは最新記事しか読めません、過去記事を読みたい方はzip358.comよりサイトを参照くださいませ。

非広告ページ👇

https://zip358.com/tool/blog-non-ads/

因みにページの表示速度が若干遅いです、これはサーバーの処理に依存するものですのでこれ以上、速度を上げることは今の所出来ません。また、どんなプログラムなのか知りたいという方もいると思いますのでソースコードを掲載致します。これを非広告ページで見ると英字文字がずらっと並んでいるように見えると思いますが、バグではないですので悪しからず(ソースコードを記載した部分が表示されているだけです)。

尚、ソースコードを見てRSSだけで読み込みが出来そうだねって、指摘する人もいるかと思いますが自分のサイトのRSSは記事の中身が出力されない仕様でして、このようなコードになっています。取得できる方はもっと表示速度は早くなると思います・・・。

<!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>RSS 非広告 blog-zip358.com</title>
</head>
<body>
<div class="container">
    <div class="row">
            <?php
$rss = @simplexml_load_file("https://zip358.com/feed");
if($rss){
    ob_start();
    foreach($rss->channel->item as $key=>$val){
        ?>
        <div class="col-12">
            <p class="h3" ><?=$val->title?>[<a href="<?=$val->link?>">*読みやすい記事へ*</a>]</p>
            <p class="h4" ><?=$val->pubDate?> by <a href="https://twitter.com/zip358com">@zip358com</a></p>
            <p><?=context($val->link)?></p>        
        </div>
        <?php
    }
    print ob_get_flush();
}
?>
        </div>
    </div>
</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>
</body>
</html>
<?php
/**
 * @param $link string
 * @return $reslut string
 */
function context($link=null){
    $reslut = "";
    if(is_null($link))return $reslut;
    $htmldata = @file_get_contents($link);
    $dom = new DOMDocument();
    $html = mb_convert_encoding($htmldata, "HTML-ENTITIES", 'UTF-8');
    @$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    $xpath = new DOMXPath($dom);
    $reslut = $xpath->query("//*[@id=\"article\"]/div[3]")[0]->textContent;
    return $reslut;
}

タグ

358, blog-non-ads, com, https, tool, www, zip, オンリー, コード, こと, これ, サーバー, サイト, ソース, ソースコ, テキスト, バグ, プログラム, ページ, もの, , , 依存, 俊足, 処理, 参照, 広告, , , 掲載, 文字, , 最新, , 自分, 若干, 英字, 表示, 記事, 記載, 速度, 過去, 部分,

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

タグ

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

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

2021.10.26

Logging

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

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

NEOプログラマーがコードを10年書いているお問い合わせフォーム編-part1

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

NEOプログラマーがコードを10年書いている。お問い合わせフォーム編-part2

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

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

タグ

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ロックなしと表示されます。

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

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

タグ

-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("\"","");
        }

タグ

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

タグ

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/

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

タグ

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の超シンプルなコードを公開します。

タグ

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

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

2020.06.18

Logging

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

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

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

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

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

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

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

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

タグ

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

タグ

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]);

タグ

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

画像をタイル状に分離して一括ダウンロードさせるジェネレーター

2019.09.07

Logging

画像をタイル状に分離して一括ダウンロードさせるジェネレーターを
作ってみました。画像は自動的に削除されます?
あることをすれば他人の画像がアップした画像も削除されます。
ちなみに一括ダウンロードbuttonを押すと画像がサーバー上に保存され
強制ダウンロードが始まります。
動作はブラウザChromeオンリーです。
また一括ダウンロードを押すと複数のファイルを一括ダウンロードするか
どうかの問い合わせが表示されますので「はい」を
選択してください。尚、30秒以内に保存されていないファイルは
次々と削除されます。
サイトはこちらから
https://zip358.com/tool/demo5/index-14.html
ソースコードは下記になります。
ページ(base64生成+画像ダウンロード処理)

追記:zipファイルにより格納するように処理を変更しました。
参考にしたサイト:https://ex1.m-yabe.com/archives/4215

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>画像分離してダウンロード:画像分離ジェネレーター</title>
        <meta name="description" content="画像分離してダウンロード:画像分離ジェネレーター">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../jquery/jquery-3.4.1.js"></script>
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-71682075-1"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-71682075-1');
        </script>        
        <style>
            body{
                background-color: black;
                color: antiquewhite;
            }
            img{
                margin:10!important;
                padding:10!important;
            }       
            #container{
                width: 100%;
            }
            #container img{
                margin:10px;   
            }       
        </style>    
    </head>
    <body>
        <span id="bat"></span><a id="dl"></a>
        <input class="form-control" type="file"></input>
        <div id="container"></div>
        <script>
            $(function(){
                $("[type=file]").on("change",function(){
                    $('#container').html("");
                    $("#bat").html("");
                    console.log($(this));
                    if(!$(this).prop('files')[0].type.match(/[png|jpg|jpge|gif]/)){
                        alert("ファイル形式エラー");
                        return false;
                    }                        
                    var canvas = document.createElement('canvas');
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        var image = new Image();
                        image.onload = function() {
                            sprite = {width:50,height:50};
                            canvas.width = sprite.width;
                            canvas.height = sprite.height;
                            var ctx = canvas.getContext("2d");                            
                            var x = 0;
                            for(var i=0; i*sprite.height<image.height; i++){
                                for(var j=0; j*sprite.width<image.width; j++){
                                    ctx.drawImage(
                                    image,j*sprite.width,i*sprite.height,
                                    sprite.width,sprite.height,
                                    0,0,
                                    sprite.width,sprite.height
                                    );

                                    var spriteElement = new Image;
                                    spriteElement.src= canvas.toDataURL();
                                    $('#container').append(spriteElement);
                                }
                            }
                            $("#bat").html("<input type='button' value='一括ダウンロード' onclick='bat_img()'>");
                        }
                        image.src = event.target.result;                       
                    }
                    reader.readAsDataURL($(this).prop('files')[0]);
                    
                });
            });

            function bat_img(){
                var data = [];
                for(var i=0; i< $("img").length;i++){
                    data.push({"base64":$("img").eq(i).attr("src"),"no":i});
                }
                $.ajax({
                    type: 'POST',
                    url: 'bat_img.php',
                    data:{"obj":data},
                    dataType: 'json'
                }).done(function(obj){

                    if(obj[obj.length - 1 ].chk=="ok"){

                        var link = document.getElementById("dl");
                        link.href = obj[obj.length - 1].zippath;
                        link.download = "zipimg.zip";
                        link.click();

                        var data2 = [];
                        for(var i = 0 ; i < obj.length ; i++){
                            if(i==0){
                                data2.push({Path:obj.path,no:obj.no,t:obj.t,"zipimgpath":obj[obj.length - 1].zippath});
                            }else{
                                data2.push({Path:obj.path,no:obj.no,t:obj.t});
                            }
                            
                        }

                       var del = function(){
                            $.ajax({
                                type: 'POST',
                                url: './bat_del.php',
                                data:{"obj":data2},
                                dataType: 'json'
                            });
                        };
                        del();
                    }
                    });
                }
        </script>
    </body>
</html>
<?php
$i=0;
foreach($_POST["obj"] as $key=>$val){
    $b64 = base64_decode(str_replace("data:image/png;base64,","",$val["base64"]));
    $no = (int)$val["no"];
    $t = time();
    $Path = "./bat_img/tmp/$t-$no.png";
    $re = @file_put_contents($Path,$b64);
    if($re){
        $obj[$i]["chk"] = $re?"ok":"ng";
        $obj[$i]["name"] = "$t-$no.png";
        $obj[$i]["path"] = $Path;
        $obj[$i]["no"] = $no;
        $obj[$i]["t"] = $t;
        $i++;
    }
}
$obj[--$i]["zippath"] = zipfile($obj);

print json_encode($obj);


function zipfile($obj){
    $ZipFiles = function($obj){
        foreach($obj as $key=>$val){
           $path[] = $val["path"];
        }
        return $path;
    };
    $Zip_Files = $ZipFiles($obj);
    $zipFileName = time().'_zipimg.zip';

    set_time_limit(0);
    $zip = new ZipArchive();
    $zipTmpDir = './tmp/zip/';
    $result = $zip->open($zipTmpDir.$zipFileName, ZIPARCHIVE::CREATE | ZIPARCHIVE::OVERWRITE);
    if( $result !== true ){ //エラー処理
      echo 'error!';
      exit();
    }
    foreach ($Zip_Files as $key=>$filepath) {
      $filename=basename($filepath);
    // ZIP圧縮するファイルを追加
    // ファイルパス・ファイル名としないと圧縮ファイルを解凍するとフルパスになる
      $zip->addFile($filepath,$filename); 
    }
    //ZIP 出力
    $zip->close();

    return $zipTmpDir.$zipFileName;
}
<?php

unlink($_POST["obj"][0]["zipimgpath"]);
foreach($_POST["obj"] as $key=>$val){
    $Path = $val["Path"];
    $no = (int)$val["no"];
    $t = (int)$val["t"];
    
    $cmd = function(){
        foreach(glob("./bat_img/tmp/*") as $file_name){
            $command = "rm -rf " . realpath($file_name);
            exec($command);
        }    
    };
    
    if(pathinfo($Path)["extension"]=="png" and preg_match("/bat_img\/tmp/",$Path)){
        if(is_file($Path)){
            sleep(30);
            unlink($Path);
        }else{
            $cmd();
        }
    }else{
        $cmd();
    }

}

タグ

, 14, 30, 358, 4, 5, 64, archives, base, button, Chrome, com, demo, ex, html, https, index, m-yabe, tool, www, zip, アップ, オンリー, コード, こちら, こと, サーバー, サイト, ジェネレーター, ソース, タイル, ダウンロード, はい, ファイル, ブラウザ, ページ, 一括, 下記, 他人, 保存, 処理, 分離, 削除, 動作, 参考, 問い合わせ, 変更, 強制, 格納, 生成, 画像, 表示, 複数, 追記, 選択,