技術めいた何か

1人の大学生によるIT系の記事群

HHKBとMagicTrackPad用のドッキングステーションを自作した話

TL;DR

  • HHKB Professional2と初代Apple MagicTrackPad用のドッキングステーションを自作した
  • 木工ベース
  • 費用 5000円強
  • かかった時間は週末3時間×4日間くらい
  • 東急ハンズはいいぞ

完成図

膝に乗せて使ってます。

こんなん
f:id:atofaer:20180730020256j:plain

スペック

  • HHKBサイズのキーボードがおける
  • 初代Apple Magic TrackPadがはめ込める
  • ドッキングステーション兼パームレスト
  • 膝の上で使える
  • 折り畳める

効果効能

  • ディスプレイと距離を取れる
  • 椅子に深く腰をかけれる
  • 背もたれに寄りかかれる

きっかけ、いきさつ

長いので作業工程だけ知りたい人は飛ばしてください。

おたく、HHKBを買う

先輩が使っているのを見て厨二心がくすぐられました。
とはいえ、無刻印にするほど度胸がなかったので刻印ありを選択。
これが昨年の春でした。

ことはじめ

その後1年と3ヶ月はMacBook ProとHHKBを尊師スタイルで使っていました。
1年間強運用してみて尊師スタイルやノートPCの内蔵キーボードに次のデメリットを感じました。

  • 猫背になりがち
  • 目が内蔵ディスプレイに近くなりがち
    • 机に奥行きがない場合、外付けディスプレイも近くなりがち
  • 肩が凝る(気がする)

しんどい気持ちが高まったので、バイト中に隣の席の社員さんに相談したらキーボードを膝に載せればいいのではとアドバイスを貰いました。
ただ、HHKBだけを膝の上で運用をするとトラックパッドを操作するときにいちいち腕を持ち上げて卓上のMacBookを触る必要があって面倒だなと。
ならばどちらも膝の上に載せてしまえばいいことに気づいたわけです。

MagicTrackPadを買う

そこでメルカリで中古のMagic TrackPadを購入しました。
送料込みで¥4500。
MagicTrackPad2が現行機種のため型落ちです。なのでそこそこ安くなってます。

さっそくHHKBとMagicTrackPadだけを膝の上に乗せて運用してみました。
が、膝の上で運用開始5秒で物理クリックができない事に気が付きます。
最初は故障を疑ったのですが、これはMagicTrackPadの構造によるものだとわかりました。
MagicTrackPadのクリックは裏面のゴム足が接地面に押下されることでクリックを検知していたためでした。
つまり、そのまま膝の上にのせても僕の足は机ほど固くないので機能しないわけです。
(DIOならできるかもしれない...)
タップでクリックするように設定しているのでクリックだけなら問題ないのですが、
ドラッグできないのでウィンドウの移動ができず不便でした。

ドッキングステーションを探す

そのまま載せてもだめだと気づいた僕はドッキングステーションくらい売ってるだろと思って探し始めます。
次の要件で探しました。

  • MacBookみたいなキーボードとMagicTrackPadが縦に並ぶ配置
  • HHKBが載っかる

しかし残念ながら僕のググり力では満たす商品は見つかりませんでした。
↓みたいな純正キーボードと組み合わせるタイプのものやMagicTrackPadだけ板にはめるものなら見つかりましたが...

無いならつくる

無いならば作ろうということで作ってみることに

工具/材料一覧

使った材料と工具の一覧です。

使った工具

  • ドライバ(キリ付き)
  • 彫刻刀

購入したもの

買ったけど使わなかったもの

作業工程

1.素材の選択

何ベースで作るか決めます。
最初は3Dプリンタでやろうと思ったのですが、予算の都合でやめました。
モデリングの知識が無いのは勉強すればいいとして、3Dプリントの外注は意外と高かったため断念。

比較的加工が容易な木材ベースでやることに。
木材の中でも軽い桐の集成材を使うことにしました。

2.設計図を書く

おもむろに設計図を書きます。
次のような設計図を書きました。
後述の加工サービスで提出する用なので寸法がわかればいいくらいの雑さで書きました。 なお、パーツCは作成しませんでした。
f:id:atofaer:20180730015840j:plain f:id:atofaer:20180730015848j:plain

3.材料の購入

新宿駅前の東急ハンズ に材料を買いに行きました。  

新宿の東急ハンズにした理由は素材の加工サービスをやっているため。 2で書いた設計図を持ち込んで材料を加工してもらいました。 この時に、購入したものは次のとおりです。

加工サービスと合わせて4000円ほどなり。 加工については閉店ぎりぎりに駆け込んだので受け取りは翌日になりましたとさ。

4.受け取って運用してみる

塗装や蝶番の取り付けはまだでしたが、受け取り後運用してみました。

僕はトラックパッドの設定で"タップでクリック"(1本指で軽く触るだけでクリック扱いになるやつ)を有効にしています。
ハンズで受け取った段階では下の写真の用にMagicTrackPadがむき出しの状態でした。
また、MagicTrackPadはMacBook内臓のトラックパッドより大きいです。 よって、キータイプ時に手のひらがあたってしまい誤クリックが発生してしまう状態でした。

塗装後 f:id:atofaer:20180730013924j:plain

5.塗装、ヤスリがけ(1)

塗装をしました。 材料はすべて100均です。
かるくやすりがけをしてからセリアのメープル色水性ニスを塗りました。


塗装が終わって一見完成に見えますがこの時はまだ誤クリックの問題は解決していませんでした。

5.ソフトコルクシートで高さの差を埋める(失敗)

そこで購入したソフトコルクシートを下の用に切り取りMagicTrackPadをはめる面に重ねることでMagicTrackPadがむき出しになるのを防ごうとしました。
ソフトコルクシートはハンズの加工サービスでは受け付けてもらえなかったため、自分で加工することに。
ハンズの店員さんから包丁で切ると良いというアドバイスをうけて包丁で加工をしましたが、素人なので断面がダサいのと、 ソフトコルクシートとの組み合わせが予想以上にダサいので断念しました。

6.木材で差を埋める

ソフトコルクシートがだめだったので、木材で差を埋めることにします。
もう一度ハンズへ行き同じ木材を購入。

そして加工サービスを使って5で使った図面どおりに切ってもらいました。 日曜日の15時前くらいに言って受け取りは17時でした。

7. 塗装、ヤスリがけ(2)

追加で購入した分のヤスリがけと塗装をします。
使用時に腕が当たる部分は入念にヤスリがけをしました。

f:id:atofaer:20180730014226j:plain  

8. 接着

木工用ボンドで接着。
上の木材は誤クリックを防止とパームレストの役割を果たしてくれます。 下の木材はMagicTrackPadのゴム足ボタンを押してくれると期待。

9. MagicTrackPadをはめてみる

接着剤が乾いたところで実際にMagicTrackPadをはめてみます。

はまらなかったです。神。
仕方がないので彫刻刀で削りました。
彫刻刀を使うのが小学校以来で涙が出てきました。

f:id:atofaer:20180730014327j:plain

10. 塗装、ヤスリがけ(3)

3度目の正直です。
削った部分のヤスリがけと塗装をします。
これは仕方がないのですが、塗りムラがでてしまいました。

11. 蝶番取付

蝶番の取り付け。
下穴を開けてからネジ止め×12箇所 キリで桐に穴あけ〜 とか一人でつぶやいてました。 ギャグも作業もあまりおもしろくなかったです。

写真は端材で練習した後の僕です。
f:id:atofaer:20180730014810j:plain

12. 完成

完成。

折り畳めます。

トラックパッドはもちろん外せます。 f:id:atofaer:20180730014715j:plain

7/23に完成してから1週間くらい運用してるのですが、なかなかいいです。
改良点を上げるならトラックパッドが下の辺が木材との摩擦で少し押しづらいので、
下の辺が木材と接触しないように枠を縦方向に長く取ったほうがよかったかも。

感想

中学校卒業以来の初めてのDIYだったのですが、楽しかったです。
持ち運べるように設計したものの荷物になるので、家用、ラボ用、バイト用が欲しい。

MacOS+ChromeでAmazonの領収書や楽天カードの利用明細を印刷すると白紙になってしまう時の対処方法

他に書いてる人がいないっぽいので、あんま技術してないけどメモ。

TL;DR

  • MacOS+ChromeAmazonの領収書や楽天カードの利用明細を印刷しようとすると文字が表示されず白紙になる(既知の)問題がある
    • 原因はOsakaフォントだった
    • MacOSのアプリ「Font Book」からOSAKAフォントを無効にすれば解決する

以下作業ログ

訳あって利用明細をpdfに印刷する(書き出す)機会があったのですが、Chromeでやると何故か白紙になってしまう事に気がついた。
同様の問題がAmazonの領収書で起きているようですが、解決方法をググっても別のブラウザを使うなどだったため原因を調べた。

  1. chromeのDevToolでいろいろためす。
  2. font-family怪しい?→コメントアウトしてみる
  3. 印刷時も表示された
  4. フォントを一つずつ確かめる
  5. OSAKAフォント指定時に白紙になることがわかった
  6. OSAKAフォントってなんぞと思って調べる
    1. classicalなOSX Classic Mac OSで使われていたフォントらしい
      1. Osaka (書体) - Wikipedia
  7. OSAKAフォント入れたらなおるのかな?
    1. 下記リンクを参考にFont Bookで調べる
      1. macOS Sierra に組み込まれているフォント - Apple サポート
  8. 既に入ってた...
  9. 試しに無効にしてみる
  10. 治った...

追記(2017.07.22)

GitHubにissueを漁っていたら似たような問題がGoogle Fontに報告されているのを発見した。
Some Google fonts print incorrectly on anisotropic RIPs · Issue #1370 · google/fonts · GitHub

Chromeの印刷時のレンダリングで一部文字が描画されない点が共通している

もくもく温泉開発合宿12 に参加してきました! ~Androidとyubikeyで遊ぶ3日間~

もくもく温泉開発合宿12に参加してきたのでメモ。

2泊3日で、スポンサーされる枠で参加させていただきました!
圧倒的感謝🙏

もくもく温泉 開発合宿 #12 - connpass

思い思いに作業をする会で僕はyubikeyとAndroidで遊んでいました。

やったこと

前回からの反省

  • 酒は夕方からにした
    • 前回は調子に乗って昼からガブガブ酒をキメてしまった故、進捗が無だった
  • オールしない
    • 寝ないと翌日に響くので3時には寝るようにした

作業した内容

Google I/O'18で発表された通り2018年のQ4にAndroid O以降のバージョンにFIDO2.0のAuthenticatorが実装される(予定)なので
先駆けてベースになるアプリを実装してみようと思って作業しました。
FIDO2.0用のAPIも充実してきたのでそれの調査からはじめました。 下記のドキュメントとFIDO 1.xにあたるFIDO U2Fのサンプルを参考にクライアントアプリの実装を進めました。

ドキュメント:
com.google.android.gms.fido.fido2  |  Google APIs for Android  |  Google Developers
AndroidのU2Fのサンプル:
GitHub - googlesamples/android-fido: Quickstart sample for the Android FIDO API

まだAndroid単体で動作するAuthenticatorは実装されていないようだったので、Authenticatorには4月に購入したYubicoのsecurity key by Yubicoを使用しました。

僕は下記の直販サイトから購入しました。
www.yubico.com なお、日本国内の正規代理店はソフト技研さんがやっているようです。

サーバーはYubicoのPython版公式サンプルを用いました。
github.com

次の流れで作業を行いました。

  1. Yubicoのサンプルを動かす
    1. exampleが動かなかったのでプルリクを出した。
      1. https://github.com/Yubico/python-fido2/pull/10
  2. AndroidのFIDO APIの調査
  3. 実装
  4. コネクタ経由で接続したsecurity keyからレスポンスが帰ってこない。(調査中)

上記の通り未完で至らない点が多いです。プルリク待ってます。
GitHub - prprhyt/AndroidFIDO2Sample

ハマったところ

あとは、仕様を読み進めていきたい。
そのうちGoogle様から公式サンプルでるだろうなぁ...

2018.08.13 補足
リリースノートを読んだらearly access partner がアクセスできるって書いてありました。
early access partnerでない人は正式版がリリースされるまで待ってたほうがいいってことですかね...
Release Notes  |  Google APIs for Android  |  Google Developers

当日の様子

向かってる最中

3連休初日だからかスーツケースを持った家族連れを多く見かけました。

JR湯河原駅からバスで理想郷へ。理想郷って名前なんですよ。
湯畑の次にネーミングが好き。

集合。
遅刻者多数だったので、最初に集まった3人で設営をしました。
エンジニアは遅刻しがち。

設営が終わり次第、ぼちぼち作業を開始。

その他の写真

f:id:atofaer:20180722173637j:plain お宿

一面のクソミドリ f:id:atofaer:20180722173657j:plain

夜の公園で会ったぬこ。かわいい。 f:id:atofaer:20180722173721j:plain

湯河原駅前。湯の街だけあってアピールがすごかった f:id:atofaer:20180722173758j:plain

3日目の月曜日に花火大会があったようです。混みそうだったので先に引き上げました。

f:id:atofaer:20180722174040j:plain

(JAG 学生部) 大学生ですがGoogle I/O 2018に参加してきました!

Google I/O 2018に参加してきました。

もたもたしてたら6月になってた。 アウトプットを残そうと思う。

もくじ

大学生が初めてI/Oに行ってきた

情報系の学部4年生です。 @prprhyt
5/8〜10(現地時間)に開催されたGoogle I/O 2018に参加してきました。
セッションは興味があったセキュリティや認証・認可系セッションと
Flutterのセッションを中心に聴きました。
(大学の所属研究室が暗号系かつ
認証/認可技術、暗号技術に強いベンチャーでバイトをさせていただいているので)

費用のいくらかを日本Androidの会から支援していただいた

宿泊費とI/Oのチケット費を日本Androidの会から支援していただきました。
チケット費用はおよそ4万円でした。(アカデミックなので)
また、宿泊費はAirBnBを利用したためチケットと同じくらいでした。
飛行機代など他で一杯一杯だったため、非常に助かりました。
ありがとうございます!

(学生必見)支援していただいた経緯

僕は日本Androidの会のWG(ワーキング・グループ)の1つである学生部に所属していて、
今回の学生部の活動の一環としてI/Oに参加し支援をしていただきました!
学生/生徒であれば誰でも入部可能なので是非!(入部方法は↓)

日本Androidの会 学生部の紹介と入部方法

日本Androidの会のWGの1つです。

「”Android”だけにこだわらず、ビジネス系・技術系・デザイナー系の学生が集まり、切磋琢磨していく場所」を作る
http://student.android-group.jp/about/ より引用

2013年から(諸説では2010年から)活動しているWGです。
日本Androidの会から活動の為の予算を割り当てて頂いて活動しています。
Androidだけにこだわらずやりたいプロジェクトを企画して部員内でメンバー募集して〜
ABC(後述)やOSCに出展したり、開発合宿、勉強会や就活イベントなどを開催しています。
基本はオンライン(Slack, Hangout, GitHub/GitLabなど)で活動しています。
月に1度、都内でオフライン or オンラインミーティングを行っています。

参加条件は現役の学生/生徒であること。ただそれだけ。
絶賛部員募集中です!
現在のアクティブメンバーは15名程です。
高校生、大学生、大学院生などが所属しています。高専生も歓迎です。
入部方法は↓のGoogleフォームから入部届を出せばOKです!
(HPは平文通信ですがGoogleフォームは暗号化されています)
入部について: http://student.android-group.jp/join/
入部届け(Google フォーム): https://docs.google.com/forms/d/e/1FAIpQLScqVfLSCwLwhJ3AuawobnOhsC_BxMM7B7sOtYRuKzu24JdOnQ/viewform

公式ホームページ: http://student.android-group.jp/
GitHub: https://github.com/jagsc
GitLab: https://gitlab.com/jagsc

(ダイレクトマーケティングおわり)

現地でのコミュニケーションとか

英語力は不安しかなかったのですが、案外短期間の滞在をする分には大丈夫でした。
セッション中に万が一聞き取れなかったらアクセシビリティ用のモニタから書き起こしを読むみたいなスタイルでセッションは乗り切れました。
(日本人参加者はわりとそうしてる人多そうな印象だった)

現地の情報についても、
幸いにも経験者(@hotu_ta)と一緒だったこともあり、一人よりだいぶ気持ちが楽でした。

セッションの感想(気に入ってるやつ)

本題。
セキュリティと関係しそうなセッション+Flutterを中心に聴きました。

聴いたセキュリティ系・認証/認可系のセッションは次の4つ

  1. 5/8
    1. [Session] Introducing .app domain names, and how to secure them
  2. 5/10
    1. [Session] What's new in Android security
    2. [Session] What's new with sign up and sign in on the web
    3. [Session] Device provisioning and authentication with Android Things

上記以外にもFlutter、WearOS、アシスタントのセッションなどを聴きました。
3日目に集中していたので2日目はCode LabsやSandBoxに行っていました。

気に入っているのは5/10の2.1、2.2と2.3です。

セキュリティ系・認証/認可系のセッションではデベロッパーに使ってもらうことを意識して
ライブラリの使用例を示したり,用語の解説をきちんと時間を取って行っていたのが好印象でした。
(認証/認可は違うよっていうのをパスポートと映画のチケットに例えたりとか)

[Session] What's new in Android security

概要

  • Androidセキュリティの話
  • ハードウェアセキュリティの強化
  • 鍵の保護機能の強化(StrongBox)
  • 認証手段の強化

認証周りを中心に書くと

指紋認証などのバイオメトリクス認証のサポートライブラリ版が来るって話だった。

やったー!
AndroidにもWebAuthn/FIDO2来ましたね!
Androidではこれからが楽しみです
なお、U2Fのセキュリティ キーは既にAndroidでもOTGケーブル等でUSBでつないだり、type-C対応のものだと使えるみたいです。

[Session] What's new with sign up and sign in on the web

概要

  • Webの認証の話
  • Googleアカウントを使ったOne Tap SignIn/Auto SignIn
    • ライブラリの提供あり
  • OTP(One Time Password)を使った二段階認証は中間者攻撃に対して脆弱なのでU2FやWebAuthnを使おう
    • Web Authentication APIなら対応ブラウザが豊富
      • (所感)U2Fのときは非対応ブラウザに3rd製の拡張機能(えぇ...)を入れたりとかしないといけなかったので嬉しい
    • Web Authentication APIは既存のU2Fのセキュリティ キーとも互換性があるので導入が楽
    • Web Authentication APIならバイオメトリクス認証(指紋とか)にも対応している
      • pixel2 の指紋センサを使ったデモが披露された

話の流れ的にはOTP(ワンタイムパスワード)を用いた2段階認証が中間者攻撃に弱いという話からの導入でした。

このあとアタックされる図があった

FIDO2.0はドメインの検証をするので中間者攻撃に耐性があるよってスライドがあった(取り忘れた)

これはWeb Authen ( on Web Authentication API)を使ったパスワードレス認証の話のところ。
この時FIDO2.0とかつぶやいているけど直後に調べたところFIDO2.0はWebAuthenを含むもよう。
勉強になった。
https://developers.yubico.com/FIDO2/

話はそれますが、ブラウザの方では着々とWeb Authentication APIが正式版リリースが近づいてきていたのでこの流れがとても嬉しかったです!
実はセッションの前日5/9にリリースされたFireFox 60.0 stableでWeb Authentication APIが有効になってたみたい。
なお、Chromeは5/29からStableになった67から有効です!
FireFox:
Firefox — Notes (60.0) — Mozilla
Chrome:
Web Authentication API for Chrome - Chrome Platform Status
これでブラウザでユーザもWeb Authen API経由で対応デバイスが使えますね!

[Session] Device provisioning and authentication with Android Things

  • Android Thingsにおける認証の話
    • 認証/認可の違いの説明に時間をきちんと割いてた
    • ライブラリが強力っぽい
  • NearByとの連携あり
  • 通信はMQTTベースだった(競合のAWS IoTもそう)

全体的にセキュリティ専門でないアプリケーション/Webデベロッパが自社プロダクトに取り込みやすいような流れが期待できて好感が持てた。
強力なライブラリが提供されている模様。
実装イメージが持ちやすかった。

洗濯機のIoT化のシナリオを例に説明があった。
Authentication(認証)とAuthorization(認可)の違いをそれぞれパスポートと映画のチケットに例えて説明するなど、
セキュリティ専門でないデベロッパーでも理解をしやすいように配慮されていた。

Code Labs,SandBox

Code Labs

Code Labsを4回クリアーすると来年のGoogle I/Oの招待枠に応募できるとのことだったのでやってみました。
次の問題にチャレンジしました。

  1. Write Your First Flutter App, part 1
  2. Write Your First Flutter App, part 2
  3. Android App Resizing for Chrome OS X(トラブル発生したけど解決。しかし、時間切れ)
  4. Build a PWA using Workbox
  5. Hangouts Chat bot with Apps Script X(トラブル未解決)
  6. Beautiful, interactive, canonical AMP pages

感想:
直接Googlerに質問ができた。
基礎的な質問でもとても親切に答えてくれた。
あと、3, 5で発生した問題についても親身に対応してくれた。 最高。
が、どちらも中々クセのある問題でGooglerの技術力を持ってしても時間がかかったり解決できなかったりした...

3, 5についてはそれぞれ次のトラブルが発生してクリアできなかった。

3.chromeos-resizing

ちょうどAndroid StudioがChromeOS上で動くと話題だったので試した。
会場備え付けのAndroid Studio on ChromeOS (Pixel Book)でやった。
動作自体は快適だった。トラックパッドMacみたいに慣性スクロールが効いててよかった。

トラブルはチュートリアルの3番目くらいでADBからPixel Bookが見えなくなってしまった。
どうやら、何らかの理由でコンテナで建てたadbのリモートホストとの接続が切れていたらしい。
最初に駆けつけたGooglerの人が詳しい人を呼んでくれて$adb connect {コンテナのipアドレス}
を入力してくれてたことで解決。
Android Studio on ChromeOSはその日初めて触ったのもあって構成がよくわからなかった。
でも、コンテナは一体何だったんだろう? (ビルド鯖とかかな...?でも表示はPixel Bookだった)
解決はしたものの、次の予定があったので時間切れ。

5.chat-apps-script

Slackのチャットみたいなノリでいけるのかなーと思って選択。
CodeLabsで提供されているGoogle アカウントを利用。

https://codelabs.developers.google.com/codelabs/chat-apps-script/index.html#3
To publish your bot to Hangouts Chat, do the following: の9番

・Under Permissions, select Specific people and group in your domain. In the text box under the drop-down menu, enter your email address associated with your G Suite organization.

ここでCodeLabsで提供されているユーザのemailを入れてもエラーが発生して進まなかった。
(うろ覚えだけどユーザの権限が無い的なやつだった覚えがある)
Googlerが合計5人、多いときは3人がかりで助けてくれたけど解決できず...無念

SandBox

Android Thingsとか見に行った。
Googlerが展示員でスタンバイしていて展示物の説明をしてくれる感じ。
Android Thingsで制御するロボットや3Dプリンタ
スマートロック(電子錠)とかがあった。
あと、Android Things Developer Kitを貰うためのクイズが難しくて参加者同士で情報交換したりとかもした。

まとめ

体験記というより技術まとめっぽくなってしまった。。。
慣れれば英語でもコミュニケーションが取れて楽しかったです。 実は、前日イベントのIntel Zero Partyの話とか夜のイベントの話とかもあるのですが、今回は割愛。
気が向いたら書きます。
良い経験になった。
行くこと自体はすごくないので経験を生かせるようにしたい。

Android Buzzer and Conferenceの紹介

abc.android-group.jp

Android Buzzer and Conference 2018 Summerが開催されます。
日時: 6/9(土) 10:00〜18:00
場所: 東京大学本郷キャンパス
参加登録: Android Bazaar and Conference 2018 Spring - connpass

Android Buzzer and Conference(通称ABC)は
日本Androidの会主催のカンファレンスです。
参加無料です!
基調講演がとても豪華です。(IBMGoogle)
Google I/Oの話もあります!
コミュニティの出展もあります!
日本Androidの会 学生部もバザールにブースを出すので是非遊びにきてくだい!
ABC*1で僕と握手!

*1:競プロじゃないほう

〜温泉とポン酒と猫と〜 もくもく温泉 開発合宿 #11にスポンサーされる枠で参加してきました!

どうも @prprhyt です。
1週間くらい経ちました。 4/28〜30にあったもくもく温泉開発合宿 #11 @土善旅館
スポンサーされる枠 で参加してきました!
ゴールドスポンサーの皆様ありがとうございます!

進捗

もくもく会なので圧倒的進捗...のはずが開始1時間で酒をいれてしまった。優勝。

  • やろうとしたこと

    • ARM用のdockerイメージをビルドするCI鯖を建てる
    • 4月に買ったFIDO2用ハードウェアトークンで遊ぶ
  • 進捗

    • ARM用のdockerイメージをビルドするCI鯖を建てる
      • QEMUベースでx86/x64上に建てた
      • ネイティブ(Raspberry Pi3 B)の10倍くらいの時間がかかったので諦めてラズパイ上に建てることにした
    • 4月に買ったFIDO2用ハードウェアトークンで遊ぶ
      • 行きのバスでFIDO2の仕様を3ページくらい読んだ
      • ハードウェアトークンを開封した
      • 試しにGoogleアカウントに紐づけてみた
      • デベロッパー登録をした。SDKは降ってこなかった...

こんな感じで進捗はぼちぼちでした。

ちなみにFIDO2トークンは4月にでたYubicoのやつです。

交流とか

ご飯の時間に美味しいご飯を食べながら他の学生やエンジニアの方と交流できてとても楽しかったです!
業種もフロント、インフラ、データサイエンスetc...といった具合にバラバラで異文化交流感もあってよきでした!

f:id:atofaer:20180506161738j:plain 2日目の夕食

写真

旅館の猫のはなちゃん

f:id:atofaer:20180506151433j:plain 日本酒

こんな感じで温泉+ポン酒+猫→優勝 でした!

学生ということあり超優遇していただきました! とても良い会だったので学生参加者がもっと増えればいいなと思ってます!

cle_analysisのホスティング先の移行をしました/Google Driveのホスティングサービス終了に伴う云々

結論から書くと、cle_analysis使ってくれている人は下記のuriに設定しなおしてねってだけの話

javascript:(function(docbk,funcbk,scrpbk){scrpbk=docbk.createElement('script');scrpbk.src='https://prprhyt.github.io/cle_analysis/cle_analysis_alpha.js';scrpbk.onload=function(){funcbk()};docbk.body.appendChild(scrpbk);funcbk=function(){analysiscle();};})(document)

昨年、Google Driveホスティングサービスの終了のお知らせがありました。2016/8/31にDriveのホスティングサービスが終了してしまうとのことです。

そこで問題になったのは、学内ポータル用のブックマークレットであるcle_analysis

github.com

後輩、同期、先輩で何人かつかってくれている人がいるようなので、移行を検討しました。 (移行済み)

0.drop box

普段つかっていないのでボツ

1.githubのrawを参照してみる

真っ先に思いついたのは、githubのrawを参照するという代替案。
githubリポジトリのページのrawボタンを押して
f:id:atofaer:20160825174510p:plain
urlをコピーして
f:id:atofaer:20160825174517p:plain
ブックマークレット参照先に適用

で実行してみるが・・・

何もおきない

デベロッパーツールで確認すると・・・
f:id:atofaer:20160825174820p:plain
text/plain扱いになっているので読み込めないとのこと

ボツ

2.非公式のrawgitを使う。

rawgitというcdnのサービスがあるようで、githubにあるファイルのミラーリング(?)のようなことをしていてrawgitにコピーされたファイルをjsとして読み込める模様。
cle_analysisのコミットログをみれば履歴が残っているのでわかるけど、1時間くらいの間はこの方法でやるようにREADMEに書いてました。
けど、非公式だし、いつ終わるかわからないしぶっちゃけXSS怖いよね…(おまいう)

ボツ

3.github pagesをつかう

最終的に辿り着いたのはgithub pagesでした。
masterリポジトリからgithub pagesのページを生成できるようになったようです。
なので、masterリポジトリにそのままgithub pagesを適用して(htmlファイルは置いてないけど)jsファイルをgithub pagesのほうへ読みにいけるようにしました。
ついでに、httpsに対応しているようなので(前からだっけ?)セキュアということで(なにより公式なので)

サイヨウ

おしまい

Google Apps Script と Twilio で自作留守電サービスを構築してみた話

2016/08/16

Githubに公開しました。そのうち、いま運用している差分もそっちにあげます。

github.com

 

ブログ更新、久々です。

僕は、格安sim(IIJ mio)のユーザーで留守電サービスを利用していないです。

今回はGoogle Apps Script(無料) と KDDIのTwilio(試用期間で無料)を使ってお遊びで留守電サービスを構築してみました。

 

必要なもの

・携帯の電話番号

Google アカウント

・Twilioのアカウント(新規で作った)

 

全体像の構想

www.questetra.com

上記のページのような具合。Google Apps EngineではなくGoogle Apps Scriptだけど。

実際にはこれに、

・メールで通知する機能

Google Driveのフォルダに録音データを保存する機能

・Twilioのサーバーから録音データを削除する機能

を加えた。

 

留守電として動作させるために、Androidスマホの方でx秒受話しなかったらTwilioの番号へ転送するようにしている。

(試しに40秒で設定中)

 

動作した様子(コーディングとかについては下の方を参照)

f:id:atofaer:20160813033956j:plain

f:id:atofaer:20160813033751j:plain

 

コーディングとか

コーディングは1時ぐらいに開始。雑魚なのでところどころ詰まって終わったのは3時くらい。

 

大まかな流れは

事前にGASのtwilio_ response_voice.gsの公開リンクをTwilioのTwiML AppsのREQUEST URLに登録する。

f:id:atofaer:20160813032426p:plain

Twilioの番号に着信があるとREQUEST URLへPOST(設定次第ではGET)がいくのでTwilioにしてほしい動作に合わせてXMLを返す。

XMLの構成については公式ドキュメントを参照した。

https://jp.twilio.com/docs/api/twiml/record

 

Twilioは受け取ったXMLにもとづいて動作する。今回は女性の声で「只今電話にでることができません〜」といったあと1分が上限の録音をする。

録音が終了すると、TwilioはXMLでいうactionに記したurlへ録音ファイルのurlなどの情報をpostする。それをtwilio_ receive_recorded_voice.gsのdoPostで受け取り、録音ファイルをドライブへ保存したり、そのリンクを入りつけたメールを飛ばしたり、後始末でTwilioサーバー上の録音ファイルを削除したりする。

 

 

twilio_ response_voice.gs

function doGet(e) {
var response_str = "<Response>\n <Say voice=\"woman\" language=\"ja-jp\">只今電話にでることができません。ピーとなったら1分以内の伝言を残してください。</Say>\n <Record action=\"https://script.google.com/macros/s/{GASID}/exec\" method=\"post\" maxLength=\"360\" />\n</Response>";
var out = ContentService.createTextOutput(response_str);
out.setMimeType(ContentService.MimeType.XML);
return out;
}
function doPost(e) {
var response_str = "<Response>\n <Say voice=\"woman\" language=\"ja-jp\">只今電話にでることができません。ピーとなったら1分以内の伝言を残してください。</Say>\n <Record action=\"https://script.google.com/macros/s/{GASID}/exec\" method=\"post\" maxLength=\"360\" />\n</Response>";
var out = ContentService.createTextOutput(response_str);
out.setMimeType(ContentService.MimeType.XML);
return out;
}

 

実際には{GASID}の部分は ↓のtwilio_ receive_recorded_voice.gsの公開urlに合わせてIDを指定。

twilio_ receive_recorded_voice.gs

var accountSid="{YourAccountSid}";
var auth_token="{YourToken}";

function doGet() {
var out = ContentService.createTextOutput("");
out.setMimeType(ContentService.MimeType.XML);
return out;
}

function doPost(e)
{
var now_date = new Date();
var file_name = now_date.toLocaleString();
var recode_file_url = e.parameter['RecordingUrl'];
var response = UrlFetchApp.fetch(recode_file_url);
var fileBlob = response.getBlob();
fileBlob.setName(file_name);
var outputDir = DriveApp.getFolderById("{YourFolderID}}");
var voiceDetail = outputDir.createFile(fileBlob);
voiceDetail.setSharing(DriveApp.Access.PRIVATE, DriveApp.Permission.EDIT);
var sharingUrl = voiceDetail.getUrl();

send_e_mail(file_name,sharingUrl);
delete_voice_recorded_data(recode_file_url);
var out = ContentService.createTextOutput("");
out.setMimeType(ContentService.MimeType.XML);
return out;
}

var options = {
method: "delete",
headers: {
Authorization: " Basic " + Utilities.base64Encode(accountSid + ":" + auth_token)
},
muteHttpExceptions: true
};

function delete_voice_recorded_data(url_data){
url_data+=".json";
var now_date = new Date();
var file_name = now_date.toLocaleString();
var response = UrlFetchApp.fetch(url_data,options);
//send_e_mail("元メッセージ削除通知",response.getResponseCode());
}

function send_e_mail(date_str,share_url){
var mailTo = "{yourmailaddress}";
var subject_str = date_str+"の留守電";
var body_str = date_str+"に留守電がありました。内容は以下のリンクから確認してください。";
body_str+="\n\n";
body_str+=share_url;
MailApp.sendEmail(mailTo, subject_str, body_str);
}

 

{ほにゃらら}の部分はその都度任意で。アクセストークンはTwilioのものを使用。

https://jp.twilio.com/user/account/developer-tools/api-explorer/recording-delete

 

上記urlにログインした状態でアクセスするとREST APIの使い方とかが何となくわかる。

 

今わかっている問題点

メールの本文からは相手の電話番号がわからない。

    →Twilioからかかってきた相手の番号をしらべることはできるが、すべて自身の電話から転送する形をとっているため、大元辿った番号がわからない

メールが送られてきた時間とスマホ側の電話の受信履歴を見ればある程度予想はつくだろうけども。。。 

 

ブログ書いちゃったけど、ディジコンのLT_Matchに使うネタとして温存しときたい(願望)