javascript

ionic async awaitでAPIへ同期的にリクエスト

やりたいことはタイトルのとおり。初めてでハマったのでコードをメモしておく。 import { Component } from '@angular/core'; import { Http, Headers,RequestOptions } from '@angular/http' import 'rxjs/add/operator/map' import 'rxjs/add/operator/cat…

javascript input file で選択した画像をBlobURLで表示

最近、やることが多いのでひな形をメモしておく <input type="file" id="upload_file" /> <script> window.addEventListener('load', function() { var upload_file = document.getElementById('upload_file'); upload_file.addEventListener('change', function() { var blobUrl = window.URL.createObject…

Javascriptでcss(style)をまとめて一括セットする方法メモ

大した話じゃないけどいつも忘れるのでメモ1つずつちまちまセットしてる var div = document.createElement('div') div.style.color = 'red' div.style.fontSize = '18px' div.style.fontWeight = 'bold' ・・・まとめて一括で設定もできた var div = docume…

【Javascript】contenteditableなdivでカーソル位置が指定できなかった原因

contenteditableなdivに「今日はいい天気だ」というテキストが存在して「は」の後ろ(前から3文字目)にカーソルを置きたかった。以下のようなコードで実験したけどなぜかカーソルが先頭にきてしまった。 <div id="editor" contenteditable="true"> 今日はいい天気だ </div> <script> window.onload = function() { va…

【Javascript】iOSでblur時にSelection.rangeCountが取得できなかったときに調べたこと

今回やりたかったのはfocusが外れるときの要素を保存しておき、再びfocusがセットされるときにカーソル位置を戻すということ試したのはこんなコード <div id="editor" contenteditable="true"></div> <input type="button" id="restore-range" value="restore range" /> <script> var saveRange $('#editor').on('blur', function() { var s = window.getSelection() if (0 < s.rangeC…

【JavaScript】GoogleMapの場所情報のポップアップ(POI)を消す

http://scientre.hateblo.jp/entry/20140410/disable_poi_popup こちらのサイトを参考に実装していたのですが、Mapを生成する際のオプションで制御できるとのことでした。 var div = document.getElementById('map') var options = { clickableIcons: false …

【vue.js】コンポーネントを分割してテンプレートを分割

1画面1コンポーネントみたいな形で実装されているプロジェクトで。v-ifが増えてごちゃごちゃしてきたのでコンポーネントの分け方をメモしておく。vue.jsの基本構文だけども。。Main.vue <template> <div> <part-free v-if="user.isFree" v-bind:user"></part-free> <part-premium v-if="user.isPremium" v-bind:user"></part-premium> </div> </template> <script> import PartFree from './PartFree.vue'…

【React】componentでのonClickの使い方

ReactでonClickにメソッドをひもづけたときにundefinedエラーが出た。そのときに対応する方法がいくつかまとめておく。問題のコード class App extends React.Component { constructor() { super() this.state = { items: [] } } addItem() { this.setState(…

【javascript】オブジェクトのプロパティ名に変数を使って動的にセットする

ES6では、こんなことができるのか。 const column = "age" obj = { [column]: 18 } console.log(obj) // { age: 18 }オブジェクト初期化子 - JavaScript | MDNこれは便利。以上です。

【angularjs】外部スクリプトの読込が完了してからコントローラを実行する

今回はGoogleMapを扱う際に気になったのでちゃんと実装してみたのでその時のメモ。htmlにscriptタグを埋め込むやり方が普通なのだろうが、そこでネットワークエラー等が発生するとhtmlを再読み込みしない限り2度と読み込むタイミングがないのではないかとい…

【JavaScript】GoogleMapで日本地図全体を中心にして全て表示

なんかのネタっぽいけどコピペ用にメモ var div = var div = document.getElementById('map'); var map = new google.maps.Map( div, { mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true } ); var latLngs = [ [45.52289, 141.9366], [30.…

「You must pass a component to the function returned by connect. Instead received」エラー対応

不慣れで相変わらず細かい事にはまってる。1つずつメモしていくしかない。コンテナとかコンポーネントとかはReactの勉強中なのでReactのそれ。ただ今回は単純にJavaScriptの使い方の問題だった。エラーメッセージ You must pass a component to the function…

【javascript】GoogleMapの基本的な使い方まとめておく

GoogleMap使う機会があったので簡単な地図アプリならこれくらいわかれば作れるだろうということを簡単にまとめておく。っていっても本当に基本的なことだけだけど。 地図を埋め込む要素を用意 <script src="https://maps.googleapis.com/maps/api/js?key=APIキー"></script>

ES2015(ES6)で読めなかった構文

Reactをちゃんと勉強しようかと今どきのJavascriptのコードを見ているとわからない(というか読めない)ことが多々あった。記号とかの意味がわからないと検索もしずらかったのでメモしておく。 プロパティの略記法(ES6) オブジェクトにプロパティをセットする…

【javascript】Blob型の要素にfilenameをセットする

こんなのでいいのか。。今日けっこうハマってしまった。。 // Blob型のデータを準備 var blob = new Blob([ ・・・ ], { type: 'image/jpeg' }); // 送信 var formData = new FormData(); formData.append('image', blob, 'image.jpg'); // ★第3引数で指定!!…

javascriptでinput type="file"を作って送信

やりたかったこととしては、ユーザーが指定した画像をjavascriptで加工(トリミングやリサイズ)したファイルをinput type="file"に指定してアップロードしたかった。 結論から言うとFormDataにBlob型のオブジェクトをセットして送信すればいいみたい。 var fi…

iPhoneで撮った写真が逆さになる問題をブラウザ側で解決する

スマホからフォームで画像をアップロードしてphpで保存したら逆さで保存された - とりあえずphpとかかなり昔に同じ問題に遭遇した時はサーバーサイドで解決した。が、jsが進化したからか自分がjs触る機会が増えたからかわからないけど、今回ブラウザで解決し…

javascriptでのクラスひな形

ちょっと調べてたけど、素のjavascriptて最近あまり書かないのかな。。?と思いつつサクッと作ることもあるかと思うので。 (function(global) { // Constructor function MyModule(name, age) { this.name = name; this.age = age; return this; } // Privat…

javascriptのif文について

最近疲れがちで感覚でやってしまいがちなのでメモしておく。 <script> function testIf(value) { if (value) { console.log('true'); } else { console.log('false'); } }; // 数値 testIf(0); // false testIf(1); // true testIf(-1); // true // 文字列 testIf(''…

ionic(cordova) config.xmlを環境(development、production)毎に分ける

以前から気になっていた内容。 ionic か corodova の標準の機能でありそうだけどドキュメント眺めたり検索してもよくわからない。みんな必要な機能な気がするがどうやるのが正しいのだろうか。解決したかったこととしては以下 ・アプリのBundle Identifierや…

【ionic】ionicPopup.promptの入力フォームがキーボードで隠れないようにする

app.js angular.module('starter', ['ionic']) .run(function($ionicPlatform, $localStorage, ParentService) { $ionicPlatform.ready(function() { if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccess…

緯度経度の2点間の距離、角度と座標 - GoogleMap

今回はapache cordovaのGoogleMapのプラグインの話だけど、GoogleMapのAPIならきっと同じように取得できると思われる。計算方法とか調べていたが実際にGoogleMapに表示してみるとけっこうずれたりしてうまくいかなかった。で、プラグインのドキュメント見て…

vue.js vuex入門 開発で最低限必要そうなこと

はじめに vue.js使うことになりそうなので少しいじってみたのでメモしておく。とりあえず今回やってみようと思ったことは以下 ・ヘッダー、フッター、メニューなどの共通化 ・vue-routeを使ったルーティング ・ログイン機能 ・APIへのリクエスト ・vuexの導…

angularのhttpでレスポンスヘッダーを取得する

今回やりたかったことは以下。 angularの$http.getまたは$http.postでAPIへリクエストしたレスポンスヘッダーを取得するということ。 chromeの開発ツールからはレスポンスヘッダーを確認できたのだが、angularでは取り扱う場合にうまく取得できずに少しはま…

【Angularjs】PromiseでforEachで同期処理で順次実行する

こちらのコードを実行すると、testが1秒間隔で3回順次実行される。 var test = function() { var deffered = $q.defer(); $timeout(function() { deffered.resolve(); }, 1000); return deffered.promise; }; var deffered = $q.defer(); var promise = deff…

【angularjs】serviceで [$injector:unpr] Unknown provider が出た時の対応

半日くらいハマりました。エラーが出てたコード angular.module('myApp', []); angular.module('myApp') .service('myService', function() { ・・・ }); angular.module('myApp', ['ngCordova']) .service('myService2', function() { ・・・ });修正後のコ…

【angularjs】$http.postでのjson送信でoptions method not allowedを解決した時のメモ

やりたかったことは、localhostのサーバーで動いてるクライアントHTMLからサーバー上のAPIにPOSTでJSONを送るということでした。 なんかうまくいかなくて色々やってみたけど、結論からいうとangular側は以下のコードでいけました。クライアント側 $http.post…

【javascript】iPhoneでpagehideが2回呼ばれたときの対応

今回やりたかったことは、ページから離れるとき(リンクとか)にその内容をサーバーに通知したいということ。pagehideで実装したのだが、なぜかiPhoneだとこれが2回呼ばれる現象だった(safari、chromeともに)。以下のようなコードで確認したところ、2回送信さ…

gulp-concatでファイルを新規作成したときに動かなかったときの対応

gulp-concatがうまく動かなかった時のメモ。こんなことでひっかかる人あまりいなそうだけどハマったのでメモしておく。ファイルの更新では上手くいくが、新規作成と削除で上手く動かなかった。ディレクトリの階層が深くなるとダメなのかなとか思ったけど全然…

【javascript】要素が画面に何%見えているか判定する

2度と使わないかもしれないけどメモしておく。 ある要素が画面の何%見えているか判定する処理。 あんまりやる機会ないと思うけど、特定の要素が100%見えたら何らかの処理するとかそんなイメージ。 <script> var target = document.getElementById("contents"); var …