元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【Vue.js】コンポーネントにデータを渡す:props

例えば、コンポーネントを使ってブログを作成するとなると、記事のタイトルや投稿内容などのデータをコンポーネントに渡して処理することになります。今回は、コンポーネントにデータを渡す方法について書きます。 カスタム属性としてデータを渡す Vueインス…

Ajaxで外部データを取得し、テンプレートに読み込む

以前の記事(Ajaxで外部データを取得する)で、Ajaxを利用して外部データを取得するコードをご紹介しました。このコードでは、JavaScriptのコードの中にHTMLのコードが含まれていました。今回は、JavaScriptからHTMLを分離する例を書きます。 以前のコード:XML…

【mustache入門:JS版】mustache.jsの再入門

以前、mustacheの記事を書きましたが、勉強し直したので改めて記事にします。今回は、HTMLとJavaScriptの分離に焦点を当てて書きます。 HTMLを挿入する例 HTMLのテンプレート化 HTMLコードの分離 まとめ 参考 HTMLを挿入する例 id属性がresultである要素の子…

【jQuery】Ajaxで外部データを取得する

jQueryのAjaxを使って、外部データ(JSON、XML、HTML)を取得する方法を見ていきます。 JSONの取得 XML(RSS)の取得 HTMLの取得 まとめ 参考 JSONの取得 ex.)気象庁のサイトから東京都の天気予報のデータをJSON形式で取得 取得先:https://www.jma.go.jp/bosai/f…

【JavaScript】JSONデータの読み込み

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

【Vue.js】コンポーネントの基本:Vue.component()

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

GitHubにAtomの設定をバックアップする

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

【Vue.js】コンポーネントでパーツを作る

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

【Vue.js】双方向バインディング:v-model

入力フォームにタイプすると要素を即座に更新します。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

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

【Vue.js】属性の書き換え:v-bind

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: '#…

【Vue.js】リストレンダリング:v-for

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 …

【Vue.js】条件付きレンダリング:v-ifとv-showで表示の制御

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

【Vue.js】Vue.jsの導入

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

Atom起動時の高速化

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

jQuery本体の中身を見る

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

Android Studioのエラーメッセージの文字化けを解消する

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

【SVG】SVG記事のまとめと今後の取り組み

SVG

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

はてなブログカスタマイズ:更新日の表示

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

【Sass】Sassを始める・試す

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

【SVG】JavaScriptを含むSVGをHTMLに読み込ませる

SVG

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

【SVG】素材の再利用:symbol

SVG

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

【SVG】path要素を分割して個別にスタイルを適用する

SVG

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

【SVG】グループにまとめる:g要素,symbol要素,use要素,defs要素

SVG

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

【SVG】クリッピングとイベント

SVG

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

【SVG】クリッピング

SVG

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

【SVG】サンプルアニメーション:サークルのアニメーション

SVG

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

【SVG】SVGの素材を作る・書き出す

SVG

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

【SVG】SVGの表示・読み込み

SVG

ブラウザに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】サンプルアニメーション:円

SVG

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