javascript

【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:…

【node.js】expressにてmysqlを使う方法メモ

はじめに 今回やりたかったことは以下 ・expressからmysqlへクエリ実行 ・ormは使わずsqlを直接実行したい ・dbの処理部分は共通化したい ・エラー処理も実装するnode-mysqlというライブラリを使いました 実装 ファイル構成 ├── app.js ├── db.js # dbの共通…

【node.js】expressにてCan't set headers after they are sentでサーバーが落ちる

はじめに 最近ちょっといじってますが、またよくわからず簡単な事にはまってる気がする・・・ やりたかったことはurlパラメータを受け取ってmysqlを検索。結果をjsonで返すというだけですで、mysqlからデータ取得してconsole.logすると取得できるところまで…

react.jsでの開発の作業手順まとめメモ 〜 redux + router

はじめに まだまだよくわかっていないがやっと少し慣れてきたので自分用に作業手順をまとめておく ディレクトリ構成とベースとなる部分を作る 自分はこんな感じにしてみている。 基本的な構成がこんな感じで、開発するにつれてactions、components、reducers…