一週間の予約が出来るデモコードです。良かったらどうぞ😌。 #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, オリジナル, キッカケ, コード, こちら, こと, コメント, これ, ソース, デモ, プログラマー, , 予約, 今日, 台風, 営業, 妨害, , 感じ, 感覚, 投稿, 接近, 掲載, , 方法, , 昨日, 時刻表, , 欠陥, 理由, 確認, 職場, 肝心, 自分, 解除, 記載, 設計書, , 選択, 部分, 駄目,

お店のホームページ(サイト)の作り方を解説していきます。

2022.02.28

Logging

おはよう御座います。
今日は昨日よりも暖かくなるそうですね☀。

さて、突然ですがお店のホームページ(サイト)の作り方を解説していきます。次回の記事から何回かにわけてお店のホームページ(サイト)の作り方を文字と動画により解説していきますね。今では無料でお店のホームページを作ることが出来てしまいますが、無料でサイトを作った場合は広告などが表示されお店のブランドを損ねてしまう可能性大なので、月額131円で静的なサイトを構築していく方法を教えます(予約機能付き:一部有料)。

尚、プログラムを全て解説すると言うよりかは雛形のサイトを提供しますので、そちらの雛形のサイトに記載している文字や画像を差し替えてオリジナルテンプレートをご自身で作ってもらうという形になります。それも難しいという方に向けて文字や画像をサイトから差し替えできるサービスを作っていこうと思っていますが開発は未定です、そのサービスは無料で提供するつもりでいます。

無料で提供して見返りも求めないという自分には何にもメリットがないものです。ただ、このサイトのアクセス数がもっと増えたらなという思いがあります😌。

追伸:無料で提供するテンプレートの中に、こちらのリンクを貼っていただければ有り難いですがこれもご自身で判断してください。

タグ

131, オリジナル, お店, こと, ご自身, サービス, サイト, そちら, それ, つもり, テンプレート, ブランド, プログラム, ホームページ, 一部, 予約, , 今日, 何回か, 作り方, 全て, 動画, 可能性, 場合, , 広告, , 提供, 文字, , 方法, 昨日, 月額, 有料, 未定, 構築, 機能, 次回, 無料, 画像, 表示, 解説, 記事, 記載, 開発, 雛形,

サイトのデザインを一新しました、オリジナルのテンプレートです。

2022.02.26

Logging

こんにちは、今日は気温も春陽気になるらしくて、明日はもっと暖かくなるようです。

そんな中で家でゴトゴトとWordPressのテンプレートを作成していました、このテンプレートは特に頑張ったところなどはなく、Bootstrapを雛形みたいなものです。シンプルイズベストという事だけは気にしています。余計なモノは極力少なくしたつもりです。SEOなどはあまり意識はしていないのだけど、以前のリンク構造を一応意識しています。

因みにこのテンプレートは未完成ですので、時間が空いたときに改善していきます。完成しても提供するなどは今の所、考えていません。尚、Bootstrapは4系を使用しています、5系にそのうち変更すると思います。

タグ

4, 5, Bootstrap, SEO, WordPress, イズ, うち, オリジナル, サイト, シンプル, つもり, デザイン, テンプレート, とき, ところ, ベスト, もの, リンク, 一新, , , , 今日, 以前, 余計, 作成, 使用, 変更, 完成, , 意識, , 提供, 改善, 明日, , 時間, 未完成, 構造, , 気温, 陽気, 雛形,

Blenderという3DCG作成ソフトで3Dキャラクターの作り方を解説。

2022.02.02

Logging

おはよう御座います。徐々に朝日が昇るのが早くなり、陽が沈むのが遅くなってきましたね。

今日、紹介するYOUTUBEさんはBlenderという3DCG作成ソフトで3Dキャラクターの作り方を解説しているYOUTUBER、Tom Studioのトムさんです。

【Blender】ずぼらな人の為のキャラクターの作り方 part1【初心者向け】

技術力も高いトムさんに教えてもらえる、それも無料のソフトだから誰でも試しに作れてしまうので是非、トムさんの解説を見て試しにオリジナル3Dキャラクターを作ってみてはいかがでしょうか?

【Blender】ずぼらな人の為のキャラクターの作り方 part2【初心者向け】

自分で3Dキャラクターを作れるようになると2Dよりもそのキャラクターに愛着が湧くことは間違いありません。それに動かすことが出来るというのが凄く魅力的ですよね😌。

タグ

2, , Blender, DCG, Studio, Tom, youtube, YOUTUBER, いかが, オリジナル, キャラクター, こと, ソフト, それ, トム, 今日, 作り方, 作成, 愛着, 技術力, 朝日, 無料, 紹介, 自分, 解説, , ,

マス目自動生成ジェネレーターとか誰が使うのって思うことはありますね!?

2022.02.01

Logging

2月になりましたね、おはよう御座います。

昨日、マス目自動生成ジェネレーターという物を作りました、マス目自動生成ジェネレーターとか誰が使うのって思うことはありますね!?これを使う人いるですよ。一週間ほどしか働かなったですが…レーザープリンターに出力する(オリジナル帳票などをプログラムで書く)仕事がありました。そこでは何やら座標位置が必要になり、こういう位置データが必要になるのです。

マス目自動生成ジェネレーター

それをその職場では紙ベースで位置決めしてたので、こうすれば良いじゃねと自分で作ったわけですね。後からお先になってしまったのと、これからずっとこんな事をするのかなと思うと長く続きそうにないなと思って一週間で辞めました。

こういう位置データを取り扱って帳票印刷や鉄板を加工したりする現場ではこういう事します、慣れれば位置データを紙ベースに書く必要もないかもですが、慣れるまではこういうの必要になると思いますので、是非ご使用いただけば幸いです。

ここまで書いて何を意味しているかわからない人もいると思いますが・・・分かる人には分かる内容かと思います😌。

タグ

2, オリジナル, こと, これ, ジェネレーター, そこ, それ, データ, プリンター, プログラム, ベース, マス目, レーザー, わけ, , , , 仕事, 位置, 出力, 加工, 印刷, 帳票, 座標, , 必要, 昨日, , 現場, , 職場, 自分, 自動生成, , 鉄板,

WordPressのapply_filtersを使うと便利ですよ。

2021.11.29

Logging

明日(2021/11/30)は高知県は雨が降るそうです、冬の雨はあまり自分は好きではないです・・・。どんより曇り空よりかはマシですけどね。

さて「WordPressのapply_filtersを使うと便利ですよ。」というお話です、有名なプラグインにはapply_filtersが大体あるので、それを使ってプラグインに自分のオリジナル処理を割り込むことが可能です。では、 apply_filtersはどんな動作をするかと言えば、独自のフィルターを登録するときに使用します。

なので、add_actionを使って登録されている独自のフィルター名を参照することで外部のプラグインに変更処理を行うこと等が可能になります。

<?php apply_filters( $tag, $value, $var ... ); ?> 
<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

apply_filtersとadd_filterがどういう物なのかを完結に説明しているサイトが有りましたので、リンクを記載しときます。

https://blog.z0i.net/2016/11/apply-filters-add-filter.html

余談:ある有名なプラグインのコードを読んでいて、自分がプラグインを作るときにもapply_filtersなどを記載しておくと開発者に使用していただける確率は高くなるなと感じました。

タグ

11, 2021, 30, Action, Add, apply, filters, function, gt, hook, lt, php, tag, To, value, var, WordPress, オリジナル, お話, こと, それ, とき, フィルター, プラグイン, まし, 使用, 便利, , 処理, 動作, 参照, 可能, 変更, 外部, 明日, 曇り空, 有名, 登録, 自分, , 高知県,

JS(javaScript)ファイルを動的に再読み込みする方法。

2021.10.13

Logging

今日は朝からメールで書類提出してクラウドワークスの仕事に何か良いものはないかなどを見ておりましたがありません?。

さて、JS(javaScript)ファイルを動的に再読み込みする方法のオリジナルコードを書きましたので、お裾分けします。前々の会社で JS(javaScript)ファイルを動的に再読み込みしないとJSが動作しないという何ともやるせない気持ちの仕様があり、その時は人様のコードを拝借して使っていましたが、今日はクラウドワークスなどの案件もないのでちゃちゃっと自分でコードを書きました?。同じように困っている方はご使用くださいな?

https://zip358.com/tool/demo67/

ちょっと愚痴?
そもそも前々の会社のオリジナルMVCはいろいろと欠陥だらけで且つ仕様書もない、何が正解なのかも教えてもらえない中、修正やらしていたので本当に大変でした。聞いても明確に答えてもらえないのは正直な所、大変です。後任にはちゃんと教えていたら良いのですがね。

"use strict";
document.querySelector("button").addEventListener("click",jsandcssreload);
function jsandcssreload(){
    let d = (new Date()).getTime();
    [...document.querySelectorAll("link")].forEach((elm)=>{
        elm.href = elm.href.replace(/(\.css)\??[0-9]{0,}$/,".css?" + d);
    });
    [...document.querySelectorAll("script")].forEach((elm)=>{
        elm.src = elm.src.replace(/(\.js)\??[0-9]{0,}$/,".js?" + d);
    });    
}

タグ

javascript, JS, MVC, いろいろ, オリジナル, お裾分け, クラウド, コード, チャット, ファイル, メール, もの, ワークス, , 人様, 今日, 仕事, 仕様, 仕様書, 会社, , 使用, 修正, 前々, 動作, 大変, 後任, 愚痴, , 拝借, 提出, , 方法, 明確, , 書類, , 本当, 案件, 欠陥, 正直, 正解, 気持ち, 自分,

アマゾンプライムビデオのオリジナル映画、トゥモローウォーを観ましたよ。

2021.07.31

Logging

アマゾンプライムビデオのオリジナル映画、トゥモローウォーを観ましたよ。ひどい作品だという意見もあるらしいですが・・・(*´ω`*)。意外にちゃんとした作品だと思います。今回はVRなどで観ずにパソコンのディスプレイで トゥモローウォー を観ましたが悪くない出来だと思います。

クリス・プラット主演『トゥモロー・ウォー』予告編

矛盾点などを探すと全然面白さが半減しそうですが、タイムトラベル?エイリアン撲滅映画としてはまぁまぁの出来じゃないかなと思います。そして少し泣ける話になっていて良かったと思います。

尚、エイリアンが知的生命体ではないのに何故、地球に来れたかは映画のラストに分かります。そういうのもあって矛盾点はほぼほぼない、映画になっていると思います。

タグ

2, com, https, KNVmMRD-, Vr, watch, www, youtube, Zs, アマゾン, ウォー, エイリアン, オリジナル, タイム, ディスプレイ, トゥモロー, トラベル, パソコン, ビデオ, プライム, ラスト, 今回, 何故, 作品, 出来, 半減, 地球, 少し, 意見, 撲滅, 映画, 生命体, 矛盾点, 知的, ,

コネクトする部分やプラットフォームの部分が!!

2021.05.10

Logging

コネクトする部分やプラットフォームの部分が儲けを出しやすいというのは、システム関係者なら大半の方が理解していると思う。コネクトとは繋がりを意味しプラットフォームは基盤を意味する、例えばフェイスブックツイッターは人と人を繋げるプラットフォームを構築して、広告収益や個人情報を収集して新たなサービスなどを提供して儲けに繋げている。そういうサービスをグローバルに展開すれば利益を得やすい。因みに日本って英語圏ではないので海外のサービスがちょっと遅れて日本に入ってくるので、逆に言えば海外で流行っているアプリなどを調べて、まだ日本でリリースしていないものをオリジナルアレンジを追加してサービスを日本で展開すれば勝算は少なからずあるだろうと思うけど、もうサービスというサービスは出尽くしたじゃないのかなというぐらい、WEBサービスもアプリも存在している。

そんな中で、カートシステムを作っているのだけど、、、これがHITするというのは有り得ない。有り得ないのにシステムを作る理由はLaravelというフレームワークに慣れるということが一番にあり二番目にビジネスとして成り立てば良いなという気持ちがある。

自ら何か稼ぎを得たければ商品という武器を持たなければならないらしくて、自分はいまそれを考えているのだけど、アイディアが出てこないので自分が出来る物から作ろうとしている、最初にリリースするのはカートシステムになりそうです。次に予約システムを作り、その後、商品管理システムを作ろうと思っている。自分には勝算はないかも?。ただ作ったということは自分の実績にはなるし、大きな経験にもなるのでシステムはこれからも作っていきたい。

それはプログラマーという職から離れることになっても作っていきたいと思っている。

タグ

HIT, web, アプリ, アレンジ, オリジナル, カード, グローバル, コネクト, これ, サービス, システム, ツイッター, フェイスブック, プラットフォーム, もの, リリース, , , 個人, 利益, 勝算, 収益, 収集, 基盤, 大半, 存在, 展開, 広告, 情報, 意味, 提供, , 日本, 構築, 海外, 理解, 英語圏, 追加, , 部分, 関係者,

WPのテンプレート構成とか。

2020.09.30

Logging

まず、オリジナルテンプレートを作成したときに使ったファイル構成はこんな感じです。この中で大事なファイルはstyle.css,functions.php,index.phpです。ワードプレスの自作テンプレートを作る際にどうすれば良いのかというのは、検索するといろいろな人が書かれているので、この記事では割愛しますね。

404.php
archive.php
category.php
footer.php
functions.php
header.php
index.php
page.php
screenshot.jpg
search.php
sidebar.php
single.php
style.css

いろいろなサイトではstyle.cssのheader部分にいろいろと記述しないといけないような感じで書かれていますが、テンプレートを配布するのではない場合は数行、記述するだけで良いです。下記のような感じでテンプレート名だけ書いてあげれば良いです、そして空ファイルで上記の重要なファイル作成してあげるだけで、一応、ワードプレスのテンプレートの選択肢の中に自作テンプレートが現れます。

/*
Theme Name : 自作テンプレート名(英字)
*/

自作テンプレートには命名規則などがあるので、そちらも気をつけて命名してください。特に間違いやすいのがfunction.phpと記述してしまうことです。正しくはfunctions.phpですので間違いないようにsが無いとワードプレスのファンクションとして認識しないので注意です。

タグ

404, archive, category, css, footer, functions, header, index, jpg, page, php, screenshot, search, sidebar, single, style, wp, いろいろ, オリジナル, サイト, テンプレート, とき, ファイル, プレス, ワード, 下記, , , 作成, 割愛, 場合, 大事, 感じ, 数行, 検索, 構成, 自作, 記事, 記述, 部分, 配布, ,

広告収入で暮らせれば夢!?

2020.06.25

Logging

広告収入で暮らす事ができれば。これに真剣に挑んでいるひとはどれぐらいいるのかな?どうすればリピーターは増えるのかなどあれこれ考えても仕方がない。自分の出来ることを毎日一つはすることを心がけている。あのプロゲーマーのウメハラさんの『一日ひとつだけ強くなる』を読んでから、何か1日ひとつの小さな目標を立てて日々、達成している。昨日は記事に自動でA社の広告が入るようにワードプレスにオリジナルプラグインを作りました。

ユーザーも増えていっているので収益を得ているただ振り込まれる金額の上限に達してないのでそこからはお金が入っていない。
生活に困らないぐらいのお金が毎月、入るようになればと思っている。みんなユーチューバーを目指しているけど自分はそういうのではなく、自分のできる範囲のサービスやアプリ等で収益を得れればそれで満足かなと思っている。

いまの目標は1日、500人の訪問者が来てくれること。それをクリアすれば1000人と考えている。毎日安定して1000人の訪問者来ると夏目漱石さんが10人から数十人が月に銀行の中からひょっこり顔を出すそうだ・・・。そうなれば自分はそれで暮らすことを選択します。それが数ヶ月続けばの話だけど、きっとそうすると思います。

因みにブログのレベルはノービスクラスに当たるらしい。やっとブロガーとしての土俵入りしたぐらいのレベルらしいです。変な感覚だけど訪問者、1000人に増えると思っています。地道にその道を歩んでいけば何とかなるじゃないかなとか…。

SEO対策は自分はしていないと言えば嘘になるけど、しなくても中身のある記事を書けばアクセスは記事が増えていくごとに上がっていくのではないかなと思います。ちなみに自分は一見さんが結構多いのでまだまだですけどね。

文章力のあるひとはこれぐらいの大量の記事を書けばそれで生活することが可能なんじゃないかなと。いま、インディーズでも生活することが可能になってきていると思っています。

その話は明日の記事でまとめて書きますがそういう感じになってきている。

タグ

, 1000, 500, アプリ, いま, ウメハラ, オリジナル, お金, クリア, ゲーマー, こと, これ, サービス, そこ, それ, だだ, どれぐらい, ひと, ひとつ, プラグイン, プレス, プロ, みんな, ユーザー, ユーチューバー, リピーター, ワード, , 一つ, 上限, , 収入, 収益, , 安定, 広告, 日々, 昨日, 毎日, 毎月, 生活, 目標, 真剣, , 範囲, 自分, 自動, 記事, 訪問者, 達成, 金額,

vue.jsとreact.jsをお触りしているのですが?。

2020.02.13

Logging

vue.jsとreact.jsをお触りしてみて、どちらが難しいかといえばreact.jsかなと思いますが、すごく難しいわけでもない。vue.jsはjqueryがサクサク使えていて概念も大体把握していて、オリジナルプラグインも作れるよという方にはそれほど難しいとは感じないと思います。vue.jsの概念さえ理解できればあとは、vue.jsの仕様やドキュメントみれば、慣れれば使いこなす事は簡単だと思います。

The All-New MICROSOFT EDGE Browser – Is It Any Good?

react.jsは、JSXの事をちゃんと理解すれば使いこなす事はまぁ可能かなと思います。いま、web業界ではreact.jsとかゴニョゴニョ使える人が重宝されるみたいですよ。というか、もうjqueryとかオワコンと都会では業界人が言ってそうですね。ただ、そんな古いコードが田舎では動いてますし田舎の零細企業では、未だにIEの事をいう人がいる。そろそろIEの呪いから解き放たれたいですね…。マイクロソフトはいまの社長さんになってかなりマイクロソフト変わったのでWEB業界では、有り難い存在だと自分は勝手に思ってます。

マイクロソフト コーポレーション CEO サティア ナデラ Tech Summit 基調講演 | 日本マイクロソフト

タグ

IE, jquery, JS, JSX, react, vue, web, あと, いま, オリジナル, オワコン, かな, コード, ゴニョゴニョ, ドキュメント, どちら, プラグイン, マイクロソフト, わけ, , , 仕様, 企業, 可能, 呪い, 大体, 把握, , 業界, 業界人, 概念, 理解, 田舎, 社長, 簡単, 都会, 重宝, 零細,

モノ作りYOUTUBERのミニチュア作りが凄いオイラは無理、。

2020.02.02

Logging

モノ作りYOUTUBERのミニチュア作りが凄いオイラは無理ですね…。かなり不器用なのでこういう細かい作業が出来る人は凄いなと思います。0からのオリジナルミニチュア作りは唯ただ、感心するばかりです(汗)。こんな事が出来る人は楽しいだろうな。そしてこれを作って喜んでもらえる人がいるのだから、良いなぁと思います。こういうニッチなYOUTUBER(ユーチューバー)さんは競合相手が少なそうです。

DIY☺︎miniature station at Sea diorama キャンディの棒で海に駅をつくりました。

そしてHanabira工房(はなびら工房)さんが作っているオリジナルミニチュアは精巧かつリアルです、リアルというか本当に動くものまであるですよ!!!
これは凄いなと下記の動画を見ていただけると分かる通り、『台所のプロペラ換気扇』を1/16サイズが実際に動いてます。スゴ!!まさにプロ職人です。

DIY☺︎miniature Realistic kitchen fan /ミニチュア『台所のプロペラ換気扇』を1/16サイズで作ってみた!

最後に Hanabira工房さんのチャンネル登録はこちらになります。
https://www.youtube.com/channel/UCyyp7X9QBvJh6mIoQYJmUuA

タグ

0, , 16, Hanabira, youtube, YOUTUBER, おいら, オリジナル, かなり, こちら, これ, サイズ, チャンネル, ニッチ, はなびら, プロ, プロペラ, ミニチュア, もの, ユーチューバー, リアル, 下記, 不器用, , , 作業, 動画, 台所, 実際, 工房, 感心, 換気扇, 最後, 本当, , 無理, 登録, 相手, 競合, 精巧, 職人, 通り,

サブスクリプション略してサブスク。

2020.01.13

Logging

サブスクリプションとは定期サービスの事です。
例えば音楽の定期サービスで言えばSpotify(スポティファイ)などが
有名です、動画ではNetflix(ネットフリックス)などが有名かなと思います。
ちなみにネットフリックスはWOWOWの会員登録を上回ったらしいですね。

そしてサブスクは徐々に浸透してきているらしいですね。自分も使っているけど
結構、使用者が増えてきているみたいなのです。
だけど自分は、音楽とか映画は購入する派です、音楽はデジタル購入、
映画は媒体としての購入が多いです。

定期サービスってサービスを永遠に支払わないといけないという事、
サービス辞めたら何も残らないという所が嫌なので
音楽と映画は購入しています。

ネットフリックスはオリジナル制作の作品があるので
これは仕方なく支払っています。ちなみに自分、YOUTUBEも有料会員です。
なぜ会員なのか、アンサー:広告観るのがウザいので有料会員になりました。

YOUTUBEにお金を払う人はあんまりいないと思いますが・・・。
自分の場合、広告にお金を支払ったという感覚より時間短縮のために
お金を支払ったという感覚です。

これから先、サブスクリプションにお金を払う人は増えていくと思います、
5G(ファイブジィー)なれば加速するでしょうけど
くれぐれもお金払ったのに使っていないなど、積みサブスクにならないように
お気をつけください。自分は数ヶ月に一回、固定費の見直しをしています。

タグ

Netflix, Spotify, WOWOW, youtube, アンサー, オリジナル, お金, これ, サービス, サブ, サブスクリプション, スク, スポティファイ, デジタル, ネットフリックス, , 会員, , 作品, 使用者, 制作, 動画, 媒体, 定期, 広告, , 映画, 有名, 有料, 永遠, , 浸透, 登録, 自分, 購入, 音楽,

俳優がCG化される時代に突入。

2020.01.11

Logging

あと10年後には誰かがデジタル俳優だけで映画を作ることをするだろうと。
誰かが始めると次々とデジタル俳優で映画を作る映画監督が
増えていくと思います。

ネットフリックスの下記の動画を観てください、CG(コンピューターグラフィックス)だけで精巧にデジタル俳優を造形することが
もう出来てしまっています。

あともう少しで本物かCG画像(VFX)か見分けがつかないように
なると思います。10年後と言いましたが、最高で10年で
最短ではあと数年で見分けがつかないようになると思っています。

繰り返しになりますが、そうなった時に必ずこの技術を使用して、
俳優に演技をさせず、デジタル俳優(仮想俳優)だけで作ると思います。

尚、このネットフリックスのオリジナル映画予告も載せときますね。

How The Irishman’s Groundbreaking VFX Took Anti-Aging To the Next Level | Netflix

アイリッシュマン予告動画↓

『アイリッシュマン』最終予告編

タグ

0, 10, 461, be, Cg, OF-lElIlZM, VFX, youtu, アイリッシュ, あと, オリジナル, グラフィックス, こと, コンピューター, デジタル, ネットフリックス, マン, 下記, 予告, 仮想, 使用, 俳優, 動画, 技術, , 映画, , 時代, 最短, 最高, 本物, 演技, 画像, 監督, 突入, 精巧, 誰か, 造形,

TinyMCE 5.0でオリジナルプラグイン作成するはググれば何とかなるが?

2019.07.27

Logging

TinyMCE 5.0で独自のプラグインを開発するにあたって
ググれば4.0で作成する方法は山ほど例題があるのだけど5.0は
非常に少ないtinymce.windowManager.openを使用してのプラグインは
5.0でも案外簡単に見つかるのだけど、tinymce.windowManager.openUrlを
使用しての情報はググってもない。
唯一、公式サイトが記載しています。
しかし残念なことに全て英語で書かれています。

日本語で記載しろよという話だけど・・・・。
で!!tinymce.windowManager.openUrlで
何が出来るかと言えば外部ファイルを
読み込みが出来てそのレスポンスを受け取る事が出来るのです。
英語が嫌いでも原文で英語を読め!!ですよ・・・。
答えはそのページに書いているのですね。
※ちなみに会社でこの機能(e.windowManager.openUrl)を
使用し開発中です。
たぶん、自分みたいに困っている人もいると思うので
基本的な部分を記載しています、なお自作プラグインの作り方は
理解しているという前提で記載しています。
まず例としてPHPファイルを読み込みたいのなら
自作プラグインのPHPファイルに下記の記載を行います。

<!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">
        <link rel="stylesheet" href="/tool/bootstrap/css/bootstrap.css">
        <script src="/tool/jquery/jquery-3.4.1.js"></script>
    </head>
    <body>
        <form method="post">
        <input type="text" name="L_japan" class="form-control">
        <input type="text" name="L_English" class="form-control">
        <input type="button" name="submitbtn" value="恩恵を受ける"class="btn btn-primary">
        </form>
        <script>
            var chageJson = function(data) {
            console.log(data);
            var JsonData = [];
            for (i = 0; i < data.length; i++) {
                JsonData[data[i].name] = data[i].value
            }
            //console.log(JSON.stringify(data));
            return JsonData;
            }
            $("[name=submitbtn]").on("click",function(){
                data = chageJson($("form").serializeArray());
                window.parent.postMessage({ mceAction: 'customAction',data:data});
                window.parent.postMessage({ mceAction: 'close' });
            });
        </script>
    </body>
</html>

PHPファイルはこのような感じでjavascriptが大事ここで、
submitを行っています。
当然、JSON形式で返却しましょう。公式ページにも書かれいますが
mceActionで制御しましょう。
プラグイン側のJSは下記のようになります。

(function() {
    tinymce.create('tinymce.plugins.language_boon', {
        init : function( ed,  url) {
            console.log(ed);
            act =function(ed)
            {
                ed.windowManager.openUrl(
                    {
                    type: 'panel',
                    title: '恩恵を受ける',
                    url:url + "/language_boon.php",
                    onMessage:function(api, details){
                      console.log(api, details);
                      console.log('オレオレjapan', details.data.L_japan);
                      console.log('オレオレEnglish', details.data.L_English);
                   }
                });
            };
            // window.addEventListener('message', function (event) {
            //   console.log(event);
            //   var data = event.data;
            //   console.log(data.data);
            //   if(ed.settings.id == data.data.id_){
            //     console.log('オレオレjapan', data.data.L_japan);
            //     console.log('オレオレEnglish', data.data.L_English);
            //   }
            // });
              ed.ui.registry.addButton('language_boon',{
                title : '恩恵を受ける',
                text: '恩恵',
                onAction:function(){act(ed)}
            });
        },
    getInfo : function() {
        return {
            longname : 'tinymce.plugins.language_boon',
            author : 'taoka',
            authorurl : 'https://zip358.com',
            infourl : 'https://zip358.com',
            version : '1.0'
        };
    }
});
        tinymce.PluginManager.add('language_boon', tinymce.plugins.language_boon);
})();

公式ページは下記のリンクより
https://www.tiny.cloud/docs/ui-components/urldialog/#urldialoginstanceapi
サンプルサイトはこちら
https://zip358.com/tool/editor/
 
 

タグ

4.0, 5.0, open, openUrl, TinyMCE, windowMan, windowManager, オリジナル, こと, サイト, ファイル, プラグイン, ページ, レスポンス, , 会社, , 作成, 使用, 例題, 全て, 公式, 原文, 唯一, 外部, 嫌い, 山ほど, 情報, 方法, 日本語, 機能, 残念, 答え, 簡単, 英語, 記載, , 開発,

tensorflowは簡単にインストールできるけど、そこから何やれば

2019.02.09

Logging

tensorflowは簡単にインストールできるけど、そこから何やれば
良いのか、よくわからない。
いま流行りの人工知能ですが、こういうこと出来るよってのは
知っている、例えば画像の仕分けとか。
そこからオリジナルに適応できないのだ。
若造なら画像収集とか考えそうです、、、えぇぇ。
10代なら若気の至りだろうけど、40代間近になると
さすがに無いなと思うわけです。
収集していたらグロ画像が釣れそうな気がしますし
怖くてできません。ちなみに
逃げるは恥だが役に立つグーグル画像検索ダウンロードコンソールアプリを
公開しているのですが、これ変更すればえぇまぁ出来そうですね。
■人工知能を仕事で活用するならば。
人工知能で出来ることで、人の顔にモザイクをかけることが出来るということ。
他には、画像の仕分けとか、本屋さんで小耳に挟んだことですが
工事現場とかでは結構写真を取らないといけないらしく
それを分別するのが面倒だとか、
こういうのには人工知能は大活躍しそうですね。
 

タグ

10, 40, tensorflow, アプリ, いま, インストール, オリジナル, グーグル, グロ, こと, これ, コンソール, さすが, そこ, ダウンロード, モザイク, , 人工, 仕事, , 公開, 写真, 収集, 変更, 小耳, 工事, , , 本屋, 検索, , 活用, 現場, 画像, 知能, 簡単, 若気, 若造, 適応, 間近, ,

初心者でも自分のオリジナルアドレスでサイトやブログを持つ方法。

2015.01.18

Logging

初心者でも自分のオリジナルアドレスでサイトやブログを持つ方法を紹介します。
一番手ごろな方法はライブドアブログの有料版を使用する方法がオススメです(ドメインは別途取得が必要)。月の支いもそれほど高くありません。※年に一回ドメイン(アドレス)料金が発生します。2番目にオススメははてなブログですが、いろいろと独自の機能が面倒くさい感じです。
他にはFC2などなどブログサービスを行っている会社は有料版で独自ドメインが使用できる場合が殆どです(アメーバブログを除く)。
上記の方法が超初心者でも独自ドメイン(オリジナルアドレス)でサイト(ブログ)を持つ方法です。

次に紹介するのがレンタルサーバーをレンタルしてサイトを持つ方法です。こちらはやや難易度が高いです。
まず、必要な知識や技術取得を列挙します。

  1. FTPソフトの操作(サーバー上にディレクトリ作成)
  2. HTMLの基礎知識など(サイト作成に必要)
  3. WordPress(ブログ)アップロードの方法
  4. パーティションの知識
  5. DBの知識(MYSQL)
  6. zipファイルの解凍方法。

※ディレクトリ=フォルダ(Windows)
上記の知識が多少、必要になってきます。全然無くても勉強しながら試していくうちに徐々に覚えていきます。なので、例としてさくらレンタルサーバーの手続き方法やサイトやブログ開設方法を記載しときます。(習うより慣れろです(`・ω・´)。)
さくらレンタルサーバー(スタンダード版以上)でサイトやブログの設置する方法。
まずはレンタルのサーバ借りる手続きをこちらから行います→(スタンダード)。
注意して欲しい事は独自ドメインは後から申し込みします。
?申し込み時にさくらドメイン(アドレス:任意アドレス.sakura.ne.jp)を申し込みを行います。
※契約はスタンダードにする事、もしくはそれ以上!!。
?契約後、さくらから自動メールが届きますので保管してください。
?コントロールパネルに任意のさくらアドレス(ID)とパスワードでログインしてください。
https://secure.sakura.ad.jp/rscontrol/
?コントロールパネルから新規ドメインの契約を結びます。
ここで注意して欲しいのが契約時の選択項目で会員ID・現在さくらを利用中を選ぶことです。

?コントロールパネルから次のサイトの手順に従って作業してください。
お疲れ様です。(´Д`)
これで独自ドメインの取得及び使用ができるようになりました。
?
次にブログサイトの構築手順に進みます。
まず、コントロールパネルを開いてください。開いたらデータベースの新規作成ボタンをクリックして次のサイトの手順に従ってデータベース作成してください。ここで注意して欲しいのがデータベースの文字コードの設定をUTF-8に設定することです。また、パスワードは安易に推測されないような16文字以上のパスワードが良い感じです(ハッキングされないためにも)。
※パスワードはメモしてください。φ(..)メモメモ。
次にコントロールパネルからクイックインストール、ブログとクリックしていきます。次のサイトの手順を参考にしてください(※WordPressの手順STEP3の?から:中盤に記載)。
ここで注意して欲しいのがインストール先です。例えば、手順ではwpというフォルダにWordPressがインストールされます。※なお、ディレクトリ名の名前設定には注意が必要
なぜ、注意が必要か上記の方法でWordPressをインストールすると
ブログアドレスはhttp://オリジナルアドレス.com/wqとなってしまうからです。
?
http://オリジナルアドレス.com/にブログを表示したい場合は
FTPソフトを使用して手動でWordPressのインストールを行わないといけません(今回は省きます:手順はこちらから)。
現在状態ではオリジナルアドレスをブラウザに入力してもIndex of/という文字が表示されている状態になっていると思います。何故か、サイトを表示できる要素が無いからです。
表示させるファイルを作成しないといけません。
なのでファイル作成を行います。まずここで勉強をしてください。
マスター後、htmlファイルなどをFTPソフトを使用してアップロードを行います。FileZillaクライントというFTPソフトがオススメです(DLはこちらから、使用方法はこちらを参照)。
※ちなみにHTML作成時などにはエディタというものを使用します。
メモ帳でも作成できますが文字コードがシフトJISになってしまいますので少々問題があります。UTF-8という文字コードでサイト作成を行うのが現在の主流です(一昔前はシフトJISでしたけどね)。
エディタのオススメはテキストエディタ++です。他にもさくらエディタ秀丸エディタterapadが有名ドコロです。
((※ここではテキストエディタ++の文字コードの設定方法を記載しときます。インストール後、ファイル>新規作成と選択後にメニューバーのエンコードのUTF-8(BOMなし)で開くをクリックしてからソースコード(プログラム)を記載してください。尚、メニューバーの言語でH>HTMLと選択を行うと入力補完機能が使用できて便利です。))
ちなみにさくらレンタルサーバーのアップロード先
サーバー上の/home/ID名/www/のオリジナルアドレス.com(任意)/
という階層にアップロードする必要があります。
尚、wwwの直下にアップロードすると初期に取得した任意ID.sakura.ne.jpのアドレスに反映されます。
———-
サイトデザインなんて出来ないという方にテンプレートというものがあります。
ある程度、デザインされたファイルを配布しているのでまずは、そういうファイルを加工後、アップロードして
みるのも良いかも。テンプレート配布サイトはこちらから。
その他テンプレート配布サイト*1,*2,*3,*4
以上で初心者でもオリジナルアドレスでサイトやブログを持つ方法になります。
※注意点、ファイルやディレクトリを安易に消してしまうとサイトが表示されなくなったり機能しなくなったりしますので注意が必要です(アップロードも同様)。

タグ

2, fc, FTP, html, WordPress, アップ, アドレス, アメーバ, いろいろ, おすすめ, オリジナル, こちら, サーバー, サービス, サイト, ソフト, ディレクトリ, ドメイン, はてな, ブログ, ライブドアブログ, レンタル, ロー, , 上記, , 会社, 作成, 使用, 列挙, 初心者, 別途, 取得, 基礎, 場合, , 必要, 感じ, 手ごろ, 技術, 操作, 料金, 方法, , 有料, 機能, 殆ど, 発生, 知識, 紹介, 自分, 難易,

デザインってなんだとかオリジナルってなんだとか。

2014.08.24

Logging

デザインってなんだとかオリジナルってなんだとか思った時、この現代にオリジナルっていうものは、もう存在しないにすぎないと自分は思っている。芸術分野でオリジナルっていうものはもうないに等しい。このパターンやこの配置どっかで見たことあるなとか、聴いたことあるなとか、そう思うものばかりだと自分は思っている。芸術品が保管や記録されだしてから昔描かれた絵や音楽を現代でも見たり聴いたり出来る。どんなにオリジナルって言っても潜在意識の中でその絵や音楽は過去のアーティストに影響を受けたものだと思う。
なんで、異才って言える人物は、存在しないのではないかと思います。

タグ

アーティスト, オリジナル, こと, デザイン, パターン, もの, , 人物, 保管, 分野, 存在, 影響, 意識, , , 潜在, 現代, 異才, , 自分, 芸術, 記録, 過去, 配置, 音楽,