javascript

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 …

スクレイピングするのに調べたことまとめておく

はじめに 最近スクレイピングするスクリプトを書く機会があったので次回のためにメモしておく。・主にHTMLでコンテンツが作られているページ。 ・Javascriptでページを生成しているページ。 この2パターンに対応する必要があった。後者に対応しておけば前者…

【CasperJS】ログインする方法メモ

今回やりたかったのはログインが必要なページの取得。 単純にformをsubmitすればいいページとログインボタンをクリックするとjavascriptが動いてごにょごにょやってログイン処理へと遷移するパターンがあるのでそれぞれ実装してみたのでメモしておく。 form…

【CasperJS】eachThenとthenOpenで順次スクレイピングしてファイル出力する

今回やりたかったのはURLをリスト化しておいて順次サイトにアクセスしてレスポンスを取得するということ。当初はopenとthenを複数書いていたけどURLの一覧を別ファイル化したかったので今回やりたい経緯となった。ついでに取得したHTMLをファイルに保存する…

【ionic】ion-side-menuとion-tabsを同じ画面で使う

はじめに 今回やりたかったのはこんな画面 スタートテンプレートでサイドメニューとタブのものがそれぞれあるのでそれらを参考にした。 実装 まずはベースとなるHTMLを作る。ion-nav-viewがあるだけ。index.html <body ng-app="starter"> <ion-nav-view></ion-nav-view> </body>app.jsで、 menu.html > tabs.html > conte…

【ionic】ionic serveでwatchしてconcatする方法

バージョン1の話です。 ionic startで作られるcontrollers.jsは1ファイルだけど、大きくなると嫌なので分割できるようにしたいというのが今回やりたかったこと。 ひな形をつくる $ ionic start myApp tabs controllersを分割 controllers/_init.js angular.m…

【PhantomJS】clickした後のhtmlを取得する

こちらでとりあえず動かせたのでついでにボタンをクリックした後のhtmlも取得してみたのでメモ。htmlはボタンをクリックしたらテキストがページに追加されていく簡単なもの。index.html <head><title>テスト</title></head> <body> <div id="content"></div> <button id="btn-add" onclick="add();">追加</button><br/> <script> function add() { document.getElementById("content"</br/></body>…

【PhantomJS】ajaxなページをスクレイピングする方法メモ

やりたかったこと 今回やりたかったのはjavascriptでコンテンツを表示するページの解析。 今までもたまにスクレイピング用のスクリプト作ったことはあったけど、wgetやphpのfile_get_contentsで取得したhtmlを解析するようのものしかなかった。ちょっと調べ…

【css】javascriptで挿入した要素のz-indexが効かなかった時の原因と対応メモ

css詳しくないのに見よう見まねで書いててjavascriptで生成した要素のz-indexがどうにも効かなくてハマりました。 そのときの対応をメモ。ググってるz-index当てる要素はpositionがrelativeかabsoluteじゃないといけないって記事があってコレが原因って線で…

【javascript】Androidでonclickが取得しずらい原因がz-indexだった件

addEventListenerでclickに処理をセットしたのだが何とも押しづらかった。 全く押せないのでなく押しづらかった。iPhoneでは普通に押せるのにandroidだけ押しづらい。 HTMLが複雑で要素が入り組んでいたからその辺が原因なのかなと思って調べていただけどよ…

【javascript】fullscreenAPIでフルスクリーン対応してみたので使い方メモ

特定の要素をフルスクリーンにしてくれるAPI ただ端末によってできたりできなかったりなので対応可否で処理を分ける必要あり。 ちなみにiOSは使えなかった。今回使ってみてまぁよく使いそうと思ったのは以下らへん ・requestFullscreen 指定した要素をフルス…

【swift】iOSでWebViewのjavascriptと連携する方法メモ

はじめに 以下のような問題があってWebViewの使用を検討 ・開発中のアプリのある画面のデザインがけっこう複雑で実装するのに時間かかりそう。 ・HTML、CSSで実装するとそんなでもなさそう。問題点としてはこの画面でのユーザー操作によってアプリの他の画面…

【node.js】TransformStreamを使ってみた

はじめに babelifyとかいうモジュールのコードを見てたらstreamというのが出てきてよくわからなくなったのでとりあえずいじってみた内容はcsvを読み込んでtsvに変換して出力するだけtest.js #!/usr/bin/env node var fs = require("fs"), inherits = require…

【javascript】エラー処理を実装してエラーレポートを送信する

はじめに アプリ作る時はクラッシュレポートしてるのにjavascriptのエラーでは全然やってなかった。 jsでも必要があればやったほうがいいかも。ということでメモ 実装 window.onerrorイベントでエラーハンドリングできるみたい window.addEventListener("err…

【javascript】値渡し、参照渡しとか

値渡し var a = 1; var b = a; b = 2; console.log(a); // => 1 console.log(b); // => 2 値渡し2 var a = "1"; var b = a; b = "2"; console.log(a); // => "1" console.log(b); // => "2" 参照渡し var a = [1]; var b = a; b[0] = 2; console.log(a); // …

【javascript】objectのプロパティ(key)を動的に扱う

es6の環境で動作確認した結果定義する var _p3 = "p3"; var obj = { p : 1, "p2" : 2, [_p3] : 3 }; console.log(obj); // => Object {p: 1, p2: 2, p3: 3} アクセスする console.log(obj.p); // => 1 console.log(obj["p2"]); // => 2 console.log(obj[_p3]…

【react】form部品を共通化するときのひな形

はじめに ES6でのシンプルなものだけど共通化するとしたらこんな感じだろうか呼び出し側 import React from "react"; import FormPart from "./FormPart.jsx"; export default class Sample extends React.Component { constructor(props) { super(props); t…

【react】preventDefault、stopPropagationを使う

よく使うpreventDefaultとstopPropagation。 reactでも普通に使える export default class Sample extends React.Component { onParent(e) { // リンク先への遷移を抑制 e.preventDefault(); } onChild(e) { // onParentへのイベントを抑制 e.stopPropagatio…

【react】Expected onClick listener to be a function, instead got type stringエラー対応

はじめに reactをes6で使った場合です。 地味にはまった。。。自分の場合は以下の2パターン> パターン1イベントリスナーでメソッド呼び出すときにbindしていない export default class Sample extends React.Component { onClick() { console.log(this.statu…

【node.js】端末ごとに処理を分けるサンプル

はじめに 最近、ちょっとjavascriptいじる機会があってiPhone、Androidでけっこう内容が異なる処理をしなくてはならなくなったのでコードを整理する用途でnode.js使ってみたのでメモindex.js import Ios from "ios"; import Android from "android"; import …

【node.js】minifyifyでコードを圧縮する〜watchify、babelify、browserify環境にて

前提 $ watchify -v -t babelify src/index.js -o dist/index.jsこちらのコマンドが動くようにwatchify、babelify、browserifyはいれてあることとする。 使ってみる minifyifyインストール $ npm install minifyify --save実行 $ watchify -v -t babelify -p…

【react】jqueryメインの非SPAシステムの特定ページでのみreactを導入してみたのでメモ

はじめに 以前に自分が作ったシステムで主にjqueryを使って作ったものがありました。 基本的には困ることはなかったのですが、特定のページだけ複雑になってきていじるのが嫌になってきました。。。作りたい画面のイメージとしてはこんなかんじメイン画面 モ…

【javascript】動画の終了時に画像を表示する〜videoタグ

はじめに やりかたわからなかったのでメモ やりたいことはvideoタグで再生した動画が終了したら画像を表示するだけ (posterの終了後みたいなイメージ)video.load()しなおせばposterが再表示されるようなのでこれ使えばやろうと思えばできそうだった。 けど、…