安正まこと：フリーイラストレーター開発日記

画像を用意して

画像を選択すると画像トレースというメニューバーが上に表示されるので適した設定（白黒、写真高解像度）を選んだ後更に詳細設定のできる画像トレースパネルを開く。

方式を左にしてホワイトを無視にチェックを入れると背景が白じゃなくなる。

こんばんは安正です。 progateにまた一ヵ月reactの復習のために課金をしました。 ついでにWEBサービス作りの流れを学ぶためのコースが増えていたので順々にやっています。

昔はVagrantを運用していましたが時間が狂ったりめんどくさくなったのでやめて、今日また使ってみようかなーと手を出しましたがインストールするものが多すぎる、全部のバージョンを管理するのに気が狂いそうと思ったのでやっぱやめました。

mysqlにいちいちログインするのめんどいな、何か楽な方法はないか？と彷徨いましたが無駄なあがきとなりました。

サービスを作る流れのおさらい。（windows） node.jsインストール済みを確認、開発名をつけたフォルダを作って

npm init --yes    //package.jsonが作成される npm i mysql npm i nodemon npm i  react  react-dom

//nodemonの実行 .\\node_modules\\.bin\\nodemon app.js

//package.jsonのscriptによくつかうコマンドをタスクとして登録する "scripts": {    "start": ".\\node_modules\\.bin\\nodemon app.js"  },

//これで npm run start   

//でサーバーが起動できる（jsの内容を変更すると自動で再読み込み）

mysql80によるログイン問題。 以前のバージョンでは ‘mysql_native_password‘ が初期パスワード認証方式だったようだけどもこのバージョンの初期値は　‘caching_sha2_password‘ これにようエラーで作成中のWEBサービスでsqlが読み込めずエラーに なので設定を変える

net start mysql80　//mysql起動 mysql --user=root --password;  //enter押してパスワード入力して起動 //既存ユーザの認証方式の確認方法 SELECT user, host, plugin FROM mysql.user; //sqlのログイン方法の変更 ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'mypasward'; これでローカルサーバーを起動した際にエラーが出なくなりました。 参考元：https://qiita.com/ucan-lab/items/3ae911b7e13287a5b917

書いた記事が一度消えて泣きたい安正です。 take２です。

ただreactを学びたいだけなのに立ちはだかるgulp、webpack、babel。 今日も安定してエラーを吐き出し何とか解決できましたので記録を残しておきます。

gulpを立ち上げると Plugin/Preset files are not allowed to export objects, only functions. というエラーが出てくる。 結果的に言えばWebpackConfigの書き方が以前と違っているせいで起きていたエラーでしょうか。

loders  →  rules　に　query  →  非推奨　というものでした。 こちらがとても参考になりました！ありがとう！ありがとう！ https://qiita.com/tmiki/items/86abc565d06ced78d968

いろんなところを彷徨い歩き.babelrcというファイルを作ったりもしましたが、使わないのであればエラーがでるので削除していいという結果になりました。

◆WebpackConfigの内容◆

const webpackConfig = {   　 　/* ビルドの起点となるファイルの設定 */   　entry: ['./src/js/app.js'],  　/* 出力されるファイルの設定 */   　output: {    　　　　　path: '/js', //出力先のパス    　　　　　filename: 'bundle.js' //出力先のファイル           　 　　　　　},

  module: {         rules: [  　　{              test: /\.(js|jsx)$/, //対象となるファイルの拡張子（正規表現可）  　　　 　　exclude: /node_modules/, //除外するファイル/ディレクトリ（正規表現可） 　　loader: "babel-loader", //仕様するloader        options: {                             presets: ["@babel/preset-env", "@babel/preset-react"]                         }  　　} ]  }, };

module.exports = webpackConfig;

ここに辿りつくまでにbabel-preset-env や babel-react のバージョンが古かったり（新しいのは@がある）presetの指定の仕方が間違っていたりと少し苦労しましたが山を乗り越え今日も気持ちよく眠れそうです。 まぁこういう困難があった方が記憶に残るので願ったりかなったりですけどね。

開発日記はすごく久しぶり！な安正です。 今日はUdemyで購入した講座を進めました。

https://www.udemy.com/share/10256qAEITcVpXQHgH/

公開された日より数年が経っているので講座通りに進めると詰まってしまったりします。 今回詰まって解消したことを覚えているうちに記入します。

動画では　npm init　をターミナルで入力してから　npm i gulp -g　とのことだったのですが自分の環境がwindowsだからなのかエラーで gulp のダウンロードができませんでした。 npm install　をしてからなら無事ダウンロードをすることができました。

次に gulp と　Browsersync　(ローカルサーバーとブラウザの自動リロードをするためのパッケージ）の紐づけについて　gulp　とターミナルで打ち込んだ時サーバーが立ち上がらずエラーが！ これはどうやらglupのバージョンがv4になり仕様が変わってしまったことによるエラーだったようです。

参考：https://satoyan419.com/gulp-v4/

動画では gulpfile.js に

gulp.task('default',['browser-sync']);

と記入する流れだったのですがエラーがでます。

gulp.task('default',gulp.series( gulp.parallel('browser-sync')));

に書き直したら無事立ち上がりました～嬉しかったな！ その後の　wacth　の追加も

gulp.task('default',gulp.series( gulp.parallel('browser-sync', 'watch'))); 

で問題なく動作しました。

こんばんは。 ３Dをがっつり勉強したい気持ちを抑えRails勉強中の安正です。 少しでも費用を抑えたいので無料を大活用してわからないことは調べながらVagrantを運用しています。

一昨日までは「vagrant up」で起動していたVagrant。 特になにも設定をいじっていないのに失敗をしてしまいました。 エラーをみるとどうも「VirtualBox Host-Only Ethernet Adapter #2」というアダプターがねぇ！ってことらしい。

検索してみると同じエラーではあるものの「 VirtualBox」を最新版にしたらできました！という内容が多い。 やってみるも治らず。 VirtualBox で調べても解決しそうにないなと思ったので 「VirtualBox Host-Only Ethernet Adapter #2」 で検索することにしました。 するとどんぴしゃ！求めていた答えが出てきました。（ありがとう、ありがとう）

https://qiita.com/chari/items/f98b9ff1dd10c9f5392d

なるほど、 VirtualBox でアダプターを自分で作っちゃえばよかったんだね。 次に長いことVagrantを更新していなかったのでそっちも最新版に。

https://www.vagrantup.com/downloads.html

インストーラーを実行した後先に進めず「Cancel」しか押せないから「？？」ってなったけど放置したら進めました。（ショボい英語力） その後「vagrant reload」 すると先ほどの記事に書いていなかったエラーが出現。 また出現したエラーのワード「"vboxsf" is not available」で検索。 すると欲しかった答えと解決策が書いてある記事に出会えました！（本当にありがとう、ありがとう）

https://qiita.com/chubura/items/4166585cf3f44e33271d

「 vagrant plugin install vagrant-vbguest 」とコピペして実行。 その後「vagrant up」で立ち上がった～！！ 検索力がいかに大事かわかります。 ネットさえあれば知識がない自分でもどうにかなります。 代行で検索しますって商売が意外といけるかもしれません。

実はVagrantのエラーだと気づく前にPuTTYのエラーだと思ってPuTTYの記事ばっか見ていたんですよ。（真っ暗でタイムアウトエラーになる） ちゃんと英語も読み飛ばさず見ましょう（－－） errorって文字を探せば大体わかる。

こんにちは安正です。 唐突ですが３Dモデリングの世界に参入しました。 学生の頃に授業選択でPCを選んだのですがその時に「PCで自由に何か作品を作りましょう」という課題がありました。 その学校のメインPCはMac。学校なのでショボイ設備。Photoshopで作業をするだけでも固まる止まると散々でした（笑）

おかげで自分はWindows一択です。

周囲はフラッシュで動画を作ったり、HPを作ったりしている中なぜか安正は３Dをやるぜ！と学校のPCに Metasequoia （無料）を勝手にダウンロードして作っていました。ちなみに学校の授業で３Dはやりません。

なのに作ろうとしたのは「うる星やつら」のラムちゃんです。 今の私ならばこういう。「初心者でいきなり人物はやめておけ」と。 結果はスクリーンショットで写すところだけまともに見えるように作り、角度を変えると骨折している残念なものでしたｗ 下級生などを前にプレゼンをしなければいけない課題でしたので作る過程を見せました。 髪の毛をつける前の禿げ頭を載せたら受けたので先生に「受けてよかったね」って言われたのを覚えています。（受けは狙ってなかったんだけど） その結果「自分は３Dが苦手なんだな！」と長年結論付けていました。

そして月日が経ち現在、一ヵ月ぐらい仕事がなかったのでいろんなソフトを触りました。Unity、After Effectsなど。 参考にいろんな作品を見ましたが、凄いと感じるものは３D空間なんですよ。 憧れです。手に届かないから余計憧れます。 遂に我慢ができずblenderに手を出しました。 今だと技術が発展し、３D人口も多いので優しい方がチュートリアル動画を配信してくれています。

「なんていい時代なんだ！」

中でも超参考になった動画です。 https://youtu.be/JYj6e-72RDs

https://youtu.be/m_j-rxnunV8

https://youtu.be/9LhE6VrjCM4

ここに貼っている動画だけではなくシリーズを追いかけて行くといいと思います。自分はこれらのおかげでblenderをやり始めて一週間で基本操作を大方覚えることができました。 観察力とデッサン力が備わっている方ならもう何でも作れるでしょう。

そして今コルトパイソンを作るぞと燃えています。

もうデスクトップはコルトパイソンの画像で埋め尽くされています。 海外で三面図は blueprint と言うらしく（物の名前）+ blueprint でいい資料が見られるようです。 自分も早速 ColtPython blueprint で検索しましたが理想的な三面図には出会えず。古いからかな。 まあいろんな角度の写真が出てくるから大丈夫大丈夫。

で、よく見ると銃の側面には文字やイラストが彫られています。 その素材をillustratorでSVGデータを作ってblenderに読み込むことを昨日チャレンジしました。 もう失敗の連続です！なんせillustratorも初心者なので基本的なことがわかっていません。 その失敗の経験から得た知識を共有したいと思います。 （やっと本題かよ）

まずは入れたい絵を描く。 注意点はかならずパスは途中で途切れることなく一周するように繋ぐこと。

中央の星のようにくり抜きたいことがあると思います。 その方法も記録しておきます。 Shift + Ctrl + F9 でパスファインダーを出しておきます。

これで型抜きはOK。

次はイラストレーターでテキスト入力したものをblenderにインポートするのに必要な作業。

文字を選択して右クリック→アウトラインを作成

書き出したいものを選択してパスのアウトライン。

選択範囲を描きだす。

そしてblenderに行き

インポートすると中心にちっちゃく読み込まれています。 以上で基本的な読み込みが終わりです。 その後の作業は　https://youtu.be/Fq3TQuU9iIM　こちらの23分ぐらいからの作業を見て頂ければわかるでしょう。 チュートリアルを作って頂けるのはありがたいですね！（日本語なのが嬉しい）

こんにちは安正です。 ここ2日ほどWEB制作をやっておりましたが仕事以外での安正は再考しまくって完成に向かっていくタイプなので非効率なことこの上ない。 作業をしていくうちにアイデアが次から次へと湧いてきて当初の予定とはかけ離れていくので仕方がない。 その一部始終をご覧ください。

⇩

⇩

⇩

動画をバーンと表示したり他にもいろいろありましたが 漸く落ち着きました。多分。 背景絵は仮なのでいずれ差し替えます。

右のメニューが曲者でfloat:right;とかじゃどうにもならず どないしたらええんじゃー！と検索しまくったらまず「Sass」という言葉に出会いました。 以前東京で参加した講義で聞いたなってのは覚えていたのですがあまりにも眠かったのでカラムと言っていたということしか覚えていません。 プログラミング初心者の友「Progate」さんとこにあったのでサクッと一日で学習しました。（CSSを使っている人なら使いこなせる内容）

そして次に出会った「 聖杯レイアウト（Holy Grail Layout） 」。 これは――！とアカギの矢木のように電流が走りましたね。 軽く画像で説明しますと

header, footer, float　配置に便利なのができたなぁとつい最近思ったところなのに更に楽な奴がきた！！ ここに書いている内容以外にもいろいろあるようなので興味がある人はディープな世界へ行ってみて下さい。 自分は趣味範囲なのでここに残ります。

学んだ記事　https://ferret-plus.com/8351

こんばんは安正です。 前回のHP制作ですがいつも通り気に食わなくなりストップしました。

イラストを描くもこう、動きが欲しい！ ポインタが合わさってウィンと動くのもいいですが放置してても動いて欲しい。 眺めていて楽しいのがいい。 それを実現するには動画ソフトを学ばなければいけないわけで仕事が無いのをいいことにいろんなソフト触ってます！

Unityの教科書というのを読みながら今チャプター８のうち７まで終わりました。 ゲームとも言えないレベルのゲームなら作れるようになりましたのでクソゲー作りたいですね！ ゆくゆくはパズルゲームが作れたらいいなぁ・・なんて。 横スクロールは素材が必要過ぎて無理だわ。

同時に「はじめよう！作りながら楽しく覚える After Effects 」を読みながら進めてます。 こちらも半分以上終了して基本操作は覚えてきました。 それを読み切ってもこの画像のめちゃくちゃ分厚い本が待ち構えているので頑張ります。

またまた同時に先月ぐらいから描いているシティーハンターの絵も進めています。

夜景が苦しい。

もっとこうした方がいいなぁってのはあるんですが如何せん背景嫌いなのでこの辺で勘弁してくださいと終了 この後AEで夜空を作ってピカピカ光らしたりDeep GlowというAEのプラグインを買ったのでもっと光の演出をやりたいです。 効果音を作れるソフトも購入しようかと検討していて音をはめ込んだりもしたい。汽笛の音作れるかな？

セールになったら買います。

お久しぶりです安正です。 シティーハンターの余熱で勉強放置してました。 前の女の絵はどうしたって感じですが、オリジナル漫画の主人公をTopに飾りました。 大人の主人公が好きなのでおっさん（といっても３０代ぐらいで）創作中。 遠目でみたらまだ誤魔化せるのでまだ見れる絵ですが実際みるとドアップなので物足りない絵です。ドヤ顔すぎたね。 Saiで綺麗な線を引けばよかったと少し後悔。 また気が向いたら変えます。

こちらは雑な設計図。 ・・・やっぱ黒でいくかな。

文字の配置とかアニメーションとかやることを残して終了。 前回のやつを改造するだけなので楽してます。 やりながら思い出しているとはいえやはり期間が空くと「なんもわからへん」に近い状態になっていけませんねぇ。 あとサイズによって調整も加えなければいけないのでまだ少しかかりそうです。（本気を出せば一日で終わるだろうけどめんどくさい）

こちらは線画。

ここでも宣伝しておくよ。 シティーハンターはいいぞ！ ｄアニメストア（月432円）で見放題ですぞー！！

映画の感想はブログに書きました。http://nikki.83masa.capoo.jp/?eid=143　

こんにちは安正です。 しばらく更新をしていませんでしたがProgateさんとこで学びながら作っていました。

HTML＆CSS上級編まで完了。 一つ知識がつく度作っていたHPに反映していたのですが 一番手間取ったのが真ん中のメニューの配置

最初はposition:absoluteで配置していました。 すると真ん中に作ったdivを突き抜けて表示されるではないか！ どうやっても下のfooterが画面上部に表示されてしまうのでfloat:rightを試す。 しかし結果は同じ。 うーん何か打つ手はと悩んでおりましたがProgateの上級編に答えがありました。 空の<div>を作ってその箱に「clear:right」を反映させる。

(HTML)<div class="clear"></div> (CSS).clear{ clear: right;}

空ボックスか～！その発想はなかった！ あとは表示サイズによってレイアウトが変化する方法も学んで大変ためになりました。

ありがとうProgate。 中央メニューのデザインを自分で作れるぐらいには成長しました。 ひとまずこれでHTMLとCSSの勉強は終了します。 次はjavascriptだ！ あと適当ですがillustratorの練習にロゴを作ってみました。

いやぁ、Photoshopに慣れているからillustratorのパスがようわからん。 最終的にはPhotoshopでデザインを完成させてillustratorでなぞるという。 まだまだ修行がいるようです。 印刷会社へのデータ入稿はillustratorのデータでないとダメな場合が多いので そういう時には使っていましたがデザイン作業というのは初めてでここまで手間取るとは思いませんでした。

あと他にも書くことがあったはず・・・なんだっけ。 えーと、あ！思い出した！！

今年１１月にAdobe MAX Japan2018というイベントに参加したのですがそこで知った機能。 Photoshopでもillustratorでもいいのですがダウンロードしていないフォントも試せるという機能です。 素晴らしいのでAdobe Creative Cloudユーザーは是非体感してください。

あともう一つは画像から類似文字を検索できる機能

試してみた結果日本語には弱そう。 使っている文字は検出されませんでしたｗ

昨日の続きでいざアニメーションナビ。 結果的には理想通り動かせました。

ただ自分で自在に操れるほど理解はしておらず 他人が作った理想に近いものをコピペして改造でここに至ります。

::before   ::afterってのがわけわからんちん。

解説しているところで掻い摘んで読んでみたけどなるほどわからん。

header{   position: fixed;   top: 0;   left: 0;   z-index: 500;        　今回ここはよく理解できた！配置が自在にできるぞ～   width: 100%;   margin: 0;   text-align:center;   padding: 0.5em ; }

header::before{　　　　　さっぱり。上に透明のカバーがつくてきな？    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    z-index: -1;    content: '';   background-color:#151010;   opacity: 0.8;    transform-origin: left top;　　　 トランスフォーム系は難しい    transform: scale(1, 0);　　　　　まだ頭の中で想像ができない    transition: transform .4s;　　　 }

header:hover::before{    transform-origin: left top;    transform: scale(1, 1); }

ボタンアニメーション

/*     ここからボタン    */ button, button.topButton::after {　　「button,」の「,」はどういう意味？    -webkit-transition: all 0.3s;　　 動きを表現しているというのはわかるけど    -moz-transition: all 0.3s;　　　 なんでわけてるの？    -o-transition: all 0.3s;　　　　  下のbuttonに書いちゃまずい？    transition: all 0.3s;　　　　　   書いてて閃いた。 hoverにも同じ効果を乗せ }　　　　　　　　　　　　　　  るためにわけている！合ってる？

button.topButton {  background: none;  border: 0;  color: #fff;  display: block;  font-size: 1em;  padding: 0.5em;  width: 7em;  position: relative; }

button.topButton::before, button.topButton::after {  background-color: #E9E9E9;  content: '';  position: absolute;  z-index: -1;                           なんで－1なの？隠すの？ }

button.topButton:hover { color: #D08821; font-weight: bold; }

button.topButton::after {  height: 0;  left: 0;  top: 0;  width: 100%; }

button.topButton:hover:after {  height: 100%; }

/*   ここまでボタン   */

リニューアルのためにＣＳＳと格闘中。 勉強をしてもいざ机に向かってみると「なんだっけ・・・」と頭空っぽになってしまいますね。 技術の習得は難しい！ 絵も中途半端ですが地道に進めます。

左上のへんなマークにはタイトルロゴを。 note、twitter、facebookに飛べるアイコンを準備。 まだまだやることが沢山。 珍しくオリジナルの仏頂面な女性です。 セル画が好きなのでそういう色合いする予定。

苦戦したことheader,footerの固定。

header{   width: 100%;   height:5em;   text-align:center;   z-index: 1000;   margin-bottom: 1em; }

footer{   width: 100%;   z-index: 999;   padding-top: 1em;   background-color:#DCB43D;   position: absolute;   bottom: 0; }

こんにちは、安正まことです。 兵庫県でフリーランスのイラストレーターもといグラフィッカーに近い仕事をしております。 版権物が得意でゲーム原画の仕事が中心です。 高校を卒業してすぐ東京に上京。 二年学生、五年ゲーム会社に勤務した後、地元で開業。

今年で独立５～６年になります。 関西人なので絵が上手くないより面白くないの方が堪えます！

HPはこちら

https://83msa.xyz/

Tumblr 初体験！