【Javascript勉強中】Object.definePropertiesとObject.definePropertyの違い
オブジェクトのプロパティの属性を変更したりするところで躓きました。
Object.defineProperties(オブジェクト,{
プロパティ1:{
configurable:false,
enumerable:false,
writable:true,
プロパティ2:{
configurable:true,
enumerable:true,
writable:false,
})
「configurable」の挙動がよくわからなかったんで、こいつはスルーします。
↑のように書くと、
console.log(Object.keys(オブジェクト))
で「プロパティ1」は列挙されなくなりました。
オブジェクト.プロパティ1="上書きした値1"
オブジェクト.プロパティ2="上書きした値2"
で値を上書きしてconsole.log(オブジェクト)でコンソール上に出力すると、「プロパティ1: "上書きした値1", プロパティ2: "値2"」と出力されて、「writable」で「true」としたプロパティ1の値が上書きされました。
なるほど、ふむふむ…？
次に、Object.definePropertyを書いてみましたがエラーになってうまくいかなかったので、原因を調べて、Object.definePropertiesとの違いをまとめました。
原因は参考書の書き方にあった。
最初の行が「let オブジェクト={}」になっているのが諸悪の根源でした。
「Object.defineProperty」はすでに指定されているプロパティに対して属性を設定するようです。
この書き方だと空のオブジェクトを上書きできると思いますよね？？
確かにObject.definePropertiesはオブジェクトが空でも使えました。
Object.definePropertyは先にプロパティがないと使えないということが分かってよかったです。
また、思わず朱書きしちゃったけど、プロパティ名はダブルクォテーションで囲んでカンマ区切りにしないといけないみたいです。
あと、Object.definePropertiesも、Object.definePropertyも、先にオブジェクトに内容をちゃんと書いておけば「value」の指定は上書きしない限り書かなくてもいいみたいです。
【Javascript勉強中】Dateで使うメソッド
今日は「日付を扱ってみよう」ってのやってます。
なんか参考書にのってるの以外もメソッドってのがたくさんあるみたいでネットで調べましたら、Date - JavaScript | MDNっていうサイトですごくまとまっていました。
ただ、アホがみて理解できるはずないので、一覧にして整理しました。
基本的な日付・日時を取得・設定するメソッド一覧
日付・日時の表示方法・標準時変換をするメソッド
「月」を返す値が「0」はじまりなのが厄介なやつですね。
「1」足さないといけないのか…。
【Javascript勉強中】複数の配列を比較する
DTPの仕事をしていると、「もっと簡単に連続処理したい」とか「自動化したい」という欲望がわきます。そんなときは、ネットの神々のスクリプトをお借りしているのですが、読めもしないんです。自分でくみ上げられなくても、内容を多少理解せねばならぬと思い、正月にJavascriptの参考書を買いました。
基本的な部分をざっと読んで、最近になって実際に打ち込みながら理解していこうと思ったのですが、全然理解できない。
正直身につかなかったら惨めだから、勉強しているとか言いたくないんですが、本当に、本当に、全然理解できないので、ブログにアウトプットしていこうと思います。
本当に身につかないかもしれないので、表に出したくはないのですが、あえて自分を追い詰めていこうと思います。
functionにifを使った関数を定義する
今やっているのは「関数を使ってみよう」というところです。
その前までに、配列とfor文をやってました。
全く理解できない。
例として「4文字以上の単語を頭文字3文字に省略するのにはifを使いますが、functionに定義して関数を呼び出して汎用的に使いましょう」というようなものです。
let sweets1 = "シフォンケーキ"
let sweets2 = "ガトーショコラ"
let sweets3 = "タルト"
let sweetsCheck1 = sweetsCheck(sweets1)
let sweetsCheck2 = sweetsCheck(sweets2)
let sweetsCheck3 = sweetsCheck(sweets3)
let sweetsCheck4 = sweetsCheck(sweets4)
let sweetsCheck5 = sweetsCheck("レアチーズケーキ")
console.log(sweetsCheck1)
console.log(sweetsCheck2)
console.log(sweetsCheck3)
console.log(sweetsCheck4)
console.log(sweetsCheck5)
これは分かった。参考書もとても分かりやすく書いてくれていて大変助かります。ありがとうありがとう。
これでいうとsweetsCheckという関数にsweets1、sweets2・・・といった変数や「レアチーズケーキ」といった単語を処理させることができるということか･･･。
きっとreturnで返り値を設定できるってことを示すためにここで出してくれてるんだろうなと思うんですが、素人的には↓じゃダメなんだろうか･･･って感じになってしまいます。
sweetsCheck_2(sweets1)
sweetsCheck_2(sweets2)
sweetsCheck_2(sweets3)
sweetsCheck_2(sweets4)
sweetsCheck_2("レアチーズケーキ")
全然理解できない。自分の頭の悪さに悲しくなる。
returnがないと「let sweetsCheck1 = sweetsCheck(sweets1)」で変数を定義したときに「undefined」になってしまったので、返り値というのはこいういところに入ってくる値なんだとういうフワッとした理解しかできません。
ここで、ふと、配列にも使ってみようと思いました。
教えてもらったことを別のことにも使ってみよう、今すぐに。ってやっていたら全然参考書が進みませんが、性分なので仕方ありません。
早速配列で使ってみよう
こういう配列を用意してみました。
参考書は天気や果物を例にしてるんですが、私はケーキが好きなので全部ケーキに変換しています。
この配列から、例えば、「さくさく」を含む配列なら「このケーキをおすすめします」という風にしてみようと思いました。
に対して、
"をおすすめします")}
}
「sweets_seibun2」は「しっとりガトーショコラ」なので、「ガトーショコラはおすすめしません」となりました。
なるほどなるほど。こんな感じこんな感じ。
のところで「Check」という変数を作って「true」と「false」で別の操作をさせることができるみたいだ･･･。
↑だと「true」がはいるので「おすすめします」になると･･･。
なるほど、なるほど。
ということは、「let sweets_konomi = "さくさく"」をHTMLのフォーム入力から取得してHTML上に表示することもできるのでは？
フォーム入力から配列を表示する。
まず、「sweeets_seibunCheck(sweets_seibun3)」ていう指定の仕方だと、一つの配列しか見てません。なら4つの配列をまとめて、
としてみようかな。
まず、コンソールに出力してみよう･･･。
console.log(Osusume[1]+"たっぷりの"+Osusume[2]+Osusume[0]+
"をおすすめします")}
console.log(Osusumeshinai[0]+"はおすすめしません")}
}
え～と、これをHTMLに出力するには、「input」にidを指定して･･･、
<label>あなたの好きなものは？
<input type="text" id="sukinasweets" onchange="getsweets()">
<p id="Osusumesimasu2"></p>
として、「change」になってときの処理をJavascriptで設定するから･･･、入力したら「getsweetse」に「sukinasweets」が入るようにして･･･、
const getsweets = () => {
今まで「let sweets_konomi = "さくさく"」を使っていたところをさっきフォーム入力から取得してきた「sweets_konomi2.value」に変更して･･･、
console.log(Check_matome)
Osusumesimasu2.innerText = Osusume2[1]+"たっぷりの"+
Osusume2[2]+Osusume2[0]+"をおすすめします!"}
Osusumesimasu2.innerText = Osusumeshinai[0]+"はおすすめしません!"}
}
}
こんな感じ？
できた！
このフォームのところは選択式にしてもいいけど、まったくあさってな単語入れると
ってでるな…。
そうか！最後のやつしか出力されてないんだな！？
を例えば「sweets_seibun3」の「フルーツ」を「クリーム」に書き換えたら、
ってなるのか…。やっぱり最後のやつしか出力されないんだな…。
else{Osusumesimasu2.innerText = "あなたにおすすめするケーキはありません"}
あさってな単語が入ったときはこうすれば不自然じゃないな…。
じゃあ、どうしようかな…。
const getsweets = () => {
let anataniha = "あなたには"
let Osusume1 =""
anataniha += Osusume1
Osusume1 = Osusume2[1]+"たっぷりの"+Osusume2[2]+Osusume2[0]+"と"}
}
let AnataniOsusume = anataniha += Osusume1.slice(0,Osusume1.length-1)+
"をおすすめします"
Osusumesimasu2.innerText = AnataniOsusume
}
「と」を消すための「.slice(0,Osusume1.length-1)」の工作が痛い…。
しかもこれだと、あさってな単語が入ると、
ってなっちゃう…。「else」使って単純に
Osusume1 = Osusume2[1]+"たっぷりの"+Osusume2[2]+Osusume2[0]+"と"}
else{Osusume1 = "はおすすめしません"}
ってするわけにもいかないし…。全然理解できない。
の繰り返しだな…。ネットの神々、マジ尊敬するな…。
仕方ないから「for」を追加して、
Osusumeganai
if(!Check_matome1){Osusumeganai = 0}
にして、最後に
if(Osusumeganai="0"){
Osusumesimasu2.innerText = "あなたにおすすめするケーキはありません。"}
を追加して
としてみる…。
なんか不格好なことは分かる。
ここまでやるのに6時間くらいかかってるので、本当に身につく気がしません。
参考書にはこの単元が120分とか書いてあるけど、ここまでで3分の2くらいしか進んでない…。どんだけ頭いい人を想定しているのjか…。
でも、「ブログに書くから確かめよう」と思うと、考えがまとまる気がするし、やってみたことがちゃんとできたか、できなかったかをすぐに振り返ることができた気がします。
【デザインのこと】ドラマを見てるとテキスタイルや配色に目がいってしまう。
結構民放ドラマを見ています。
そこに出てくる人の着ている服のテキスタイルとか、配色に目がいってしまいます。
コメディ要素の強いドラマは特に楽しくて愉快な柄がたくさん出てくるので、見てみてほしいです。
プロミス・シンデレラ
一成の友達の女の子2人
このテキスタイル最高にかわいいです。夏って感じがとてもよく出ているし、タコ・ヤシの木・シャチ・熱帯魚をちりばめた柄が本当にイイ！
お揃いなのも可愛いし、一見柄が違うように見えるんだけど、色違いの同じ柄なのもイイ。
青ベースだとタコさんが際立って、ピンクベースだとシャチが際立つ･･･。2人が並んでいるからこそより良さを発揮していますね。
こんな浮かれぽんちなテキスタイル高校の夏にしかきれませんよ。
お揃いで着ちゃう2人の仲の良さとノリの良さが垣間見えるのもエモみがあってイイですね。
ハコヅメ～たたかう！交番女子～
山田さんのTシャツ
このなんとも言えない表情･･･。
星座という綺麗に収まりそうなモチーフが一気にコミカルに落とし込まれていてとてもよきです。
周りの星座のイラストはリアルテイストで「シック」とか「ノスタルジー」にまとめられそうなのに･･･！このなんとも言えない表情･･･。山田さんと藤さんのシリアスな会話がまったく頭に入ってこない･･･！
さらに↓この一見カタカナに見えるフォント･･･。
「WE ARE ALL OF US STAＲS」が「山モ ムＲモ ムレレ ロチ ∪ら らナムＲら」に見える。
まだドラマやってるので注目してみてください！
【ストック素材のこと】先月からAdobestockに投稿しています。
MIuRA 写真、画像、アセット | Adobe Stock
2021年8月にAdobestockに登録しました。
PIXTA同様有料素材サイトですが、天下のAdobeに作品を投稿できるのはなんだか誇らしい気持ちになってしまいます。
こちらもアナログテクスチャ素材をメインにPIXTAにUPしている作品も上げていこうと思います。
AdobestockではJPEGとEPSは登録できますがPNGが投稿できません。切り抜きの画像が投稿できない･･･？というのは使いにくいのではないかと思いますが、海外でも広く使われているAdobeでその顧客層に作品が見てもらえるかもしれいないと思うと投稿する価値は大きいと思っています。
上の画像にもありますが、アナログで描いたイラストは切り抜きまでしていますから、PIXTAにはPNGも投稿しています。
背景透明で使いたいときはPIXTAから購入した方が手間が省けます。
ただ、PIXTAの審査はJPEGから販売開始、PNGとEPSの審査には時間がかかるので最初はPNGもEPSもない状態での販売になります。期間としては1週間以上かかることもあるので、その間に作品を閲覧している方にはPNGもEPSもない作品になってしまいますね。
Adobestockはどうなんだろう･･･？今度ベクターデータも投稿してみようと思います。
【ストック素材のこと】ずっとPIXTAに投稿しています。
かれこれ7年以上PIXTAに投稿を続けています。
内容は小さな手描きカットからデジタルカット、アナログのテクスチャ素材など、いわゆる節操なしな状態です。
作風とか特に気にせずできたものを何も考えずに投稿しています。
だからなのか、ダウンロードは全然回っていません。
まあ、1年近く放置したりしてますし、そんなものですよね。
今後も作風やジャンルを絞っていく予定はありません。これが私だからっていうのもありますが、できるものが副産物的なものが多いからです。
今日は特に副産物要素の強いテクスチャ素材について紹介したいと思います。
アナログ絵描きにありがちな妙な収集癖
これは公表していいのか分かりませんが、アナログで絵を描いている人には妙な収集癖があることがあります。
って思いますよね。
どういうことかというと、アナログ作品の制作中に出る「カス」のようなものをなんか捨てられない・ビンに詰めてとっておくなどです。
具体的にいうと、色鉛筆の削りカスをとっておく、お裁縫系だと糸くずをとっておくなどです。
私の場合、「アクリル絵の下地を撮影しておく」「絵具のパレットを撮影しておく」「絵具をぬぐったティッシュを綺麗にとっておく」があります。
ますます、何それですかね？
テクスチャ素材のビフォ～アフタ～
具体的に紹介していきます。
↓
この絵の下地がこのテクスチャ素材です。
これは林に棲むカラフルな小鳥と指揮をする女の子の絵です。
何も決めずに描き始めてるので、いつのまにかこういう絵になります。
↓
この絵の下地がこのテクスチャ素材です。
タイトルは日の丸弁当。
食う気満々の女の子です。
↓
この絵の下地がこのテクスチャ素材です。
前見て進め。
先の見えない色味になったのでこうなったんじゃないかなと思います。
↓
人類は海の一番深い場所には未踏なんです。怖いです。
↓
こういう人をメインに描くのも大好きです。
↓
この下地はお花っぽくしましたが全部塗りつぶしました。
ピンクの向こう側にかすかにお花が見えるんですけど、私はこういうのがとても好きです。
まとめ
現在、PIXTA、Adobestock、イラストAC、イラストボックス、素材ラボに投稿しています。
それぞれのサイトでUPできるデータ形式が異なりますし、料金形態、著作権の扱い、そのほか諸々が全然違うので、面白いです。
テクスチャ素材を投稿しているのはPIXTAとAdobestockだけです。
ダウンロードはそんなに回りませんが、今度無職になるので、お小遣い程度に収入が入ってくるといいなと思っています。
創作の副産物とはいっても、下地の色とかすごい好きなのでこれからも投稿していきます。
【手作業のこと】絵を入れるフレーム（額）を木材で自作する。
自分の絵や写真などの作品を額に入れて飾りたい、親馬鹿・作者馬鹿かも知りませんがそう思っちゃったりしますよね。
でもちょうどいいサイズがなかったり、オーダーするほど予算はかけられない･･･。そもそも市販品でも結構なお値段しますよね。
こうなってくると自作するしかないんじゃないか？ フレームまでが自分の作品ということにもなるし、そういうのはやぶさかではないぞ、と思って作り方を調べてきましたが、なかなか難しいなと今まで自作するのをためらっていました。
そんな私がフレーム自作に踏み切って作り上げるまでのことを書いていきます。
今回は230ｍｍ四方のボードに5ｍｍの余白を付けて作った砂絵用のフレームを作ります。
自作フレームのハードル
手作業大好きっ子の私が今までフレーム自作に踏み切れなかった理由は以下にあります。
- ノコギリを使うのが下手・まっすぐ切れない
- 直角をうまく組み立て、かかりを付けるのが困難そう
私にとってこの二つは大きな障壁です。
このサイト（額縁の自作を困難にする6つのハードル | 額縁のタカハシ）では自作フレームの難しさについてこう書かれています。
①斜め45度にカットできない。
⇒額縁が四角形になりません。
②組み上げられない。⇒上に同じく、額縁が四角形になりません。
③かかりを作れない。⇒ガラスやアクリルを付けることが難しい。
④デザインの自由度がない。⇒無骨な仕上がり以外は目指せません。
⑤観賞価値を高める額縁が作れない。⇒大切な品物はプロへの相談をおすすめします。
⑥アクリルなどの部材に思わぬコストが掛かる。⇒買った方が安かった。。。なんてことも。
私の障壁は①②③です。
④⑤については自作する以上そこまで望んでいないし、そもそも高めるだけの「観賞価値」のある作品でもないし、発表する場でもないんです。絢爛豪華な額に入れる絵でもないし、荘厳な額を飾るおうちでもありません。
⑥のアクリル、これも本当にその通りで、めっちゃ高くつきます。
ただ私の作品は砂絵なので、ガラスやアクリルはない方が作品の良さが伝わります。砂も落ちちゃったりするし、普段はPP袋に入れておいてガチ砂絵展の時のような場合にだけ出して展示すればよいので、ガラスやアクリルは必要ないのです。
でも、アクリル板については端切れを安く売っていることもあるので、ホームセンターなどチェックするとよいと思います。
というわけで、ノコギリを使うのが下手・まっすぐ切れない、直角をうまく組み立て、かかりを付けるのが困難そうの2点についてどうやって解決したか書いていきます。
木材のカットを最小限に抑える。
ノコギリで木を切るとき「キュイ～ン」とか「キュキュキュキュ」とか信じられない音がするくらいノコギリを使うのが下手です。
カットを最小限にするなら「斜め45度のカット」だけにするしかありません。
ということは、細長い木材を買ってきて、↓のように切ればいいという結論になります。
厚さ12mm、幅42mm（実測41mm）、長さ2000ｍｍの木材を発見しました。
直角を組み立てられ、かかりを生み出すために。
フレームの組み立てを困難にする一番の要因は斜め45度にカットした木を直角に固定しなければいけないということです。
絶対に直角にする。
↑のようにボンドを付けて固定できると思いますか？
正確に45度に切れないと隙間ができますし、↓縦にまっすぐ切れないとやっぱり隙間ができます。
額縁の自作を困難にする6つのハードル にもあるように、Vネールやチキリというもので組み立てるにしても隙間があったら使えないし、そもそも素人の制作環境・知識・技術では不可能なのは明白です。
そうなると隙間を気にせず直角に組み立てるしかありません。
かと言って額縁の自作を困難にする6つのハードルで紹介されているL字金具を使うとかかりを付けられません。
そこで、かかりにもなって直角を固定する手立てを講じるしかないのです。
薄い板を裏に貼る。
薄い板を↓のように貼ってしまえば！？と思いいたりました。
裏面は壁に飾ったら見えません。
裏面は壁に飾ったら見えません。
裏面は壁に飾ったら見えません。
横から見るとこんな感じです。
上が壁に向かう方で下が絵が見える方になってます。
上から緑はカバー、黄色が絵、赤は余白紙になります。
私の場合、絵も厚くないし、マットも可愛い厚紙でいいので、木の厚みは4mmのものを見つけてきました。
貧乏人なので、幅50ｍｍの板を↓の方に切って無駄をなくします。
直線カットがあるけど曲がってもどうせ裏面だし気にしません。
裏面は壁に飾ったら見えません。
材料仕入れとお値段。
木材
木材は以下のようなものを購入しました。これでフレーム1個分になります。
米松プレーナー：110円、シナ合板：110円、計220円でした。
絵が厚い、ガラス・アクリル板を入れたい、マットを使いたい場合はシナ合板にあたるものをもっと厚みのあるものにするか、何枚か重ねるといいと思います。
額パーツ
額の裏につける押さえパーツと吊るし用のパーツが必要です。
上はトンボという名前らしいです。150円くらいでした。
下はD型吊カンというらしいです。250円くらいでした。
あと、紐ですね。1.5ｍで300円くらいのがあったんですが、貧乏人なので、未ざらし紐70ｍ・750円を買いました。
その他
紙やすり（1枚30円くらい）とボンドもあるといいですが、私は家に残っていたので買いませんでした。
あと、ノコギリは追加購入しました。小さくて小回りが利きそうなのが売ってたので。1500円くらいでした。
他に、塗料はお好きなものを使うといいと思います。塗料はピンキリです。
材料は以上です。初期費用は結構かかりますね。懐がいたたたたたたたたた･･･
実作業
いよいよ実作業です。
材料のカット
木に線を引いてひたすら切ります。
木を固定する器具なんてないし、ちょうどいい机もないから床で発泡スチロールの箱（お歳暮のアイスが入ってた）を台替わりに切っていきます。
上の写真を見てください。箱に四角い穴があいてるのが見えると思います。これは裏に貼る板を切るための穴です。
貧乏人なので真ん中から切るためにあけました。木に少しずつ傷をつけると小さな穴があくので、真ん中からでも切ることができました。薄い板なので、結構簡単に切れます。
切り終わったら紙やすりで角を少し丸くします。
斜めカットした部分はサカムケがなくなる程度でよいですが、長い直線部分は指で触って滑らかになる程度にはやすった方がよいです。触り心地的に。
あと木の表面もざらついてたので軽くやすりました。面倒なので、中目で終わり！
木の粉がつくので適当な布で綺麗にふきます。
最初ティッシュで拭いたら悪化したので、布がいいです。
組み立て
切った木を組み合わせて一番隙間ができない組み合わせを探します。
こんな感じかなと思ったらボンドで貼っていきます。
このとき、パーツがズレないように押さえなどあるといいんですよね。でもそんなもの持ってないし･･･と探していたら見つけました。
部屋のカド！
私の持つカドでここまで直角なものはないですね。ここに合わせて貼っていくことに決めました。
こんな感じでボンドが乾くのを待ちます。
重石。
塗装と隙間対策
乾いたらズレの具合などの確認をします。
- 隙間がどれくらいできているか。
- 角があっているか・はみ出していないか。
- 木の厚みのムラで接合部に段差がないか。
木の厚みにはムラがあります。段差があったり、ズレ・はみ出しができてしまったら、紙ヤスリで削って滑らかにします。
結構はみ出した場合はノコギリで切っちゃいましょう。
隙間対策として、ヤスリで出た木の粉を詰め込む・ボンドを詰め込むで対応しました。おこづかいに余裕があったらちゃんとしたパテを使ってください。パテを詰めたらヤスリで滑らかにします。
ここからは楽しい塗装の時間です。
誤魔化し部分から隠すように塗っていきました。
側面やカドなど塗りづらいところほど丁寧に塗っていきます。
気になるカドの仕上がりは↓こんな感じです。
↑これが一番ひどい隙間でした。
↑こっちはボンドを詰めて塗料で誤魔化しています。
↓こっちは比較的綺麗にできたものです。
絵を入れる。
絵は マット － 絵と合紙 － 裏板 の順で入れていきます。
マットは難しいですね。ああいう厚紙が簡単に手に入らないし、斜めカットを綺麗にやるのは至難の業です。
裏板はベニヤみたいな木製の板やミラボードなどが市販品で見られますが、かかりが4mmだし、費用も嵩むので使いませんでした。
私は厚手のメタル紙をマット代わりに、裏板は2mm厚くらいのボール紙を切って使うことにしました。
ボール紙ってアレです。スケッチブックの裏についてたりするやつです。貧乏人なので、ああいうのとっといちゃうんですよね。
構成はこんな感じです。
絵はフレームより小さいので合紙で囲って中でズレないようにします。
私は四角く穴をあけてますが、長い紙を四方に入れるようにしてもOKです。
裏面はこんな感じです。砂絵は袋に入ってるのでマステで固定してもOKなのです。
金具の取り付け
こういう金具はネジで止めます。
ネジ穴はキリでキリキリしてあけるのがセオリーですが、私は釘を軽く打ち込んで穴をあけてます。
こんな感じ。
吊カンもつけるとこんな感じ。
それから紐です。
チョウチョ結びも上手にできない奴の結び方です。
結ばない、という選択。
反対側はさすがに結びます。
余った分もこんな感じでまとめておきます。
これが正しいかは分かりませんので、自分に合った結び方を検索してみてください。
完成
てな具合で完成しました。
結構頑丈な作りになりましたし、ダイソーなどで売ってる破格のフレームより厚みと重さが出てしっかりしてます。多分材料費単価でもダイソーと張れると思います。
私はこのフレームを3日で8個ほど作れました。
ただ、電動ノコギリが欲しくなった！！！
翌日筋肉痛でしたし、汗だくになって作業して大変だったけど、やっぱり自分で作ったから、
自画自賛しちゃう( ´艸｀)
9月17日のハッピー展にも持っていこう！
