javascript

RailsインスパイアのReactJsフレームワーク Blitzを試した

Blitzとは? GitHubの説明をGoogle翻訳を通した引用… Blitzは、Ruby on Railsのようなサーバーレンダリングフレームワークのシンプルさと慣習を復活させ、 Reactとクライアントサイドレンダリングについて私たちが愛するすべてを維持します! github.com つ…

iOS UIWebViewでjQueryのclickイベントが重複して発火する

※UIWebViewは2020/12移行更新できなくなりますのでWKWebViewへのアップデートが必要です https://developer.apple.com/news/?id=12232019b UIWebViewで以下のjQueryのページを動かすとクリックイベントが2回発火してしまう場合がありました。 ※1回しか発火し…

FirebaseFunctionsで素のJSを返す

実現したいこと FirebaseFunctionsを使ってリクエスト元やパラメータに合わせたJSファイルを作り返したい こんな風に使いたい <script src="https://asia-northeast1-fir-functions-return-js.cloudfunctions.net/hello"></script> Functionsの実装 functions/index.js exports.hello = functions .region('asia-northeast1') .https.onRequest((request, respo…

インスタグラムのブログパーツを作った📷

作ったもの Insta Window Tool こんな感じでインスタの写真をサイトに貼り付けられます。 作った背景 インスタグラムの写真をサイトに貼る必要があったので調べたところ、ブログパーツは既にあったのですがブログパーツのサイトにリンクしてしまう残念仕様だ…

スクロールに応じてヘッダーが順次固定されているJsを組んだ

iTunesか何かのようなスクロールにお応じてヘッダーが切り替わる挙動を組みました。 (言葉で説明するのが難しい…↓を見てくださいな) 仕様変更によりお蔵入りになったのでブログで供養します。 See the Pen MultiFixedHeader by あっきー💪😎💪 (@kuronekopunk) on…

JavaScriptでURLクエリを取得する

クエリ文字列の取得は window.location.search => "?foo=1&bar=2" クエリ文字列をオブジェクトに整形する関数を用意。 function getUrlQueries() { var queryStr = window.location.search.slice(1); // 文頭?を除外 queries = {}; // クエリがない場合は空…

GoogleAppScriptでSleepする

GoogleAppScriptで sleep(1000) は使えなかったので調べた所、Utilitiesクラスで定義されているらしい Utilities.sleep(1000); // ms 公式ドキュメント Class Utilities | Apps Script | Google Developers

Javascriptでクリップボードにテキストコピーする

TL;DR const text = 'コピーするテキスト'; const textarea = document.createElement('textarea'); textarea.style.position = 'fixed'; textarea.style.opacity = 0; textarea.value = text; document.body.appendChild(textarea); textarea.select(); doc…

Reactで Uncaught TypeError: Cannot read property 'setState' of undefined と怒られた時の対処方

コンストラクタで明示的にthisをbindして上げる必要があるらしい constructor(props) { super(props); this.onChangeValue = this.onChangeValue.bind(this); } 参考 ES6でReact使ってたらsetStateがundefinedとか怒られた件 - とっしぃのTech Memo Reactで …

JavaScriptでオブジェクトの要素数を取得、空判定をする Object,length,blank

jsのObject.lenghtがない… オブジェクトの要素数を取得する方法 Object.keys を使う var obj = {}; console.log(Object.keys(obj).length); // => 0

郵便番号から住所を自動入力するZipaddrxを任意のタイミングで動かす[Js,React]

郵便番号から住所を自動入力するZipaddrx zipaddr.com Jsを呼んでおけば勝手に動いてくれるんですがReactを使っていてonload以外のタイミングで動かしたくなったのでその時の対処法です。 任意のタイミングで初期化 Zip.x(); これだけ ReactでZipaddrを使う…

JavascriptのObjectをeachしたい

Javascriptでオブジェクトをeachで回したい時に array同様にforEach使おうとしたらダメだった ダメなパターン obj.forEach(function (v,i) { console.log(i, ':', v); }); 普通にforを使うパターン for (var key in obj) { if (obj.hasOwnProperty(key)) { c…

getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

GoogleMapAPIを使って現在地情報を取得しようとしたところ Chromeで getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HT…

JavaScriptのオブジェクト(hash:ハッシュ)の空判定

javascriptの配列は以下のように要素数調べればいいのですが var a = [1, 2]; console.log(a.lenght > 0); // true オブジェクトにはlengthなど無いと… var h = { a: 1, b: 2 }; console.log(h.lenght > 0); // undefined 解決方法 var h = { a: 1, b: 2 }; …

javascriptでspliceを使って配列の要素を削除する方法

javascriptでspliceを使って配列の要素を削除する方法です。 // splice(削除する要素のインデックス, 削除する要素の数) arr = {'zero', 'one', 'two', 'three'}; arr.splice(1, 1); // arr => {'zero', 'two', 'three'} spliceは削除だけでなく追加もできる…

JavaScriptの連想配列にキーが存在するか確認する

JavaScriptの連想配列にキーが存在するか確認する方法です。 inはこのような使い方してはいけないとのご指摘を頂き修正しました。 var hash = { a: 1, b: 2 }; // inを使った悪い例 console.log('a' in hash); //true console.log('c' in hash); //false // …

jQueryのプラグインを作るときに必要なこと。書き方。

javascript書いててまとめた方がいいなあと思ったので初めてプラグイン作りました。 その時に見た記事とか使ったことのまとめです。 jQuery pluginの書き方 JavaScript - jQuery pluginの書き方をいまさら - Qiita 親要素の取得方法 make a record of…: jQue…

jQueryでinput[type=file]のファイル名を取得する

jQueryでinput[type=file]のファイル名を取得する $('#file').prop('files')[0].name;

JavaScriptで改行コードを<br>に置換する

JavaScriptで改行コードを<br>に置換する方法についてです。 textareaに入力されたテキストをHTMLに表示したい時があったのでその方法を JavaScriptで改行コードを<br>に置換する str.replace(/\r?\n/g, '<br>'); 正規表現で/\r?\n/gとすることで改行コードを取り出して<br>…

【JavaScript】デバッグをする際に使える22個のconsoleオブジェクトのメソッド

JavaScriptのデバッグをする際にconsole.logをよく使いますが他にも便利なメソッドがあります。 consoleオブジェクトの中身を確認すると以下のメソッドが定義されています。 assert clear count debug dir dirxml error group groupCollapsed groupEnd info …

【jQuery】マウスオーバーで画像を変える

onMouseOver,onMouseOutを使って個別に指定する <img src="img_off.jpg" alt="" onMouseOver="this.src='img_on.jpg'" onMouseOut="this.src='img_off.jpg'"> これだと個別に指定しなければいけないので汎用的な形としては以下のようにします。 jQueryのhoverを使って変更する $(function(){ $("img").hover( function () { this.src = this.src.replace('_off', '_on…

javascriptでin_arrayを実現する方法

javascriptでin_arrayを実現する方法を2つご紹介します。1つ目はsomeメソッドを使った実装方法。2つ目はArray型にin_arrayメソッドを定義する方法。