コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

わたしはバッタになりたい

バッタになりたい……

もう生きるのに疲れました。

そうだバッタがいい。バッタの寿命は一年。バッタだったら越冬できずに安らかに寿命を迎えることが出来る。所詮は虫だからどこで野垂死のうが誰も心配することはありません。社会に適応する必要もない、人間としてコミュニケーションに苦労する必要もない、なんのしがらみも心配することがない。わたしはバッタになりたい。

仮面ライダーBLACK Blu‐ray BOX 1 [Blu-ray]

仮面ライダーBLACK Blu‐ray BOX 1 [Blu-ray]






ごめんふざけた

まあ、毎日憂鬱なことは変わりないんだけどね。バッタはやっぱ無理かな。んで、なんでこんなタイトルなのかといいますと、Googleの初心者向けのプログラミング学習ツールのWeb版が公開されたってのを知ってちょっとやってみたくなったからです。

これやってみる。
learn.grasshopper.app
配列からオブジェクト指向までさくさくできるみたいなこと書かれてたからどんなものか触ってみることにします。


■ 基礎編

コーディング基礎編やっていきます。
f:id:andron:20191014003511p:plain
終えました。

選定している言語はJavaScriptっぽい。というかサイトにJavaScriptって書いてあった。

Learn with fun, quick lessons on your phone that teach you to write real JavaScript.

試した感覚Progateアプリ版っぽい感じがする……。Webでのレスポンスはあんまり良い感じはしない……。コース内容の方はやってみた感じ他の初心者向け講座とかで見なかったのがこの辺りの機能。大体ES6機能。
String.prototype.includes() - JavaScript | MDN
for...of - JavaScript | MDN
スプレッド構文 - JavaScript | MDN





■ Web開発編

Web開発編やっていきます。
f:id:andron:20191014003518p:plain
終えました。

大抵のWeb開発講座の最初の方ってHTML/CSSだけで終わってしまうんだけど、こっちはがっつりJavaScriptって感じ。createElementappendChildをフル活用してJSだけでWebページつくろうみたいな勢いのレッスンだった。

let something = document.createElement('追加したい要素');
something.textContent = 'テキスト';
document.body.appendChild(something);

割とこれでごり押してくる……。



完走した感想

とりあえずWeb版での感想。オブジェクト指向できるみたいなふれこみあったからやってみたけど見た感じどれが該当しているかわからなかった。あ、ドキュメントオブジェクトはめっちゃいじってました。それをいじることが世間的にはオブジェクト指向という可能性が微レ存?僕にはよくわからない…………。

初心者だからデザインを学ぶことにした 6th

6回目です

僕はあと何回やれば初心者とかいうのを外していいんですかね…?まあ、それで食っていけなきゃ素人だし永遠と初心者を名乗らざる得ないんだろうな。まあいいや。某デザイン学習サイトのネタを終えたのでその話をしていきます。


前回記事
inujini.hatenablog.com


新たに色々と更新

そんなわけで久しぶりにデザインネタができました。

■ アイコンをつくった
・鉛筆アイコン編
今回はペンアイコンの作成です。ピクトグラム的なアイコンは四角や三角などのシンプルな図形の組み合わせで作れますってことだそうです。


f:id:andron:20191012092322p:plain
Inkscapeの場合は、回転と拡大・縮小がこんな感じになっているのでショートカットキーを忘れているとなかなか直感的に動かせない(1敗)。


f:id:andron:20191012092330p:plain
パーツを組み合わせて完成です。そんなこんなでこんなんできます。


・通知アイコン編
同じように図形を組み合わせていきます。イラレと違ってパーツの組み合わせが難しいので以下機能をつかって削ったりつけ足したりしながらアイコンを作っていきます。

f:id:andron:20191012094441p:plainf:id:andron:20191012094558p:plain
んで、できました。元ネタよりも大分丸っこいんですけど個人的にはこれでもありなんじゃねということでこれで。デザインって正解ないからね……。


■ バナーをつくった

f:id:andron:20191012121050p:plain
色々なサイズのバナーをつくろうってお題だったのでつくってみた。実践的やな(?)。納得いかない点もあるけどいじってると無限に時間が溶けるしでこれで。

このレッスンと関係ないけども、その昔僕が聞いた情報だとロゴ周りは絶対にいじって*1はいけないって聞いたことあるんですよね。そういうのをやるとクレームとかになるから。だから背景色で被ったりしたら良い感じの素材写真とかを工夫しないと云々みたいなことを聞いたことがある。まあ、真相は僕知らないです。



■ LP制作

某レッスン、これ実際にページまで作る感じなのかカンプで完成なのかよくわからない。とりあえずFigmaで「無農薬野菜の配達サービス」のLPつくってみた。

Figma
これで共有されるはず……。どうすかね?

ちなみに元のレッスンはPhotoshopで作るそうです。




といった感じの内容でした。久しぶりにFigma使った。ところどころ利用しているツール違うから学びになってるのかと言われたら謎。まあデザインツールはあくまでツールだから……。


つづく

*1:色を変更したり、ドロップシャドウをつけたり

おくりびと(※タイトルと記事内容は一切関係ありません)

僕はこういうテキスト送りを作りたいんだよ!

僕はバーバルコミュニケーションとかいうやつが致命的に苦手で口で説明することが出来ないのだ。だから、まずはこれを見てほしい。
f:id:andron:20191011002817g:plain
そう、僕は海外のインディーズゲームとかでよくでてくるこのふにゃふにゃ動きながら文字送りをするアニメーションが作りたかったんだよ!んでAviUtilいじっててようやく作れたわけだ。やっとできた。そして夜になってた。んでですね。僕は鳥頭に定評があるので、ここに記事投稿をしないとどうやって作るのか忘れてしまうので備忘録を兼ねた投稿をしようと思う。

つくりかた

まずAviUtilを起動して[メディアオブジェクトの追加 -> フィルタ効果の追加 -> スクリプト制御]を選択します。
f:id:andron:20191011003433p:plain

んでスクリプトに以下の記述をします。

l = 2.5
r = 360*obj.time/2
obj.ox = obj.ox + math.sin(r*math.pi/180)*l
obj.oy = obj.oy - math.cos(r*math.pi/180)*l

んでテキストの[文字毎の個別オブジェクト]にチェックします。
f:id:andron:20191011004414p:plain

これで先ほどの文字送りができます。やったぜ!


おわり。


今日は勢いだけでブログ書いてしまった……。むしゃくしゃしてやった。反省はしていない。

おくりびと [DVD]

おくりびと [DVD]