読者です 読者をやめる 読者になる 読者になる

ナチュラル @rch850

ナチュラル丼発祥の地、福井からお届けします。技術的な話題とか、雑談とか。

トゥート!の埋め込み

f:id:rch850:20170421003214p:plain

oEmbed 対応してるみたい。

f:id:rch850:20170421003609p:plain

なんか不格好なのは iframe の height が 600 もあるからかな。

$ curl "https://friends.nico/api/oembed.json?url=https%3A%2F%2Ffriends.nico%2Fusers%2Frch850%2Fupdates%2F48866"
{"type":"rich","version":"1.0","title":"New status by rch850","author_name":"りちゃ","author_url":"https://friends.nico/users/rch850","provider_name":"friends.nico","provider_url":"https://friends.nico/","cache_age":86400,"html":"<iframe src=\"https://friends.nico/users/rch850/updates/48866/embed\" style=\"width: 100%; overflow: hidden\" frameborder=\"0\" width=\"400\" height=\"600\" scrolling=\"no\"></iframe>","width":400,"height":600}

コミットメッセージの Emoji Prefix の虫をやめた話

git とかのコミットメッセージで 👍 ほげを実装しました とか 🆙 ほげパッケージを 1.2.3 にアップデート みたいに書くのあるじゃないですか。

memo.goodpatch.co

好きで結構使ってるんですが、バグの絵文字だけは虫を使ってません。

虫の絵文字って、だいたいは芋虫みたいなやつだと思うんですが、こいつが Gmail に入ってくるとあいつに化けるんです。

f:id:rch850:20170408122603p:plain:w200

大変不愉快なのでモザイクをかけてます。気になる方はご自分の Gmail アドレス宛に虫の絵文字を送りつけてみてください。あと Emojipedia にもあったので、勇気のある方はこちらからどうぞ。拡大してみると Google 以外もなかなか強烈……

虫をやめてどうしたかというと、救急車にしました。

f:id:rch850:20170408122927p:plain:w200

個人的には Gmail 上での虫の表現がぞわぞわしたので、それが無くなってよかったのですが、「実は虫自体が苦手でした」って人もいて、この変更は好評でした。

Happy git life!!

ふくもく会その26

午前中はウェアラブル/VRセミナー&アイデアソンで進行などをして、お昼食べに行って、午後2時半からの参加でした。

何やるか全然決めてなかったんで、若干の圧を発してたら、やること共有の発表順がラストになりました。やったぜ。Python 画像処理の勉強しますとか、webpack プラグインのメンテしますという話を聞いてたら、Python のパッケージ公開でもやってみるかという気分になりました。npm も gem も公開したことはあるんですが、Python はやったことなかったので。

りちゃ on Twitter: "できあがったもの ahg48 0.1.3 : Python Package Index https://t.co/YXWE4492DM #ふくもく会"

Packaging and Distributing Projects がしっかり書いてあるので、これに従えばほぼ大丈夫かと。バージョンが 0.1.3 になってるのは、最初に野良記事を参考にやって long_description を README から読み出すのに失敗したりしていたからです。今後は CI かますなどしようかなと思います。

他には @kotobuki555ing中京テレビハッカソンの報告を聞いたりしてました。コンスタントに受賞しててすごい。ハッカソン中やアイデアソンとハッカソンの間の平日に、たくさんインタビューがあったそうです。テレビ局すごい。

次回はたぶん4月29日です。

MediaRecorder 後日談

rch850.hatenablog.com

の続き。

Angular2 で audio タグの src に blob:http://localhost:4200/8faa4fbf-a787-4171-9e2a-703e4d89c328 みたいなのを設定しようとすると、

WARNING: sanitizing unsafe URL value blob:http://localhost:4200/dbce8851-3f4b-4509-87f3-5116f0cbadb4 (see http://g.co/ng/security#xss)

みたいのが出たわけです。あ、これ AngularJS 1.x でも見たやつだ。ってことで、unsafe の解除方法調べて、DomSanitizer を使えばいいんだなってことが分かりました。

それで無事に sanitizer.bypassSecurityTrustUrl(blobUrl) みたいにして src に設定できるようになったんですが、それでもなぜかエラーが出る。

GET blob:http://localhost:4200/0be05bbb-5fc6-4bb8-ac93-d29096be6aea 416 (Requested Range Not Satisfiable)

これについてはだいぶ調べたんですが、まったく解決策が見つからず。しばらく経ってから、これそもそも動くの?って疑問が出てきて、MDN が提供してるサンプルを動かしてみたら……

f:id:rch850:20170215233131p:plain

んーーーーーーー

疲れた。


(2/21)さらに後日談。サンプルを再度動かしたらちゃんと動きました。ブラウザの機嫌が悪かったのかも。動いてよかった。

Web Audio API の奥底から Angular とつながりたかった

Angular 2 の勉強がてらに、Web Audio API で録音するウェブアプリを作ろうとしたら、変なところでハマったのでメモ。

録音には MediaRecorder を使おうとしました。コードは今のリンク先にあるものを参考に書きました。getUserMedia で取った stream を使って MediaRecorder を作って、その onstop で結果を得る形です。

が、なかなか録音完了後の結果がビューに反映されませんでした。AngularJS 1.x で言うダイジェストをしたかったんですが、ドキュメント の Change Detection あたりを読んでも Angular zone がいい具合にやるから大丈夫と書いてあるだけでさっぱり。

いろいろ調べて Triggering Angular2 change detection manually - Stack Overflow に行き当たって ChangeDetectorRef.detectChanges() が良さそうということが分かりました。

最終的にはこのようなコードになりました。

  constructor(private ref: ChangeDetectorRef) {
    navigator.mediaDevices.getUserMedia(
      { audio: true }
    ).then((stream: MediaStream) => {
      this.mediaRecorder = new MediaRecorder(stream);
      this.mediaRecorder.ondataavailable = (e) => {
        this.chunks.push(e.data)
      }
      this.mediaRecorder.onstop = (e) => {
        let clipName = prompt("Enter a name for your sound clip")

        let blob = new Blob(this.chunks, {"type": "audio/ogg; codecs=opus"})
        this.chunks = []
        this.clips.push({
          name: clipName,
          audioUrl: window.URL.createObjectURL(blob)
        })
        console.log(this.clips)
        // これを呼び出したら clips への要素追加が反映された
        this.ref.detectChanges()
      }
    }, function(err: any) {
      console.error(err);
    });
  }

以上!

コード書き初めのつもりが環境構築で終わった

しばらくメンテしてなかった AppleSystemStatusNotifier について、色々やりたいことがたまってたのでリストアップしてみた。

  • 環境構築。現状は package.json も何もない。
  • Developer System Status も取りたい
  • Apple に対してやさしくなりたい(サーバを作ってステータスをキャッシュしておきたい)

環境構築

package.json を書いて lint ぐらいかけたいなぁと。

  • 手元に yarn が入ってなかったので brew install yarn。そしたら n を使ってるからか brew link node してねと言われたので、いったん brew link --overwrite node してもう一度 n 叩いて復旧。最後の手順は不要かも。
  • .npmrc で save = true とか save-exact = true って書いてたみたいに、何か設定しておきたいなと思っていろいろ調べてみた。でも途中で yarn なら勝手に save されるし exact なくても yarn.lock がうまいことやってくれるんじゃないかと思い始めてきて、何も書かないことにした。.yarnrc に書く方法もあるそうです。
  • なんか TypeScript にしたくなったから TypeScript にした。
  • TypeScript だから tslint を使うようにした。

ひとまずここまでの作業で参考にした記事:

ymotongpoo.hatenablog.com

Developer System Status を取りたい

  • 当初はこのページに全てのステータスが載ってたんだけど、いつからか一般向けと開発者向けに分離してた。両方見て、それぞれのステータスページを開けるようにしたい。
  • 2つの URL から取ってくる必要があるので、Promise.all でまとめたい。となると axios を使いたくなってくる。となるとパッケージをバンドルする必要が出てくる。最初のコードでは zepto.min.js を直接置いてたけど、できるならまとめちゃおう。
  • 今回は rollup を使ってみる。rollup か Webpack2 かの比較を見たところ、酷く差があるわけではなさそう。

ここらでタイムアップ。取りたいって言って取れてないですね。連休中にかたをつけたい。

Internet of Tairyoku の開発で得られた知見と経験

Mashup Battle 1st Stage in 北陸Internet of Tairyoku のプレゼンをしてきました。

DSC_0113

DSC_0116

実装的な話は質疑でちらっと触れた程度で、プレゼン内でも全然してなかったので、忘れないうちに書いておきます。

知見

制限のあるネットワーク環境で、OSX のインターネット共有が活躍する

コワーキングスペースWiFi で開発作業していたのですが、iPad の MESH アプリから Mac に立てたサーバにつなぐことができませんでした。おそらく WiFi につないでる機器間のパケットが通らないようになっているのではないかと。

テザリングすればいいんだけど、もっといい方法ないかなーと悩んでいたら、@macoshitaOSX のインターネット共有でなんとかなると教えてくれました。共有する接続経路を Wi-Fi、相手のコンピュータでのポートを Bluetooth PAN にして接続しました。iPad から見た Mac の IP アドレスも変わらない(試している限りでは)ため、設定変更の手間がかからないというおまけつき。

f:id:rch850:20161128223050p:plain

OSX の通信帯域制限は dnctl

mac osx - traffic shaping on OSX 10.10 with pfctl and dnctl - Server Fault を参考に dnctlpfctl といったコマンドを使った帯域制限をしてみました。dummynet を作ったり pfctl を有効にするなどの初期設定をした後は、sudo dnctl pipe 1 config bw 16000byte/s といった感じで帯域を絞れます。がんばったんですが帯域制限はデモ映えしないのでボツ。

OSX でプロキシ設定の ON/OFF は networksetup コマンド

# 設定する時
sudo networksetup -setautoproxyurl Wi-Fi http://localhost:3000/proxy.pac
sudo networksetup -setautoproxystate Wi-Fi on

# 解除する時
sudo networksetup -setautoproxystate Wi-Fi off

経験

無線 LAN AP を立ててみた

続・VyOS で作ったルータに 無線 AP 機能を追加してみた - Soukaku's HENA-CHOKO Blog を参考に、VyOS (on VirtualBox) x WLI-UC-GNHP でルータを立てました。スループットがいまいちだったのと、システムの構成が野暮ったくなってきたのとで、ルータを作る案は保留としました。

react と socket.io

いい機会だと思って組み込んでみました。react はこの作品に限って言えばうまみが薄くて途中退場気味、socket.io は筋トレ後のネット復旧時の通知など。

プロキシ構成ファイル proxy.pac を書いた

高専でインターネットつなぐ時に見て以来の proxy.pac なるファイルを目にするばかりではなく、自分で書く時が来ようとは。書くと言ってもこれぐらいのぬるいもんです。

function FindProxyForURL(url, host) {
  if (shExpMatch(host, "*.yahoo.co.jp")) {
    return "PROXY localhost:3010";
  }
  if (shExpMatch(host, "*.com")) {
    return "PROXY localhost:3010";
  }
  return "DIRECT";
}

参考にしたサイト:

node-http-proxy パッケージでプロキシサーバを立てた

上で書いたプロキシ設定の接続先を node-http-proxy で立てました。まだあまり使いこなせてないです。具体的に言うと HTTPS 周りが。

デモでは Yahoo! ニュースを適当にポチポチしてると突然プロキシ設定が切り替わってネットが遮断されるという流れでしたが、できれば Twitter とかも遮断したいところ。遮断はできるといえばできるんですが、単にエラー画面になってしまうのがよろしくなくて、改善したいところです。