ブラインドタッチ練習ゲーム<javascript>を投稿しようと頑張ってみたが・・
ブラインドタッチ練習ゲーム<javascript>を投稿しようと頑張ってみたが・・
wordpressの投稿画面にhtmlは入力できるが、javascriptの読み込みとcssの読み込みがうまくいかず。
というか、どうやったらいいのかずっと調べているが解決になかなか至らずとりあえず休憩。
function.phpに書き込むとか、投稿画面に<div>タグで囲って<script>で記入するなどいろいろできましたが。。。
html
<h1>ブラインドタッチの練習</h1>
<div class="container">
<p><span id="span">ここに表示されます</span></p>
<form name="form" >
<select name ="yubi"size= "5" class="selectbox" >
<option class="selectbox">--- どの指を練習しますか？ ---</option>
</select>
</form>
'use strict'
{
const span = document.getElementById('span');
let num = 0;
let number;
// console.log(hoge[2]);
//問題をランダムにする
function cardRandom(){
console.log(number);
span.textContent = number;
}
// select要素を取得
const yubi = document.querySelector("select[name=yubi]");
yubi.addEventListener('change', function(){
console.log(num);
cardRandom();
});
//キー入力の情報を取得
document.addEventListener('keydown', (e)=> {
let key = e.key;
if(key !== number){
return;
}
console.log(key);
span.textContent = 'よくできました!';
return;
}
cardRandom()
});
//リセット
document.getElementById('reset').addEventListener('click',()=>{
window.location.reload();
});
}
自分の壺の中の大きな石とは？〜周りや他人を気にしてしまう場合の対処法〜
心の壺とは？
つい他人が気になってしまったり、比較してしまって落ち込んだりしてしまうことありますよね。
それは性格や育った環境以外に、本能的に他人が気になるということもあるかもしれません。
しかし、そればかりで心のスペースを締められてしまうと、メンタル的にとても息苦しくなってきます。
そんな時に私がいつも思い出すお話があります。それは心の壺を思い描くことです。
その壺の中に入っている大きな石は何だろう？と自問してみること。
「大きな石」とは、まさに自分の人生においてプライオリティや重要性が高いと思うことです。
このお話を既にご存知の方は読み飛ばしてください😁
まず壺に大きな石を入れる
壺があります。
そこに大きな石をいくつか入れて下さい。この下手くそなイラストには石がいっぱい入っていますが、３〜４個ぐらいの大きな石を入れるイメージでしょうか。
まずそれを想像してみて下さい。
まだ入るものはありますか？
上のイラストはもう石が入らないでしょうか？ それとも入りますか？
見た感じだと、大きな石はこれ以上入らない感じです。
しかしある教授は言いました、「まだ砂が入りますよ。」
わかりにくいイラストですが、隙間にいっぱい砂が入れてあるイメージです。
サラサラサラ〜っとパンパンに入れちゃいました。
さらにまだ入るものはありますか？
さて、もう何も入りませんか？ それとも入るでしょうか？
砂はもう入りそうにありませんね。
すると教授が言いました「まだ水が入ります。」
そしてそっと水を少しづつ入れていきました。
砂でいっぱいの中に水を湿らせていれたイメージです。
さて、ここで言いたいことは何かというと、
- 大きな石 → 自分が大切にしたり重要だと思っている優先順位が高いこと
- 砂や水 → 日々の雑事や些細な出来事、大きな石だと思っていること以外のこと。
これらを象徴的にあらわしています。
今回は最初に「大きな石」から入れました。
しかしそれとは逆に、「砂や水」から先に入れるとどうなるでしょう。
砂や水を先に入れると・・・
砂と水で既にいっぱいになった壺の中に、大きい石を入れることができるでしょうか？
できませんね😅
どういうことかというと、日々の雑事や些細なことに頭が囚われてしまうと、自分の人生で大切だと思っている事を心に入れるスペースすらなくなってしまうということです。
すごくわかりやすい例えです。
私はこれを初めて本で読んだとき、あまりのわかりやすさに感動しました。
人はすぐに何かに囚われてしまう
私は女性で子育て中ですので、あくまでその視点からですが、日々子育てしているといろんな雑事があります。
「雑事」と言いましたが、それは多岐にわたっているという意味で使っています。
- 日々の細かい家事
- 近所付き合い
- 幼稚園、学校でのお母さん関係
- 役員の活動
あくまで個人的なことを並べましたが、人によって違ってくるかもしれません。
中には仕事の人間関係などと思う方もいるでしょう。
私は主婦ですが、つい人と比べてしまう癖があるので、好きなことをしていても、「これでいいのだろうか？」「他の人はバリバリ仕事やパートをしているのに」などと思ってしまいます。
自分が主婦でいることを選んだのにです。
幼稚園などは人間関係が近いので、他の楽しそうに集まっているお母さんを見ては、「今のままの自分でいいのか？」と再び思いつめてしまったり。
しかし本当に自分がその中に入りたいかというと決してそうではない。
あくまでも自然に気のおけない人ができたらいいな、ぐらいの肩の力を抜いたスタンスのはずです。
それなのにそのことで必要以上に心が囚われるのことは、私にとってまさに些細な事。
そんな時はこの「心の壺」を思い浮かべるようにしています。
自分の大きな石は何だろうか？ ということです。
大きな石は人それぞれ
大きな石は何ですか？
私は、家族（親兄弟も含めて）、健康、趣味、食生活、限られた気の合うお友達などです。
仕事や、友人、だと思う方も多いでしょう。
他には旅行、料理、スポーツもあるかもしれません。
モヤモヤするときは、まずは人生における「大きな石」を意識する。
あまり「砂や水」に囚われないように意識してみてはどうでしょうか。
意識してみないとつい「砂や水」で心がいっぱいになっていることがあります。
壺をイメージするだけで、ハッと心が楽になって今現在のことに集中できるようになるかもしれません😁
[http://:title]
中年になってからのパソコンを趣味にすることのすすめ
中年になってからのパソコンを趣味にすることのすすめ
パソコンをする時間をとりましょう
パソコンはいいです。
特に中年になって趣味がなかったらおすすめします。
嫌いじゃなければやってみたらどうでしょうか。
とりあえず、エクセルとかペイント系ソフトとか。
iPadだったら、感覚的にアニメーションが作れちゃうソフトなどビジュアル系のものがたくさんあるのでトライしてみたらどうでしょうか。
老眼がきてるなら老眼鏡をかければなんとかなります。
肩がすぐ凝るなら、休み休み短時間で。
コーヒーとかお茶を飲みながら、スキマ時間にのんびりと。
家事もたまにはほっといちゃいましょう。
脳に新しいシナプスができるでしょう（笑）
脳について詳しくありませんが、新しいことを学べば中年や老境に入ったって脳がどんどん刺激されます。
指をタイピングで動かす。
操作を勉強する。
こんなことできるんだ！とワクワクする。
脳にいいこと間違いなしです。
でも座ってばかりはよくないので、一日何千歩かは歩きましょう（笑）
パソコンは内向的な人にも向いてる
私はどちらかといえば内向的です。
がんばってお母さんたちと話してますが、結構話題作りなど無理してます。
いろんなお母さんたちと群れたりすることもありません。
本当に決まった少数の人だけ。
これでいいんか？？
そう思うことがありますが、本当に気の合う人が少しでもいれば、あとは家でパソコンをいじっていろいろなことを学んでいたほうが好きだと思います。
つくづく最近、パソコンがあってよかったと感じています。
パソコン仲間もできるかもしれない
同じようにパソコンを学びたい！と思っている仲間がそのうち自然にできるかもしれません。
そんな人たちと集まって、ワイワイとあーだこーだパソコンのソフトやら操作について学んだり、お互いの作品を見せあったり。
そんなふうに老後を過ごせたら素敵だと思いませんか？
自分の好きなことの仲間ができることは素晴らしいことです。
私は現在一人で黙々と学んでいますが、いつかそんな未来を思い描いています。
まずは何から？
何でも良いでしょう。
自分の興味のある分野から。
エクセル、ワード。
イラストに興味あるならイラストレーターなどや、その他無料ソフト。
アニメ風にしたいなら、clip studio paint(クリスタ）もちろんイラストレーターなどなど、無料のfire alpacaでも漫画が描けます。
動画作成したいなら、iMovie、final cut pro、premier proなど。
とりあえず無料ソフトから始めるのがよいかもしれません。
ブログを作ってみる！
ブログを書いてみるのはどうでしょう。
そうしながら、どうやったら動画アップできるのか、カスタマイズの仕方とかに興味が出てくるかもしれない。
はてなブログは簡単にできるのでおすすめ！
私は最近Htmlを再び勉強しています。
ホームページなどHｔｍｌで書けますが、結構楽しいです。
以前学んだ内容はすっかり頭の中には残っておらず、今は表を作成したりするところを独学しています。
新しいことを吸収するって、脳がバリバリ刺激されますよ！
パソコンは本当に長く続けられる趣味になるので、思いっきりおすすめします。
一緒にやりましょう！！
gimpで暗めの写真を明るく補正してみる！
この画像は以前海に行ったときに撮ったものですが、曇り空と晴天を繰り返していたためこんな暗ぼったい画像が多くなってしまいました。
それで、画像編集ソフトの「gimp 」で明るめにしてみることにした。
何事も挑戦！
色メニューからコントラストを調整してみる
私は言語を英語の勉強のため、日本語ではなく英語に設定してあるります。
日本語だと、色から、「明るさ、コントラスト」のとこでしょうか。
そこのコントラストを調節してみました。
ちなみに元画像は、タイトルにあるものです。
調整したはいいですが、地面の色とかが暗くなってしまいました。空は青っぽくなりましたが、なんだか暗ぼったく重たいかんじ。
カラーカーブをいじる
そこで「色」からカラーカーブを表示させます。
そして、まずは自分の調整したい画像の箇所をクリックすると、なんとそれを補正する場所を教えてくれるではありませんか！
以前使用していた無料ソフトではできなくて、必死で自分で探していたのでこれは本当にありがたいです。
たぶんphotoshopとかでもできるのでしょう。
私がクリックした場所は雲のあたりなんですが、そこをぐっと上にあげてみました。
これで空はどよんとした空から晴天の雰囲気に変わった感じがします。
それでも海は暗ぼったいかな・・。
青い空を濃くする
空の青いところをもうすこし濃くするにはどうしたらよいのでしょう？
どうやら、「色」、カラーカーブの中の「チャンネル」というところから色が選べるようになっていて、下の画像だと、カラーカーブの左上あたりに「Blue」と表示されているところが、私が選んだ場所です。
青いラインに変わっているのが見えます。
すっごいなあ、こんなことできるなんて・・・🧐
感動ものです。
そして適当に空を選んだところを、ぐっと上に上げてみました。
海もなんだか青っぽくなった感じがします。
確かに空の青みが濃くなってる・・。
サチュレーションを上げてみる
サチュレーションとは彩度のことで、そくを調整するとぐっと鮮やかになる。
「色」から色相、彩度のところのメニューを出してみる。
そして、どうしよっかな・・・
芝生の緑がなんだかどよんと淀んでいるので、もっと鮮やかにしてみよう。
緑のボタンをクリックしてみて、彩度（私の画面だとSaturation）のところをぐっと右に引っ張ってみた。
緑の芝生が鮮やかになりました。
どのくらい上げるかは適当なんですが、それはお好みということですね。
こんな感じでいろいろいじれるとわかると、写真の楽しみ方がぐっと増えるなあと思いました。
なんと言っても楽しい！
しっかしこの「gimp」って無料ソフト、超優秀で本当にびっくりしてしまいました。
ありがたい世の中だ・・・😌
写真をなんとなく撮っている方は、ぜひいろいろ加工して楽しんでみて欲しいなと思います🐚
[http://:title]
英語日記を書き始めて１ヶ月。初心者が英語を書くために使用したもの（グラマリーで英語日記）
英語日記をつけはじめて約１ヶ月。
よく英語で日記をつけるといいよ、なんていうので私もなんとなく書くことにした。
そこでまだたった１ヶ月ちょいだけど、やってみての個人的感想を書きます。
結論からいいますと、１ヶ月でも効果は感じられたのですが、その具体的な方法をご紹介します。
- まず英語で書き終わるまでの所要時間を白状
- 書く頻度
- エクセルでまず日本語日記を書く
- Grammarly
- Grammarlyが適切な表現を提示してくれるか？
- DMM英会話なんてuKnow?
- Google翻訳
- Grammarly Blog
まず英語で書き終わるまでの所要時間を白状
私のTOEICは５７０点ちょっとです。
それも１０年以上前(^o^;
その私が約４００文字の日本語を英語に翻訳するまでの所要時間は、１時間半〜２時間です。
個人的には、すっごくかかってます。
疲れます。
他の家事がまったくやれません。
頻繁に子供もほったらかし😅
レベル的にはまだまだ下の下だと思ってます。
書く頻度
英語日記を毎日書いているかというと全然そんなわけはなく、３日に１回ぐらいです。
それぐらいの頻度ではじめてから１ヶ月ちょい。
毎日書くのがベストですが、なにせ２時間近くかかっているものを毎日続けるのは私には不可能です。
他にもやることがありますし。
それでもなんとか続けるためには？と考えた結果「３日に１回でも書ければ御の字としよう」ということでした。
ハードルはなるべく低くが続く基本だそうです。
なにしろ少しづつでも続けなければ上達しない。
それでも続けられなかったらそれはそれでいいと思いますが、最悪３日に１回書けなくてもいいやと思って取り組んでいます。
エクセルでまず日本語日記を書く
まずどこでもいいので日本語で日記を短めに書きます。
短めといっても長さは人それぞれなので、個人的には１日ざっと思ったことを書く程度。
大体４００字〜５００字くらいでしょうか。
私はMacのnumbersという表計算ソフトに入力して、その隣の列に英語に訳すという感じです。
しかし全く英語で文章なんて書いたことない自分が書けるわけありません(・。・;
補助的なツールがなければ無理。
そこでいろいろ探してみて、これはと思ったものを使用することにしました。
Grammarly
検索していたら、Grammarlyという英語で書いた文章のミスや不適切な使い方などを、適切な単語や表現で書くよう提案してくれるサービスがありました。
無料で始められるのですが、よりきめ細やかな指摘をしてくれるサービスはプレミアムで有料になります。
My Grammarlyってとこに、自分の文章を書いていきます。
私はそれぞれ日付を書いてタイトルにし、日記として保存しています。
私は日記を書いてそれを校正してもらっていますが、使用してみての感想は、これはちょっとしたレポートなど長めの文章や、さらにはもっと長い論文のようなものを校正するときにその効果が発揮されるような気がしました。
ある程度英語がスラスラ書ける人が、イージーミスを拾ってもらうみたいな。
しかも自分はプレミアムに入っていて18ドルを月に支払っているので、書いているのが単なる日記というのもあって、もとがあまり取れてないような気が・・・(^o^;
それでも日記が真っ赤に校正されたりするので、ただの日記だからと謙遜せずにこれは英語の上達のためと、堂々と使って月１８ドル支払うことに今のところはしています。
Grammarlyが適切な表現を提示してくれるか？
英語初心者の私の当面の問題としては、英語日記を書いてみて「いったいこの表現がこの場合に適切か？」ということが自分でわからないということです。
とりあえず自分の言いたいことを表現する熟語などはわかったが、実際問題その言い回しおかしくない？的な、日本語だったら必ずわかることがわからないんです。
それに関しては、Grammarlyではちと難しいかなと感じました。
何度も使用してくどい表現や、wordyといって言葉使い的におかしな点は確かに指摘してくれるんですが・・・
文法的におかしくなかったらスルーしてしまうようなところも、あくまで初心者の所見ですがあるような気がします😅
どうなんだろ😬
DMM英会話なんてuKnow?
そこで私がもう１つ補助的に使っているのが
DMM英会話なんてuKnow?です。
これは検索窓に知りたい言い回しを入力すると、英語が達者な方たちが回答した結果がみられます。
かなりの率でひっかかりますので、ほとんど知りたい表現は何かしら見つかると言っていいでしょう。
個人的にこれはおすすめです。
Google翻訳
やっぱこれですね(^o^;
ググってるだけで、勝手に翻訳が上部に表示されたりしますもんね。
日本語で入力して英語に翻訳してくれたりして、かなり助けてもらっています。
もちろんおかしな翻訳も出てくるので、それはあくまで自分の知りたい表現を見つける手助け程度としてですが、それでもすごく便利で重宝しています。
ありがとうございます、Google様😍
英語日記をただ書くだけでなく、英語で文章を読むということも大事。
それで私はTwitterで外国の新聞の記事を拾って、それを読んでいます。
知らなかったのですが、今はGoogleさんが翻訳してくれるんですね！
翻訳って押すところがあって、わからない単語などがあったら翻訳しちゃえばわかっちゃいます。
すごい世の中や〜。
Grammarly Blog
これはGrammarlyの中のBlogってとこから飛べるんですが、結構な記事がありまして、それを読んでみることがとてもいい勉強になると思いました。
接続詞などバンバンでてきますし、「おお、こういうときはこんな接続詞使うんだ〜！」と感動したりして、やはりネイティブの書いたものを読むことは必要だと実感しています。
文章の書き方関連の記事も多いですが、その他のトピックもありますので結構おもしろいです。
でも・・・結構ひと記事読むのに時間かかります(^o^;
だから家事やりながら、スープ煮てる間に立ちながらちょこちょく読むとか、隙間時間で少しづつです。
いや〜しかし、やはり英語の勉強は長いスパンで考える必要があると思いました。
一長一短には上達しない。
たった１ヶ月ですが、なんとなく文章の形を作るのがスムーズになってきたような気がします。
しかし、日本語の日記を翻訳するとき痛感したことは、自分は日々の出来事、感じたことをほとんど英語で表現できないということです。
日本語でこんなに些細なことを書いていて、何も難しいことを書いていないのにです。
しかし日常必要な表現は、日記に書くようなことだったりします。
身の回りの出来事が表現できれば、外国旅行もそんなに怖くないかもしれない。
そのためには、年単位でコツコツ少しづつですね。
写真トレースでイラストを描く（超初心者が挑む）
最近始めた画像編集ソフト「gimp」
すごい機能がたくさんあって、すっかりハマってしまっています。
これをある程度使いこないたい！と、最近購入した参考書と一緒にスキマ時間に練習しています。
今回使用した参考書はこれ！
ド素人の私でも理解できた本でしたので超おすすめです。
[http://:title]
今回挑戦したのは、写真をトレースしてキャラクター風にするというもの。
感動モノだった〜！
まずは写真選び
何を選んだかと言うと、私の大好きな女優さんの写真をググってそれをトレースしちゃいました(^o^;
綾瀬はるかさんなんですけどね。
とってもラブリーです。
そしてそれをペンでトレースするんですが、ペンで描くトラッドパッド？のようなものがないのでマウスでやりました。
マウスでトレース
すっごいグタグタになるんだろうな〜と思っていましたが、ブレ補正とかツールオプションで動的特性を登録できて、それに筆圧なども入力しました。
トレースしているときすっかり忘れていたので、マウスをギュッと圧力を下に加えたら筆圧で太く描けるのかは不明(^o^;
確かめろよ！って感じですが、、、パッドにペンで描くようなものでしたら、多分筆圧を加えれば線が太くなるのでしょう。
でもマウスで描いてみたら、手ブレ補正をしただけあって全然ブレない！
すごいな〜
疲れが全然ちがうもん。
この機能はfire alpacaとかにもあるのでしょうか。
以前fire alpacaでピカチュウのイラストを描いたときは、まあ苦労した苦労した・・・ブレブレでしたから（汗）
もし手ブレ機能あったらfire alpacaさん、ごめんなさい(^o^;
cyaranporanmama.hatenablog.com
墨だまり
初めて知った言葉なんですが、これは線画を描いているときに交わる場所に墨がたまっているように描画するということなんですね。
単純に垂直に交わっているよりも、立体感や暖かみも感じられます。
私が描き加えた墨だまりは下手くそですが、こんな感じ。
色塗り
これは普通に色塗りレイヤーを作って、教本を参考に似たような色で塗りました。
色の選定とかってどうするんでしょう。
適当に髪はこんな色にしようかな〜みたいな感じでパレットから選んで塗る感じでいいと思いますが、教本にはRGBの数値で色を指定してくれていました。
キャラクター風に目を大きく
教本によると、キャラクター風にするには目を大きくするのがポイントらしく、その大きくした目を作るためには、
・まず目の下半分を投げわで選択
・そしてそれを下にずらす
・上下の隙間をつなぐ
それだけで目が大きくなります。
そのとおりやってみたのが、タイトルの画像です。
だけどその前に、そのまんまトレースした目のバージョンもやってみたくて、目を大きくする前にためしに色塗りまでやってみました。
これ。
こっちのほうが本人に近い？（下手なので、それでもいまいちですが・・）
目を大きくしたものも、なんだかうまくできなかったので・・・どっちがいいかわかりませんが、まあいいや。
一応、違いとして載せました。
トレースは楽しい！
感想としては、とにかく楽しい！の一言でした。
イラストが下手なのに、トレースすればそれなりに形が作られる。
ガウスぼかしして、オーバーレイしてのせると、光ったような、ほんわかしたような印象に。
おもしろい！
ちょっとソフトがそれなりに使えるようになっちゃった？みたいな錯覚になります。
色塗りのときの色選びも結構大事だな〜と感じました。
あと、元画像をトレースしたレイヤーの上にオーバーレイで重ねてみたら！
レイヤーは不透明度５０％ぐらいだったんですが、元画像の色がぼんやりすけて、すっごい素敵にもなりました❗
うおお〜❗って思いましたもん。
奥が深そうですね〜😁
それでも罪悪感が・・・
今日は台風で家にいて、幼稚園も休ませてって感じで時間があったのでトライしてみたんですが、あっという間に時間は経つやら、子供はほったらかしになるやら。
あまりにもやりたくて、子供はyoutube見せてましたもん。
でもなんか、相手してあげないと悪いような、もっと家事しないといけないような・・・
そんな気になることありません？
子供ほったらかしにしてるから、脇で好きなことしててもなんか気が急いてしまう、みたいな。
早く終わらせて相手をしないと・・・なんて。
なんでしょうね？
自分の好きなことしてるんだから、堂々と、しかも好きなことしてる時間があることを喜んでもいいんですが・・・😅
だって、やりながら御飯作ったりしてるし。
なんて言い訳ついしちゃうのは、まあ普通なことなんでしょうかねえ。
gimpでアニメ風イラストに挑戦その２
少し前、画像のイラスト化という本を読んで痛く感動し、どうしてもやってみたくなった画像のイラスト化。
一言でいうと、イラスト化やアニメ風に加工するってすっごく楽しくておすすめです。
ちなみにこれが私が痛く感動したイラスト化の本。
めちゃくちゃキレイで美しい〜😍
[http://:title]
ド素人の自分がなんとなく使ってみたツール
ただそのときは、右も左もわからずとにかく検索しまくって、なんとなく自分なりにやってみた。
そのときに使ったツールが、motion5やfire alpacaなど。
comic風に変換してみたり、レンズフレアを入れて明るくしてみたり、カラー調整してみたり。
まあ時間がかかった、かかった😅
cyaranporanmama.hatenablog.com
その時の苦しみぬいて作成した完成作品はこちら。
青みもいれると今っぽくなるということで、入れてみたけどなんか変？
素晴らしい無料画像編集ソフト「gimp」
他に何かツールはないか〜？と検索していたらあった。
「gimp」
なんとなんと、すばらしいソフトではないか！
しかもネットに情報が沢山溢れている。
しばらく頑張ってネットで使い方を調べて、ウンウン唸りながら基本的な操作を学んでいたんだけど、どうもまとまった情報が欲しくなって本を買うことにした。
その本がこちら。
[http://:title]
リファレンスもついていて、結構いい。
初心者におすすめ。
motion5なんて本屋にいっても全然ないんだけど・・・gimpはこんな素晴らしい本がありました。
gimpでド素人が加工した結果
そして、前回なんか変？だった画像を今度はgimpで加工してみた。
上記の本で漫画風への加工の仕方が説明してあったので、それを参考に。
こんな感じ。
キラキラがわざとらしい？（汗）
手順としては、水彩画風にしてから、線画を抽出する。
その線画はマスクで隠してから、手前のところは見えるようにしたんだけど、全然見えない・・・（汗）
本のサンプルファイルで作ったら、とてもキレイに線画が見えたんだけど、自分の画像で適当にいじってみると難しい。
線画をもう少し濃く、コントラストで調節しないとだめかなあ・・・
でもあれ以上濃くならなかった。
うーん、サンプルファイルはキレイに線画が抽出できたんだけど、画素数とか使用する画像によるのかしら❓
あとは、色をのせたり、キラキラを追加したり。
あとはいろいろな画像で試してみるべし❗
楽しいです、結構😍
中年になってからの趣味でやるパソコンって面白い。
にほんブログ村