クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

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

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

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

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

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

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

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

Vue.jsの続きです。前回はv-vindでボタンでリアルタイムにclass名の追加、削除をした。今回はv-modelでリアルタイムに「データバインディング」体験してみる。データバインディングとは何ぞや?フォームに入力した情報をリアルタイムで画面に反映できる。ど…

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

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

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

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

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

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

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

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

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

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

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

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