javascript

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

【react】ログイン・ログアウトを実装する方法メモ

はじめに 今回やりたかったことはよくあるログイン・ログアウトの実装です。 で、react-routerを使っての実装方法が以下にありました。わかりやすかったです React Routerで認証を制御する方法 - Qiitaログインしているかどうかの判定はstoreにuser.session…

【react】react-routerの使い方メモ

はじめに reactやらreduxやらいじり始めてみたけどわからないことが多い・・・ 今回やりたいのはコンポーネント間の画面遷移とりあえず画面遷移などでのルーティング機能はreact-routerというのを使ってる人が多そうなのでこれの使い方を調べてメモ 構成 . ├…

【react】react-routerにて画面遷移と「TypeError: this.context.router is undefined」の対応

はじめに 今回やりたかったことは component内で何かボタンとか押されたときに別のページへ遷移させるということをしたかったのですが 「TypeError: this.context.router is undefined」とエラーが・・・ 対応 修正前 export default class Page1 extends Re…

iPhoneのaudioではミュート(muted)が効かない

地味に色々はまる・・・audioで音声再生して、画面がアクティブでなくなっても音声が流れ続けるので アクティブでなくなったらaudio.muted = trueに切り替えてみたpcとandroidではこれで良かったのだが、iPhoneではaudio.pause()して再生停止しないとダメな…

【javascript】android x chromeでAudio.currentTimeをセットしても効かなかったときの対応〜音声再生

やりたかったことは、javascriptでのAudioの再生で所定の場所から再生したいということでした 基本的は以下でできたのですが、android + chromeで動作確認できなかった。 currentTimeを設定しても0になってしまってうまくできませんでした。 <button onclick="playAudio();">再生</button> <script> function …

【javascript】canvasにimg画像(アニメーションgif)を重ねて中央寄せする

たいした話じゃないけど、やりたかったことは canvasへの描画処理を開始する前の事前処理(準備)中にローディング画像みたいのを出したかったのですが、 canvasにグルグル回るアニメーションgifを描画すると1枚目の静止画となってしまうのでcanvasとimgタグを…

動画ファイルからパラパラ漫画を作ってjavascriptで再生する

はじめに 今回やろうとしたことは動画ファイルから画像のキャプチャを作って、その画像を順番にcanvasに描画し続けるということ。 手順としては> キャプチャ画像の生成(ffmpeg使用) ・動画ファイルの情報を取得(fps、再生時間、画像サイズ) ・音声ファイルを…

【javascript】videoタグを使わずスマホで動画を自動再生できるライブラリ

はじめに 今回やりたかったことは以下 ・ページが表示されたら動画を自動再生する ・全画面表示ではなくページに埋め込む形でインライン再生 ・スマホ(ios・android)で実装動画広告のようなイメージでしょうかvideoタグを使えばできると思ったのですが、ス…

XMLHttpRequestで送信する時に改行コードが消えてしまったときの対応

また、基本的なことができていなくてはまった・・・やりたかったことは フォーム(textarea)のデータをXMLHttpRequestを使って送信する時に改行コードが消えてしまったこと修正前 // フォームの値からurlパラメータを作成 var textarea = document.getElement…

【adminLTE】スライダーメニューのデフォルトの開閉状態を指定する方法

はじめに bootstrap製の管理画面テンプレートのadminLTEの画面左のスライドメニューについてメニューオープン メニュークローズ こんな感じのかっこいいのがあるのですが、 1. メニューを閉じる 2. 画面遷移する 3. メニューが開いた状態になってしまうこう…

【chart.js】x軸(横軸)のラベルに間隔を空ける方法メモ

はじめに 今回初めてadminLTEというboostrap製の管理画面用のデザインテンプレートを使ったのですがかなりイイです。 情けない事に今までcssは1ミリもいじりたくないってタイプだったのですが、それなりの見た目の画面が用意できましたで、その中でchartjsと…

【javascript】要素が表示されたら実行する方法メモ

はじめに 今回やりたかったのは、ある要素が画面に表示されたら1度だけajaxでサーバ通信するという処理の実装です。 検索するとjqueryのライブラリでjquery.inviewというのがあったのですが今回は前提条件としてjqueryが使えなかったため自前で実装すること…

サードパーティクッキーの使い方・使い分けまとめメモ

はじめに 今回やりたかったこととしては ・Googleアナリティクス ・各社の広告用トラッキングタグ みたいに他サービスに自分が作ったタグなりJSのコードを埋めてもらってクッキーを扱いたかったことですで、大きく分けて上記のタグの形式(Googleアナリティ…

【Mithril.js】fuelphpとmithril.jsで簡単なSPAアプリを作ってみた

はじめに fuelphpとmithril.jsで入門がてらにSPAを作ってみたのでそのときのメモ。 mithril.jsのチュートリアルのtodoアプリみたいなものですが、実際に自分で手を動かしてみないとわからないことが多いので簡単なメモアプリを作ったのでそのときのメモ1)…

【Mithril.js】msxテンプレート内でconfig属性を使う方法

はじめに 今回やりたかったのは、MithrilでjQueryのSidrというスライドメニューを表示するプラグインを使いたかった。Mithrilで外部ライブラリを使うサンプルはココにありました。で、今回ちょっと悩んだのはmsxテンプレートで使う場合はどうやるのかなと思…

【Mithril.js】開発環境をつくる手順まとめ(browserify編)

はじめに Mithril.jsでの開発を行うにあたって、いれておいたほうがよさそうなツールとフォルダ構成をメモしておきます 使うツール ・node.js ・gulp.js(grunt.js) ・browserify 全てのjsファイルをしなくても、1ファイル読み込むだけでokになる ・msx Mi…

【Mithril.js】Browserifyの導入メモ

はじめに Browserifyは使い始めた段階だけど、とりあえず便利そうだなとは思ったので導入方法をメモ導入前のHTML <script type="text/javascript" src="mithril.min.js"></script> <script src="navbar.js"></script> <script src="content.js"></script> <script src="tabbar.js"></script> <script src="entrypoint.js"></script>導入後のHTML <script src="app.js">

【Mithril.js】msxの使い方メモ

はじめに Mithril.jsの勉強始めて、そのうち少し大きいアプリとかつくりはじめたときに、 HTMLテンプレートの記述方法がちょっと複雑になってくるのかなと思いました。で、調べたところドキュメントにもあったのですが、 こちらのツールを使うとHTMLをMithri…

cordova + phpでセッションを維持する方法

はじめに 本当は今、これについての具体的な実装例を書きたかったというか試してみたかったのですが無理そうなので、具体的な実装・実験は明日以降に行うとして理屈だけメモします。まずcordovaアプリでセッション処理を行う場合、以下の様な環境になると思…

画面を上から下に引っ張ったときにページを更新する - htmlにて〜pull to refreshと言うらしい

はじめに どういうタイトルつければいいかわからなかったのですが。 iPhoneアプリとかでリストページを下に勢いよくスクロールしときにページの上の方にクルクル「更新」画像が表示されるあれ。 cordovaでのハイブリッドアプリ開発で実装したくて調べてたと…

jqueryでvaridationを実装する方法2 - NGワードチェック追加

はじめに jqueryでvalidationを実装する方法 - とりあえずphpとか こちらで実装したvalidationにさらにNGワードのチェックをリアルタイムにつける必要があったので、この処理にさらに実装方法を追加追加する機能 ・NGワードのリストはデータベースにもつ ・N…

jqueryでvalidationを実装する方法

はじめに jqueryでのvalidation実装。 ありがちな機能ではありますが、久々に実装する機会があったのでメモ。 jqueryのプラグインとか探せば色々ありますが、過去にかゆいところに手が届かない的な事もあったので今回は全て自前で実装してみました。機能とし…

ブラウザの戻るをされたときにフォームを初期化する方法 - javascriptで

やりたかったこと 1. ユーザが入力フォームからデータを入力して登録ボタンをおす 2. 登録完了ページを表示 3. ブラウザの戻るボタン(iPhone等ならスワイプで戻る) 4. 1で入力した内容が残ってしまう、、、 上記の4.で入力した内容をすべて空にしたいとい…

javascriptで名前空間を使う

わかりやすい、使いやすいのでメモ http://qiita.com/mocha/items/c6a626416daaa04d0668 ↑このページのものをそのままです var top = top || {}; // ancestor namespace top.second = top.second || {}; // ancestor namespace (function (third) { // names…

jqueryで確認ダイアログをカスタマイズする方法

といいつつ、カスタマイズではなくてjqueryのプラグインの紹介ですjquery.remodal.jsというプラグインがあるのですがコレを使います ここからダウンロードsrc/ の中の以下の2ファイルを使用します jquery.remodal.css jquery.remodal.jsで,使い方は以下のよ…

jqueryで複数要素に対してイベントハンドラを設定する方法

複数要素に対して同じ様なことを記述していたので、こうすれば少しはコードが短くなるかもしれません、、、 <select id="elm1" name="elm1"> <option value="1">選択1</option> <option value="2" selected>選択2</option> </select> <select id="elm2" name="elm2"> <option value="1" selected>選択1</option> <option value="2">選択2</option> </select> <script> $("#elm1,#elm2")…

jqueryでformをsubmitする前に<input>タグを追加する方法

これでformをsubmitするさいに任意の値を追加して送信することができました <form id="form"> <input type="submit" value="送信"/> </form> <script> $("#form").submit(function() { $("<input>",{ type:"hidden", name:"input_name", value:"input_value" }).appendTo("#form"); }); </script>リンク集へ

jqueryでtriggerでイベントを起こしてイベントハンドラに値をわたす方法

triggerメソッドの第2引数に配列で渡すことで実装できました <form id="form"> <input type="submit" value="送信"/> </form> <script> var data = ["aaa","bbb"]; $("#form").trigger("submit",data); $("#form").submit(function(event,v1,v2) { console.log(v1);//aaa console.log(v2);//bbb }); </script>リンク集へ

jqueryプラグイン作成時のひな形

いっつも同じこと調べてる気がするのでメモメモです //jquery.example.js $(function(){ //プラグイン $.fn.example = function(options){ var opts = $.extend({},$.fn.example.defaults,options); } //デフォルト引数 $.fn.example.defaults = { param:"",…

jqueryでエクセル風の入力画面を作る

すごい簡単なんだけど、必要だったのでデモつくってみた とりあえずできることは...たいしてないのだけど 矢印キーで移動できるくらいなんだけど、管理画面とかからいちいちマウスでフォーカスあてて更新とかが手間とのことなので これをカスタマイズしてい…

bootstrap 参考URL箇条書き

cssとかぜんぜんわからないけど、bootstrap使ってモックを作る際に参考になったページをダラダラ追加(あとでまとめます。たぶん...)

Windows Media PlayerのバージョンをJavascriptで行う

function getWindowsMediaPlayerVersion (){ if (/*@cc_on!@*/false) { /*@if *1 document.open(); document.write('\nOn Error Resume Next\nDim version\nversion="0.0"\n'); document.write('Set wmp=CreateObject("WMPlayer.OCX")\nIf IsObject(wmp) The…

IE11の判別をJavascriptで行う

機会があったのでメモ function getIEVertsion() { var version,matches; //IE11 if (-1 != navigator.userAgent.indexOf("Trident")) { version = 11; //公開されてる情報だと以下で取得できるはずなんだけど... // if (matches = navigator.appVersion.mat…

Windows8.1の判別をJavascriptで行う

機会があったのでメモ //Windowsのバージョンをかえす function getWindowsVersion() { //Windows8 if (-1 != navigator.userAgent.indexOf("NT 6.3") || -1 != navigator.userAgent.indexOf("NT 6.2")) { return "win8"; } //Windows7 else if (-1 != navig…

外部javascriptファイル読み込み

すぐ忘れるからメモ

prototype.js→jquery.jsにしたときのメモ

html <div id="hoge"></div> <input type="hidden" name="hoge2"/> 修正前 $('hoge').innerHTML('<font color="red">プロトタイプ!!</font>'); $('hoge2').value = "value"; 修正後 $('#hoge').html('<font color="red">JQuery!!</font>'); $('#hoge2').val("value"); ゴリゴリとコーディングしてなくてよかった