2014-08-29

500円ランチ食べてきた

日常

どうもこんばんは。
tomigungunです。

昨日のブログで宣言したお店に行ってきました！

500円ランチパスポート買ったで！ - tomigungun's blog

・・・って言いたいところなのですが、なんと満席で入れませんでした汗

そこで近くのもう一つのパスタ屋さんに行ったところ・・・これもまた満席で入れませんでした泣

最終的に『たんと』というお店でネギトロ丼食べました。

このお店はビールとハイボールが100円で有名な居酒屋さんで夜は何度か行ったことがあるのですが、ランチで行くのは初めて。

500円ランチパスポートによるとネギトロ丼、マグロ丼、サーモン丼が500円で食べられるとのことなので、ネギトロ丼にしました！

なぜかって？本来はサーモン丼を頼もうと思っていたのですが、当店人気No.1という宣伝に負けたからです笑

その写真がこちら↓

たんとでネギトロ丼食べた(^q^)パスポートを使って500円！

さすが当店人気No.1だけあって、とても美味しかったです！

黄身が乗っていて、オリジナルのタレが醤油とはまた異なり甘みがあっていい感じ。

きんびら、ポテトサラダ、味噌汁がついてボリュームもあり満足満足(^^)

あ〜次はどこ行こうかしら。

それでは(^_^)/~

2014-08-28

500円ランチパスポート買ったで！

日常

毎日のランチが500円になってしまう魔法のようなパスポートを買ってしまいました！

明日からのランチが捗るぅ〜♪

友達からコスパが良いと聞いていたので、今日書店にて見かけた瞬間即買いしました笑
渋谷・原宿・恵比寿周辺のお洒落なカフェから定食屋、カレー屋さんが主に掲載されています。普段は700〜1350円するランチを500円で頂けるらしい！（同じお店につき3回まで）こりゃ確かにコスパええわ。この本のお値段が税込み1000円なので、1000円のランチ（パスポートを使って500円）を2回食べると元がとれてしまう計算です笑

そこで早速、明日行くお店を決めました！

淡路島の恵みトラットリア・ドーニー

このお店の週替りパスタランチが500円で食べれちゃいます♪（普段は1000円）

週替りパスタランチの内容は以下のとおりです。

パスタ
サラダ
スープ
ドリンク
自家製フォカッチャ

こりゃ満足しそうだ(^^)普段は牛丼かお弁当を買って食べるので、すこしリッチな気分になれそう！

パスタは淡路島の生パスタを使用しているらしく、もちもちとした食感が自慢だそうです。毎週違うパスタを提供しているのもポイントだとか。

こりゃ明日の仕事頑張るしかない！金曜日ですけどね。。。

それでは(^_^)/~

2014-08-28

Shaping up with Angular.js Level1

どうもこんばんは。
tomigungunです。

会社でAngularJSを利用したプロジェクトに携わることになったので、勉強したことをブログに書きます。

以下の公式サイトのスライドを読んでまとめたものになります↓

http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

とりあえず今回はLevel1のみ。

Level1: Getting Started

知っておいてほしいこと

必須

HTML・CSS
JavaScript

知っていると良いこと

テスト自動化
BDD（振る舞い駆動開発）
TDD（テスト駆動開発）

それほど重要でないこと

jQuery
Ruby on Rails
Rython, PHP, etc
Databases

なぜAngularなのか？

JavaScriptを組織化してくれる
レスポンシブ（高速な）ウェブサイトを構築できる
jQueryとの親和性が高い
テストがしやすい

今までのページ再読み込み

ブラウザからサーバーへリクエストを送信
サーバーからWebpageとAssetsを含んだレスポンスが返ってくる
ブラウザはウェブページ全体を読み込む
リンクをクリックし、新しいリクエストを送信
同じくサーバーからレスポンスが返ってくる
再びブラウザはウェブページ全体を読み込む

Angularを使った"レスポンシブ"なウェブサイト

ブラウザからサーバーへリクエストを送信
サーバーからWebpageとAssetsを含んだレスポンスが返ってくる
ブラウザはウェブページ全体を読み込む
リンクをクリックし、新しいリクエストを送信
サーバーからJSONデータが返ってくる
ブラウザはすでに読み込んでいるページヘデータを埋め込む

AngularJSとは何か？

HTMLとの双方向性を提供する、クライアントサイドのJavaScript フレームワーク

ディレクティブ

ディレクティブとは、JavaScriptのコードを動作もしくは参照することをAngularへ伝えるためのHTMLタグのこと

<!DOCTYPE html>
<html>
  <body ng-controller="StoreController">
  ・・・
  </body>
</html>

function StoreController() {
  alert('Welcome, Gregg!');
}

ライブラリのダウンロード

AngularJSのダウンロードhttp://angularjs.org/
- angular.min.jsが必要
Twitter Bootstrapのダウンロードhttp://getbootstrap.com/
- bootstrap.min.cssが必要

はじめに

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Getting Started</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <script src="angular.min.js"></script>
</body>
</html>

モジュール

Angularアプリケーションの部品を書く場所
書いたコードをよりメンテナンスしやすく、テストしやすく、そして読みやすくする
アプリケーションの依存関係を定義する場所
モジュールは他のモジュールも利用できる

モジュールを作ってみよう

var app = angular.module('store', []);

第一引数：アプリケーション名
第二引数：必要なライブラリ

表現

HTMLへ動的な値を入れることができる

数値
文字列
その他

<!DOCTYPE html>
<html ng-app="store">
<head>
    <meta charset="utf-8">
    <title>Getting Started</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
    <p>
        I am {{4 + 6}}
    </p>
    <p>
        {{"hello" + " you"}}
    </p>
</body>
</html>

var app = angular.module('store', []);

コントローラ

アプリケーションの振る舞いを定義する場所
関数や値を使用

コントローラーへの値の入れ方

クロージャーの利用
アプリケーションの中に定義

(function() {
    var app = angular.module('store', []);
    
    app.controller('StoreController', function() {
        this.product = gem;
    });

    var gem = {
        name: 'Dodecahedron', 
        price: 2.95, 
        description: '・・・', 
    }
})();

コントローラーの適用

divの中にディレクティブを記載
コントローラー名とエイリアスを代入
コントローラーのスコープはdiv内のみ

<body>
    <div ng-controller="StoreController as store">
        <h1> {{store.product.name}} </h1>
        <h2> ${{store.product.price}} </h2>
        <p> {{store.product.description}} </p>
    </div>
    {{store.product.name}}
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</body>

ng-showディレクティブ

値がtrueの時に要素が表示される

<body>
    <div ng-controller="StoreController as store">
        <h1> {{store.product.name}} </h1>
        <h2> ${{store.product.price}} </h2>
        <p> {{store.product.description}} </p>
        <button ng-show="store.product.canPurchase"> Add to Cart </button>
    </div>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</body>

var gem = {
    name: 'Dodecahedron', 
    price: 2.95, 
    description: '・・・', 
    canPurchase: true
}

ng-hideディレクティブ

値がtrueの時に要素が非表示になる

<body ng-controller="StoreController as store">
    <div ng-hide="store.product.soldOut">
        <h1> {{store.product.name}} </h1>
        <h2> ${{store.product.price}} </h2>
        <p> {{store.product.description}} </p>
        <button ng-show="store.product.canPurchase"> Add to Cart </button>
    </div>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</body>

var gem = {
    name: 'Dodecahedron', 
    price: 2.95, 
    description: '・・・', 
    canPurchase: true, 
    soldOut: true
}

複数商品

app.controller('StoreController', function() {
    this.products = gems;
});

var gems = [
    {
        name: 'Dodecahedron', 
        price: 2.95, 
        description: '・・・', 
        canPurchase: true
    },
    {
        name: 'Pentagonal Gem',
        price: 5.95,
        description: '・・・',
        canPurchase: false
    }
];

配列として表示

要素番号を指定して表示

<body ng-controller="StoreController as store">
    <div>
        <h1> {{store.products[0].name}} </h1>
        <h2> ${{store.products[0].price}} </h2>
        <p> {{store.products[0].description}} </p>
        <button ng-show="store.products[0].canPurchase"> Add to Cart </button>
    </div>
    <div>
        <h1> {{store.products[1].name}} </h1>
        <h2> ${{store.products[1].price}} </h2>
        <p> {{store.products[1].description}} </p>
        <button ng-show="store.products[1].canPurchase"> Add to Cart </button>
    </div>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</body>

ng-repeatディレクティブを使用して表示

<body ng-controller="StoreController as store">
    <div ng-repeat="product in store.products">
        <h1> {{product.name}} </h1>
        <h2> ${{product.price}} </h2>
        <p> {{product.description}} </p>
        <button ng-show="product.canPurchase"> Add to Cart </button>
    </div>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</body>

Level1で学んだこと

ディレクティブ - JavaScriptの動作を制御するHTMLタグ

モジュール - アプリケーションの動く場所

コントローラー - アプリケーションの振る舞いを追加する場所

式（Expressions）- ページ内での値の取得法

以上になります。

Level1のみをやってみた感想：
「Javascript書かなくても全然動的なサイト作れるじゃん！」です笑

それでは(^_^)/~

2014-08-26

『いきなり！ステーキ』人気ですよね〜

世の中

どうもこんばんは。
tomigungunです。

夏の暑さが和らいできましたね〜これくらいの気温だと、ラーメンとかステーキとか余裕で食べれちゃいます。

本日は気になったエントリーがあったので、これについてブログ書きたいと思います。

最近うちの会社の近くにもできた『いきなり！ステーキ』についてのエントリーです。

人気ですよねぇこのお店。最近いろんな場所に出店しているそうです。

同店を経営するのは、ステーキチェーン店「ペッパーランチ」で知られる株式会社ペッパーフードサービスだ。（引用）

なんと、あのフードコートでよく見かける「ペッパーランチ」の会社さんが経営しているのですね！

ちなみに僕は初めて知りました笑

いきなり！ステーキではペッパーランチの原価率30〜35％に比べ、57％で採算を採っているらしい・・・

しかし、立ち食いにすることで、少ないスペースで収容可能人数を増やし、お客の回転を早めた。また、メニューをステーキ、ライス、サラダ程度に抑えることで、食材の廃棄を減らしつつオペレーションを簡略化するなど、コスト削減を徹底した。（引用）

俺のシリーズのお店とビジネスモデルが似ていると思ったら、やはり参考にしているそうです。

全く一緒と言うわけではないのですが、根本的な売上モデルは似ていますよね。

ビジネスを行う際には、QCDEのバランスを考えることが重要だといわれている。両社は、多少の違いはあるが、基本的にクオリティを上げるためにオペレーションコスト（入荷検品・値段付け・商品陳列・商品補充・レジ作業などの店舗経営に関わるコスト）や店内環境を犠牲にしているといえる。（引用）

QCDEって言葉、初めて聞きました笑

Q (Quality) C (Cost) D (Deliverry) E (Environment)

どの要素も大切ですが、バランスを考える必要は確かにあります。どれかに偏ってしまうと、ワンオペで有名なあのお店のようになってしまうでしょう。

僕はQualityが良く、Costが抑えられていれば時間や環境はさほど気にならないですね笑
まさにいきなり！ステーキや俺のシリーズのお店です。

まだどちらのお店も行ったことないんだよなぁ・・・

まずは会社近くのいきなり！ステーキ行くか。

それでは(^_^)/~

2014-08-24

大曲の花火行ってきました

イベント

どうもこんにちは。
tomigunugnです。

久しぶりの投稿です！

なぜかって？私、夏季休暇の後半を使って大曲の花火大会見に行ってきたのです！

さすが日本一の花火大会、もう言葉が出ないくらいに感動しました。

相棒のD5300持って行ってたくさん写真とったので、その中でもベスト3ショットを投稿したいと思います！

まずはこの1枚。
スタンダードな3連の花火なのですが、かなりいい感じに撮れています(^^)

f:id:tomigungun:20140824114512j:plain

そして後の2枚。
こちらはフィナーレ近くの素晴らしい花火です！
もう何とも言えない美しさですね。

f:id:tomigungun:20140824114834j:plain

f:id:tomigungun:20140824114940j:plain

てなわけで、少しだけ現実逃避できました笑

明日から仕事かぁ・・・気持ちを切り替えて頑張って行きたいと思います。。。

それでは(^_^)/~

2014-08-20

Google Web APIでちょいと遊んでみた

どうもこんばんは。
tomigungunです。

本日はGoogle Web APIを使って、グーグル検索して遊んでみました。

自分で何かWebアプリ作ろうかな〜と思っていたので、とりあえず手始めに天下のGoogleさん的なね。笑

基本的にGoogleのリファレンスを読んだりして、とりあえず検索のAPIを試してみました。

GETを投げるエンドポイントのBase URLはこちら↓

https://ajax.googleapis.com/ajax/services/search/web

そして基本となるクエリパラメータは以下のとおりです。

クエリkey	例	説明
q	q=blog%20sample	検索文字列
v	v=1.0	プロトコルのバージョン番号。現在は1.0のみ？
userip?	userip=192.168.0.1	リクエスト元のIP。実際にはよくわかってません汗
rsz?	rsz=4	受け取りたい検索結果の数。1~8の間で指定する。
hl?	hl=fr	アプリ元の言語
start?	start=4	最初の検索インデックスの位置。例の場合だと、start要素が0, 4, 8, ・・・となる。
callback?	callback=foo	レスポンスの際に呼ばれるコールバック関数？
context?	context=bar	なんかよくわかんないけど、callbackと一緒に指定されるとcontextがノーマルレスポンスになる？

クエリパラメータに関してはこんな感じです。

すみませんが実際に僕が使っていない後半の奴らは、使い方がよくわかっていません。。。

お次はレスポンスのフォーマットについて

JSONで返ってくるみたいです。
基本的な構造は以下のとおりです。

{

"responseData" : {

"results" : [],

"cursor" : {}

},

"responseDetails" : null

"responseStatus" : 200

}

GETリクエストを送るために、jerseyクライアントAPIを使ってHTTPクライアントを作成しました。
ソースコードは以下の通りです。

 public static void main(String[] args) {
        Client client = Client.create();
        String query = "blog sample";
        query = URLEncoder.encode(query);
        WebResource resource = client.resource("https://ajax.googleapis.com/ajax/services/search/web?v=1.0&"
                + "q=" + query + "&rsz=2");
        String response = resource.get(String.class);
        System.out.println(response);
    }

こちらのサンプルコードを実行すると、次のような結果が返ってきます。

{"responseData": {"results":[{"GsearchResultClass":"GwebSearch","unescapedUrl":"http://ranking.ameba.jp/gr_3ple","url":"http://ranking.ameba.jp/gr_3ple","visibleUrl":"ranking.ameba.jp","cacheUrl":"http://www.google.com/search?q\u003dcache:cPgBJDJmxf4J:ranking.ameba.jp","title":"\u003cb\u003eサンプル\u003c/b\u003e・モニター | Ameba（アメーバ）人気\u003cb\u003eブログ\u003c/b\u003eランキング","titleNoFormatting":"サンプル・モニター | Ameba（アメーバ）人気ブログランキング","content":"\u003cb\u003eサンプル\u003c/b\u003e・モニターの\u003cb\u003eブログ\u003c/b\u003eランキングです。商品\u003cb\u003eサンプル\u003c/b\u003eなどのおトクな情報をキャッチ\n！"},{"GsearchResultClass":"GwebSearch","unescapedUrl":"http://blog.goo.ne.jp/portal/template_list","url":"http://blog.goo.ne.jp/portal/template_list","visibleUrl":"blog.goo.ne.jp","cacheUrl":"http://www.google.com/search?q\u003dcache:J043rRLL4BQJ:blog.goo.ne.jp","title":"\u003cb\u003eブログ\u003c/b\u003eテンプレート - goo\u003cb\u003eブログブログ\u003c/b\u003eのデザイン一覧です。","titleNoFormatting":"ブログテンプレート - gooブログブログのデザイン一覧です。","content":"goo\u003cb\u003eブログ\u003c/b\u003e。\u003cb\u003eブログ\u003c/b\u003eテンプレート・デザイン一覧。シンプル、クール、ポップ、かわいい\nイラストものから、春、夏、秋、冬、季節に合わせたテンプレートまで、デザイン\nテンプレートが豊富です。あなたのお気に入りの\u003cb\u003eブログ\u003c/b\u003eデザインがきっと見つかるはず。"}],"cursor":{"resultCount":"296,000","pages":[{"start":"0","label":1},{"start":"2","label":2},{"start":"4","label":3},{"start":"6","label":4},{"start":"8","label":5},{"start":"10","label":6},{"start":"12","label":7},{"start":"14","label":8}],"estimatedResultCount":"296000","currentPageIndex":0,"moreResultsUrl":"http://www.google.com/search?oe\u003dutf8\u0026ie\u003dutf8\u0026source\u003duds\u0026start\u003d0\u0026hl\u003den\u0026q\u003d%E3%83%96%E3%83%AD%E3%82%B0%E3%80%80%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB","searchResultTime":"0.08"}}, "responseDetails": null, "responseStatus": 200}

ちゃんと仕様通りですね。

このResultJSONについては、リファレンスに何も書かれていなかったのですが、key名を見たらなんとなく意味がわかるようになっています。

てな感じで今回はGoogle Web APIで検索をちょろっと試してしてみました。

Googleさんは検索広告で利益をあげているので、APIでのコールはいくつか制限があるみたいですがこんなにも簡単にGETリクエストを送信することができるのですね！

Webアプリケーションを作る第一歩になった、気がします・・・笑

それでは(^_^)/~

2014-08-14

Webに関する全般的な知識　〜Webアプリケーションを開発する上で必要なこと〜

どうもこんばんは。
tomigungunです。

〜本日の業務にて〜

CTO：今○○のアプリってどうやって作ってる？

僕：え、JSP/サーブレットでゴリゴリ作ってます。

CTO：それはアカンな

てな会話が繰り広げられたわけですよ。

そこでCTOが別の部署からあるデキる方を連れてきてくださって、レクチャーしていただけることになりました笑

そこでレクチャーしていただいた内容を忘備録として、書いていきたいと思います。

Webアプリケーション開発における前提知識

プロジェクト規模が大きくなるとjQueryは使わないほうが良い？

jQueryとは

Selectorが使える
Manipulationが便利

怖い部分

DOMがたくさんできてしまう
後からの修正が大変
単体テストできない

MVCモデルの歴史

JSFの登場でMVCモデルが変わった

JSFとは

Controllerいらないよね？
じゃあコントローラーとView一緒にしちゃえ！
MVになる（Controllerがいらなくなる）

しかしはやらず・・・
原因はセッションに色んな情報を詰めており、サーバーでの処理が遅くなるから。

しかしModelの部分は不変！！

サーバーサイドはRESTでしょ。データプロバイダとしての機能のみになる。

クライアント時代

JSでサーバーからデータ取ってきたり、jQuery使いまくってたらViewが大きくなってきた・・・

JSとModelを切り離す、フレームワークを利用

AngularJS、BackBoneなどなど

HTTPの仕様を知る

HTTPとは・・・『Hyper Text Transfer Protocol』

Base64を使いbyteを64文字列で送る

バイナリも送れますよ〜
だってテキストにしてるもん。

Protocolの話

URIとは・・・『UniformedResourceIdentifier』
IDの付け方が重要！
直感的にわかるIDを付ける必要がある
RPC（Remote Procedure Call）が一時期流行った（いわゆるSOAP）
SOAPはPOSTで送るという仕様になっている
更新をかけるのは基本的にPOST
SPDY　Googleが作りこんだHTTP2.0の仕様（ドラフト）

Responseの話

StatusCode　これを見たらだいたいのことがわからなくてはいけない
2✕✕：成功
- 200：OK
- 201：Created→Location: URI
- 204：NoContent
3✕✕：リダイレクト（他）
- 301：Move Parmanently
- 302：Found
- 303：See Other
- 304：Note Modified　
- 307：Move Temporary
4✕✕：クライアントエラー
- 401：Not Authorized
- 403：Forbidden　権限による
- 404：Not Found
- 405：Method Not Allowed
- 406：Not Acceptable
- 409：Conflict　同時リクエストによる矛盾
- 410：Gone　昔あったページ
- 412：Precondition Field
5✕✕：サーバーエラー
- 500：Internal ServerError
- 504：Gateway Timeout

Headerにデータの型を入れる

request
- Accept
  - request側でやる
response
- Content-Type
- Location

などなど・・・

HTTPキャッシュ

ブラウザが勝手にやってくれる！

期限モデル

データの保持期限を渡して、それに応じてリクエストを送らない。Date、Expiresをresponseに付与。

検証モデル

リクエストを送るが、データの状況に応じてデータを返すかどうか決める。この時にかえるのがStatusCode:304。どちらもサーバー側で実装が必要
responseにEtag・DateをEntityにつめてクライアントに返す。その後はrequestにEtagを付けて送信。
RequestにIf-None-Match：Etagを付与。

Cookie

Headerの一部

クライアントの全情報を送る
サーバー側ではSet-Cookieで指定できる
よく送られるのはJSESSIONID
マトリックスパラメータ『;』

こいつはJSESSIONIDをパラメータで指定することができる。しかしCookieが優先されるので殆どの場合、必要ない。

SessionStrageとLocalStrageに保存する方法もある
Secure、Httpsonlyはtrueにすべき
レスポンスヘッダーのサーバー名やURLは隠すべき

ざっとこんな感じです！

いや〜ほんとにデキる方って素敵。教え方もわかりやすくて本当に勉強になりました！

うちの部署に来てほしいよ全く。。。

てなわけで本日レクチャーしていただいた内容を踏まえて、今までJSP/サーブレットで作っていたものをRESTに作り変えるそうです！明日から・・・笑

JAX-RS（Jersey）を使ってゴリゴリ作って行くみたいなのですが、楽しみでもあり、ちょいと不安もあります。。

今日はここまで。
それでは(^_^)/~