小さなエンドウ豆

まだまだいろいろ勉強中

特定のURLにアクセスできないようにする方法(Chrome)

あるURLにアクセスできないようにしたい

Amazon Prime

今年度のはじめにAmazonのプライムに入ってしまったのがことの発端
最初は間違えて入ってしまったのだが、今は公開していない。むしろあの頃の僕に感謝している。
入会してから見た映画やドラマでおすすめなのがこれらである。

などなど

入会のメリット・デメリット

メリットはもちろん懐かしのアニメ・ドラマ・映画が見放題であることである。
デメリットはそれ相当の時間を払って見なくてはいけないことである。例えばめぞん一刻をこの前まで見ていたが全話で90話ある。1話30分なので全部で2700分、1日は1440分なので約2日かけて見なければならない。
1週間で見た私は1日で約400分で6時間くらいめぞん一刻に捧げた計算になる。
面白かったので良かったが終わったあと非常に時間を消費してしまった罪悪感に襲われた。

なのでこれを期にAmazonプライムを控えようと思った。しかしどうする…そこでアクセスを断つことにした。

方法

僕の使っているブラウザがGoogle Chromeなので拡張機能にないか調べてみたところSite Blockという機能があった。

Site Block

使い方

  1. Site Blockにアクセスし拡張機能に加える
  2. アイコンを押してオプションを選択 f:id:h-piiice16:20161024204814p:plain
  3. Sites to Block の欄にブロックしたいURLを入力し、Save Optionを押す。 f:id:h-piiice16:20161024205005p:plain

これで完了! 指定したURLにアクセスできなくなってしまう。

元に戻す時はSites to Blockの欄のURLを消してSaveすればよい。

さていつまでSites to BlockにURLがあるかどうか…

鈴木先生(2回目)

鈴木先生

シルバーウィーク暇すぎてアマゾンプライム様に浸かってました。
そんな中昔見た「鈴木先生」という深夜ドラマを見つけ、懐かしさのあまりイッキ見してしまいました。

鈴木先生とは

物語はある中学教師の鈴木先生が独自の教育メソッドで生徒たちと真正面から向き合うヒューマンドラマです。
当時の視聴率は2.1%と悪かったらしいですが、映画化までされており、内容は評価されています。
リアルタイムで見ていたことの私は17歳でしたがあの衝撃は忘れません。 朝ドラで有名になった若かりし頃の土屋太鳳ちゃんや大河ドラマに出演中の松岡茉優などが出ています。 今活躍する女優の初期の演技も見れるのでおすすめです。

特徴は深夜ドラマであったため題材が妙にリアルです。全10話なのですが”セ○クス”ってワードが何回発せられたことか。
鈴木先生性教育に独自の考えを持っていて僕としては一番腑に落ちる考えです。
他にも妙にリアルであるため共感する場面も何個かありました。
今回2回目であり、歳も重ね考えが少しはおとなになり、違った感想をもつことができたのでここに記したい。

感想

今回気づいた点が素行の悪い生徒と良い生徒との間で先生が手のかかる時間が違うという点です。先生としては手のかからない生徒はほっておいても良いのかもしれませんが、中学生という多感な時期には生徒ひとりひとりにそれぞれ問題や悩みを抱えています。その点にふれいているのはなかなか他のドラマには無いなと思います。
しかし事実問題すべての生徒にかまっている時間が先生にはありません。その問題に鈴木先生はクラス全体でよい関係を作り、先生でカバーできない問題をクラスメートに解決してもらうという考えで臨みます。これが鈴木式教育メソッドの一つですがその考えには悲しい過去がありいろいろと考えさせられました。

永遠に中学生

中学生つながりで私が好きな私立恵比寿中学の新曲「まっすぐ」を紹介させてもらいます。
この曲は自分の思いをまっすぐに誰かに伝えたいという気持ちだけの歌です。
私もエビ中鈴木先生の生徒たちのようにもっと自分の意見を”まっすぐ”に言うような中学生でありたかったと今は思います。
しかしエビ中のコンセプトは永遠に中学生、年齢 - 12で自分が中学何年生かわかります。
私もまだ中学10年生なのでこれからも頑張っていこうと思います。

JSP入門(tomcatインストール編)

JSPとは

Java Server Pageの略らしい
Javaのコードの中にHTMLを埋め込んだり、HTMLにJava埋め込んだりしてダイナミックにページを出力するものっていう現時点での理解がある状態で勉強していきます。
今回は特にJSP固有のタグなんかについて知りたい

Tomcat

Tomcatといえば「振られ気分でロックンロールの」TOM☆CATを僕は思い出します。(一応大学生です)
アメリカの戦闘機にもそんな名前のものがあったような…

それは置いといて、JSPを動かすためにTomcatをインストールします。環境はUbuntu14.04です。
Javaのインストールを事前にお忘れなく

$ sudo apt-cache search tomcat
...

$ sudo apt-get install tomcat7 tomcat7-admin tomcat7-common tomcat7-docs tomcat7-examples tomcat7-user

Hello JSP!

次にTomcatの環境を作ってJSPファイルを作ってみました。

$ tomcat7-instance-create [dirname]
$ tree [dirname] -d
[dirname]/
├── bin
├── conf
│   └── Catalina
│       └── localhost
├── logs
├── temp
├── webapps
│   └── test
└── work
    └── Catalina
        └── localhost
            └── test
                └── org
                    └── apache
                        └── jsp

と構造はこんな感じです。
webappsの直下にtestというディレクトリを作り、その中にindex.jspを作ります。

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
</head>
<body>
<h1>Hello JSP !!</h1>
</body>

こんな感じの内容を書き込みました。まだJSPの記述はできないのでhtmlチックに書きました。
次にbinの中のstartup.shを実行し、http://localhost:8080/test/にブラウザからアクセスするとindex.jspの内容が表示されます。
これでなんとなく仕組みがわかりました。 次にJSPのファイルにJavaのコードを埋め込んで見たいと思います。
<% javaコード %> このようにJavaのコードをタグでくくると記述できるらしい

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
</head>
<body>
<h1>Hello JSP !!</h1>
<%
  for(int i=0; i<5; i++){
    out.println(i)
  }
%>
</body>

肝心のJSPタグについて触れてないけど、続きは今度にします!

MySQL 練習

MySQL

SQL文について練習しようと思って書きました。
自分でも忘れることが多いので記することで忘却を防ぎたい…

インストールとその他設定

Ubuntuの場合で勝手に話を進めます。

$ sudo apt-get install mysql-server  
# ここでrootのパスワードを設定するように言われるので適当なものを設定する。  

次に/etc/mysql/my.cnfに以下を追加する。

[mysqld]
character_set_server=utf8                                            
skip-character-set-client-handshake
default-storage-engine=INNODB 

次にmysqlを走らせます。

$ sudo /etc/init.d/mysql start

startの部分をstop、restartとすることもできる。それぞれサービスの終了、サービスの再起動という意味合いになる。

次に以下を入力しmysqlを起動させます。

$ mysql -u root -p

CRUD(クラット?)

CRUDとは

以下の頭文字をとったものであります。

  • Create
  • Read
  • Update
  • Delete

これらは情報の操作に欠かせない昨日であると定義されているらしい。
MySQLにもCRUD操作ができる機能を揃えている。

次にCRUD操作についてそれぞれをどのように行うか説明します。

Create操作

DB作成

mysql> create database Ebichu_DB; 

Table作成

mysql> create table Ebichu_DB.Ebichu_TB(
    -> name varchar(10),
    -> color varchar(10),
    -> number int(2)
    -> );

データの挿入(insert)

mysql> insert into Ebichu_DB.Ebichu_TB
    -> (name, color, number)
    -> values
    -> ("Mayama", "purple", 3);

Update操作

mysql> update Ebichu_DB.Ebichu_TB
    -> set name="rika";

Read操作

mysql> select *
    -> from Ebichu_DB.Ebichu_TB
    -> ;
+------+--------+--------+
| name | color  | number |
+------+--------+--------+
| rika | purple |      3 |
+------+--------+--------+
1 row in set (0.00 sec)

Delete操作

条件にあうレコードの削除

mysql> delete
    -> from Ebichu_DB.Ebichu_TB
    -> where number=3;

テーブルの削除

mysql> delete
    -> from Ebichu_DB.Ebichu_TB

DBの削除

drop database Ebichu_DB;

他の操作

DB一覧を表示

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| Ebichu_DB          |
| SampleDB           |
| mysql              |
| performance_schema |
+--------------------+

Where文について

次の操作は以下のテーブルに対して行うものとする

+---------+------------+--------+
| name    | color      | number |
+---------+------------+--------+
| Mayama  | purple     |      3 |
| Ayaka   | green      |      5 |
| aiai    | gy         |      6 |
| Mirei   | pink       |      7 |
| Rinanan | blue       |      9 |
| Hinata  | orange     |     10 |
| po-chan | yellow     |     11 |
| rittan  | light blue |     12 |
+---------+------------+--------+

null判定

mysql> select name
    -> from Ebichu_DB.Ebichu_TB
    -> where name is not null;
+---------+
| name    |
+---------+
| Mayama  |
| Ayaka   |
| aiai    |
| Mirei   |
| Rinanan |
| Hinata  |
| po-chan |
| rittan  |
+---------+

# is null ならばnullのものを表示する

like演算子

mysql> select name
    -> from Ebichu_DB.Ebichu_TB
    -> where name like '%ai%';
+------+
| name |
+------+
| aiai |
+------+

%が任意の文字列となる

between

mysql> select *
    -> from Ebichu_DB.Ebichu_TB
    -> where number between 6 and 10;
+---------+--------+--------+
| name    | color  | number |
+---------+--------+--------+
| aiai    | gy     |      6 |
| Mirei   | pink   |      7 |
| Rinanan | blue   |      9 |
| Hinata  | orange |     10 |
+---------+--------+--------+

where number>=6 and number<=10と同じ

IN / NOT IN

mysql> select *
    -> from Ebichu_DB.Ebichu_TB
    -> where number in (5, 6, 9, 10)
    -> ;
+---------+--------+--------+
| name    | color  | number |
+---------+--------+--------+
| Ayaka   | green  |      5 |
| aiai    | gy     |      6 |
| Rinanan | blue   |      9 |
| Hinata  | orange |     10 |
+---------+--------+--------+

order byについて

mysql> select *
    -> from Ebichu_DB.Ebichu_TB
    -> order by number
    -> limit 3
    -> ;
+--------+--------+--------+
| name   | color  | number |
+--------+--------+--------+
| Mayama | purple |      3 |
| Ayaka  | green  |      5 |
| aiai   | gy     |      6 |
+--------+--------+--------+

mysql> select * from Ebichu_DB.Ebichu_TB order by name limit 3;
+--------+--------+--------+
| name   | color  | number |
+--------+--------+--------+
| aiai   | gy     |      6 |
| Ayaka  | green  |      5 |
| Hinata | orange |     10 |
+--------+--------+--------+

numberで指定した場合は数字の大小でソートするが、nameで指定した場合はutf-8の順番にしたがってソートするらしいです。
ちなみにLimitは上からn件を表示の意味です。
descをorder byの後ろにつけると降順にすることもできます。デフォルトでは昇順でascをつけても昇順です。

mysql> select * from Ebichu_DB.Ebichu_TB order by number desc limit 3;
+---------+------------+--------+
| name    | color      | number |
+---------+------------+--------+
| rittan  | light blue |     12 |
| po-chan | yellow     |     11 |
| Hinata  | orange     |     10 |
+---------+------------+--------+

関数

有名なsum, count, avg, maxなどについて説明します。

mysql> select sum(number) from Ebichu_DB.Ebichu_TB;
+-------------+
| sum(number) |
+-------------+
|          63 |
+-------------+

mysql> select max(number) from Ebichu_DB.Ebichu_TB;
+-------------+
| max(number) |
+-------------+
|          12 |
+-------------+

mysql> select avg(number) from Ebichu_DB.Ebichu_TB;
+-------------+
| avg(number) |
+-------------+
|      7.8750 |
+-------------+

mysql> select count(number) as "number >= 10" from Ebichu_DB.Ebichu_TB where number>=10;
+--------------+
| number >= 10 |
+--------------+
|            3 |
+--------------+
1 row in set (0.00 sec)

countのところで用いているasを用いると表示するカラムの名前を変更できるので便利です。

疲れたのでJOIN操作は今度書きます。

Git 再入門

久しぶりの投稿

こんにちは
大分はてなサボってましたが、これから再開していきたいと思います。
普段1人で開発することが多かったのですが、最近複数人で行うことも少なくないのでGitについて再入門したいと思います。(主にgit branch周り)

Git branch コマンド集

# <bn>はブランチの名前

$ git branch # ブランチの表示
$ git branch <bn> # ブランチのの作成  
$ git branch <bn> # ブランチの削除 
$ git checkout <bn> # ブランチの切り替え  
$ git checkout -b <bn> # ブランチの作成&切り替え  
$ git merge <bn> # <bn>にマージ
$ git rebase <bn> # <bn>に対するマージを取り消す

$ git pull # リモートリポジトリの内容をローカルリポジトリにマージする  
$ git fetch  # リモートリポジトリの内容を取得してFETCH_HEADという名前のブランチをつくる  

こんな感じで軽量な記事だと続くのかも

ElasticSearch入門

GW最終日

今年のGWは何もすることができなかった。正確に言えば動けなかったとも言えるだろう。なぜならお金が無いからだ。就職活動がためにとんでしまったのである。普通なら大型連休だし欲望のまあ消費活動に勤しみたいところであったが資金がなかった。そもそもGWって遊ぶための連休なのか?学生の本業は勉学ではないか?と自問自答や屁理屈を言った結果最終日もお勉強することに

今日は研究で今後必要だろうElasticSearchについて勉強していく。

ElasticSearchとは

ElasticSearchは全文検索エンジンであるらしい。 全文検索について知らない私はその意味を調べると、

複数の文書から特定の文字列を検索すること」

らしい。

とりあえずさわってみる

ElasticSearch2.3.2をzipでダウンロードしてくる

$ wget https://download.elastic.co/elasticsearch/release/org/elasticsearch/distribution/zip/elasticsearch/2.3.2/elasticsearch-2.3.2.zip
$ unzip elasticsearch-2.3.2.zip
$ cd elasticsearch-2.3.2
$ bin/elasticsearch &
$ curl -X GET http://localhost:9200

とサイトに書いてあるインストールステップ律儀にこなす

{
  "name" : "Antiphon the Overseer",
  "cluster_name" : "elasticsearch",
  "version" : {
    "number" : "2.3.2",
    "build_hash" : "b9e4a6acad4008027e4038f6abed7f7dba346f94",
    "build_timestamp" : "2016-04-21T16:03:47Z",
    "build_snapshot" : false,
    "lucene_version" : "5.5.0"
  },
  "tagline" : "You Know, for Search"
}

nameのところの値はにはマーベルのキャラクタの名前をランダムで当てているらしい。ちなみに"Antiphon the Overseer"というのは彼らしい
f:id:h-piiice16:20160503122853j:plain

公式ドキュメント

公式のドキュメントには僕みたいな初心者のためにある銀行の顧客データを模したサンプルのデータセットが用意されている。今回はそれを使う。

まずデータセットをローディングしていく。

$ curl -XPOST 'localhost:9200/bank/account/_bulk?pretty' --data-binary "@accounts.json"
$ curl 'localhost:9200/_cat/indices?v'
health index pri rep docs.count docs.deleted store.size pri.store.size
yellow bank    5   1       1000            0    424.4kb        424.4kb

どうやらできてるっぽい!

Node.js + ElasticSearchで簡単な検索サービスを作る

つい昨日Expressに入門した私は検索エンジン的なものが作れるのではないかと考えやってみることにした。

まずはviwes/index.ejsである。

<!DOCTYPE html>
<body>
 <h1>ES bank Query Test!.</h1>
 <form method="post" action="/">
  <table>
  <tr>
    <td><p>query</p></td>
    <td><input type="text" name="input1" value="<%= query %>"></td>
  </tr>
  <tr>
  <td>fields</td>
  <td><input type="text" name="input2" value="<%= fields %>"></td>
  </tr>
  </table>
  <input type="submit">
 </form>
 <br><br>
 <div>
  <%= content %>
 </div>
</body>

次にapp.jsを書いていく。

var express = require('express');
var ejs = require('ejs');
var bodyParser = require('body-parser');

var elasticsearch = require('elasticsearch');
var client = elasticsearch.Client({
        host: 'localhost:9200'
});

var app = express();

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.engine('ejs', ejs.renderFile);

app.get('/', function(req, res){
        res.render('index.ejs', {
                query: '',
                fields: '',
                content: ''
        });
});

app.post('/', function(req, res){
        client.search({
                index: 'bank',
                type: 'account',
                body: {
                        query: {
                                multi_match: {
                                        query: req.body['input1'],
                                        fields: req.body['input2'].split(',')
                                }
                        }
                }
        }).then(function(response){
                var hits = response.hits.hits;
                var str = JSON.stringify(hits);
                console.log(hits);
                res.render('index.ejs', {
                        query: req.body['input1'],
                        fields: req.body['input2'],
                        content: str
                });
        }, function(error){
                console.trace(error.message);
        });
});

app.listen(3000);

Nodejsのモジュールでelasticsearchという便利なものがあるのでそれを使いElasticSearchにクエリを流す。elasticsearchはnpmで普通にinstallできる。

これが実行結果である。

f:id:h-piiice16:20160508154303p:plain

f:id:h-piiice16:20160508154311p:plain

今回はさわってみただけでElasticSearchの構造や仕組みについて触れていないが大体イメージをつかむことができた。構造や仕組みについてもこれから勉強するつもりなのでまとまったらまたブログにまとめてみたい。

p.s.
この記事を書いてる途中でネットが切れてしまい記事全部ふっとびました。みなさんもお気をつけ下さい。

Express入門

Webアプリ作ってみたい

こんにちは、最近やる気が散漫している大学生です。
今日は前から気になっていたりサンプルコード動かしたりしていたNode.jsのフレームワークexpressについてちゃんと入門したい。
思えば私はWebアプリケーションを作ったことがなく勉強しなくてと前から思っていた。
他にもいろいろやることがあるがまとまった時間が取れるのが今日くらいなので今日入門を果たしたい。

Express

さっきも言ったがNodejsのフレームワークの名前である。まずはHelloWorld的なことをやってみる。 てきとうにディレクトリ作ってその中でapp.jsを作る。

var express = require('express');
var app = express();

app.get('/', function(req, res){
 res.send('Hello World!');
});

app.listen(3000);

localhost:3000にアクセスするとHello World! と書いたページが現れる。
次にテンプレートejsを使ってWebページを作っていく。ここではejsとはHTMLみたいなものと認知しておいた。
viewsというディレクトリを作り、中にindex.ejsを作る。

<!DOCTYPE html>
<head>
 <title><%= title %></title>
</head>
<body>
 <h1><%= title %></h1>
 <%- content %>
</body>

次にapp.jsを変更する。

var express = require('express');
var app = express();
var ejs = require('ejs');

app.engine('ejs', ejs.renderFile);

app.get('/', function(req, res){
 res.render('index.ejs', {
  title: 'Sample',
  content: '<p>Sample node app!.</p>'
 });
});

app.listen(3000);

node app.jsで実行しlocalhost:3000にアクセスすると、index.ejsの<%= tiltle %>に”Sample”が代入され、<%- content %>のところに<p>Sample node app</p>が代入されページに表示される。

ここまでは公式サイトやいろいろなサイトで触れられているので細かい説明は省いた。今回Expressを勉強するうえで私の中での目標がルーティングについて理解することである。

ルーティング

今までexpressを全くさわったことがなかった私は何回か今回のような入門に手を出したことがある。しかしそのたびに挫折していたのがルーティングの部分である。正直routesとディレクトリを作って何かしらの作業をする意味がわからなかった。

しかし今日しっかりと入門をしてみてわかったのがこれをするとルーティングの部分がモジュール化されすごくすっきりとしたコードになると自分なりに理解した。それでは今日やったことを示していきたい。

まずroutesというディレクトリを作り、index.jsを作り、以下の内容を書く

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next){
 res.render('index.ejs' {
  title: 'Sample', 
  content: '<p>Sample node app!.</p>'
 });
});

module.exports = router;

次にapp.jsを変更する

var express = require('express');
var app = express();
var ejs = require('ejs');
var index = require('./routes/index.js')

app.engine('ejs', ejs.renderFile);

app.use('/', index);

app.listen(3000);

この実行結果は前回のものと一緒となる。つまり'/'にアクセスするときページを描画する動作を別のファイルに記述しそれをモジュール化することによりわかりやすくしているのだと理解できた。
この例はまだ行数がなくルートが1つため良いが、ルートが増えたり、getだけでなくpostなどの他の操作が加わるとapp.jsの行数が増え可読性に優れないコードが出来上がってしまう恐れがある。そのためルーティングはルートごとに書くことが大事だとわかった。

またgetだけでなくpostメソッドについても使い方を知りたかったので簡単なものを作ってみた。

postについて

まずはコードを示していく。index.ejsである。

<!DOCTYPE html>
<body>
 <h1><%= title %></h1>
 <%- content %>
 <form method="post" action="/test">
  <input type="text" name="input1" value="<%= input %>">
  <input type="submit">
 </form>
</body>

つぎにviewsにtest.ejsというファイルを作る。

<!DOCTYPE html>
<html>
<body>
 <p> get test.ejs!.</p>
 <p><%= input %></p>
</body>
</html>

次にroutesのindex.jsに以下を追加する。

  var str = req.body['input1'];
  res.render('test.ejs', {
    input: str,
  }); 
});

最後にapp.jsに以下を追加

var bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({extended: false }));
app.use(bodyParser.json());

これを追加することによりindex.jsのvar str = req.body['input1'];がうまくいくようになる。おそらくindex.ejsの入力フォームに入力した内容を抜き出す際にパースする処理が必要なのだと思われる。
そしてこれらを実行すると f:id:h-piiice16:20160507171958p:plain

"test"と入力し、Submitすると、

f:id:h-piiice16:20160507172033p:plain

この"test"はさっきindex.ejsで入力した"test"であるはず…

まとめ

今回は割りと真面目にExpressについて入門したつもりだがやはり実用的なものをつくまでには至っていない。まあ一朝一夕にいくとも思っておらずこれからも手を動かしながらやっていきたいと思う。

それと何を作りたいか明確にせねば何を勉強すればよいかわからずまた露頭に迷ってしまうことになってしまう。なのでまた機会があればTODOリストなんか作ってみたいと思う。

とはいえいろいろと途中で投げ出しているものがあるのでそれらを先に片付けていきたい。(ラズパイとか、Tensorflowやらその他もろもろ…)