2016-03-10

Web API トレーニング 02 -エンドポイント設計編-

Backend WebAPI

エンドポイントとは

これ

http://fugahoge.com/v1/articles
というURLがあったとして、ホスト名とエンドポイントで分けることができる。

ホスト名は
http://fugahoge.com/v1
になって、

エンドポイントは例えばこうなる
/articles

まぁベースとなるURLがホスト名、後に参照したいリソースの集合をエンドポイントと呼ぶみたい。

エンドポイントを考える

エンドポイントは、「データの集合」「個々のデータ」についてHTTPメソッドで操作していくことを表すように設計する。

リソースの集合、単体のリソースとしてURIを設計する
HTTPで定義されたメソッドで操作する。

個人的には、 何を、どうする？ っていうイメージで設計するものかなと。

具体的にいえば、
「リソースとその集合」を、「HTTPメソッドで操作」する
これに帰結するかなと思ったので、そういう意識でエンドポイント作りたい

エンドポイントを設計するにあたっての留意事項

複数形の名詞を使う
利用する単語に気を使う
スペースやエンコードを必要とする特殊文字は使わない
単語をつなげる場合は考える

リーダブルコードに通づるところg（ry

検索とクエリパラメータ

GETメソッドによく付けるなぁと。

http://fugahoge.com/v1/users

例えば上記がユーザーを取得するAPIのエンドポイントだとして、
単に叩いたら全ユーザーを取得してしまいかねない。
そこでクエリパラメータと呼ばれる実行時の条件をエンドポイントの後ろにくっつけるようにしてもらう。

ページネーション

あるデータの集合の一部分を取得する、といった時に使う考え方。
データを、 どこから、どれくらいの量を 取得するのか、というのを指定する。

よくある例としては、

どこから	どれくらい
per-page	page
offset	limit

こんな感じのものが多い

次回

次は絶対位置でデータを取得しようねの話

2016-03-08

WebAPI トレーニング 01 -エンドポイント設計編-

Backend WebAPI

Androidのフロントしかやってなかった人間がWebAPIについて勉強していることをまとめてみます
あと自分の超短い経験上の解釈も入ってるので、あまり参考にならないかも
間違ってたらガツンと優しいレビューをお願いします！！

WebAPIとは

ITとしてのエコシステムを確立する為に、Webの仕組みを通して、対外へサービスを提供する
WebAPIの実例として、Twitter, Facebook, Amazonなどが挙げられる。
共通のデータ操作ロジックを持つことができるので、チーム間で連携とりやすい（社内

WebAPIと美しい設計

使いやすい
使い手のことを常に考える。エンドポイントの設計とか、RESTなAPI設計を目指す
変更しやすい
一度作ったものを改修したり、技術的負債を取り除いたりする為にも、変更しやすい柔軟な作りにするのが良い。
頑強
データの通信にはセキュリティのリスクがつきものなので、リスクヘッジしっかり取れる設計にする
外部に公開して恥ずかしくない（企業価値を高めるファクター）
エンドポイントに関係するが、名付け方やAPIの使い方が変に複雑だったり、使いにくいのは色々技術力怪しまれるので、シンプルで冪等性ある使いやすいものにしようねっていう。

URIの設計

考え方は、「リソースを表現している」 かどうか

短くて入力しやすい
人間がぱっと見て理解できる
大文字小文字が存在していない（フォーマット）
使う側が使いやすい
サーバ側が使用するアーキテクチャを表現しない
命名ルールが統一されている

これらを踏まえた上で、アクセス先が「リソース」であることを簡単に想像しやすいURIを考えるのが良い。

リーダブルコードに通づるところ がかなりある気がする！！

HTTPメソッド

HTTPメソッドってどんなのがあるのか

GET 情報の取得 を表すメソッド
GETはあくまでデータの取得・参照であって、データを操作するものじゃない
POST
基本的には新規のデータを送信、投稿、登録する、といった時に使う。更新などはPUT, PATCHのメソッドがあるから
とはいえ、HTML4時代はformで扱えたメソッドがGET/POSTのみだったので、
その名残でPOSTでデータの変更とかすることもあるが・・・
APIを叩くときはformを使うばかりじゃないので、PUTやDELETEを積極的に取り入れていくのが良い。
PUT
指定したデータそのものの変更、更新に使う
PATCH データの一部変更に使う。
DELETE
データの削除に使う。

GET/POSTしか使えないあなたの為に

X-HTTP-Method-Override ヘッダの活用
X-HTTP-Method-Overrideヘッダは、リクエスト先に対して、本来使いたいメソッドの定義を書いておくもの。
GET/POSTしか使えなくて、でもPUT、DELETEメソッドを使いたいなってなったときはそっと書いておくと、リクエスト先がそのヘッダを解釈して指定されたメソッドを実行するようになる。

次回

エンドポイントの設計について考察、留意点をかいてみます。

参考資料

こちらを使って勉強させてもらってます。ありがとうございます
Web API: The Good Parts

2016-01-14

Sassについて勉強した

Yo!!

ってことで、勉強会でSassについて聞いてきましたよー勉強になったー！
そのまとめを書いてみた。

Sassとは

CSSのメタ言語
変数が使える
セレクタの入れ子 -> ネスト
別CSSの引用

環境構築

Rubyが実行できる環境が必要
installerあるので探してね

入れてRuby -v でバージョン確認
gem install sass
node.jsのインストール
npm init
npm install gulp -g <= グローバル環境にinstallされる
or npm install gulp --save <= ローカル環境にはいる
npm install gulp-sass -g
gulpfile.jsをローカル環境に作成する

var gulp    = require("gulp");
    sass    = require("gulp-sass");
    plumber = require("gulp-plumber");

gulp.task("sass", function() {
    gulp.src("./sass/**/*.scss")  //scssのすべてのファイルを対象
    .pipe(plumber())    //gulpを止めないやつを先にやる
    .pipe(sass())       //Sass
    .pipe(gulp.dest())  //吐き出し先
});

gulp.task("default", function () {
    //sass配下の.scssを監視して、変更があれば第二引数のタスクを実行する
    gulp.watch("sass/**/*.scss", ["sass"]);
})

タスクランナーとは

sassファイルをコンパイルする作業などを自動実行するツール

アンインストール

npm uninstall [packagename]

インターポーレイト

$imagePath = "./fuga/hoge/tetete/";
.component {
    .bg {
        background-image: url(#{$imagePath}bg01.jpg);
    }
}

変数をhtml内で参照するためのもの？

gulpを止めない方法

plumberってのをinstallする
npm install plumber -g
npm install plumber --save

@mixin

androidでいう/styleの定義と似てる

@mixin test {
    color: red;
}

body {
    @include test;
}

定義をmixinするのですミックスインを

@import

外部ファイルを読み込みたいときに使用する
拡張子はいらない感じ

Webの世界もずいぶん楽しくなったね。 HTML4でホームページ作ってた頃と違うね。

2016-01-07

目指せ！Androidマン Vol.1 四則演算で一歩前進！

Java Android

とりあえずの筆者の目標。

目指すは、一人でAndroid作れるよってところまで記事書く！
時間出来たらツラツラっと書ければいいなと思っておりまする。

今回の目標

記念すべき第一回は、Javaで四則演算できるようになる！です。

前回は、試しにJavaに触れる、ってところをやりました。
気になる人はこちらを参照くださいまし。

91stardust-atelier.hatenablog.com

Javaで四則演算！

足し算やってみる。

まずは、新しくファイルを作って、以下のコードを打ち込んでください。
名前は

Calculator.java

としてください。

class Calculator {
    public static void main(String[] args) {
        int valueA;   //Aという整数値の"箱"を用意する
        int valueB;   //同様にBという整数値の"箱"を用意する

        valueA = 10; //箱に整数値を入れる。
        valueB = 20; //↑と同様。

        int result = valueA + valueB;   //２つの数値を加算する

        System.out.println("valueA + valueB = "+ result +" です！");
    }
}

そこまで来たら、以前のように、 コンパイル をして実行してみる！

javac Calculator.java
or
javac -encoding UTF-8 Calculator02.java

//コンパイルが成功したら
java Calculator

以下のような画面が出れば正解！

f:id:rinon7211:20160107003250j:plain

引き算、掛け算、割り算

足し算が出来るようになれば、他の演算も余裕ですよ！
まずは、新しくファイルを作って、以下のコードを打ち込んでください。
名前は

Calculator02.java

としてください。

class Calculator02 {
    public static void main(String[] args) {
        int valueA = 12;    //このように数値の箱と数値自体を１行で用意することもできます！
        int valueB = 3;

        int minusResult = valueA - valueB;   //２つの数値を減算する
        int multipleResult = valueA * valueB;  //掛け算はアスタリスク
        int divideResult = valueA / valueB;  //割り算はスラッシュ

        System.out.println("valueA - valueB = "+ minusResult +" で、");
        System.out.println("valueA * valueB = "+ multipleResult +"、からの");
        System.out.println("valueA / valueB = "+ divideResult +"になります");
    }
}

コンパイルしてみよう！

javac Calculator02.java
or
javac -encoding UTF-8 Calculator02.java

//コンパイルが成功したら
java Calculator02

次の画面みたいになれば完璧。

f:id:rinon7211:20160107004608j:plain

四則演算してみよう

新しくファイルを作って次のコード試してみる！名前は

Calculator03.java

としてください。

class Calculator03 {
    public static void main(String[] args) {
        int valueA = 38;    //このように数値の箱と数値自体を１行で用意することもできます！
        int valueB = 12;

        int result = valueA + valueB / 2;    //これは、四則演算的に割り算から先に計算されますよね？
        int mixedResult = (valueA + valueB) / 2;    //これはどうなるでしょうか！

        System.out.println("valueAとvalueBの平均？ = "+ result +"となって、平均ではない、ですよね？");
        System.out.println("valueAとvalueBの平均 = "+ mixedResult +" で、()が先に優先されて計算されてるのが分かる！");
    }
}

終わったら コンパイル して実行してみてください！今度は自力でやってみてくださーい。答えは次回こっそり書いておきますｗ

今日のシメ

こんな感じで四則演算できます！
他にも、剰余計算（割った余りを出す演算）やシフト演算とかも出来ます。
ゲーム作りたい人は剰余計算は知っておかねばですねｗ
次回はそこら辺の話とか、変数の話とか、コメントの話しようかな～。
また気が向いた時まで！

2016-01-02

Happy New World !!

Java

明けましておめでとうございます。

いつかやってやろうと思ってた備忘録ブログはじめました。
基本的に自分の自分による自分のためのブログにしようと思っております。

なので、書いてること信用し過ぎて、ウソついてんじゃねえとかあまり怒らないでください；；
こういうのもあるんだ～ぐらいに見てくれたらうれしいです＾＾

基本的にAndroidのスマホでアプリとか作ったりして遊んでます。
毎日生きている上で勉強したことを社会的に問題ない範囲で書くつもりです。（汎用的なレシピを書くってことです。なるべく。

Java初め

せっかくなので、Android触ってみたい人のために、その基礎になるJavaのhappy new worldをやってみましょい！

Javaを使えるようにする。

Windows使ってる人はこっち
 mac使ってる人はこっち

入れたら次はこれを書く

好きなテキストエディタ（よくわからない人はメモ帳とか開こう）で以下のコードを打ち込む。

class NewWorld {
    public static void main(String[] args) {
        //黒い画面に Happy New World!! という文章を表示する
        System.out.println("Happy New World!!");
    }
}

黒い画面を開いて実行準備する

windowsなら コマンドプロンプト 、macなら ターミナル を開く

この時、 コンパイル という、コードを実行するための準備操作が必要になるのでそのコマンドを打つ。

(windowsだとこう)

cd your\saved\directory\
javac NewWorld.java

(macだとこう)

cd ~/your/saved/directory
javac NewWorld.java

実行してみよう！

それで、次の画面が出てきたら実行に成功してます！！
f:id:rinon7211:20160102022935p:plain

トラブルシューティング

画面に MS932にマッピングできない的なエラーが出たとき

windowsでもmacでも、そんなエラーが出ちゃったら、こうしてみてください。

保存したときにエンコードの指定がShift-JISになってたり、UTF-8になってる場合はそうしないとダメなこともあります。よく。

javac -encoding UTF-8 NewWorld.java

Javaの環境構築がなんか出来ない

がんばってください。エラーを見つけるのもまた修練

おわり

こんな感じでゆるくやっていきますｗ

エンドポイントとは

エンドポイントを考える

エンドポイントを設計するにあたっての留意事項

検索とクエリパラメータ

ページネーション

次回

WebAPIとは

WebAPIと美しい設計

URIの設計

HTTPメソッド

HTTPメソッドってどんなのがあるのか

GET/POSTしか使えないあなたの為に

次回

参考資料

Sassとは

環境構築

タスクランナーとは

アンインストール

インターポーレイト

gulpを止めない方法

@mixin

@import

とりあえずの筆者の目標。

今回の目標

Javaで四則演算！

足し算やってみる。

引き算、掛け算、割り算

四則演算してみよう

今日のシメ

明けましておめでとうございます。

Java初め

Javaを使えるようにする。

入れたら次はこれを書く

黒い画面を開いて実行準備する

実行してみよう！

トラブルシューティング

画面に MS932にマッピングできない 的なエラーが出たとき

Javaの環境構築がなんか出来ない

おわり

画面に MS932にマッピングできない的なエラーが出たとき