クモのようにコツコツと

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

JS

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

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

初めての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ファイルを読み込む(酒が飲めるぞ!編-1)

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でもできるわけなので、もう少し進めてみる。 基本編として、チュートリアルでまず目についた「イベント…

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(ジェイソン)というデータ形式があったな。これを使えばクライアントサイドでもグラフやゲームやインタラクティ…

【JS】ローカルストレージの値をリンク先のフォームのinputタグのvalueに渡す!

JS

前回、URLの後ろにつけたパラメータをフォームのinputタグのvalueに渡す方法をご紹介いたしました。その続きになります。 この時ネックになったのが、別ページへの回遊やサイト離脱です。再訪したユーザーがフォームを送信するときにはパラメータが失われて…

【JS】フォームのinputタグにURLパラメータを渡す方法

JS

URLの後ろにつらつらと続くパラメータ。あれを取得してフォームのinputタグに渡す方法をご紹介。やれることはわかってて前からやってみたいと思っていた内容なので、実際に作ってみました。それでは、どうぞ!

【Three.js】回る箱をいろいろ打ち替えてみる

JS

ブラウザで3Dコンテンツを作るJSライブラリ「Three.js」。前回は回る箱を表示してコードを細かく見ました。今回は実際の動きとしてどこをどう打ち替えたらどう変わるのかを実体験していきたく思います。それでは、どうぞ!

【tone.js】一音鍵盤を1オクターブに拡張したらコードが冗長だったので書き直した

JS

ブラウザで音を鳴らせるJSライブラリ「tone.js」の続きになります。 前回は一音鍵盤を作りましたが、一音だと少々飽きてくるので1オクターブに拡張しました! 鍵盤を増やしながらコードが冗長になっていくことに気づき、このままではフルキーボードの頃には…

三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた!

JS

JSのフレームワークについて調べるとAngular、React、vue.jsの「三大フレームワーク」というのが出てきます。なぜにこの3つが三大?これを使うとどんなことが実現できるのか。SPA?MVC?仮想DOM?データバインディング?調べているうちに混乱してきたけど、…

【JS】newとプロトタイプとクラス

JS

JSに慣れてくるとよく目にすることになるnew演算子。ライブラリやフレームワークのコードでもよく見るので、ここらでちゃんと理解しておきたく思います。 また、かつて「JSはクラスかプロトタイプか」という論争がありましたが、そのどちらもこのnewが登場し…

Chart.jsをGettingしてStartedする

JS

JSで図を描写するライブラリはいくつかありますが、Canvas要素ベースのChart.jsとSVG要素ベースのd3.jsが目につきました。どっちを先にやるか迷いましたが、Three.jsでCanvas要素に触れ始めているので3Dと2Dの比較として触ってみることにしました。

Three.js入門サイトに私も入門する!!

JS

以前ご紹介した「WebGL」の続きになります。今年こそブラウザ3D事始めんと欲し「書き初め」的に書いた投稿からもうじき半年…。 前回tone.jsと同様、今回も便利なライブラリ「Three.js」を使って一刻も早く体験したく。いざっ!

はじめの一音!tone.js事始める

JS

以前ご紹介したWeb Audio APIの続きになります。 ブラウザで音を出す便利なライブラリ、tone.jsを利用して、はじめの一音鳴らしてみたいと思います! ※注:このページは音が鳴ります!

スクロールするとフワッと現れたり動いたりするアニメーション【jquery.inview.js & transition】

スクロールするとフワッと現れたり動いたりするアニメーションを作る方法はいくつかあるが、一番シンプルに感じた方法をご紹介。CSSでアニメーションを設定し、JSでスクロールを感知してCSSのclassを付加する方法。

Web Audio APIの機はもうすぐ熟しそう!ブラウザ対応状況♪

「周回遅れでもWebGLを事始める!」で「WebGLの機はとっくに熟している」と書きました。 もう一つ、2018年事始めたいマイテーマに「Web Audio API」というものがあります。こちらも徐々に機が熟しています。 いっちょやってみっかー、と自分を奮い立たせるた…

周回遅れでもWebGLを事始める!canvas大地に立つ!!

ブラウザでの3D(3次元)を表現する「WebGL」。ほぼ全てのブラウザに対応し、機はとっくに熟している。 かつては3Dを始めるには3D作成ソフトを購入する必要があったが、現在はやりたくなった「今」、始められます。そう、CodePenがあればね!*1 時は来た!そ…

【卒jQueryへの道】生JSとライブラリとフレームワークの理解

JavaScript Advent Calendar 2017 - Qiitaの第5日目です。 「こいつ、動くぞ!*1」自分の作ったものが動く!この喜びをいち早く体験させてくれたjQuery。 だが、HTML→CSS→jQueryという道を辿った方が「次」のステップに進むときに感じる「壁」があります。そ…

【JSの基本-後編】書ける前に読む!HTML、CSS、JSの書式-5

JS

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

【JSの基本-前編】書ける前に読む!HTML、CSS、JSの書式-4

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

【Webの基礎知識】書ける前に読む!HTML、CSS、JSの書式-1

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。 書…

【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め

ブログ名をこっそり変えました。イイダリョウです。 「イイダリョウが書くブログ(仮)」→「クモのようにコツコツと」 Codepen Settingの旅、第3回です。 第1回は「HTMLテンプレートエンジン」、第2回は「AltCSS」でした。 今回はこれまたアルトいいねの「Al…