WWDC 2018 メモ

ARKit2

  • AR空間共有が提供されて楽になるらしい
  • ゲーム企業じゃないんだからゲームのデモはほどほどにしてほしい。ARすげー!!!!!!!!!は初回だけ

Photo

  • iCloudPhotoLibraryでアルバムの共有ができるらしい
  • 顔認識で人と結びつけて共有提案など

Siri

iOS12

  • dnd(通知なしモード)、良い
  • Memoji(どうでもいい)
  • facetimeで32人同時通話
    • Animojiも使える
    • すごい部分は多いんだけど既存は食えると思わないし32人同時通話で拍手が起こるのは2013年ぐらいまでにしてほしい

~~ この辺から飽きてくるのでレポートが雑になる ~~

WatchOS

tvOS

MacOS

  • もはべ(Mojave)
  • スクリーンショットのとり方がiOSによって即時編集できるとか
  • Finder強化とか
  • ちらっとITP強化っぽい話があって気になっている
    • alert出さないとトラッキング系の広告でないみたいな
    • StorageAccessAPI系なのかは不明
  • Fingerprint
    • Webサイトを閲覧するとき、設定、Fonts、Pluginsなどでサイト間のトラッキングに利用される

CreateML

iOS12 Safari

ここ数年で一番悲しかった(当社比) 欲しいものがないのでViveProのフルセット在庫を探しています。

ブックマークレットを書こうとしたらShadow DOMでちょっと躓いた話

あけましておめでとうございます

まず

僕はあまりブックマークを使用せず、履歴だけで生きるようにしています。
特に強い理由はないんですが、Chromeのアドレスバーが優秀なのでマウスでブックマークを探すより cmd + L でアドレスを打ったほうが早いから、ぐらいです。

困ったこと

そういう生活をしていると、履歴を整理する必要が出てきます。
例えば、同じ系列のツールを使っていて乗り換えたりしてもう滅多に使わなくなったサイトの履歴が残り続けていると、常にそれがアドレスバーの優先度高で補完に出てきてしまい、わりとフラストレーションが溜まります。
かといって、履歴を全消ししてしまうとその日のパフォーマンスが1/3ぐらいになってしまうので、特定のドメイン配下の履歴だけいい感じに消したくなります。
なので、ブックマークレット(JavaScript snippet)を書きました。

できたもの

実行ページはここ chrome://history/

infiniteList = document.querySelector("#history-app::shadow > #main-container #content #history::shadow > #infinite-list");
historyItems = infiniteList.getElementsByTagName("history-item");
for(let ele of historyItems){
    if (!ele.hidden) ele.querySelector("::shadow > #main-container #checkbox").click()
}

これで基本的に40件ぐらいチェックされるので、あとは一回消してもう一回実行して、みたいなことをしないといけない。 scrollを含めてやれば全部自動でできそうなんだけど、ShadowDOM内部の更新タイミングみたいなのが順当になっていなくて綺麗にできそうになかったので諦めた。

解説

基本的にChromeの履歴ページはShadowDomのネストになっており、ReactのComponent単位でShadowRootオブジェクトが挟まっているような形になっています。 そして、ShadowRootを挟む際にはselectorに ::shadow > をつけて掘っていきます。

<body>
  <div id="main-container">
    #shadow-root
      <div id="shadow-item"></div>
  </div>
</body>

に対して

// これは何もhitせず
document.querySelector( "#shadow-item" );
// shadow-rootを掘る必要がある
document.querySelector( "#main-container::shadow > #shadow-item" );

です。 ページ内にあるチェックボックスを全部つけるぐらい楽だろうと思って軽い気持ちで書き始めたら意外に詰まってしょげでした。
あとは、とりあえずガッとComponentを出して、Listの中身が2件でも他のListをhiddenにしているだけのようで?表示されているかどうかを見ないと無を選択してしまいこのようになってしまうので注意が必要でした。

f:id:miyachik:20180206203114p:plain

こんなことするならちまちまボタン押したほうが早くない?

はい

アイマスハッカソンに参加した話と安部菜々

この記事はアイドルマスターアドベントカレンダーの18日目の記事です。
前日はtwoterabytesさんで安部菜々にすくわれたかもしれない話です。
うさみんかわいいですよね。今は恒常うさみんがたのしみ。できればスカチケの直前でお願い致します。

アイマスハッカソン

アイマスハッカソンというイベントの第二回が開催されました。
アイマスハッカソンについては以下を参照ください。

github.com

主な目的は

アイドルを愛でる。アイマスに貢献(Contribute)する。  

アイマスの二次創作界隈において、歌姫庭園とかミリフェスとかミリオンリーとかニコ動とかTwitterとかいろいろあるけれど、エンジニアを主な対象とした時にこれという機会がありません。  

これはアイマス界の損失だ!と思い、企画してみました。エンジニアだって、なんかやりたい。  

で、副業でエンジニアっぽいことをしてる人たちが一度に集まって面白そうなナニカを作って盛り上がろうぜというイベントです。今回で第二回を迎えました。

アイマスハッカソン2017

今回はなんと"やよい"つながりということで弥生株式会社 様、懇親会スポンサーに株式会社grooves 様がついてくれました。

imas.connpass.com

こういう趣味系ハッカソンにスポンサー様がついてくれるのはすごくありがたいですね!!!!!!!!!!!!最高です!!!!!!!!!!!

成果物

前回は公式の4コマであるアイドルマスターシンデレラガールズ劇場をいい感じに分割する、miyachik/deregeki-divider を作りました。
今回は、分割したコマをいい感じに感情分類してtwitterのリプライやチャットツールに貼り付けてコミュニケーションを取るために必要な、感情分類をするためのWebAppを作りました。
スライドにも書きましたが、感情分類を適当なAPIに投げてできないかやってみたらアニメ画像なので無のResponseが帰ってきてかなしくなったりしていました。(当たり前)
結構気にはなっていたActiveStorageをいじれる機会にもなったり、趣味とエンジニアリングがいい感じに交差して充実していました。

speakerdeck.com

配信アーカイブもあるよ!

www.youtube.com

雑感

今回は約30人ほどの人数が集まり、個人やチームで開発を行いました。改めて運営の方々には感謝です...!
各チームいろいろな得意分野を持っていて、JavaScriptでぱぱっとゲームを作る人や、Unity使ってARする人、AppleWatchいじり倒す人や形態素解析の話をしまくる人など、本当に色々な発表があってよかったです
次回は3/10にアイマスハッカソン2017 in Osakaが開催決定しているとのことで、お近くの方はぜひ参加してみてください!

Golangでどこでもtwitterできるbinaryをつくる

2018/02/08 追記

記事中で紹介していたgo-bindataの作者がgithubアカウントを削除し、そのアカウントを別の誰かが取得したそうです。

善意でこの行為を行っているとは考えにくいので、go get -u github.com/jteeuwen/go-bindata/...は行うべきではないです。 記事執筆時点では、有志の方がforkしてくれているので、そちらを参照するのが良さそうです(mattnさんありがとうございます)

github.com

ドリコムアドベントカレンダー16日目

ドリコム Advent Calendar 2017 この記事はドリコムアドベントカレンダー の16日目です。
前日はgremitoさんの「オレオレDockerfileを作って、サーバーサイドの開発をやっている話。」です。

あなたは誰

先月ドリコム社に中途入社したid:miyachik です。サーバーサイド側のコード書いている人です。
主にRailsを書いて、たまにJavaScriptGolangをさわったりするぐらい。

twitterの話

みなさんtwitterしてますよね。昼夜問わず変な人がいっぱいいてとても有意義で無意義です。
そして、みなさん(おそらく)エンジニアだと思うので、terminal上でコマンドを叩いたときに、よくわからんエラーを吐いてエラったときの鬱憤をネットの海に叫びたい気持ちが多々あると思います。僕はあります。

gotwi

そんな衝動を解決するために、miyachik/gotwi というものを先日リリースしました。

github.com

いわゆるGo製のCLItwitterクライアントなんですが、現状だとつぶやことしかできません。(というかユースケースがそれしかありません)
プログラムを書いていて適当に愚痴りたいときに、ブラウザやクライアントに戻って呟いたりしちゃうと、うっかり変なつぶやきが目に止まって時間を取られてしまったりしまいがちですよね。
そんな人のために求められているのが、このgotwiです。つぶやく機能しかありません。(replyのshowぐらいは実装予定)
terminal上で動作できて、クロスコンパイル可能なのでどこにでもbinaryを配布することができます。
以前も似たようなCLIクライアントをThorを使ってRubyで実装していたのですが、アクセストークンの扱いや、成果物のポータビリティがいまいちだったりで、そのコードを書いたPC上ぐらいでしか使用していませんでした。
ところが、Goで書いたことによってアクセストークンをgo-bindataで埋め込みつつ、任意環境で実行可能なbinaryに吐き出すことが可能になったので、個人持ちのPCから任意のEC2、どこでも簡単に動かすことができます。
今回はその中でも便利だったgo-bindataを使った話をしたいと思います。

go-bindata

go-bindataは、任意のdataをビルドして、dataをbinaryに変換しGoのコードに埋め込みアクセスできるようなgoのソースを生成してくれるライブラリです。

Install

% go get -u github.com/mattn/go-bindata/...
% go-bindata -h

で、問題なければgo-bindataコマンドが使えるようになっています。

Build

以下のディレクトリ構成で作業をするとして

├── Makefile
├── README.md
├── main.go
├── settings.local.toml
└── settings.sample.toml

このsettings.local.tomlをbuildするbinaryに含めることによってアクセストークンなどの秘匿情報を実行binaryに含めてしまうことができます。
今回はtwitterAccess Tokenが必要になるので、下記を参考に自分のAccess Tokenを取得するようにしてください。(2017年12月時点)

Access tokens from apps.twitter.com — Twitter Developers

.tomlとは、yamlのような設定記述言語で、yamlより色々とシンプルな点や、Goのサポートが厚いことからよくGo界隈では使われています。

github.com

# settings.local.toml
ConsumerKey="YOUR TWITTER_CONSUMER_KEY"
ConsumerSecret="YOUR TWITTER_CONSUMER_SECRET"
AccessToken="YOUR TWITTER_ACCESS_TOKEN"
AccessSecret="YOUR TWITTER_ACCESS_SECRET"

これを

% go-bindata settings.local.toml

とすることで、settings.local.tomlの中身が圧縮してbinaryに変換され、アクセス可能なメソッドの生えているbindata.goが生成されていると思います。
あとは、以下のように、Asset("#{ファイル名}")とすることで、binaryに埋め込んだ文字列やその他のリソースを読み込むことが可能です。

func main() {
    data, err := Asset("settings.local.toml")
    if err != nil {
        panic(err)
    }
    fmt.Print(string(data))
}

debug時などに注意が必要なのは、data本体はbindata.goに含まれているので、実行時にbindata.goを含める必要があります。

% go run main.go bindata.go
ConsumerKey="YOUR TWITTER_CONSUMER_KEY"
ConsumerSecret="YOUR TWITTER_CONSUMER_SECRET"
AccessToken="YOUR TWITTER_ACCESS_TOKEN"
AccessSecret="YOUR TWITTER_ACCESS_SECRET"

gotwiでは、このようにしてアクセストークンなどをbinaryに埋め込んでいるので、あとは任意の環境にビルドしたbinaryを、実行したいサーバーに配置することで、どこでも実行することが可能になります。

gotwiのクロスコンパイル

様々な環境で動かすためには、build時に$GOOS,$GOARCHを指定する必要があります。
環境変数に指定できるものは下記を参考にしてください。

Installing Go from source - The Go Programming Language

指定なしでbuildをした場合は、build時の環境が参照されるようになります。
例えば、Linuxamd64な環境へのbuildは以下のようになります。

% GOOS=linux GOARCH=arm64 go build main.go bindata.go
=> 直下に gotwi が生成される
% ./gotwi "Hello!"
=> "Hello!"が投稿

その他にも、build時には任意のオプションをつけられるので、公式のドキュメントを参照すると良いです。

go - The Go Programming Language

注意点

  • このbinaryが流出してしまうと、それこそ誰でもアクセストークンの所有者として呟けてしまうので、管理には気をつけてください。
  • go-bindataでビルドしたbindata.goの時点では、Goのソースに圧縮されたbyte列が入っているだけなので、ちょっと頑張ればアクセストークンを復号できるんじゃないかと思います(それこそ無圧縮とかにすると簡単に)。なので.gitignoreしましょう。

まとめ

  • どこでも実行可能な自分が呟けるbinaryを吐き出せる、gotwiを作りました。
  • 使い始めて一ヶ月くらいですが、なかなか快適です。クロスコンパイル可能なbinaryを吐き出せるGoは雑なCLIツールを作るのに非常に良い
  • AWS LambdaのGoサポート の話もありますし、Golangは良い
  • twitterはほどほどに

明日は hayabusa333 さんの「Elixir環境構築にて暗号化でエラーにならないために」です。

iOSDC 2017に参加したまとめ

とてもたのしめました。
僕は普段の業務では全くネイティブに関わらないRailsとかちらっとGolang書いたりしている人間なのですが、面白い発表ばかりで素晴らしかったです。

GoによるiOSアプリの開発

www.slideshare.net - 結論としては使い物にはなっていないんですが、現状なにが出来て何ができないのかを知れたのでとても良かった。

ハンズラボ組

iOSデバイス3,500台を管理する、東急ハンズのデバイス管理手法とは

speakerdeck.com

業務アプリの切札、Programable Kiosk Mode大全

speakerdeck.com

エンプラ組の発表がすごい面白かったです。結構好き放題やって管理しているところや、Harakiri-Updaterの仕組みは凄い面白かったです。
たぶん機会がない限り使わない機能ばかりかもしれませんが、(Storeに出さない)個人アプリとかで使えそうな話はあったのですごかった。

まとめ

業務でiOSの庭にいない人間が参加してもとてもおもしろいイベントだったと思います。改めて運営に関わったみなさまはお疲れ様でした。
特にNetworkチームは本当に苦労があったみたいで、でも途中で改善されて凄い快適に使えるようになったり、NOCの方々はお疲れ様でした。
個人的に細かいところに愛があるサービスやイベントが凄い好きなので、運営をしている様子(Wifiのpassやその他の工夫含め)などを見ても凄い楽しそうにしていて、良いイベントだなと感じました。
去年は同じ会社のエンジニア1人くらいしか会場で顔を見知った人間はいませんでしたが、今回は去年より知り合いが増えたのでよかったと思います、改めてお疲れ様でした XD

AppleSpecialEvent2017 まとめ

最初

  • All You Need Is Love流しながら新社屋自慢
  • theaterは柱がなく、ガラスで支えているらしい
  • 初代iPhoneのプレゼン音声流しながら
  • 新社屋についてや、AppleStoreについて自慢
  • AppleStoreをリニューアルしていくらしい
  • アメリカの話ばっかりしてて日本がどうなるかは不明
  • シカゴに新旗艦店

Apple Watch Series 3

  • Watch自体は去年より50%伸びてる
  • Rolexを越して世界で一番の時計となった?
  • 現状二番手で越したいだった。かも。
  • 満足度97%らしい
  • watchOS4 9/19
  • Cellular build in
  • iPhoneと同じ番号で電話を受けれたりGPSとかSiriとか
  • 音楽も聞ける
  • 全面アンテナ?
  • 日本でも出るよ(au,docomo,SB) :tada:
  • $329(no Cellular)と$399(Cellular)
  • 9/15予約9/22発売
  • Series 2はなくなって、Series 1は廉価版として残るらしい

Apple TV

  • 4K
  • HDR
  • A10X
  • コンテンツも色々契約周りを準備中
  • 4K HDRコンテンツの価格はHD版と同価格
  • 4K HDRにアプコンも?
  • 日本は展開に入ってない、解散
  • 9/15予約9/22発売
  • 32GB $149, tv4K 32GB $179, 64GB $199

iPhone8

  • 4.7inch 5.5inch
  • 3DTouch,TrueTone display
  • SpeakerもiPadProっぽくなるって言ってた気がする
  • A11 Bionic(64bit 6core)
  • 12MP,f1.8,portrait
  • 8は1つ、8 plusは2つなのでportraitはplusだけ?
  • 1080p 240fpsの動画が取れる(楽しそう)
  • ARのために初めて最適化されたソフト、ハードウェア
  • 無線給電(Qi)

  • お店とかと契約して充電口を置いてもらったりするとどこでも充電できる

  • 64GBと256GBだけ
  • 8 $699,8 plus $799
  • 9/15予約 9/22
  • iOS11は9/19

iPhoneX

  • One More Things
  • エックスじゃなくてテンです
  • やっぱりホームボタン消えた
  • Spacegrey , black
  • 5.8inch
  • super retina display
    • 2436 x 1125, 458 ppi
    • 有機EL
    • True Toneじゃないんすね
    • 今までの有機ELの欠点を補うEL
  • タップで起動
  • swipe upでホームに戻る
  • Face ID(顔認証)
    • センサーが凄いので暗くてもできる
    • 写真で開けられるとか、ハリウッドのメークアップアーティストによってそっくりの仮面を作って開くかテストをした
    • 大丈夫だった(ドヤァ)
    • 5万回に一回の誤認識から100万回に一回
  • 今までのtouchID系が大体FaceIDになるらしい
  • Animoji(絵文字が動く)
    • ユーザーの顔の動きと、絵文字の顔の動きが連動
    • アニメーションの絵文字で感情を伝えることができる。
    • なんだこれw
    • messagesには音声も付けられるらしく、それで会話したり
  • swipe downでコントロールセンターが出る
  • カメラ
    • 縦に2つになった
    • f2.4
    • 12MP
    • セルフィーportraitもできる(IRセンサー?)
  • フロント側のセンサーが凄い
  • A11 bionic(8と一緒)
  • バッテリーは7に比べて2時間伸びる
  • AirPower

    • watchもair podsも本体も一緒に充電できる
    • AirPowerは後で発売でwireless対応Airpodsケースも後発売?
  • 64GB,256GB

  • $999から10/27予約11/3発売

まとめ/雑感

  • FaceIDは、ホームボタン指を置くという動作をしなくても画面を表側にすることで本当に何もしなくても認証ができるという、ユーザー体験としては進化している気がする
  • 所有者の意図しない認証解除はどれぐらい出来るのか気になる
  • 全面ディスプレイiPadProが欲しい。それならすぐ買う。iPhoneXは悩んで買う。

エモポイント、締めの言葉は

One of the ways that I believe people express their appreciation to the rest of humanity is to make something wonderfull and put it out there. - Steve Jobs

Slackでcustom_emojiを作った個数が多い人順に出す

これは

JavaScriptしょしんしゃです。リファクタツッコミ歓迎。
Slackでcustom_emojiを作った個数が多い人を降順で出すブックマークレットです。
全部見たい場合は
alert(JSON.stringify(sorted,null,"\t")); の部分を適当にいじってください。

// https://#{YOUR_TEAM}.slack.com/customize/emoji で実行

var name_hash = {};
var list = Array.apply(null,document.getElementsByClassName('author_cell'));
list.forEach(function(row){
    if (name_hash[row.textContent.trim()] == undefined){
        name_hash[row.textContent.trim()] = 1;
    }else{
        name_hash[row.textContent.trim()]++;

    }
});
var sorted = objectSort(name_hash);
alert(JSON.stringify(sorted,null,"\t"));

// {'name' => count}のcount降順Sort
function objectSort(object) {
    var sorted = {};
    var array = [];
    var tmp = {};
    for (key in object) {
        if (object.hasOwnProperty(key)) {
            if(tmp[object[key]] == undefined){
                tmp[object[key]] = key
            }else{
                tmp[object[key]] += ","+key
            }
            array.push(object[key]);
        }
    }
    array.sort(function(a,b){
        if( a > b ) return -1;
        if( a < b ) return 1;
        return 0;
    });
 
    for (var i = 0; i < array.length; i++) {
        sorted[tmp[array[i]]] = array[i];
    }
    return sorted;
}