@Blog{zip358.com}
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
【お知らせ】JavaScriptで背景色の変更が出来るようになりました．
2024.07.05
おはようございます．【お知らせ】JavaScriptで背景色の変更が出来るようになりました．リロードしても画面の状態を維持するようになっています．因みにこれ、IPアドレスとかいうモノをこちらで取得して判断している訳ではありません．
ユーザーのブラウザの中の保存領域（のが多いw）にカラー色を保存するようになっています．なので、同ブラウザで見るとご自身が選択したカラー色で表示されるようになってます．要するに2015年？あたりから、各ブラウザにデータを保存出来る機能が追加されました．その機能をJS（javascript）言語で呼び出して使用できるようになっているのです．
このメリットはプライバシーが担保出来るということです．ユーザー側でデータを保持しているので消す事も可能ですし、どんなデータを保存しているのかもブラウザの検証項目のアプリケーション、ローカルストレージと進めば確認することが可能です．
因みにソース・コードはこちらです．
if(localStorage.getItem('zcolor')){
document.body.style.backgroundColor = localStorage.getItem('zcolor');
}
if(document.querySelectorAll('#zcolors > .zcolor')){
[...document.querySelectorAll('#zcolors > .zcolor')].forEach(elm=>{
elm.addEventListener('click',(e)=>{
let color = elm.getAttribute('data-zcolor');
localStorage.setItem('zcolor',color);
document.body.style.backgroundColor = color;
});
});
}明日へ続く．
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
body.style.backgroundColor, color, data-zcolor', document.querySelectorAll, elm, elm.addEventListener, elm.getAttribute, foreach, gt, if, javascript, JS, let color, localStorage, localStorage.getItem, zcolors, アプリケーション, ローカルストレージ, 担保,
ReactNativeのボタンがiosとAndroidでは挙動が違うので代替。
2021.11.18
今日はReactNative（リアクトネイティブ）でアプリを制作しながら勉強している中で、ボタンを使ってみたら・・・iosとAndroidでは挙動というか見栄えが違うのですよ、ドキュメントにもそう書いていた?。なので、ボタンじゃなくてこちらを使用するほうが良さげです。
Color of the text (iOS), or background color of the button (Android).こちら【TouchableOpacity】などを使用してボタンを作成しないといけないみたい。こちらで作るとios、Android同じ見栄え（デザイン）になります。作ってて思うことは師というかメンターがいればもっと効率的に開発できそうです。
師匠がほしい今日此頃・・・。
以上、現場からでした。
import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const App = () => {
const [count, setCount] = useState(0);
const onPress = () => setCount(prevCount => prevCount + 1);
return (
<View style={styles.container}>
<View style={styles.countContainer}>
<Text>Count: {count}</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={onPress}
>
<Text>Press Here</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10
},
button: {
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10
},
countContainer: {
alignItems: "center",
padding: 10
}
});
export default App;
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Android, background, button, color, from, import, iOS, of, OR, quot, react, ReactNative, Text, The, TouchableOpacity, useState, アプリ, こちら, こと, デザイン, ドキュメント, ネイティブ, ボタン, メンター, リアクト, 中, 今日, 今日此頃, 代替, 作成, 使用, 制作, 勉強, 師, 師匠, 挙動, 現場, 見栄え, 開発,
カラーコード表をjson形式で取り込み背景をランダム表示。
2020.10.04
カラーコード表を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代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Black, color, json, name, quot, var, ウェブ, オブジェクト, カラー, コード, ここ, こと, ジャバ, スクリプト, そこ, とき, ひと, プログラム, モチベーション, ランダム, 上, 上達, 今, 休日, 何年, 使用, 初心者, 前, 実際, 形式, 必要, 感覚, 技術, 数, 新鮮, 昔, 背景, 色, 表示, 身,
Gitサーバを構築するという事になり。
2016.01.04
大晦日から元旦かけて、会社でGitサーバを構築するいう事になり勉強をしていました。
Gitサーバを立ち上げようと発案したのは自分、じぶんが発案者なので
勉強するのも道理だろうとGitサーバを勉強しました。
結論から言えば出来たのですが、いまいち完璧に
理屈がわかったのではなく、こうすればMacでもWindowsでも
動くという事がわかっただけです。
ちなみに構築方法はそのうち掲載します・・・・うそ。
ってそれほど難しい話ではなかったので掲載します。
#------------Git------------------------ yum -y install git git config --global core.quotepath false git config --global color.diff auto git config --global color.status auto git config --global color.branch auto cd /var/wwww/html git init --shared=true git status git add . git commit -m 'new' git config --bool core.bare true git config --get-all core.bare #-------------Key------------------- ssh-keygen -t rsa cd /root/.ssh cp id_rsa /var/www/html
まず、初めにGitサーバをインストールします。
だいたい、初期の状態でインストールされています。
次にGit（ギット）のコンフィグの設定を行い、リポジトリを作成したい
階層まで行きリポジトリを作成します。addし後にコミットして完了です。
こちらがリモートリポジトリになります。
そしてローカル側にもGitをインストールします。
例えば、sourcetreeなどをWindowsにインストールします。
（※GUIでインストールを行ってください。CUIではなく：真ん中の選択肢を押下？）
まず最初に先ほど作成したsshのkey（秘密鍵？公開鍵？＝id_rsa）を
ローカルにダウンロードします、その後、puttygen.exeなどを使いppkに
変換を行います。（ppk変換方法はこちら）
次にsourcetreeの初期設定としてkeyの登録を行います。
先ほどppkに変換したファイルを参照します（ツール→オプション）。
参照後、新規/クローンを選択しリモートリポジトリとローカルリポジトリ作成場所を
選択してクローンの作成を行います。
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
-y, auto, branch, color, config, diff, false, git, global, install, Mac, quotepath, status, Windows, yum, いまいち, ウソ, うち, サーバ, じぶん, 事, 会社, 元旦, 勉強, 大晦日, 完璧, 掲載, 方法, 構築, 理屈, 発案, 発案者, 結論, 自分, 話, 道理,