おつりアルゴリズム番外編。
2020.07.10
おつりアルゴリズムのアクセスがまぁまぁ好評なので番外編を記載します。硬貨や紙幣の制限がない場合、単なるこれだけのアルゴリズムで動作させることが可能です。尚、自動販売機などは硬貨の枚数なども計算しておつりを算出しているだろうと思います。因みにこのアルゴリズムに硬貨の枚数などのアルゴリズムを追加することにより比較的に簡単に導入できるかと思います。
デモ21としてリンクを載せときます、実際に使用してみて勘どころを掴んでください。なお、このコードはHTMLとJSで動させています。PHPなどは使用していません。ジャバスクリプト（JavaScript）で結構いろいろなことを処理することが可能だと感じますね。WEBでなにか勉強しようと考えている場合、JS（ジャバスクリプト）は必須であり、ブラウザさえあれば普通に動くのでお勧めな言語かなと思います。
ソースコードは下記になります。https://zip358.com/tool/demo21/
document.getElementById("money").addEventListener("input",function(){
var money = document.getElementById("money").value;
var change = {
calc1:{yen:10000,change:0,str1:"紙幣",str2:"枚"},
calc2:{yen:5000,change:0,str1:"紙幣",str2:"枚"},
// calc33:{yen:2000,change:0,str:"紙幣",str2:"枚"},
calc3:{yen:1000,change:0,str1:"紙幣",str2:"枚"},
calc4:{yen:500,change:0,str1:"硬貨",str2:"個"},
calc5:{yen:100,change:0,str1:"硬貨",str2:"個"},
calc6:{yen:50,change:0,str1:"硬貨",str2:"個"},
calc7:{yen:10,change:0,str1:"硬貨",str2:"個"},
calc8:{yen:5,change:0,str1:"硬貨",str2:"個"},
calc9:{yen:1,change:0,str1:"硬貨",str2:"個"}
};
money = money.replace(/[,|，]/g,"");
if(money.match(/[0-9]{1,}/g)){
for (const key in change) {
if (change.hasOwnProperty(key)) {
const obj = change[key];
change[key].change = Math.floor(money / obj.yen);
money = money % obj.yen;
}
}
var anser = function() {
var str = "";
for (const key in change) {
if (change.hasOwnProperty(key)) {
const obj = change[key];
if(obj.change){
str+= obj.yen + "円、" + obj.str1 + "が" + obj.change + obj.str2 + "<br>";
}
}
}
return str;
};
document.getElementById("change_print").innerHTML = anser();
}else{
document.getElementById("change_print").innerHTML = "入力が不適切です！";
}
});タグ
21, document, getElementById, html, javascript, JS, php, quot, web, アクセス, アルゴリズム, いろいろ, おつり, お勧め, コード, こと, これだけ, ジャバ, スクリプト, ソース, デモ, ブラウザ, リンク, 下記, 使用, 処理, 制限, 勉強, 動, 動作, 勘どころ, 可能, 場合, 好評, 実際, 導入, 必須, 普通, 枚数, 番外編, 硬貨, 算出, 簡単, 紙幣, 自動販売機, 言語, 計算, 記載, 追加,
Yahoo!ニュースをPythonで取得するできました(´・ω・`)ｖ
2020.05.01
早朝、YOUTUBEライブ配信で行ったものはタイトルとリンクが若干異なるところがあったので、修正したソースコードを貼っときます。Python言語少しずつ 少しずつ理解できてきた。
書き方が慣れればPHPより書くのは楽かな。＄の記号がPHPの変数を書く場合、絶対必要になるけどPythonは書かなくて良いからね。
import requests
from bs4 import BeautifulSoup
r = requests.get("https://news.yahoo.co.jp/")
soup = BeautifulSoup(r.content, "html.parser")
#ニュース一覧のテキストのみ抽出
f = open("link.csv",mode = "a")
for t,a in zip(soup.find_all("div", "newsFeed_item_title"),soup.find_all("a", "newsFeed_item_link")):
f.write(t.text + "," + a.get('href') + "\n")
f.close()タグ
4, BeautifulSoup, bs, co, content, CSV, find, For, from, GET, html, https, import, in, jp, link, mode, News, open, parser, php, Python, quot, requests, soup, ｖ, Yahoo, youtube, zip, コード, ソース, タイトル, テキスト, ところ, ニュース, もの, ライブ, リンク, 一覧, 修正, 取得, 場合, 変数, 必要, 抽出, 早朝, 書き方, 理解, 若干, 言語, 記号, 配信,
プログラム講師YOUTUBER、たにぐち まことさん。
2020.04.25
たにぐち まことさんという方がYOUTUBEでフロントエンドエンジニアやバックエンドエンジニアに対して有益な情報を公開しています。wordpressやvue.jsなどをわかりやすく解説しています。近々、kintoneの高知県講演（ライブ放送）で登壇される予定です。これからWEBのプログラマーやコーダーになりたい人は視聴して損はないと思います。自分が昔、HTMLなどを学んだときにはあまり本も買わずソースコード（HTMLコード）から勉強をしていましたが、いまはYOUTUBEという便利なツールがあるので、教育系YOUTUBERの動画を見て学習し手を動かして実践することにより短時間で学習することが出来ると思います。
自分がいまプログラミング初心者だったら、下記のようなプログラミング学習方法を取ると思います。YOUTUBEで教育系動画を視聴して動画で説明された物と同じ物を作成します。作成途中に分からない事があればググります、そして再度動画を観る。進まない時はSNSで質問をするなどを行いながら徐々に知識を身に着けていきます。知識がつくと基本を知ることが出来るので、次に違うプログラミング言語を学ぶ時の応用が付きます。尚、違う言語を学ぶときは以前まで使用していたプログラミング言語をいま勉強している言語で同じことを試してみるという事を行います。そうすることで比較的短時間で違う言語の勉強がスムーズになります。
最後にYOUTUBEチャンネル登録はこちら
たにぐち まことのともすたチャンネル
https://www.youtube.com/channel/UCphTq6mefx_15CjD35qgXgA
タグ
html, JS, kintone, vue, web, WordPress, youtube, YOUTUBER, いま, エンジニア, エンド, コーダー, コード, こと, これ, ソース, たにぐち, ツール, とき, バック, プログラマー, プログラミング, プログラム, フロント, まこと, ライブ, 下記, 予定, 事, 人, 作成, 便利, 公開, 初心者, 勉強, 動画, 学習, 実践, 情報, 手, 損, 放送, 教育, 方, 方法, 昔, 有益, 本, 物, 登壇, 短時間, 自分, 視聴, 解説, 説明, 講師, 講演, 途中, 高知県,
高知県のダム貯水率グラフ化2
2020.03.26
以前、高知県のダム貯水率のグラフ化してみた事があるのですがいつの間にかデータが取得できなくなっていたようです。なので取得できるようにPHPコードを変更しました。高知県のダム貯水率をJSON形式で吐き出してほしいなと思う人は少数ながらいると思います。そんな方は私がJSON形式で吐き出したデータを密かに使っていたりするのかな？因みにプログラム出来るよというひとは自身で貯水率のデータが転がっているURLを掲載しますので解析して頂ければ有り難いと思います。
https://suibo-kouho.suibou.bousai.pref.kochi.lg.jp/suibou/main.html?no=4&no2=0&fnm=openTable
<?php
$html = file_get_contents("高知県のダム貯水率のURL");
$html = mb_convert_encoding($html,"UTF-8","SJIS");
$dom = new DOMDocument();
$html = mb_convert_encoding($html, "HTML-ENTITIES", 'UTF-8');
@$dom->loadHTML($html,LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
$ary=array(
"永瀬ダム"=>"nagase",
"鎌井谷ダム"=>"kamaidani",
"鏡ダム"=>"kagami",
"早明浦ダム"=>"sameura",
"桐見ダム"=>"kirimi",
"坂本ダム"=>"sakamoto",
"大渡ダム"=>"oodo",
"中筋川ダム"=>"nakasugawa",
"以布利川ダム"=>"iburigawa"
);
for($i=1;$i<=9;$i++){
$r[$xpath->query("/html/body/form/div[2]/table/tbody/tr[$i]/td[3]")->item(0)->textContent] = preg_replace("/[\x{00a0}|?]/u","",$xpath->query("/html/body/form/div[2]/table/tbody/tr[$i]/td[7]")->item(0)->textContent);
}
foreach ($r as $key => $value) {
$obj[$ary[$key]] = $value;
}
//echo '{"nagase":"91.16","kamaidani":"77.57","kagami":"39.32","sameura":"100.00","kirimi":"46.09","sakamoto":"99.38","oodo":"98.70","nakasugawa":"77.90","iburigawa":"99.12"}';
print json_encode($obj);https://zip358.com/tool/demo6/index.html
タグ
0, 2, 4, amp, bousai, contents, convert, encoding, file, fnm, GET, html, https, jp, json, kochi, LG, lt, main, mb, no, openTable, php, pref, quot, suibo-kouho, suibou, url, グラフ, コード, ダム, データ, ひとは, プログラム, 事, 人, 取得, 変更, 少数, 形式, 掲載, 方, 私, 自身, 解析, 貯水, 高知県,
jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。
2020.03.10
jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。記述は下記になります。ぐぐると出てくるので知っている人の方が多いかもしれませんが…。ちなみに自分はこの記述方法、ごくまれにしか使わないため、忘れてしまいます。event.dataに紐づけてくれるのはとても良いかなと自分は思っていますが、皆さんはいかがでしょうか？もうjqueryなんか使わないよという方もいると思うのですが、自分が思うにゴリゴリ書くよりか、jqueryで済ませれるところは使ったほうがコードは短くて済むと思っています。WEB業界は技術の移り変わりが早いですよね。逆にソフトのほうはWEBよりはスパンが長い気がします。
https://zip358.com/tool/demo9/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="common.js"></script>
<title>Document</title>
</head>
<body>
<p id="pen">お腹空いた(´；ω；｀)お腹空いたと＞φ(..)</p>
</body>
</html>$(function(){
$("#pen").click({sword:"The pen is mightier than the sword"},function(e){
$(this).text(e.data.sword);
});
// $("#pen").on("click",{sword:"The pen is mightier than the sword"},function(e){
// $(this).text(e.data.sword);
// });
});
タグ
charset, data, DOCTYPE, EVENT, gt, head, html, ja, jquery, lang, lt, meta, quot, web, いかが, イベント, かな, コード, スパン, ソフト, ため, ところ, 下記, 人, 処理, 引数, 技術, 方, 方法, 業界, 気, 皆さん, 紐, 自分, 記述, 逆,
都道府県にカーソルを乗せると色が変わるちょっとした奴ムフ。
2020.03.09
JSONファイル、JSファイル、htmlファイルはそれぞれ下記になります。ちなみにいま作っている、あるサービスに使うために作ったもののお裾分けです。雛形として作っているのでおそらく、編集しやすいかなと思います。なお、SVGファイルは自分のソースからダウンロードするか、提供元のSVGをダウンロードするかしてください。ちなみにSVGは日本地図の標準をダウンロードしています。
デモ8：： https://zip358.com/tool/demo8/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="common.js"></script>
<title>Document</title>
</head>
<body onload="ken()">
<object id="svg_ken" data="jpn03_a4.svg" type="image/svg+xml" width="700" height="700"></object><br>
<a target="new456" rel="license" href="http://creativecommons.org/licenses/by-nc/2.1/jp/"><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc/2.1/jp/88x31.png"></a><br>
データ引用元：<a target="new123" href="https://www.kabipan.com/geography/whitemap/">https://www.kabipan.com/geography/whitemap/</a><br>
</body>
</html>{
"kenmei":[
{"id":"1","ken":"北海道","eiji":"HOKKAIDO"},
{"id":"2","ken":"青森県","eiji":"AOMORI"},
{"id":"3","ken":"岩手県","eiji":"IWATE"},
{"id":"4","ken":"宮城県","eiji":"MIYAGI"},
{"id":"5","ken":"秋田県","eiji":"AKITA"},
{"id":"6","ken":"山形県","eiji":"YAMAGATA"},
{"id":"7","ken":"福島県","eiji":"FUKUSHIMA"},
{"id":"8","ken":"茨城県","eiji":"IBARAKI"},
{"id":"9","ken":"栃木県","eiji":"TOCHIGI"},
{"id":"10","ken":"群馬県","eiji":"GUNMA"},
{"id":"11","ken":"埼玉県","eiji":"SAITAMA"},
{"id":"12","ken":"千葉県","eiji":"CHIBA"},
{"id":"13","ken":"東京都","eiji":"TOKYO"},
{"id":"14","ken":"神奈川県","eiji":"KANAGAWA"},
{"id":"15","ken":"新潟県","eiji":"NIIGATA"},
{"id":"16","ken":"富山県","eiji":"TOYAMA"},
{"id":"17","ken":"石川県","eiji":"ISHIKAWA"},
{"id":"18","ken":"福井県","eiji":"HUKUI"},
{"id":"19","ken":"山梨県","eiji":"YAMANASHI"},
{"id":"20","ken":"長野県","eiji":"NAGANO"},
{"id":"21","ken":"岐阜県","eiji":"GUFU"},
{"id":"22","ken":"静岡県","eiji":"SIZUOKA"},
{"id":"23","ken":"愛知県","eiji":"AICHI"},
{"id":"24","ken":"三重県","eiji":"MIE"},
{"id":"25","ken":"滋賀県","eiji":"SHIGA"},
{"id":"26","ken":"京都府","eiji":"KYOTO"},
{"id":"27","ken":"大阪府","eiji":"OSAKA"},
{"id":"28","ken":"兵庫県","eiji":"HYOGO"},
{"id":"29","ken":"奈良県","eiji":"NARA"},
{"id":"30","ken":"和歌山県","eiji":"WAKAYAMA"},
{"id":"31","ken":"鳥取県","eiji":"TOTTORI"},
{"id":"32","ken":"島根県","eiji":"SHIMANE"},
{"id":"33","ken":"岡山県","eiji":"OKAYAMA"},
{"id":"34","ken":"広島県","eiji":"HIROSHIMA"},
{"id":"35","ken":"山口県","eiji":"YAMAGUCHI"},
{"id":"36","ken":"徳島県","eiji":"TOKUSHIMA"},
{"id":"37","ken":"香川県","eiji":"KAGAWA"},
{"id":"38","ken":"愛媛県","eiji":"EHIME"},
{"id":"39","ken":"高知県","eiji":"KOUCHI"},
{"id":"40","ken":"福岡県","eiji":"FUKUOKA"},
{"id":"41","ken":"佐賀県","eiji":"SAGA"},
{"id":"42","ken":"長崎県","eiji":"NAGASAKI"},
{"id":"43","ken":"熊本県","eiji":"KUMAMOTO"},
{"id":"44","ken":"大分県","eiji":"OOITA"},
{"id":"45","ken":"宮崎県","eiji":"MIYAZAKI"},
{"id":"46","ken":"鹿児島県","eiji":"KAGOSHIMA"},
{"id":"47","ken":"沖縄県","eiji":"OKINAWA"}
]
}
function ken() {
$.getJSON("ken.json", function (json) {
var svg_ken = document.getElementById('svg_ken').contentDocument;
var ken = $(svg_ken);
ken.find('path').attr('fill', '#fff');
////
for (var i = 0; i < 47; i++) {
ken.find("[id='" + json.kenmei[i].eiji + "']").on("click",{i:i,json:json},function (event) {
window.location.href = "/page/" + event.data.json.kenmei[event.data.i].id;
});
}
////
for (var i = 0; i < 47; i++) {
ken.find("[id='" + json.kenmei[i].eiji + "']").hover(
function () {
$(this).attr('fill', '#4080ff');
},
function () {
$(this).attr('fill', '#fff');
});
}
});
}タグ
358, 8, charset, com, content, demo, device-widt, DOCTYPE, gt, head, html, https, ja, JS, json, lang, lt, meta, name, quot, SVG, tool, UTF-, viewport, Width, zip, いま, お裾分け, カーソル, サービス, ソース, それぞれ, ダウンロード, ため, デモ, ファイル, ムフ, 下記, 地図, 奴, 提供, 日本, 標準, 編集, 自分, 色, 都道府県, 雛形,
WEBお問い合わせフォームのお値段はいったい幾ら？
2020.01.17
WEBお問い合わせフォームのお値段はいったい幾らなのか？
堀江貴文氏はデジタルの値段は限りなくゼロに近くなると言っていたけど、無料のWEB申し込みフォームやお問い合わせフォームはある。自分もお問い合わせフォームの簡易的な物を作ってみましたのでファイルをアップしますね。
テンプレートエンジンとしてtwig3.0を使用しています、そのため動作環境はPHP7.2以上になります。ソースコードの可変は行って構いません、またこのソースコードの動作保証などは致しません。WEB担当者様が確認を行いバグ等があれば修正を行ってください。
尚、Composerでtwigをインストール済みという事が前提となります。また送信部分やエラー処理についてはご自身で機能の追加が必要となります。
サンプルページ
https://zip358.com/tool/request/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>お問い合わせ</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="js/common.js"></script>
<style>
.jumbotron {
background-color: #2bd4d0;
color: #fff;
}
.btn-primary {
color: #fff;
background-color: #2bd4d0 !important;
border-color: #2bd4d0 !important;
}
.input-group-text {
background-color: #2bd4d0;
border: 1px solid #2bd4d0;
}
</style>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">お問い合わせ</h1>
<p class="lead">必須項目を入力し送信ボタンを押してください。<br>DEMOのため送信はできません</p>
</div>
<div class="alert alert-warning" id="error_sendmail" role="alert">
</div>
</div>
<form action="index.php" method="POST">
<div class="container">
<div class="row">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">お名前[必須]</span>
</div>
<input type="text" name="name" class="form-control" id="name" placeholder="name" value="{{name}}">
</div>
<div class="alert alert-warning" id="error_name" role="alert">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">メールアドレス[必須]</span>
</div>
<input type="email" name="email" class="form-control" id="email" placeholder="name@example.com"
value="{{email}}">
</div>
<div class="alert alert-warning" id="error_email" role="alert">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" name="twitter_account" class="form-control" placeholder="twitter account"
aria-label="twitter account" aria-describedby="basic-addon1" value="{{twitter_account}}">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">お問い合わせ内容[必須]</span>
</div>
<select name="meun" class="form-control" id="exampleFormControlSelect1">
{% for selectop in meun_option %}
<option value="{{selectop.value}}" {{ selectop.value == selectoped ? " selected":"" }}>
{{selectop.name}}</option>
{% endfor %}
</select>
</div>
<div class="alert alert-warning" id="error_meun" role="alert">
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">コメント[必須]</span>
</div>
<textarea name="comment" rows="10" class="form-control" aria-label="コメント">{{comment}}</textarea>
</div>
</div>
<div class="row">
<footer class="blockquote-footer">
<small class="text-muted">
ご自由に記入ください。
</small>
</footer>
</div>
<div class="alert alert-warning" id="error_comment" role="alert">
</div>
<button type="submit" class="mt-2 btn btn-primary btn-lg btn-block">送信する</button>
</div>
</form>
</body>
</html><?php
session_start();
require __DIR__ . '/vendor/autoload.php';
use Twig\Environment;
use Twig\Loader\FilesystemLoader;
$loader = new FilesystemLoader(__DIR__.'/templates');
$twig = new Environment($loader);
$meun_option = json_decode(file_get_contents("js/select.json"));
$form = ["name","email","twitter_account","meun","comment"];
$data = [];
if($_POST){
foreach($_POST as $key=>$val){
$_SESSION[$key] = strip_tags($val);
}
}
if($_SESSION){
foreach($_SESSION as $key=>$val){
$_SESSION[$key] = strip_tags($val);
}
}
foreach($form as $key => $val){
$data[$val] = $_SESSION[$val]?$_SESSION[$val]:"";
}
extract($data);
print $twig->render('index.html.twig',["name"=>$name,"email"=>$email,"twitter_account"=>$twitter_account,"selectoped"=>$meun,"comment" => $comment,"meun_option"=>$meun_option]);
タグ
3.0, 358, 7.2, com, Composer, DOCTYPE, gt, html, https, lt, php, request, tool, Twig, web, www, zip, アップ, インストール, エラー, エンジン, お問い合わせ, コード, ご自身, サンプル, ゼロ, ソース, ため, デジタル, テンプレート, バグ, ファイル, フォーム, ページ, 事, 使用, 保証, 修正, 値段, 処理, 前提, 動作, 堀江貴文, 幾ら, 必要, 担当者, 機能, 無料, 物, 環境, 確認, 簡易的, 自分, 追加, 送信, 部分,
IT戦士の最終目標は上流工程からYOUTUBERメンターになっていく！？
2020.01.10
IT戦士の最終目標は上流工程からYOUTUBERメンターになっていく！？
自分はそう思っています、なぜならIT系のプログラミンスクールは
増えているものから、何れ無料でIT系プログラミンスクール同等の動画を
提供する人が出てくる。
本当はもうそういう人が登場しているけど、あまり知られてはいない？
例えばこのYOUTUBEチェンネルの方。
https://www.youtube.com/channel/UCsLPJEAgH-KUJE2WobcLZ0A
中級者から上級者向けの動画を提供していて登録者も増えていってます。
たぶん、この方は続けていけば動画のプログラミング解説だけで
安定した収入益を得ることが可能になると思います。
●これからのIT需要
いろいろな企業にIT部門が出来てくると思うので
自分が思うにITリテラシーは身につけて損はないと思います。
HTMLやCSSを勉強しなさいとは言わないけど、エクセルのVBA使いや
グーグルスプレッドシートなどを使いこなせると事務作業効率はぐっと
上がります。
今ではどんな業種でもパソコンが会社に最低1台はあって何かしらのデータが
保存されていたりします。なので、プログラミングは勉強して
損はないし高度なプログラミングが出来る場合はそれで収入を得ることも
可能になります。
唯、これから先はある一定の技術を身に着けておかないと中々、大変な時代に
なって来ているということも付け加えておきます。
ちなみにプログラミング好きな人は上流工程へ進まずに敢えて
現場主義の方もこれからは増えてくると思いますが
上流工程のお仕事の方がお給料は良いですし健康的です?
タグ
0, 2, channel-, com, css, html, IT, UCsLPJEAgH-KUJE, WobcLZ, youtube, YOUTUBER, いろいろ, こと, これ, スクール, チェン, ネル, プログラミン, プログラミング, メンター, もの, リテラシー, 上流, 上級者, 中級者, 人, 企業, 勉強, 動画, 収入, 可能, 同等, 安定, 工程, 戦士, 提供, 損, 方, 最終, 本当, 無料, 登場, 登録者, 益, 目標, 系, 自分, 解説, 身, 部門, 需要,
日本語の人工知能（機械学習）の解説動画があまりないよね。
2019.12.13
YOUTUBEでAIの日本語で解説している動画が非常に少ないよねと思っている。
これって凄く丁寧に解説した動画を何本もアップすれば
それだけで需要があるよねということは言うまでもないじゃないかな。
この頃思うのはHTMLやCSSの解説動画はあるのだけど
中級レベルの技術動画や機械学習などの日本語動画が少ないよねという事、
ほとんどプログラミングスクールに通わないと身につかないシステムに
なっているけど、これを全てYOUTUBEで解説する人が
登場すれば…。
その人はそれだけで収益を得れる可能性があると思うのです、
自分は喋りが下手なので無理だけど、何れ誰かが
そういう事を行うようになってもおかしくないと思います。
ちなみにそんな人工知能の解説を行っている人は何人か知っています。
最後に 夢のある機械学習使い方をしている動画を貼っときますね。
タグ
AI, css, html, youtube, アップ, こと, これ, システム, スクール, それだけ, プログラミング, ほとんど, レベル, 丁寧, 中級, 事, 人, 人工, 何人か, 何本, 使い方, 全て, 動画, 収益, 可能性, 夢, 学習, 技術, 日本語, 最後, 機械, 登場, 知能, 自分, 解説, 誰か, 身, 需要, 頃,
ワードプレス電光掲示板プラグインを作りました。
2019.12.05
電光掲示板（お知らせ）のプラグイン取扱に関して記載します。
プラグインに関してはワードプレス5.2以降を推奨としテーマファイル（外観）のheader.phpのbody直下に下記の記述が存在しない場合は追加記述を
お願いいたします。
<?php wp_body_open();?>尚、プラグインのソースコードはご自由に変更頂き二次配布も構いませんが
ひとつ注意事項があります。参照した記事にリンクを貼ってください、
なお、事前の連絡等入りません。
電光掲示板（お知らせ）のソースコードは下記になります。
現在、テキストはHTMLタグを許していますので、いろいろと自由に
変更することが可能かと思います。
ちなみにこういった電光掲示板みたいな流れる仕様のコードは
インターネットの初期のころは多く見られましたが
このごろは全然、見なくなりましたね。。。
CSSの記述に関してはとくめいさんの記述を使用させて頂きました。
https://creatorclip.info/2014/06/css3-electric-bulletin-board/
とくめいさんも同じようなことを記事に記載しておりますが
自分もそのように感じました。
とくめいさんへ断りもなく使用してすみません、
Twitterで連絡しようかなと思ったのですが、それもなんだかと思い
勝手ながらこのような手段を取りました。
お知らせ（電光掲示板）のダウンロードは下記になります。
下記のファイルを解凍しワードプレスのプラグイン領域にフォルダごと
アップロードしプラグインを有効にするとご使用頂けます。
https://zip358.com/plugin/Z-Electric-bulletin-board.zip
<?php
/*
Plugin Name: Z-Electric-bulletin-board
Plugin URI: https://zip358.com/plugin/Z-Electric-bulletin-board.zip
Description: お知らせ
Author: taoka toshiaki
Version: 1.0
Author URI: https://zip358.com/
*/
add_action( 'wp_head', function() {
$color = get_option('ZEBB_color')?get_option('ZEBB_color'):"ffffff";
$cssdata ="
<style>
/* =====================
電光掲示板
======================= */
.ledText {
overflow: hidden;
position: relative;
padding:5px 0;
color: #$color;
font-size: 60px;
font-weight: bold;
background: #333333;
}
/* CSS3グラデーションでドット感を出す */
.ledText:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
background-size: 2px 2px;
z-index: 10;
}
/* CSS3アニメーションでスクロール */
.ledText span {
display: inline-block;
white-space: nowrap;
padding-left: 100%;
-webkit-animation-name: marquee;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 15s;
-moz-animation-name: marquee;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 15s;
animation-name: marquee;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 15s;
}
@-webkit-keyframes marquee {
from { -webkit-transform: translate(0%);}
99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
from { -moz-transform: translate(0%);}
99%,to { -moz-transform: translate(-100%);}
}
@keyframes marquee {
from { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}
</style>
";
print $cssdata;
});
add_action("wp_body_open",function(){
$text = get_option('ZEBB_text')?get_option('ZEBB_text'):"";
if($text)print '<p class="ledText"><span>'.$text.'</span></p>';
});
add_action('admin_menu','Z_Electric_bulletin_board_set');
function Z_Electric_bulletin_board_set(){
add_options_page(
'zip358.com：プラグイン',
'電光掲示板設定',
'administrator',
'Z_Electric_bulletin_board',
function(){
if(isset($_POST["ZEBB_color"]) or isset($_POST["ZEBB_text"])){
$color = preg_match("/[a-zA-Z0-9]*/",$_POST["ZEBB_color"])?$_POST["ZEBB_color"]:"ffffff";
update_option('ZEBB_color', wp_unslash($color));
$text = $_POST["ZEBB_text"];
update_option('ZEBB_text', wp_unslash($text));
}
?>
<form method="post" action="">
<h2>電光掲示板設定</h2>
color code #<input type="text" style="width:350px" name="ZEBB_color" value="<?=get_option('ZEBB_color')?get_option('ZEBB_color'):""?>" placeholder="f7f7f7"><br>
text <input type="text" style="width:350px" name="ZEBB_text" value="<?=get_option('ZEBB_text')?get_option('ZEBB_text'):""?>" placeholder="文字を記入してください"><br>
テキスト文字を未入力にすると電光掲示板が表示されません
<?php submit_button(); ?>
</form>
<?php
}
);
}
タグ
5.2, body, css, gt, header, html, lt, open, php, wp, いろいろ, インターネット, お知らせ, お願い, コード, こと, ごろ, ころ, ソース, タグ, テーマ, テキスト, トク, ひとつ, ファイル, プラグイン, プレス, メイ, リンク, ワード, 下記, 事前, 事項, 二, 仕様, 使用, 初期, 参照, 取扱, 可能, 場合, 変更, 外観, 存在, 推奨, 掲示, 注意, 現在, 直下, 自由, 記事, 記載, 記述, 追加, 連絡, 配布, 電光,
PHP非同期の考え方サンプル。
2019.11.12
非同期の考え方サンプルです。
さて非同期ってなんでしょうか？
非同期とは次から次へと仕事をお願いする状態。
仕事量が重いと結果が返るまで時間がかかります。
なので、Aという仕事が重く、B、Cという仕事が楽な場合は
A、B、Cという仕事を順番に頼んでもAの結果はBの後やCの後に
結果が返ってきます。
逆に同期処理とは何か？
A、B、C の順に仕事を頼むと、Aの仕事が終えた後にB、Cと仕事を
行います。
非同期＝並列処理と考えると良いかも。
同期処理＝逐次処理と考えると良いかも。
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Document</title>
<script>
$(function(){
$("#btn").on("click",function(){
test();
return false;
})
});
function test(){
var data = $("#frm").serialize();
$.ajax({
type: "post",
url: "url.php",
data: data,
dataType: "json",
success: function (response) {
console.log(response);
}
});
}
</script>
</head>
<body>
<a href="#" id="btn">クリック</a>
<form id="frm">
<input type="text" name="test1">
<input type="text" name="test2">
<input type="text" name="test3">
</form>
</body>
</html><?php
//url.php
$data = [];
if(!is_null($_POST)){
foreach($_POST as $key=>$val){
$data[$key] = $val;
}
print(json_encode($data));
}else{
print(0);
}
タグ
65, 8, charset, com, DOCTYPE, en, gt, head, html, lang, lt, meta, name, php, quot, UTF-, VHlW, WPUDY, youtube, お願い, サンプル, 並列, 仕事, 何, 処理, 同期, 場合, 後, 時間, 次, 状態, 結果, 考え方, 逆, 順, 順番,
Pythonコード：demo
2019.11.05
#!/usr/local/bin/python3
# coding:utf-8
import os
import sys
import MeCab
import gensim
import markovify
import unicodedata
model = gensim.models.KeyedVectors.load_word2vec_format('/var/www/html/model.vec', binary=False)
f = open('merosu.txt')
tagger = MeCab.Tagger("-Owakati")
tagger.parse('')
text0 = tagger.parse(f.read())
text1 = text0
text0 = text0.replace('\n','')
text0 = text0.replace('\r','')
text1x = text0.split(" ")
text2 = []
try:
for item in text1x:
if item.strip():
results = model.most_similar(positive=[item],topn=2)
#"print(results)
for val1 in results:
text2.append(val1[0] + "\n")
#
# print (text1)
# print (" ".join(text2))
model_a = markovify.Text(text1 + "\n")
print(str(model_a.make_sentence()).replace(' ',''))
model_b = markovify.Text(" ".join(text2))
print(str(model_b.make_sentence()).replace(' ',''))
model_combo = markovify.combine([model_a, model_b], [1, 1])
print(str(model_combo.make_sentence()).replace(' ',''))
except Exception as e:
print("動作エラー", e.args)
pass
タグ
-Owakati, 'merosu, 0, １, 2, ３, 39, 8, bin, binary, coding, demo, false, format, gensim, html, import, KeyedVectors, load, local, markovify, Mecab, model, models, open, OS, parse, Python, quot, read, replace, sys, tagger, Text, txt, unicodedata, usr, UTF-, var, Vec, Word, コード,
高知県のダム貯水率をグラフ化してみた。
2019.09.21
高知県のダム貯水率をグラフ化してみた。
親戚にダムに勤めている人がいるのがきっかけで貯水率って
HPで表示させているのかなという事で調べてみました。
結果、かなり古いデザインサイトが現れた。
何とも懐かしい気持ちになりました。
そこでこの表からグラフ化してみたいなとか思って
ゴニョゴニョ作ってみた。
ちなみにソースコードが変わると
抜き取り出来なくなります。
追記：やはり変更されていました2へ続く
ソースコードを貼っときます。
ajaxとPHPを使用してます、XPathで貯水率だけ抜き取ってます。
サンプルサイト
https://zip358.com/tool/demo6/index.html
<?php
$html = file_get_contents("高知県のダム情報のURL");
$html = mb_convert_encoding($html,"UTF-8","SJIS");
$dom = new DOMDocument();
$html = mb_convert_encoding($html, "HTML-ENTITIES", 'UTF-8');
@$dom->loadHTML($html,LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
$ary=array(
"nagase",
"kamaidani",
"kagami",
"sameura",
"kirimi",
"sakamoto",
"oodo",
"nakasugawa",
"iburigawa"
);
for($i=3;$i<=11;$i++){
foreach ($xpath->query("/html/body/form/div[2]/table/tr/td/table/tr[$i]/td[7]") as $node) {
$r[] = preg_replace("/x{00a0}/u","",$node->textContent);
}
}
foreach ($r as $key => $value) {
$obj[$ary[$key]] = $value;
}
print json_encode($obj);$(function(){
dam();
//setInterval(dam,9999)
});
function dam(){
$.ajax({
url : './dam.php',
dataType : 'json',
success : function(obj){
$("#nagase").attr( "style","width:"+ parseInt(obj.nagase) +"%");
$("#kamaidani").attr( "style","width:"+ parseInt(obj.kamaidani) +"%");
$("#kagami").attr( "style","width:"+ parseInt(obj.kagami) +"%");
$("#sameura").attr( "style","width:"+ parseInt(obj.sameura) +"%");
$("#kirimi").attr( "style","width:"+ parseInt(obj.kirimi) +"%");
$("#sakamoto").attr( "style","width:"+ parseInt(obj.sakamoto) +"%");
$("#oodo").attr( "style","width:"+ parseInt(obj.oodo) +"%");
$("#nakasugawa").attr( "style","width:"+ parseInt(obj.nakasugawa) +"%");
$("#iburigawa").attr( "style","width:"+ parseInt(obj.iburigawa) +"%");
$("#nagase").attr( "aria-valuenow",parseInt(obj.nagase));
$("#kamaidani").attr( "aria-valuenow",parseInt(obj.kamaidani));
$("#kagami").attr( "aria-valuenow",parseInt(obj.kagami));
$("#sameura").attr( "aria-valuenow",parseInt(obj.sameura));
$("#kirimi").attr( "aria-valuenow",parseInt(obj.kirimi));
$("#sakamoto").attr( "aria-valuenow",parseInt(obj.sakamoto));
$("#oodo").attr( "aria-valuenow",parseInt(obj.oodo));
$("#nakasugawa").attr( "aria-valuenow",parseInt(obj.nakasugawa));
$("#iburigawa").attr( "aria-valuenow",parseInt(obj.iburigawa));
$("#nagase").text(obj.nagase + "%");
$("#kamaidani").text(obj.kamaidani + "%");
$("#kagami").text(obj.kagami + "%");
$("#sameura").text(obj.sameura + "%");
$("#kirimi").text(obj.kirimi + "%");
$("#sakamoto").text(obj.sakamoto + "%");
$("#oodo").text(obj.oodo + "%");
$("#nakasugawa").text(obj.nakasugawa + "%");
$("#iburigawa").text(obj.iburigawa + "%");
},
error: function(obj){
alert("error");
}
});
}<!DOCTYPE html>
<html lang="en">
<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">
<title>高知県のダム貯水率</title>
<script src="../jquery/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<script src="./js/dam.js"></script>
<style>
body{
background-color: #3e4654;
color: aliceblue;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<main role="main" class="flex-shrink-0">
<div class="container">
<table class="table table-dark">
<tr>
<td style="width:15%">
<p>永瀬ダム</p>
</td>
<td style="width:85%">
<div class="progress" style="width:100%">
<div id="nagase" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>
</td>
</tr>
<tr>
<td style="width:15%">
<p>鎌井谷ダム</p>
</td>
<td style="width:85%">
<div class="progress">
<div id="kamaidani" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>
</td>
</tr>
<tr>
<td style="width:15%">
<p>鏡ダム</p>
</td>
<td style="width:85%">
<div class="progress">
<div id="kagami" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>
</td>
</tr>
<tr>
<td style="width:15%">
<p>早明浦ダム</p>
</td>
<td style="width:85%">
<div class="progress">
<div id="sameura" class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>
</td>
</tr>
<tr>
<td style="width:15%">
<p>桐見ダム</p>
</td>
<td style="width:85%">
<div class="progress">
<div id="kirimi" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>
</td>
</tr>
<tr>
<td style="width:15%">
<p>坂本ダム</p>
</td>
<td style="width:85%">
<div class="progress">
<div id="sakamoto" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>
</td>
</tr>
<tr>
<td style="width:15%">
<p>大渡ダム</p>
</td>
<td style="width:85%">
<div class="progress">
<div id="oodo" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>
</td>
</tr>
<tr>
<td style="width:15%">
<p>中筋川ダム</p>
</td>
<td style="width:85%">
<div class="progress">
<div id="nakasugawa" class="progress-bar progress-bar-striped progress-bar-animated bg-dark" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>
</td>
</tr>
<tr>
<td style="width:15%">
<p>以布利川ダム</p>
</td>
<td style="width:85%">
<div class="progress">
<div id="iburigawa" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
</div>
</td>
</tr>
</table>
</div>
</main>
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">©zip358.com</span>
</div>
</footer>
</body>
</html>タグ
2, 358, 6, 8, ajax, com, contents, convert, demo, encoding, file, GET, HP, html, https, index, lt, mb, php, SJIS, tool, url, UTF-, XPath, zip, かなり, きっかけ, グラフ, コード, ゴニョゴニョ, サイト, サンプル, ソース, そこ, ダム, デザイン, 事, 人, 何, 使用, 変更, 情報, 気持ち, 結果, 表, 表示, 親戚, 貯水, 追記, 高知県,
Tera Termで自動ログインする方法：秘密鍵有り無し対応
2019.09.14
秘密鍵有り自動ログイン
connect 'ホスト名:22 /ssh /2 /auth=publickey /user=ユーザー名 /passwd=パスワード /keyfile=秘密鍵'
wait '#'
sendln 'ls'
sendln 'cd /var/www/html'
秘密鍵無し自動ログイン
connect 'ホスト名:22 /ssh /2 /auth=password /user=ユーザー名 /passwd=パスワード'
wait '#'
sendln 'ls'
sendln 'cd /var/www/html'
上記の内容をテキストファイルにコピペしてホスト名、ユーザー名、パスワード、秘密鍵（場所）をそれぞれ変更し任意の名前で保存。
保存後、拡張子をTTLへ変更。
Tera TermでTTLを呼び出すようにする方法に
ついては割愛します（ググってください）。
ちなみにこの記事、過去に書いています。
（過去記事は別のブログに移転しています）
タグ
2, 22, auth, cd, connect, html, keyfile, ls, nbsp, passwd, password, publickey, sendln, SSH, Tera, Term, TTL, user, var, wait, くだ, コピペ, それぞれ, テキスト, パスワード, ファイル, ホスト, ユーザー, ログイン, 上記, 任意, 保存, 内容, 割愛, 名前, 場所, 変更, 対応, 拡張子, 方法, 有り無し, 秘密, 自動, 鍵,
画像をタイル状に分離して一括ダウンロードさせるジェネレーター
2019.09.07
画像をタイル状に分離して一括ダウンロードさせるジェネレーターを
作ってみました。画像は自動的に削除されます？
あることをすれば他人の画像がアップした画像も削除されます。
ちなみに一括ダウンロードbuttonを押すと画像がサーバー上に保存され
強制ダウンロードが始まります。
動作はブラウザChromeオンリーです。
また一括ダウンロードを押すと複数のファイルを一括ダウンロードするか
どうかの問い合わせが表示されますので「はい」を
選択してください。尚、30秒以内に保存されていないファイルは
次々と削除されます。
サイトはこちらから
https://zip358.com/tool/demo5/index-14.html
ソースコードは下記になります。
ページ（base64生成＋画像ダウンロード処理）
追記：zipファイルにより格納するように処理を変更しました。
参考にしたサイト：https://ex1.m-yabe.com/archives/4215
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>画像分離してダウンロード：画像分離ジェネレーター</title>
<meta name="description" content="画像分離してダウンロード：画像分離ジェネレーター">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../jquery/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-71682075-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-71682075-1');
</script>
<style>
body{
background-color: black;
color: antiquewhite;
}
img{
margin:10!important;
padding:10!important;
}
#container{
width: 100%;
}
#container img{
margin:10px;
}
</style>
</head>
<body>
<span id="bat"></span><a id="dl"></a>
<input class="form-control" type="file"></input>
<div id="container"></div>
<script>
$(function(){
$("[type=file]").on("change",function(){
$('#container').html("");
$("#bat").html("");
console.log($(this));
if(!$(this).prop('files')[0].type.match(/[png|jpg|jpge|gif]/)){
alert("ファイル形式エラー");
return false;
}
var canvas = document.createElement('canvas');
var reader = new FileReader();
reader.onload = function(event) {
var image = new Image();
image.onload = function() {
sprite = {width:50,height:50};
canvas.width = sprite.width;
canvas.height = sprite.height;
var ctx = canvas.getContext("2d");
var x = 0;
for(var i=0; i*sprite.height<image.height; i++){
for(var j=0; j*sprite.width<image.width; j++){
ctx.drawImage(
image,j*sprite.width,i*sprite.height,
sprite.width,sprite.height,
0,0,
sprite.width,sprite.height
);
var spriteElement = new Image;
spriteElement.src= canvas.toDataURL();
$('#container').append(spriteElement);
}
}
$("#bat").html("<input type='button' value='一括ダウンロード' onclick='bat_img()'>");
}
image.src = event.target.result;
}
reader.readAsDataURL($(this).prop('files')[0]);
});
});
function bat_img(){
var data = [];
for(var i=0; i< $("img").length;i++){
data.push({"base64":$("img").eq(i).attr("src"),"no":i});
}
$.ajax({
type: 'POST',
url: 'bat_img.php',
data:{"obj":data},
dataType: 'json'
}).done(function(obj){
if(obj[obj.length - 1 ].chk=="ok"){
var link = document.getElementById("dl");
link.href = obj[obj.length - 1].zippath;
link.download = "zipimg.zip";
link.click();
var data2 = [];
for(var i = 0 ; i < obj.length ; i++){
if(i==0){
data2.push({Path:obj.path,no:obj.no,t:obj.t,"zipimgpath":obj[obj.length - 1].zippath});
}else{
data2.push({Path:obj.path,no:obj.no,t:obj.t});
}
}
var del = function(){
$.ajax({
type: 'POST',
url: './bat_del.php',
data:{"obj":data2},
dataType: 'json'
});
};
del();
}
});
}
</script>
</body>
</html><?php
$i=0;
foreach($_POST["obj"] as $key=>$val){
$b64 = base64_decode(str_replace("data:image/png;base64,","",$val["base64"]));
$no = (int)$val["no"];
$t = time();
$Path = "./bat_img/tmp/$t-$no.png";
$re = @file_put_contents($Path,$b64);
if($re){
$obj[$i]["chk"] = $re?"ok":"ng";
$obj[$i]["name"] = "$t-$no.png";
$obj[$i]["path"] = $Path;
$obj[$i]["no"] = $no;
$obj[$i]["t"] = $t;
$i++;
}
}
$obj[--$i]["zippath"] = zipfile($obj);
print json_encode($obj);
function zipfile($obj){
$ZipFiles = function($obj){
foreach($obj as $key=>$val){
$path[] = $val["path"];
}
return $path;
};
$Zip_Files = $ZipFiles($obj);
$zipFileName = time().'_zipimg.zip';
set_time_limit(0);
$zip = new ZipArchive();
$zipTmpDir = './tmp/zip/';
$result = $zip->open($zipTmpDir.$zipFileName, ZIPARCHIVE::CREATE | ZIPARCHIVE::OVERWRITE);
if( $result !== true ){ //エラー処理
echo 'error!';
exit();
}
foreach ($Zip_Files as $key=>$filepath) {
$filename=basename($filepath);
// ZIP圧縮するファイルを追加
// ファイルパス・ファイル名としないと圧縮ファイルを解凍するとフルパスになる
$zip->addFile($filepath,$filename);
}
//ZIP 出力
$zip->close();
return $zipTmpDir.$zipFileName;
}
<?php
unlink($_POST["obj"][0]["zipimgpath"]);
foreach($_POST["obj"] as $key=>$val){
$Path = $val["Path"];
$no = (int)$val["no"];
$t = (int)$val["t"];
$cmd = function(){
foreach(glob("./bat_img/tmp/*") as $file_name){
$command = "rm -rf " . realpath($file_name);
exec($command);
}
};
if(pathinfo($Path)["extension"]=="png" and preg_match("/bat_img\/tmp/",$Path)){
if(is_file($Path)){
sleep(30);
unlink($Path);
}else{
$cmd();
}
}else{
$cmd();
}
}
タグ
１, 14, 30, 358, 4, 5, 64, archives, base, button, Chrome, com, demo, ex, html, https, index, m-yabe, tool, www, zip, アップ, オンリー, コード, こちら, こと, サーバー, サイト, ジェネレーター, ソース, タイル, ダウンロード, はい, ファイル, ブラウザ, ページ, 一括, 下記, 他人, 保存, 処理, 分離, 削除, 動作, 参考, 問い合わせ, 変更, 強制, 格納, 生成, 画像, 表示, 複数, 追記, 選択,
変なコードを書いてしまった。それはいつものこと（笑）
2019.08.10
変なコードを書いてしまった。
PHPにstr_repeatという関数が存在しているのだけど
何のために使用するのか全然わからない。関数の内容は任意の文字を
指定回数、繰り返した文字列として返してくれるというものです。
試しにその関数を使用し変なコードを書きました。
茶目っ気ですので…。これがPCに負担がかかるとか
無限ループとかの処理にすると御縄なんでしょうけど・・・。
サンプルコードはこちらから
https://zip358.com/tool/demo5/index-11.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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="../jquery.tubular.1.0.1/js/jquery.tubular.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.tubular.1.0.1/css/screen.css">
<script>
$('document').ready(function() {
var options = {
videoId: '760lRwLKFF0',
mute: true,
};
$('#bgmovie').tubular(options);
});
</script>
<style>
body{
background-color: #000;
color: #fff;
font-size: 80px;
line-height: 80px;
}
p{
color: #38a9c5;
}
</style>
</head>
<body>
<div id="bgmovie">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<?php
$str = str_repeat("高知 よさこい 踊る,",7);
var_dump(str_getcsv($str));
?>
<p class="oshite" data-oshite="<?=$str?>"style="text-decoration: underline">▼おして知るべし</p>
※おして知るべしをクリックすると7ウィンドウ開きますよ！！
<?php
foreach(str_getcsv($str) as $val){
?>
<?php
}
?>
</div>
<script>
$(function(){
$(".oshite").on("click",function(){
let oshite = $(this).attr("data-oshite").split(",");
for(var i = 0 ; i < oshite.length ; i++){
if(oshite[i]!==""){
window.open("https://twitter.com/search?src=typed_query&q=" + encodeURIComponent(oshite[i]));
}
}
});
});
</script>
<script src='https://vjs.zencdn.net/7.6.0/video.js'></script>
</body>
</html>タグ
--, 11, 358, 5, 7, 8, ９, class, com, demo, DOCTYPE, endif, gt, html, IE, if, index, lt, lt-ie, no-js, PC, php, repeat, STR, tool, zip, いつも, コード, こちら, こと, これ, サンプル, それ, ため, もの, ループ, 任意, 何, 使用, 内容, 処理, 回数, 変, 存在, 指定, 文字, 文字列, 無限, 縄, 茶目っ気, 負担, 関数,
TinyMCE 5.0でwindowManager.openUrl使用してコードの送受信。
2019.08.03
TinyMCE 5.0の記事が好評だったので前回に続き、windowManager.openUrl使用してコードの送受信の内容を記載します。あくまでもサンプルコードです。プログラムなので他にもやり方はあると思います。前回の記事に勘どころは記載していますので割愛します。尚、自分は英語がダメダメですが幸いコードを読む力はある程度あるので何とかなりました。サンプルコードを記載しますので解析してみてください。
PHP＆HTMLコード
<!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">
<textarea name="htmlcode1" class="form-control">
<?php
echo urldecode($_GET["sdata"]);
?>
</textarea>
<input type="button" name="submitbtn" value="htmlcode-submit"class="btn btn-primary">
</form>
<script>
var chageJson = function(data) {
console.log(data);
var JsonData = [];
for (i = 0; i < data.length; i++) {
if(/htmlcode/.test(data[i].name)){
data[i].value = encodeURIComponent(data[i].value);
}
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>jsコード
(function() {
tinymce.create('tinymce.plugins.btxt', {
init : function( ed, url) {
//console.log(ed);
act = function(e)
{
//console.log("e=",encodeURIComponent(e.selection.editor.getContent()));
ed.windowManager.openUrl(
{
type: 'panel',
title: 'HTMLCODE',
url:url + "/btxt.php?sdata=" + encodeURIComponent(e.selection.editor.getContent()) ,
onMessage:function(api, details){
console.log(e);
//console.log('htmlcode1',decodeURIComponent(details.data.htmlcode1));
// var editorInstance = tinymce.editors[0];
e.selection.editor.setContent(decodeURIComponent(details.data.htmlcode1));
}
}
);
};
ed.ui.registry.addButton('btxt',{
title : 'htmlcode',
text: 'htmlcode',
onAction:function(){act(ed)}
});
},
getInfo : function() {
return {
longname : 'tinymce.plugins.btxt',
author : 'taoka',
authorurl : 'https://zip358.com',
infourl : 'https://zip358.com',
version : '1.0'
};
}
});
tinymce.PluginManager.add('btxt', tinymce.plugins.btxt);
})();タグ
--, 5.0, 7, 8, ９, class, DOCTYPE, endif, gt, html, IE, if, lt, lt-ie, no-js, openUrl, php, quot, TinyMCE, windowManager, コード, サンプル, ダメダメ, プログラム, やり方, 他, 使用, 内容, 前回, 割愛, 力, 勘どころ, 好評, 自分, 英語, 解析, 記事, 記載, 送受信,
jsのクリックイベントの謎？？
2019.06.22
javaScriptとjqueryのクリックイベントの挙動が違うのは
わかったのですが・・・。
これは結構奥が深い気がします。
See the Pen jsのクリックイベントの謎？？ by taoka (@taoka-toshiaki) on CodePen.0
タグ
0, 265, BY, codepen, default, embed, gt, hash, Height, href, html, ID, io, javascript, jquery, JS, lt, ON, Pen, QXprJX, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, イベント, クリック, これ, 奥, 挙動, 気, 謎,
文字の置き換え と コールバック
2019.06.08
お蔵入りしたコードです。文字の置き換えとコールバック関数です。
置換する際に、それぞれ違う文字に置き換えて表示したいなどに
使用すると便利かなと思います。
See the Pen 文字の置き換え と コールバック by taoka (@taoka-toshiaki) on CodePen.0
タグ
0, 265, BeXapO, BY, codepen, default, embed, gt, hash, Height, href, html, ID, io, lt, ON, Pen, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, お蔵入り, コード, コール, それぞれ, バック, 使用, 便利, 文字, 置換, 表示, 関数, 際,
Canvasで円がぐるぐる回る。
2019.03.09
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="ctx" ></canvas>
<script>
"use strict";
let x = 0,y = 0;
let xs = 300,ys = 300;
let xc = 1,yc = 1;
let ctx = document.querySelector("#ctx");
let canvas;
ctx.width = window.screen.width;
ctx.height = window.screen.height;
if(ctx.getContext)
{
canvas = ctx.getContext("2d");
setInterval(draw,77);
}
function draw(){
canvas.beginPath();
canvas.fillStyle = "#3399ff";
canvas.arc(x,y,35,0,Math.PI*2,true);
canvas.globalCompositeOperation = "xor";
canvas.fill();
x =((Math.sin (xc) * xs)) + 500;
y =(Math.cos(yc) * ys) + 500;
console.log(x + ":" + ctx.width);
console.log(y + ":" + ctx.height);
if(x < 0 || x > ctx.width)
{
xs*=-1;
}
if(y < 0 || y > ctx.height)
{
ys*=-1;
}
if(x<0)
{
x=0;
}
if(y<0)
{
y=0;
}
if(x > ctx.width)
{
x=ctx.width;
}
if( y > ctx.height)
{
y=ctx.height;
}
xc+=1
if(xc>360)
{
xc=0;
}
yc+=1
if(yc>360)
{
yc=0;
}
}
</script>
</body>
</html>Canvasでぐるぐる円を廻す。
ガラクタコードが少しあります、最初違うコードを書いていたので
これを可変していろいろお試しください。
https://zip358.com/tool/demo5/js/index-3.html
タグ
0, １, 300, body, Canvas, ctx, DOCTYPE, document, gt, head, Height, html, ID, let, lt, querySelector, screen, script, strict, use, Width, win, window, xc, xs, yc, YS, 円,
javascriptでEVENT処理レベル1
2019.03.09
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" class="zyezyezye">
<script>
"use strict";
let zyezyezye = document.querySelector(".zyezyezye");
zyezyezye.addEventListener("input",()=>{
console.log(">おいら>>" + zyezyezye.value);
if(zyezyezye.value=="じぇじぇじぇ")
{
console.log("おいら>>ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!nおいら>>じぇじぇじぇn<<ストーカーかよ!!");
}
});
</script>
</body>
</html>jqueryばかり書いているとこういう書き方、書かなくなる。
jqueryから世の中はjavascriptやvue.jsなどへシフトしているそうだけど、未だにjqueryばかり書いている自分です。なれないといけないと思いつつ！？
別のことに力を注いでいる毎日です。
ちなみに「じぇじぇじぇ」は方言で驚きを指す言葉だとか。
タグ
１, addEventListener, body, class, console, DOCTYPE, document, EVENT, gt, head, html, if, input, javascript, let, log, lt, querySelector, script, strict, Text, type, use, value, zyezyezye, おいら, レベル, 処理,
jQuery独自プラグイン基本サンプル2
2019.01.19
忘れやすい自分のためにメモとして残しときます。
(function($){
$.fn.smp = function (options) {
var config = {
text:"おいら"
};
var cfg = $.extend({}, config, options);
cfg.text = cfg.text + "のお金";
return $(this).html(cfg.text);
};
})(jQuery);
$("#hoge1").smp({text:"ぼく"});
$("#hoge2").smp();タグ
１, 2, cfg, config, extend, fn, function, hoge, html, jquery, options, return, smp, Text, this, var, おいら, お金, サンプル, ため, プラグイン, ぼく, メモ, 基本, 自分,
jQueryの基礎1
2018.11.11
世の中、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, うち, これ, ご参考, デモ, トイウコトデ, プログラム, ページ, 世, 中, 作成, 内容, 勉強, 原点, 可能性, 回帰, 基礎, 復習, 意味合い, 掲載, 毎週, 気, 自分, 言語, 記入, 追記,
超それ！機械学習、 TensorFlow！！
2017.09.02
機械学習でどんな事出来るの？
勝手に勉強してくれるお利口さんな機械学習もあるけれど
オープンソースで提供している機械学習ってのは大体、前もって
答えを与えておいて、そこから判別するものがある。
今回、某検索サイトが提供しているTensorFlowでどんな事が出来るのだろうと
思い、ネットサーフィンしていたら、面白い記事を見つけました。
なんと、Raspberry PiとTensorflowをつかってきゅうりの仕分けができるというシステムを
開発した人がいました。この記事を読んでまさに「超それ！」
https://cloudplatform-jp.googleblog.com/2016/08/tensorflow_5.html
自分が思い描いていた機械学習でできることだと！
いやホントに凄いな、機械学習っていうのは
これからの花形になっていく存在だとつくづく思ってしまいました。
これか先、AIを作る層、AIライブラリやAI、APIを使う層、そしてAIを使う層に
別れていくだろうと思います。じぶんみたいな凡人開発者はAIを作る層には入れないですが、
AIライブラリやAI、APIなどを活用できるようにしないと、
今後、この業界で生き残っていくのは難しいじゃないかなと思っています。
なぜ、そう痛感しているのかと言えば
機械学習で検索すると数年前まではあまりヒットしなかったのに
去年あたりからな。いろいろな人が技術をオープンで公開し始めています。
この動きは止まることはないのではないかと思うのが一番の理由です。
ちなみに自分はあるサーバでTensorflowをインストールして動かしています。
まだ、テストを動かして遊んでいるぐらいで、じぶんでゴニョゴニョ開発しているわけではないです。
開発する前にやらないといけない事があるので、そちらが終わってから
Tensorflowコードをパクりながら学習しようかなと考えています。
https://www.youtube.com/watch?v=4HCE1P-m1l8
ちなみにtensorflowの公開をしますとか、言っていてからもう一年ぐらい
経過しているのかもしれません。すみません、じぶんは阿呆なので
もう少し理解するまでお時間が必要です。噛み砕いて提供できるまでには
結構、時間が必要かもしれません。
じぶんを機械学習したいこの頃でした・・・(´・ω・｀)。
タグ
08, 2016, 5, AI, API, cloudplatform-jp, com, googleblog, html, https, Pi, Raspberry, tensorflow, オープン, お利口, きゅうり, けが, こと, これ, サーフィン, サイト, システム, ソース, そこ, それ, ネット, ホント, もの, ライブラリ, 事, 人, 今回, 仕分, 先, 判別, 勉強, 勝手, 大体, 存在, 学習, 層, 提供, 検索, 機械, 答え, 自分, 花形, 記事, 開発,
AMP (Accelerated Mobile Pages)HTMLしなさいと勧められる。
2017.07.12
AMP (Accelerated Mobile Pages)HTMLしなさいと勧められるので
WordPressのAMPを導入しました。
さて、「AMPってなんでですかー？」って事だけど
簡単に言えばグーグルが進めているモバイル（スマホ）の表示速度を
改善させるあらたなHTMLなどの記述を指すみたい。
ちなみにアクセルレイテッド モバイル ページと読むそうですよ。
アクセルレイテッドとは加速を意味するものだとか、、。
ほぼHTMLとCSSだけしか許さないので
当たり前のごとく表示速度は速いですが、javascriptの記述に
制限があるので、殆どのWordPressのプラグインjsは動かないと
言っても良いです。
※ちなみにAMPに広告を表示させたい場合などは
プラグインを若干、編集しないといけない場合があります、
また、そのままJSをコピペで貼っても表示されないので
AMP用の記述などが必要になりますが、恐らくAMPじわじわ浸透していく
だろうなぁと感じます。最終的にJSなどがサーバサイドで動かすように
なるじゃないのかなぁと思っています（今はクライアント側で動いているけど）。
タグ
Accelerated, amp, css, html, javascript, JS, mobile, Pages, WordPress, アクセル, カー, グーグル, コピペ, じわ, スマホ, テッド, プラグイン, ページ, もの, モバイル, レイ, 事, 制限, 加速, 場合, 導入, 広告, 当たり前, 必要, 意味, 改善, 殆ど, 用, 簡単, 編集, 若干, 表示, 記述, 速度,