クモのようにコツコツと

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

JS

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

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

【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!

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

JS

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

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

JS

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

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

JS

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

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

JS

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

【擬似クラス:target】CSSのみでハンバーガーメニューを作る

スマホの小さい画面でメニューをしまっておくのによく使われるハンバーガーメニュー 。これまではJSのクリックイベントでclass名を追加して実現してました。擬似クラス:targetを使うとCSSだけで実現できると知って試してみた。

【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させる

フォームの送信ボタンのinputタグにアイコン(擬似要素)を加えたかったのですが、できませんでした。それで、ボタンの外をdivで囲んで擬似要素を加えました。そしたら、なんということでしょう。ボタンの上に重なったアイコン部分は送信などのイベントが発…

【Tone.js】十三音鍵盤のシンセ音を変更してみる(その2)

JS

ブラウザで音を出そう「Tone.js」シリーズの続きです。前回はTone.jsに用意されたシンセ音の半分を紹介しました。今回は後編です。それではいってみましょう!

CSSドット絵マリオをCSSアニメでジャンプさせてみる

Qiitaアドベントカレンダー「CSS」 23日目の記事です。イブイブ! さて、CSSドット絵マリオシリーズ、前回のあらすじ。グラフィックソフトを使わずCSSオンリー打つべし打つべし!でドット絵を描いた(書いた?)マリオ。ホバーアクションで立ちポーズとジャ…

Pythonの基本を理解するためにJSと比較する

Qiitaアドベントカレンダー「Pythonその2」19日目の記事です。以前「PHPの基本を理解するためにJSと比較する」という記事を書きました*1。本記事はその「Python版」です!ちなみに私のPython歴は「Hello World」までです。Webデザイナーが新たなプログラミン…

Google ChartsをQuickにStartする

JS

Qiitaアドベントカレンダー「JavaScript2」12日目の記事です。最近、データのビジュアライズに興味津々之介なイイダリョウです。これまでJSのチャートライブラリは「Chart.js(Canvasベース)」と「C3.js(SVGベース)」をGetしてStartedしました。今回は「G…

ブラウザ上だけでお手軽GitHub体験(リポジトリの作成と変更)

ソフトウェア開発プラットフォーム「GitHub」。バージョン管理システム(Git)によって複数人数での開発ができます。「黒い画面」を叩いて開発するイメージがありますが「SourceTree」というGUIツールもありますよ。さらになんと!GitHubはローカル環境と連…

黒い画面だけでWebページを作成-後編:viエディタでコーディング!

「前編」の続きです。前編ではフォルダ作成(mkdir)、ファイル作成(touch)・複製(cp)・移動(mv)・削除(rm)を行いました。後編ではいよいよテキストエディタを使わず、黒い画面だけでコーディングを行います。ターミナルの中に内蔵されているviエデ…

黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成

「初めての黒い画面」以降、ちょいちょい黒い画面(ターミナル)に触れてきましてだんだんと慣れてきています。ここらで新たな試みをしてみます。そう、私は感じたのです。もしかしてだけど、もしかしてだけど、黒い画面だけで、テキストエディタ使わずにWeb…

初めてのNode.js:インストール確認、REPL、Hello worldまで

JS

「黒い画面」叩いて初体験シリーズ!前々回「Python」、前回「Ruby」に続きまして、今回は「Node.js」にトライ。いや〜Node.js。サーバサイドJSですよ、ハイ。これも前々から気になっておりましたよ。でもどうやって初めたらいいのかわからなかった。黒い画…

Chromeデベロッパーツール事始め!HTML、CSS、JSを直感的に修正しよう

Webサイト制作で欠かせないChrome「デベロッパーツール」 。でも、なんだか英語メニューがたくさんで、一体どこをどう触ればいいの? まずはHTML、CSS、JSのリアルタイム修正から入るのがおすすめ。ブラウザ上で直接修正が反映されて、大変直感的ですよ!

【Vue.js】axiosでJSONファイルを読み込む(酒が飲めるぞ!編)

JS

Vue.jsシリーズの続きです。前回、Vue.jsのイベント、分岐、ループをやってみました。その中のループ(v-for)で外部JSONファイルを読み込めそうなので、ロジックとデータを分離してみましょう。チュートリアルを見ると「axios」という方法を推奨しているよ…

HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事)

あるとイイね!なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。ただし、残念ながらそのままではブラウザに表示されません。HTML、CSS、JSに変換(コンパイル)するための開発環境が必要です。そこで…

【Tone.js】十三音鍵盤のシンセ音を変更してみる(その1)_

JS

「Tone.js」シリーズの続きになります。前回、十三音鍵盤を作ってみましたが、こちらの音色を変えてみたく思います!

【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事)

Webデザイナーが主戦場とするのはフロントエンド言語(HTML、CSS、JS)ですが、サーバサイド言語もわかればできることが増えます。一体どうやって?? WordPressはダッシュボードからテーマやプラグインを入れれば動的サイトが作れる素敵なCMS。一番身近なサ…

【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事)

以前、「書ける前に読む!HTML、CSS、JSの書式」*1という連載記事を書きました。コードを書くにはまず読める方が先という考えから、コードの読み方をHTML→CSS→JSにステップアップ方式で解説しました。当ブログでは様々なテーマを連載していますが、そのどこ…

【Textastic】もしかしてだけどスマホで技術ブログかけちゃうんじゃないの?

前回、タブレットだけで技術ブログが書けるのか検証した結果、もしかしてだけどこれならスマホだけでも技術ブログが書けるんじゃないの?という気になってきたので、実際にやってみる。実録です。

【Vue.js】イベント(v-on)、分岐(v-show、v-if)、ループ(v-for)をやってみた!

JS

「Hellow Vue.js」の続きです。前回はVue.jsを読み込んで、「こんにちは びゅう!」という文字を表示しました。しかしながら、これだけならjQueryや生JSでもできるわけなので、もう少し進めてみる。 基本編として、チュートリアルでまず目についた「イベント…

【JSON】外部JSONファイル化したはっぴいえんどアルバム情報をFetch APIでDOMに読み込む

JS

「JSON未遂事件簿」の続きです。 JSON(ジェイソン)はJSの連想配列(オブジェクト)とよく似たとても馴染深いデータ形式。 前回はっぴいえんどアルバム情報を多次元配列にしてDOMに読み込みました。 今回はこれを外部JSONファイル化してFetch APIで読み込ん…

SVGの方のチャートライブラリ「C3.js」をGettingしてStartedする

以前、JSで図(チャート)を作るライブラリとしてCanvasベースの「Chart.js」をGettingしてStartedしました。そのときにもう一つSVGベースのライブラリ「D3.js」も候補で考えていたのですがChart.jsと比べて少し敷居が高く感じてました。 その後、D3.jsベー…

JS多次元配列に入れたデータをDOMに入力する(JSON未遂事件簿…)

JS

はじめに、今回はJSONにあまり触れていません! WordPress等で日々サーバサイドやデータベースの便利さを感じつつ…そういえばJSとよく似たJSON(ジェイソン)というデータ形式があったな。これを使えばクライアントサイドでもグラフやゲームやインタラクティ…