クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

GlideならPWAを5分で作れるというのでBeatle DBというアプリを作ってみた

令和からアクティブに行こう!ということで初めて勉強会に参加してみた。「PWA Beginners 勉強会 #5」、PWAは前から記事などで気にはしていたけど実際にどんなものなのか知っておきたく。当日、「Glide」を使ってスプレッドシートから5分でアプリを作る実演…

【Laravel】MVCのコントローラ(C)ことはじめ(3年B組金八先生を表示する!)

PHP

Laravelの続きです。前回はルーティングファイルでページ生成、パラメータ読み込みをしました。今回は「MVCアーキテクチャ」の「C」にあたる「コントローラ」を理解する。それではいきましょう!!

【Tone.js】PolySynth()で和音を鳴らす(3コード楽器を作る)

JS

Tone.jsの続きです。前回はTone.Part()でメロディのタイミング、長さ、音量を調整しました。今回は和音に挑戦。3コードを奏でる楽器を作った。それではいきましょう!

【Vue.js】v-modelデータバインディング事始め(リンダリンダの歌詞を変えてオリジナルラブソングを作る)

JS

Vue.jsの続きです。前回はv-vindでボタンでリアルタイムに「データバインディング」とは何ぞや?Vue.jsで体験してみた。フォームに入力した情報をリアルタイムで画面に反映できる。どんなことが作れるか?「リンダリンダ」の歌詞を変えて愛する人へのオリジ…

CSS Gridで12分割グリッドシステムが簡単に作れた(grid-template-areas推し!!)

CSS

HTML要素を横に並べる方法はいくつかあるが、その中の一つ「CSS Grid」。これまでちゃんと触ったことがなかったのでトライしてみた。CSS Gridとグリッドシステムは相性がいいのではないか?と思い実際に作ってみた。なお、自分はgrid-template-areas推しです…

p5.jsを習得するために参考になりそうなサイト、書籍、動画たち

JS

p5.jsの続きです。前回はいろんな図形をcanvas要素に配置してみました。次のステップに進むにあたり、ちょっと方向性が見えにくかったため、習得の上で参考になりそうなサイトや書籍をいろいろ調べてみました。

【Laravel】ルーティングファイル(routesディレクトリのweb.php)にページを直書きしてみる

PHP

Laravelの続きです。前回はローカルのMAMP環境からHerokuにデプロイしました。今回はルーティングファイル(Routresディレクトリのweb.php)にページ情報を直書きして、いくつかの動的なページを作ってみました〜。完成品はHerokuにデプロイしてます。それで…

【Tone.js】Tone.Part()でメロディのタイミング、音の長さ、音量を調節する(マリオのゲームオーバー音)

JS

Tone.jsの続きです。前回はメロディ再生、シンセ音源加工、エフェクター接続を行いました。マリオの地上面メロディを打ち込みました。今回は「Tone.Part()」とうメソッドを使ってもう少し細かくメロディのタイミング、長さ、音量を調節しました。マリオのゲ…

【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)

JS

Vue.jsの続きです。前回まではJSONファイルの読み込みをしました。今回は属性値の動的な変更をします。v-bindを使ってclass名の追加、削除を行います。それではいきましょう!

p5.js事始め:いろんな図形を配置してみる

JS

ブラウザでインタラクティブコンテンツを作りたくて検討をした結果、一番興味深かったp5.jeを事始めます。p5.jsは2001年からあるProcessingをJAVAからJSに移植したJSライブラリですが、WebGLに対応したりと今も進化を遂げ続けており、ワクワクしかしません!…

【Tone.js】メロディ再生、シンセ音源加工、エフェクター接続(マリオを打ち込んだ!)

JS

Tone.jsシリーズ、前回まではTone.jsに用意されているシンセ音源たちを見ていきました。今回はメロディの再生、シンセ音源加工、エフェクター接続を行います。それではいきまSHOW!

LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと

PHP

Laravelシリーズ、前回はLarvelのファイル構成を確認し、Hello worldしました。今回はローカルのMAMP環境に作ったLaravelをHerokuにデプロイします。それでは、行ってみまSHOW♪

Laravelの/publicをルートに変更しHello worldする

PHP

前回、MAMP環境でLaravelの白い画面を出しました。今回はLaravelのファイル構成を見ながら、URLパスの変更やHello worldなどを行いました。

Laravel元年!インストールしてMAMP環境で白い画面出す!!

PHP

令和元年。そして(私にとって)Laravel元年!!何はなくとも始めました。まずはLaravelをインストールしてローカルのMAMP環境で白い画面を出すところまで。

【JS】DateとsetTimeout()で作るカウントダウンタイマー(令和まであと何日?)

JS

平成最後の日に作る、令和まであと何日?カウントダウンタイマーです。JSの組み込みオブジェクトDateと組み込みメソッドsetTimeout()を使います。ふ〜、なんとか間に合った〜。それでは参ります!

【Vue.js】axiosでJSONファイルを読み込む(はっぴいえんど編)

JS

Vue.jsで外部JSONファイルの値を読み込むシリーズ、前回の続きです。前回はデータ情報が全部表示されましたが、今回はJSONデータの中の値のみを読み込みます。

【CSS】#fffと#eee、#111と#000 の間はどのくらいグラデーションになるか

CSS

CSSで色を指定するときによく使う#fff、#eeeなどの3桁コード。便利だけど色の差が若干激しい?16進数ではどのくらいのグラデーションになるか調べてみた。

【JS】変数 varとletとconst(再代入、再宣言の挙動の違い)

JS

ES2015から新しく加わった変数letとconst。なんとなく新しいから使おう、良いものらしいから使おう、というのもアレなので、挙動の違いを体験してみる。

【JS】Math.random()でつくるサイコロとおみくじ

JS

JSのMathオブジェクトには数値系の組み込み関数が用意されています。その中の乱数(ランダムな数字)を返す関数Math.random()を使ってサイコロとおみくじを作ってみました。

【WordPress】Gutenbergでコードを1行も書かずにペライチページを作る!

PHP

WorPressは更新作業をダッシュボードで完結させることができ、クライアントが自分で自由にコンテンツを更新することができます。そうなってくるとペライチページも同じように更新したくなってきますよね。Gutenbergのブロックを使えば可能なんじゃないか?と…

【indeed】Web業界(フロントエンド〜サーバサイド)技術キーワード別の求人件数(2019年4月)

Web業界(フロントエンド〜サーバサイド)の記事には次々と新しい技術キーワードが登場します。「○○はオワコン」「これからは○○!」などいろいろ書かれています。現時点のWeb業界ではどんな技術が求められているのでしょうか。前回までと同様、indeedの件数…

【indeed】職種別スキル集計:Webデザイナー、Webディレクター、UI/UXデザイナー、フロントエンドエンジニア、サーバサイドエンジニア(2019年3月)

前回、Webデザイナーの求人件数を地域別に調べました。今回は求人情報にあるスキルを職種別に集計して、傾向をグラフ化しました。「Webデザイナー」「Webディレクター」「UI/UXデザイナー」「フロントエンドエンジニア」「サーバサイドエンジニア」の5職種で…

【indeed】Webデザイナー求人件数を都道府県別に調べてグラフにした(2019年3月版)

求人サイトは転職したい人だけのものではありません。今、業界全体で求められていること、その中での自分の位置付けなどを客観的に市場調査できます。特に複数の求人サイトや企業の求人ページを横断検索できる「indeed」は便利です!今回はWebデザイナーの求…

Webデザイナーに必要なスキルと代表的な7つのキャリアパス

Webデザイナーになるために必要なスキルは何か。そしてその次のキャリアパスはどんな道があるのか。道は決して一本ではなく多岐に渡ります。UXベン図の3スキル「ビジネス」「デザイン」「テクノロジー」それぞれに特化した代表的な7つのキャリアパスを解説し…

【WordPress】All-in-One WP Migration(全移行)とDeMomentSomTres Export(一部移行)の違い

WordPressのデータ移行。以前はダッシュボードで完結しない複雑な作業でした。最近は良いプラグインのおかげでダッシュボードだけで移行がしやすくなりました!コンテンツの全移行は「All-in-One WP Migration」、一部移行は「DeMomentSomTres Export」がお…

【デザイン】基本がわかる6記事(メリハリ、縦横比率、画面分割、タイポ、色相環、配色)まとめ

デザインってどうやるの?むずかしそう。自分にできるのかな?私もそう思っていました。デザインにはいくつかの「基本原則」があります。その原則をギュッと凝縮した6記事をご紹介。「これを読めば独学デザイナーでもデザインに取り組める!」を目指して書き…

【配色の基本】面積比(メイン、アクセント、ベース)と色相分割【Adobe Color CC】

前回、様々な色相環を見ていきました。今回はいよいよ複数の色を組み合わせた「配色」の基本に入っていきます!複数の色はいったいどうやって選んでいったらいいのか?目的によって変わります。「主従をつける配色」「同等に分類する配色」の2つの目的で考え…

【配色】色相環のH値をいろいろ測ってみた(HSB、マンセル、オストワルト、PCCS、Web配色ツール)

デザインの配色はRGBやCMYKよりもHSBを使った方が検討しやすいです。しかし、HSBの中の「H値(色相)」について調べるたところ、一筋縄ではいかないことがわかりました。色相環にはHSB色空間、表色系(マンセル、オストワルト、PCCS)、Web配色ツールなどの…

【行長・行間・ジャンプ率】タイポグラフィ事始め(適度な箱組みとは)

タイポの道も一歩から。文字のデザイン「タイポグラフィ」。様々な要素がありとっても奥が深い世界です。まずは見出しと本文を組み合わせて「箱組み」を組んでみます!ポイントは「行長」「行間」「ジャンプ率」です。

【画面分割】シンメトリー、黄金分割、白銀分割、グリッドシステムなどを一覧にしてみた

前回は画面の「アスペクト比(縦横比率)」を見ていきました。今回は画面の「分割」です。デザイン、レイアウトにおいてメイン要素、サブ要素を配置する際に画面をどこで分割するか?シンメトリー、黄金分割、白銀分割、3分割など「分割比」による分割と、あ…