alice_rのブックマーク - はてなブックマーク

alice_r id:alice_r

ブックマーク / www.tam-tam.co.jp (5)

Google Fonts「Noto Serif CJK JP」を使ってみる｜ Tips Note by TAM
今年4月、「Google Fonts」に明朝体の書体「Noto Serif CJK」が発表されましたので、遅ればせながら使ってみました。［参照］・Google Developers Japan: Noto Serif CJK が登場 https://developers-jp.google blog.com/2017/04/noto-serif-cjk-is-here.html ・源ノ明朝 - Adobe https://source.typekit.com/source-han-serif/jp/ 設定方法（1）選別今回は日本語のみを使用するため、「Noto Serif CJK JP」を選択します。 https://www.google.com/get/noto/#serif-jpan 日本語は文字量が膨大なためデータがとても重いこと（1ウェイト平均 23MB）、全ウェイトを使用す
alice_r 2020/03/05
css

Webfont
リンク
お天気アプリで学ぶVue.jsのAPI連携｜ Tips Note by TAM
Vue.js で気象情報を表示させてみたいなとふと思い立ったので実際に作りながらVue.jsのAPI連携についてもまとめてみました。今回実装するに当たってAPIからデータの取得が簡単に行えるaxiosを利用します。基本的なVue.jsの使い方は公式ドキュメントがあります。 Vue.js - 基本的な使い方 axiosに関してより詳しく知りたいという方は以下のリンク先でご確認ください。 GitHub - axios/axios: Promise based HTTP client for the browser and node.js ■以下のように特定地域の気象情報をVue.jsで描画させることを目指します。デモページ ■必要な準備 OpenWeatherMapでアカウント（無料）を作成し、APIキーを取得する OpenWeatherMapでは気象情報を取得できるAPIサービスが用意
alice_r 2018/09/19
vue.js

API
リンク
Babel と watchify で ES2016 のビルド環境を作る｜ Tips Note by TAM
JavaScript の新仕様である、ECMAScript 2016 (以下ES2016) がリリースされました。 ES2015 はもう普通にバリバリ使ってるよという方も多いと思いますが、まだ手を出していない、って人も結構いらっしゃるかと思います。ES2015 などを使ってコードを書きはじめるにあたり、まずはビルド環境を用意するのが最初のハードルかなと思いますので、今回は Babel と browserify, watchify などを使ったビルド方法を紹介します。 ※ なお、今回のサンプルコードは GitHub のこちらにも置いています https://github.com/tam-matsuo/gulp-watchify-es2016 ES2015, ES2016 とは ES2015 は名前のとおり 2015年6月に公開された、JavaScript の言語仕様です。ES5 の次バージョ
alice_r 2018/05/22
JavaScript

Node.js

Gulp

Babel
リンク
jQueryでフォーム入力をチェックする｜ Tips Note by TAM
正規表現（jquery）を利用した入力チェックを紹介します。正規表現は、文字が一致しているのか、していないかを判定する機能です。応用としてフォームで入力された文字が条件と一致、不一致をチェックし、ユーザーに正しい入力を促す方法です。 if文（条件文）を主に使っていきます。 if文についてはこちらを参考にしてください。【Javascriptの条件文】 http://www.rsch.tuis.ac.jp/~mizutani/online/javascript/condition.html 今回、紹介する例は、チェックするタイミングを入力後に設定します（フォーカスを外したとき）。 $("input[name='hoge']").blur(function(){ if(条件){ //実行内容 } }); 【入力が空の場合】 $("input[name='hoge']").blur(fun
alice_r 2018/01/04
jquery

正規表現

validation
リンク
【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法｜ Tips Note by TAM
2016.05.30 【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法 CSSの擬似要素::beforeや::afterを使って、文字列や画像等を挿入することありますよね。挿入したい内容は、下記のように、contentプロパティの値に指定しておけば、要素の直前か直後にCSSだけで擬似的に挿入できます。要素名::before{ content: 値; } 要素名::after{ content: 値; } このcontentプロパティの値を動的に変更したい時、jQueryを使用するのであれば、セレクタで、疑似要素::beforeまたは::afterを指定してアクセスすればいいのでは…？と思ってしまいますが、疑似要素はセレクタで直接指定することができません。そもそも擬似要素は非DOMであるため、JavaScriptから操作すること
alice_r 2016/06/01
CSS

jQuery
リンク
1