@Blog
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
htmlとcssとjavascript-初学フロント側-No.１#code
2022.11.07
おはようございます。今年もあと２ヶ月もないわけですよね早いものですね😮
htmlとcssとjavascript-初学フロント側-No.１という動画をYOUTUBEにUPしたのが昨日の９時のこと。これで理解出来るか、どうか分からない。解説もない教えもない、唯コードを書いているところを見せてるだけです。ソースコードは下記のサイトから参照できますが、次の動画作成のためにデザインや処理が変わっていたり、動作しなくなってたりするので注意が必要です。
https://358tool.com/sample-site/
自分はHtmlやcssはあまり覚えていないのですが、分かるのはそれなりに基本ベースがあるからだと思ってます。今からHtmlやcssを学ぶ人は全部を覚えようとはせずに、手を動かしてコードを書くことから始めて下さい。そのうち基本ベースは身につくことになると思います。
因みに自分が書いているclassの名前付けなどの書き方は駄目な書き方ですので、そういう所、お仕事として書く場合は会社によってキマりなんかが有りますので、そういう事まで知りたい人はこちらの動画を参照ください。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, 2, 358, ９, cl, Code, com, css, html, https, javascript, no, sample-site, tool, UP, youtube, うち, コード, こと, これ, サイト, ソース, それなり, ため, デザイン, ところ, フロント, ベース, もの, 下記, 人, 今, 今年, 作成, 全部, 処理, 初学, 動作, 動画, 参照, 基本, 必要, 手, 昨日, 次, 注意, 理解, 自分, 解説, 身,
わらわらわら（ｗｗｗ）をのけました。キャッシュこワい🙄
2022.08.23
こんにちは、今日は朝少しサーバーをイジって朝食後、外出しておりました。
まだ、不安定ですがwwwを除けてzip358.comに戻しました。除けた理由は気まぐれです、DNSのキャッシュが意地悪していて切り替えに時間を費やしてしまいましたが、一応無事に変更した形になります。
これが仕事だったら嫌だなって感じます、数ヶ月使用しているとキャッシュがDNSサーバーに蓄積されているので、その切替は各サーバー頼み。特に大企業じゃない限りDNSサーバーのキャッシュを削除してくれないでしょうね。
WEBサイトやWEBアプリを扱っている企業の担当者にとってサイト移行は胃が痛む仕事かと思います。お客様には見えないと言われたり上司からは早く見えるようにしてとか言われたりする場合もありますからね。因みに自分は徐々に移行する方法でサイト移行を済ませます。まずはDBを移行し、その後、ファイルなどを移行しホストを変えてみて上手く動作しているか確認後、IPアドレスを変更するという形です。
尚、メールサーバは大体、以前のサーバーを使用して頂けるならそうして貰います。
零細企業の場合、インフラからバックエンド、フロント全てに関わることもあるので良い経験になります。良い経験ですが大変です、言うがやすし行うは難しです。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
358, com, db, DNS, web, www, zip, アプリ, いし, お客様, キャッシュ, これ, サーバー, サイト, ファイル, ホスト, ワ, ワラ, 上司, 不安定, 今日, 仕事, 企業, 使用, 削除, 動作, 場合, 変更, 外出, 少し, 形, 後, 意地悪, 担当者, 数, 方法, 時間, 朝, 朝食, 気まぐれ, 無事, 理由, 確認, 移行, 胃, 自分, 蓄積, 限り,
英語学習用、サイトを構築中。基本自分用（お裾分け😌）
2022.08.05
おはようございます。今日はウォーキングしてきましたよ。自分が歩いているのは超早期です（笑
さて、自分用に英語学習用サイトを構築中です（現在進行形）。主に単語を覚えるためだけのサイトです、毎日数十単語の入力しています。1800単語まで数日はかかりそうですが全部、手動で入れます。因みに自分が学習しているのは中学生レベルです。中学生の英語を網羅するには1800単語を覚えないといけないらしいです。その作業が終わって自分が1800単語を覚えたら次は高校生で覚える単語も別途ページを構えて作ろうと思っています。
因みにサイトはシンプルで自分にとっては効率が良い作りを追求しようと思っていますので、あまりごちゃごちゃしたサイトにはしないで、必要最低限の作りのサイトで運用しようと思っています。その為、広告などは貼らないです。また、Topページ（358tool.com）では今後、いろいろなツールを作っていきますので、TOPページではそのリンクと概要を記載していきます。サービスは自分が欲しいと思ったものを中心に構築していきます、尚、広告を貼るサービスもありますので悪しからず！
では、今後とも宜しくお願い致します🙇。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
1800, 358, com, tool, TOP, いろいろ, ウォーキング, お裾分け, サイト, シンプル, ため, ツール, ぺ, ページ, レベル, 中学生, 今後, 今日, 作り, 作業, 入力, 全部, 別途, 効率, 単語, 基本, 学習, 広告, 必要, 手動, 数十, 数日, 早期, 最低限, 構築, 次, 毎日, 為, 現在, 笑, 網羅, 自分, 英語, 追求, 進行形, 運用, 高校生,
自分用に短縮ＵＲＬを作りました。自分以外短縮URLは登録できません。
2022.07.29
こんばんは、サービスの収益化はなかなかうまく行かない。
さて、今日は数分で開発した自分用の短縮URLです。外出先やスマホで長々とURLを直打ちするのも面倒です、ググるのもめんどくさい。そういう時のためにこういう物を作ったわけです。
| https://zip358.com/ | http://t2t.jp/z |
| https://yahoo.co.jp | http://t2t.jp/y |
| https://google.co.jp | http://t2t.jp/g |
| https://www.youtube.com | http://t2t.jp/yt |
| https://www.amazon.co.jp/ | http://t2t.jp/a |
| https://www.rakuten.co.jp/ | http://t2t.jp/r |
| https://newspicks.com/ | http://t2t.jp/n |
| https://www.tohotheater.jp/ | http://t2t.jp/t |
考え方はこんな感じ短縮URLを叩く（入力すると）、ルート場所で処理を行います。そしてあらかじめ登録してあるURLをデータベースのテーブルから参照し、URLの対応表の中にあればダイレクト転送処理を行うという形です。尚、こういうサービスを行なっている。サイトは結構あります、一番老舗はbitly.comです。
因みに短縮URLを登録する画面もあるのですが、そちらのURLはシークレットです。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2, 358, ahttps, Amazon, co, com, comhttp, ghttps, Google, ht, http, https, jp, jphttp, newspicks, nhttps, rakuten, rhttps, tohotheater, url, www, Yahoo, yhttps, youtube, ythttps, zhttps, zip, サービス, スマホ, ため, わけ, 今日, 収益, 外出, 数分, 時, 物, 登録, 直打ち, 短縮, 自分, 開発, 面倒,
新着記事が表示されるWPの非公式プラグインを作りました。
2022.07.24
こんにちは、朝の2時に起床し４時頃、ウォーキング。そして朝食後、コードを書いてその後、仮眠をとって今、記事を書いています。かなり不規則な生活リズムです😩、今日からは元の生活リズムへ戻そうと思っています。さて、WordPressの非公式プラグインを自前で制作致しましたのでお裾分けです。
今回はシングルページの記事の下に新着記事が表示されてカルーセルで動くというプラグインです。
アイキャッチ画像の大きさなどはご自身でソースコードを変更してご使用ください。尚、アイキャッチ画像がないには対応しておりません。
いらないパラメーターを投げている所があります。そちらは御自身で修正をお願いします、因みに今は新着記事５記事を取得している感じです、そちらも変更はソースコードを修正してお使いいただければと思っています。
ダウンロードのURLは下記になります。
https://zip358.com/plugin/new-post.zip
追伸：カールセルUIはSlickを使用しております。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2, 358, 4, 5, com, https, plu, url, WordPress, wp, www, zip, あい, ウォーキング, お使い, お裾分け, お願い, かなり, カルーセル, キャッチ, コード, ご自身, シングル, ソース, そちら, ダウンロード, パラメーター, プラグイン, ページ, リズム, 下, 下記, 不規則, 今, 今回, 今日, 仮眠, 使用, 修正, 元, 公式, 制作, 取得, 変更, 対応, 後, 感じ, 所, 新着, 朝, 朝食, 生活, 画像, 自前, 自身, 表示, 記事, 起床,
光の速さでUSBを繋ぐ、いずれ全て通信処理は光の速さで行うことになるのか？
2022.05.02
おはようございます。
月曜日休めばかなりの長期のお休みを頂ける人もいると思います。さて、今日のお題は下記になります。尚、自分で考えたお題なのに引用で記載しています😂。
光の速さでUSBを繋ぐ、いずれ全て通信処理は光の速さで行うことになるのか？
zip358.com
先日、光ファイバーでできたUSBケーブルが登場しました。そうだよね～。光で伝送すれば一番早いよねと・・・・。この技術は他にも応用できると思いますし、もうその研究は始まっていると思います。パソコン周りの機器のデータ転送は光で通信を行うことが当たり前になると思いますし、LANケーブルも光ファイバーで作られる日も近いかも知れません。
通信速度が速くなるということは、その分データの取り出すのも速くなるということですから、ハッキングされた場合もデータを瞬時に取り出すことが可能になるということです。光ファイバー技術は良いようで悪いこともありますね。本当に大切なデータは古いパソコンの中に保管して、ネットにも繋げない状態で保管していると、案外データは取り出しにくいのかも知れません。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
358, com, LAN, USB, zip, お休み, かなり, ケーブル, こと, データ, パソコン, ハッキング, よねと, 下記, 人, 今日, 他, 伝送, 先日, 光, 光ファイバー, 全て, 処理, 分, 可能, 周り, 場合, 引用, 当たり前, 応用, 技術, 日, 月曜日, 機器, 登場, 瞬時, 研究, 自分, 記載, 転送, 通信, 速度, 長期, 題,
最新記事を非広告記事で読みたい方用のページを作りましたよ😏。
2022.02.14
おはようございます、俊足で朝からコードを書いたりしていました😌。
さて、自分のサイトを広告無しだったら読んでも良いという人が少なからずいると思いまして、この度、テキストオンリーのページを作りました。このページでは最新記事しか読めません、過去記事を読みたい方はzip358.comよりサイトを参照くださいませ。
非広告ページ👇
https://zip358.com/tool/blog-non-ads/
因みにページの表示速度が若干遅いです、これはサーバーの処理に依存するものですのでこれ以上、速度を上げることは今の所出来ません。また、どんなプログラムなのか知りたいという方もいると思いますのでソースコードを掲載致します。これを非広告ページで見ると英字文字がずらっと並んでいるように見えると思いますが、バグではないですので悪しからず（ソースコードを記載した部分が表示されているだけです）。
尚、ソースコードを見てRSSだけで読み込みが出来そうだねって、指摘する人もいるかと思いますが自分のサイトのRSSは記事の中身が出力されない仕様でして、このようなコードになっています。取得できる方はもっと表示速度は早くなると思います・・・。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>RSS 非広告 blog-zip358.com</title>
</head>
<body>
<div class="container">
<div class="row">
<?php
$rss = @simplexml_load_file("https://zip358.com/feed");
if($rss){
ob_start();
foreach($rss->channel->item as $key=>$val){
?>
<div class="col-12">
<p class="h3" ><?=$val->title?>[<a href="<?=$val->link?>">*読みやすい記事へ*</a>]</p>
<p class="h4" ><?=$val->pubDate?> by <a href="https://twitter.com/zip358com">@zip358com</a></p>
<p><?=context($val->link)?></p>
</div>
<?php
}
print ob_get_flush();
}
?>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
<?php
/**
* @param $link string
* @return $reslut string
*/
function context($link=null){
$reslut = "";
if(is_null($link))return $reslut;
$htmldata = @file_get_contents($link);
$dom = new DOMDocument();
$html = mb_convert_encoding($htmldata, "HTML-ENTITIES", 'UTF-8');
@$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
$reslut = $xpath->query("//*[@id=\"article\"]/div[3]")[0]->textContent;
return $reslut;
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
358, blog-non-ads, com, https, tool, www, zip, オンリー, コード, こと, これ, サーバー, サイト, ソース, ソースコ, テキスト, バグ, プログラム, ページ, もの, 人, 今, 依存, 俊足, 処理, 参照, 広告, 度, 所, 掲載, 文字, 方, 最新, 朝, 自分, 若干, 英字, 表示, 記事, 記載, 速度, 過去, 部分,
SNSで忘れがちな事はこれだと思うですよね。
2021.10.12
高知県、今日は雨ではなく晴れでしたね。自分の予報は外れましたね、ごめんなさいな?。
さて、今日のお題は『SNSで忘れがちな事はこれだと思うですよね。』です、SNSの匿名で活動されている方もいると思うのですが、匿名の不利な所は中の人の事を忘れがちになるところだと思います。本名でアイコンも自分の顔で活動している人と違って匿名さんは人が呟いているのに何か、重みが違うように思えます。
その為、何だか知らない人から猛攻撃されたりする人も中に入ると思います。自分のtwitter垢はBOTを除き、フェイスブックと結びつけています。この@zip358comでさえ名前を入れて活動してはいないものの、FBリンクとはリンクしています。本名を記載していない理由は結構、ぐたぐた事を書いているので見られても良いけど仕事とは、あまり結びつけたくないかなという思いがあるので、本名を記載していないですが、リンクをたどると誰が発言しているのか分かるようにしています。
自分は匿名さんの発言がたまにロボットが発言していると勘違いしてしまいそうになる時があります。そう言えば匿名さんだけど中には人がいるだなって思うかの確率を上げるためには、やはり本名をどこかに記載した方が良いかなと思います。そして本名にすると、自分自身がそれなりに発言に注意しますよ。
それが結構、今は重要かなと思っています。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
358, BOT, com, FB, SNS, Twitter, zip, アイコン, これ, ところ, フェイスブック, リンク, 不利, 中, 予報, 事, 人, 今日, 仕事, 何, 匿名, 名前, 垢, 所, 方, 晴れ, 本名, 活動, 為, 猛攻撃, 理由, 発言, 自分, 記載, 誰, 重み, 雨, 題, 顔, 高知県,
Twitterプロフィールからスパムみたいなアカウントかを機械学習で判定してみた。
2021.06.28
Twitterプロフィールからスパムみたいなアカウントかを機械学習で判定してみました。
何故、このような事を考えたかはスパムみたいなアカウントってぱっと見で人は区別できるよねって思ったのでLobeというソフトを使って画像解析（機械学習）してモデルをエクスポートし、そのモデルをテンソルフローで使用して動作確認してみました。
結果は、まぁまぁの精度だったのでモデルをお裾分けしますね。因みにTwitterのプロフィール画像のスクリーンショットを行った時のソースコードも提供します。
尚、機械学習に使用したプロフィール画像は400枚ほど（少ない?）です、ok-image（一般人）とng-image（スパムみたいなアカウント）というラベルを付けて学習させてます。
model::https://zip358.com/ai-model/tw-profile/saved_model.pb (?モデルの中身はtensorboardでご確認を！)
zip358com
zip358# Generated by Selenium IDE
import time
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
from selenium.webdriver.support.ui import Select
class twss():
def setup_method(self):
self.driver = webdriver.Chrome(ChromeDriverManager().install())
self.vars = {}
def teardown_method(self):
self.driver.quit()
def screenshots(self):
self.driver.get("https://twitter.com/")
self.driver.set_window_size(945, 900)
with open('twname.dat','r',encoding="utf-8") as f:
for line in f:
FILENAME = "X:\\var\\www\\html\\labo_ai\\twss\\image\\screen_" + line.replace('\n', '') +".png"
self.driver.get("https://twitter.com/" + line.replace('\n', ''))
time.sleep(2)
self.driver.save_screenshot(FILENAME)
f.close()
self.driver.quit()
twss = twss()
twss.setup_method()
twss.screenshots()
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
358, 400, ai-model, com, https, lobe, model, ng-image, ok-image, SA, tw-profile, Twitter, zip, アカウント, エクスポート, お裾分け, コード, ショット, スクリーン, スパム, ソース, ソフト, テンソル, フロー, プロフィール, モデル, ラベル, 一般人, 事, 人, 何故, 使用, 判定, 動作, 区別, 学習, 提供, 時, 機械, 画像, 確認, 精度, 結果, 解析,
字幕データ生成ツールを作りましたよ。
2021.06.01
字幕データ生成ツールを作りましたよ。ツールを作ったのは5月23日になります、その日の午前にちょこちょこ制作し?、その日の午後にリリースしました。どんなツールかと言えば、srt形式のデータを生成するツールです。手動で字幕データを作る方法が記載しているサイトがありました（こちら）。
作った経緯（イキサツ）は、もう少し楽にsrt形式のデータを作りたいなと考えた結果、このようなツールを制作しました。自分の声はどもりがあるので、巷で話題のVrew（ぶりゅう）というAI（人工知能）が自動で字幕を生成してくれるアプリではどうしても字幕が上手く変換されないので逆に手間が発生します。
そんなこんなで作ったツールがこちらです。https://zip358.com/tool/srt-make-file/
無料ツールのリンクからも参照することが可能です。尚、字幕のデータなどは一切、サーバーに持たない設計にしていますので安心安全です。なお、Vrew（ぶりゅう）というアプリみたいな物も自分は作れますが、こちらになるとどうしてもGCPやAWSに音声データを送りテキスト変換する（自動文字起こし）というAPIの力を借りないといけないので、今回は作るのを断念しました?。時間があれば作ってみたいとは思っています。尚、APIのkeyなどは自分のAPIを登録して貰う形のアプリだったらみんな安心して使用できますよね。因みにVrewはあまり信用していないの派です?、便利だけどね。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
23, 358, 5, AI, com, https, srt, srt-make-file, tool, Vrew, www, zip, アプリ, イキ, こちら, こと, サーバー, サイト, サッ, そんなこんな, ツール, データ, どもり, ぶりゅう, リリース, リンク, 一切, 人工, 制作, 午前, 午後, 参照, 可能, 声, 変換, 字幕, 安全, 巷, 形式, 手動, 手間, 方法, 日, 無料, 生成, 発生, 知能, 経緯, 結果, 自分, 自動, 記載, 設計, 話題, 逆,
radiko[ラジコ]のWindowsアプリがないので作りました。
2021.03.24
昔、ラジコのWindowsアプリが存在していたのだけど今は使えなくなっていたのでradiko[ラジコ]のWindowsアプリを作りました。簡単な仕様です・・・とても簡単で単なるwebブラウザをはめ込むようにしているだけです。なのでこのページからリンクを辿れば別のサイトに移動することができます。何故、これを作ったのかというとブラウザとは別にアプリとして開きたかったという経緯があります。動作環境はwindows10です。
使用したい方は下記のURLからダウンロードしてくださいませ。
https://zip358.com/tool/radiko-view-Setup-1.0.0.zip
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
1.0.0, 10, 358, com, https, Radiko, radiko-view-Setup-, tool, url, web, Windows, www, zip, アプリ, こと, これ, サイト, ダウンロード, ブラウザ, ページ, ラジコ, リンク, 下記, 今, 仕様, 使用, 別, 動作, 存在, 方, 昔, 環境, 移動, 簡単, 経緯,
Anglesharpというライブラリの話。
2021.03.13
久しぶりに技術的なお話の記事を書きます。AnglesharpというのはC#などでスクレイピングするときにスクレイピングを補助してくれるライブラリで結構人気のあるライブラリなるようです。スクレイピングするコードは下記のようになります。この書き方が至ってシンプルで書きやすいのではないかなと思っています。
var Url = $"https://zip358.com/";
var querySelector = $"#index_post_list > li.clearfix.num1.type1 > div > h3";
var document = BrowsingContext.New(Configuration.Default.WithDefaultLoader()).OpenAsync(Url).Result;
var element = document.QuerySelector(querySelector);
Console.WriteLine($"blogtitle is {element.InnerHtml}");このライブラリはとても良いのですが、一つ問題があります。スクレイピングするのですが・・・これjavascriptがOFFの状態でスクレイピングされるのですね。どうもこのコードではJSがONにはならないようですね。因みに自分はそのことを知っていなかったのでどハマリしました。大手の検索サイトなどはjavascriptがOFFの状態でも閲覧できるようになっている事を知りました、試しにブラウザをOFFの状態にしてみるとソースコードがかなり違っていてJSのONの状態とは情報が差異がある事が理解できると思います。
Anglesharpのコンフィグ設定（init）でエージェントなどを設定してあげると上手くJSがONの状態をスクレイピングすることが可能なのかもしれません。動画を見る限りではまだかもしれません・・・。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, ３, 358, anglesharp, BrowsingContext, clearfix, com, Configuration, default, div, document, element, gt, https, index, li, LIST, new, num, OpenAsync, POST, QueryS, querySelector, quot, result, type, url, var, WithDefaultLoader, zip, お話, コード, シンプル, スク, とき, ピング, ライブラリ, レイ, 下記, 久しぶり, 人気, 書き方, 補助, 記事, 話,
お気をつけて。
2021.02.28
zip358で検索するとzip358.comが終了しましたというサイトが何件か表示されますが、それをクリックするとweb attackでブラウザの脆弱性よりパソコンに侵入しようとしますのでお気をつけてください。なので、zip358.comとアドレスバー（URLバー）に入力することを強くオススメします。
ちなみにzip358.comが閉鎖するとか考えていないし、アメーバブログとかに移行するつもりもないです。グーグルやyahoo検索でも普通のサイトが標的になるということがあるので、必ずパソコンにはウィルススキャンのソフトを導入することをおすすめします。例えばノートンというソフトやウィルスバスターとかですかね。自分が思うにノートンは結構優秀なソフトだと思います。
たまに自分の作ったexeソフトもウィルスと間違って削除されることもありますが・・・。
という事で、くれぐれもお気をつけてください。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
358, attack, com, exe, url, web, Yahoo, zip, アドレス, アメーバ, ウィルス, ウィルスバスター, おすすめ, お気, グーグル, クリック, くれぐれ, こと, サイト, スキャン, ソフト, それ, たま, つもり, ノートン, バー, パソコン, ブラウザ, ブログ, 事, 何件, 侵入, 優秀, 入力, 削除, 導入, 普通, 検索, 標的, 移行, 終了, 脆弱性, 自分, 表示, 閉鎖,
Yahoo japanサイトのコロナ情報リンク集です。好評に付きVer2。
2020.12.21
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"
}
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
19, 2, 358, 47, assets, com, covid, fetch, gt, https, JAPAN, JS, json, ken, quot, response, then, tool, var, ver, www, Yahoo, zip, ウェブ, クリック, こと, コロナ, サイト, スク, そこ, データ, バージョン, ピング, ほんと, リンク集, レイ, わざわざ, 作成, 公開, 国, 好評, 必要, 情報, 感じ, 改善, 時間, 画面, 県名, 自分, 見た目, 追記, 遷移,
つぶやきの回数を増やすのは結構、難しいですよね?。
2020.07.18
Twitter（ツイッター）をはじめて結構経ちます。実はTwitterというサービスが立ち上がった当初からTwitterを使っています。昔、使用していたアカウントはいつの間にか使用しなくなり今のアカウントに移行したのが2013年の事です。他にもアカウントを持っていますが、じぶんが主に使用しているのはこの@zip358comのアカウントだけになります。
若い世代はアカウントを使い分けている方が多いらしいですが、じぶんは壱アカウントで、お腹いっぱいです。そしてつぶやきもあまり多くないのです。世の中にはSNS（ソーシャルネットワークサービス）を使用しないひともいますよね。使用しない理由はいろいろあるかと思います。自分は一度は使用してみても良いじゃないかなと他人に勧めたくなりますが、この頃は断られるだけなので辞めています。断られるのって辛いというより、なんか寂しいなという感情を抱きますよね、そして温度差を感じます。
因みにソーシャルネットワークサービスはツイッターとフェイスブックをメモ代わりに使用しているだけで、あとのソーシャルネットワークサービスはあまり使用度は高くないです。ソーシャルネットワークサービスとか使い方が上手ければビジネスにも結びつけることが可能かと思います。じぶんのツイッターにも影響力が生まれればなと思いつつ、未だに何を呟けば良いのやらと悩んでいます。
だがしかし！
ブログのアクセスが伸び悩んでいるので、ソーシャルネットワークにも力を入れていきたいです！！
つぶやきの回数を増やすのは結構、難しいですよね?
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2013, 358, com, SNS, Twitter, zip, アカウント, かな, サービス, じぶん, ソ, ソーシャル, ツイッター, ネットワーク, ひと, 一度, 世, 世代, 中, 事, 今, 他, 他人, 使用, 回数, 壱, 当初, 感情, 方, 昔, 温度差, 理由, 移行, 腹いっぱい, 自分, 頃,
死んだ馬と死んだ目は同意語カモ？
2020.07.14
冴えないイラストレーターの使い方をしています。さて、人はなぜ『死んだ馬』に乗り続けるのか？という本を読んだことがありますか？いわいる自己啓発書です、自己啓発が増刷される時期ってこれから景気が悪くなる時期なんですね。景気が悪くなるときに儲かる商売っていうのは他にもあります。例えば占いや風水などもそうです。弱い心の人の支えになる商売って言えば良いのかな？
zip358の358という数字にも意味があるですよ（興味がある方はぐぐってください）。昔、自分はまぁどうなるか分からないけど試しにそうしてみようと思い付けました。お金もかからないのでということでこの数字を使っています。本当は4444というナンバーが良いそうですが・・・。こういうナンバーのことをエンジェルナンバーとかいうそうです。
他にもフラワー・オブ・ライフというのも最近、自分は取り入れました。こんなもので良くなるとは信じていませんがタダですので取り入れてみたという感じです。ある意味、統計的なものは何かあるのかなとは思っています。
商売人や芸能人には数珠をしている人がいますよね、アレって見えない力に縋っているようにも見えますよね。彼らも人なので人はそういうもので自分の力では、どうしようもない時は何か論理的ではない事を取り入れたくなるものなんです。?自分もそんな所もあります?
植松努さんという方がTEDで語っている『思いは招く』という言葉もあるように大体、そうなると思い込むとそうなっていくのです、なのでプラス思考で生きていくことが大事です。プラス思考になれない場合は上記のような事を試してみるのも良いと思っています。※お金をかけない方法だけを取り入れましょう。お金が絡んでくると、それは貴方を消費させられるだけなので辞めておいた方が良い。殆どのことは『思いは招く』だろうと思います、災害やそういうことを除くとそう感じますね。『悪くなる悪くなる』と思い込むと良くない方向に進みます、逆も真なりです、『良くなる』と自分に暗示をかければ良くなってくるものです。
尚、鏡の前に立って毎日のように『お前は誰だ』と問いかけると自我が崩壊するそうなので辞めましょう。鏡の前にたって自分を褒めてあげると良いらしいですよ。
最後に悪徳、不景気商売には引っかからないように！！
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
358, 4444, zip, イラストレーター, いわ, エンジェル, オブ, お金, カモ, こと, これ, だだ, とき, ナンバー, フラワー, もの, ライブ, 人, 他, 使い方, 占い, 同意語, 商売, 啓発, 啓発書, 増刷, 心, 意味, 感じ, 数字, 方, 昔, 時期, 景気, 最近, 本, 本当, 目, 自分, 自己, 興味, 風水, 馬,
ちょっとしたツール。
2020.05.11
サイト内の検索をするためのURLを生成してくれるツールを作りました。
ドメインを入力するとあらかじめ登録しているURLの候補が表示されます。
なお、プログラムでドキュメント検索する場合などに最適かなと思います、URLもプログラム関係のサイト（ドメイン）を登録しています。
因みにこれを作った経緯は単なる自分が使用するために作りました、そのお裾分けですので機能追加などは自分の判断で追加いたします（問い合わせなどは受け付けておりません）。
最後にリンクを貼っときます。
https://zip358.com/tool/site_search/ （サイト内検索URL生成）
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
358, com, https, search, site, tool, url, zip, お裾分け, これ, サイト, ため, ツール, ドキュメント, ドメイン, プログラム, リンク, 使用, 候補, 入力, 判断, 問い合わせ, 場合, 最後, 最適, 検索, 機能, 生成, 登録, 経緯, 自分, 表示, 追加, 関係,
株式会社ディーアンドジーネクストのサービスをリバースエンジニアリングした？
2020.03.13
高知県にあるディーアンドジーネクスト社には上記のサービスがあります、これは自分でも作れそうだと思い試した所できました。ソースコード公表は営業妨害になるので、掲載しませんが考え方は至ってシンプルです。翻訳したデータをパラメーターに付与して飛ばすだけです。
アイディアはとても面白いと感じたのだけど、これはパクれるかなと思いました。ちなみに翻訳APIを無料で使用する方法を見て作りました。いまは動かないようにしています。見た目はこんな感じになります（上記の画像）。
https://zip358.com/tool/demo10/ 動作はしません?処理部分秘密？
参考サイト
https://qiita.com/satto_sann/items/be4177360a0bc3691fdf
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
10, 358, API, com, demo, https, tool, zip, アイディア, いま, エンジニアリング, コード, これ, サービス, サイト, シンプル, ソース, データ, ディーアンドジー, ネクスト, パラメーター, リバース, 上記, 付与, 使用, 公表, 処理, 動作, 参考, 営業, 妨害, 感じ, 所, 掲載, 方法, 株式会社, 無料, 画像, 秘密, 翻訳, 考え方, 自分, 見た目, 部分, 高知県,
都道府県にカーソルを乗せると色が変わるちょっとした奴ムフ。
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');
});
}
});
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
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]);
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
3.0, 358, 7.2, com, Composer, DOCTYPE, gt, html, https, lt, php, request, tool, Twig, web, www, zip, アップ, インストール, エラー, エンジン, お問い合わせ, コード, ご自身, サンプル, ゼロ, ソース, ため, デジタル, テンプレート, バグ, ファイル, フォーム, ページ, 事, 使用, 保証, 修正, 値段, 処理, 前提, 動作, 堀江貴文, 幾ら, 必要, 担当者, 機能, 無料, 物, 環境, 確認, 簡易的, 自分, 追加, 送信, 部分,
質問箱とask.fmの違い
2020.01.05
質問箱とask.fmの違いは質問箱は匿名質問箱で誰でも質問OKなところ、ask.fmは匿名さんはNGにすることが出来る。
質問する側からすれば質問箱の方が気楽に質問できるので良いと思います。
本日、ask.fmの方の過去回答を全てを削除しました。
https://ask.fm/zip358com
こちらに関しては回答するつもりはあまり無いです。
なので、質問箱にご質問よろしくお願いいたします。
?
https://peing.net/ja/zip358com?event=0
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
358, ask, com, fm, https, NG, OK, zip, お願い, こちら, こと, ご質問, つもり, ところ, 側, 全て, 削除, 匿名, 回答, 方, 本日, 気楽, 誰, 質問, 過去, 違い,
WordPressの404外部リダイレクトプラグインを作りました。
2019.11.16
WordPressの404外部リダイレクトプラグインを作りました。
ソースコードはこんな感じになってます、、、。
使用される方は下記のURLよりダウンロードを行ってください。
解凍してフォルダをワードプレスのpluginを置く場所へアップロードし
page404goプラグインを有効にしていただければ使用できます。
https://zip358.com/plugin/page404go.zip
<?php
/*
Plugin Name: page404GO!!
Plugin URI: https://zip358.com/plugin/page404go.zip
Description: 404ページを任意のURLへ変換し遷移させる
Author: taoka toshiaki
Version: 1.0
Author URI: https://zip358.com/
*/
add_action( 'wp', function() {
global $wp;
$domain = get_option('domain404page')?get_option('domain404page'):"https://zip358.com/";
if(is_404()){
wp_redirect($domain.$wp->request);
exit;
}
});
add_action('admin_menu','page404go_setting');
function page404go_setting(){
add_options_page(
'zip358.com：プラグイン',
'404リダイレクト設定',
'administrator',
'page404go',
function(){
if(isset($_POST["domain404page"])){
if(preg_match("/https?://.*/$/",$_POST["domain404page"])){
$url = $_POST["domain404page"];
}elseif(preg_match("/https?://.*/",$_POST["domain404page"])){
$url = $_POST["domain404page"]."/";
}else{
$url = "https://zip358.com/";
}
update_option('domain404page', wp_unslash($url));
}
?>
<form method="post" action="">
<h2>リダイレクトドメイン指定</h2>
<input type="text" style="width:350px" name="domain404page" value="<?=get_option('domain404page')?get_option('domain404page'):""?>" placeholder="https://zip358.com/">
<?php submit_button(); ?>
</form>
<?php
}
);
}
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
1195254834632380416, 358, 404, Author, com, description, go, lt, name, page, php, plugin, status, taoka, toshiak, Twitter, URI, url, WordPress, zip, アップロード, コード, ソース, ダウンロード, フォルダ, プラグイン, プレス, リダイレクト, ワード, 下記, 任意, 使用, 場所, 変換, 外部, 感じ, 方, 有効, 解凍, 遷移,
自分の務めてる会社の１次入社試験（過去問）
2019.10.12
自分の務めてる会社の入社試験（過去問）です。
これぐらいのことは出来てもらわないと困るという事で出題したのですが
どうもこの問題難しいのか？
ここまで漕ぎ着けて採用された人はひとりしかいない。
大手の会社にはこんなの簡単だよという人は
たくさんいると思いますが、自分の務めてる会社は
どちらかと言えば零細企業です。
こういう問題出しても中々、解けない人が多くて
採用まで至らないのが現状です。
※今は募集していません。
■問題
郵便番号入力すると検索結果を表示するようにせよ。
また下記の条件を満たしていることとする。
1．サジェスト機能がある。
2.PHP言語を使用。
3.非同期処理。
単なるこれだけでも、中々出来る人が来ない。
これが零細企業地方の現状です。
https://zip358.com/tool/postal_code_search/
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, 2, ３, 358, Code, com, php, postal, search, tool, zip, ここ, こと, これ, これぐらい, これだけ, サジェスト, たくさん, どちらか, ひとり, また下, 中々, 事, 人, 今, 企業, 会社, 使用, 入力, 入社, 処理, 出題, 募集, 同期, 問題, 地方, 大手, 採用, 条件, 検索, 機能, 現状, 番号, 簡単, 結果, 自分, 表示, 言語, 記, 試験, 過去問, 郵便, 零細,
高知県のダム貯水率をグラフ化してみた。
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>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
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, かなり, きっかけ, グラフ, コード, ゴニョゴニョ, サイト, サンプル, ソース, そこ, ダム, デザイン, 事, 人, 何, 使用, 変更, 情報, 気持ち, 結果, 表, 表示, 親戚, 貯水, 追記, 高知県,
楽天RMSの禁止タグ制限を突破サービス!?
2019.09.07
楽天RMSの禁止タグ制限を突破サービスを自前してみました。
完璧ではないけど需要はあると思いますのでリリース、
ちなみにこちらのソースコードは非公開とさせて頂きます。
※会社でも似たような機能開発していますから…。
自分の頭の中にソースコードの設計工場があります(^^)。
リンクはこちらからお使いください。
https://zip358.com/tool/rakuten-RMS-tag/
広告でご飯食べてます。
ちなみにモバイル対応は意識していません。
PCブラウザより操作を行ってください。
※最新のChromeブラウザ推奨しております。
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
358, Chrome, com, https, nbsp, PC, rakuten-RMS-tag, RMS, tool, www, zip, お使い, コード, こちら, ご飯, サービス, ソース, タグ, ブラウザ, モバイル, リリース, リンク, 中, 会社, 公開, 制限, 完璧, 対応, 工場, 広告, 意識, 推奨, 操作, 最新, 楽天, 機能, 禁止, 突破, 自分, 自前, 設計, 開発, 需要, 頭,