2020-07-05

スマートロック SESAME(セサミ) のAPIをGoogle Apps Scriptから簡単に利用する方法（施錠・解錠のほかWebhookを使用したログ記録など）

1年ぶりの記事です。前回書いた記事をすっかり忘れてしまっていたので、ぜひともどなたかCloud Brainの開発をお願いしたいと思います。

さてさてわたしの運営していますコワーキングスペース茅場町 Co-Edoでは、複数のスマートロックを利用しています。そのうちのひとつが SESAME(セサミ) という CANDY HOUSE, Inc. の製品です。（早朝の利用時などもあるセミナールーム茅場町 Co-Edo 3F 貸会議室にて利用しています）

SESAMEの良いところは APIを使用し自分にあった使い方を構築できるところ。これまで導入してからまったくAPIを活用してなかったのですが、Google Apps Script単体でAPIを使用したりWebhookを受けてログ記録等をしたりできることに（遅まきながら）気づいたので開発してみました。

わたしはSESAME miniではなく旧製品を使用していますが、どちらであっても同じようにAPIを利用可能です。
旧製品ユーザーにも優しくて嬉しい。

docs.candyhouse.co

開発したのはこちら。

Google Apps Script で簡単にAPIを扱うためのライブラリ
受付の iPad のホーム画面のアイコン（🔒と🔓）をタップし施錠と解錠をするショートカット
SESAMEの施錠・解錠の状態変更時のWebhookを利用しGoogle スプレッドシートにログを自動記録するGoogle Apps Script

今回の記事では、今後SESAMEのAPIを利用して開発したいと考えている方に向けて、どのように開発するかをお伝えしたいと思います。

以下、順番を一部変え、APIの利用方法から説明していきます。（さくっと使いたい人は途中で読み終えて構いません）

iPad（iPhone）から施錠・解錠するショートカットを作成し遠隔操作する方法

iOSにはショートカットという複数の操作を自動化するための機能（アプリ）が備わっています。 SESAMEのAPIを利用する際にはGETやPOSTができれば良いため、ショートカットを使ってAPIを使用することも可能です。

大まかな手順としては　①API利用の準備（API Keyの確認）　②デバイスIDの確認　③ショートカットの作成　となります。

API利用の準備（API Keyの確認）

当然ながらAPIを使用し操作ができるのは所有しているデバイス（SESAME）のみです。自分のアカウントに紐付いたデバイスを操作するための情報 API Key が必要になります。

CANDY HOUSE Dashboard にアクセスします。

普段使っている人は多くないかもしれませんが、このダッシュボードにはセサミの設置場所が地図になっていたり、使用状況がグラフで確認できたりということが可能です。

左側のメニューに「API設定」というのがありますのでクリックすると再度の認証が必要となります。「コードを送信する」をクリックし送られてくるメールに記載された検証コードを入力すると「API Settings」のページが表示されます。（このページを閉じるとあらためて同様の認証が必要になりますので、うかつに遷移しないように注意しましょう）

ここで取得する API Key を利用すると、誰でも自由にSESAMEを操作できるようになります。取り扱いには充分に注意し、誰でも目に触れる場所で表示されることのないようにしてください。

［ADD］ボタンをクリックすると、あらたに API Key が生成されます。画面に表示されるのは、この一度きりですので、忘れずにクリップボードにコピーし、自分だけが確認できる場所に記録しておきましょう。

忘れてしまった場合は、削除した上で、あらたに作成すれば大丈夫です。その時点で旧API Keyは使用できなくなりますので、すでに利用している場合は削除する必要はありません。

デバイスIDの確認（APIの基本的な使い方）

SESAMEのAPIドキュメントはとても分かりやすくできています。ターミナルから試しに利用する場合の手順も書いてありますので、そのとおりに実行してみましょう。

Macの方は ターミナル で、Windowsの方も Windows Terminal などを利用して実行できます

アカウントに紐付いたすべてのデバイスの一覧をJSONで取得（GET）するコマンドを使用します。

2020/07/01 現在のAPIバージョンは 3 で、API利用時のエンドポイントは次のとおりです。

https://api.candyhouse.co/public

これに続けてデバイス一覧を取得する次のコマンドを利用します。

/sesames

くっつけるとこんな感じです（GETで取得）

https://api.candyhouse.co/public/sesames

APIの扱いに慣れてない方も、以下同じように可能です。GETじゃなくてPOSTする場合もあります。

Authorizationヘッダーにさきほど取得した API Key をつけて送信します。（YOUR_AUTH_TOKEN を書き換えてください）

curl -H "Authorization: YOUR_AUTH_TOKEN"  https://api.candyhouse.co/public/sesames

次のように、配列で返されます（下記の例では2つのデバイスが同じアカウントで使用されていることになります）

  [
    {
      "device_id": "00000000-0000-0000-0000-000000000000",
      "serial": "ABC1234567",
      "nickname": "Front door"
    }, {
      "device_id": "00000000-0000-0000-0000-000000000001",
      "serial": "DEF7654321",
      "nickname": "Back door"
    }
  ]

この device_id が分かればOKです。

基本的なAPIの使い方を説明いたしますが、読み飛ばしていただいても構いません。たとえば次のように使用します。

/sesame/{device_id}

ふたたび curl コマンドで デバイスの状態の確認 をしてみましょう。

curl -H "Authorization: YOUR_AUTH_TOKEN" https://api.candyhouse.co/public/sesame/00000000-0000-0000-0000-000000000001

次のような結果が返されます。

  {
    "locked": true,
    "battery": 100,
    "responsive": true
  }

施錠・解錠などの操作 をする場合は、POSTをします。

curl -H "Authorization: YOUR_AUTH_TOKEN" -H "Content-Type: application/json" -X POST -d '{"command":"lock"}' https://api.candyhouse.co/public/sesame/00000000-0000-0000-0000-000000000001

POSTしているデータはJSONを文字列化（stringify）したものです。 lock unlock sync の3つのコマンドがあります。

sync はサーバー上のステータスを同期させるために利用するようですが、使いすぎるとバッテリーを消費するという注意書きがありました。

task_id というものが返されます。スマートロックは lock というのコマンドをPOSTした直後は、まだ成功したかどうかを確認することができません。時間をおいてから task_id を使って結果を取得する必要があります。

  {
    "task_id": "01234567-890a-bcde-f012-34567890abcd"
  }

実行結果の取得 は、次のようにGETできます。

curl -H "Authorization: YOUR_AUTH_TOKEN" https://api.candyhouse.co/public/action-result?task_id=01234567-890a-bcde-f012-34567890abcd

次のように返ってきます。もし status が processing だった場合は、もう少し時間をおく必要があります。

  {
    "status": "terminated",
    "successful": true
  }

ショートカットの作成

上述のとおり、施錠・解錠を行うには、APIのエンドポイントに対し、デバイスIDを指定したうえで lock/unlockコマンドをPOSTするだけです。

ショートカットアプリを開き ショートカットを作成 しましょう。

ショートカット自体については解説しませんので、次のような記事を参考にしてみてください。

tech-blog.rakus.co.jp

🔗 URL

まず URL で APIのURI を設定します。 00000000-0000-0000-0000-000000000001 の部分は、確認したデバイスID device_id に置き換えてください。

https://api.candyhouse.co/public/sesame/00000000-0000-0000-0000-000000000001

⬇️ URLの内容を取得

つぎに URLの内容を取得 で POST する内容を設定します。

詳細より「方法」は POST を選択します。

「ヘッダ」には Authorization キーに API Key を値（テキスト）として1組だけ入れます。

「本文を要求」には「JSON」形式で command キーに lock を値（テキスト）として1組だけ入れます。

適宜、アイコンを🔒マークなどにし、ホーム画面に追加すれば利用できます。

unlock も同様に（別々に）作成しておくと便利です。

うまく動かないときは

APIのURIが間違ってないか、デバイスIDやAPI Keyが間違ってないかなどを確認してみてください。ターミナルから curl コマンドで実行できているということであれば、ショートカットの設定に問題がある可能性が高いです。

Google Apps Script で API を使った操作をしたい場合は

次のWebhookを使う際に使用するライブラリを使うと、とても簡単に扱うことが可能です。

SESAMEの状態変更時のWebhookを利用しGoogle スプレッドシートにログを自動記録する

Webhookとは、何かしらのイベントをトリガー（きっかけ）にして、（今回であればSESAME側から）GETやPOSTでデータが飛んでくることを言います。 Webコールバックとか、HTTPプッシュAPIとかとも言われるようです。

SESAMEの場合は、アプリや物理鍵を使って施錠・解錠が行われたタイミングで ダッシュボードで指定するWebhookのURLに対し POST（もしくはGET）で飛んできます。

次のようなデータが得られます。

  {
    "device_id": "00000000-0000-0000-0000-000000000000",
    "locked": true
  }

マニュアルには state として locked / unlocked が返ってくると記載されていますが、実際は上記のような内容で返ってきています。
今回使用するライブラリを使用することで state のほか、 unlocked というキーを足し、次のような形式で取得できます。

  {
    "device_id": "00000000-0000-0000-0000-000000000000",
    "locked": true,
    "state": "locked",
    "unlocked": false
  }

今回使用する Google Apps Script のライブラリ

今回使用する SESAME-Google-Apps-Script-Library はこちらです。

github.com

わたし自身が Google Apps Script のライブラリの使用が初めてですので、（自分用のメモを兼ねて）基本的な利用方法から解説します。

新規の Google Apps Script を立ち上げる

新規の Google Apps Script の作成は、次の2通りがあります。

Googleドライブの［＋新規］ボタンよりその他 ‣→Google Apps Scriptの順で選択する
Google スプレッドシートのメニューのツール→スクリプトエディタの順で選択する

今回はログ記録のためにスプレッドシートを使用しますので、後者でよいでしょう。もしとくにスプレッドシートを使用しない場合や、複数のスプレッドシートを使用するなどの場合は、前者にしてもよいでしょう。

ライブラリを読み込む

メニューよりリソース→ライブラリ… を選択します。

Add a Library に APP ID MhGyvaXUzLZgSUv835brogVVeyfhHcqFG を入力し追加します。

利用するバージョン を最新版（1番大きな数字）にします。

Identifier の欄に任意の名称を入力します。とくに問題がなければ、下記の例と同様「Sesame」のまま使用してください。

API Key を［スクリプトのプロパティ］に保存する

API Key について、JavaScript ファイルの先頭で次のように記述することもできますが

var API_KEY = 'Su_2sdekmPfE...IvBgtPYSvv4wz_qrByQr7le_hh';

大切な情報ですので、なるべくコード内に埋め込まない運用をしたいところです。

メニューの ファイル → プロジェクトのプロパティ にある スクリプトのプロパティ に保存しておくと次のように取得可能です。

// API_KEYというキーで保存した場合の例
var apiKey = PropertiesService.getScriptProperties().getProperty("API_KEY");

ライブラリを試めしてみる

実際に利用できるか確認しましょう

function myFunction() {
  var apiKey = PropertiesService.getScriptProperties().getProperty("API_KEY");
  // 次のようにインスタンスを作成することができます
  var client = Sesame.create({apiKey: apiKey});
  var results = client.getDeviceList();
  console.log(results);
}

メニューの［リソース］の下くらいにある関数を選択 ▾からmyFunctionを選択し、ふたつ左にある▶︎をクリックし実行します。 ⌘＋Enterもしくはメニューの表示→ログで、デバイスIDdevice_idの確認が可能です。

Webhook 利用時に呼ばれる doPost() / doGet() を記述する

doPost()とdoGet()は、ウェブアプリケーションとして公開した際に呼ばれる特別な関数です。 SESAMEのWebhookはどちらで呼ぶことも可能です。

どちらか片方だけ記述すればOKですが、あとで困らないよう次のようにしておくこともできます。

function doGet(e) {
  log2sheet(e);
  return ContentService.createTextOutput("OK").setMimeType(ContentService.MimeType.TEXT);
}

function doPost(e) {
  return doGet(e);
}

function log2sheet(e) {
  // 後述
}

ログ用のシートを作成する

スプレッドシートのシート名をlogのように（任意で）変更しておきます。

1行目をタイトル行として、たとえばA1にtimestamp、B1にstate、C1にdeviceのようにしておきます。

メインのロジックを記述する

スプレッドシートのURLよりスプレッドシートIDをコピーし、コード内のSpreadSheet_ID _HEREの箇所を置き換えてください。

function log2sheet(e) {
  // parseWebhookContentsはインスタンス不要
  var contents = Sesame.parseWebhookContents(e);
  var sheet = SpreadsheetApp.openById('SpreadSheet_ID _HERE').getSheetByName('log');
  var lastRow = 1 + sheet.getDataRange().getLastRow();
  var timestamp = new Date();
  var data = [
    timestamp,
    contents.state,
    contents.device_id
  ]
  sheet.getRange(lastRow, 1, 1, data.length).setValues([data]);
}

期待した動作をしてくれるか確認するコードを書いてみましょう。

function testWebhook() {
  var e = {"contextPath":"","parameter":{},"queryString":"","postData":{"contents":"{\"device_id\": \"dummy-id\", \"locked\": true}","length":69,"name":"postData","type":"application/json"},"parameters":{},"contentLength":69};
  var contents = Sesame.parseWebhookContents(e);
  log2sheet(e);
  console.log(contents.state); // locked
}

上述の方法と同様に実行してみてください。
「log」シートに locked と書かれたデータが入っていれば成功です。

実行の許可を求められたら許可をしてください。
「このアプリは確認されていません」と出たら、［詳細］というリンクを開く必要があります。

ウェブアプリケーションとして公開する

Webhookのデータを受け取るため、Google Apps Script を外部に公開しましょう。

メニューの公開→ウェブアプリケーションとして導入　…を選択します。

プロジェクトのバージョン を新規作成にし、適宜コメントを入れます。

次のユーザーとしてアプリケーションを実行 を自分にします。

アプリケーションにアクセスできるユーザー を、外部（SESAME）からアクセスできるよう全員（匿名ユーザを含む）にします。

導入をクリックすると、現在のウェブアプリケーションのURLが表示されるのでクリップボードにコピーしましょう。

注意事項

公開するとURLにGETやPOSTをすることで doGet() や doPost() が外部から呼び出せるようになるのですが、コードを編集した場合は次の点に注意が必要です。

再度公開→ウェブアプリケーションとして導入　…を行い、バージョンを新規作成する
ウェブアプリケーションのURLが変わる場合がある

バージョンをあげないと、いつまで経ってもWebhookは古いコードのほうを実行してしまいます。

SESAMEのダッシュボードにWebhook用のURLを登録

CANDY HOUSE Dashboard にアクセスします。

左側のメニューの［API設定］を開き「コードを送信する」をクリックし送られてくるメールの検証コードを入力するとページが表示されます。

Webhookの［Edit］ボタンをクリックし、URLをペーストし追加します。（GETとPOSTはどちらでも構いません）

動作確認

上述のショートカットを起動してみて、実行後スプレッドシートに記入されるかを確認してみてください。

Webhookが飛んでこない場合

じつはわたしも、自分のアプリで開閉したときや、物理鍵で開閉したときなど、一部のケースでWebhookが飛んでこなくて困っています。

情報求む。

Google Apps Script で簡単にSESAMEのAPIを扱うためのライブラリを公開

今回の開発時にはじめてGoogle Apps Script のライブラリというものを知ったので、SESAME APIsにアクセスするためのライブラリを作ろうと思い立ちました。

ライブラリにしておくメリットとしては、APIの仕様変更時にライブラリの修正のみで対応が可能になることや、複数のアプリケーションで使い回す際に便利といったところでしょうか。

また、このブログ記事を書いていることもそうですが、1年以上経ってコードを見直す際にすっかり記憶が抜け落ちていても対応がしやすくなります。経験的にこのあたりは、期待した動作をしてくれた後ほっとしている時間が長くなればなるほど書くのが面倒になってくるので、記憶が鮮明なうちに勢いで書いてしまうほうが良いですね。

ライブラリの設計

今回達成したかったのはおもに次のような点です。

メソッド名をみれば何ができるか想像がつくようにしたい
引数をみれば何を渡せばよいか想像がつくようにしたい
実行することが明白な手順が複数あれば可能な限り一度に実行できるようにしたい
Webhook利用時にどんな形式のデータが飛んでくるか分かっていなくても扱えるようにしたい
API Reference を読まずに開発に入れるようにしたい

ライブラリの開発時に参考にした情報

officeforest.org

Google Apps Script のライブラリについてひととおり理解できます。

qiita.com

コード自体が参考になりました。

qiita.com

同じ方の記事。いろいろTipsが載っています。

www.pnkts.net

GCPアカウントが必要なったという情報があったので、そのあたりも画像になっていて理解しやすかったです。

google-apps-script.net

同じくGCPアカウントが必要なったという情報があったので、そのあたりも画像になっていて理解しやすかったです。

記事のとおりに記述するだけでお手軽にライブラリ化ができますので、再利用しやすくするためにもぜひ活用していきたいですね。

さいごに

扱いやすいAPIがあってとても便利に活用できそうです。

今後はGoogle スプレッドシートやGoogleカレンダーの情報をもとに、時間になったらセミナールームの解錠が行われるような機能を作っていきたいと思っています。いろんな可能性が広がって嬉しい🙂

みなさんもぜひ活用していきましょうね。

2019-07-25

脳の中の記憶をクラウドに保存、自動的に同期し、自由に消せるWebアプリ

気づいたら、4年ぶりの更新。

いよいよサービスリリースの日が近づいてきた。ここ数年、毎日のように開発してきた新サービスだ。クローズドβのテストはこれまで3回行ってきた。当初は様々な問題が噴出したが、結果的に想定していなかったバグも露呈したことでほぼ理想通りのものができあがった。

簡単に言えば、あなたの頭の中の記憶をクラウドに保存し（そしてそれは自動的に同期され）、いつでも自由に記憶の入れ替えが可能になる新サービスだ。まずはWebアプリとしてリリースし、今後はiOS, Android アプリでも使えるようにしていきたいと思っている。このサービスがリリースされれば、必要最低限のことだけ記憶しておき、必要に応じて瞬時にクラウドから取り出すことが可能になるため、僕のようにあまり記憶力に自信がないというひとも安心して仕事をすることができるし、私生活でも活用できるだろう。もちろん高齢者の記憶力低下の問題にも有効だ。高齢化社会になっても現役時代に得た知見を活用して社会に貢献するひとが増えると期待している。

開発時にもっとも苦労したのが、記憶を自由に消せるという機能。大きなトラウマとなっている過去を抱えるひとも、その元となる記憶自体を抹消できるため、過去にとらわれずに平穏に生活を送っていけるようになる。苦労した甲斐あって、消したい記憶をクラウド上にだけ残しておくことも、クラウドも含めて完全に（不可逆に）抹消することも可能になった。バージョン管理システムのように複数の記憶をタイムマシンで遡れる機能も用意したかったが、これ以上リリースを先延ばしにするのは得策ではないと考え、割り切った。

このサービスは例えば次のようなひとにおすすめ。

ひとの顔を覚えられない

ひとの顔を覚えるのが苦手という人も少なくないだろう。わたしもそう。そういうひとにはとくにおすすめである。ひとの顔と名前だけを 実脳に 残しておき、当人とのエピソードは クラウドに あげておく。出会った瞬間クラウドにエピソードデータをとりにいっても平均600msで「思い出せる」

忘れ物が多い

こんなことがあった。外出時に財布がないことに気づき、慌ててクレジットカードを止めた後……部屋からひょっこり財布が出てきた。財布を置くときは「ここに置いたことを忘れないようにしよう」とちゃんと記憶したはずなのに…

細かいどうでも良いことを覚えているのに、肝心なことを覚えていないというケースでも、大抵の場合、記憶自体はしていて思い出せないケースがほとんど。一定期間経過した記憶のうち重要でないものを自動的にクラウドにあげ、同時に記憶から消しておくことで、直近の記憶が思い出しやすくなるだろう。

嫌な記憶がすぐにフラッシュバックする

何年も前の記憶に苦しめられている人も多いのではないだろうか。忘れたいと思っても忘れられるものではなく、ふとしたときに、突然脳裏をよぎる。思わず声が出てしまうことも。このサービスで記憶を抹消すれば、そんな思いとは無縁になる。

そんな夢のようなサービスがもうすぐローンチできる。

さあ、週明け、いよいよ世界があっと驚くサービスのニュースリリースの配信だ。きょうになって小さなバグを見つけたので明朝直さねば。最近は夜遅くまで開発していたので、きょうくらい12時前に寝ようと思う。

f:id:mon_tinian:20190725193205j:plain — Cloud Brain

と、ここまで書いたブログの下書きをさきほど見つけた。

書いたのはちょうど一年前のようだ。まったく記憶にない。

ほんとうにこんな荒唐無稽なサービスを開発し、リリース寸前までいっていたのだろうか。にわかには信じがたい。もちろんコードも存在しない。当時使っていたMacBookにも、もちろんGitHub（設計図共有サイト）にも見当たらない。どういうアルゴリズムで実装したのか見当もつかない。「脳の中の記憶をクラウドに自動的に同期し、自由に消せる」Webサービス……そんなもの本当に存在したのだろうか？

2014-04-15

SNSにおける「『オラのことかー（怒）』問題」について

おっすオラ悟空（嘘）というわけで今回もCo-Edoブログ朝会で書いています。

FacebookやTwitterという、気軽に自分の気持や意見を吐露できる機会ができて久しいですが。たまに面倒なのが、つぶやいたことに対して、その対象者じゃない人が自分のことと勘違いしてキレるというケース。

「いやそれあなたに対して言ったわけじゃないんですけど」とか「まあたしかにあなたも当てはまるかもしれませんが、なんというか一般論として言ったにすぎなくて、別にあなただけのためにつぶやいたわけではなくてね」とか。

ドラゴンボールの有名なシーンで以下のようなものがありますよね。

f:id:mon_tinian:20140415093835j:plain

フリーザにはむかう悟空に対し「いいだろう!!!こんどはこっぱみじんにしてやる。あの地球人のように!!!!」と言ったところ、クリリンのことを指した発言にもかかわらず自分に対しての発言と勘違いしてキレるシーン。

SNSではよくある光景ですね。

たとえば以下のように
（記載例はフィクションでわたしの意見とは一切関係ないです）

私「あまり親しくない人からイベントの招待が来たんだけど、送られても困るしやめてほしい」
友「（このあいだ招待送ったけど、さいきん会ってないし・・・）オラのことか・・・オラのことかー！！！（怒）」
私（違う。あなたの話じゃない。むしろどちらかというと親しい部類に入っている）

もうひとつ

私「友だち申請の前にプロフィール欄のコメント読めって書いてる人いるけど、『友達かも？』から追加するのにそんなところ読まないから無駄だよね」
友「（これは完全に・・・）オラのことか・・・オラのことかー！！！（怒）」
私（今見たらたしかにあなたもそうみたいだけど、べつにあなたにだけ言ったわけじゃなくてさ・・・）

（繰り返しますが、記載例はフィクションでわたしの意見とは一切関係ないです）

マイクロブログっていうのは気軽に思ったことをつぶやけるのが魅力だったりするのに、いちいちポストする前に「この表現だと自分のことだと勘違いしちゃう人いるかも・・・」なんてことを心配しなくちゃいけなくて。
結局、面倒になってポストしないなんてことがありますよね。

ほかにも、まったく関係ないところから「オラのことか・・・オラのことかー！！！（怒）」とコメントついてて、無用な敵を増やしてしまっているひとも見かけます。ご愁傷様ですとしか言えません。

でも正直面倒くさい

基本的には投稿時に十分すぎるほど気を使いますが、iPhoneとかからなにも考えずつぶやくときもあるし、正直いろいろ考えるの面倒です。あとまったく見当違いに「オラのことかー！！！（怒）」と思われてフレンドが減っていくというのも辛いです。

反対の視点から

ほかのひとの投稿に対し、あきらかにそれが自分宛てではなくても「これはもしかしてオラのことか・・・？」と思ってしまったり。

この問題を何と呼べば良いですかね

ずっとこの問題についてなんと呼んだらいいかと思っていまして。
とりあえず暫定的に『オラのことかー（怒）問題』 と読んでみたいと思います。

オラに対処法を教えてくれ

いやまあ気にしなくて良いんですけどね。みなさんどうしてるんですかね。
誰か良い解決策（対処法）を教えてください。

この記事への短縮URL: http://bit.ly/oranokotoka

2014-03-18

SSHの公開鍵を作成しGithubに登録する手順

当記事の内容は以下のページとほぼ同様となります。

Generating SSH Keys · GitHub Help

パートナーというかクライアントの企業にgitを勧めて、2社ほどsvnから移行してもらったことのある @mon_sat です。

Githubのヘルプには有益なページが多いですが、上記のページもそのひとつですね。

最近黒い画面を使わずにgitを使う系の記事や勉強会が増えてきまして、ただ1点、秘密鍵やら公開鍵やらのところはそうはいかない場合もあるのかと思います。

というわけでSSHの公開鍵を作成しGithubに登録する手順を上記のwebページをもとに（日本語で）まとめてみました。

基本的な解説

この記事で記載の手順がなぜ必要か理解していない方のために、簡単な説明をいたします。
（理解している方は、読み飛ばしていただいて構いません）

秘密鍵・公開鍵とは

秘密鍵・公開鍵とは、鍵交換方式の認証のために使う2つのファイル（データ）です。

f:id:mon_tinian:20140317183512p:plain

秘密鍵のファイルはあなただけしか見られないように扱い、公開鍵のファイルは認証を行う相手側（サーバーやWebサイト等。Githubもそのひとつ）に預けます。

秘密鍵と公開鍵はペアになっていて、秘密鍵が存在するマシンのみからしか、Webサイト（やサーバー）等を利用できません。（IDパスワードの代わりとなり、Webサイトが「あなたであること」を確認するのです）

複数のマシンを利用する場合はそれぞれで鍵ファイルを作成し、複数の公開鍵を預けることになります。
秘密鍵と公開鍵は対になっています。

git（≠Github）は、おもにsshを使用して他サーバー上のリモートリポジトリとやりとりします。
sshの通信では、鍵交換方式による認証によりIDパスワードよりもセキュアな接続が可能です。

基本的な手順

おおむね以下のような流れになります

秘密鍵・公開鍵を作成する
公開鍵をGithubに預ける

公開鍵の有無を確認する

Macのかたはターミナルというアプリを、WindowsのかたはGit Bashをひらいてください。

以下のコマンドを入力します。

（念のため補足。先頭の $ はコマンドではありません。それ以降が実行するべきコマンドになります）

$ ls ~/.ssh

ここで以下のようなふたつのファイルが存在した場合は、すでに秘密鍵・公開鍵は作成されていますので、次の作業は飛ばしていただいて問題ありません。

id_rsa      id_rsa.pub

なお .pub という拡張子のファイルが公開鍵のファイルです。

秘密鍵・公開鍵のペアを生成する

$ ssh-keygen -t rsa -C "your_email@example.com"

メールアドレスは自分のメアドに変更してください（例： ssh-keygen -t rsa -C "suzuki@example.jp" ）

実行すると以下の3つの入力を求められますが、すべて Enter(return) で実用上構いません。

鍵ファイルを保存するフォルダ
パスフレーズ
パスフレーズ（確認用）

もしパスフレーズを設定した場合は以下のコマンドを実行し、パスフレーズの入力を省略する設定が可能です。

$ ssh-add ~/.ssh/id_rsa

公開鍵をGithubに登録する

公開鍵の内容をクリップボードにコピーします

Macの場合

$ pbcopy < ~/.ssh/id_rsa.pub

Windows(Git Bash)の場合

$ clip < ~/.ssh/id_rsa.pub

Githubに登録する

SSH Keysの設定ページ

f:id:mon_tinian:20140317213244p:plain

右上の工具アイコンより Account Settings のページを開きます
左側のメニューより SSH Keys のページを開きます
赤い下線の位置にある [Add SSH Key] のボタンをクリック

公開鍵を登録する

f:id:mon_tinian:20140317213538p:plain

Titleは任意の名称を入力（どのPCの鍵かを区別するための名称など：MacBook Airなど）
Keyの入力欄でクリップボードの内容を Paste する（⌘+v / Ctrl+v等）
Add Key ボタンをクリック

試しに接続してみる

以上で終了ですが
初回のみ相手のサーバーを確認する作業がありますので、いちど試しに接続してみるとよいでしょう。

$ ssh -T git@github.com

つぎのように表示されたら、落ち着いて yes と入力してください

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

接続に成功すると、つぎのようなメッセージになるはずです

Hi username! You've successfully authenticated, but GitHub does not
provide shell access.

これで自分のリポジトリに自由にアクセスできるようになりました

Pushしたり Pullしたりご自由にどうぞ！

（おまけ）@mon_satのボコボコ相談室

（相談内容）わたしは黒い画面の扱いにいつまでたっても慣れません。プロのWeb製作者として、そろそろ黒い画面くらい使えるようになりたいのですがどうしたら良いでしょうか？

黒い画面が難しく思えるのは、ターミナルのデフォルトは白い画面なのに、自分で黒くして腫れ物にさわるような対応してるからじゃ！

じゃあの。

2014-03-11

Windows 8.1が驚異の普及率となっている件（もしかしたら知らない間にあなたも使っているかも）

昨日こんな記事を読みました。

Microsoftは9日、Windows XP向けの優先度の高い更新プログラムとして、「Windows XPのサポート終了のお知らせ（KB2934207）」をWindows Update経由で配信開始した。この更新プログラムは、Windows XPのサポート期間が4月8日（日本時間では4月9日）に終了することをユーザーに通知することが目的。インストールすると、「Windows XPのサポートは、2014年4月8日に終了します。詳細については、こちらをクリックしてください。」とのメッセージが表示されるようになる。リンクをクリックすると、サポート終了についての説明ページにジャンプする。

MSが“Windows XP終了のお知らせ”、Windows Updateで拡散開始、残り1カ月に -INTERNET Watch

そのサイトにいくと、記事のしたにWindows XP のサポート終了 - Microsoft Windowsというリンクがあります。

f:id:mon_tinian:20140311083301p:plain

さらにそのページをよくみると今使っている Windows のバージョンは何ですか。というリンクがあり、そのページでOSのバージョンを調べることができるようです。

というわけでわたしも調べてみました。

f:id:mon_tinian:20140311083633p:plain

ほっ！Windows 8.1 でした！安心ですね！

コワーキングスペースに集うひとたちにも調べてもらった

この記事はブログ朝会のある火曜日に書いています。集まっているのはこんな人たち。

f:id:mon_tinian:20140311085725j:plain

Win7ユーザーひとりを除いて、みんなWindows 8.1 でした！さすがですね！

注意したいのは、みんな自分のOSはWindowsじゃないと思っているということだ。各自「自分が使っていると思い込んでいたOS」は以下のとおり。

f:id:mon_tinian:20140311085634p:plain

そして実際は以下のとおり

f:id:mon_tinian:20140312165622p:plain

（修正：グラフに不備がありひとり消された疑惑が出ていたみたいですが、ちゃんと生きています）

繰り返します。 ひとりを除いて、みんなWindows 8.1 でした（普及率は80%）

もしかしたらキミも勘違いしているかも

というわけで、あなたもいますぐチェックしてみよう！
（キミのスマートフォンもWindowsかもしれませんよ）

今使っている Windows のバージョンを調べる - Microsoft

Windows XP Home 追加ライセンスパックSP2

出版社/メーカー: マイクロソフト
発売日: 2004/10/22
メディア: CD-ROM
クリック: 5回
この商品を含むブログ (1件) を見る

↑↑↑（Amazonのリンクを貼ってみた）

ちなみに Windows XP の場合

f:id:mon_tinian:20140311140228p:plain

ちゃんと判定されました（笑）

2014-03-04

.editorconfigが便利すぎて失禁した

こんにちは。@mon_satです。

開発していてたまに困るのは、プロジェクトによってコーディングルールがばらばらで「インデントがタブ文字か半角空白か」などいろいろ統一されていないことです。

最近はIntelliJ IDEAで作業することが増えてきました。エディタ側で自動的に設定しているコードスタイルにしてくれるのは大変ありがたいのですが、少し設定が面倒ともいえます。

また、プロジェクトメンバー間で別々のエディタを使っていても同じコーディング規約を適用したいものです。

CakePHP3.0のリポジトリを見ていて気づいたのが .editorconfig というファイルの存在で、検索して見つけたのは下記のWebサイト。

サイトのTOPページに載っているサンプルの .editorconfig の中身は以下のとおり。

これを見ているだけでもワクワクしてきませんか！？

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[*.js]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files package.json and .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

IntelliJ IDEA での使用方法

上述のサイトに対応しているエディタが一覧されています。

VimやEmacsやSublimeTextをはじめ、JetBrains系のエディタでももちろん使用可能です。

Pluginをダウンロード

まずEditorConfig Pluginをダウンロードしインストールします。

f:id:mon_tinian:20140301123652p:plain

.editorconfig ファイルを記述

プロジェクトのrootフォルダ等に .editorconfig を作成し、そこにコーディングスタイルを記述しましょう。

書き方はこちらを参照してください

おもなものは以下のとおりです。

root

これは、プロジェクトのルートディレクトリの .editorconfig を示す記述方法です。

root = true

EditorConfig Pluginは、なんらかのファイルをひらいたとき、同じフォルダおよび上位階層にある .editorconfig を探します。

その際 .editorconfig 内に以下の記述があると、それ以上上位のフォルダを検索しません。

indent_style, indent_size, tab_width

インデントの方式を指定します。

以下は半角空白2つの例です。

indent_style = space
indent_size = 2

indent_style は、 "tab" or "space" が指定可能です。

tabの場合は以下のように指定します。 tab_widthの初期値はindent_sizeの値とのことで省略可能のようです。

indent_style = tab
tab_width = 4

end_of_line, charset, insert_final_newline, trim_trailing_whitespace

改行コード（"lf" or "cr" or "crlf"）、文字コード、ファイル末尾の空行の有無、行末の空白の削除

[*]
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace  = true

その他

ファイルの種類により別にする場合は下記のようになります。

[*]
indent_style = space
indent_size = 4

[*.html]
indent_style = tab

というわけでリポジトリには .editorconfig を含めよう！

たとえばCakePHPのプロジェクトのリポジトリのルートは、以下のような感じが良さそうですね

files	内容
.git	.gitフォルダ
.gitignore	バージョン管理対象外のファイルの設定
.editorconfig	エディタの設定
app	アプリケーションのディレクトリ
lib	CakePHPのコアファイル等
Plugin	CakePHPのプラグイン
vendor	サードパーティ製のライブラリ等
vagrant	vagrantで使用するファイル郡
composer.json	composerの設定
README.md	アプリケーションの説明等

お詫び

いきおいでタイトルに「便利すぎて失禁した」とつけてしまいましたが、正確には失禁までにはいたりませんでした。

心よりお詫び申し上げます。

2014-02-18

【解答集できました】どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題）

技術系の記事でも、ややふざけ気味のものについては、はてなブログで書くという習慣がついてきました。（今回はマジメにいきますよ）

というわけで前回の記事「どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題）」がおかげさまで好評で、いくつか反響もいただいているので、そちらをご紹介していきたいと思います。

もしCSSを書くのが好きな方で上記の記事を未読の方は、先に問題を解いてみてくださいね。

いただいた解答例

はてぶやtwitterで解答をいただいたものについて紹介していきますね。

捕捉できていない人がもしいたらごめんなさいー

あとわたし別にCSSが得意というわけではありませんので、CSSてきなツッコミについてはお腹いっぱいですのでご容赦ください。 ~~nth-child()なんて実際に使ったことなんて無いし~~

瞬希 (id:syunki-gt) さん

「CSSでFizzBuzz問題」への回答案 - 灰色の棚

まずはすぐに解答記事を書いてくれた瞬希 (id:syunki-gt)さんです。

もし、載せたらまずいという時は、ご連絡ください。撤去します。コードを載せることに問題は発生しにくいかなと思ったけど、ちょっと不安なので。

という気遣いもいただきました。 ~~が、こんなネタ記事に気遣いは不要です~~

このCSS FizzBuzz問題のポイントは概ね以下の点でしょう。

どのようにして3(5)の倍数および15の倍数の書かれた要素を指定するか
どのようにして Fizz / Buzz および FizzBuzz を書き出すか
どのようにしてあらかじめ書かれている~~邪魔な~~数字を消し、そしてそれに対する影響をどう回避するか

1については li:nth-child を使用するか li:nth-of-type を使用するかのどちらかでしょう。 ~~nth-of-typeって知りませんでしたけどね~~

2についても :before / :after 擬似要素と content プロパティを指定して書きだすというのが常套手段と思われます。それ以外の方法はあるんでしょうかね？？

その他の点に注目して各解答を見て勉強していきたいと思います。実際のコードは記事の方でご確認ください。

瞬希 (id:syunki-gt)さんの記事の解答例の場合、それぞれ以下のように対応していますね

nth-child
:after 擬似要素と content プロパティ
visibility: hidden;

visibility: hidden; にするとリストの•が消えてしまうため、display: list-item; position: absolute; top: 0; として回避しています。（なお ul#main li {position: relative;} がないと、Fizz / Buzz に置き換わる行の前に空行が書かれるようです）

わたしが試した方法は末尾に記載しますが、リストマークを表示できないため、このやり方のほうが良いですね！いきなり100点満点の解答がでてとてもびっくりです。

JF(id:jeffreyfrancesco) さん

はてぶコメントより

:nth-child()、::before(afterでもいいけど)、position、background-colorくらいでいけた / 最初から数字入ってない方がもっと楽にできそうだ / やり直したら:nth-child()、::before、display、overflow、heightでもう少しスマートにいけた

わたし、自分で「はてブのコメントで使用する技術要素を書いて」と言っておきながら、プロパティだけを見てもどうやって実装したのか分かりませんでした（´・ω・｀）

li {list-style-type: none;} で良い場合は、以下でいけるようです。

li:nth-child(3n), li:nth-child(5n) {
    height: 1em;
    overflow: hidden;
}
li:nth-child(3n):before, li:nth-child(5n):before {
    display: list-item;
}

もしくは後述するsmzkさんのfizz_buzz.htmlと同様の実装かもしれません。

ながたに(id:Nagatani)さん

:nth-child(15n)を使わずに::before,::afterで実装する方法を考えたけどfont-sizeで文字消してる関係でリストのマーカーがうまく表示されずに妥協

~~これは完全にわたしの解答例と一緒ですね。（後述）~~

ちょっと違っていたようです。（CSSでFizzBuzzの解答集に載ってしまったので…… - 水に溶けるドキュメント）

もともとFizzBuzzって15の倍数の判定をどうするかで2つの解答があると思っていまして

単純な if 文でやるばあい15の倍数を先に判定する
3の倍数と5の倍数のみ判定し、15の倍数のときは両者を利用する（文字列結合等）

という感じです。

なるべくなら後者でやりたいというのが人情というものではありませんか？（個人の感想です）

というわけでわたしもこの実装です。が、この場合どうしてもリストマークが消えてしまいます。どなたか消えない方法をご存じの方はぜひ。

コルクことkoluku。 (id:koluku)さん ※ 2/18 10:53 追記

CSSでFizzBuzzをやってみた - koluku°

これSEO的に悪いんだよぁ…まぁCSSで書き換える時点でSEOに悪いですが。

とのことで、はい、そうですね。 FizzもBuzzも現時点ではどの検索エンジンも捕捉しないでしょうねw

面白いのは、数字の消し方ですね。

position: absolute; に background: #fff; を組み合わせて背景色で消しています。こんな消し方思いつきませんでした。なるほど。

id:macha-ru さん

【SASS】CSSのfizzbuzz問題をSassで解いてみたよ | Masablog

なんとSass使って解いてくれた方も！

おー。これは勉強になりますね！こんなに本格的に書いたことなかったので、使ってみたくなってきました。

CSSてきには基本的な実装で、visibilityで表示を制御していますね。

Daiki Noda(github:sys9kdr)さん

fizz_buzz.html

つづいてgistをforkしていただいたsys9kdrさんです。

表示の制御を font-size で行う実装ですね。

::after ということで、CSS3の擬似要素の記述法で記述されていますね。さすが、ちゃんとしています。

smzkさん

fizz_buzz.html

こちらもgistをforkしてくれました。

上述のJFさんとおなじく display overflow visible での実装ですが、 li { list-style-position: inside; } とすることでリストマークが消えないように工夫されていますね。

そもそも list-style-position を知らなかったのですが、応用的な使い方すぎて知っていてもこういう使い方に気づかなかったと思います。

mogya さん ※ 2/18 11:13 追記

Re:どうしてwebデザイナーに・・・CSSが書けないのか？

gistで解答していただきました。

3,5とかよりも、数字を隠してFizzBuzzを表示させるほうがよっぽどたいへんｗ

ですよねー。~~知ってましたけど。~~

FizzやBuzzでリストマークが消えるので ul {list-style-type: none;} が必要っぽいですね。

かなり早く解答していただいたようでありがとうございました！

mon_sat(github:monsat)

最後はわたしの考えた解答例。これだけみなさんいろんな実装をしていると載せるのが恥ずかしくなってきますが・・・

gist9044288

数字がない場合の実装例

はてぶのコメントで「数字が邪魔」っていう意見が散見され、おや？と思って調べたところ、次のような実装が可能ですね。ただし空のliタグは数字の個数分必要です。

#main {
    counter-reset: fizzbuzz;                                         
}
#main li {                                                           
    counter-increment: fizzbuzz;                                     
}
#main li::before {                                                   
    content: counter(fizzbuzz);                                      
}
#main li:nth-child(5n)::before {                                     
    content: "";                                                     
}
#main li:nth-child(3n)::before {                                     
    content: "Fizz";                                                 
}
#main li:nth-child(5n)::after {                                      
    content: "Buzz";                                                 
}

content｜CSS2.1 生成内容｜Web制作 W3G

twitterやはてぶでいただいた温かいコメント

nth-child と after, before あたりを使えばできそうな気がするけど、どうやって数字消そう… / “どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sa…” http://t.co/OSv7ROshPB
— ボッチ (@hotch_botch) 2014, 2月 7

数字が邪魔ですみません・・・

どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への教科書 / 別院） http://t.co/iBQeg0h4OW これを解いてみた。記事にしたけど、大丈夫かな？
— 瞬希 (@syunki) 2014, 2月 7

ありがとうございます！紹介させていただきました。

できました http://t.co/AwiII5F7d4 | どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の…" http://t.co/42y5FmN0sw
— げこたん (@GeckoTang) 2014, 2月 8

/*
HTMLいじっては、いけないので、1から100以外になることはない。
 */

たしかにそうですね・・・

わからんからしらべてみよーっと / “どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への教科書 / 別院）” http://t.co/kMLYWno84D
— ふとりんず (@bufferings) 2014, 2月 8

ぜひ当記事もご参考に！

自称 CSS 好きだけど、なんとなく検討はつく。家に帰って実装してみよ。 / “どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への…” http://t.co/7RoIX0JCwW
— mukaken (@mukaken) 2014, 2月 8

いかがでしたでしょうか？

CSS FizzBuzz問題、難しいのを期待していたら全然難しくなくて、にもかかわらずこのブログの方が答えを隠匿している感じなのが辛い。個人的にはリンクを踏めば答えぐらい見せてほしい。あとCSSの問題なのにhtmlの記述が長過ぎ。http://t.co/LyIDydm9Vj
— sys9kdr (@sys9kdr) 2014, 2月 8

回答ありがとうございましたー。ぜひ難しい問題作ってください！

文字列として要素に数字が書いてあるのに、それをCSSで消して別のものに置き換えるというのは、あまり筋の良いCSSじゃないと思った。＞どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） http://t.co/QE9bbxVtNc
— kobachi (@_kobachi) 2014, 2月 8

CSSでFizzBuzzすること自体が筋が良くな（略

出来たけどリストマーカーが消えちゃうんだよね(´・ω・`) http://t.co/1abkha9kaM RT @hatebu: どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） http://t.co/EvdqBkoxSE
— しんすく(け) ぱん。 (@snsk) 2014, 2月 8

わたしも消えました・・・

めんどくさいので、画像にします。 / “どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への教科書 / 別院）” http://t.co/K7HvTK7uXZ
— カナかな団首領（銀河辺境） (@shokodei) 2014, 2月 8

めんどうくさいので、JSに（略

わからんかった... RT @hatebu どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への教科書 / 別院） (51 users) http://t.co/kgXJP1g5PT
— 工藤マサヤ (@musicthanks) 2014, 2月 9

わたしもいろんな実装があるのを知って勉強になりましたので、ぜひこの記事をご参考に！

クズコンバレーも認知されつつあるらしい。。。ｗ　--＞　どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への教科書 / 別院） http://t.co/jKX3yK8vuZ
— Bujin HIRAI (@450bujin) 2014, 2月 10

大好きですw

できたった RT @Neko_Ghost: どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への教科書 / 別院） http://t.co/zVIMvxeyxE
— まりも（web専） (@marimo_web) 2014, 2月 13

素晴らしい！

id:burnworks 「IE6対応必須」って一言書くだけで無理ゲーにできるからぜひ（違）（id:mayuki そうですね）

IE6はbefore, after擬似要素対応してないですからねー。

id:mayuki id:burnworks むしろIE6-7はexpressionを使えば最短で書けます。

なるほど。存在すら忘れてましたw

id:asuka0801 css CSSでやりたくねえｗ

ですよねー

id:hadakadenkyu nth-of-type或いはnth-childとcontentでイケるがどうせなら数字もlist-style-type: decimalでやるべき。つか最も古くは2007年のを見つけたが。http://d.hatena.ne.jp/tomoya/20071013/1192308204

ふむふむ。勉強になります。既出なんですねー。

謝辞

みなさんお付き合いいただきありがとうございましたー。

f:id:mon_tinian:20140218092342j:plain

iPad（iPhone） から施錠・解錠するショートカットを作成し遠隔操作する方法