小さなエンドウ豆

まだまだいろいろ勉強中

国土数値情報の鉄道データ(shp)をgeojsonへ変換

手順

  1. データ のダウンロード
  2. QGISのインストー
  3. .shp -> .json の変換

それぞれ説明します。

データのダウンロード

データはこちらです。
このページの下の方からダウンロードしてきます。
データが年度で分かれているのですが、27年をダウンロードしました。

QGISのインストー

Macの場合、ここから
今回はおそらく最新のQGISのバージョン2.18.7-1 をダウンロードしました。
DLが済むとzipファイルを展開して、GDALとmatplotlib、QGISインストーラを起動します。

開発元が未確認のため開けません についての解決法

単にクリックしてインストールしようとしたところ「開発元が未確認のため開けません」というメッセージが出てインストールできませんでした。
解決策として、右クリックで「このアプリケーションで開く」を押すと開くの選択肢ができるので、このやり方でインストールを行いました。

インストールが終わると以下の1行をPATHに追加します。

/Library/Frameworks/GDAL.framework/Programs

.shp -> .json の変換

この変換は以下のコマンドで行えます。

ogr2ogr -f GeoJSON N02-15_RailroadSection.json N02-15_RailroadSection.shp

React-Dropzoneが便利

ドラックアンドドロップでファイルをアップロードしたい

最近?のWEBサービスではよくファイルをアップロードする際ドラックアンドドロップで行う場合が多い。
今回はそれを自分のサービスの中にも使いたいと思い実装してみました。

Reactにはそんな願いを叶える便利なコンポーネントとしてreact-dropzoneというものがある。
今回はこれを使って手っ取り早く実装することにしました。

React-Dropzone

実装したサービスの画面はこれです。 f:id:h-piiice16:20170423212401p:plain

ここにファイルをドラックアンドドロップで持っていくと、デベロッパーツールのコンソールにファイル名が表示されるサンプルを作りました。

実装のためにまずはreact-dropzoneをnpm経由でインストールします

npm install --save-dev react-dropzone

そして以下のようにコンポーネントを作成します。

import Dropzone from 'react-dropzone';
import React, {Component} from 'react';
import {render} from 'react-dom';

export default class UploadFile extends Component {

  handleOnDrop(files) {
    files.map(file => console.log(file.name))
  }

  render() {
    return( 
      <Dropzone
        onDrop={this.handleOnDrop}
        accept="image/gif,image/jpeg,image/png,image/jpg" >
          <div>
            Drag and Drop files Here!
            <p>format: gif/png/jpeg/jpg</p>
          </div>
      </Dropzone>
    );
  }
}

にはいろいろなアトリビュートが設定できるらしく、デフォで必要そうなonDrop(アップロード時の振る舞い)にコールバック関数としてhandleDrop()を、accept(受け入れるファイルの形式)に画像ファイルの形式を記述しました。

次回はアップロードされたファイルをサーバサイドにpostして保存するところまで行きたいと思います。

SQL小技集

SQL小技

最近SQLを書くことが多いので学んだことをまとめたいと思います。

2つのテーブルを更新したい

勝手な認識でupdate文は1つのテーブルに対し行うものだと思ってました。
しかし以下のように2つのテーブルに対して実行することができます。

update users u, players p
set u.id=1, p.user_id=1
where u.name="piiice" and p.name="piiice"

こんな感じです。

SQLを間違えてしまった…

間違いは誰にでもある。にんげんだもの

とはいえ、SQLの間違いはとってもやばいです。(語彙力)
こんな時に役に立つのがbegin, rollback, commitです。

begin, rollback, commitは制御構文といってcrud操作の中でもupdate, deleteで使うことが多いです。
これを用いるとsqlで加えた変更をなしにできることができます。 例はこちらです。

-- 1
begin;

-- 2
update user
set id=1, name="piiice";

-- 3
select *
from user;

-- rollback; -- 4
-- commit; -- 5

まず1を実行します。
次に2のupdateを実行します。この時点でDB自体の値は変わっていません。
3で2のupdateが正しいかどうか確認します。<- ここ小技!
もし間違いがあれば4を実行し、updateをなかったことにします。
間違がなければ5を実行し、値の更新を受け入れます。

これでSQLコワクナイ

servletのコンパイル2

modelパッケージの指定の仕方

servletコンパイルする際
modelがインポートできない問題に直面し なんとか解決出来たので忘れないように書いておく

構成はこんなかんじ

webapps/
└── example
    └── WEB-INF
        ├── classes
        │   ├── model
        │   └── servlet
        └── jsp

クラスパスを':'でつなげるところがコツらしい

javac -classpass /usr/share/tomcat7/lib/servlet-api.jar:./webapps/example/WEB-INF/classes webapps/example/WEB-INF/classes/servlet/Test.java

Servletのコンパイル

Servletコンパイル

Servletを使ってアプリケーションを開発してみた。
ソースはこんな感じです。

package servlet;                                                                                                                            

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/FowardServlet")
public class FowardServlet extends HttpServlet {
  private static final long serialVersionUID = 1L; 
  
  protected void doGet (HttpServletRequest request,
    HttpServletResponse response)
    throws ServletException, IOException {

      // forward
      RequestDispatcher dispatcher =
        request.getRequestDispatcher("/WEB-INF/jsp/forward.jsp");
      dispatcher.forward(request, response);
    }   
}

前に書いたJSPファイルをサーブレットから呼び出すアプリケーションである。

さーコンパイル

$ javac FowardServlet.java
FowardServlet.java:5: エラー: パッケージjavax.servletは存在しません
import javax.servlet.RequestDispatcher;
                    ^
FowardServlet.java:6: エラー: パッケージjavax.servletは存在しません
import javax.servlet.ServletException;
                    ^
FowardServlet.java:7: エラー: パッケージjavax.servlet.annotationは存在しません
import javax.servlet.annotation.WebServlet;
                               ^
FowardServlet.java:8: エラー: パッケージjavax.servlet.httpは存在しません
import javax.servlet.http.HttpServlet;
                         ^
FowardServlet.java:9: エラー: パッケージjavax.servlet.httpは存在しません
import javax.servlet.http.HttpServletRequest;
                         ^
FowardServlet.java:10: エラー: パッケージjavax.servlet.httpは存在しません
import javax.servlet.http.HttpServletResponse;
                         ^
FowardServlet.java:13: エラー: シンボルを見つけられません
public class FowardServlet extends HttpServlet {
                                   ^
  シンボル: クラス HttpServlet
FowardServlet.java:12: エラー: シンボルを見つけられません
@WebServlet("/FowardServlet")

...

あれ??

たくさんエラーたちが出てきました。

どうやらいろいろとインポートできていないらしい…

調べるとクラスパスでservlet-api.jarをささなければならなかった。

探すこと1時間ありました。 Tomcat7をインストールした時に一緒に落ちてきたみたい。

今度はクラスパスを指定して挑戦

$ javac -classpath /usr/share/tomcat7/lib/servlet-api.jar FowardServlet.java

うまくいきました!
環境変数にTomcat7の場所を設定する方法が一般的らしいですね。 この後すぐに行いました。

自分のツイートをダウンロードする

自分のツイートをダウンロード

今年も残すところあと3週間。2016年の自分は一体何をつぶやいているのか…

気になって自分のツイートを簡単に見る機能があればよいなーと探してみると、一括でダウンロードできるサービスがあるらしい。

今回はやり方を記していきます!

手順

手順は以下のとおりです。

  1. Twitterの設定から全ツイートダウンロードをクリック f:id:h-piiice16:20161213081100p:plain 僕は押しちゃったのでダウンロード待ちの状態になっていますが、本来は「全ツイート履歴をリクエストする」というボタンがありますのでそれをクリックします。
  2. Twitterのアカウントを登録する際に使ったメールアドレスにダウンロード用のURLが届くのでそれを待つ。
  3. ダウンロードを行う f:id:h-piiice16:20161213081541p:plain 届いたメールにあるダウンロードのボタンをクリックすると、こういったページにアクセスします。ここでダウンロードのボタンをクリックします。

  4. ダウンロードされたzipファイルを解凍し、tweets.csvというファイルを見つける このファイルがツイート履歴の記されたファイルとなります!

これで完了です

これと合わせて

h-piiice16.hatenablog.com

こんなのをやってみると面白いかもしれません。

JSTLの始め方

JSTLカスタムタグの使用

jspファイルでカスタムタグを使うためにJSTLについて勉強していきます。

ディレクトリ構成

ディレクトリやファイルは以下のように配置する。ルートはtomcat7で作成したプロジェクトのwebappsの下のROOTというディレクトリとします。

ROOT
├── WEB-INF
│   ├── lib
│   │   ├── jstl.jar
│   │   └── standard.jar
│   └── web.xml
└── index.jsp

一番時間がかかったのがweb.xmlの場所でWEB-INFの直下に置くことを何かしらのブログから知りました。(ソース忘れた…)
jstl.jarとstandard.jarですが、これはここApache taglibsからバージョン1.1をダウンロードしてきてWEB-INF/libの下に置きます。

カスタムタグの記述

次にindex.jspにカスタムタグを使用してみます。

<%@ page language="java" contentType="text/html; charset=UTF-8" session="false" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
</head>
<body>

<h1>index</h1>

<%
 int user = 5;
%>                                                                       
<c:if test="${ user==5 }">
  Correct!
</c:if>
</body>
</html>

こんな感じ いざ実行してみましたが、何故か表示されてくれません。 変数を普通の数値(例えば5)とかに変えて行ってみたら普通に表示されました。
原因はわかりません。

今日はカスタムタグちょっと触れたのでここまでにしたいと思います。