mac の .Net Core でapi作成

windows の場合は、visualstudio でプロジェクトのテンプレートを作成すれば良さそうですが、macの場合は visualstudio code(VScode)にはプロジェクトのテンプレートを作成する機能は無いため、どうやって作るのか調べてみました。

前提条件

Node.js がインストールされていること

前準備

必要なパッケージのインストール

$ npm install -g yo bower grunt-cli gulp
$ npm install -g generator-aspnet

プロジェクトテンプレートの作成

プロジェクトのテンプレート作成にはyoemanを使います。
yoemanは対話的にプロジェクトのテンプレートを作成してくれる物です。

yo  コマンド実行でテンプレート作成を開始します。

$ yo aspnet

下記の様に対話的にテンプレートを作成していきます。

? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │  marvellous ASP.NET Core │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of application do you want to create? Web API Application
? What's the name of your ASP.NET application? aspnet_test
   create aspnet_test/.gitignore
   create aspnet_test/appsettings.json
   create aspnet_test/Dockerfile
   create aspnet_test/Startup.cs
   create aspnet_test/Program.cs
   create aspnet_test/project.json
   create aspnet_test/Properties/launchSettings.json
   create aspnet_test/Controllers/ValuesController.cs
   create aspnet_test/web.config
   create aspnet_test/README.md


Your project is now created, you can use the following commands to get going
    cd "aspnet_test"
    dotnet restore
    dotnet build (optional, build will also happen when it's run)
    dotnet run

実際に設定した項目

項目 内容
アプリケーションの種類 Web API Application
アプリ名 aspnet_test

その後の操作手順も書いてありますので、記載のコマンドをそのまま実行してみます。

$ cd aspnet_test
$ dotnet restore
$ dotnet build
$ dotnet run

Project aspnet_test (.NETCoreApp,Version=v1.0) was previously compiled. Skipping compilation.
Hosting environment: Production
Content root path: /Users/naught/tutorial/aspnet_test/aspnet_test
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.

サーバーが起動して、 http://localhost:5000 でアクセス可能なことがわかります。

Controllers/ValuesController.cs を見るとアクセス可能なAPIがわかります。
試しに、 http://localhost:5000/api/values にアクセスしてみます

f:id:naught00:20161106141809p:plain

VScodeの場合左のメニューにあるデバッグマークからのデバッグ実行でもアプリ起動可能です。
こちらから実行させた場合、ブレークポイントなどもはれてデバッグがはかどります。

f:id:naught00:20161106143251p:plain

おまけ

リリースビルドする方法

$ dotnet build -c Release

macで始める .Net Core

いつのまにか簡単な手順で動作確認までできるようになっていました。
基本的に公式HPの手順に従えば動作確認まではできるようになってました。

.NET - Powerful Open Source Development

前提条件

Homebrew がインストールされていること

brew.sh

手順

1. はじめに
SDKインストールの前に openssl をインストールします。

$ brew update
$ brew install openssl
$ ln -s /usr/local/opt/openssl/lib/libcrypto.1.0.0.dylib /usr/local/lib/
$ ln -s /usr/local/opt/openssl/lib/libssl.1.0.0.dylib /usr/local/lib/

2. .Net Core SDK のインストール
インストーラのDL先 official installer
ダウンロードしたpkgをインストールします。
ここまでで、環境構築は完了です。

3. プロジェクトの作成
ディレクトリを作成して、プロジェクトを新規作成します。
dotnet new のコマンドだけでプロジェクト作成が完了して簡単になりました。

$ mkdir hwapp
$ cp hwapp
$ dotnet new

4. コンパイル&実行

$ dotnet restore
$ dotnet run

初回実行時はコンパイル処理が入りますが、最後に Hello World! と出力されていることがわかります。

$ dotnet run
Project hwapp (.NETCoreApp,Version=v1.0) will be compiled because expected outputs are missing
Compiling hwapp for .NETCoreApp,Version=v1.0

Compilation succeeded.
    0 Warning(s)
    0 Error(s)

Time elapsed 00:00:01.8591704


Hello World!

railsサーバーとのAPI通信

概要

rails で作成したサーバー との post通信でfetchを使ったときの注意点

環境

内容

railsで作成したサーバーとのAPI通信の為だけにjqueryを使うのは重いという話を聞いたのでfetchを使ってみました。

github.com

post送信するために最初に書いてみたソースコード

var data = new FormData();
data.append('', );    // post送信したいデータ
fetch('post先のURL, {
    method: 'post',
    body: data
}).then( (response) => {
    if (response.status >= 200 && response.status < 300) {
        return response.json();
    } else {
        var error = new Error(response.statusText)
        throw error
    }
}).then( (data) => {
    // 成功時に実行したい処理
}).catch( (error) => {
    // 失敗時に実行したい処理
});

上記ソースコードの場合、railsで作成したAPIサーバーと通信するためには

する必要があるようです。

修正したソースコード

var data = new FormData();
data.append('', );    // post送信したいデータ
fetch('post先のURL, {
    method: 'post',
    credentials: 'include',
    headers: {'X-CSRF-Token': document.getElementsByName('csrf-token').item(0)['content']},
    body: data
}).then( (response) => {
    if (response.status >= 200 && response.status < 300) {
        return response.json();
    } else {
        var error = new Error(response.statusText)
        throw error
    }
}).then( (data) => {
    // 成功時に実行したい処理
}).catch( (error) => {
    // 失敗時に実行したい処理
});

無事に通信できました。

参考にしたページ

qiita.com

フロントエンドのローカルテスト用にサーバーを立てる

概要

フロントエンドの開発で ローカルの index.html などを開いて動作確認などしていると、 chrome のセキュリティの関係でエラーが出ることが多くうまくデバッグできないことが多い。
そのようなときに簡単にサーバーを立てて動作確認する方法です。

express

node.js の webアプリケーションフレームワーク

Express - Node.js Web アプリケーション・フレームワーク

github.com

使い方

express のインストール

$ npm init
$ npm install -g express

サーバー構成

ディレクトリ構造

root
 |-- app.js
 |-- dist
      |-- index.html

※ 今回の構成では root/dist/index.html のテストをしたい

サーバー設定

app.js に設定を記述する。

var express = require('express');
var app = express();
  
app.use(express.static('dist'));
  
var port = 3000;
app.listen(port,function(){
    console.log("Expressサーバーがポート%dで起動しました。モード:%s",port,app.settings.env)
});

サーバー起動

$ node app.js

localhost:3000/ にアクセスすることでローカルの index.htmlを確認することができる。

フロントエンドのタスクランナーに npm script

概要

フロントエンドの開発環境で npm script が使える

フロントエンド開発を始めようと思うと、最近はいろんなものを組み合わせて開発環境を作るのが普通に感じた。

スクランナーだと下記のものがよく使われてるように感じるけど、正直使い方がよくわからない。

  • glunt
  • gulp

npm script を使ってみる

プロジェクトの初期設定

対話的にプロジェクトの初期設定をする。

$ npm init .

ちょっと試して見たいだけなら、全部 Enter で大丈夫。
終了すると、 package.json が作成される。
package.json にはプロジェクトの設定が記述されていて、以降で作成するタスクもこのファイルに記述する。

プロジェクトに必要なライブラリのインストール

他の人が作成したプロジェクトを使うときなどは、下記コマンドで開発環境を作成することができる。

$ npm install

タスクの作成

タスクは package.json に記述する。
以下は npm init で作成された例

{
  "name": "test-package",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

ここで、タスクは

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

の部分に記載する。

コンソールに test と出力するスクリプトを書いてみる。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "echo": "echo test"
  },

実行

$ npm run echo

※ 今回の例では echo というコマンドを作成した為上記のコマンドで実行できる。
タスクの実行は

$ npm run <タスク名>

実行結果

$ npm run echo
test

kotlinのenum定義バグ?

概要

kotlin の enum 定義でバグがある。というのをtwitterで見て実際に自分で確認してみた。

バグの内容

下記の様に予約後を使ったenumを定義すると null point exception が吐かれる

enum class Hoge {
    name
}

確認方法

android studio でプロジェクトを作成して、実際にコンパイルエラーになるか確認してみた

github.com

結果

コンパイル前に null point exception が吐かれた。
当然コンパイルもダメですね。

f:id:naught00:20160626214420p:plain