ページ

2015年8月30日日曜日

福岡の糸島にある古民家カフェ Sumi Cafe

福岡県の糸島市にあるカフェ「Sumi Cafe」

糸島にドライブに行った際に、その場で近くのカフェを探していたら、
「Sumi Cafe」を見つけて、「すみ」?という特徴ある名前に惹かれて行ってきました。

ナビを設定して進めど、見つからない。。と思いきや通り過ぎてました(笑)
Uターンして、田んぼに囲まれた農村の中に控えめな看板を発見!!。

古民家を改装した風格ある佇まいです。


中に進んでいくと古民家ファンには堪らないであろう風景が待ってました。


さらに進むとちっちゃい入り口があって、そこから中へ。


店内もまたいい感じの佇まいでした。




「ブルーベリーのタルトとコーヒーのセット」を注文。
タルトは上品な味で、とても美味しかったです。
コーヒーはアイスを注文したのですが、苦味控えめで飲みやすかったです。






とにかく居心地が良くて、ゆっくりできました^^


・リンク
http://www.mataichi.info/sumi/index.html
※名前の「すみ」は店主さんのおばあ様の名前から付けたみたいですね^^


2015年8月28日金曜日

Elixir/Phoenixで遊ぶ 6 - Elixir基礎 演算子-

Elixir基礎 - 2

前回に続きElixirをちゃんと学ぶ


今回は、演算子。
  • 算術演算
Elixirでは算術演算子として+. -. *. /がある。
それぞれ、加算、減算、乗算、除算。ここら辺は他の言語と一緒。
iex(1)> 1 + 2
3
iex(2)> 5 - 3
2
iex(3)> 2 * 5
10
iex(4)> 10 / 2
5.0
(注)上の結果を見ても分かる通り、除算の戻り値は常にfloat型になる。
もしinteger型の必要であればdiv, rem関数が使える。
iex(5)> div(10, 2)
5
iex(6)> div 9, 3
3
iex(7)> rem 10, 1
0
iex(8)> rem 10, 3
1
remは割った余りを取得する。 関数呼び出しのかっこは書かなくても良い。
他に、↓ 2進数、8進数、16進数の書き方
iex(1)> 0b001010
10
iex(2)> 0o1234
668
iex(3)> 0xff
255

主な演算子


  • 文字列連結
<>
文字列を連結させる。
iex(4)> "abc" <> "def"
"abcdef"
iex(5)> var = "ABC"
"ABC"
iex(6)> var <> "DEF"
"ABCDEF"
  • 論理演算
and, or, not (&&, || !)
論理積(and, &&)、論理和(or ||)、否定(not, !)
iex(8)> is_atom(:a) and true
true
iex(9)> is_atom("a") and true
false
iex(10)> is_atom("a") or true
true
iex(11)> !is_atom("a")
true
iex(12)> true && false
false
iex(13)> true || false
true
iex(14)> !true
false
boolean型でない型で使用した場合、例外が発生する。
iex(15)> 1 and true
** (ArgumentError) argument error: 1
  • 比較演算
==, !=, ===, !==, <=, >=, <, >
=====の違いは==は値の比較に対して、===は値のチェックに加え、
型のチェックを行う。
iex(18)> 10 == 10.0
true
iex(19)> 10 === 10.0
false
iex(20)> 10.0 === 20.0
false

2015年8月25日火曜日

Elixir/Phoenixで遊ぶ 5 - Elixir基礎 型-

Elixir基礎 - No.1

ちゃんとElixirを学ぶ


Phoenixを少し触ってみたので、ちゃんとElixirを学んでみる。
  • まずは実行方法
以前インタラティクモードiexで軽く動作させてみましたが、
ファイルにコードを書いて実行させてみます。
IO.puts "Hello Elixir!!"
↑のコードを書いたファイルをsample.exsとして保存
ターミナル上で以下のように実行できる。
$ elixir sample.exs
Hello Elixir!!

Elixirの型としては以下
  1. integer
  2. float
  3. boolean
  4. atom / symbol
  5. string
  6. list
  7. tuple
integerとfloatは後々触れるとして、まずは・・・
boolean
trueとfalseの二つを値として持つ。
Elixirでは型チェックメソッドとしてis_booleanが使える
例)
iex(1)> is_boolean(false)
true
iex(2)> is_boolean(1)
false
iex(3)> is_boolean(1 == 1)
true
atom
rubyや他言語でいうところのsymbol
boleanの値はatom値と等価
iex(1)> true == :true
true
iex(2)> true == :false
false
iex(3)> is_atom(true)
true
iex(4)> is_atom(:true)
true
atomでも型チェックメソッドとしてis_atomが使える
string
ダブルクオーテーション""で囲む事でstring型として使用できる。
文字コードとしてはUTF-8。ダブルクオーテーションの文字列中に変数を挿入できる。
例)
iex(1)> "slowhand"
"slowhand"
iex(2)> name = "slowhand"
"slowhand"
iex(3)> "hello #{name}"
"hello slowhand"
上でも出てきたIOモジュールを使って出力してみる。
iex(4)> IO.puts "hi\n#{name}"
hi
slowhand
:ok
IO.putsは戻り値としてatom値の:okを返す。
文字列長を取得するには、String.lengthを使う。
また、バイト数を求めるにはbyte_sizeを使う。
例)
iex(5)> byte_size("abcあいう")
12
iex(6)> byte_size("あ")
3
iex(7)> String.length("abcあいう")
6
iex(8)> String.length("あ")
1
list
[]で囲む事でlist型となり、様々な型を挿入できる。
iex(9)> [1,true,"a",:ok]
[1, true, "a", :ok]
また++--演算子を使う事でlistの連結や差し引いたりできます。
iex(10)> [1,2,3] ++ [4,5,6]
[1, 2, 3, 4, 5, 6]
iex(11)> [10,9,8,7,6,5,4] -- [9, 7, 5]
[10, 8, 6, 4]
hdtlメソッドを使う事でlistの先頭要素と残りの要素を取得する事ができます。
ちなみに空のlistを渡すとエラーになります。 例)
iex(12)> list = [1,"a",:b,3]
[1, "a", :b, 3]
iex(13)> hd(list)
1
iex(14)> tl(list)
["a", :b, 3]
iex(15)> hd[]
** (SyntaxError) iex:15: syntax error before: ']'
※たまに数値のlistを作成するとシングルクオーテーションで囲んだ文字が出力される。
例)
iex(15)> [104, 101, 108, 108, 111]
'hello'
どうやらこれはElixirが印刷可能なASCIIコードを見ると文字として出力するらしい。
ちなみにシングルクオーテーションで囲まれた文字列とダブルクオーテーションで囲まれた文字列をElixirでは違うものとしてみる。
tuple
{}で囲む事でtuple型となる。 要素を追加した順番にインデックスが割り振られ、先頭の要素はインデックス0でアクセスできる。
例)
iex(16)> t =  {:ok, :ng}
{:ok, :ng}
iex(17)> elem(t, 0)
:ok
iex(18)> is_tuple(t)
true
iex(19)> tuple_size(t)
2
また、put_elemを使う事でtuple値に要素を追加し、新たなtuple値として返却します。
というのも、Elixirでは不変データ構造をもっている為。
今回はここまで。

2015年8月23日日曜日

iOSのUIWebView + AngularJS

iOSのUIWebView + AngularJS

iOSのアプリでメニュー画面なんか作る時は今までStoryboardから
ボタン配置して〜とやっていたんですが、WebViewでやった方が色々
便利そうだと思い、今回フロントのJSフレームワークの
AngularJSでテストしてみました。

テスト用のプロジェクト作成


Storyboardで画面にUIWebViewを貼り付けます。
UIWebViewのサイズクラスを調節し画面一杯にUIWebViewが表示するように設定します。
UIWebViewからViewControllerへOutletとして接続します。
optimized
表示する用のHTMLをプロジェクト内に作成します。
HTMLを以下に編集。
<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>
今回はAngularJSの公式サイトに載ってあるサンプルを使用。
ViewControllerを以下に修正。
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var webView: UIWebView!
    var url = NSBundle.mainBundle().pathForResource("index", ofType: "html");

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let reqURL = NSURL(string: url!)
        let req = NSURLRequest(URL: reqURL!)
        webView.loadRequest(req)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}
実行してみる。
optimized
入力した内容が反映されてればOK

JSからのイベントをネイティブ側で受け取って見る


まずはViewControllerにUIWebViewをDelegate
optimized
ViewControllerを以下に修正
import UIKit

class ViewController: UIViewController, UIWebViewDelegate {

    @IBOutlet weak var webView: UIWebView!
    var url = NSBundle.mainBundle().pathForResource("index", ofType: "html");

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let reqURL = NSURL(string: url!)
        let req = NSURLRequest(URL: reqURL!)
        webView.loadRequest(req)
    }

    // handling event
    func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {

        println(request)
        println(navigationType)
        return true
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}
func webViewWebViewが新たなフレームをロードする際にこのメソッドが実行されます。今回はそこでパラメータを出力しています。
HTMLを以下に修正。
<!doctype html>
<html ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    </head>
    <body>
        <div>
            <label>Name:</label>
            <input type="text" ng-model="yourName" placeholder="Enter a name here">
            <hr>
            <h1>Hello {{yourName}}!</h1>
        </div>
        <div>
            <form ng-controller="myController">
                <lable>Link:</label>
                <button ng-click="onClick()">send</button>
            </form>
        </div>
    </body>
    <script>
        angular.module('myApp', [])
            .controller('myController', ['$scope', function($scope) {
                // setting click listener
                $scope.onClick = function() {
                    location.href = "http://www.yahoo.co.jp";
                };
            }]);
    </script>
</html>
実行中の画面


「send」をクリックした際の出力結果
<NSMutableURLRequest: 0x7f8c9b713790> { URL: file:///Users/{ユーザ名}/Library/Developer/CoreSimulator/Devices/F1110364-4D6A-4383-9ED1-3BBF2798E8A5/data/Containers/Bundle/Application/595C8C08-B4DF-44C8-AF1C-72BF24AB3217/WebViewSample.app/index.html }
(Enum Value)
<NSMutableURLRequest: 0x7f8c9b42a590> { URL: http://www.yahoo.co.jp/ }
(Enum Value)
<NSMutableURLRequest: 0x7f8c9b588be0> { URL: http://m.yahoo.co.jp/ }
(Enum Value)
<NSMutableURLRequest: 0x7f8c9d9076e0> { URL: http://s.yimg.jp/images/listing/tool/yads/criteo_api.html#%7B%22command%22%3A%22callAds%22%2C%22params%22%3A%7B%22zoneid%22%3A%22265876%22%7D%7D }
(Enum Value)

リクエストの内容とUIWebViewNavigationTypeEnum Valueとして表示されています。
とりあえず今回はここまで。

2015年8月22日土曜日

道の駅を巡ってみる 3 - 北宮崎方面 -

合計4箇所の道の駅をはしご

そもそも、なぜそんなにも道の駅に行ってるかというと、
道の駅スタンプラリー(九州版)
というのがあって、全国版のスタンプラリーもあったりするのですが、
さすがに全国は無理でしょという事で九州版のスタンプラリーに挑戦してます。
各道の駅のスタンプを集めて貯まったらプレゼントがもらえたりします。

今回は連休を利用して宮崎方面を攻めてみました。

1.  道の駅「つの」

ミニ水車が駐車場横に設置されていました。
敷地が広くて建物も新しい感じでした。

・リンク



2.  道の駅「日向」

海の近くにあるので景色がとても良かったです。
↓ちょっと分かりづらいですが、道の駅の反対側にちょっとした
   休憩スペースがあって海を一望できます。


あと特産の日向夏やマンゴーを使った飲み物やお菓子、パンなど沢山売られていました。


・リンク
http://www.qsr.mlit.go.jp/n-michi/michi_no_eki/kobetu/hyuga/hyuga.html



3.  道の駅「とうごう」

色んな施設と併設されていて、広い敷地でした。

・リンク


4.  道の駅「高千穂」

ここには神楽面をモチーフにした大きなモニュメントがあります。


思わずスマホのカメラで撮影してしまいましたw
近くにはパワースポット「高千穂峡」があります。





・リンク
http://www.qsr.mlit.go.jp/n-michi/michi_no_eki/kobetu/takachiho/takachiho.html




いや〜色々行けて楽しかった。
しかし、1日に4箇所の道の駅に行くのは結構大変w

2015年8月19日水曜日

Windows10 の新機能に触れてみる

アクションセンターと検索

前回 VM上のWindows8.1をWindows10 へアップデートしましたが、
大雑把にしか触れてなかったので、今回はもう少し掘り下げて
アクションセンター検索ボックスに関して触れてみます。

ちなみに、Windows10のシステム情報は↓こんな感じです。



・アクションセンター



↑タスクバーの赤枠で囲ってあるアイコンをクリックするとアクションセンターが
右端に表示されます。
最近の通知一覧と以下の項目にアクセスできるようになっています。


  • タブレットモード
  • 接続
  • ノート
  • すべての設定
  • バッテリー節約機能
  • VPN
  • 通知オフ
  • 場所
  • 機内モード

↓アクセスしてみました

タブレットモード


タブレットモードを選択すると全画面表示になりWindows8のようなタイル画面になります。

↑タブレットモードでEdgeを起動した所

接続


WiFiやBluetoothの接続状況を表示します。

ノート


名前から想像できるように、OneNoteが起動しました。

すべての設定


詳細な設定画面が表示されます。
※スタートメニューの設定からもアクセス可能



バッテリー節約機能
 画面の明るさ調整や、バックグラウンドのアプリを無効化する

VPN
 VPN設定画園が表示されます

通知オフ
 トーストでの通知がオフになります

場所
 ロケーションの機能のオン/オフ

機内モード
 ワイヤレス通信を無効化する



・検索ボックス

↓検索ボックスで検索した様子


ローカルファイルとWebからキーワードを検索してくれます。
ちなみに、まだコルタナは日本語未対応でした。


早くコルタナを試してみたい気はしますが、アップデートに期待^^;



2015年8月16日日曜日

Elixir/Phoenixで遊ぶ 4 - PhoenixのController -

Phoenix controllerに値を渡す

メソッド&ページ追加


前回で作成したプロジェクトを使って、URLで指定した値を画面に表示させる。
例えば、http://localhost:4000/hello/Slowhandにアクセスするとhello Slowhand!と表示するようにしてみる
  • routeに新規パス追加
defmodule SamplePhoenix.Router do
  use SamplePhoenix.Web, :router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug :protect_from_forgery
  end

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/", SamplePhoenix do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
    get "/hello", HelloController, :index
    get "/hello/:messenger", HelloController, :show ☆
  end

  # Other scopes may use custom stacks.
  # scope "/api", SamplePhoenix do
  #   pipe_through :api
  # end
end
前回同様web/router.exscope "/"ブロックに追加。
/hello/:messengerDictというKey,Valueを提供するmoduleを使って
controllerから値を取れるようにURLにキー(:messager)をくっつけてます。
  • コントローラにメソッド追加
web/controllers/hello_controller.exを以下内容に修正する。
defmodule SamplePhoenix.HelloController do
  use SamplePhoenix.Web, :controller

  plug :action

  def index(conn, _params) do
    render conn, "index.html"
  end

  def show(conn, %{"messenger" => messenger}) do
    render conn, "show.html", messenger: messenger
  end
end
%{"messenger" => messenger}では%{"messenger" => messenger}のパターンが来た時だけ処理が実行され、key'messenger'をmessengerに設定しています。
また、他のparamsも使用したい場合は以下のようにすることも可能。
def show(conn, %{"messenger" => messenger} = params) do
  ...
end
  • テンプレートの作成
web/templates/hello/show.html.eexを以下内容で作成する
<div class="jumbotron">
  <h2>Hello <%= @messenger %>!</h2>
</div>
サーバを起動しhttp://localhost:4000/hello/Slowhandにアクセス
上記の画面が表示される