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

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);

// ファイルモジュールを読み込む
var fs = require('fs');

// リクエストの処理
function doRequest(req, res) {
    
    // ファイルを読み込んだら、コールバック関数を実行する。
    fs.readFile('./test.html', 'utf-8' , doReard );
    
    // コンテンツを表示する。
    function doReard(err, data) {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(data);
        res.end();
    }
    
}

MySQL接続と操作

他のサイトを参考にswitchで切り替えれるようにしただけ…
node init.js create_database #node_mysql_testデータベース作成
node init.js create_table #userテーブル作成
node init.js create_date ユーザー名 #ユーザー追加

const mysql = require('mysql');
const db_name = 'node_mysql_test';
const table_name = 'user';

var client = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : ''
});

// 各種DB操作
console.log(process.argv);
switch(process.argv[2]){
    case "create_database":
        client.query('CREATE DATABASE '+ db_name, function(err) {
          if (err && err.number != mysql.ERROR_DB_CREATE_EXISTS) {
            throw err;
          }
        });
    break;
    case "create_table":
        client.query('USE '+ db_name);
        client.query(
            'CREATE TABLE '+ table_name+
            '(id INT(10) AUTO_INCREMENT,'+
            'name VARCHAR(100),'+
            'PRIMARY KEY (id))'
        ,function(err){
            console.log(err);
        });
    break;
    case "create_data":
        client.query('USE '+ db_name);
        client.query(
            'INSERT INTO '+ table_name+
            ' SET name = ?',
            process.argv[3], function(err, info) { console.log(err); });
    break;
    default:
        console.log("該当引数なし:"+process.argv[2]);
}


client.end();

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

f:id:surume_Reflection:20170417010823p:plain

プログラミングの難しい点は環境作りにある

初心者が最初につまづくであろう物がプログラミング環境の準備だ
バージョンがOSが前提ライブラリがモジュールが…

人間が紙に命令や手続きを書いて実行するのをプログラムと呼ぶのであれば
純粋なプログラミングに本来環境は必要ないと言える プログラム - Wikipedia



PCブラウザで見ているのであれば環境も必要ない

ブラウザのURL欄に以下を記述する事で実行できる
簡単だからぜひ手書きで実行してみてほしい

javascript:alert(“HelloWorld!!”);

javascript:までを手書きで書いて、実行部分のalert("HelloWorld!!");を書く
JavaScript疑似プロトコルと呼ばれる物でブックマークレットなどを作れる。


サンプル:こんにちわ世界

www.lifehacker.jp

※ブックマークのURL欄に記入



開発者ツール!!

F12を押してコンソール欄に
alert("HelloWorld!!");を入力Enter

開発者ツールって名前、プログラミングしてる感がありますねw
なんとここでプログラム言語のJavaScriptが使えます。
ブックマークレットjavascript:を抜かせばここから実行可能です。
f:id:surume_Reflection:20170417002745p:plain
ブラウザ時計表示サンプル:

(function(){function displayClock(){var nowDate = new Date();var h = nowDate.getHours();var m = nowDate.getMinutes();var s = nowDate.getSeconds();var textDate = right('0'+h,2)+':'+right('0'+m,2)+':'+right('0'+s,2);document.getElementById('divzumeclock').innerHTML = textDate;};function right(str,n){return str.split('').reverse().slice(0,n).reverse().join('');};window.scroll(0,0);if(document.getElementById('divzumeclock')){document.getElementById('divzumeclock').style.display = 'block';document.getElementById('divzumeclose').style.display = 'block';return;}var clk = document.createElement('div');if(document.all){var width = document.body.clientWidth;}else{var width = '100%';}clk.style.width = width;clk.style.height = '100%';clk.setAttribute('id','divzumeclock');document.body.insertBefore(clk,document.body.firstChild);clk.style.fontSize = '120px';clk.style.padding = '100px 0px 0px 0px';clk.style.textAlign = 'center';clk.style.opacity = 0.8;clk.style.filter = 'alpha(opacity=80)';clk.style.zIndex = 998;clk.style.backgroundColor = 'white';clk.style.position = 'absolute';clk.style.left = 0;clk.style.top = 0;var cls = document.createElement('div');if(document.all){cls.innerHTML = '<a href=\'\'>X</a>';}else{cls.innerHTML = '<a href=\'\'>X</a> ';}if(cls.attachEvent){cls.attachEvent('onclick',function(){document.getElementById('divzumeclose').style.display='none';document.getElementById('divzumeclock').style.display='none';return false;});}else{cls.addEventListener('click',function(event){document.getElementById('divzumeclose').style.display='none';document.getElementById('divzumeclock').style.display='none';event.preventDefault();},false);}cls.style.width = width;cls.style.height = '50px';cls.setAttribute('id','divzumeclose');document.body.insertBefore(cls,document.body.firstChild);cls.style.fontSize = '30px';cls.style.textAlign = 'right';cls.style.zIndex = 999;cls.style.position = 'absolute';cls.style.left = 0;cls.style.top = 0;setInterval(displayClock,250);})();



実際に開発していく

プログラミングは基本、複雑な物を除けば分岐繰り返しのみです


情報爆発が広告界で問題になってそうですが
こういった学習サイトが多く点在しています。
ドットインストールがシンプルでおすすめです。

www.sejuku.net

cod:iwの時間を操る装置!?

#どこかで見た事あると思ったら…

CODIWのコーリングカードの中に手に変な装置をつけているカードが


f:id:surume_Reflection:20170408125431j:plain



シンギュラリティー

f:id:surume_Reflection:20170408125610j:plain

www.youtube.com



プロトタイプ

f:id:surume_Reflection:20170408125733j:plain

www.youtube.com

Banished失敗例-理想だけで現場は成り立たない

はじめは難易度Mediamでbanished達がここに村を作ろうとしていた。
そこに突然指揮をとりはじめるプレイヤーが現われる。

banish達は先見を持ち未来を見越しているプレイヤーの指示通りにしていた。

生成された環境

川が遠い山にかこまれた地形

f:id:surume_Reflection:20170408094227j:plain




村壊滅までのフェーズ

1.まずはともあれ家が無いと困るので家を作成

2.横にトンネルを作れば将来有益になるため建造開始

3.食料が無いので釣り小屋山菜採りの小屋を建造開始

4.ここで石が無くなり周囲に石が無いので遠くから調達

ここで指揮者は気づくべきだった…

5.釣り小屋山菜採りの小屋が建ったものの飢えで半分以上死亡

f:id:surume_Reflection:20170408095909j:plain

6.時間経過を早め食料と人口が増えるのを待つ

7.冬が来るが人口が足りたいため石切り場を建造

8.そしてだれもいなくなった…

f:id:surume_Reflection:20170408101536j:plain




原因と結果

原因1:トンネル

原因として大きいのがトンネルの作成だそれにより資材となる石が不足
遠くへの調達が必要になった事で食料の調達が遅れた
トンネルの建造には大量の石が必要になる。

f:id:surume_Reflection:20170408100521p:plain

原因2:冬

Banishedでは冬は最初の関門である基本的に木材調達と薪割り場があれば問題ない
私は学習力がないので久しぶりにやるたびに冬で村が壊滅している

最後に…
理想を出す側現場を指揮する側は別にするべきだ
理想で現場は回らないぞと言う事

サーバー準備不要の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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
        <script type="text/babel">

        // はろーわーるどコンポーネント
        class HelloWorld extends React.Component {
          render() {
            return (<div>HelloWorld!!</div>);
            }
        }

        // 描画
        ReactDOM.render(<HelloWorld />, document.body);
        
        </script>
    </head>
    <body></body>
</html>



webプログラミングの敷居を上げているのは確実にサーバー
ブラウザのURL欄にjavascript:alert("");が入力できない人間がいるか?
今回はNodeJSのnpmやらwebpackを使わずにコピペのみで作成できる。

今さらアイマイナの考察

www.youtube.com

「平穏を保つため軽い三文芝居で
 いらないケーキ食べておいしいって微笑むような」

自分自身を俯瞰の目で見てしまったら、ECHO(鏡を対面に置いたような状態)が発生する。
行動のすべてがロールプレイになり徐々に内向的な潜在意識を俯瞰するようになる。




「優しい君の声が怖くなってしまったら
 冷えた銀河のベットで一人眠るよ」

自身を鏡で見るように自己投影すると膨大な量の潜在を知覚する事になる
そこには潜れば潜るほど好奇心による内向への指向性が誘発される




「嫌いな物のほころび暴露するのは容易い
 好きな物の欠点は甘い目で見てシンパシー」

この自己投影は他者にも適応可能で、ミラーリングや共感と呼ばれ
これを潜在でのエミュレーションに適応すると、完全な模倣が可能になる
究極的には、モジュール単位での相手の脆弱性や共通点を知る事ができる




「酷く曖昧な、曖昧な今」

情報の分解は具体→抽象であって逆に知るという事は抽象→具体となる
上記では無条件で相手の事を知る事が出来るように書いたが、抽象の海で具体化する事は極めて難しい
分解と構築にすると理解しやすい




「シーソーが傾いて
 途端に黒に染まったら
 笑顔に溢れた過去などすべて捨てるの」

現代 において空気を読まず行動する事はすべてを捨てる事に等しい
つまりロールプレイで疲れ切ってやめる、というのはすべてを捨てる事だ




「木偶人形になれるなら
 正義と謀(たばか)るプライドも
 浮気な塵となって 嫌だ」

もし俯瞰の目で行動せずただロールプレイを続けると
目で見た真実に沿った正義など無くなってしまう。




「いつか魔が差して地獄の底に触ったら
 人を愛する理由さえもぼやけるの」

俯瞰の目で見た潜在の底の底にには感情機能が存在しない




「白色軽んじては恍惚
 鈍色真似てとんでく愚者」

俯瞰の目で他人を真似ロールプレイをする愚か者




「とてもまっすぐに物を疑って
 やがてまっすぐに捻くれるの」

潜在の底の底に行って得た知識や結果によって
周囲の人間に比べ行動が考えや行動が打算的になる




「幻聴も俯瞰の目も自惚れた俗な夢も
 空想のリュックに詰めて旅でもしましょうか」

さて、空想しょうもない潜在に潜ろうか




「ねぇアイマイナ
 君の声が化け物に育ったら
 冷えた銀河のベッドで一人眠るよ
 おやすみ」

生きなければいけないという思い込み


本当は考える事だけが自由なんだ
なのに何時しか訳の分からない力に支配されて
少しずつ不自由に複雑になっていく
子供の頃はもっと自由にいろんな事を考えていたはずなのに
きっと人間はだんだんバカになるように出来ているだろう

 教授タイプの人間が最も救われるのは考えている時だけだ




自分は何者で、どこから来て何処へ行くのか…
みんな生きている事を楽しいと思い込んでいる
生きなければいけないという思い込みが、どれほど重荷になっているか
彼女は何時も考えていた


 生きる事に希望が見出せないのではなく
 生きなければいけないという思い込みが人を縛り付ける
 引用:「すべてがFになる1話」






surumereflection.hatenadiary.jp