JavaScript

JavaScript

【schema.org】リッチスニペットの導入の際参考にしたサイト

リンク集 本家。基本的にはここを見る。 日本語サイト、少し情報が古い。 テストツール 基本的にタイプは,継承されて定義されており, 継承元のプロパティも使用できる. 例えば, 最も基...
JavaScript

【Vue.js】グリッドレイアウトのVueコンポーネントを作った

SweetScrollでお世話になってた、わだつよしさんが作ったReact Stack GridをVueコンポーネントとして再現してみました。 GitHub 作ったきっかけ Vue.jsある程度使えるようになっ...
JavaScript

Vueのフィルターのコレクション、vue-filterが便利でした

filter使ってますか? 関数でも実現できるので使わなくても支障はないのですが、使ってみるとかなり便利で、コードもスッキリしたので是非使ってみてください。 フィルターは以下の書籍で知りました。公式ドキュメントにももちろん書...
JavaScript

【Vue.js】VeeValidateでform要素をコンポーネント化したが、いまいちだった件

引き続きVeeValidate使っています。 VeeValidateでform要素を子コンポーネント化してみたので参考になれば。 コンポーネント化 エラークラスの付ける要素が変わったり、使い回し易さを考えコンポーネント化し...
JavaScript

【Vue.js】快適なバリデーションが設定できるVeeValidateを日本語化

VeeValidate非常に使いやすかったので紹介します。 VeeValidateを日本語化 日本語ファイルを読み込み、カスタム設定も読み込みます。 デフォルトのmessage.requiredに「!!」を付与しています。...
JavaScript

支払いに便利なPAY.JPをVue.jsからの利用方法

シンプルなAPIと豊富なライブラリで、スムーズに決済を組み込むことができるPAY.JPをVue.jsから利用してみました。 デザイン済みの入力フォーム、オリジナルのデザイン(jQuery)を利用したい場合は公式にサンプルコードが掲載さ...
JavaScript

Vue.jsのテンプレートの書き方メモ

Vue.jsの様々なテンプレート記述方法 公式サイトが非常に丁寧に説明されており、だいたい公式サイトで解決できてたのですが、 テンプレートの宣言方法はネット上にも様々なパターンがあり、長く混乱に陥っていたがやっと大悟したので、ここにまと...
JavaScript

バリデーションのjsライブラリを探し求めて

フロントのバリデーションで欲しい機能 input移動時に検証 or キーアップごとに検証 メッセージ要素・位置・言語の自由度 検証のカスタムルールの自由度 非同期で検証が可能か validator.js ...
JavaScript

【Google Maps API】よく使うカスタム事例のまとめ。3/3

上級編 ルートを辿るアニメーションを付与(直線) ルートを表示するマップにアニメーションを追加します。 任意の地点を直線で結ぶので、近場のルートを示すのにおすすめです。 DirectionsServiceで得られるル...
JavaScript

【Google Maps API】よく使うカスタム事例のまとめ。2/3

中級編 クリックで読み込む loadイベントでなく、クリックで読み込むようにしましょう。 クリックで読み込んだ後に落ちてくるanimationを付けます。 クリック クリックイベントだけではなく、あるスクロ...
JavaScript

【Google Maps API】よく使うカスタム事例のまとめ。1/3

Google Mapsを最強にカスタマイズ 案件でGoogle Mapをよく使うんですが、カスタムされたデザインのMapのコーディングは 少し時間がかかり、いつも理想通りの地図が作れず90%くらいで妥協してしまうことが多いです。この記事...
NO IMAGE JavaScript

滑らかなスクロールを実現する3つの方法

マウスホイールでスクロールする際にデフォルトのスクロールでなく、滑らかなスクロールにする方法を紹介します。 最初の方法は実装は簡単なんですが、少しがたつきます。2つめに紹介するのはすごく実装は少しややこしいのですが、すごく滑らかなスクロー...
NO IMAGE JavaScript

Three.jsの使い方からアニメーションの実行までの手順まとめ

JavaScript

マウスの位置により目をくるくる回すプラグイン作った

最近作ったsvgのピカチュウを動かしたいなーってことでスクリプト書いてみました。 久しぶりに三角関数に触れたのでほとんど忘れてましたが、なんとか形になりました。 説明 現在のマウス座標より目の位置を移動させます。 改善点 ...
NO IMAGE JavaScript

snap.svgを使い方と簡単なデモ

pikachuCreated with Sketch.
NO IMAGE JavaScript

GoogleMapAPIでエラーMissingKeyMapErrorの情報

今日(正確には6月22日)からGoogleMapでGoogle Maps API error:MissingKeyMapError というエラーがでるようになりました。 対策の情報があったので共有します。
NO IMAGE JavaScript

nodebrewでnode.jsをインストールするまで in Mac

だいたい上記のサイトのやり方でいけました。 一点、node.jsをインストールしようとしたときにでた、 Warning: Failed to create the fileというエラーが出た時の対処方法 ついでにg...
NO IMAGE Chrome

スクリプトの試し書きに便利なjsfidle

ちょこっと試し書き、公開したいときに便利なjsfidle。 radioボタンで開閉 radioボタンで切り替え input要素は何となくchangeイベントを適用するもんだと思い込んでいたけど、tab切り替えと同様の仕...
NO IMAGE JavaScript

【jQuery】プラグインの様々な作り方(定義パターン)

「プラグインの作り方」と調べて出てくるのが大抵 $.fn.プラグイン名 = function(){全ての処理} この形でした。 ですが、配布されているプラグインのソースコードを確認すると上の形と違うことが多いです。 なので今回...
NO IMAGE JavaScript

【jQuery】ウィンドウサイズによってプラグインを切り替える

ウィンドウサイズによって実行するプラグインを切り替えるプラグインを作ってみました。 すごく単純なプラグインですがレスポンシブ対応のサイトでは以外と使う場面があるかもしれません。 またプラグインを作成するのは初めてなので、アドバイスを頂け...