重い腰を上げる。 #laravel対応したサイト

2023.02.13

Logging

おはようございます、稼ぎ頭のサイトをlaravel対応しました。

今まで、ベタPHPで運営していたものをlaravel対応しています。力技でLaravel対応しているので、これからはデーターベース(テーブル)周りも変えていけたら変えようと思います。

なお、もう一つ稼ぎ頭を作ろうと考えていたりシますが、まだ着手していません、土台は作ってはいるのですが、中身は空っぽです。

Laravel in 100 Seconds

毎日のように仕事でLaravelを見ているのですが、自分のシステムも最初からLaravelで作ったら良かったなと思うことがあります。そしたら、いろいろとリリース出来ていたものもあるのにと思うわけです。

Laravelの良いところ、短時間で良いものが作れる、工数がかなり削減できます。REST(Representational State Transfer:ウェブアプリケーションプログラミングインタフェース)機能があるので、BBS系なら短時間で作成可能になります。そんな感じでLaravelを駆使すれば楽です。

それはその他のフレームワークにも言えることかなって思います。

タグ

BBS系, Laravel, Representational State Transfer, REST, ウェブアプリケーションプログラミングインタフェース, システム, データーベース, テーブル, フレームワーク, ベタPHP, リリース, 中身, 作成, 力技, 周り, 土台, 工数, 最初, 稼ぎ頭,

CSSファイルの設定を読み込んで一括背景色変更するコード。 #cssfile #javascript #coding #colors

2022.11.30

Logging

おはようございます、先日の日曜日は原因不明の体調不良で寝込んでおりました(¦3[▓▓]。

今日は何とか体調が回復したので、CSSファイルの設定コード読み込んで一括背景色変更するプログラムコードを作成しました。※実際、自分のブログ・サイトで動いているコードになります。

<link rel="stylesheet" href="examplestyle.css">

導入方法はまずヘッダーに変更したいCSSファイルを記述します。次にbody内に下記のコードを記述します。

<span id="site_description"></span>

最後にJSコードを挿入します。JSコードはファイルで読み込むでもベタ書きでも良いのですが、上記のHTMLタグより下に記述してください。そうしないと動作しません😗。

let htmlcode = ["#efefef", "#181B39", "#262a2e", "#192734", "#1c483b", "#bf7800", "#83094f"].map(elm => `<span class='color_code' style='color:${elm}' data-color-code='${elm}'>■</span>`).join("\n");

const basecolor = "#262a2e";
let cookiefn = function (CodeColor) {
    let r = document.cookie.split(';');
    return r.length ? ((r) => {
        let changecolor = "";
        for (let ii = 0; ii < r.length; ii++) {
            let content = r[ii].split('=');
            for (let i = 0; i < content.length; i++) {
                if (content[i].replaceAll(" ", "") === "bgcolor_code") {
                    changecolor = content[i + 1];
                }
            }
        }
        return changecolor?changecolor:CodeColor;
    })(r) : CodeColor;
};

let old_color = cookiefn(basecolor);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
[...document.querySelectorAll(".color_code")].forEach(elm => {
    elm.addEventListener("click", function (e) {
        color_set(elm.getAttribute("data-color-code"));
    });
});

color_set(old_color);

function color_set(color) {
    for (let ii = 0; ii < document.styleSheets.length; ii++) {
        if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
            for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
                let element_css_code = document.styleSheets[ii].cssRules[i];
                try {
                    element_css_code.style.backgroundColor = color;
                    if (color === "#efefef") {
                        element_css_code.style.color = "#000000";
                        
                    } else {
                        element_css_code.style.color = "#FFFFFF";
                    }
//いらないかも領域🤔👇
                    document.querySelectorAll("#wp-calendar > tbody > tr > td > a").forEach(elm=>{
                        elm.style.backgroundColor = "#909091";
                    });
                    document.getElementById("searchsubmit").style.backgroundColor = "#000";
                    document.querySelector("#s").style.backgroundColor = "#909091";
                    [...document.querySelectorAll("code")].forEach(elm=>{
                        [...elm.querySelectorAll("span")].forEach(childen_elm=>{
                            childen_elm.style.backgroundColor = "#565656";
                        });
                    });
//いらないかも領域🤔👆                    
                } catch (error) {
                }
            }

            document.cookie = "bgcolor_code=" + color;
        }
    }
}

注意事項:背景色を変更するCSSファイルをJSコードでチェックしています。そのチェックしている部分を外すと全てのCSSファイルの背景色を変えることが可能です。

タグ

, body, coding, colors, css, cssfile, description, examplestyle, gt, href, ID, javascript, JS, link, lt, quot, rel, site, span, stylesheet, コード, サイト, ファイル, ブログ, プログラム, ベタ, ヘッダー, 一括, 下記, 不明, 不良, 今日, 体調, 作成, 先日, , 原因, 回復, 変更, 実際, 導入, 挿入, 方法, 日曜日, 最後, 背景色, 自分, 記述, 設定,

理詰め。そんなに変わるだろうかと思う反面。 #人工知能 #シンギュラリティ

2022.11.25

Logging

おはようございます、祝日の昨日は雨でしたね😗。今日は3記事ほど予約投稿出来ました。

そんな中、PIVOTの対談を朝(夜も)から観ていました。佐々木さんと対談された落合陽一さん。落合陽一さん曰く、シンギュラリティは再来年にはやってくるだそうです。

【落合陽一のシンギュラリティ論】シンギュラリティは2025年に来る/ディフュージョンモデルの衝撃/知的ホワイトカラーが没落する/最新版デジタルネイチャー/音楽と論文が数秒でできる

落合陽一さんが得意ではない方もいるかと思いますが、聞いていて日本は遅れているなというのは良くわかります。英語圏の方は人工知能を使用して絵を作成したり、音楽を作成したりすることが容易に出来るけど、日本人は英語力がない人が多いのでテキストで思い通りに人工知能に指示することが出来ない。

【落合陽一の未来予測】シンギュラリティ後の世界と人間/大恋愛時代が来る/国家意識が薄れ、戦争が増える/自分以外は死なない/ロボットが消費者に/体を鍛えて、感じよく生きよ/ビジネス書は意味がない
デジタルネイチャー時代

そんな感じなので、絵を創作するならstability.ai、音楽を創作するならmubert(Mubert-Text-to-Music)を落合陽一さんが使用していたように海外の人たちは、もうこういうツールを使い始めています。日本だけが特殊な環境にあるなって思うところはあります。いろいろな分野にAI(人工知能)が浸透していくのは時間の問題かもしれないと思います。

特にホワイトカラー職は大手から変わるじゃないかと思います。下請けに外注していた単純作業などは恐らくAIに取って代わられる運命に有ると思います。猫も杓子もAIを使いだしたら、世の中は大きく変わるじゃないかな・・・。

タグ

, AI, mubert, Mubert-Text-to-Music, PIVOT, stability, こと, シンギュラリティ, ツール, テキスト, デジタル, ネイチャー, , 予約, , 人工, 今日, 佐々木, 作成, 使用, 再来年, 創作, 反面, , 容易, 対談, 得意, 思い通り, 感じ, 投稿, 指示, , 日本, 日本人, 昨日, 時代, 曰く, , 海外, 理詰め, 知能, 祝日, , 英語力, 英語圏, 落合, 記事, 陽一, , 音楽,

htmlとcssとjavascript-初学フロント側-No.1#code

2022.11.07

Logging

おはようございます。今年もあと2ヶ月もないわけですよね早いものですね😮

htmlとcssとjavascript-初学フロント側-No.1という動画をYOUTUBEにUPしたのが昨日の9時のこと。これで理解出来るか、どうか分からない。解説もない教えもない、唯コードを書いているところを見せてるだけです。ソースコードは下記のサイトから参照できますが、次の動画作成のためにデザインや処理が変わっていたり、動作しなくなってたりするので注意が必要です。

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

自分はHtmlやcssはあまり覚えていないのですが、分かるのはそれなりに基本ベースがあるからだと思ってます。今からHtmlやcssを学ぶ人は全部を覚えようとはせずに、手を動かしてコードを書くことから始めて下さい。そのうち基本ベースは身につくことになると思います。

因みに自分が書いているclassの名前付けなどの書き方は駄目な書き方ですので、そういう所、お仕事として書く場合は会社によってキマりなんかが有りますので、そういう事まで知りたい人はこちらの動画を参照ください。

実戦マークアップ

タグ

, 2, 358, , cl, Code, com, css, html, https, javascript, no, sample-site, tool, UP, youtube, うち, コード, こと, これ, サイト, ソース, それなり, ため, デザイン, ところ, フロント, ベース, もの, 下記, , , 今年, 作成, 全部, 処理, 初学, 動作, 動画, 参照, 基本, 必要, , 昨日, , 注意, 理解, 自分, 解説, ,

お店のホームページ(サイト)の作り方その弐

2022.03.05

Logging

おひさしぶりです。
ブログを数日休んでいました。こらからは不定期という感じでブログを書いてきます。
このブログはお店のホームページ作り方その壱の続きになります。

下記が予約ボタンと地図の作成手順です、こちらの変更部分をindex.phpのファイルを書き換えてください。予約には予約システムSelectType (セレクトタイプ)を使用しているのでアカウントを作りご自身のお店に合わして管理画面から設定してみてください。

会社の地図に関しては、GoogleMapを使用しています、こちらをindex.phpに貼り付けるのですが必要ない部分があるのでその部分を削除して貼り付けています。動画を注視してみるとわかるかと思います。

予約ボタン
ぐーぐるまっぷ・ お店の地図

今回はここまでです。次回はさくらレンタルサーバにファイルをアップロードする方法とSSLの設定を行い完了となります。

タグ

6, com, GoogleMap, https, index, php, SelectType, SSL, vMSy-CCthA, watch, www, youtube, アカウント, アップロード, お店, ここ, こちら, ご自身, サーバ, サイト, さくら, システム, セレクト, タイプ, ファイル, ブログ, ホームページ, ボタン, レンタル, 下記, 不定期, 予約, 今回, 作り方, 作成, 使用, 削除, 動画, 地図, , 変更, , 感じ, 手順, 数日, 方法, 次回, 注視, 画面, 管理, 設定, 部分,

お店のホームページ(サイト)の作り方その壱

2022.03.01

Logging

オハヨウゴザイマス。
片言の日本語しか使えない日本人です😌、高知県はあいにくの雨になるそうですね。

昨日のうちにお店のホームページ(サイト)の雛形作りをしておりました。デザインの参考にしたサイトはこちらになります。こちらのサイトデザインを元に自分が少しデザインを改良した感じです。

https://zip358.com/tool/sample.com/

こちらの画像や文言を変更することにより貴方が作成したいホームページが簡単にできてしまいます。解説はテキストで記載していきます。前手順としてVisualStudio codeとfilezillaソフトをWindowsやMacにインストールしてください。インストールの仕方はYOUTUBEで検索するといろいろな人が解説していますので、そちらを参考にしてください。

お店のホームページ(サイト)の作り方その壱-2

今回はお店のホームページ(サイト)の雛形をダウンロードして頂いてindex.phpというファイルをVisualStudio codeで開いてみてください。そうすると英字で記載している所が何箇所かあると思いますが英字は英字のままで何も変更しないでください、変更するのは日本語で記述されたところを貴方の店舗に合わして説明文を変更してみて保存してください。

お店のホームページ(サイト)の作り方その壱-1

画像を変えたい場合はimagesの中にある画像をそれぞれサンプルサイトを照らし合わせながら、貴方の店舗の画像に上書きしてください(画像名は変えないでください)。

次回は予約サイトの設定とGoogleMapの設定になります。

雛形はこちらからダウンロード:https://zip358.com/tool/sample.com.zip

タグ

Code, filezilla, index, Mac, php, VisualStudio, Windows, youtube, あいにく, いろいろ, インストール, うち, オハ, お店, こちら, こと, サイト, そちら, ソフト, ダウンロード, テキスト, デザイン, ファイル, ホームページ, よう, , 今回, 仕方, 作り方, 作成, , 参考, , 変更, 少し, 感じ, 手順, 改良, 文言, 日本人, 日本語, 昨日, 検索, 片言, 画像, 簡単, 自分, 英字, 解説, 記載, 貴方, 雛形, , 高知県,

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

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, いかが, オリジナル, キャラクター, こと, ソフト, それ, トム, 今日, 作り方, 作成, 愛着, 技術力, 朝日, 無料, 紹介, 自分, 解説, , ,

ReactNativeのボタンがiosとAndroidでは挙動が違うので代替。

2021.11.18

Logging

今日はReactNative(リアクトネイティブ)でアプリを制作しながら勉強している中で、ボタンを使ってみたら・・・iosとAndroidでは挙動というか見栄えが違うのですよ、ドキュメントにもそう書いていた?。なので、ボタンじゃなくてこちらを使用するほうが良さげです。

Color of the text (iOS), or background color of the button (Android).

こちら【TouchableOpacity】などを使用してボタンを作成しないといけないみたい。こちらで作るとios、Android同じ見栄え(デザイン)になります。作ってて思うことは師というかメンターがいればもっと効率的に開発できそうです。

師匠がほしい今日此頃・・・。

React Native Tutorial #8 – Touchable Components

以上、現場からでした。

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

const App = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(prevCount => prevCount + 1);

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
      >
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  }
});

export default App;

タグ

Android, background, button, color, from, import, iOS, of, OR, quot, react, ReactNative, Text, The, TouchableOpacity, useState, アプリ, こちら, こと, デザイン, ドキュメント, ネイティブ, ボタン, メンター, リアクト, , 今日, 今日此頃, 代替, 作成, 使用, 制作, 勉強, , 師匠, 挙動, 現場, 見栄え, 開発,

JavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)

2021.11.17

Logging

謎の訪問者さんが検索窓を使用して何度かググっているので要望にお応えJavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)というものを作りました。以前、csvを元にテーブルを作成するものを作っていました、ソースコードはそれを応用して作っています。実際、数万行に渡るファイルを自動計算するには、かなり爆速のパソコンが必要になります。このプログラムで耐えれるのは精々、1,000行あたりだと思います。

過去のコードと今回のサンプルデモのリンクを貼っときます。

どうぞご自由にお使いください。

https://zip358.com/tool/demo47/

"use strict";
var csv = {
	load:async function(filename,id){
		const responseFile = await fetch(filename);
        const result = await responseFile.text()
		let separate1 = /\r\n/;
		let separate2 = ",";
		let data = (result.split(separate1)).map(function(value){
			return (value.split(separate2)).map(function(value1){
				return value1;
			});
		});
		let sum =[];
		for (const usedata of data) {
            (usedata).map(function(val,index,array){
                sum[index] = (isNaN(parseInt(sum[index]))?0:parseInt(sum[index])) + parseInt(array[index]);
            });
		}
        console.log(sum);
		document.getElementById(id).innerHTML = sum.join(",");
		return "OK";
	}
};
csv.load("math.csv?", "sum");
JSでCSVファイルの和

タグ

000, , async, await, const, CSV, fetch, filename, function, ID, javascript, JS, load, quot, res, responseFile, strict, sum, use, var, お応え, かなり, コード, ご自由, サンプル, ソース, それ, テーブル, デモ, パソコン, ファイル, プログラム, もの, リンク, 今回, 以前, 何度か, 作成, 使用, , 合計, 実際, 必要, 応用, 数万, 検索窓, 爆速, 精々, 自動, 要望, 計算, 訪問者, , 過去,

パスコードをランダムで生成するコードです。JavaScriptで書いてみました。

2021.08.27

Logging

今日は朝から蒸し暑さを感じます。あの一週間も続いた雨はどこに行ってしまったのでしょうか?東京では立て続けに悲惨な事件が起きています、報道することにより模倣犯を増やしているような気がします。

さて、今日はパスコード(パスワード)をランダムで生成するコードをJavaScriptで書いてみました。パスコードの強度はそれ程、高くないかもしれませんが一応、パスコードを生成する事が出来ます。ソースコードを書いていてうっかりミスをしてしまいまして、無限ループを発生させてバグ取りに5分ぐらい費やしました。ループした原因は違う変数を判断文で使っていたという初歩的なミスです。この頃はそういうミスは稀ですが・・・その結果、無限ループに陥っていました。

パスコードというものを作ってみて案外簡単に作れるものだと実感。これを作る前にパスコードメーカーを作成するという動画を見ました。githubにソースコードも記載していましたので考え方は参考にしましたがコードは違うと思います。たにぐちさんの動画はvue.jsを使用してパスコードを作っているのに対して、自分はネイティブjsでパスコードを生成しているという違いがあります。

https://zip358.com/tool/PassCode/

JavaScriptでパスコードを生成するコード。
document.getElementById("btn1").addEventListener("click", () => {
    const mode = {
        mode0: !document.getElementById("mode0").value ? 8 : document.getElementById("mode0").value,
        mode1: document.getElementById("mode1").checked ? true : false,
        mode2: document.getElementById("mode2").checked ? true : false,
        mode3: document.getElementById("mode3").checked ? true : false,
        mode4: document.getElementById("mode4").checked ? true : false
    };
    const data = {
        txt_cnt: mode.mode0,
        txt1: mode.mode1 ? "0123456789" : "",
        txt2: mode.mode2 ? "ABCDEFGHIJKLMNOPQRSTUVWXYZ" : "",
        txt3: mode.mode3 ? "abcdefghijklmnopqrstuvwxyz" : "",
        txt4: mode.mode4 ? "#$&*@+-" : "",
    };


    // console.log(mode,data);

    let str = "";

    if (mode.mode1 || mode.mode2 || mode.mode3 || mode.mode4) {
        let txt_str = data.txt1 + data.txt2 + data.txt3 + data.txt4;
        do {
            str = "";
            for (let i = 1; i <= data.txt_cnt; i++) {
                str = str + txt_str.substr((getRandomInt(txt_str.length) - 1), 1);
            }
        } while ((() => {
            let flg = [];
            flg[0] = mode.mode1 ? /[0-9]/.test(str) : true;
            flg[1] = mode.mode2 ? /[A-Z]/.test(str) : true;
            flg[2] = mode.mode3 ? /[a-z]/.test(str) : true;
            flg[3] = mode.mode4 ? /[#|$|&|*|@|+|\-]/.test(str) : true;
            
            return (() => {
                let f = true;
                for (const key in flg) {
                    if (!flg[key]) {
                        f = false;
                    }
                }
                return f;
            })();
            return false;
        })() === false);
        document.getElementById("view").value = str;
    } else {
        alert("どれかを選択してください");
    }

});
function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}

タグ

5, github, javascript, コード, こと, これ, ソース, どこ, バグ, パスコード, パスワード, ミス, メーカー, もの, ランダム, ループ, , , 事件, 今日, 作成, 判断, , 動画, 原因, 報道, 変数, 実感, 強度, 悲惨, , , 東京, 模倣犯, , 無限, 生成, 発生, 立て続け, 簡単, 結果, 記載, , ,

写真などからポリゴン(Polygon)を自動で生成(作成)するツール?。

2021.08.23

Logging

本日は写真などからポリゴン(Polygon)を自動で生成(作成)するツール?を紹介します。このツールはMac・windowsともに対応したツールになります。それも無料でポリゴンを作成します。ツール自体は英語表記で書かれていますが、イメージロードとセイブという英単語がよめれば大丈夫かと思います。

使い方は簡単でポリゴンにしたい対象の画像や写真を読み込みます、写真を読み込んだ時点でポリゴンが作成されますので、ポリゴンの線などを表示したくない場合はポイントをクリックすると非表示になります。そこだけ覚えておけば良いのかなと思います。どこからが有料機能なのかはわかりませんが、無料で十分かなと自分は思っています。

ここまで書いてツール名を記載するのを忘れておりました。DMesh(ディーメッシュ)というアプリです。おそらく有料機能(プロ)だと思いますが動画をポリゴン化する事もできるみたいですね?

タグ

DMesh, Mac, Polygon, Windows, アプリ, イメージ, クリック, ここ, セイブ, そこ, それ, ツール, ティー, どこ, プロ, ポイント, ポリゴン, メッシュ, ロード, , 作成, 使い方, 写真, 動画, 場合, 対応, 対象, 時点, 有料, 本日, 機能, 無料, 生成, 画像, 簡単, 紹介, , 自体, 自分, 自動, 英単語, 英語, 表示, 表記, 記載,

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, アラート, インストール, エラー, オブジェクト, コード, こと, これ, サンプル, タイトル, ため, ドップ, ニュース, ブラウザ, ページ, もの, リンク, 久しぶり, , 今回, 今日, 作成, 作業, 使用, 先日, 勉強, 動作, 収集, 合間, , 天気, , 応用, 情報, 投稿, 方法, 既存, , 日曜日, 自動, 表示, 開発,

Yahoo japanサイトのコロナ情報リンク集です。好評に付きVer2。

2020.12.21

Logging

Yahoo japanサイトのコロナ情報リンク集です。好評に付きバージョン2を
作成しました。見た目はこんな感じです。県名をクリックするとYahoo!japanのコロナサイトの
画面が開きます(遷移します)。ほんとは、Yahoo!データをウェブスクレイピングしようと思ったのですが、別にそこまでする必要はないかなと思いとどまり、いまに至っています。
データは国もJSONで公開していますのでわざわざ作ることもないのですけど、自分が見やすいように、時間があれば改善していきます。

追記:時間があったので改善しました。

https://zip358.com/tool/COVID-19-japan/

var ken_json = {};
fetch("./assets/js/ken47.json").then(response => response.json()).then((data)=>{
	let ken = [];
	for (const key in data) {
		ken.push("<a href='#' onClick='c19(\"" + "https://hazard.yahoo.co.jp/article/covid19" + data[key].roman +"\")' onmouseover='c19_f(\"" + data[key].roman.toUpperCase() + "\",\"red\")'' onmouseout='c19_f(\"" + data[key].roman.toUpperCase() + "\",\"#fff\")'>" + data[key].name + "</a>");
	}
	document.getElementById("covid19-link-list").innerHTML = ken.join(",");
	for (const key in data) {
		document.getElementById(data[key].roman.toUpperCase()).setAttribute("fill","#fff");
	}
});

function c19(url){
	window.open(url,"_blank");
}
function c19_f(kenid,color){
	document.getElementById(kenid).setAttribute("fill",color);
}	
{
	"1": {
		"name": "北海道",
		"roman": "hokkaido"
	},
	"2": {
		"name": "青森",
		"roman": "aomori"
	},
	"3": {
		"name": "岩手",
		"roman": "iwate"
	},
	"4": {
		"name": "宮城",
		"roman": "miyagi"
	},
	"5": {
		"name": "秋田",
		"roman": "akita"
	},
	"6": {
		"name": "山形",
		"roman": "yamagata"
	},
	"7": {
		"name": "福島",
		"roman": "fukushima"
	},
	"8": {
		"name": "茨城",
		"roman": "ibaraki"
	},
	"9": {
		"name": "栃木",
		"roman": "tochigi"
	},
	"10": {
		"name": "群馬",
		"roman": "gunma"
	},
	"11": {
		"name": "埼玉",
		"roman": "saitama"
	},
	"12": {
		"name": "千葉",
		"roman": "chiba"
	},
	"13": {
		"name": "東京",
		"roman": "tokyo"
	},
	"14": {
		"name": "神奈川",
		"roman": "kanagawa"
	},
	"15": {
		"name": "新潟",
		"roman": "niigata"
	},
	"16": {
		"name": "富山",
		"roman": "toyama"
	},
	"17": {
		"name": "石川",
		"roman": "ishikawa"
	},
	"18": {
		"name": "福井",
		"roman": "fukui"
	},
	"19": {
		"name": "山梨",
		"roman": "yamanashi"
	},
	"20": {
		"name": "長野",
		"roman": "nagano"
	},
	"21": {
		"name": "岐阜",
		"roman": "gifu"
	},
	"22": {
		"name": "静岡",
		"roman": "shizuoka"
	},
	"23": {
		"name": "愛知",
		"roman": "aichi"
	},
	"24": {
		"name": "三重",
		"roman": "mie"
	},
	"25": {
		"name": "滋賀",
		"roman": "shiga"
	},
	"26": {
		"name": "京都",
		"roman": "kyoto"
	},
	"27": {
		"name": "大阪",
		"roman": "osaka"
	},
	"28": {
		"name": "兵庫",
		"roman": "hyogo"
	},
	"29": {
		"name": "奈良",
		"roman": "nara"
	},
	"30": {
		"name": "和歌山",
		"roman": "wakayama"
	},
	"31": {
		"name": "鳥取",
		"roman": "tottori"
	},
	"32": {
		"name": "島根",
		"roman": "shimane"
	},
	"33": {
		"name": "岡山",
		"roman": "okayama"
	},
	"34": {
		"name": "広島",
		"roman": "hiroshima"
	},
	"35": {
		"name": "山口",
		"roman": "yamaguchi"
	},
	"36": {
		"name": "徳島",
		"roman": "tokushima"
	},
	"37": {
		"name": "香川",
		"roman": "kagawa"
	},
	"38": {
		"name": "愛媛",
		"roman": "ehime"
	},
	"39": {
		"name": "高知",
		"roman": "kochi"
	},
	"40": {
		"name": "福岡",
		"roman": "fukuoka"
	},
	"41": {
		"name": "佐賀",
		"roman": "saga"
	},
	"42": {
		"name": "長崎",
		"roman": "nagasaki"
	},
	"43": {
		"name": "熊本",
		"roman": "kumamoto"
	},
	"44": {
		"name": "大分",
		"roman": "oita"
	},
	"45": {
		"name": "宮崎",
		"roman": "miyazaki"
	},
	"46": {
		"name": "鹿児島",
		"roman": "kagoshima"
	},
	"47": {
		"name": "沖縄",
		"roman": "okinawa"
	}
}

タグ

19, 2, 358, 47, assets, com, covid, fetch, gt, https, JAPAN, JS, json, ken, quot, response, then, tool, var, ver, www, Yahoo, zip, ウェブ, クリック, こと, コロナ, サイト, スク, そこ, データ, バージョン, ピング, ほんと, リンク集, レイ, わざわざ, 作成, 公開, , 好評, 必要, 情報, 感じ, 改善, 時間, 画面, 県名, 自分, 見た目, 追記, 遷移,

googleドライブ使ってる?

2020.12.01

Logging

googleドライブをパソコンにインストールするとgoogleドライブという領域が作らます。その領域を使用すれば他のパソコン間でファイルを共有することが可能です。それぞれPCでも同じパスにしてファイルを共有したい場合はシンボリックリンクを使用します。

やり方はこんな感じです。まずgoogleドライブ領域にフォルダを構えます、次に同じパスにしたい階層(googleドライブの階層ではなく)にシンボリックリンクでフォルダとリンクします。このことにより、シンボリックリンクの階層で作業したファイルなどは、おわかりの通りGoogleドライブに実際は作成されたことになるので、この方法で別のPCにもシンボリックリンクを使用して作成すれば、複数のPCでも同じファイル環境を整えることが可能です。

ちなみにシンボリックリンク作成は管理者権限でDosコマンドで下記のように打ってください。なお、MacとWindowsではコマンドは違います。Macの場合はターミナルになります。

シンボリックリンクとは何かはこちらを参照ください。?****

mklink /D 階層とシンボリックリンク名 階層とgoogleドライブのフォルダ名
ln -s 階層とgoogleドライブのフォルダ名 階層とシンボリックリンク名

WindowsとMacではコマンド名も命名規則も違う感じです・・・ややこしい?なっと。

タグ

Dos, Google, Mac, PC, Windows, インストール, おわかり, こと, コマンド, シンボリック, それぞれ, ターミナル, ドライブ, パス, パソコン, ファイル, フォルダ, やり方, リンク, 下記, , 作成, 作業, 使用, 共有, , 可能, 場合, 実際, 感じ, 方法, 権限, 環境, 管理者, 複数, 通り, 階層, 領域,

オレオレ認証SSL化、ワンツーコマンドで出来る。

2020.11.09

Logging

mkcertというものを使うとワンツーコマンドぐらいでオレオレ認証SSL化が出来てしまいます。尚、mkcertをインストールするにはHomebrew(ホームブルー)がインストールされている事が前提です。

リナックスではHomebrewをインストール前手順として、gitとrubyがインストールことが、前提となります。あと、nss-toolsも入っていなかったら入れる必要があります。こちらを入れて下記のコマンドでインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

次にHomebrew、コマンドよりmkcertをインストールします。(※コマンド登録は割愛します!!)

brew install mkcert

ローカル環境に認証局を作成してSSL認証を発行すれば終わりです。

mkcert -install
mkcert example.com

その場所に生成が終わるとファイルが出来ているので、そのpemファイルをApacheのVirtualHostで設定している場合は下記のように設定しApacheを再起動してあげればブラウザ(FirefoxかChrome)で見ると鍵認証が付いている状態になります。/etc/hostsのファイルの設定もお忘れなく。

<VirtualHost *:443>
  ServerName example.com
  DocumentRoot /var/www/html/example.com
  SSLEngine on
  SSLProtocol all -SSLv2
  SSLCertificateFile /home/tanaka/example.com.pem
  SSLCertificateKeyFile /home/tanaka/example.com-key.pem
</VirtualHost>

タグ

-fsSL, bash, bin, brew, C++, com, curl, git, githubusercontent, Homebrew, https, install, master, mkcert, nss-tools, quot, raw, Ruby, sh, SSL, インストール, オレオレ, こちら, こと, コマンド, ブルー, ホーム, もの, リナックス, ローカル, ワンツー, 下記, , 作成, 前提, 割愛, , 必要, 手順, , 環境, 登録, 認証,

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, いろいろ, オリジナル, サイト, テンプレート, とき, ファイル, プレス, ワード, 下記, , , 作成, 割愛, 場合, 大事, 感じ, 数行, 検索, 構成, 自作, 記事, 記述, 部分, 配布, ,

プログラム講師YOUTUBER、たにぐち まことさん。

2020.04.25

Logging

たにぐち まことさんという方がYOUTUBEでフロントエンドエンジニアやバックエンドエンジニアに対して有益な情報を公開しています。wordpressやvue.jsなどをわかりやすく解説しています。近々、kintoneの高知県講演(ライブ放送)で登壇される予定です。これからWEBのプログラマーやコーダーになりたい人は視聴して損はないと思います。自分が昔、HTMLなどを学んだときにはあまり本も買わずソースコード(HTMLコード)から勉強をしていましたが、いまはYOUTUBEという便利なツールがあるので、教育系YOUTUBERの動画を見て学習し手を動かして実践することにより短時間で学習することが出来ると思います。

Vue.js入門 #01: 一番最初のプログラム

自分がいまプログラミング初心者だったら、下記のようなプログラミング学習方法を取ると思います。YOUTUBEで教育系動画を視聴して動画で説明された物と同じ物を作成します。作成途中に分からない事があればググります、そして再度動画を観る。進まない時はSNSで質問をするなどを行いながら徐々に知識を身に着けていきます。知識がつくと基本を知ることが出来るので、次に違うプログラミング言語を学ぶ時の応用が付きます。尚、違う言語を学ぶときは以前まで使用していたプログラミング言語をいま勉強している言語で同じことを試してみるという事を行います。そうすることで比較的短時間で違う言語の勉強がスムーズになります。

理屈っぽい HTML5入門 #01:タグと HTML5と XHTMLの名残

最後にYOUTUBEチャンネル登録はこちら
たにぐち まことのともすたチャンネル
https://www.youtube.com/channel/UCphTq6mefx_15CjD35qgXgA

タグ

html, JS, kintone, vue, web, WordPress, youtube, YOUTUBER, いま, エンジニア, エンド, コーダー, コード, こと, これ, ソース, たにぐち, ツール, とき, バック, プログラマー, プログラミング, プログラム, フロント, まこと, ライブ, 下記, 予定, , , 作成, 便利, 公開, 初心者, 勉強, 動画, 学習, 実践, 情報, , , 放送, 教育, , 方法, , 有益, , , 登壇, 短時間, 自分, 視聴, 解説, 説明, 講師, 講演, 途中, 高知県,

ブラウザのプッシュ通知が簡単にできちゃう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, アカウント, インストール, ウェブ, オブジェクト, グーグル, クリック, ソフト, ダウンロード, パッケージ, ファイル, フォルダ, プッシュ, ブラウザ, プロジェクト, ホスティング, メッセージング, やり方, ローカル, 下記, , 任意, 作成, 取得, 左側, 必要, 情報, 手順, 操作, 確認, 移動, 簡単, 簡略, 表示, 記載, 設定, 認証, 説明, 起動, 通知, 項目,

天気予報を取得するアレを使用してみた(Openweathermap_api)。

2020.02.19

Logging

ご自由にお使いください。尚、openweathermap.orgより
アカウントを作成後、APIKEYを取得しお使いください。
下記のソースコードをコピーしての可変等は可能です。

余談

天気予報の絵文字が合致していていないかもしれません。
また都道府県のIDもズレている場合、お好みで変更ください。
ZIPコードで情報を取得するとより正確な天気予報となるそうです。

下記のコードを実行するとこんな感じになります。

ソースコードはこんな感じになります。

<?php
class Openweathermap_api{
    public $url = "https://api.openweathermap.org/data/2.5/weather?id=";
    public $appid = "apikey";
    public $ken ="";
    public $response ="";
    public $icon = array(
        "01d"=>"?",
        "02d"=>"?",
        "03d"=>"?",
        "04d"=>"?",//?
        "09d"=>"?",
        "010d"=>"?",
        "011d"=>"?",
        "013d"=>"?",
        "050d"=>"?",
    );
    function __construct()
    {
        $this->ken = (object)(json_decode(@file_get_contents("ken.json"),true));
    }
    function api(){
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $this->url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        $this->response =  (object)json_decode(curl_exec($ch),true);
        curl_close($ch);
    }
}
$tenki = New Openweathermap_api();
$tenki->url = "https://api.openweathermap.org/data/2.5/weather?id=".$tenki->ken->kochi["id"]."&appid=".$tenki->appid;
$tenki->api();
print($tenki->icon[str_replace("n","d",$tenki->response->weather[0]["icon"])]);
var_dump($tenki->response);
{
    "hokkaido": {
        "id": "2130037",
        "kenmei": "北海道",
        "kenfurigana": "ほっかいどう"
    },
    "aomori": {
        "id": "2130656",
        "kenmei": "青森県",
        "kenfurigana": "あおもり"
    },
    "iwate": {
        "id": "2112518",
        "kenmei": "岩手県",
        "kenfurigana": "いわて"
    },
    "miyagi": {
        "id": "2111888",
        "kenmei": "宮城県",
        "kenfurigana": "みやぎ"
    },
    "akita": {
        "id": "2113124",
        "kenmei": "秋田県",
        "kenfurigana": "あきた"
    },
    "yamagata": {
        "id": "2110554",
        "kenmei": "山形県",
        "kenfurigana": "やまがた"
    },
    "fukushima": {
        "id": "2112923",
        "kenmei": "福島県",
        "kenfurigana": "ふくしま"
    },
    "ibaraki": {
        "id": "2112669",
        "kenmei": "茨城県",
        "kenfurigana": "いばらき"
    },
    "tochigi": {
        "id": "1850310",
        "kenmei": "栃木県",
        "kenfurigana": "とちぎ"
    },
    "gunma": {
        "id": "1863501",
        "kenmei": "群馬県",
        "kenfurigana": "ぐんま"
    },
    "saitama": {
        "id": "1853226",
        "kenmei": "埼玉県",
        "kenfurigana": "さいたま"
    },
    "chiba": {
        "id": "2113014",
        "kenmei": "千葉県",
        "kenfurigana": "ちば"
    },
    "tokyo": {
        "id": "1850144",
        "kenmei": "東京都",
        "kenfurigana": "とうきょう"
    },
    "kanagawa": {
        "id": "1860291",
        "kenmei": "神奈川県",
        "kenfurigana": "かながわ"
    },
    "niigata": {
        "id": "1855429",
        "kenmei": "新潟県",
        "kenfurigana": "にいがた"
    },
    "toyama": {
        "id": "1849872",
        "kenmei": "富山県",
        "kenfurigana": "とやま"
    },
    "ishikawa": {
        "id": "1861387",
        "kenmei": "石川県",
        "kenfurigana": "いしかわ"
    },
    "fukui": {
        "id": "1863983",
        "kenmei": "福井県",
        "kenfurigana": "ふくい"
    },
    "yamanashi": {
        "id": "1848649",
        "kenmei": "山梨県",
        "kenfurigana": "やまなし"
    },
    "nagano": {
        "id": "1856210",
        "kenmei": "長野県",
        "kenfurigana": "ながの"
    },
    "gifu": {
        "id": "1863640",
        "kenmei": "岐阜県",
        "kenfurigana": "ぎふ"
    },
    "shizuoka": {
        "id": "1851715",
        "kenmei": "静岡県",
        "kenfurigana": "しずおか"
    },
    "aichi": {
        "id": "1865694",
        "kenmei": "愛知県",
        "kenfurigana": "あいち"
    },
    "mie": {
        "id": "1857352",
        "kenmei": "三重県",
        "kenfurigana": "みえ"
    },
    "shiga": {
        "id": "1852553",
        "kenmei": "滋賀県",
        "kenfurigana": "しが"
    },
    "kyoto": {
        "id": "1857907",
        "kenmei": "京都府",
        "kenfurigana": "きょうと"
    },
    "osaka": {
        "id": "1853909",
        "kenmei": "大阪府",
        "kenfurigana": "おおさか"
    },
    "hyogo": {
        "id": "1862047",
        "kenmei": "兵庫県",
        "kenfurigana": "ひょうご"
    },
    "nara": {
        "id": "1855608",
        "kenmei": "奈良県",
        "kenfurigana": "なら"
    },
    "wakayama": {
        "id": "1848938",
        "kenmei": "和歌山県",
        "kenfurigana": "わかやま"
    },
    "tottori": {
        "id": "1849890",
        "kenmei": "鳥取県",
        "kenfurigana": "とっとり"
    },
    "shimane": {
        "id": "1852442",
        "kenmei": "島根県",
        "kenfurigana": "しまね"
    },
    "okayama": {
        "id": "1854381",
        "kenmei": "岡山県",
        "kenfurigana": "おかやま"
    },
    "hiroshima": {
        "id": "1862413",
        "kenmei": "広島県",
        "kenfurigana": "ひろしま"
    },
    "yamaguchi": {
        "id": "1848681",
        "kenmei": "山口県",
        "kenfurigana": "やまぐち"
    },
    "tokushima": {
        "id": "1850157",
        "kenmei": "徳島県",
        "kenfurigana": "とくしま"
    },
    "kagawa": {
        "id": "1860834",
        "kenmei": "香川県",
        "kenfurigana": "かがわ"
    },
    "ehime": {
        "id": "1864226",
        "kenmei": "愛媛県",
        "kenfurigana": "えひめ"
    },
    "kochi": {
        "id": "1859133",
        "kenmei": "高知県",
        "kenfurigana": "こうち"
    },
    "fukuoka": {
        "id": "1863958",
        "kenmei": "福岡県",
        "kenfurigana": "ふくおか"
    },
    "saga": {
        "id": "1853303",
        "kenmei": "佐賀県",
        "kenfurigana": "さが"
    },
    "nagasaki": {
        "id": "1856156",
        "kenmei": "長崎県",
        "kenfurigana": "ながさき"
    },
    "kumamoto": {
        "id": "1858419",
        "kenmei": "熊本県",
        "kenfurigana": "くまもと"
    },
    "oita": {
        "id": "1854484",
        "kenmei": "大分県",
        "kenfurigana": "おおいた"
    },
    "miyazaki": {
        "id": "1856710",
        "kenmei": "宮崎県",
        "kenfurigana": "みやざき"
    },
    "kagoshima": {
        "id": "1860825",
        "kenmei": "鹿児島県",
        "kenfurigana": "かごしま"
    },
    "okinawa": {
        "id": "1854345",
        "kenmei": "沖縄県",
        "kenfurigana": "おきなわ"
    }
}

タグ

2.5, API, APIKEY, appid, class, data, ID, lt, Openweathermap, org, php, pub, public, quot, url, weather, zip, アカウント, アレ, お好み, コード, コピー, ご自由, ズレ, ソース, 下記, 予報, 余談, 作成, 使用, 取得, 可能, 合致, 場合, 変更, 天気, 実行, 情報, 感じ, 正確, 絵文字, 都道府県,

ゲーム、シティーズ:スカイラインが面白そう!

2019.12.02

Logging

ゲーム、シティーズ:スカイラインが面白そうというか、
シムシティみたいなゲームですけど、かなりリアルです。

【Cities:Skylines】リアルな日本の風景~日々を送る街・国道バイパスとその周辺

動画見て頂ければ分かる通り、超リアルに自分好みの街をつくることが
可能です。これは神的な地位に自分がなった気分になるのは
間違いないでしょう。

支配欲の強い人にはすごくオススメなゲームかと思います。
そしてこういう上記のような超リアルな日本の街などを作成したり
下記の動画のような事を行うって再生回数を増やすのも良いでしょうし

物凄く過酷でも市民は病院に通うのか試してみた!【Cities:Skylines / シティーズスカイライン】

とてもシティーズ:スカイラインは遊びに幅があるように
感じます。ちなみにPC版はセール中(2019年12月4日)です。

745円と低価格です、またPS4やMac版も発売されています。
https://store.steampowered.com/app/255710/Cities_Skylines/?l=japanese

タグ

2019, 255710, 4, 745, App, Cities, com, japanese, Mac, PC, PS, Skylines, steampowered, store, おすすめ, かなり, ゲーム, こと, これ, シティーズ, シムシティ, スカイライン, セール, リアル, 上記, 下記, , , 作成, 価格, 再生, 動画, 可能, 回数, 地位, , 支配欲, 日本, 気分, , 発売, , 自分, , 通り,

googleスプレッドシートの値を取得することは可能ですが!

2019.11.24

Logging

googleスプレッドシートの値を取得することは可能ですが動的な値を取得することは不可能です。
動的処理というのはスプレッドシートの関数などで値を表示している情報をPHPなどで外部取得することは不可能です。

【Google神関数】生産性が100倍上がる!スプレッドシート4つの便利関数はこれ!

※方法があるようでしたら、教えて頂ければありがたいです。

なお、PHPからスプレッドシートの値などは変更可能です。
今回は値の取得に関しての方法を記載しております。

手順
1.グーグルさんからグーグルスプレッドシートのAPIKEYを取得する。
2. グーグルスプレッドシートを作成しスプレッドシートのID部分を取得する。
3.サーバ上にComposerをインストールし、下記のコマンドを実行する。

composer require google/apiclient:"^2.0"

下記のソースのAPIキー、スプレッドシートIDの部分を取得した値に置き換える。

<?php
require_once __DIR__ . '/vendor/autoload.php';
//$keyFile = __DIR__. "/credentials.json";
define("APIKEY","APIキー");
define("SPID","スプレッドシートID");
$spreadsheetId = SPID;
$range ="Sheet1!A1:B123";
$client = new Google_Client();
$client->setApplicationName("Spreadsheet");
$client->setDeveloperKey(APIKEY);
$scopes = [Google_Service_Sheets::SPREADSHEETS];
$client->setScopes($scopes);
$service = new Google_Service_Sheets($client);
$response = $service->spreadsheets_values->get($spreadsheetId, $range);
// TODO: Change code below to process the `response` object:
echo '<pre>', var_export($response->getValues()), '</pre>', "n";

結構ハシオッタ説明になりますが、こちらでGoogleスプレッドシートの値を取得または操作が可能となります。

タグ

, 2, 2.0, , 4, 5, A`, apiclient, APIKEY, com, Composer, et, fCs, Google, https, ID, php, quot, require, watch, www, youtube, インストール, グーグル, こと, コマンド, サーバ, シート, スプレッド, ソース, 下記, 不可能, 今回, 作成, , 処理, 取得, 可能, 変更, 外部, 実行, 情報, 手順, 方法, 表示, 記載, 部分, 関数,

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

jQueryの基礎1

2018.11.11

Logging

世の中、javascriptへの原点回帰が進んでいますが、だからといって、jqueryが無くなるかといえばそうでもない気がします。トイウコトデ、jqueryの基礎的なデモページを作成しました。
ご参考程度どうぞ。これから毎週1回以上、プログラムのデモ的な内容をUPしていきます。自分の勉強や復習の意味合いも兼ねています。プログラム言語はPHP、JS、C#が主の掲載となります。

追記:2021年、jqueryは使わなくなってきています、そのうち使わなくなる可能性があります。
https://zip358.com/tool/demo1/demo1.php

$(function () {
	$(".alert.alert-danger").html("未記入です");
	$("input").keyup(function () {
		if ($(this).val()) {
			$(".alert.alert-danger").eq($("input").index(this)).html($(this).val());
		} else {
			$(".alert.alert-danger").eq($("input").index(this)).html("未記入です");
		}
	});
	$("input").blur(function () {
		if ($(this).val()) {
			$(".alert.alert-danger").eq($("input").index(this)).html($(this).val());
		} else {
			$(".alert.alert-danger").eq($("input").index(this)).html("未記入です");
		}
	});
	$("input").focus(function () {
		if ($(this).val()) {
			$(".alert.alert-danger").eq($("input").index(this)).html($(this).val());
		} else {
			$(".alert.alert-danger").eq($("input").index(this)).html("未記入です");
		}
	});
});

タグ

, 2021, alert, alert-danger, eq, function, html, if, input, javascript, jquery, JS, keyup, php, quot, this, UP, val, うち, これ, ご参考, デモ, トイウコトデ, プログラム, ページ, , , 作成, 内容, 勉強, 原点, 可能性, 回帰, 基礎, 復習, 意味合い, 掲載, 毎週, , 自分, 言語, 記入, 追記,