外部サイトでJSONデータをJSONPとして公開している場合、そのデータを読み込んで利用することができます。 今回は、JSONデータの読み込みについて書きます。まず、ローカルフォルダにデータを用意して、それを読み込んでみます。次に、外部サイトにあるデー…

コンポーネントの基本の記述について書きます。ここでは、クリックイベントを持つコンポーネントの例を簡単に見ていきます。他の記事でも書きましたが、改めてコンポーネントが再利用可能であることを確認します。 コンポーネントの基本の記述 コンポーネン…

Atomでエディタの設定やパッケージの追加などをして、カスタマイズすると思います。何らかの理由でAtomを再インストールして以前の設定に戻したい場合、記憶を頼りに戻すことは難しいです。そこで、Atomの設定ファイルをGitHubで管理します。Atomを再インス…

コンポーネントで再利用可能なパーツを作ります。つまり、ページのある箇所のHTML、CSS、JavaScriptを部品に切り出して、再利用できる形にします。例えば、ナビゲーションバーやヘッダー、フッターを部品に切り出して使うことが考えられます。そして、切り出…

入力フォームにタイプすると要素を即座に更新します。v-modelは、input要素、textarea要素、select要素などが対象です。v-modelでデータと処理を紐づけることで、データとUIに集中できます。 v-model {{}}内にJavaScriptの式を書く 参考サイト v-model <div id="app"> <input type="text" v-model="message"> <p>Hel</p></div>…

Vue.jsでイベント処理をしてみます。今回は、簡単にクリックしたときの処理を書きます。クリック以外のイベントも試してみると良いです。 v-on 参考サイト v-on HTML側は、v-on:イベント名="メソッド名"で指定します。JavaScript側は、Vueインスタンスのオプ…

v-bindを使ってHTMLの属性を書き換えます。ここでは、href属性とclass属性を書き換えてみます。 v-bindでhref属性を書き換える v-bindの間違った書き方 v-bindでclass属性を書き換える v-bindでhref属性を書き換える <div id="app"> <p><a v-bind:href="url">{{title}}</a></p> </div> var app = new Vue({ el: '#…

v-forを使って、繰り返し処理をします。配列の場合とオブジェクトの場合を見ていきます。若干、書き方が異なるので注意してください。 v-for:配列 v-for:オブジェクト 参考サイト v-for:配列 配列をv-forで処理する書き方です。 <div id="app"> <ul> <li v-for="color in colors">{{color.name}}</li> </ul> </div> var app …

v-ifとv-showを使って表示を制御します。trueの時に表示して、falseの時に非表示にします。HTMLのコードがどのようになるのか確認します。v-ifとv-showの違いについても書きます。 v-ifで表示の制御 複数の要素を出し分ける v-showで表示の制御 ディレクティ…

去年、Vue.jsの勉強を始めようとしましたが、他の勉強を優先したので、後回しになってしまいました。そちらの勉強が一通り済んだので、今年に入ってからVue.jを勉強しました。まずは、Vue.jsの導入と基本の表示について書きます。 Vue.jsとは CDN版とVue CLI…

Atomの起動が遅いと感じたら、本記事の内容を試してみると良いかもしれません。 本記事で扱う内容は次のようなものです。1.起動時間を確認する。2.不要なパッケージを無効化する。3.ツリービューのプロジェクトフォルダを整理する。起動が遅いのは地味にスト…

jQueryが使えるようになると、その中身がどのようになっているのか気になります。今更ではありますが、jQuery本体のソースコードを見てみました。量が多いので一行一行まで細かく見られていませんが、全体像を何となく把握できたと思います。 私一人の力では…

Android Studioでエラーメッセージが文字化けしたので、その対処法を残します。 状況 対処法 studio64.exe.vmoptionsについて 注意点 参考サイト 状況 Windows11でAndroid Studio Chipmunk*1 | 2021.2.1を利用しています。プログラムを実行したところ、エラ…

当ブログで紹介したSVGの記事をまとめました。SVGは、描画ソフトが無くても単純な図形ならコードを書くことで、簡単に作れます。ベクター画像なので、デバイスを気にすることなく表示できるのが良いです。記述ルールとアニメーションの仕方が分かれば、ある…

記事に更新日を表示する方法です。読者の方にいつ更新したのか分かるようにするため、更新日を表示するようにしました。今までは、記事を更新しても分からない状態でした。 参考サイトで紹介しているコードを使わせて頂きました。CSSは当ブログに合うように…

とあるSVGを自分のPCで表示したかったのですが、SCSSを使っていたのでそのままでは表示されませんでした。SCSSをCSSに変換する必要があるということなので、Sassについて調べました。この記事では、Sassについて調べた内容と始め方について簡単に書きます。 …

SVGは、ブラウザで表示して使うことを想定しています。今までの勉強で静止画(ロゴなど)は、問題なく扱えるようになったと思います。ここからは一歩踏み込んで、JavaScriptを含むSVGをHTMLに読み込ませる方法を勉強しました。 実現したいこと 現状 サンプルの…

素材サイトからダウンロードしたSVGの素材を再利用することを考えます。再利用できて、なおかつスタイルも適用できるように考えました。詳しくは、コードをご覧ください。 サンプルコードの紹介 symbol要素でひな形の定義 コード HTMLからの参照 コード デモ…

複数の図形が書かれているのに、1つのpath要素で構成しているSVGファイルがある場合があります。この状態ですと個別にスタイルを指定できません。そこで、path要素を分割します。 サンプルデータ(SVG) path要素を分割する 個別にスタイルを適用する スタイル…

SVGで図形をまとめて扱いたい場合がでてくると思います。そのようなときは、要素をグループにまとめます。関連する要素は、g要素、symbol要素、use要素、defs要素の4つです。これらについて見ていきます。 g要素 symbol要素 use要素 defs要素 参考サイト g要…

SVGでできる簡単なサンプルを書きます。今回は、クリッピングとイベントを組み合わせます。参考サイトで紹介しているSVGのサンプルを簡単に解説して、それを元に自分でも作ってみます。 X-ray meの簡易的な解説 クリッピングのサンプル コード デモ クリッピ…

SVGのクリッピングについて書きます。クリッピングは、切り抜きのことです。要素の一部分を切り抜きます。切り抜かれた部分は表示され、その他の部分は表示されません。切り抜く形は、色々と指定できます。 クリッピングパスの定義 クリッピングパスの適用 …

SVGでできる簡単なサンプルアニメーションを書きます。今回は、サークルのアニメーションです。参考サイトで紹介しているSVGのサンプルを、jQueryからJavaScriptに書き換えました。 サークルのアニメーション コード デモ 参考サイト サークルのアニメーショ…

単純な形のものでしたら、タグを使ってSVGデータを作ることができます。しかし、複雑な形状のものになると手書きのコードで作るのは現実的ではありません。そこで、ベクターデータを編集できるソフトを使い、SVGの素材を作る方法を見ていきます。 Illustrato…

ブラウザにSVGを表示・読み込む方法について書きます。何パターンかあるので、その時に合う方法を選べると良いです。 SVGタグ IMGタグ CSSのbackground-imageプロパティ objectタグ まとめ 参考サイト SVGタグ HTML内にSVGタグを挿入する方法です。 <svg version="1.1" width="300px" height="300px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <g> <circle cx="150" cy="75" r="10"/> </circle></g></svg>

SVGでできる簡単なサンプルアニメーションを書きます。今回は、円のアニメーションです。さらに柔軟な表現ができるように、JavaScriptと絡めていきます。SVGとJavaScriptで、表現の幅が広がることを感じられたら幸いです。 円のアニメーションのサンプル コ…

本書は、識学という考え方に出会い、数々の企業の業績アップに貢献した著者が、結果を出したいプレーヤーに向けて仕事の型となる数値化のノウハウを紹介しています。今作は、プレーヤー向けの内容です。 本の紹介 学んだこと 数字に対する拒否反応を無くす …

他のサイトと同様、当ブログでもHTMLの入門記事を書いています。しかし、網羅的に書いているわけではありません。そのような解説サイトは他にいくらでもあります。詳細な説明はそちらに譲ります。当ブログでは、知っておきたい基礎知識やつまずきそうなとこ…

ウェブサイトを作りたいとなったら、始めにHTMLを勉強すると思います。そして、勉強の過程でCSSとJavaScriptの存在を知ると思います。今回は、ウェブサイトを作るときに関係するHTML、CSS、JavaScriptの役割について書きます。 HTMLの役割:文書の構造化 CSS…

影の指定方法について書きます。影を作るには、照明が必要です。あと、影を落としたい物体と影を受ける物体に影の設定をします。影の設定をすること自体は難しくないと思います。 影の設定 レンダラの影を有効化:shadowMap 光源の影を有効化:castShadow 影を…