今宵も我が家の回線は遅い

開発とダーツとにんげんかんさつが好き

JavaScriptフレームワーク、Meteorのチュートリアルを試してみる　その１

JavaScript 開発

Meteorを試して使ってみる

Meteorとは

2012年に登場したNode.jsをベースとしたフルスタックフレームワークです。 Webアプリケーションが爆速で開発できるとのことでチュートリアル的なことを今回やってみたいと思います。

今回は公式サイトのチュートリアル「simple-todos with React」をやってみたいと思います。

Meteor公式サイト - Creating an app

準備

今回の環境は以下の通りです。

Meteorのインストール

バージョンによってインストール方法が異なるようなので下手に記事を漁るより 公式サイト - Meteorに従って進めていきましょう。 といっても簡単で以下のコマンドをターミナル上で実行します

curl https://install.meteor.com/ | sh

プロジェクトの作成

インストールが終わったら、次はプロジェクトの作成を行います。

meteor create simple-todos

一度、動かしてみる

ここまできたらとりあえず動かしてみましょう

cd simple-todos

// meteorコマンドでサーバーを起動
meteor

サーバが起動したら確認します。 http://localhost:3000/で確認できるかと思います。 f:id:msk6252:20170821103107p:plain

こんな感じの画面が出れば成功です。 ボタンを押すとカウントしてくれるカウンターアプリが作られています。

React用の準備

React.jsを用いて書いていくのでそちらの準備を行っていきます。 reactとreact-domをインストールします

meteor npm install --save react react-dom

Todoアプリを作成していく

準備が整ったのでTodoアプリを書いていきましょう まずは、client/main.htmlを書き換えていきます。

<head>
  <title>Todo List</title>
</head>
 
<body>
  <div id="render-target"></div>
</body>

これだけでOKです。

次にclient/main.jsを書き換えます。 一度、client/main.jsを削除し、再度client/main.jsを作成しましょう。 中身のコードは以下の通りです。

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
 
import App from '../imports/ui/App.jsx';
 
Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});

コンポーネントを作成

Reactを学んでいない方は少しわからないかもしれないですが、コンポーネントというものを作成していきます。簡単にいうと部品ごとにコードを分割し、コンポーネントにすることで可読性や生産性の向上を図ります。

まずは、コンポーネントのディレクトリを作ります

mkdir imports
mkdir imports/ui

まずは大元であるAppコンポーネントを作成していきます。

imports/ui/App.jsxです。

import React, { Component } from 'react';
 
import Task from './Task.jsx';
 
// App component - represents the whole app
export default class App extends Component {
  getTasks() {
    return [
      { _id: 1, text: 'This is task 1' },
      { _id: 2, text: 'This is task 2' },
      { _id: 3, text: 'This is task 3' },
    ];
  }
 
  renderTasks() {
    return this.getTasks().map((task) => (
      <Task key={task._id} task={task} />
    ));
  }
 
  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>
 
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

次は、タスク１つ１つに関するコンポーネントが必要なので作っていきます imports/ui/Task.jsxです

import React, { Component, PropTypes } from 'react';
 
// Task component - represents a single todo item
export default class Task extends Component {
  render() {
    return (
      <li>{this.props.task.text}</li>
    );
  }
}
 
Task.propTypes = {
  // This component gets the task to display through a React prop.
  // We can use propTypes to indicate it is required
  task: PropTypes.object.isRequired,
};

CSSも追加する

ここまででも動きますがせっかくなのでCSSでスタイリングしていきたいと思います。 client/main.cssに記述していきます。

/* CSS declarations go here */
body {
  font-family: sans-serif;
  background-color: #315481;
  background-image: linear-gradient(to bottom, #315481, #918e82 100%);
  background-attachment: fixed;
 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
 
  padding: 0;
  margin: 0;
 
  font-size: 14px;
}
 
.container {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100%;
  background: white;
}
 
header {
  background: #d2edf4;
  background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
  padding: 20px 15px 15px 15px;
  position: relative;
}
 
#login-buttons {
  display: block;
}
 
h1 {
  font-size: 1.5em;
  margin: 0;
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 1em;
}
 
form {
  margin-top: 10px;
  margin-bottom: -10px;
  position: relative;
}
 
.new-task input {
  box-sizing: border-box;
  padding: 10px 0;
  background: transparent;
  border: none;
  width: 100%;
  padding-right: 80px;
  font-size: 1em;
}
 
.new-task input:focus{
  outline: 0;
}
 
ul {
  margin: 0;
  padding: 0;
  background: white;
}
 
.delete {
  float: right;
  font-weight: bold;
  background: none;
  font-size: 1em;
  border: none;
  position: relative;
}
 
li {
  position: relative;
  list-style: none;
  padding: 15px;
  border-bottom: #eee solid 1px;
}
 
li .text {
  margin-left: 10px;
}
 
li.checked {
  color: #888;
}
 
li.checked .text {
  text-decoration: line-through;
}
 
li.private {
  background: #eee;
  border-color: #ddd;
}
 
header .hide-completed {
  float: right;
}
 
.toggle-private {
  margin-left: 5px;
}
 
@media (max-width: 600px) {
  li {
    padding: 12px 15px;
  }
 
  .search {
    width: 150px;
    clear: both;
  }
 
  .new-task input {
    padding-bottom: 5px;
  }
}

コレクションを使う

Todoリストを作成しても、保存できなければ意味がありません。なのでコレクションを使用し、保存できるようにしましょう。 ディレクトリをつくってやります

mkdir imports/api

imports/apiの中に、tasks.jsファイルを作成します。

import { Mongo } from 'meteor/mongo';
 
export const Tasks = new Mongo.Collection('tasks');

先程作ったファイルをサーバで使うように読み込みます。 server/main.jsに追記していきます。

 import '../imports/api/tasks.js';

コレクションを使うにはモジュールのインストールが必要なので行います。

meteor npm install --save react-addons-pure-render-mixin
meteor add react-meteor-data

コレクションを使うには、先程つくったApp.jsxを編集する必要があります。

import React, { Component } from 'react';

//追記
import { createContainer } from 'meteor/react-meteor-data';

//追記
import { Task } from '../api/tasks.js';

//追記
import Task from './Task.jsx';

class App extends Component {
  renderTasks() {
    return this.getTasks().map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

//追記
App.propTypes ={
    tasks: PropTypes.array.isRequired,
};
//追記
export default createContainer(() => {
  return {
    tasks:Tasks.find({}).fetch(),
  };
},App);

コレクションにデータを入れていきます。 ターミナル２つ使い、１つはmeteorコマンドでサーバを起動 もう１つはmeteor mongoでコンソールを立ち上げます

//１つ目のターミナル
meteor

//2つ目のターミナル
meteor mongo

データをインサートする

// 2つ目のターミナル　コレクションのコンソールが起動した状態で
db.tasks.insert({ text: "Hello world!", createdAt: new Date() });

Todoを追加するフォームを記述していきます imports/ui/App.jsx

import React, { Component, PropTypes } from 'react';

// 追記
import ReactDOM from 'react-dom';
import { createContainer } from 'meteor/react-meteor-data';

import { Tasks } from '../api/tasks.js';

import Task from './Task.jsx';

class App extends Component {

// 追記　フォーム入力確定後に実行される関数
  handleSubmit(event){
   event.preventDefault();

   const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
   Tasks.insert({
    text,
    createdAt: new Date(),
   });

   ReactDOM.findDOMNode(this.refs.textInput).value = '';
  }

  renderTasks() {
    return this.props.tasks.map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>

// フォームの追記
          <form className="new-task" onSubmit={this.handleSubmit.bind(this)} >
             <input
               type="text"
               ref="textInput"
               placeholder="Type to add new tasks"
             />
          </form>
        </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

App.propTypes ={
    tasks: PropTypes.array.isRequired,
};

export default createContainer(() => {
  return {
    // 書き換え
    tasks:Tasks.find({}, {sort: { createdAt: -1} }).fetch(),
  };
},App);

実行してみる

まだすべて実装が終わっていませんが、実行してみましょう。 ちなみにmeteorコマンドでサーバを起動した状態でコードを修正すると自動でサーバをリスタートしてくれます。また、ブラウザも更新してくれます。

// サーバ起動
meteor

ページにアクセスする際は、http://localhost:3000でいけると思います。 f:id:msk6252:20170822001528p:plain

こんな感じのTodoリストができていたらOKです。 リストの追加や終わったリストへのチェック、項目の削除ができるので動作を確認しておきましょう。

今回のまとめ

今回はここまでにします。

今回は

  • Meteorのインストール
  • Meteorで動かす
  • ToDoアプリを作成する
    • Reactで書くための準備
    • とりあえずのTodoリストを書く
    • コレクションの設定
    • フォームの設置

今後も書いていきます。

思ったよりチュートリアル長い。。。

Raspberry Pi + Amazon Dash Button + Lineで呼び出しボタンを作る

RaspberryPi ライフハック ガジェット

Amazon Dash Buttonで通知ボタンをつくりたい

先日、Amazon Dash Buttonが1個 100円という破格の値段で売られていたので、5個購入しました。

f:id:msk6252:20170818235301j:plain
２つは既に使用中。

作ろうと思った経緯

いつかはIoT入門の意味も含めて、Amazon Dash Buttonをハックしたいと考えていました。
また、私には祖母がいるのですが、なにかあったときの呼び出し用のボタンを作成したいと思いました。
しかし、携帯電話も持たないITと無縁な祖母に気軽に使ってもらえるようなガジェットが今までなかった（探してない）ので諦めていました。
Amazon Dash Buttonの登場とエンジニア界隈でのハックが盛り上がっているのを知り、作ろうと決意しました。

前置きは以上として今回はRaspberry Pi + Node.js + Line + Amazon Dash Buttonを使って、通知ボタンを作ります。

こちらの記事を参考にさせていただきました。

【Raspberry Pi】Amazon Dash Buttonを押すとLineにメッセージ投稿する方法 - CGメソッド

ボタンをハックしていく

Amazon Dash Buttonの設定

Amazon Dash Buttonの初期設定を行います。 Amazonのスマホアプリをダウンロードします。

  1. メニュー -> アカウントサービス -> Dash端末 新しい端末をセットアップ
  2. セットアップのガイドに沿って設定する
  3. 商品選択画面で商品を選択せずに終了する

Raspberry Piの設定

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

とりあえず、アップデートをしましょう

sudo apt-get update
sudo apt-get upgrade

必要なパッケージをインストールします

sudo apt-get install libpcap-dev

//npmとgit、nodeのインストール
sudo apt-get install npm git
sudo apt-get install node

// arm用のnodeにアップデートする
wget http://node-arm.herokuapp.com/node_latest_armhf.deb 
sudo dpkg -i node_latest_armhf.deb

Dasherのインストール

DasherというAmazon Dash Buttonを制御することができるNodejs用モジュールを使用します。

git clone https://github.com/maddox/dasher.git
cd dasher
npm install
// うまくいかない場合はsudoをつけてnpm installを行ってみてください

Dash ButtonのMACアドレスを検索する

dasherディレクトリの中にscript/find_buttonというスクリプトがあるのでそちらを使ってLan内からDash Buttonを見つけます。

//dasherディレクトリにいることを確認
pwd
/home/pi/dasher

//スクリプトの実行
./script/find_button
~
~
~

スクリプトを実行し、Amazon Dash Buttonを押すと 「Amazon Technologies Inc.」か「Unknown Protocol: udp または arp」という文字が出てきます。そのMACアドレスを控えておきましょう。

IFTTTの設定

IFTTTでレシピを作成する

ifttt.com

My Applets > New Appletで新しいレシピを作りましょう f:id:msk6252:20170819153516p:plain

トリガー（引き金）となるThisの部分には「Webhooks」を選択します。 Event Nameは任意で適当に名前をつけましょう。

Thatの部分には、Lineを選択します。
「Send message」を選択後、メッセージを送信するグループや文言を決めていきます。 今回はRecipitantは「1:1でLine Notifyから通知を受け取る」 Messageは「ばあちゃんが呼んでいます」としました。 f:id:msk6252:20170819154210p:plain

入力が終わったら、「Create action」で作成します。

API Keyを確認する

イベントを発火させるにはAPI Keyが必要なので確認しましょう。

Do more with Webhooks - IFTTT > SettingsからAccount InfoのURLを確認します。

https://maker.ifttt.com/use/[API Key]

なのでメモを控えておきましょう そして、イベント発火に使うURLは以下になります

https://maker.ifttt.com/trigger/[IFTTTで作成したイベント名]/with/key/[API キー]

ラズパイの設定を書き換える

ラズパイの設定をLine用に書き換えましょう。 dasher/config/config.jsonを無い場合は新たに作成しましょう。 addressには、先程調べたDashButtonのaddress urlには、トリガーのURLを使用します。

{"buttons":[
  {
    "name" : "send_line_message",
    "address": "XX:XX:XX:XX:XX:XXB",
    "url": https://maker.ifttt.com/trigger/[IFTTTで作成したイベント名]/with/key/[API キー]",
    "method": "POST",
    "json": true,
 }
]}

上記を入力したら、保存しましょう。

実際に動かす

実際に動かして確認してみましょう。 dasherディレクトリ内で実行します。

cd dasher
npm run start

これで動けば成功です。

OS起動時に起動させる

こちらは一番最初に書いた参考サイトにかかれているコードを拝借いたします。

// 起動スクリプトを書きます
// debian系のOSは/etc/init.dディレクトリの中に記述するようです。
sudo nano /etc/init.d/dasher

中身はこちら

#!/bin/sh
### BEGIN INIT INFO
# Provides:
# Required-Start:    $remote_fs $syslog
# Required-Stop:     $remote_fs $syslog
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: Start daemon at boot time
# Description:       Enable service provided by daemon.
### END INIT INFO
 
dir="/home/pi/dasher"
cmd="DEBUG=* node app.js"
user="root"
 
name=`basename $0`
pid_file="/var/run/$name.pid"
stdout_log="/var/log/$name.log"
stderr_log="/var/log/$name.err"
 
get_pid() {
    cat "$pid_file"
}
 
is_running() {
    [ -f "$pid_file" ] && ps `get_pid` > /dev/null 2>&1
}
 
case "$1" in
    start)
    if is_running; then
        echo "Already started"
    else
        echo "Starting $name"
        cd "$dir"
        if [ -z "$user" ]; then
            sudo $cmd >> "$stdout_log" 2>> "$stderr_log" &
        else
            sudo -u "$user" $cmd >> "$stdout_log" 2>> "$stderr_log" &
        fi
        echo $! > "$pid_file"
        if ! is_running; then
            echo "Unable to start, see $stdout_log and $stderr_log"
            exit 1
        fi
    fi
    ;;
    stop)
    if is_running; then
        echo -n "Stopping $name.."
        kill `get_pid`
        for i in {1..10}
        do
            if ! is_running; then
                break
            fi
 
            echo -n "."
            sleep 1
        done
        echo
 
        if is_running; then
            echo "Not stopped; may still be shutting down or shutdown may have failed"
            exit 1
        else
            echo "Stopped"
            if [ -f "$pid_file" ]; then
                rm "$pid_file"
            fi
        fi
    else
        echo "Not running"
    fi
    ;;
    restart)
    $0 stop
    if is_running; then
        echo "Unable to stop, will not attempt to start"
        exit 1
    fi
    $0 start
    ;;
    status)
    if is_running; then
        echo "Running"
    else
        echo "Stopped"
        exit 1
    fi
    ;;
    *)
    echo "Usage: $0 {start|stop|restart|status}"
    exit 1
    ;;
esac
 
exit 0

スクリプトの権限を変えてあげます

sudo chmod 755 /etc/init.d/dasher

自動起動のコマンドを入力

sudo update-rc.d dasher defaults

以上でOS起動時にプログラムが起動するそうです。

まとめ

長きに渡って、Raspberry PiにOSインストールからAmazon Dash Buttonを使ったIoTハックをしました。 これからもライフハック✕ITでいろいろやっていきたいと思います。

Raspberry Piの初期設定を行う

RaspberryPi ガジェット

Raspberry Piの初期設定

今回はRaspberryPiの設定を行っていきます。自分にあった環境で快適かつ安全に使うためには設定を行いましょう。 今回行う設定は以下の通りです。

上記の設定は

sudo raspi-config

で設定画面に移ります

パスワードの変更

初期設定のままのパスワードを使うのは危険なので新たに変更を行いましょう。
SSH等の設定を行っていて外部への接続が可能な場合は必ず行いましょう。

sudo raspi-config

で設定画面に移動し、

1. Change User Password Change password for the default user(pi)

を選択します。

新しいUNIXパスワードを入力してください：

と表示されたら新しいパスワードを入力しましょう。 もう一度、聞かれるので同じパスワードを入力しましょう。

SSHサーバの有効化

外部から接続できるようにSSHサーバの有効化を行います。

5. InterfacingOptions

次に

P2 SSH

で進みます。 有効化するか聞かれるので「はい」を選択します。
以上です。

ロケールの設定

次は時間や地域の設定を行っていきます。

4. Localisation Options 
T1 Change Locale

でロケールの設定を行っていきます。
言語のところで[ ]にチェックをつけていきます。
チェックの付け方はスペースでつけることができます。

[ ] ja_JP.UTF-8 UTF-8

でスペースでチェックをつけます。
チェックをつけたらタブキーで<了解>で確定させます。
デフォルトのロケールを設定できるので任意のものにします。

同じようにタイムゾーンの設定も行いましょう

4 Localisation Options -> T2 Change Timezone

そしたら地域の選択にうつるので

アジア -> 東京

で設定しましょう

オーバークロックの設定

CPUの上限を引き上げることでラズパイの性能を上げることができます。

ただし、オーバークロックをすることで保証外になるのでする際は、自己責任でお願いします。

6 Overclock -> Medium

です。 今回は、「Medium」で設定しましたが、お好みで設定を変えてください。

まとめ

今回は、ラズパイの設定を行いました。
きちんと設定し、安全で自分好みのラズパイを作りましょう。

RaspberryPiでSSHの設定　続き

RaspberryPi 開発

前回までモニターを使わずにRaspberryPiにOSをインストールし、SSHでMacとの接続を試みました。

msk6252.hatenablog.com

今回はその続きで、実際にローカルネットワーク内にRaspberryPiを加えたいと思います。

前提

前回からの続きで話していきます。
Macとラズパイ間でSSH接続ができるのが前提です。

SSH接続する

Macとラズパイ間でSSH接続します。 Mac上で以下のコマンドを打ちます

$ ssh pi@192.168.2.2
// IPアドレスはarp -aで確認する
// パスワードは初期設定の状態だと「raspberry」

接続できたら次のステップです

固定IPアドレスの設定

wheezyでは/etc/network/interfacesをいじって固定IPアドレスを指定していたはずです。しかし、jessieでは/etc/dhcpcd.confで固定IPアドレスの指定を行います。

それでは、編集していきます

$ sudo nano /etc/dhcpcd.conf

以下を/etc/dhcpcd.confに追記していきます

// 有線LANの指定
interface eth0
// 静的IPアドレスの指定
static ip_address=192.168.0.20
// デフォルトゲートウェイの指定
static routers=192.168.0.1
// ドメインサーバーの指定
static domain_name_servers=220.152.38.233

上記では、ラズパイのIPアドレスを192.168.0.20で指定しています。
適宜、お使いの環境に合わせて変更してください。
また、指定できるアドレスは範囲が設定されています。
私の場合はNECのルータを使っていますが、ルータの設定画面に入り、
トップページ ＞ 詳細設定 ＞ LAN側設定で確認します。

192.168.0.1/24

　24という数値はサブネットマスクと呼ばれ、ネットワークを細分化するものです。いわゆるこの範囲の中でIPアドレスを利用できるということです。
サブネットマスク計算(IPv4)／サブネット一覧（早見表）で利用可能範囲を確認しましょう。
IPアドレスとサブネットマスクを入力し、実行します。
ホストアドレス（利用可能IP）のところを見ると
192.168.0.1 ~ 192.168.0.254と書いてあります。 この範囲で設定するようにしましょう。
　また、ルータのDHCP機能が働いているとIPアドレスの重複が起こるかもしれないので、できるだけかぶらないIPアドレスを指定しましょう。

再起動とルータに接続

　一度、電源を落としてルータと接続します。次回電源を入れた際には、IPアドレスの設定が有効化されます。
　ルータと接続し、ラズパイの電源を入れます。そしたら、SSHを試します。

$ pi@192.168.0.20
// IPアドレスは各自設定したもの
// パスワードは初期のものであれば「raspberry」

これで接続できたら成功です

まとめ

前回から続けて、ラズパイの設定を行いました。 次は初期設定などを解説していけたらと思います。

Raspberry Pi 3 MODEL B 【RS正規流通品】

Raspberry Pi 3 MODEL B 【RS正規流通品】

初代ラズパイにモニターを使わないでjessieをインストールする

RaspberryPi 開発

Raspberry Pi 3 MODEL B 【RS正規流通品】

Raspberry Pi 3 MODEL B 【RS正規流通品】

概要

今回は、今まで使ってきたRaspberry Piをwheezyからjessieにアップグレードします。 SDカードをフォーマットをしてからjessieを導入します。

もう色々なところでこういう記事は出されているので皆様の何かの手助けとなるとともに自分の備忘録として残します。

作業に必要な道具は以下の通りです。

最初の設定では、Macとラズパイを直接LANケーブルを繋げます。
Mac – 有線LANアダプタ – LANケーブル – Raspberry Pi

また、モニターを使わず、sshで基本的な設定を行っていきます。

OSのダウンロード

Download Raspbian for Raspberry Piからjessie liteをダウンロードします。lite版というのはGUIが部分が省かれており、CUIのみのパッケージが入っています。
今回はZip版をダウンロードします。 Macの場合は自動で展開してくれると思いますが、自動で展開されない場合は手動で展開しておきましょう。

SDカードのフォーマット

SDカードをフォーマットしてOSをインストールする準備する。 MacにSDカードを挿して、ターミナルを開きます。
Macで認識されているディスクを確認していきます

$ diskutil list

表示された中でSDカードを見つけます。 自分は/dev/disk2というのがSDカードにあたるものでした。

そして、一度アンマウントします。

$ diskutil unMountDisk /dev/disk2

フォーマットをかけていきます。
指定するディスクを間違うとシステムに影響を及ぼす可能性があります。ご注意ください

$ diskutil eraseDisk HFS+ Untitled /dev/disk2

これでフォーマットが完了したはずです。
念のため、確認しましょう
「ディスクユーティリティ」を開き、SDカードがフォーマットされていることを確認できます。
ちなみにディスクユーティリティからもフォーマットをかけることができますが、私の場合はうまくいかなかったので、ターミナルから行いました。

OSをインストール

ダウンロードしたOSをSDカードに書き込んでいきます。
ddコマンドを使って書き込んでいきます。

$ sudo dd bs=1m if=2017-07-05-raspbian-jessie-lite.img of=/dev/rdisk2

// bsは一度にバッファに書き込むサイズの指定。
// ifの後ろはイメージの指定。今回の場合は、2017-07-05-raspbian-jessie-lite.img
// ofの後ろはディスクの指定。

Macとラズパイを繋ぐ

sshで接続できるように、設定をしていきます。 先程、SDカードにOSを書き込みました。その中に「ssh」という空ファイルを作成します。 その後、SDカードをラズパイに差します。
ラズパイをLANケーブルと有線LANアダプタを使ってMacと接続します。

そしたら、Macの「システム環境設定」->「共有」 -> 「インターネット共有」で

  • 「共有する接続経路」は「Wi-Fi」
  • 「相手のコンピュータでのポート」では、各々が接続で使っている有線LANアダプタの型番を探しています。
    • 純正のLANアダプタを使用しているかたはThunderboltブリッジでいいはずです。（未検証）

ssh接続をしてみる

やっとここまで来ました。お疲れ様です。 Macから利用できるデバイス（ラズパイ）をネットワークから探し出します。

$ arp -a
// ...
? (192.168.2.2) at b8:27:eb:65:5f:9b on bridge100 ifscope [bridge]
// ...

たぶんいろいろなデバイスとIPアドレスが検出されると思いますが、「[bridge]」というのがキーポイントかと思います。そしてIPアドレスを控えてください。（今回は192.168.2.2）

ssh接続をしてみます。 初期のパスワードは 「raspberry」です

$ ssh pi@192.168.2.2
Are you sure you want to continue connecting (yes/no)?
The authenticity of host '192.168.2.2 (192.168.2.2)' can't be established.
ECDSA key fingerprint is SHA256:ほげほげ.
pi@192.168.2.2's password: //ここで「raspberry」（入力しても何も表示されないが正しい）

ログインに成功すると

pi@raspberrypi: ~ $

と表示されれば成功です。

できた皆様お疲れ様です。

まとめ

セットアップと考えただけで気後れしていた私ですが、実際にやってみるとSSH接続できるまで1時間もかからないような気がしました。
最近では、IoTでラズパイが使われているようです。私もそろそろIoTデビューをしてみたいですが、アイディアがなかなかでてこないこととハード関係が苦手なのでがあり、気持ちが進みません。
Amazon Dash Buttonも買ったので簡単な通知ボタン的なものでも作ってみたいです。

後に初期設定について解説できればと思います。

参考サイト

Raspberry Pi 3 MODEL B 【RS正規流通品】

Raspberry Pi 3 MODEL B 【RS正規流通品】

シンプルな感じがイイ！Knotが結構良さそう

ガジェット

Knot（ノット）がいい感じ　

　最近、ウェアラブルデバイスか時計がほしいと思っていろいろググっているところです。調べているうちにKnot（ノット）という時計メーカーを見つけました。 結構いい感じなのでまとめてみました。

国産なのがいい感じ！

　Knotは日本のメーカーで日本国内で生産されています。 また、KnotならではのこだわりがWebサイトにて記載されていました。

以下引用です

Knotのプロジェクトは、海外生産へシフトした、日本の時計製造業を再定義し、優秀な技術者や素材が集まる日本国内の工場で行うことから始まりました。デザイン、設計、部品の調達、組み立てから販売まで、その全てに自分たちが全て携わっています。中間業者を挟まないことで、コストの高い高品質な材料を使用しても、１万円台から提供することができます。

まさに「匠」って感じがしますね。また、Webサイトから伝わるオシャレ感が筆者にはたまらないです。

実店舗の展開とサポートの充実

Knotはネットでも購入が可能ですが、ちゃんと実店舗での展開も図っています 2017年8月9日現在で以下の店舗が存在します - 吉祥寺 - 表参道 - 心斎橋 - 台北

海外にも展開しているんですね〜

サービスとしては以下のものがあります

  • 電池交換サービス
  • 磁気脱サービス
    • 上記でも記載しましたが、磁気によるずれを修正してくれるみたいです。
  • メッシュベルト洗浄(一部店舗のみ)
  • 簡易研磨サービス

デザインの充実さ

　一番の魅力といっても過言ではないと思います。Knotではカスタムオーダーが可能で文字盤＋ベルトの組み合わせで注文することができます。 また、ベルトも種類がたくさんあり、メッシュやレザー、ナイロンなどおよそ12種類のベルトが選べます。
　実際に公式のWebサイトでもパーツを組み合わせながら選ぶことができます。この自分だけの時計を作っている感じもたまりませんね

価格の安さ

　Knotの注目ポイントの一つとしてデザインもすばらしいことですが、価格の安さもあります。ピンきりではありますが、安いものでは2万円をきる価格で文字盤とベルトを注文することが可能です。この価格で提供できるのもKnotがすべての工程に携わることでこの安さを提供することが可能だそうです。
　この安さなのでカップルでペアウォッチとして購入されるお客様も多いようです。
　学生としてもこの安さはいいですし、ベルトを交換するだけで別の時計に早変わりする点もいいですね。

まとめ

　価格とデザインで時計を検討していましたが、Knotは結構自分の中で評価が高いです。安さとデザインの両立とはこのことかと思っています。Knot自体がクラウドファンディングから登場した商品だということにも驚いております。
　これから購入を検討したいと思います。

　

RailsでOpenStreetMapを使ってみる

Rails 開発

概要

Railsで地点を登録する時、緯度経度を入力させるのはUX的にもどうかと思う。 そこで、マップから地点を登録することができればイイ感じになりそう。 しかし、Google Mapでは、API制限などがあるため、今後、利用者が増大した時めんどくさいことになる。 だったら、無料で使える地図を使えばいいじゃんとなるので、今回はOpenStreetMapを使って実装してみる。

パーフェクト Ruby on Rails

パーフェクト Ruby on Rails

実装

今回は登録画面で地図を表示し、クリックした地点にマーカーを立てて、緯度経度を取得する。

事前準備

  • scaffoldで簡単に登録画面等を準備する。モデル生成時に緯度経度を忘れないようにする。
  • rails sでサーバーが起動できていることを確認する。
  • leaflet - Downloadから安定版をダウンロードする。

本編

上記のサイトからダウンロードしたものを下記のディレクトリに移動する。 - leaflet.js => /vendor/assets/javascripts - leaflet.css => /vendor/assets/stylesheets - Imageについては/vendor/assets/にimagesディレクトリを作成し、中身を移動する。

スクリプトファイルとスタイルシートの読み込み

//= require jquery
//= require jquery_ujs
# 以下を追加
//= require leaflet                         
*= require_self
# 以下を追加
*= require leaflet
*= require_tree .

地図を表示する

<div id="map"></div>
  <style type="text/css">
    #map {
      height:400px;
    }
  </style>
  <script type="text/javascript">
        L.Icon.Default.imagePath = "/assets";
        var map = L.map('map').setView([39.099388, 141.079960],17);
        var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
        var osmAttrib = "Map data OpenstreetMap contributors";
        L.tileLayer(osmUrl,{
          attribution: osmAttrib,
          maxZoom: 20,
        }).addTo(map);

  </script>

ここまで、終わったら実際に登録画面で地図が表示されるか確認する。 まだ、マーカーを立てることや緯度経度の取得はできない。

クリックした地点にマーカを設置＆緯度経度の取得

続きに入力していく

        var marker = L.marker([39.099388, 141.079960]).addTo(map);

        map.on("click",function(e){
          marker.setLatLng(e.latlng);
          $('#map_latitude').val(e.latlng.lat);
          $('#map_longitude').val(e.latlng.lng);
        });

このとき、フォーム中に緯度経度表示欄があり、表示させたい場合は、フォームにidを設定する必要がある。 下記は例であるが、:id =>‘id名 'でidを割り振ることができる。

    <div class="field">
    <%= f.label :latitude %><br>
    <%= f.text_field :latitude, :id => 'map_latitude'%>
  </div>
  <div class="field">
    <%= f.label :longitude %><br>
    <%= f.text_field :longitude, :id => 'map_longitude'%>
  </div>

まとめ

いろいろ怪しい部分はありますが、今回はとりあえずこの辺で

参考サイト