小さなエンドウ豆

まだまだいろいろ勉強中

岡山芸術交流 Developmentに行ってきた話

岡山芸術交流とは

芸術を通じて国境や文化、世代を超えた様々な交流が生まれることをめざす大型国際展示会

パンフレットよりそのまま引用してきました。
簡単にいうと岡山駅周辺の美術館はもちろん、建物やまちなかに芸術品を散りばめましたってイベント
とある建物の壁にて...
f:id:h-piiice16:20161102224142j:plain

岡山県庁の前は...
f:id:h-piiice16:20161102224158j:plain

とこんな感じで作品が普通に置いてあったりします。

芸術の秋なので私も参加したいと思いいろいろと見て回りました!

ルート

当日とても天気が良かったので歩いて回ることにしました。

このようなルートで回ることにしました。 駅から桃太郎通りをまっすぐ行き、シンフォニーホールという場所から南にすすみ順に作品を見ていきました。
公式サイトのアクセスと照らし合わせていただくとわかりやすいかもしれません。

あと僕は歩きましたが岡山には ももチャリ という自転車を手軽に借りることができるサービスがあるのでそれを使うともっと効率よく回れるかもしれません。

感想

正直現代アートのこと全く知らずに参加しましたが楽しめたと思います。
中でも面白かったのがライアンガンダーの作品です。
f:id:h-piiice16:20161102222348j:plain

これが今岡山のまちなかにあるのが迫力があり面白かったです。
何か鉄の塊が地面をえぐってこうなったのを表現しているのですが、これを通して何を伝えたかったのかは私にはわかりませんでした…
まだまだ自分の知識や経験では追いつかないところがあることに気づけました。

更におもしろいことにこの作品は無料で見ることができます。他にも無料で見ることができる作品が10品くらいありました。
基本美術館の中に展示してある作品はチケットがいるのですが、学生だと 1200円 と安いのかわかりませんが、たぶん安い値段でお求めできます。

岡山は芸術に溢れているなと改めて感じました。

package.jsonにnpm install したライブラリの情報を追加する方法

npm installでインストールするライブラリの情報をpackage.jsonに追加したい

忘れないように記しておきます。
npm installでインストールするライブラリの名前をpackage.jsonにわざわざ書いてnpm installで一括でインストールするのも悪く無いですが、面倒な時があるので何か便利な方法はないか調べたら以下の様なオプションがnpm installにありました。

$ npm install hoge --save-dev

--save-devを追加するとpackage.jsonのdevDependenciesの欄にインストールしたライブラリ(上の例だとhoge)の名前とバージョンが記録されます。

^ と ~ の表記

その場合^[バージョン]みたいな表記になるのですが、これの意味はゼロでないバージョンニングは変えない?という意味らしい よくわからないので例をみると

  • ^1.2.3 ... 1.2.3 <= version < 2.0.0
  • ^0.2.3 ... 0.2.3 <= version < 0.3.0
  • ^0.0.3 ... 0.0.3 <= version < 0.0.4

他にも~というものがあるがこれはそのバージョン以上という意味があるらしい。

package.jsonでプロジェクトの情報を管理する方法がまだ掴めてない部分が多いのでもっと理解を深めていきたいと思いました。

特定の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があるかどうか…

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.
この記事を書いてる途中でネットが切れてしまい記事全部ふっとびました。みなさんもお気をつけ下さい。