javascript

【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が再表示されるようなのでこれ使えばやろうと思えばできそうだった。 けど、…

スマホでの動画インライン自動再生まわりについて調べたことまとめ

はじめに ちょっと前に自分なりに調べて放置になっていたのでまとめておく まず前提としてiPhoneとAndroidで全然違う。で、さらにios10とios9以下とでちがうのとchrome53以上と53未満でちがう。 端末やブラウザのバージョンで処理を切り分けるのがよいのかと…

【javascript】ios10でpagehideが呼ばれなくなった操作メモ

ページから離れるときに何か処理をしたいと思ってiosでpagehideをハンドリングしていた。 ios9では 1. リンクで別ページへ遷移 2. タブを閉じて画面を閉じるときにはちゃんと発火されていただがios10では2.の場合に呼ばれなくなっている気がする。。。 何気…

【javascript】ios10でsetIntervalした処理がバックグラウンドに回ったときの挙動について

検証用のコードは以下の様な簡単なものでsafariで確認 setInterval(function() { // 何か処理 }, 200);ios9では ・200msごとに実行される続ける ・別のタブを開くなど画面から離れる ・1000msごとに実行される続ける ・画面に戻る ・200msごとに実行される続…

【javascript】特定の要素が画面に見えているかどうかを判定する方法メモ

はじめに 今回やりたかったのは特定の要素が画面に見えていたら何か処理をするということ。 要素が全て見えている場合と50%以上みえてるときを検知できるような想定 実装 全て見えているかを判定 var target = document.getElementById("target"); var offse…

【javascript】iPhone、Androidでブラウザを閉じる・非表示を監視して処理をする方法メモ

はじめに 今回やりたかったのはユーザー操作でページから離れるときに何か処理がしたいということ。 で、とりあえず考えられる操作としては以下 ・ブラウザを終了したとき ・タブを閉じたとき ・別タブへ移動したとき ・別アプリへ移動したとき ・ホーム画面…

【bootstrap】プルダウンに画像を表示するライブラリ

はじめに 今回やりたかったのは画像を選択するようなプルダウン。 検索してみたら、bootstrap-select.jsというのがありました。http://thdoan.github.io/bootstrap-select/ こちらからDL 実装 使い方は簡単でjsを読み込んで以下みたいな感じで使える。 boots…

chartjsで棒グラフの作り方メモ

はじめに adminLTEのサンプル使って棒グラフを表示しようとして比較対象なしのグラフを作ろうとしたらなぜかうまくいかなったのでメモ また、x軸のメモリの間隔もあけたかったのでついでにメモ作りたかったのはこんな感じのグラフ 実装 $(function () { Char…

【javascript】ドラッグアンドドロップで画像をアップロードする方法メモ〜jqueryも使った

はじめに 以前につくったサービスの改修で必要になった。どこかのブログに書いてあったのをコピーして動いたのでそれでよしとしていたのだが、今回はそれが1ページに複数必要になって問題が発生したので作り直してクラスにしてみた DOM操作にjQuery使ってい…

chrome54以上でtouchstartでvideo.playが使えなくなったときの対応メモ

はじめに Androidでの動画自動再生のやり方がわからなかったのでタッチイベントで無理やりvideoを再生するようなやり方をしていることがあった。 で、今のところ問題なかったのだがふとchromeのコンソール見ると以下のようなワーニングが出ていた Performing…

【bootstrap】Modal内での画面遷移する方法

どうやるのが1番いいのかわからないけど今回は以下の対応 ・Modal内に複数ページのHTMLを入れておく ・現在のページ番号を変数に保持しておく ・[前へ][次へ]ボタンが押されるたびにページ番号を+または-してModal内を再表示 <div class="container" style="margin-top:5px;"> <button id="onModal" class="btn btn-default">Open</button> </div> <div id="myModal" class="modal fade"> </div>

【bootstrap】Modalの初期値を動的に設定する方法

たまにやろうとするとパッと出てこずに何度も調べている気がするのでメモしておく 一覧のクリックする行によってモーダルの中身を変えたい時などにも使える <button id="onModal" class="btn btn-default">Open</button> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> </div></div></div>

【node.js】export defaultで作ったモジュールをexpressからrequireできなくてes6にして対応した

はじめに 以下のようなディレクトリ構成でserver以下にexpressでサーバーを作成。 で、client以下にreactとかでフロント側のコードを作成。 で、common以下にserverとclientと両方から呼ばれるモジュールとかを置こうとした。clientとcommonはbabelでビルド…

【node.js】expressでstaticが有効にならないと思ったら。。。

地味にハマった。。。 import express from "express"; import path from "path"; var app = express(); // ★こうじゃなくて // app.use(express.static(path.join(__dirname, "..", "dist"))); // ★コレしたら動いた app.use("/dist", express.static(path.…

【node.js】es6での開発で最低限必要な設定メモ〜npm・bower・gulp・grunt・browserify 色々あるけど。。。

はじめに javascriptで開発しているとnpm、bower、gulp、grunt、browserifyなどなど用語が多くて久々にやろうと思うとわからなくて気持ちが落ちる。 で、何もわからずネットで見つけた記事をコピペしてゆくとよくわからないものが一杯入っているというのも嫌…

【socket.io】複数サーバーへの対応メモ

はじめに 今更な内容ですが実際に試したことがなかったのでメモ。 socket.ioをスケールアウトさせるような規模のサービスを作る機会がないのでやっていなかった。。。 まぁ今後もあるかどうか不明だけど、いちおう試しということで実装自体はredisのpub/sub…

スマホでの動画インライン自動再生が解禁されるらしい〜iPhone(safari)・Android(chrome)

スマホ(iPhoneとAndroid)での動画をインラインでの自動再生をやりたくて以前ちょくちょく調べていました。 確かそのときは端末の制限でまぁ難しいかなという結論に至りました。> iPhone(Safari) http://www.appbank.net/2016/06/16/iphone-application/12169…

【node.js】expressで必ずやる設定などまとめ

はじめに expressでWebアプリを開発してみて次回以降もやるであろうなという作業をまとめておく といっても自分の趣味レベルで作ったものなので大規模にも考慮してとかは全然できていません。とはいえせっかくやったのでできる範囲で案件で使えるようにと考…

【node.js】connect-mongoでSyntaxError: Use of const in strict modeエラーの対応

はじめに Node.js + Express4を使っていて、つまづいた注意点まとめ - Qiita expressでセッションを使おうとしたら上記の記事のワーニングが出ました。 これはセッションの保存先がローカルファイルだと出るワーニングだそうでとりあえずmongodbを入れてそち…

【node.js】expressでエラー処理を実装する方法

はじめに expressでの開発で必須のエラー処理を実装したので次回やるときのためにまとめておくやりたいことは以下 ・エラーが発生したらエラー内容をログ出力 ・ユーザーにはエラーページを表示 ・エラーでサーバーが落ちないように 実装 サーバー本体の実装…

【node.js】expressでログイン処理を実装する方法

はじめに また基本的な機能だけど、node.jsで初めてだったのでよくわからなかったやりたかったことは以下 ・ログイン情報はセッションにいれる ・特定のurl以下はログインしていないと見れなくしたいちょっと調べてみるとPassportというミドルウェアを使うの…

【javascript】promiseの使い方メモ〜条件分岐とか

はじめに node.jsでのサーバーサイドの処理です。 今回やりたかったことはPHPだと以下のような処理 ※あまり意味のないコードをズラズラ書いてわかりずらいが、やりたことはDBから取得した値を見て処理を分岐するような処理を繰り返し行うようなイメージPHPの…

【node.js】expressでapiサーバーを実装するときに最低限必要そうなことをまとめておく

はじめに socket.ioを使って簡単なチャットサーバーを作ろうとしました当初、socket.ioを使わないapiの実装はphpで、socket.ioの部分だけnode.jsで・・・と考えていたのですが どうせならapiの部分もnode.jsで作った方がいいのかなと思ってちょっと調べこと…

【node.js】pm2でexpressが意図せず再起動していたときの原因

今回、ちょっと迷った内容は以下 (1)expressを使ったサーバー起動 (2)urlを叩いてみる (3)(2)のレスポンスは返ってくるけど、サーバーが再起動されるサーバー起動 ./node_modules/pm2/bin/pm2 start app.js --watchurlを叩いてみる curl http://example.com:…