読者です 読者をやめる 読者になる 読者になる

JavaScript

NodeJSのWebSocketで入力内容の送受信

コマンド $ npm init $ npm i websocket $ node server.js #サーバー動かす コード server.js var http = require('http'); var WSServer = require('websocket').server; var url = require('url'); var clientHtml = require('fs').readFileSync('test.htm…

pureなnodejsでhtml表示とmysql接続

サーバー接続 一緒に見たいのでメモレベル削除予定 ※test.htmlを同階層に設置 const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; var server = http.createServer(); server.on('request', doRequest); // ファイルモジュー…

10分でwebプログラミング初心者

プログラミングの難しい点は環境作りにある 初心者が最初につまづくであろう物がプログラミング環境の準備だ バージョンがOSが前提ライブラリがモジュールが… 人間が紙に命令や手続きを書いて実行するのをプログラムと呼ぶのであれば 純粋なプログラミングに…

サーバー準備不要のReactHello(ES6)

Reactの^公式チュートリアルわからん! cdnを使おう HelloWorld!! <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script> </meta></head></html>

FirebaseでのWebアプリ開発構成の再考170208

想定環境 基本ローカルのみでのFirebase開発、シンプルなZenHab管理 独自のユニークな機能のためのAPIサーバー 現状どうしても追記したAPIサーバーが必要になるように思う ※上層の要望や機能洗い出しや資料作成は含めてない 構成 [管理] Githubでの世代管理 …

JSでこのブログアイコンのキャラ画像の読み込み

var tiruno_img_url = { "up" : [ "http://cdn-ak.f.st-hatena.com/images/fotolife/s/surume_Reflection/20170131/20170131020640.png?1485796241", "http://cdn-ak.f.st-hatena.com/images/fotolife/s/surume_Reflection/20170131/20170131020639.png?1485…

RiotJSで再帰的にJSONを描画する方法

■再帰的なRiotJSのタグの書きかた 再帰的にタグを書いてしまうとスタックオーバーフローになる web上でriot.js 再帰とかで検索しても日本語の物が少ない <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script> </head> <body> <object></object> <script type="riot/tag"> <object> <p>{key}:{value}</p> </object></body>

バイナリ時計作るよ<javascript>

■手始めに10進数を2進数に変換する関数 (バイナリ時計 - Wikipedia) function get2(num){ var binary = []; while(true){ binary.unshift(num%2); num = parseInt(num/2); if(num<1) break; } return binary; } さっそくサイドバーに実装→ ■我ながらかな…

新Firebaseでのログイン認証とデータ取得(CRUD)

ログイン認証 var fireApp = firebase.initializeApp(config); var fireAuth = fireApp.auth(); fireAuth.signInWithEmailAndPassword(email, password).then(function(){ alert("ログイン認証成功"); }); fireAuth.onAuthStateChanged(function(user) {});/…

RiotJSのrouteでmount切り替えしてみた

RiotJSのRouteサンプル <head> <title>RiotJSのRouteサンプル</title> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script> </head> <body> <div> <div id='header'> <a href='#app/first'>first</a> <a href='#app/second'>second</a> <a href='#app/third'>t…</a></div></div></body>

firebase.database認証のクソルール設定方法

■上の階層でtrueすると下層全てに許可される { "rules": { ".read": true, ".write": true, "users": { "$uid": { ".read": "auth != null && $uid === auth.uid", ".write": "auth != null && $uid === auth.uid" } } } } rulesに読み込み,書き込み許可して…

Firebaseが今来てる...気がす(Baaaaaas!)

qiita.com paiza.hatenablog.com qiita.com 「firebase」のYahoo!検索(リアルタイム) - Twitter(ツイッター)、Facebookをリアルタイム検索 Googleの改修によるちょっとした盛り上がりかもしれないが... いずれにせよ最終的にはサーバーサイド消滅して欲…

RiotJS+Firebaseでの簡易追加&読み込み

riot.js+firebase.databaseのサンプル <head> <title>firebase-crud-riot</title> <meta charset="utf-8"> <script src="https://www.gstatic.com/firebasejs/3.5.3/firebase.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script> <script> var config = { apiKey: …</meta></head>

RiotJSでネストしたかっただけなのに...

こんな事に半日使ったのかといまだにモヤモヤする。 大文字でタグを書いた場合ネストしたタグは動かない(異常系) <html> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script> <test></test> <script type="riot/tag"> <test> <h2>{ opts.title }</h2> <TEST2 arg={'子タグ(ネストするタグ)'}></test2></test></body></html>

React.jsをHelloWorldしてみる

<script src="http://fb.me/react-0.13.3.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script> <div id="app"></div> <script type="text/jsx"> var hello = "HelloWorld"; React.render( <h1>{hello}</h1>, document.body ); </script> <h1>{hello}</h1>渡すのは文字列じゃなくて良いのかJSXと言うらしい よくわからんので調べてみ…

JavaScriptのゲームを改ざんしてみる

クライアントからのデータは基本信用してはいけない 今回はこのゲームで確認してみる、このゲームでは大幅な部分をJSで書いている minmaxia.com 最初に選択したのはこの三人 * Fighter Tank character. Powerful melee attack. * Priest A healer and a kill…

firebase.databaseでCRUDしてみる

■新規プロジェクトを追加 ※firebaseダッシュボードはfirebase consoleとしてまとめられたので 既にプロジェクトを作成している人はインポートの必要がある プロジェクト選択画面のメニューから旧ダッシュボードも使用可能 おそらく使えなくなるのでインポー…

JSでの簡易的な座標計算用メモ

function Point(x,y){ //座標(set/get, sum) this.x = x; this.y = y; this.setPoint=function(x,y){this.x = x;this.y = y;} this.getPoint=function(){return this;} this.sumPoint=function(point1){this.x+=point1.x; this.y+=point1.y;} } //2点の距離 …

チルノをJavaScriptで歩かせるだけ03(移動)

移動処理 [Aキー][Dキー]で移動 #座標に描画するよう修正 var point = {x: 0, y: 0}; ctx.drawImage(image, point.x, point.y); #キーイベント追加 var key = []; //キーイベント window.addEventListener('keydown', key_down_e, true); //キーアップ funct…

チルノをJavaScriptで歩かせるだけ02(歩行)

画像を切り替えて描画する事で動いているように見せる事ができる。 通常はスプライト画像を使用するがわかりやすいよう分割 アニメーション <canvas id="canvas" width="256px" height="32px"></canvas> <script> var canvas = document.getElementById('canvas'); //canvasをidで取得 var ctx = canvas.getContext("2d"); //…

チルノをJavaScriptで歩かせるだけ01(描画)

今回のためだけにこんな画像を用意 これだけで疲れた... チルノ戦隊! わかりやすくするため画像は分割して拡大縁付けした 描画 <canvas id="canvas" width="256px" height="32px"></canvas> <script> var canvas = document.getElementById('canvas'); //canvasをidで取得 var ctx = canvas.getContext("2d"); //描画用contex…

ゲームのようなブロック落下風のデザイン

$(function(){ var board_xcount = parseInt($(document.body).width()/100); var board_ycount = parseInt($(document.body).height()/100); var frame_block = $("<div>"). css("opacity", 0.5). css("width", 100). css("height", 100); var clearance_width =</div>…

記事にjavascriptを汚染しないよう書く

//空アプリケーション配列 if(typeof(TestApplicationArray) == "undefined"){ var TestApplicationArray = {}; } var applicationName = 'app_name';//アプリケーション名 if(typeof(TestApplicationArray[applicationName]) == "undefined"){ //アプリケー…

落下するブロック風_jQuery.cloneで要素を増やしただけ_

ゲームみたいなのを綺麗だから置いてみた ・クリックすると要素が落ちる ※`document.elementFromPoint`で座標上の要素取得して再帰的に落下させてる とりあえず見にくくなったしすごくじゃま 面白い事にブログ上のヘッダなども落ちてくる そのうち埋め込んだ…

canvasテスト(30分シューティング)

canvas置けない><; JSをモジュールパターン化しないと名前空間がまずい... bashalog.c-brains.jp canvasタグ置くだけじゃダメ?w 翌日... 1.HTML 2.JS 上の順置かないといけないのか???...あとウアサハかわいい JSから生成する分には置ける..えぇ.. "Hey, g…