色 | zip358.com

ブログのデザインを修正しました。

2023.11.22

おはよう御座います、ブログのデザインを修正しました。なんだか某エナジードリンクみたいなデザインですね（笑）。これで飽きるまで置いときます、誰が飽きるかと言えばブログの管理者である自分です、毎日のように自分のブログを見ているのでデザインが気に食わない感じになります。

人が制作したデザインだと全然改善しようと思わないですけど、自分がデザインだとなんだかダサく見えてしょうが無いのです。なのでテコ入れが多くなってしまいます。色は黄緑色？という感じで目がつかれるかも知れないという色合いになっていますがこの色好きなんですね、この色に黒字というのが好きなんです。カラーユニバーサルデザインとかには全然対応していない気がします、すみません🙇。

明日へ続く。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2023年11月22 06:00日

タグ

カラーユニバーサルデザイン, デザイン, ブログ, 人, 感じ, 某エナジードリンク, 気, 目, 笑, 管理者, 自分, 色, 色合い, 色好き, 黄緑色, 黒字,

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

2023.11.08

Logging

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

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

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

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

明日へ続く。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2023年11月08 06:00日

タグ

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

Twitterの呟きにchatGPTを混ぜている人いる？

2023.07.05

Logging

おはようございます、Twitterの呟きにchatGPTを混ぜている人いるのかなぁと思っています。たぶん作っている人はいると思うけど・・・・公開している人はいなさそう。気が向いたら作ろうかな🤔。

先日ちょっとchatGPTに色（キャラ）を出すためにどうすれば良いのか調べていたらこういうのを見つけました。結構出来そうなのでやってみようと思っています、例えば土佐弁を学習させて土佐弁で返答するものが作れたりするわけです、こういう色付けが自分が思っているよりも時間も費やすこと無く出来そうです。

ChatGPTで独自データを扱うためのエンべディング｜緒方壽人 (Takram) #note #AIとやってみた https://t.co/74zLXWQtLI
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) June 29, 2023

こういうchatGPTAPIを使用していろいろなサービスがこれから出てくるのだろうと思いますが、悪用も巧妙になってくるのだろうと思っていて、例えばオレオレ詐欺とか今まで人を雇って詐欺をしていた物が、人工知能を使用して海外から詐欺を働くハッカー集団が現れるのも時間の問題かと思います。そうなると、ますます巧妙になってくるのだろうと思います。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2023年07月05 06:00日

タグ

ChatGPT, chatGPTAPI, Twitter, キャラ, サービス, ハッカー集団, 人, 人工知能, 問題, 土佐弁, 悪用, 時間, 気, 海外, 物, 自分, 色, 詐欺,

これ無料で見えるのか、これはニッチな戦略かな。 #的を得た #労働者2

2022.10.17

Logging

おはようございます、月曜日の朝は憂鬱だね🙄。

さて、深いビジネス話が聴きたいビジネスマンや意識高い系にフォーカスを置いてメディアサービスを提供しているPIVOTという配信サービスが伸びてきている気がしますので改めて紹介します。PIVOTはスマホアプリ片手で新鮮な情報、深い話が聞けるのはPIVOTだけだと思っています。今のところこういうサービスは他にないですね。

【超円安時代の資産の増やし方】4000億円ファンドマネジャーの思考法／労働者1.0と労働者2.0の違い／ジブンポートフォリオを創れ／トヨタでもテスラでもなくフェラーリを買う理由／投資家思考の３つの特徴

PIVOT

NewsPicks StudiosのCEOだった佐々木紀彦社長が立ち上げただけあってPIVOT（ピポッド）は質と方向性が今に合っているような気がします。そしてPIVOTはNewsPicksとは何だか敵対関係というよりは、相乗効果のある良きライバル的な立ち位置になりそうな気がします。NewsPicksとは少し色が違うのかなって見ていて思います、WEBでも公開しているNewsPicksとは違いモバイル端末で完結しているPIVOT。恐らくPIVOTはモバイル端末完結型でこれからも配信していくというのが自分の読みです。

【インフレ・不況時代の投資戦略】世界はすでに不況／日本はスタグフレーション／「株式の死」に備えよ／FRBが利上げする3つの理由／S＆P500も横ばう？／成長率と参入障壁／コストコの最強ビジネスモデル

これから、YOUTUBEチャンネルが何処まで伸びるかで今後が決まりそうです。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年10月17 06:00日

タグ

2, CEO, newspicks, PIVOT, Studios, web, アプリ, これ, サービス, スマホ, ところ, ニッチ, ビジネス, ビジネスマン, ピポッド, フォーカス, メディア, モバイル, ライバル, 今, 他, 位置, 佐々木, 公開, 労働者, 効果, 完結, 少し, 情報, 意識, 憂鬱, 戦略, 提供, 敵対, 新鮮, 方向性, 月曜日, 朝, 気, 無料, 片手, 的, 相乗, 社長, 端末, 系, 紀彦, 紹介, 色, 話, 質, 違い, 配信, 関係,

北斎展師とその弟子たちを見てきましたよ。in 高知県立美術館

2022.07.23

Logging

おはようございます。昨日、北斎展師とその弟子たちを高知県立美術館で見てきました。

葛飾北斎は繊細と躍動感を兼ね備えた絵だということ、センスは半端ないな。一つ惜しい所は絵の為に照明を落としていたことです。照明を落とすのは仕方がない事だと思うけど、絵に照明の色が反映しているなって感じで色合いが少しオレンジ色ぽっく見えてしまっている絵が多数ありました。

見てきましたよ！#hokusai #北斎展 #高知県立美術館 pic.twitter.com/oub03sk6yY
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) July 22, 2022

そこが少し残念でしたけど1,200円で本物を見えて写真に納める事が出来たのはお得感があります。行ってよかったです、今度は伊藤若冲の絵を京都か東京で見たいなって思っています。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年07月23 08:27日

タグ

１, 200, in, オレンジ, お得感, こと, センス, そこ, 一つ, 事, 京都, 今度, 伊藤若冲, 写真, 北斎, 半端, 反映, 多数, 少し, 展, 弟子, 感じ, 所, 昨日, 本物, 東京, 残念, 為, 照明, 県立, 絵, 繊細, 美術館, 色, 色合い, 葛飾北斎, 躍動感, 高知,

WordPress5.9からかなり仕様が変わります。それで？

2021.12.20

Logging

寒い日が続きますね、昨日も今日の朝もかなり冬って感じの朝だな…?

さてショッキングな情報を先日、耳にしましたので共有します。WordPress5.9からテンプレート仕様が大きく変わるみたいですね。かなりガラリと変わります。どのように変わるかはこちらのサイトとこちらのサイトでご確認くださいませ。尚、今までのテンプレートは今の所、バージョンアップしても使えるとは思いますが、5.9以降、バージョンアップにつれて今までのテンプレートは使用できなくなるのは目に見えています。

Introducing WordPress 5.9

テンプレートの仕様が変わることにより、色の変更や配置などがGUI（グラフィカルユーザーインターフェース）で簡単に操作出来るようになります。今後、ちょっとした色の変更や見栄えなどの変更をユーザーが簡単にできてしまうようになるという事はWEBを生業としている業界からすると、かなり痛手かと思います。

WP5.9の対応してしまった後は、仕事が激減しそうな気さえします。やはりウェブはウェブ制作だけでは食べていけない、そんな感じになってくるのではないかなとヒシヒシと感じます。

このサイトもWP5.9がリリースされたら、オリジナルテンプレートを作って運用していく事になりそうです。

以上、現場からでした。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年12月20 05:53日

タグ

5.9, GUI, web, WordPress, wp, アップ, インターフェース, かなり, グラフィカル, こちら, こと, ご確認, サイト, ショッキング, テンプレート, バージョン, ユーザー, 事, 今, 今後, 今日, 仕事, 仕様, 使用, 先日, 共有, 冬, 変更, 対応, 後, 情報, 所, 操作, 日, 昨日, 朝, 業界, 生業, 痛手, 目, 簡単, 耳, 色, 見栄え, 配置,

このサイトの背景色を勝色に変えました。縁起の良い色ということで。

2021.10.31

Logging

今日はブログ投稿お休みの日だけど、報告ということで書いています。このサイトの背景色を勝色に変えました。縁起の良い色ということで、その色にしました?

前々から背景色を黒に近い色に変えようと思っていたのですが、なかなか踏ん切りがつかなくてやっとこさ、本日変えました。これでちょっとアンダーワールドなサイトに見えるかもしれませんが、それはそれで良いです。飽きたらまた白に変えるかもしれませんが今の所、この勝色で置いておこうと思います。

あと、サンプルコードの動画はもうネタ切れなので、これからは自分が作ったコードをサラッと見せるとかDEMOコードをサラッと見せるようにします。

トイウコトデ、今日は10月最後の日曜日でハロウィーンらしいですが高知のひろめ市場に行くこともなく、皆が騒いで終電で帰る頃には自分は夢の中だと思います。まだ仕事も決まらず悔しい思いの中、年を越しそうですね。ちょっと悔しいですが、結果は結果なので坦々と日々頑張るしかないかなと思います。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年10月31 02:15日

タグ

10, demo, あと, アンダーワールド, お休み, コード, こと, これ, サイト, サンプル, それ, トイウコトデ, ネタ切れ, ハロウィーン, ひろめ, ブログ, 中, 今, 今日, 仕事, 前々, 動画, 勝色, 坦, 報告, 夢, 市場, 年, 所, 投稿, 日, 日曜日, 最後, 本日, 白, 皆, 終電, 結果, 縁起, 背景色, 自分, 色, 頃, 高知, 黒,

彼のVue.jsの入門解説動画が分かりやすいかも。超入門は理解しました。

2021.07.12

Logging

vue.jsを勉強したい方はよしぴーのYouTubeプログラミングスクールの超Vue.jsの入門解説動画が分かりやすいかも。自分は入門版は理解しました。尚、bodyにID付けて試すのは辞めとけよ。bodyにIDを付けて動かないなぁとかしないように！！ドキュメントにもbodyにIDを付けるのは推奨しないと記載しております。動画を見て背景の色を動的に変えるvue.jsの簡単なサンプルプログラム作りました。コード書いていてjavascriptで書くよりもvue.jsなどのライブラリ？を使用して書くほうが短いコードで書けるので良いなと実感。

超Vue.js 2 入門完全パック – Vueでアプリを作りたい方必見！ (Vue Router, Vuex含む)

vue.jsの入門、動画を見て😅
使ってみた便利といえば便利かも。

背景の色を変えるhttps://t.co/nUWb5qqa4B
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) July 1, 2021

htmlコードとvue.jsのコードは下記になります、最終的にはvue.jsでアプリ作りたいな（時間がない？^^;）。SPAに関して難しいという意識がある人も触っていくうちに慣れると思います。因みに学習能力が高い人はこんなの作れちゃうみたいですね、学習してまだ二週間しか経過していなくてゴニョゴニョ作れている所がへぷさん（@HEP1147）、凄いところ！！ですね。

https://www.youtube.com/watch?v=kltx14qMt5M

<!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.3/css/all.min.css">

<style>
    #el{
        width: 100vw;
        height: 100vh;
    }
</style>
<title>背景の色を変える</title>
</head>
<body>
<div id="el" v-on:mousemove="mouseXY($event)">
    <span v-on:click="colorclick('#000')"style="color:#000">■</span>
    <span v-on:click="colorclick('#fff')"style="color:#fff">■</span>
    <span v-on:click="colorclick('#4eaeec')"style="color:#4eaeec">■</span>
    <span v-on:click="colorclick('#4eeccc')"style="color:#4eeccc">■</span>
    ---{{ color }}---
    X={{x}},Y={{y}}
</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>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="./main.js?<?=time()?>"></script>
</body>
</html>

var vm = new Vue({
    el:"#el",
    data:{
        color:"#fff",
        x:0,
        y:0
    },
    methods:{
        colorclick:function(c){
            this.color = c;
            document.body.style.backgroundColor = c;
            return true;
        },
        mouseXY:function(event){
            this.x = event.clientX;
            this.y = event.clientY;
        }
    }    
});

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年07月12 02:34日

タグ

body, html, ID, javascript, JS, SPA, vue, youtube, アプリ, うち, コード, サンプル, スクール, ドキュメント, プログラミング, プログラム, よし, ライブラリ, 下記, 人, 使用, 入門, 勉強, 動画, 学習, 実感, 彼, 意識, 推奨, 方, 時間, 理解, 簡単, 背景, 能力, 自分, 色, 解説, 記載, 超,

カラーコード表をjson形式で取り込み背景をランダム表示。

2020.10.04

Logging

カラーコード表をjson形式で取り込み背景をランダム表示する、あまり使用しないかもしれない、プログラムコードを書きました?。
実際、必要とするのはオブジェクトで出来ているカラーコード表かなと思っています。ウェブの初心者だったとき、ジャバスクリプトで背景の色が変わったりすることが、新鮮で楽しかったのですが今はそういう感覚が昔より抜け落ちているなと感じます。プログラムを書くことが楽しいという感覚がここ数年、抜け落ちていて、休日はコードを前より書くことが少なくなっています。

何年もコードを書くと飽きるのかもしれないなというのは仕方がないことなのかもしれません。でもそこでモチベーションを下げずに要られるひとは更に上への技術が身につくのかもなと思っています。

飽きるというのは言い換えれば、上達が止まったことを指すそうです。

var h = {
	color: [
		{ name: "black" }
		, { name: "aliceblue" }
		, { name: "darkcyan" }
		, { name: "lightyellow" }
		, { name: "coral" }
		, { name: "dimgray" }
		, { name: "lavender" }
		, { name: "teal" }
		, { name: "lightgoldenrodyellow" }
		, { name: "tomato" }
		, { name: "gray" }
		, { name: "lightsteelblue" }
		, { name: "darkslategray" }
		, { name: "lemonchiffon" }
		, { name: "orangered" }
		, { name: "darkgray" }
		, { name: "lightslategray" }
		, { name: "darkgreen" }
		, { name: "wheat" }
		, { name: "red" }
		, { name: "silver" }
		, { name: "slategray" }
		, { name: "green" }
		, { name: "burlywood" }
		, { name: "crimson" }
		, { name: "lightgray" }
		, { name: "steelblue" }
		, { name: "forestgreen" }
		, { name: "tan" }
		, { name: "mediumvioletred" }
		, { name: "gainsboro" }
		, { name: "royalblue" }
		, { name: "seagreen" }
		, { name: "khaki" }
		, { name: "deeppink" }
		, { name: "whitesmoke" }
		, { name: "midnightblue" }
		, { name: "mediumseagreen" }
		, { name: "yellow" }
		, { name: "hotpink" }
		, { name: "white" }
		, { name: "navy" }
		, { name: "mediumaquamarine" }
		, { name: "gold" }
		, { name: "palevioletred" }
		, { name: "snow" }
		, { name: "darkblue" }
		, { name: "darkseagreen" }
		, { name: "orange" }
		, { name: "pink" }
		, { name: "ghostwhite" }
		, { name: "mediumblue" }
		, { name: "aquamarine" }
		, { name: "sandybrown" }
		, { name: "lightpink" }
		, { name: "floralwhite" }
		, { name: "blue" }
		, { name: "palegreen" }
		, { name: "darkorange" }
		, { name: "thistle" }
		, { name: "linen" }
		, { name: "dodgerblue" }
		, { name: "lightgreen" }
		, { name: "goldenrod" }
		, { name: "magenta" }
		, { name: "antiquewhite" }
		, { name: "cornflowerblue" }
		, { name: "springgreen" }
		, { name: "peru" }
		, { name: "fuchsia" }
		, { name: "papayawhip" }
		, { name: "deepskyblue" }
		, { name: "mediumspringgreen" }
		, { name: "darkgoldenrod" }
		, { name: "violet" }
		, { name: "blanchedalmond" }
		, { name: "lightskyblue" }
		, { name: "lawngreen" }
		, { name: "chocolate" }
		, { name: "plum" }
		, { name: "bisque" }
		, { name: "skyblue" }
		, { name: "chartreuse" }
		, { name: "sienna" }
		, { name: "orchid" }
		, { name: "moccasin" }
		, { name: "lightblue" }
		, { name: "greenyellow" }
		, { name: "saddlebrown" }
		, { name: "mediumorchid" }
		, { name: "navajowhite" }
		, { name: "powderblue" }
		, { name: "lime" }
		, { name: "maroon" }
		, { name: "darkorchid" }
		, { name: "peachpuff" }
		, { name: "paleturquoise" }
		, { name: "limegreen" }
		, { name: "darkred" }
		, { name: "darkviolet" }
		, { name: "mistyrose" }
		, { name: "lightcyan" }
		, { name: "yellowgreen" }
		, { name: "brown" }
		, { name: "darkmagenta" }
		, { name: "blush" }
		, { name: "cyan" }
		, { name: "darkolivegreen" }
		, { name: "firebrick" }
		, { name: "purple" }
		, { name: "seashell" }
		, { name: "aqua" }
		, { name: "olivedrab" }
		, { name: "indianred" }
		, { name: "indigo" }
		, { name: "oldlace" }
		, { name: "turquoise" }
		, { name: "olive" }
		, { name: "rosybrown" }
		, { name: "darkslateblue" }
		, { name: "ivory" }
		, { name: "mediumturquoise" }
		, { name: "darkkhaki" }
		, { name: "darksalmon" }
		, { name: "blueviolet" }
		, { name: "honeydew" }
		, { name: "darkturquoise" }
		, { name: "palegoldenrod" }
		, { name: "lightcoral" }
		, { name: "mediumpurple" }
		, { name: "mintcream" }
		, { name: "lightseagreen" }
		, { name: "cornsilk" }
		, { name: "salmon" }
		, { name: "slateblue" }
		, { name: "azure" }
		, { name: "cadetblue" }
		, { name: "beige" }
		, { name: "lightsalmon" }
		, { name: "mediumslateblue" }
	]
};
document.body.style.backgroundColor = h.color[getRandomInt(h.color.length)].name;
function getRandomInt(max) {
	return Math.floor(Math.random() * Math.floor(max));
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年10月04 09:46日

タグ

Black, color, json, name, quot, var, ウェブ, オブジェクト, カラー, コード, ここ, こと, ジャバ, スクリプト, そこ, とき, ひと, プログラム, モチベーション, ランダム, 上, 上達, 今, 休日, 何年, 使用, 初心者, 前, 実際, 形式, 必要, 感覚, 技術, 数, 新鮮, 昔, 背景, 色, 表示, 身,

都道府県にカーソルを乗せると色が変わるちょっとした奴ムフ。

2020.03.09

Logging

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.webp"></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代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年03月09 04:34日

タグ

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, いま, お裾分け, カーソル, サービス, ソース, それぞれ, ダウンロード, ため, デモ, ファイル, ムフ, 下記, 地図, 奴, 提供, 日本, 標準, 編集, 自分, 色, 都道府県, 雛形,