ネットを一日使用せずに生活をしてみた．結果．

2024.10.04

Logging

おはようございます．休みの日にネットを一日使用せずに生活をしてみました．結果．とても空き時間が増えました．そういえば学生時代はこんな感じだったなと、ネットを見ない分テレビを見たり本を読んだりとすることが多くなりましたが、下記の動画のようにスマホをONにした途端、友達からLINE通知が飛んでくることもなかったので．

二三日だったら、それほど困らない感じがします．ネットをしないことでわかったことは調べ物が瞬時にわかるということはどれほど楽なことだということと、日頃から情報を浴びている為か覚えていないということ．調べれば瞬時にわかるということは逆に言えば覚えるという行為をしないことだとも感じました．

明日へ続く．

タグ

LINE通知, ON, スマホ, ネット, 一日, 下記, 休み, 分テレビ, 動画, 友達, 学生時代, 情報, 日頃, 本, 生活, 瞬時, 空き時間, 結果, 行為, 調べ物,

サジェストでautoComplete.jsを使用したときの話．

2024.08.19

Logging

おはようございます．サジェストでautoComplete.jsを使用したときの話を書いていきます．まずよさこい祭り動画検索の方でサジェストを導入しようと決めて調べていた所、autoComplete.jsが簡単に導入できて良いよと記載されていたので使用してみました．

使用して分かったことは、一度取り込んだサジェストデータを置き換えたい場合は下記のようにしないと駄目です．SELECT部分がチェンジしたらサジェストデータの再読込みを行えば良いのかなと思っていましたが、データが一向に書き換わらないので、もしやと思って公式サイトのドキュメントを読んでいたら何となくこれは置き換わらないことに気づきました．

autoCompleteJS.unInit();

尚、書き換えるためにautoCompleteJSはグローバル扱いにしました、本当はもっとスマートなやり方があるだろうけど、これが自分にとってはベストかなと思ったのでこのような形にしています．

明日へ続く．

タグ

autoComplete.js, autoCompleteJS, autoCompleteJS.unInit, SELECT部分, サジェスト, サジェストデータ, データ, ドキュメント, やり方, 一度, 下記, 公式サイト, 再読, 形, 所, 祭り動画検索, 自分, 話,

DifyというAIサービスをローカル環境で試してみました．

2024.08.15

Logging

おはようございます．DifyというAIサービスをローカル環境で試してみましたが良いじゃないかなって思いました．下記の画像が実際動かしてみた感じです．

何が良いかと言えば社内アプリを構築するのに大変良いなということです．APIと連動しないと行けないですが、フェイスブックのOllama使えばAPI連動もローカルで出来るので実質無料で社内アプリが構築することが可能になります．

なお、作成された社内アプリのAPIURLを叩けばAPIとしても機能するのでいろいろと出来る感じがします．巷ではdify自体にアップロード機能は無いから不便との意見がありgithubのイシューにも書かれているらしいので機能追加される可能性は高そうです、それまでは外部で実行してテキストかURLを読み込ますことによって解決出来るのではないかなって思っています．

最後に自分としては良いサービスだと感じました．

明日へ続く．

タグ

AIサービス, API, APIURL, Dify, dify自体, github, Ollama使えばAPI連動, アップロード機能, イシュー, テキストかURL, フェイスブック, ローカル環境, 下記, 外部, 実質無料, 実際, 巷, 意見, 最後, 社内アプリ,

アクセシビリティという程のものではないけども．機能追加．

2024.07.31

Logging

おはようございます．サイトの上部に文字の大きさを変える機能を追加しました．こちら実際に目が悪いひとには気づきにくいのかもしれない.そのことに関しては今後の課題です．

アクセシビリティというのを調べていたら色覚の障害がある人はどのようにこの世界が見えるのかという事が理解できるサイトがあり、その内容が結構衝撃的だった．（サイトは下記のリンクです）

https://www.itra.co.jp/webmedia/color-blindness.html

五体満足で生きていると分からないことが多く、そして障害を持った人達がどんな所で不便や苦労をしているかという事に気づきにくいのかもしれないと思います．デザインしている人でも障害を持った人達のことを考えてサイトやデザインをしている人は恐らく少数ではないのかと思います．

自分はあまり考えてこなかったタイプの人間なので分からないことが多いです．

ですが、障害の持った人達も普通の人と変わらない生活が出来る社会になればと思っています．今後、そんな社会になる可能性は高いと思っています．日進月歩で医学分野も進んでいて再生医療や遺伝子治療も進んできているので今世紀には殆どの障害は克服することが可能になるのではないかと思っています．

明日へ続く．

タグ

アクセシビリティ, タイプ, デザイン, 上部, 下記, 世紀, 人間, 再生医療, 医学分野, 少数, 悪いひと, 文字, 日進月歩, 殆ど, 社会, 色覚, 苦労, 課題, 遺伝子治療, 障害,

この記事は何分で読めますを導入しました．何分で読めましたか？

2024.07.25

Logging

おはようございます．この記事は何分で読めますを導入しました．コードは下記のサイトコピペした後、少し自分のように手直しをしましたがほぼほぼコピペだと思っていただいて間違いないです．

https://fukuro-press.com/wordpress-display-reading-time

これにより購読してくれる人やリピーター様が増えるのを切に願っています．導入するまえに少し調べると購読者が増えるというような記事を見かけたので取り入れた感じです．読んでもらって何かの役に立てばこちらも嬉しいです．先日、書いた通り役に立ちたいという気持ちはありますが喜んでほしいとかいう気持ちはないです．

「これ良いわ、良い話聞いたわ、こんな人がいるだ、自分だけじゃなかった」等などと思って頂けたら幸いです．基本的にこのブログは技術共有と雑記で成り立っています、これで一応、数ヶ月置きに収益も出ているので、一応、恩返してきな要素もあります🌝．皆さんありがとうございます🙇．

ちなみにまだ程遠いですが自分がブログだけで生活が出来るように慣れば、いろいろな人の励みにはなると思っています．自分にも出来そうという思いを持ってほしいですね．

明日へ続く．

タグ

Photo by Pixabay on Pexels.com, コード, コピペ, リピーター様, 下記, 収益, 少し, 役, 恩返してき, 慣れば, 手直し, 技術共有, 数ヶ月置き, 気持ち, 生活, 皆さん, 要素, 購読者, 通り役, 雑記,

PHP言語でthreads投稿するための雛形を作りました．

2024.06.22

Logging

おはようございます、threads-Apiで投稿するための雛形を作りました（たぶんPHP言語では国内最速公開かも）．使用したい方は下記のリンクを参照してご使用いただけたら幸いです．Threadsのバージョンが上がれば使用出来なくなる可能性がありますので、ご注意ください．

https://github.com/taoka3/threads-api

Qiitaにも同じ内容のものを記載しています、この頃API関連しか記載しなくなったんだけど何か違う内容で仕事に影響ない範囲の技術共有っていうのは難しいなって思います．今回のAPIソースコードも自動投稿が出来るようになるプログラムコードなので売り物にしようと思えば出来るコードです．

Qiitaの技術共有って難しいなって思います．機械学習の情報も結構オープンソースで出ているわけで、そう思うと対した共有でもないかもなって思います．人によって価値が変わるのではないかなって思うこの頃です、悩ましい😌．

明日へ続く．

タグ

APIソースコード, PHP言語, Qitta, threads, threads-Api, オープンソース, この頃API関連, バージョン, プログラムコード, リンク, 下記, 価値, 共有, 国内最速公開, 売り物, 影響ない範囲, 技術共有, 機械学習, 自動投稿, 雛形,

chatGPTとひきこもり．

2024.05.19

Logging

おはようございます、生成AIによって学校いかなくても学べる時代になってきている．IQが高くて学校で学習するのが退屈だと感じている子供達はこれからchatGPTなどの生成AIを使用して学習しだすのかもしれないと感じました．そう感じさせた動画は下記になります、生成AIの進化は凄いなって思いますが、ここから飛躍するのが今後の課題なのかもしれないですね．

学習の手助けするのも凄いなって思いますが、生成AIと生成AIの会話が凄く奇妙な感じがしました、まさにSFの世界が現実になった瞬間なのかもしれない．今回のOpenAIの発表は結構衝撃的な内容でしたね😌

明日へ続く．

タグ

ChatGPT, IQ, OpenAI, Photo by Rafa De on Pexels.com, SF, 下記, 世界, 会話, 動画, 子供達, 学校, 学習, 感じ, 時代, 現実, 生成AI, 発表, 瞬間, 課題, 進化,

中国では工場が自動化になりつつある？

2024.05.14

Logging

おはようございます、下記のポストが流れてきて驚愕しました．とある中国の工場ではいままで10人の従業員が働いていたのだけど機械を導入することにより一人の従業員に置き換わったっていう話です．

こんな事が中国の工場では進んでいると思うと、日本もそろそろ取り入れた方が良いじゃないかと思っています．ロボットなので文句も言わないし何せ24時間働いてくれるので生産性は凄いと思いますが品質はどのぐらいなのかは未知数ですね．そこの課題をクリア出来たら日本でも自動化は進みそうです．

いま工場で働くヒトが減ってきているらしいので、日本でもこういう光景に何れなるかもと思ってしまいました．

いろいろな事がこれから自動化していきそうで何だか不安です．

明日へ続く．

タグ

10人, クリア, ひと, ポスト, ロボット, 下記, 中国, 何せ24時間, 光景, 品質, 工場, 従業員, 文句, 日本, 未知数, 機械, 生産性, 自動化, 話, 課題,

DockerとMysql

2024.03.07

Logging

おはようございます、Dockerデスクトップのコンテナが別れている時、他のコンテナからMysqlサーバーに繋ぎたいという事がありますよね。その繋ぎ方を自分は勘違いしていたので記事として残しときます。Dockerを使いだして一年目で気づく間違いです（泣）。外部コンテナのMysqlサーバーに繋ぎたい場合、下記の画像のようにmysqldbに繋がないとコネクションが出来ません。自分はMYSQL_HOSTだと思っていたのですがどうも違うようです。

これを知った時、正直なところ「えっ」って声が出たぐらい衝撃的でした。Dockerを使う前はバーチャルボックスというものを長年使っていたのですが、いまではDocker系が使いやすいです。Dockerデスクトップに慣れていたのに、DockerCLOUDの時代なんですよねぇー。

明日へ続く。

タグ

docker, DockerCLOUD, Dockerデスクトップ, Docker系, MYSQL_HOST, mysqldb, Mysqlサーバー, コネクション, こんてな, ところ, バーチャルボックス, 下記, 声, 外部コンテナ, 時代, 画像, 繋ぎ方, 自分, 記事, 長年,

2023年に観た映画たち。

2023.12.29

Logging

おはようございます、2023年に観た映画たちです😌。下記の動画に加えて先日観たパーフェクトデイズで今年の観た映画になります。自分としてはあまり映画観てない年になりますかね…。ちょっと観たいなって思う映画が少し減っているような気がします。来年は正月明けから観たい映画があるので、映画館に足を運ぶ感じになりそうですね。

ちなみに動画のキャプチャーしたサイトはサブでほそぼそと活動している映画専門のブログです、感想は短文です、他人のために始めたブログではなくて身近な人がみて今、こんなの上映しているだなって分かるサイトです。

明日へ続く。

タグ

サイト, サブ, パーフェクトデイズ, ブログ, 下記, 他人, 動画, 少し, 感じ, 感想, 映画, 映画たち, 映画専門, 映画館, 来年, 正月明け, 気, 短文, 自分, 足,

コジマプロダクションの小島秀夫監督。

2023.12.18

Logging

おはようございます、コジマプロダクションの小島秀夫監督さんの動画を見ました。やはり本を読む量が違うだなぁって下記の動画をみて感じました。自分は本を読むのに結構な時間を使うですけど、一日で一冊読了できる小島秀夫監督さんは凄いな。

洋書を読まれている理由は海外のカルチャーを知るというところもある。そういうのはやはり世界展開する場合、大事になるだなって思います。そんな小島秀夫監督さんのドキュメンタリーがディズニープラスから放映されるので、このためだけにディズニープラス契約しようかなって思ってしまう。

「あぁ見たいな」悩ましい。

明日へ続く。

タグ

カルチャー, コジマプロダクション, ディズニープラス, ドキュメンタリー, ところ, 一冊読, 一日, 下記, 世界, 動画, 小島秀夫監督さん, 時間, 本, 洋書, 海外, 理由, 自分, 量,

イラレの生成AIはプロンプト次第です。

2023.11.08

Logging

おはようございます、イラレの生成AIはプロンプト次第です。自分の肌感ではみんながよく使いそうなキーワードを使用すればそれなりのイラストやロゴが生成出来るのだけど、例えば自分の名前を入れたロゴを作ってみたいなのには、まだ応用が効かなく良いデザインが生成されないことが多いです。

ですが、ポリゴンとかそういうキーワードを盛り込むだけでまぁまぁ良いデザインが何度かの作業で生成されます。あと、生成されたデザインの色も生成AIで変更可能になっている。

要は使いようで良いデザインも劣化したデザインにもなるので、まずは短めの単語で生成して使用してみてください。その方が精度の良いデザインが生成されるはずです。

因みに下記には生成AIで作ったデザインが含まれています。

明日へ続く。

タグ

イラスト, イラレ, キーワード, デザイン, プロンプト次第, ポリゴン, みんな, ロゴ, 下記, 作業, 使いよう, 単語, 名前, 応用, 生成AI, 短め, 精度, 肌感, 良いデザイン, 色,

Air AIがヤバい。これは電話なり放題だな😄。

2023.11.07

Logging

おはようございます、営業をするAir AIがヤバい。下記の動画をみて日本語でも可能になるのは時間の問題だと感じました。断られても断られても電話をかけ続けるAI営業電話は、確実に何処かで営業が取れるじゃないかなって思います。

例えば自分みたいに片言の日本語しか未だに喋れないエンジニアでもセールスマンAIを雇用すれば自社製品を売り込んでくれそうです。いやー良いですね。なんだか凄く自分はこの動画をみて希望が湧きました。日本語版、待ち遠しいです。

明日へ続く。

タグ

Air AI, AI営業電話, エンジニア, セールスマンAI, ヤバい, 下記, 何処か, 動画, 問題, 営業, 日本語, 日本語版, 時間, 未だ, 片言, 自分, 自社製品, 電話,

laravelの技術ネタ。こういうのを有ることを。

2023.10.03

Logging

おはようございます、laravelの技術ネタです。Laravelにはこういうメソッドが用意されています。下記のリンクを参照ください。

https://readouble.com/laravel/8.x/ja/collections.html

こんな機能が有ることを覚えて置くと良いです。なので、わざわざ自分でコードを書かなくても便利な機能があります。覚えて置くと良いです。

この頃の学びはPHPに文字の置き換えする事。いやいや文字の置き換えなんて初歩の初歩でしょって思うかも知れません。自分もそう思っていましたけど、PHPにはいろいろな文字の置き換えができるメソッドがあります。その中でこれは便利だなっていう文字の置き換えはこれ！！

文字の位置を指定して、その部分だけを文字を置き換えることが出来るメソッドです。

substr_replace

明日へつづく

タグ

Laravel, php, substr_replace, いやいや文字, コード, メソッド, リンク, わざわざ自分, 下記, 位置, 初歩, 技術ネタ, 文字, 機能, 自分, 部分,

第何週目かを即座に知りたくないですか？☺

2023.09.03

Logging

おはようございます、第何週目かを即座に知りたくないですか？そんな二番煎じのちょっとしたシステムを作りました。下記のリンクをクリックしてお使い頂けたら幸いです☺

https://zip358.com/tool/week-day/

このシステムまだ作り込みの最中でして、もう一つ機能を追加して完了とします。その機能とは・・・秘密です。リリースした再度、記事にしてご報告いたします。二番煎じなので差別化を図らないと検索上位には表示されそうにないなと思ったので近日中に公開します💁。

追伸：記事をUPする前に機能追加できたので、こちらの記事にどんな機能なのか説明します。それはGカレンダーでインポート出来るCSVファイルを出力する機能です。これがあれば便利かなと思ってその機能を追加しました。差別化という程のものではないけれども、実際、他のサイトでは出力機能がないので、調べるには良いけど活用できないよね。

いちいち調べた情報をカレンダーに登録するのは、面倒くさいと思う人もいるだろうという事で今回、その機能を自前しました。

タグ

CSVファイル, Gカレンダー, カレンダー, システム, リンク, 下記, 二番, 二番煎じ, 再度, 出力機能, 即座, 実際, 差別化, 最中, 検索上位, 機能, 目, 程, 近日中, 追伸,

英字配列キーボードでも日本語切り替えに苦労したくない。

2023.07.23

Logging

おはようございます、英字配列キーボードでも日本語切り替えに苦労したくない。そんな方におすすめなのがPowerToysというマイクロソフトがフリーで提供しているツールです、このツールを使用すると開発や事務作業の効率が良くなります。

『Alt +`』を押すと英字配列でも切り替えが可能ですがいちいち変換するのは面倒ですよね。なので下記のような設定をすることで自分は対応を行いました。

こんな感じにキーを設定することにより、日本語モードと英語モードの切り替えが楽になりました。ショートカットキーとキーの再マップをしているだけでこんなにも楽になるとは思わなかったです。是非、英字配列のキーボードを買った人はお試しください🗿。

PowerToysはその他にも業務の効率を図るツールがありますのでいい感じです😯👍。

タグ

ALT, PowerToys, キー, キーボード, ショートカットキー, その他, ツール, マイクロソフト, 下記, 事務作業, 再マップ, 効率, 日本語, 日本語モード, 業務, 英字配列, 英字配列キーボード, 英語モード, 設定, 開発,

匿名質問箱を再稼働しました。#ask.fm #peing.net

2023.04.26

Logging

おはようございます、昔デザインしたものと、今デザインしたものを見比べてみたら違うなって思えてやはり継続すればそれなりに変わるんだなぁって思いました。此の度、匿名質問箱を構えています、再活動の初日はそれなりに質問が来たのですが、今は適度な質問が来ますので一応、このまま置いときます。質問に応えるのは結構楽しいものだなと感じる一方で、やはり実名や公開状態の質問をしてくれる人がいるとより嬉しいですね。

尚、自分に質問を投げたいという方は、下記のリンクかTwitterのプロフィールよりリンク先に移動してください。

http://t2t.jp/p2

http://t2t.jp/a2

因みにこのデザインは2022年にデザインしたもので、アイキャッチの画像は2023年のデザインになります。

タグ

2022年, アイキャッチ, デザイン, プロフィール, リンクかTwitter, リンク先, 一方, 下記, 人, 公開状態, 再活動, 初日, 匿名質問箱, 実名, 度, 昔, 楽しいもの, 画像, 自分, 質問,

chatGPTでは自然言語で指示が出来る。 #chatGPT

2023.04.11

Logging

おはようございます、chatGPTでは自然言語で指示が出来ます。例えば下記のような文言で指示をすると以降、そのルールに対応して回答をChatGPTが行ってくれます。これはChatGPTに限らず日本ではまだ公開（提供）されていないBardでも同じことが出来ます。

以降からルールを決めます。文字の先頭に▲がある場合は日本語に翻訳してください。文字の先頭に■がある場合は英語に訳してください。また、それ以外は、通常の回答を行ってください。

今回のルールは単純なものでしたが、ルールを複数作ることで複雑な問題も解決してくれるchatGPTになります。尚、基本中の基本ですがNewChatをあまり作らずに分類ごとにまとめ、その分類ではその内容の質問を投げかけることで、より良いchatGPTになります。

タグ

Ｂａｒｄ, ChatGPT, NewChat, ルール, 下記, 先頭, 分類, 分類ごと, 回答, 基本, 指示, 文字, 文言, 良いchatGPT, 英語, 複数, 言語, 質問, 通常,

chatGPTを使用していますか。”YesOrNo”

2023.02.28

Logging

おはようございます、chatGPTをお仕事でも活用しています。

例えば「Bootstrapで下記の情報（単語一覧）を使用してフォームを構築して」と指示すると、コーディングしたBootstrapの雛形を生成してくれます。なので、大量の項目数を必要とする場合などは間違いなく力を発揮してくれます。

因みにchatGPTはコーディングを途中で辞めてしまう場合がありますので、その場合は続きを書いてという指示を出せば、続きのコードを書いてくれますが、ここで注意点があり先ほどと同じスタイルのコードで書いてくれればよいのですが、たまにコーディングスタイルを変えてしまう場合があります。そう言う時は先ほどの続きを書いてと指示を出すか、最初からやり直してもらうのが良いです。

その他の方法として一度に渡すタスク量を少なくして小出しに指示を出すとでも良い結果が得られます。

コーディングしてくれた物が完璧なものをchatGPTに要求するより、後は人の手で直す方が効率が良いのです、ですので自分はこれで全てが現段階で出来るとは思っていませんし、そういう使い方は難しいとも思っています。

タグ

Bootstrap, ChatGPT, コーディング, コーディングスタイル, コード, スタイル, その他, タスク量, フォーム, 一度, 下記, 効率, 単語一覧, 小出し, 指示, 最初, 現段階, 途中, 雛形, 項目数,

Laravelでの.envファイルの重要性。 #重宝

2023.02.09

Logging

おはようございます、laravel使っていますか？

Laravelでのenvファイルの重要性というタイトルに釣られた方、スミマセン🙇。

envファイルを使用すると、機能のONOFFなどに使用することも出来たりデフォルトで使われている通りDBの接続設定などにも使用されていますよね。

envの良い所はバックエンド側、フロント側ともどちらでも呼び出しが簡単なところです。下記の関数を呼び出せば値を取得することが出来ます。

config('app.name')

詳しく知りたい方はググるといろいろな説明が出てきます。たぶん、これがわかり易いかもということでリンクを一つ貼っときます。

タグ

app.name&#39, config, env, envファイル, Laravel, onoff, スミマセン, タイトル, デフォルト, バックエンド側, フロント側, 下記, 値, 接続設定, 機能, 説明, 通りDB, 重要性, 関数,

phpバージョン対応、例えばPHP7系からPHP8へ😳 #php #Linux

2022.12.09

Logging

おはようございます、AIによる記事作成が出来るようになっているみたいですね、ChatGPTという奴です😱、大量生産出来る時代になると大変やな。

さて、今日はphpバージョン対応のお話を書きます、この記事は先日、Tweetをした事を文書化という感じですね、phpバージョン対応を行いたい場合、巷ではこのような記事が多く出回っていると思いますが、実際、そんな事をしなくてもRed Hat系の場合は、この3ステップを行いPHPをインストールすれば良いじゃないのかなってこの頃思いました。

ステップ１から時系列でコマンドを記載しますね。

yum install https://rpms.remirepo.net/enterprise/remi-release-8.rpm

yum module list php

 yum module switch-to php:8.2 

こんな感じにコマンド、打てばPHPインストール設定が変わります。PHPモジュールの切り替え後に、下記のコマンドを打てばインストール可能です。そんな感じで簡単に切り替えが出来ます。

yum install php

タグ

インストール, インストール設定, お話, コマンド, ステップ, バージョン対応, モジュール, 下記, 大量生産出来る時代, 実際, 巷, 感じ, 文書化, 時系列, 記事, 記事作成,

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, インストール, お話, これ, こんてな, バーチャル, パラメーター, ホスト, 一旦, 下記, 今日, 仕様, 付与, 側, 再度, 初期, 場合, 変更, 早朝, 明日, 構築, 環境, 確認, 終了, 記事, 設定, 起動,

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, コード, サイト, ファイル, ブログ, プログラム, ベタ, ヘッダー, 一括, 下記, 不明, 不良, 今日, 体調, 作成, 先日, 内, 原因, 回復, 変更, 実際, 導入, 挿入, 方法, 日曜日, 最後, 背景色, 自分, 記述, 設定,

お天気APIを試してみました。#超簡単コード

2022.11.21

Logging

おはようございます、今日は天気APIの話なので天気のお話はしませんが…。

さて、超簡単コードを記載しています。下記のソースコードとオープンウェザーマップのAPIKEYがあれば、誰でもプログラマーです。という事を言えば後ろから蹴られそうですが…。先ずは簡単なコードを見て勉強するのが大事かなって思います。

いきなり難しいことを身に着けようと思っても、三日坊主になって先に進まないのが世の常ですｗ。なので、簡単なコードで楽しんで勉強するほうが大事かなって。

<?php
require "./assets/config.php";
$lat = "33.55972";
$lon = "133.53111";
$lang = "ja";
$url = "https://api.openweathermap.org/data/2.5/weather?units=metric&lang={$lang}&lat={$lat}&lon={$lon}&appid=".APIKEY;
$hasWeatherdata = json_decode(@file_get_contents($url));
print($hasWeatherdata->weather[0]->description);
print("<img src='./assets/images/". $hasWeatherdata->weather[0]->icon .".png'>");
print((int)($hasWeatherdata->main->temp) . "℃");

タグ

0, 133.53111, 33.55972, API, APIKEY, assets, com, config, ea, https, ja, lang, lat, lon, lt, php, quot, require, url, ｗ, watch, www, Xn-VCyGQ, youtube, ウェザー, お話, コード, こと, ソース, プログラマー, マップ, 三日坊主, 下記, 世の常, 事, 今日, 勉強, 大事, 天気, 後ろ, 簡単, 記載, 話, 誰, 超簡単,

POSTとGETの考え方について伝えている動画。 #以心伝心

2022.11.12

Logging

おはようございます、11月なのに寒くないって不思議です😗温暖化。

さて、POSTとGETの考え方について無音声（音楽あり）で伝えている動画です、以心伝心で意味が通じると良いですが、それではブログを書いている意味がないので要点だけ解説します。POSTとGETとは、インターネット上でデータの送信を行うのに使用します。POSTの利点はデータを隠して送れることと、比較的に重いデータも送れることにあります。ではGET送信の利点は、SEOに有利と言ったところでしょうか。

今回、POST送信とGET送信を行い、PHPのプログラムでPOSTとGETを受信する方法を動画で伝えています。次回は非同期処理を使用して送受信を行う方法をプログラムで書いていきます。

HTMLとPHPプログラムは下記のソースを参照下さいませ🙇。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo site</title>
    <style>
html {
    width: 100vw;
    height: 100vh;
}

body {
    background-color: rgb(0, 0, 0);
    color: aliceblue;
    background-image: url(./assets/images/aig-mid22910-120-xl_TP_V.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

div.box {
    border-color: aliceblue;
    border-style: inset;
    position: absolute;
    width: 300px;
    height: 450px;
    color: white;
    border-radius: 1em;
    padding: 1em;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    /* background-color: #ffffff80; */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-wrap: break-word;
    text-align: center;
}

div>form>p {
    font-weight: bold;
    margin: 13px;
}

input {
    opacity: 0.5;
}

textarea {
    opacity: 0.5;
}

button {
    padding: 5px;
    border-radius: 1em;
    border-style: solid;
    border-color: aliceblue;
    background-color: aliceblue;
    color: rgb(0, 0, 0);
}
button:hover{
    border-color: rgb(255, 255, 255);
    border-style: inset;
    background-color: rgb(27, 76, 119);
    color: aliceblue;
}
.put:nth-child(2){
    overflow: auto;
    height: 120px;
}
    </style>
</head>
<body>
    <div class="box">
        <div id="box2">
            <form action="submit.php" method="post">
                <p>名前:<input type="text" name="name"></p>
                <p><textarea name="text" id="" cols="30" rows="10"></textarea></p>
                <p><button class="btn" type="submit">確認</button></p>
            </form>
        </div>
        <div id="data">
            <p class="put"></p>
            <p class="put"></p>
        </div>
    </div>
    <script src="./assets/js/main.js"></script>
</body>

</html>

<?php
var_dump(xss_d($_POST));
print(xss_d($_POST["name"])."<br>");
print(xss_d($_POST["text"])."<br>");

function xss_d(mixed $val){
    if(!isset($val))return false;

    if(is_array($val)){
        foreach ($val as $key => $value) {
            $val[$key] = strip_tags($value);
            $val[$key] = htmlspecialchars($val[$key],ENT_QUOTES);
        }
    }else{
        $val = strip_tags($val);
        $val = htmlspecialchars($val,ENT_QUOTES);
    }

    return $val;

}

タグ

11, 2, css, DOCTYPE, GET, html, lt, no, php, POST, SEO, インターネット, こと, ソース, データ, ところ, ブログ, プログラム, 下記, 不思議, 今回, 以心伝心, 使用, 処理, 初学, 利点, 動画, 参照, 受信, 同期, 意味, 方法, 有利, 次回, 温暖化, 考え方, 要点, 解説, 送信, 送受信, 音声, 音楽,