1 Entry per Day

DroidKaigi 2018のWebサイトとか振り返り

2018-02-13T02:11:00.001+09:00

DroidKaigi 2018が終わりました。今年もWebサイト関係やってました。

当日の担当は公式Twitter警備がメインでした。ちょっと体調が完全じゃなかったので無理せず控室でもくもくとやってようと思ってたんですが、流石にその他諸々な雑用とかもしてましました。

演台のDroidKaigiロゴが曲がっているの申し訳ないな…（俺が貼ったhttps://t.co/uOPPUpRq7E
— りんご🍏GAE/Go, Angular, TypeScript (@mstssk) 2018年2月11日

以下、主にWebサイトについての振り返り。

Webサイトについて

去年の7月くらいだったか。サイト班のwm3さんとpsideさんたちとハングアウトで会話して、今年のサイトの方針についていろいろ決めました。

この2人がかなり動いてくれて、更にその他のスタッフもサイト更新を手伝ってくれたお陰で今年はかなり楽でした。むしろ2人がかなりやってくれて、俺いらなかったんじゃないかレベル。ありがてぇありがてぇ🙇🏼

droidkaigi.jpへドメインを変更

2017まではGitHub Pagesを使っていて、ドメインもgithub.ioでした。今年からはdroidkaigi.jpというドメインに変えています。実のところGitHub Pagesでホスティングしてるのは変わらないんですが、カスタムドメインにすることで将来的に何かしらバックエンドのシステムを持つ場合に差し替えやすいようにする目論見です。

ドメインはCloudflareを使ってSSL対応してます。

サイトジェネレーターとしてGatsbyを採用

GatsbyはReactを使ったサイトジェネレーターです。 2017まではGitHub Pagesの機能を使っていましたが、色々辛かったので全く異なる形に変えました。流れは大体こんな感じだった。

🍏「Liquid辛いいいい」
pside「nokogiri辛いい」
wm3「もうReactでいいのでは」

※Liquid（HTMLテンプレートエンジン）もnokogiri（HTMLパーサー）もGitHub PagesのRubygemが依存してる。

サイトのアーキテクチャ構築もwm3さんがやってくれました。その後の改修などはもちろん俺もやってましたが、React童貞だったのでおっかなびっくり触ってました。

個人的にはLiquidの仕様上の制約により辛かったタイムテーブルページの実装をなんとかできたのが大きいです。

NetlifyやCircleCIを使ったContinuous Deliveryっぽいの

最終的なホスティング先はGitHub Pagesなんですが、別途Netlifyも使っていました。

PRを作るとその内容でビルドしたサイトがNetlifyにデプロイされて皆ですぐ確認できる形になります。 Google App Engineみたいに複数のバージョンをデプロイできるので、PR別(ブランチ別)にバージョンをデプロイする感じです。

PRをNetlify上で動作確認してmasterにマージするとdroidkaigi.jpをホストしているGitHub Pages用リポジトリにCircleCIでpushする流れです。

スポンサー一覧

サイト上のスポンサー一覧は、ベースをサイト班で作った後はスポンサー班が直接PR出してどんどんマージしていく運用でした。途中ちょっとサイズ感の調整のためにデータ構造を変えた以外は、スポンサー班がサイトへのスポンサー様ロゴ掲載をやってくれました。去年までは俺がIllustratorいじくりまわして頑張ってたなぁ。

Sessionizeとの連携

今回は応募トーク管理にSessionize.comを使用することにしました。 KotlinConfでも使われていて、トークの募集・レビュー・採択・タイムテーブル作成まで行える優れものです。

API経由でjsonデータも取り出せます。当初Webサイトでは応募トーク一覧や採択トーク一覧を直接このAPIを叩いて書き出していました。しかし、流石に大量に頻繁にアクセスされることを想定したものではなかったようで、アプリから参照されたりすることも考えるとパフォーマンスに不安がありました。最終的に、一旦jsonを落としてきてから静的にデータを持っておく形になりました。データはCircleCIのcron機能で日次で更新していました。

他方、基本的にSessionizeをマスターデータにしたいものの、サイト側やアプリ側の表示制御のために独自に追加したい項目もあったりしました。そのために、サイト上に置いているjson(タイムテーブルの描画にも使ってる)はビルド時に加工したファイルになっています。

次回のDroidKaigiに向けて

色々改善できたり新たな試みを試した結果、欲や改善点も出てきました。

もっとCMS化したいかも
- 他のスタッフも作業しやすいほうがいいよね
- 公式Twitterやアプリとの連携も
日英だけじゃなく両方の言語というセッションがあった…
- これは急遽言語区分を追加して対応した。来年は最初から考慮しよう。
スポンサー情報のマスター化
- アプリ側との連携を考えずにスポンサーページを作ったので、あとから無理やりスクレイピングしてスポンサー情報jsonを作るという辛み溢れる状態になっている。
- 来年は最初からマスターデータの形を考えておこう。
Sessionizeとの連携をもっと楽にやりたい
- 一旦jsonを持ってくるとかちょっとアレ
- 間にFastlyか何か挟むとか
- Fastly使ってみたいだけとも言う

その他

最近裏方業ばっかりなので、今年は登壇とか増やしたいななぁ。

とか思ってたら、まだ動画やスライドの公開作業あったよオイ。

Safariでposition:stickyが動かないとき

2018-02-01T13:55:00.001+09:00

position: sticky;最高
— りんご🍏GAE/Go, Angular, TypeScript (@mstssk) 2018年1月30日

と思ったらSafariで効く場合と効かない場合が https://t.co/vrVonHF1p0
— りんご🍏GAE/Go, Angular, TypeScript (@mstssk) 2018年1月30日

position: sticky;はSafariでは親要素にdisplayがblockまたはinline-blockでないものがあると効かなくなるようだ。
Angularで独自の要素名のタグをぶち込んでるとsticky効かなくて困った。
— りんご🍏GAE/Go, Angular, TypeScript (@mstssk) 2018年1月30日

AngularでFailed to execute 'send' on 'XMLHttpRequest'とか出た時にやること

2018-01-21T23:49:00.001+09:00

Angularで開発していて、ビルド時やテスト時にFailed to execute 'send' on 'XMLHttpRequest' というエラーが出てわけわからん場合がある。
ng test --sourcemaps falseのように--sourcemapsオプションを切って実行してやると、詳細なエラー情報が出てくれる。

参考

フロントエンド初心者がMEANスタック(MongoDB+Express+Angular+Node.js)でアプリを作ってみて躓いたこと - Qiita https://qiita.com/Takumon/items/3f813016e42a129fff5d
Regression wrong error message during tests if runtime error occurs after constructor · Issue #7296 · angular/angular-cli https://github.com/angular/angular-cli/issues/7296

🍺について

2017-12-04T00:00:00.000+09:00

この記事はBeer Advent Calendar 2017の12月4日です。ビールについてならなんでもOKらしいので、🍺について話します。

この記事を読んでいる皆さんは「🍺」がどう見えているでしょうか？

ジョッキに注がれたビールに見える
- あなたはモダンブラウザでこの記事を読んでいますね
ビールに見えるが白黒
- まだAndroid 4.3使ってるんですか
「�」に見える
- 文字化けとるやん

2と3の方は今すぐ使っているPCかスマホを更新しましょう。

さて、1の方は具体的にどんなふうに見えているでしょうか？そして、あなたが見ている🍺は他の人も同じ🍺に本当に見えているでしょうか。

PCやスマホで表示される絵文字は結局はただの書体の一つに過ぎないので、環境によって表示が異なります。次のURLにはいろんなメーカーやアプリでの🍺の表示リストが載っています。 https://emojipedia.org/beer-mug/

いろんな絵がありますが、いずれも「ジョッキに入ったビール」として認識できると思います。この絵文字はUnicodeで「beer mug」として定義されており、その指針に従ってどのプラットフォームも表示を実装しているからです。

また「🍻」という絵文字もありますね。こちらは「clinking beer mugs」です。

しかし、絵に過ぎないので、度々不幸なミスも発生します。

Hmmmm, Google, this is not how beer works pic.twitter.com/rLsmThcLKM
— Thomas "Kick Nazis out, @jack" Fuchs (@thomasfuchs) October 29, 2017

Android 8.0での🍺の絵文字は泡とビールの間に謎の空間が出来てしまっています。この不具合はAndroid 8.1で修正されています。

他の絵文字にはさまざまな問題が起きていますが、幸いながら🍺については上記のちょっとした表示ミス程度しか問題が起きていません。皆さん、安心して🍺を使っていきましょう。飲んでいきましょう。

ページ右下に熱盛を出すだけのUser Styleを書いた

2017-08-30T20:00:00.002+09:00

ものすごく邪魔。

@mazamachiさんの「たまに熱盛が出てしまうextension」が面白そうだったので作った。

中身はコレ。

StylishといったUser Styleを設定できる拡張機能を利用したりして使う。

transitionやらanimationやら設定して忘れた頃に「熱盛！」ってドンと出る実装はできそうだけど、ここまでやって満足してしまった。

問題があって、Stylishでやるとiframeの中にまで熱盛するので、Twitterのタイムライン中の埋め込み動画やBloggerの画像アップロードダイアログの中にも熱盛が出てしまい、笑いをこらえながらこの記事を書いています。

cron.yamlのdescriptionに日本語を書いてはいけない

2017-08-29T19:21:00.000+09:00

TL;DR

Google App Engineのcron.yamlのdescriptionに日本語を書くと、アップロード処理がInternal Server Errorになることがある。
なので、基本的に英語で書いておくのが無難。

確認したのはGo言語のStandard Environment。

なにが起きたか

既存のプロジェクトでcron.yamlに記述している6つの設定のdescriptionを全て日本語に書き換えた。
CIで自動デプロイしているのだが、何故かcron.yamlのアップロードだけInternal Server Errorのため失敗しているログが出ていた。
デプロイスクリプトのexit statusがnon-zeroにならないという別の問題も発生しており、気付かないうちにcron.yamlのアップロードに失敗したり成功したりを繰り返している謎の挙動になっていた。
失敗したり成功したりはサーバー側で発生しており、デプロイを行うのがgcloudコマンドでもappcfgでも同じ状況。

どうやら次の繰り返しになっていた。

cron設定が無い状態
cron.yamlをアップロード → これは成功し6つすべて反映される
別のCIでcron.yamlをアップロード → Internal Server Errorが発生し、6つのcron設定のうち3つだけが何故か残っている状態に
更に別のCIでcron.yamlをアップロード → Internal Server Errorが発生し、残り3つも消えて、cron設定がない状態に
0に戻る

cron設定が3つ以下の場合は、上の挙動の3番目が抜けるだけで成功と失敗を繰り返しすのは一緒。

今回の現象が起きる前から6つのcron設定を同じCIで常にデプロイしていたが、失敗はしていなかった。
1つ日本語のdescriptionも混ざっていたがアップロード出来ていた。
おそらく6つすべて日本語に書き換えたため発生した。

推測と対応

cron.yamlを書き換えつつ gcloud app deploy cron.yaml --project foobar を何度か実行した結果から、次のような現象だと推測している。

cron.yamlのアップロード処理は既存の設定を一旦全てクリアするため、3つずつ削除している
そこに日本語のdescriptionが含まれていると失敗しInternal Server Errorになる
消し損ねたものは次にcron.yamlをアップロードする時に削除される
そのためcron設定が4〜6つある場合は、2回アップロードに失敗して（3つずつ削除して）全て消しこんでからでないとアップロードに成功しない
既存の設定のdescriptionに日本語が含まれている時に発生するので、一旦すべて削除したから英語のdescriptionだけのcron.yamlをアップロードすると成功するし、その後も英語のdescriptionであれば問題ない

というわけで、一旦空のcron.yamlを 2回アップロードして（2回Internal Server Errorにして）から英語だけのdescriptionのcron.yamlを何度かアップロードしているが、今のところエラーは発生せず反映されている。
また、コメントに日本語入っているのは問題ない様子。

TODO issue登録

えいえんのケチャガールへの道＆C92宣伝 #Splatoon2

2017-08-05T23:00:00.001+09:00

Splatoon2のはじめてのフェスでしたね！
今回はマヨネーズvsケチャップで、ケチャップ側につきました。

2017/08/05のお昼頃からはじめて休憩はさみつつ2時間半弱で、フェス称号のカンストである「えいえん」まで行きました。
ちょうど30戦やって勝ったのは18戦でした。勝率60％でしたが、正直もっとうまく立ち回らないとガチマッチで上にいけないなー、という気持ちになりました。

えいえんのケチャガール到達 #Splatoon2 #スプラトゥーン2 #NintendoSwitch pic.twitter.com/zwk4oO69xl
— りんご🍏C92 1日目東せ13a (@mstssk) August 5, 2017

戦績をメモっていたので簡単に振り返ってみます。

最初N-ZAPを使っていて何度か黒が付いたので、遠目から着実に立ち回ろうとジェットスイーパーに切り替えましたが、むしろ近づかれて倒されるシーンが増えてしまいました。
あとで確認したら、N-ZAPでは7割弱だった勝率が、ジェットスイーパーでは６割に落ちていました。
もう少し近距離にも対応できるようデュアルスイーパーに切り替えましたが、そこから連敗してもっとひどい状態に。
そろそろデュアルスイーパーに慣れて勝ち星が付き始めたところで、「えいえん」に到達しました。

ブキ別勝率	N-ZAP	ジェットスイーパー	デュアルスイーパー
勝率	69.23%	60.00%	42.86%
回数	13	10	7

ステージ別の勝率を見ると、母数が違うので一概には言えませんが、海女美術大学が一番勝てています。
海女美術大学は侵攻ルートが限られていて守りやすいので堅実に立ち回っていれば巻き返せるステージです。

一方でバッテラストリートの勝率は芳しくありません。
押し込みまくっって勝つか、その逆をやられて大敗するか５分５分な感じでした。味方の状態を見てもっと堅実に立ち回って前線を確保できていれば勝率は改善できそうだと思います。

ステージ別勝率	コンブ	ミステリー	タチウオ	海女美術大学	バッテラ
勝率	0.00%	66.67%	66.67%	71.43%	50.00%
勝ち星/回数	0/1	6/9	2/3	5/7	5/10

30戦全体の戦績は次のとおりです。

	勝敗	ステージ	称号のタイミング	備考
1	lose	コンブ	ふつう	12:30開始, N-ZAP
2	win	ミステリー
3	win	ミステリー	まこと
4	win	タチウオ
5	win	ミステリー
6	win	タチウオ	スーパー
7	lose	タチウオ
8	win	海女美術大学		13:00ステージ変更
9	lose	海女美術大学
10	win	ミステリー
11	win	バッテラ
12	win	バッテラ
13	lose	バッテラ
14	win	ミステリー	カリスマ	ジェットスイーパーに変更
15	lose	バッテラ
16	lose	バッテラ
17	win	バッテラ
18	win	ミステリー
19	win	海女美術大学
20	win	海女美術大学
21	win	海女美術大学
22	lose	バッテラ
23	lose	ミステリー
24	lose	バッテラ		デュアルスイーパーに変更
25	lose	海女美術大学
26	lose	ミステリー
27	win	海女美術大学		身内戦
28	win	バッテラ
29	win	バッテラ
30	lose	ミステリー	えいえん	14:48えいえん到達

おまけ(宣伝)

今夏もコミケ(C92)に行くんですが、一緒に出展するvvakameさんが「負けたくない！Splatoon2」という出すそうです。
レビューで読ませてもらいましたが、チームプレイの心構えといったところから書かれていて、Splatoon2を知らなくてもある程度楽しめる内容になっています。この本自体の入稿体験記も載っています。

#C92 1日目東せ13b ひかる黄金わかめ帝国頒布物情報。
Revised^2 TypeScript in DefinitelyLand (第3版 v2.4対応)
負けたくない！Splatoon2 (ゲーム攻略 & vvakameが入稿やってみた本)
両方後日Web公開予定 pic.twitter.com/TB4clnvN9M
— わかめ@TypeScript味 (@vvakame) August 4, 2017

俺も「Edge of Android 8」という本に「ツは通知のツ」というタイトルでAndroid 8 Oで大きく変わるNotification関係について書いてます。

「Edge of Android 8」にAndroid 8での通知の話を書きました。3年前にLollipopでの通知周りの大変更の話を書きましたが、それ以来の大変更についてまた書いてます。通知チャンネルだけじゃないんだぞ！https://t.co/2adDyAEvEm
— りんご🍏C92 1日目東せ13a (@mstssk) August 4, 2017

ng-japan 2017に行ってきた

2017-06-18T00:20:00.001+09:00

ng-japan 2017に行ってきました。
ツイートとスライドをまとめただけの記事です。

Track A: #ng_jpA
Track B: #ng_jpB
#ng_jp
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Keynote: How to Think About Angular

Keynote: How to Think About Angular #ng_jp
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Playground for Angular https://t.co/HiLBkW3BSM
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

ABC = Angular + Bazel + Closure #ng_jp

なんか聞いたことがある
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

BREAKING CHANGEはアプリを壊し休日出勤しなくちゃいけなくなり車の排気ガスが増え、ひいては地球環境を破壊するのでよくない
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

RxJSを活用したアプリケーション開発

フロントエンドエンジニアが多いプロジェクト→設計思想を統一しておかないと大変→CQRS（Command Query Responsibility Segregation）はどうか#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

CQRSは本来サーバー側実装で使う思想なので、フロント用に少しアレンジ#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

RxJSのpartitionはストリームを分岐できる #ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

すげー冗長な設計だけど、そのくらいやらんと300 Components、500 Servicesを作っていくのは辛いんやろうな #ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

RxJSを使う上でおすすめしないこと
•ストリームがスパゲッティになるのでcombineLatest()をやりすぎない
•初期値がいらないストリームではBehaviorSubject(null)でなくReplaySubject(1)で最新１件取得#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

CQRSを学ぶために「.NETのエンタープライズアプリケーションアーキテクチャ第2版　.NETを例にしたアプリケーション設計原則」という本を使っているそう。

You need to know SSR

「普段はReact勢なんですが、今日は魂を売りました」 #ng_jp #ng_jpB
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•First Viewのパフォーマンスを改善したい
•First Viewの定義を定義してから話さないと混乱するので気をつけよう
•Navigation startからFully Loadedまでの間に何段階もある
#ng_jp #ng_jpB
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•SSRの致命的な点がいくつかある
•HTML生成はCPU負荷が高い
•Node.jsではメインループをブロックする#ng_jp #ng_jpB
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•HTML生成はReactもAngularも重い
•現実解としてはHTMLをキャッシュしたり最初に見える範囲だけレンダリングしたりしよう
•それも茨の道。キャッシュをいつ消すの？ユーザ固有の情報は？結局サイトの内容によって方針は変わる#ng_jp #ng_jpB
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•見える範囲だけレンダリングしても、それ以外の範囲は？
•SEOの問題が残る
#ng_jp #ng_jpB
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Angularアプリのテストについて

AOTするとTypeScriptの静的解析になるので、これをまずAngularでやるべきテストと考える #ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

TSのStrict Null Checkを使いつつAOTすると、テンプレート中のプロパティのNull Checkも走る。テンプレート中のnull参照しそうなコードを検出できる #ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

ngfactory.tsを気合で読むとたのしい
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•Angular CLIでプロジェクト作るとテスト環境も構築済み#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•Isolated Testing
•Componentのクラスをえいやとnewしてロジックだけテストする#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•Shallow Testing
•下層のコンポーネントを描画せず、そのComponentだけ動かしてテストする
•そのComponentのテンプレート中のExpressionをテストする#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•Integration Testing
•Componentに必要なもの全部描画して動かす。重い。#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

#ng_jp #ng_jpA

うまいこと使い分けたいけど、結局Integration Testingばっかりやっちゃうよな…
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•Karma駆動開発（オレオレ用語）
•Karmaのデバッグ画面見ながら開発する
#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•描画後の画像でComponentの差分チェックしてみた
•分岐元のブランチのスナップショットを正としてimagemagickで画像差分チェックする
•CSSのstyleやpipeの結果などはIntegrationテストじゃなく画像差分でいける
#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Web Payments + Credential Management API

これはAngularのトークではなく、ブラウザでの支払いフォームなどの改善や新機能の紹介。
※スライドのURLを見つけられなかった。

•スマホで通販で買い物するのくっそ大変
•入力しづらい
•サイトによってまちまち
#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•inputのautocomplete属性がちゃんと入っていると、ブラウザのautofil機能がうまく動く
•今すぐできる確実な改善なのですぐやろう！
• https://t.co/iqZjfANJKz #ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•ブラウザのPayment Request API
•支払情報などの入力フォームをOS側で用意する機能
•支払い処理を代替するわけじゃなく、単に共通のUIを提供する
•ブラウザに覚えさせておいた支払情報や配送先を使える#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•配達先などが変更された場合の処理は？
→ イベントが発火するのでハンドリングしよう
•クレカ情報を生で渡すのはこわい
→Tokenizationして扱う
→支払いだけ別にPayment Appを使うこともできる#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•Payment App
•支払いだけブラウザではなくそれぞれのプラットフォーム（iOSとか、他のOSとか）側のアプリに依存する仕組み（つまりそれぞれ非互換）
•例えばAndroidならAndroid Pay#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•Payment Appはプラットフォーム依存なので、PWAでできるようにするPayment Handler APIを仕様策定中
•Service Workerを使う#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•Chrome for iOSでも使えるようになるぞ
•iOSではPayment Appとは非互換だが同じような機能を提供するApple Pay JSがある#ng_jp #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Apple Pay JSをPayment Request APIと同じように使えるwrapper
https://github.com/GoogleChrome/appr-wrapper

FIDOって「ファイドー」って読むのか… #ng_jpa
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Angular, Firebase, Cloud Functions for Firebase

スライド

NoSQL的なものっていきなり触るとすげー困るのわかる#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•Angular,Firebase,Cloud Functionsの10の良い事
•非同期がわかる、リアクティブプログラミング、関数型がわかる、データベースがわかる、不便なDB検索機能で鍛えられる、認証機能が使える、ストレージ機能、CF便利、英語力鍛えられる #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

関数型はモテる。

•Firebase Web Codelabというのがある
• https://t.co/qqWxbshjJ2
•↑の別版↓
•Cloud Functions for Firebase(Angular)
• https://t.co/7LhqFRPSWI
#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

• Firebaseのサンプル
• https://t.co/RJV5ylJz6z
#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Advanced Component styling with Angular (v4+)

Advanced Component styling with Angular (v4+) 始まった#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

https://t.co/I71iIeL7yt
#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Componentのcssやtemplateの書き方いろいろある
templateまたはstylesで直接Componentのコードに書くか、templateUrl, styleUrlsで別ファイルを参照するか
#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•Componentに外からclass属性を設定するときはngClass、任意のスタイルならngStyle
•HostBindingでComponent内で設定もできる。 class.foobar とか
#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

時間切れたｗ
#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Best practices for modules in Angular

Best practices for modules in Angular#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Angular公式のスタイルガイドhttps://t.co/bU4CIJyquY
#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

•Lazy Loadingしよう！
•webpack-bundle-analyzer使おう
　•gzip後の状態も見れる
•パッケージを小さく保とう
　•メンテナンス性などのため#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Decoupling Business Logic #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

自動化大事 #ng_jpa
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Angular Animations

スライド

Angular Core TeamのMatias NiemeläによるAnimationについて #ng_jpa
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

https://t.co/sjBLCsERYE
#ng_jpa
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

ブラウザがWeb-animations APIをサポートしている
CSSなしでアニメーションを実装するLowレベルなAPI
AngularからそれにアクセスできるDSLがある
#ng_jpa
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Animatin Bindings！
データバインディングしているプロパティに連動してanimationもテンプレート中で書ける
#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

#ng_jpA

俺の仕事のPJだとスタイル関連は完全に全体のcssに出してあるから、animation bindingは使いづらいな…
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

#ng_jpA
DSLが黒魔術じみてきた
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

What's New in Angular Material

Autocomplete や Datepickerふえたよー。今後も対応部品増やしていくよー。というトーク。

input要素にdirectiveつけて使うこともできるのか >Datepicker

#ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Data Tableほしいぞ #ng_jpA
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

RTL対応つっらそう
#ng_jp
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

お疲れ様でした pic.twitter.com/0BTLbKpSen
— りんご🍏C92 1日目東せ13a (@mstssk) June 17, 2017

Google I/O 2017 初渡航KPT（非技術記事）

2017-05-17T18:51:00.000+09:00

初渡航だよ。

2017/05/15に入国、16日までの時点での気付きを、雑だけどKPTにまとめてみた。最終日までにアップデートはあるとおもう（記事を更新するとは言っていない）。

登壇予定の Google I/O 2017 フィードバックセミナーもよろしく。

Keep

~~成田の出国ゲートの職員さんが可愛かった~~
自動化ゲートの登録をしておくと、入出国の手続きがスムーズになる
無印良品のネッククッション
- 飛行機の中で寝る時に色んな形で使える。首に巻いてネックピローにしてもいいし、抱きまくらにもなる。座席で同じ体勢で寝続けるのが辛いので色んな形になるこの商品がちょうどよかった。
耳栓
- 機内は大型のトラックや重機のエンジンのそばにいるような騒音が鳴り続けてます。それが高速道路を車で走ってる時くらいにはなる。
1日余裕を持って現地入りする
- 到着したその日は時差ボケで眠すぎてほぼ何も出来ない

Problem

時差ボケ
- ホテルにチェックイン直後に寝入ってしまった(日本時間で深夜だった)
- 2日目も同じ時間帯(日本時間では深夜)に眠くなってしまった。
SIMのアクティベートのミス
- ZIP SIMというのを購入した。SIMを入れた直後に滞在地のZIPコードをSMSで送ると、そこの地域の電話番号が割り当てられる。
- ZIPコードを送らないと、ランダムな電話番号が割り当てられる。カリフォルニアに居るのに東海岸エリアの番号になってしまった。
- ※参考: https://www.amazon.co.jp/dp/B01ESSHHSM の商品説明
SIMの電話番号重複
- 以前別の人が使っていた番号らしく、知らない電話がかかってきたり…
- Uberも↑のせいで登録できずサポート問い合わせ中
- Lyftは同じ番号を使っていた別人のアカウントを引き継ぐかとか聞かれてしまった
旅行用に買った安い財布のジッパーが開けづらかった
耳栓のサイズ
- サイレンシアのMだと少し大きかった
アイマスク使わなかった。
- 狭い機内で荷物の出し入れが大変だったので、横着して席に元々あったブランケット被って凌いでいた。
- 帰りはちゃんとアイマスク使ってみよう。
喉の乾燥防止用のマスク
- 同上
衣類をTシャツと下着とセットで圧縮袋にいれておいたが、探しづらい。
- 一方で、Tシャツだけ下着だけの圧縮袋に分けると、1度目に着替えを取り出す時に全部解凍することになる…

Try

財布はもっと使いやすさを考えて買おう
プリペイドSIMでUberやLyftなど電話番号が必要なサービスを登録した場合
- 後で電話番号の登録を消したりアカウントを消したりしておく
衣類は小さめの圧縮袋に種類ごとにまとめて入れておく
- 種類ごとにすることで探しやすくする
- 小さめのもので小分けにしておくことで、ちょっとずつ解凍できるようにする

golang.tokyo #1 行ってきたメモ

2016-10-25T22:21:00.000+09:00

2016/10/25にメルカリで行われたgolang.tokyo #1に行ってきたメモ
http://golangtokyo.connpass.com/event/39965/

Twitterのハッシュタグは #golangtokyo

知らない名前がたくさん出てきて半分以上聞き漏らした

メンバーのGo教育

レビューでGoっぽくない書き方を指摘するときは、blogとか外部の資料を参照して指摘する（レビュワー個人の意見ではなく一般的な点だと伝える）

IDEやデバッグ

vim, InteliJ, Atom, emacs
- だいたい何かしらプラグインがある
会場内でデバッガ使ってる人はあまりいなかった
Bleveっていうのがあるらしい

コーディング規約は？レビューの指針は？ golintに従ってます？

変数名は簡潔にする（Goの文化）
- でも事業ドメインなコードを書く場合どうしても説明的になっちゃうのは仕方ない
正規表現のMustCompileの使い方
golintは対応しておこう
- ただし辛い場合はベストエフォートで。
- golint使っとくと、いけないコードをパートナーに指摘するときに言いやすい。

Webフレームワーク・テンプレートエンジン・ORM

gin
https://github.com/go-xorm/xorm
https://github.com/flosch/pongo2
テンプレートについては、そもそもフロントエンドはreactとかangular任せな場合が多い

エラー処理どうしてますか？

pkg/errors
- 外部ライブラリがまともなエラーを返さない場合にいい感じにwrapしよう
errgroup
必須なものがないとかいう場合は積極的にpanic使おう

goのお手本になりそうなもの

https://github.com/aws/aws-sdk-go
https://github.com/google/go-github
kaneshin「俺のGitHubを見ろ！」
- https://github.com/kaneshin

ロガー

パッケージ分け

責務で分けたい？機能で分けたい？

ドメイン単位で切る
- ニュース、ユーザーとかのドメインで分けてその中でデザインパターン
internalパッケージはライブラリを作るのでなければ使わない方がいい

テスト周り

GAE向けのアプリ使う場合でも、出来るだけgo本体だけで完結するようなロジックにして疎にしておく
テスティングフレームワーク使わない(testingのみ)
- テストのためだけのミニ言語を覚えるとかめんどいし、後からのメンバーの受け入れコストもある
出来るだけDBのテストは書かない
- データはすべてinterfaceを定義しておけばモックできる
できるだけDB立ててテストするべきだよ派も

デプロイまでのフローとか工夫してる点、CI

goは基本ビルドが早い
- 循環インポートとか周りから依存されまくってるパッケージが変わるとキャッシュが使われずフルビルド走っちゃう。ビルドが遅い場合は設計が悪いかも。
- kaneshin「そういう事があって、ペアーズのビルドは遅くなっちゃってる。別に一人で書いてるやつは早いけどね！」
本番ビルドはChatOpsで3回コマンド叩かないといけない、とか
- 3回の中で他メンバーのチェックを入れるようにしたり

pprof使ってる？本番のモニタリングとかチューニングとか

pprofでなくdd
stringを+で繋ぐな、とか地味なやつ

リファクタしたいところ／Goのイマイチな点

テンプレートエンジン…
timeのフォーマット…

メモ

パッケージの分け方について

Golangのパッケージの分け方やディレクトリ構成は benbjohnsonの https://t.co/9wKKDlHW6O と Peter Bourgonの https://t.co/PMI4zFT155 が決定版ですかね．今の所は． #golangtokyo
— Taichi Nakashima (@deeeet) October 25, 2016

El CapitanでBlockdiagのインストールに失敗した

2016-03-10T11:22:00.001+09:00

事前に入れておくべきソフトウェアを入れてなかったので、遠回りしたよ。という話。

ちゃんとドキュメント読まなかった自分への自戒のために記す。

環境

Mac OS X 10.11.3 El Capitan

現象

これで行けるらしいがeasy_installでエラーになった

brew install freetype
sudo easy_install blockdiag

試したこと

easy_installのアップデートしてからインストールしなおし
```
sudo easy_install -U setuptools
```
こんどはPillowがねーよって言われたので入れる
```
sudo easy_install pip
sudo pip install Pillow
```
funcparserlib「フハハハ、Pillowを倒しても俺が」
```
sudo pip install funcparserlib
```

これで動くようになった

Android StudioとGradle wrapperが違うdebug.keystoreを使う問題

2015-11-15T02:26:00.000+09:00

TL;DR

Android Studioとgradlew(またはgradleコマンド)とで、installDebugで使うdebug.keystoreが別になっているっぽかった
~/.android/debug.keystore を使うんじゃねぇのかよ！
http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Signing-Configurations
INSTALL_FAILED_UPDATE_INCOMPATIBLE になってウザい
環境変数 ANDROID_SDK_HOME を消したら直った

嘆き

んー、やっぱgradlewつかってinstallDebugした時、 ~/.android/debug.keystore じゃない何かを使っているぞWTF
— あんどろいどりんご@3日目東シ58a (@mstssk) November 14, 2015

色々試した↓結果

原因わかったけど、これはundocumentedな挙動ではないのか…
— あんどろいどりんご@3日目東シ58a (@mstssk) November 14, 2015

それっぽいissueを見つける

Issue 162179 - android - Android Studio and Gradle wrapper use different default keystore Google Project Hosting https://t.co/O7cEYgcpXt
— あんどろいどりんご@3日目東シ58a (@mstssk) November 14, 2015

真理に至る

環境変数 ANDROID_SDK_HOME があると、gradlew installDebug コマンドでは $ANDROID_SDK_HOME/.android/debug.keystore を使いやがるので、 ~/.android/debug.keytore と違う署名になる
— あんどろいどりんご@3日目東シ58a (@mstssk) November 14, 2015

くっそおおおお
— あんどろいどりんご@3日目東シ58a (@mstssk) November 14, 2015

Wii Uを買って面倒くさい繋ぎ方をした

2015-06-02T00:44:00.001+09:00

イカのアレがやりたくなったので、Wii Uを買いました。

しかし、テレビを持ってないので、PC用のディスプレイに繋げてます。しかもHDMIじゃない。
音声は別出力にしてスピーカーに繋げたりで、ちょっと面倒くさい感じになりました。

構成

基本的にまとめwikiの通り。
Display側がDVI-Dでも問題なく繋がって、1080pで映像出力出来てます。

.   Display           スピーカー
    (DVI-D)               |
       |       ステレオ-ミニプラグ変換ケーブル
       |                  |
HDMI-DVI-Dケーブル      AVケーブル----コンポジット映像※使わない
       |                  |
     (HDMI)          (AVマルチ出力)
    Wii U本体 -------------+

Display: Dell U2311H
スピーカー: Dell AX510PA TFTモニタ用スピーカ
HDMI-DVI-Dケーブル: だいぶ前に買ったやつ
AVケーブル: Wii U専用AVケーブル
ステレオ-ミニプラグ変換: ~~CN-2010A, AP-119A~~
<追記 2015/06/06> 変換ケーブルとコネクタの多段はさすがに邪魔だったので、 35SF-R2V を秋葉原ラジオセンターで買ってきた。なんでもあるねあそこ。

繋ぎ方・設定の仕方は、任天堂の説明ページ「接続例：アクティブスピーカーを使用する場合」を参照。
設定には、Wii Uの本体のシステムバージョンが4.0.0J以上にアップデート済みである必要があります。

参考

接続例：アクティブスピーカーを使用する場合
http://www.nintendo.co.jp/support/qa/a/wiiu/connection/index.html
Wii U まとめwiki - よくある質問「映像をHDMI端子、音声をAVマルチ出力端子（アナログ）から同時に出力できる？」
http://www47.atwiki.jp/nintendocafe/pages/13.html#id_5e459fe8

Nexus9にAndroid M Previewを焼く

2015-05-30T00:38:00.001+09:00

Android MのDeveloper Previewが公開され、システムイメージも公開されました。
焼く手順は Flashing Instructions に書いてありますが、実際やったら躓いたのでメモ。

環境

Mac OS X 10.9.5
Android SDKなどはセットアップ済み
Nexus9はまだOEMロックしたままだった

手順

Nexus9の開発者オプションで「OEMロック解除」の許可にチェックを入れる。
※Androidのバージョンによっては表記が違うかも。
下記URLからNexus9用のシステムイメージ(volantis-MPZ44Q-preview-d15ad483.tgz)をダウンロードし、解凍する。
http://developer.android.com/preview/download.html#images
Nexus9をUSB接続する(ADB接続できるようにしておく)。
adb devicesとか叩いてADBが繋がること。
adb reboot bootloaderを実行する。
Nexus9にHBOOT(Nexus9のブートローダー)の画面が表示される。
fastboot oem unlockを実行する。
Nexus9の画面が切り替わり、OEMアンロックするかどうか確認される。
Volume UpキーでYesを選択する。
データがクリアされた後、ブートローダーの画面が表示される。
ダウンロードしたシステムイメージに同梱されてるflash-all.shを実行する。

なんかエラー出た。

target reported max download size of 518205818 bytes
archive does not contain 'boot.sig'
archive does not contain 'recovery.sig'
fastboot(13207,0xa14a01a8) malloc: *** mach_vm_map(size=2132963328) failed (error code=3)
*** error: can't allocate region
*** set a breakpoint in malloc_error_break to debug
failed to allocate 2130828644 bytes
error: update package missing system.img

image-volantis-MPZ44Q.zipの中身の焼きこみに失敗してるらしい。

image-volantis-MPZ44Q.zipを解凍して、中身の各imgファイルを書き込むコマンドを実行する。
下記をすべて実行する。

fastboot flash boot boot.img
fastboot flash recovery recovery.img
fastboot flash system system.img
fastboot flash cache cache.img
fastboot flash vendor vendor.img

終わったらリブートする(ブートローダー画面でREBOOTを選択)。
Android M Previewが起動する。
※必要ならOEMロックする。ロックするときもデータはクリアされる。

参考

Downloads | Android Developers
http://developer.android.com/preview/download.html
Factory Images for Nexus Devices | Nexus Files for Developers | Google Developers
https://developers.google.com/android/nexus/images
iishikawa's weblog :: Nexus 5 を lollipop にアップデート
http://iishikawa.s371.xrea.com/post/android/nexus5lollipop.html

Google I/O 2015 Keynote

2015-05-29T04:40:00.001+09:00

Google I/O 2015 Extended Tokyoで観たKeynoteのメモ

date : 2015-05-29
place : 六本木TOHOシネマズ

Keynote

全周囲スクリーンでピンポンやってた

Android M Developer Preview

品質改善を目指す
バグ修正
プラットフォームの抜本的な要素の見直し

カスタマイズ重点

App Permissions
- AppOpsがちゃんとリリース
- 機能の使用時にユーザーが許可/不許可を選べる
  - もちろん、本体設定で後で(または先に)変更できる
- 8つのパーミッション？
Web Experience
- Chrome Custom Tabs
- タブをプリフェッチ？
App Links
- Intent起動を賢く出来る？
- ユーザの選択を奪うだけに見えた
Mobile Payment
- Android Pay
- 決済サービス
- 実店舗でもアプリ内でも
指紋認証(Fingerprint Support)
- Password Credentialとして使える
- デバイスアンロックとか
- Play Storeで購入時の認証にも
Power & Charging
- Doze というプロジェクト？
- Nexus6にM乗せたら、2倍電池が持つようになったよ！
- USB type-Cで高速な充電
- Android端末自体をモバイルチャージャーにできたり
細かい所の使い勝手改善
- コピペのUIとか
- 音量設定UI
  シークバーの所に着信音・メディア音量・アラームの3つのシークバーが並ぶ。
その他いろんなfeatures
- 「最も洗練されたバージョンです」
  ↑いつも言ってない？

Android Wear

機種が増えてるよ！
ウォッチフェイス大事！
always on
常にウォッチフェイスを表示できるようになった
白黒のLow-powerモード
手首をひねる動作で操作できる
手書きでEmojiを入力できる(手書きしたものを認識して対応する絵文字を探す)

Brillo

Internet of Thingsのためのもの
Androidからの派生
IoT的な機能を最小限のfootprintで実現できるように
Weaveというスキーマ?
JSON
クラウド,電話,Brilloデバイスを繋ぐAPI

BrilloのDeveloper Previewは第3四半期
Weaveのは第4四半期を予定

検索の改善

画像認識の進化
ニューラルネットワークによるDeepラーニング
コンテキストを含めた検索

Google Now

3つの柱
- Context
- Answers
- Actions

Now on Tap

Android Mの新機能
より深くコンテキストを理解して検索する
しかも音声認識で自然言語検索
アプリ側の変更は不要
デモ
- 音楽を再生中に「彼の本名は？」と音声認識で聞くと、そのアーティストの本名が出てくる
- 「○○という映画を見に行こう」というメールで使えば、映画の情報を出してくれる
- レストランで読み方がわからないメニューがあった時、画像検索してみる
  適当にそれっぽく読んでも、メニューを見ているというコンテキストを理解して検索してくれる.

Google Photos

(アイコンは見覚えあるけど) 新しいサービス
写真・ビデオをうまいこと整理・管理してくれるサービス
人・モノ・場所によって自動で分類
写真の内容を画像解析済みなので「トロントの大雪」で検索すれば、ちゃんとその時の写真が出てくる。
複数選択の賢いUI
1つ長押しして選択状態に -> そのままドラッグして範囲選択！
一覧で年月日の細かさをピンチイン/アウトで切り替わり
相手がアカウントを持っているかとかログイン済みかとか気にしないで共有できる
無制限・無償なバックアップストレージ
どんな高解像度・巨大なファイルサイズでもよい
今日からすぐ使える！
(※なにそれこわい)

次の10億人へ向けて

　いろんな取り組みの紹介

Google Translatesのビデオ
次の2年で12億のスマートフォンが増える
Android oneデバイスが新興国でどんどん増えてる
Chromebookも普及してきてる
しかしネットワークはまだ遅い。なので最適化をしている。
ChromeのOffline Support
Google MapのOffline Maps対応を目指している
オフラインでも周辺の施設を検索したり
そのまま音声案内ナビゲーションを開始したり

開発者へ

Develop

Android Studio 1.3
- C/C++ サポート
- Gradle早くなる？
Polymer 1.0
- Polymer Elements
Cocoapods
Cloud Test Lab
- apkをアップロードすると、世界のトップ20の機種でのテストをしてくれる！
Firebase

Engage

App Indexing
- めっちゃAppLinkがある
- iOSでも実験中
Cloud Messaging
- iOSサポート
- Android, iOS, Chrome の3つのプラットフォームで
Chrome
- Push Notification
- Add to Home screen
App Install Ads
- iOSサポート
Google Play
- デベコンでもっといろんな情報を見れるように
- Analytics
- Play Store Listing Experiments
- Developer Pages
  - 開発者が自分の他のアプリを紹介したり出来るページをPlay上で
AdMob
- Analyticsしてるよ
- メディエーション増えてる。直近だと中国のTencent

Google Play上でのアプリの検索

10億人ものユーザがいる
どうやってアプリにリーチさせるか
検索結果のカテゴライズ
- 例えば「ショッピング」で検索すると、検索結果はファッションやクーポンなどといったカテゴリに分かれている
Family Star
- 家族向けコンテンツ

Cardboard

Google Play上にいろんなアプリがすでにある
CardboardのSDK改善
改善した新しいCardboardを配るよ！
磁石スイッチとか

Expeditions

Cardboard遠足
複数のCardboardに同じコンテンツを表示させる
世界のいろんな場所をCardboardで観られる
万里の長城でもベルサイユ宮殿でも

Jump

Cardboardコンテンツを作るためのもの？
360度撮影とコンテンツ作成までのフレームワーク的な？
Camera Geometory, Assembler, Player
Camera Geometory: 360度を16台のカメラで撮影
Assemblerでそれをゴニョる
- 撮影した写真から奥行きや、モノの配置などを認識する。
  元はただの写真だが、各カメラの撮影した部分の被った部分で頑張るみたい
Player: YouTubeっていうのがあってね

最後

自動運転や、気球による通信基地局提供プロジェクトなど進めてるよ！また来年！

shibuya.apk の雑なメモ

2015-05-27T09:00:00.000+09:00

shibya.apk 行ってきました！

※当日の内容は網羅してません。気になったトコだけメモしてたものにちょっと毛を生やした記事です。

日付： 2015-05-22
場所： DeNA

発表1. それwebでよくない？

Webアプリを普通のアプリと同じように動かす仕組みが出来てきている。
なので、Webでよくない？という話。APKじゃねぇ

Web App Manifest
- locationバー非表示にする設定とかできる
- Chromeで「ホーム画面に追加」したアイコンから起動すると、Overview screen(Recent Apps)でアプリかのように表示される
  ※ Chromeの「タブとアプリの統合」をOFFにしていても、別のアプリのように振る舞う
Service Worker
- WebアプリとNativeアプリとの差を埋めるためのもの
- オフラインでもキャッシュを返したりとか
- サービスワーカーでfrontに返すデータをinteruptしたり、キャッシュしたり
WebPush
- Chrome 42からWebでも通知出したりできる
Web App Install Banner
- Web標準仕様ではない
- Web App Manifestが条件に合致すると、Chromeがホームへの追加をサジェストする

発表2. Meets Jack and Jill

「全部qiitaに書いておいたからメモ取らなくていいよ！」

Android - Meets Jack and Jill - Qiita
http://qiita.com/calciolife/items/faf6affc0f8cf70c4af9

最適化しつつコンパイルするよ！
ARTにとって良くなるようにバイトコードを最適化とか

発表3. fabricの話

wasabeefさんに代わり、Flockで来日していた@romainhuetさんが発表することに。

https://get.fabric.io/

FlockでiOS向けに話した内容をAndroidに向けに変えて話してくれた
fabricは、Twitter社が提供するアプリを作るための色々なサービスを含むブランド？みたいなものらしい
ClashlyticsとかMoPubとか
Digitsがちょっと気になった
- SMSによるユーザ認証の仕組みを提供するものっぽい
- SMSの送信数に制限無く、現状無料で使えるらしい。まじで！？

懇親会

LTしたらTwitterのTシャツ貰えました！（ジャンケン大会で配られたものと同じ）
でも、飯食いそこねました！

アプリの通知をLollipop対応しよう / shibuya.apk 2015-05-22 LT // Speaker Deck
https://speakerdeck.com/mstssk/shibuya-dot-apk-2015-05-22-lt

LTの内容は、C87で甘味アンドロイドパークに書いたのをまとめたもの。
テクブ本のお求めはBOOTHやCOMIC ZINで。
関係者を倒してもドロップはしません。

DroidKaigi私書録

2015-05-11T02:02:00.000+09:00

去る2015年4月25日、DroidKaigiを開催しました。ご来場頂いた方々ありがとうございました。

私は運営メンバーとして参加し、主にWebサイトの管理・構築をしていました。
勿論、当日はスタッフも！

色々思い出しつつつらつら振り返ってみます。

DroidKaigiのWebサイト

りんご、Webサイトつくってよ ──── mhidaka

そんな感じでカジュアルに誘われ、ほいほい付いて行ったのが第2回のDroidKaigi事前ミーティングでした。
そのMTGが1月27日。
そこから1週間後の2月3日には、CFPのためWebサイト公開までこじつける事になろうとは、思いもよりませんでした^*1。

WebサイトはGitHub Pagesを使ってます。独自ドメインの取得も考えましたが、今回は手弁当でやる方針が決まっていた事もあり droidkaigi.github.io で公開しました。

CFP開始予定まで時間がなかったので、最初はBootstrapでえいやと一人で手っ取り早く作成。公開前にデザイナーさんにアドバイスを頂いて細かい部分を手直ししたりしました。公開後も、ところどころの修正を他メンバーからガシガシPR貰って直したり。なかなかGoogleで検索結果上位に来ず、sitemap.xmlを導入しようとしたら、間違ってサイトが30分ほどすっとんでたのはいい思い出です。

CFPは別にGitHubのissue上で揉まれて作成された文面を載せてます。 CFP担当のメンバーもギリギリなスケジュールの中頑張ってました。

採択したセッションの公開のタイミングで、@yulily100さんにデザインして頂き、 Jekyllを弄ったりなどの技術面を私がやる体制に。ゆりりーさんは「デザイナーがXMLを書くことでできる改善しやすいアプリ開発」というセッションで登壇もされています。

実は、DroidKaigiアプリのためにセッション情報を取得するAPIなんてのも作っていました。 Jekyllでjsonを書き出してるだけですけどね。アプリ開発のスケジュール都合上使いませんでしたけど。

Webサイトを作った際の知見については、「DroidKaigiのWebサイトの作り方」という記事でまとめています。内容被ってますが、こちらもどうぞ。

アイロンプリントしてました

背中からアイロン台がはえるよ ──── mhidaka

DroidKaigi当日、早朝の渋谷マークシティにアイロン台を背負い現れる、我らがDroidKaigi実行委員会代表の言葉です。

ご来場頂いた皆さんは、運営メンバーが公式Tシャツに「圧倒的当事者意識」とか、何やら色々と貼り付けていたのをご存知だと思います。私はアレを前日に都内某所で印刷してました。
そしてあの当日、サイバーエージェント社セミナールームの衝立に遮られた向こう側、スタッフの控えブースにはアイロン台が鎮座していたのです。

ちなみに、私は自分のアイコンを背中に貼り付けてました。
個人的には「ｱﾝﾄﾞﾛｲﾄﾞﾁｮｯﾄﾃﾞｷﾙ」を貼り忘れたのが心残りです。

圧倒的当事者意識

@mstssk ATIおおめにもってきて！
— mhidaka (@mhidaka) April 24, 2015

上でも触れましたが、DroidKaigiの運営メンバーの中で、何故か圧倒的当事者意識という言葉が流行っていました。コミュニケーションで主に使っていたSlackでは絵文字にする始末^*2。

Slackの絵文字を追加するのは簡単です。設定ページにアクセスして、絵文字名を ati と入力して、画像を選択し、「Save New Emoji」をクリックするだけ。

この言葉は某社の標語から来ていますが、DroidKaigi運営内の使い方はどうやら本家とは違ってたらしいです。
本家某社内では「ATIを見せてくれ」って感じで何かをお願いする際に使うのが主だそうですが^*3、 DroidKaigiの運営内では「すごいATIだ」という具合にthumb up的に使われる場合のほうが多かったです。

当日

乗り過ごしたwwwwwww
— あんどろいどりんご (@mstssk) April 24, 2015

当日の朝、集合時間が迫る渋谷駅を見事に乗り過ごした所から一日がスタートしました。
当日の担当は基本的に受付係。あとは雑用があれば手伝って、という具合でした。

私は基本的に部屋Bの方にいたので、Aのセッションが聞けていません… orz
Twitterのログやらスライドやら見てたら、「デブは電車に乗るな」とか謎ワードが目に飛び込んできましたよ！？

運営に参加して

こういったイベントの運営に関わるのはかなり久々のことでした。おそらく、大学祭の実行委員やってた以来です。

私が参加してから4月25日当日までの数ヶ月間、大変でしたが苦ではありませんでした。
きっと、~~あんまり仕事しなかった~~圧倒的当事者意識を持った優秀なメンバーと一緒に携わることが出来たからです。

DroidKaigiの運営メンバーは、呼びかけで集まった有志のエンジニアです。
所属する会社はバラバラで、ミーティングの際には各社の社内用語が飛び交って、意思疎通に軽く難が出るという一風変わった出来事もありました。
それでも、issue tracker(GitHub)とチャットツール(Slack)があれば上手く行くあたり、流石はエンジニアの集まりという感じでした。

今回の盛況ぶりで、こういったイベントがAndroidのエンジニアに需要があるということが明確になりましたが、問題点も多々ありました。特に、ご来場いただけなかった方々には申し訳なく思います。 DroidKaigi自体は終わりましたが、まだ反省会やらなんやら内々でやることは残ってます。羊さんがクロージングトークで何やら話してましたしね。

何はともあれ、登壇して頂いた皆さん、ご来場頂いた皆さん、運営メンバーの皆さん、ありがとうございました。

でも、てくぶのC87特設サイトも1週間くらいで作ってたから、毎度のことかと考えなおしつつある。
なんとかりんごって奴がやった。
又聞きなので違ってたらすみません。

DroidKaigiのWebサイトの作り方

2015-04-30T01:11:00.000+09:00

DroidKaigi | 2015/04/25

DroidKaigiに来ていただいたみなさん。ありがとうございました！

私は運営メンバーに参加して、Webサイトの構築・管理とかしてました。

CFP開始当初は時間がなかったので、私がえいやとBootstrapで作成。
ただし、公開前にデザイナーさんにアドバイスを頂いて細かい部分を手直ししたり、公開後も他のメンバーからガシガシPRを貰って手を入れていきました。
採択セッションの公開時のあたりで、デザインをゆりりーさんにお願いし、私が技術面を担当する体制に。

サイトはGitHub Pagesを使ってます。今まではペライチのHTML置くくらいにしか使ってませんでしたが、DroidKaigiのサイトではも少しちゃんと機能を使ってます。

本記事ではその辺をまとめてみます。

※ Androidの話は全くしません。

リポジトリ

GitHub PagesのOrganization siteとしてリポジトリ作成
- https://github.com/DroidKaigi/droidkaigi.github.io
organizationname.github.ioという名前でリポジトリを作ると、masterブランチの内容が同名のURLで公開されます。
- Organizationじゃなく、個人ユーザーの場合も同じ。
- gh-pagesブランチを使うのはProject siteの場合です。
リポジトリはPrivateのままでもGitHub Pagesは公開できます。

CMS（Jekyll+Liquid）

GitHub PagesではJekyllが使えます。
- ただし素のJekyllが使えるわけではなく、あくまでGitHub Pagesのgemを使う形になります。
色々制約があるので、Using Jekyll with Pagesを要参照。
- 例えば、_config.ymlのsource:〜設定は無視されるので、常にリポジトリのトップレベルにソースを置く必要があります。
  これに気付かずpushしたら、30分ほどサイトがすっとんだ事がありました。
Jekyllのプラグインも決まったものしか使えません。
- 使えるものについては、Using Jekyll Plugins with GitHub Pagesを参照。
- sitemap.xmlのプラグイン使ってます。
テンプレートエンジンはLiquid
アクセス時にページを書き出すのではなく、Jekyllの起動時（GitHub Pagesではpush時）に書き出しキャッシュするだけ。
- なので、インタラクティブなWeb APIっぽいものを作る事は出来ません。
- 実はセッションリストをjsonで取得できるようにしてあるんですが、それもLiquidで書き出してるだけです。
_data/の下にYAMLで任意のデータを置くとテンプレートから参照できます。
- それでセッションリストのデータを持っています。
- YAML書き換えるとページとjsonも勝手に書き換わります。
- Jekyllでは普通_posts/2015-04-24-DroidKaigi.mdって感じのパスで記事を書いて行くようなんですが、 DroidKaigiのサイトではそれは使っていません。
Jeykyllで処理するファイルの先頭にはFront Matterを書きます。
- そこにも任意のデータを書けます。 http://droidkaigi.github.io/index.html で使ってます。

テスト

YAML使ったり、json書き出したりとかしだしたので、CIでテストもするようにしました。
Travis CIで回してます。
テスト内容
- ビルド
- HTMLの構文チェック HTML::Proofer
- favicon
- リンク切れ
- imgのalt属性のチェックはわざと無視。代替文字が必要なデザインじゃないので。
- YAML,jsonの構文チェック（パースしてみてるだけ）

テストはとりあえずでいいやとインラインで書いちゃってるけど、どういう書き方がベターなんだろ。

Webフォント

英字はRoboto。日本語はNoto Sans。

Roboto Condensed http://www.google.com/fonts/specimen/Roboto+Condensed
Noto Sans Japanese http://www.google.com/fonts/earlyaccess

その他

ちゃんとSEOとか知ってる人には常識だろうけど

一度設定したOpenGraph用の画像を消す時は注意
- サイトのmetaタグの画像パスなどを書き換えても、すぐにはFbは反映してくれない様です。
- デザイン刷新時に古い画像を消したら、一時的にFbのシェア時に画像が出なくなってしまいました。
はてブとかツイートボタンとか、ソーシャルボタンはURLが明示的に指定できるならした方がいい
- 指定がなければ勝手に現在のURLになる
- http/httpsの違いや、ハッシュの有無で別のページとして扱われちゃう
- canonical URLも書くべき <link rel="canonical" href="http://droidkaigi.github.io/"/>
ページランク
- サイト公開直後はDroidKaigiで検索しても全然検索結果の上位に来なかった。5ページ目以降とか。
- てくぶのコミケ用ページをGitHub Pagesで作った時もそうだったんですが、一月くらいは上がらない感じ。
- 後からsitemap.xmlを用意したりとかしたけど、結局Googleがいつクロールしてくれるかはわからないので…

一緒に書いたけど、ソーシャルリンクについてはどちらかと言うとテクブのサイト作ってた時の知見。
あと、PRのブランチへにpushしたら、どっかにデプロイしてすぐ他の人がプレビュー出来るようにすればよかったなー、と気付いた。レビューが捗る。

感想記事的なものは別に書きます。

GitHubのContributionsをIngressのResistance色にするUser Styleを書いた(二番煎じ)

2015-04-08T01:15:00.001+09:00

こんにちは。アイコンは緑だけどResistanceの青りんごです。

下記の記事を見て「cssでも出来んじゃね？」って思って書いてみました。

GitHub の Contributions を Ingress の Resistance 色にする Chrome 拡張を作った - I'm kubosho_ http://blog.kubosho.com/entry/change-ingress-registance-color-of-github-contributions

resistance-contributions.css

cssの中身。legendの元の色指定がインラインスタイルだったので、上書きするには!important書かざるを得ないのが悔しい。

StylishといったUser Styleを設定できる拡張機能を利用したりして使う。

before:

after:

あんまりGitHub使えてないなぁ…

Unicodeの絵文字の肌の色ゴタゴタについて思ったこと

2015-03-08T22:42:00.001+09:00

※Twitterに書きなぐった事をまとめるだけの記事です。

Unicodeの絵文字の話について、考えてた時にふと思ったこと。

Unicodeの絵文字のゴタゴタに対する違和感の原因が一つわかった気がする。世界中の文字を纏めるだけだったUnicodeが、絵文字という新しい文字(文化)を作って世界中に押し付けようとしているんだ。それに対する反発に対応しようとして、また新しい文字を増やそうとしてる…
— あんどろいどりんご (@mstssk) March 8, 2015

あくまで日本の一部の文化でしかなかった絵文字を、そのままローカルなものとしてではなく、世界で通じるよう一般化し抽象化してUnicodeに収録しようとした所から、もうおかしかったんじゃないか
— あんどろいどりんご (@mstssk) March 8, 2015

元々は↓の流れ。

進む絵文字のグローバル化が伝える多様性と日本文化 - 松村太郎のApple深読み・先読み http://t.co/HidfTfKn6b ／ミスリーディングが多い。絵文字で問題になっているのは日本文化云々ではなく「特定の文化に偏っている」こと。また、実装と標準をごっちゃにしている。
— 小形克宏 (@ogwata) March 8, 2015

Unicodeでは絵文字の肌の色なんか規定しちゃいないんだ。偏っているのは各社の実装であって、Unicodeじゃない。
— あんどろいどりんご (@mstssk) March 8, 2015

けど、規定していない事で偏りが生まれるなら、肌の色を選択出来るようにUnicodeで規格化しよう。というのが今の流れ。
— あんどろいどりんご (@mstssk) March 8, 2015

1 Entry per Day: Android5.0での絵文字の変化 http://t.co/tQLdxuY4c1 Android 5.0では、肌の色を抜いたりキャラクターを謎の生物"進捗さん"に差し替えて、肌色問題を回避しようとしてる。
— あんどろいどりんご (@mstssk) March 8, 2015

DroidKaigiを開催します

2015-02-22T21:42:00.001+09:00

2015年4月25日にDroidKaigiを開催します。2月25日まで講演者募集中です！

DroidKaigi | 2015/04/25

仕事では全然Android触ってませんが、なぜだか運営に参加してます。Webサイト作成とか手伝ったり。

もう締め切り間近ですが、講演(CFP)は2月25日まで募集中です。
25分枠と50分枠とあるので、ちょっとした知見があれば気軽に25分枠で応募してみてはいかがでしょうか。
私なんかは仕事でAndroid触ってすらいないのに、1つ応募していたりします。ちなみに、一人で複数応募してもOKですよ！
勿論、50分枠でも是非是非応募して下さい。「○○なら俺に任せろ！~~バリバリ~~小一時間喋らせろ！」って方、よろしくお願いします！

他の運営メンバーも各々紹介記事を書いています。どうぞご覧ください。

Android開発者カンファレンス「DroidKaigi」開催にあたって - hdk_embeddedの日記
http://d.hatena.ne.jp/hdk_embedded/20150205/1423077706
もわ牧場: [PR] DroidKaigiは現地での発表がオススメ？
http://dmiyakawa.blogspot.jp/2015/02/pr-droidkaigi.html
DroidKaigiの発表を募集しています（2/25締め切り）#droidkaigi - ninjinkun's diary
http://ninjinkun.hatenablog.com/entry/2015/02/17/162319
Android開発で得た気づきをDroidKaigiでシェアしよう | area[nothing] : diary
http://nothing.sh/blog/archives/520
DroidKaigiの発表者を募集しています❤(ӦｖӦ。) - yulily100's blog
http://yulily100.hatenablog.jp/entry/2015/02/19/212343
4/25のDroidKaigi発表者募集中です - web系な備忘録
http://snsn.hatenablog.com/entry/2015/02/19/235144
DroidKaigiで発表してみませんか！ - EDIT MODE
http://androhi.hatenablog.com/entry/2015/02/20/083000
DroidKaigiの発表者を募集中です！ - nein37’s diary
http://nein37.hatenablog.com/entry/2015/02/20/141708
DroidKagi and you - ギークに憧れて
http://hotchemi.hateblo.jp/entry/2015/02/23/071838
DroidKaigi 2015/4/25(土)
http://wasabeef.jp/droidkaigi-2015425/
DroidKaigi、開催されます(登壇者募集!) - tomoima525's blog
http://tomoima525.hatenablog.com/entry/2015/02/21/153847
AndroidエンジニアとJavaの関係 - Islands in the byte stream
http://d.hatena.ne.jp/gfx/20150223/1424696317
OEC's blog: DroidKaigiへの応募は2/25までです!
http://roishi2j2.blogspot.jp/2015/02/droidkaigi225.html
Droidkaigi をやるぞ！ - Yokomark Press
http://keithyokoma.github.io/blog/2015/02/24/droidkaigi-2015/
Android開発者カンファレンス「DroidKaigi」のCFP受付は2/25 本日までです - hdk_embeddedの日記
http://d.hatena.ne.jp/hdk_embedded/20150225/1424820115

Android5.0での絵文字の変化

2014-11-01T12:00:00.000+09:00

Android 4.4 KiatKatで導入された絵文字は、Unicodeの絵文字として作成されてはいますが、元はGoogleハングアウト用にデザインされたものでした。
そのため、Unicodeの定義とはズレたデザインになっていたり、表示に問題があったりしました。

Android 5.0 Lollipopでは、絵文字がUnicodeに寄せる形で色々と変更・修正されていますので、まとめてみました。

まぁ、どうせメーカー製機種では絵文字フォント差し替わってるから、Nexus機のだけ見てもしゃーないんだけどね！

絵文字についてはこちらの記事もどうぞ ↓

Androidが4.4で絵文字にちゃんと対応した
http://mstssk.blogspot.jp/2014/02/emoji.html

比較対象はN5(Android 4.4 ビルド:KTU84P)と、2013年版N7(Android 5.0 ビルド:LPX13D)です。
N7には http://developer.android.com/intl/ja/preview/index.html#Start の razor-lpx13d-preview-ae4f461f.tgz を焼きました。

大本のニュアンス的には間違ってはいなかった系

WOMANS HATは、元になったガラケーの絵文字がむぎわら帽子なのですが、emoji4unicodeでWOMANS HATという名称で正規化され、そのままUnicodeに入ってしまった様です。

Unicode	文字	名称/注釈
U+1F452	👒	WOMANS HAT
U+26F3	⛳	FLAG IN HOLE
U+1F52B	🔫	PISTOL

本来のニュアンスが失われてしまった系

1つ目は、ドコモの「かわいい」という名前の花びらを象った絵文字なんですが、元のドット絵が花っぽくなくてよくわからない名称になり、そしてLollipopで名称に忠実によくわからない絵文字になりました。

鳥の絵文字は、ガラケーでは「ひよこ」だったり黄色い鳥だったりしましたが、ただの鳥になってしまいました。
別にひよこの絵文字はあるので、整理しただけかもしれません。

Unicode	文字	KitKat	Lollipop	名称/注釈
U+1F4A0	💠			DIAMOND SHAPE WITH A DOT INSIDE
U+1F426	🐦			BIRD

デフォルメし過ぎていた系

完全にマンガ肉。けど、N5の方が美味しそうに見える…

Unicode	文字	KitKat	Lollipop	名称/注釈
U+1F356	🍖			MEAT ON BONE
U+1F357	🍗			POULTRY LEG

なんかもう勝手に作っていたのを直した系

色違いよりは、バリエーションがあった方がたしかに良かったですね。

Unicode	文字	名称/注釈
U+1F499	💙	BLUE HEART
U+1F49A	💚	GREEN HEART
U+1F49B	💛	YELLOW HEART
U+1F49C	💜	PURPLE HEART

名称に忠実に・シンプルにした系

絵文字じゃなくただの記号っぽくなってしまった。

Unicode	文字	名称/注釈
U+1F170	🅰	NEGATIVE SQUARED LATIN CAPITAL LETTER A
U+1F171	🅱	NEGATIVE SQUARED LATIN CAPITAL LETTER B
U+1F17E	🅾	NEGATIVE SQUARED LATIN CAPITAL LETTER O
U+1F17F	🅿	NEGATIVE SQUARED LATIN CAPITAL LETTER P
U+1F18E	🆎	NEGATIVE SQUARED AB
U+1F191	🆑	SQUARED CL
U+1F192	🆒	SQUARED COOL
U+1F193	🆓	SQUARED FREE
U+1F194	🆔	SQUARED ID
U+1F195	🆕	SQUARED NEW
U+1F196	🆖	SQUARED NG
U+1F197	🆗	SQUARED OK
U+1F198	🆘	SQUARED SOS
U+1F199	🆙	SQUARED UP WITH EXCLAMATION MARK
U+1F19A	🆚	SQUARED VS
U+1F21A	🈚	SQUARED CJK UNIFIED IDEOGRAPH-7121
U+1F22F	🈯	SQUARED CJK UNIFIED IDEOGRAPH-6307
U+1F232	🈲	SQUARED CJK UNIFIED IDEOGRAPH-7981
U+1F233	🈳	SQUARED CJK UNIFIED IDEOGRAPH-7A7A
U+1F234	🈴	SQUARED CJK UNIFIED IDEOGRAPH-5408
U+1F235	🈵	SQUARED CJK UNIFIED IDEOGRAPH-6E80
U+1F236	🈶	SQUARED CJK UNIFIED IDEOGRAPH-6709
U+1F237	🈷	SQUARED CJK UNIFIED IDEOGRAPH-6708
U+1F238	🈸	SQUARED CJK UNIFIED IDEOGRAPH-7533
U+1F239	🈹	SQUARED CJK UNIFIED IDEOGRAPH-5272
U+1F23A	🈺	SQUARED CJK UNIFIED IDEOGRAPH-55B6
U+1F250	🉐	CIRCLED IDEOGRAPH ADVANTAGE
U+1F251	🉑	CIRCLED IDEOGRAPH ACCEPT
U+261D	☝	WHITE UP POINTING INDEX
U+2600	☀	BLACK SUN WITH RAYS
U+2601	☁	CLOUD
U+260E	☎	BLACK TELEPHONE
U+267B	♻	BLACK UNIVERSAL RECYCLING SYMBOL
U+26A0	⚠	WARNING SIGN
U+2709	✉	ENVELOPE
U+270C	✌	VICTORY HAND

消えた丸が帰ってきた系

そもそもなぜ丸が無かったのか。

Unicode	文字	名称/注釈
U+3297	㊗	CIRCLED IDEOGRAPH CONGRATULATION
U+3299	㊙	CIRCLED IDEOGRAPH SECRET
U+24C2	Ⓜ	CIRCLED LATIN CAPITAL LETTER M

差別問題に配慮した系

肌の色が抜かれたり、人物がすべて謎のキャラクター進捗さん⁽¹⁾になったりしています。 NAIL POLISH(マニキュア)も、人の指が写っていたので変更されています。
しかし一方で、GUARDSMANは英国の近衛兵の図柄のままになっていたり中途半端？です。

Unicode	文字	名称/注釈
U+1F440	👀	EYES
U+1F442	👂	EAR
U+1F443	👃	NOSE
U+1F444	👄	MOUTH
U+1F445	👅	TONGUE
U+1F466	👦	BOY
U+1F467	👧	GIRL
U+1F468	👨	MAN
U+1F469	👩	WOMAN
U+1F46E	👮	POLICE OFFICER
U+1F46F	👯	WOMAN WITH BUNNY EARS
U+1F470	👰	BRIDE WITH VEIL
U+1F471	👱	PERSON WITH BLOND HAIR
U+1F472	👲	MAN WITH GUA PI MAO
U+1F473	👳	MAN WITH TURBAN
U+1F474	👴	OLDER MAN
U+1F475	👵	OLDER WOMAN
U+1F476	👶	BABY
U+1F477	👷	CONSTRUCTION WORKER
U+1F478	👸	PRINCESS
U+1F47C	👼	BABY ANGEL
U+1F481	💁	INFORMATION DESK PERSON
U+1F483	💃	DANCER
U+1F485	💅	NAIL POLISH
U+1F486	💆	FACE MASSAGE
U+1F487	💇	HAIRCUT
U+1F48F	💏	KISS
U+1F491	💑	COUPLE WITH HEART
U+1F38E	🎎	JAPANESE DOLLS
U+1F4AA	💪	FLEXED BICEPS

合成文字の不具合を修正した系

以前にAOSPのIssue Trackerに上げた問題が解決したようです。
https://code.google.com/p/android/issues/detail?id=66045

Unicode	文字	名称/注釈
U+1F1E8 U+1F1F3	🇨🇳	REGIONAL INDICATOR SYMBOL LETTERS CN
U+1F1E9 U+1F1EA	🇩🇪	REGIONAL INDICATOR SYMBOL LETTERS DE
U+1F1EA U+1F1F8	🇪🇸	REGIONAL INDICATOR SYMBOL LETTERS ES
U+1F1EB U+1F1F7	🇫🇷	REGIONAL INDICATOR SYMBOL LETTERS FR
U+1F1EC U+1F1E7	🇬🇧	REGIONAL INDICATOR SYMBOL LETTERS GB
U+1F1EE U+1F1F9	🇮🇹	REGIONAL INDICATOR SYMBOL LETTERS IT
U+1F1EF U+1F1F5	🇯🇵	REGIONAL INDICATOR SYMBOL LETTERS JP
U+1F1F0 U+1F1F7	🇰🇷	REGIONAL INDICATOR SYMBOL LETTERS KR
U+1F1F7 U+1F1FA	🇷🇺	REGIONAL INDICATOR SYMBOL LETTERS RU
U+1F1FA U+1F1F8	🇺🇸	REGIONAL INDICATOR SYMBOL LETTERS US
0U+20E3	0⃣	KEYCAP 0
1U+20E3	1⃣	KEYCAP 1
2U+20E3	2⃣	KEYCAP 2
3U+20E3	3⃣	KEYCAP 3
4U+20E3	4⃣	KEYCAP 4
5U+20E3	5⃣	KEYCAP 5
6U+20E3	6⃣	KEYCAP 6
7U+20E3	7⃣	KEYCAP 7
8U+20E3	8⃣	KEYCAP 8
9U+20E3	9⃣	KEYCAP 9
#U+20E3	#⃣	HASH KEY

それはミスじゃないのか系

「？」が先にくるのは「⁈」(QUESTION EXCLAMATION MARK)じゃないのかな…

Unicode	文字	KitKat	Lollipop	名称/注釈
U+2049	⁉			EXCLAMATION QUESTION MARK

シャープになった系

文字のプロポーションがスッキリしつつ良くなったりしています。

Unicode	文字	名称/注釈
U+2194	↔	LEFT RIGHT ARROW
U+2195	↕	UP DOWN ARROW
U+2196	↖	NORTH WEST ARROW
U+2197	↗	NORTH EAST ARROW
U+2198	↘	SOUTH EAST ARROW
U+2199	↙	SOUTH WEST ARROW
U+21A9	↩	LEFTWARDS ARROW WITH HOOK
U+21AA	↪	RIGHTWARDS ARROW WITH HOOK
U+2660	♠	BLACK SPADE SUIT
U+2663	♣	BLACK CLUB SUIT
U+2665	♥	BLACK HEART SUIT
U+2666	♦	BLACK DIAMOND SUIT
U+2668	♨	HOT SPRINGS
U+2B50	⭐	WHITE MEDIUM STAR
U+2B55	⭕	HEAVY LARGE CIRCLE
U+3030	〰	WAVY DASH
U+303D	〽	PART ALTERNATION MARK
U+25FB	◻	WHITE MEDIUM SQUARE
U+25FC	◼	BLACK MEDIUM SQUARE
U+25FD	◽	WHITE MEDIUM SMALL SQUARE
U+25FE	◾	BLACK MEDIUM SMALL SQUARE
U+26BD	⚽	SOCCER BALL
U+26BE	⚾	BASEBALL
U+2702	✂	BLACK SCISSORS
U+2934	⤴	ARROW POINTING RIGHTWARDS THEN CURVING UPWARDS
U+2935	⤵	ARROW POINTING RIGHTWARDS THEN CURVING DOWNWARDS

太ましくなった系

マッシヴに。

Unicode	文字	名称/注釈
U+25B6	▶	BLACK RIGHT-POINTING TRIANGLE
U+25C0	◀	BLACK LEFT-POINTING TRIANGLE
U+26AA	⚪	MEDIUM WHITE CIRCLE
U+26AB	⚫	MEDIUM BLACK CIRCLE
U+2712	✒	BLACK NIB
U+2714	✔	HEAVY CHECK MARK
U+2716	✖	HEAVY MULTIPLICATION X
U+2757	❗	HEAVY EXCLAMATION MARK SYMBOL
U+2764	❤	HEAVY BLACK HEART
U+27A1	➡	BLACK RIGHTWARDS ARROW
U+2B05	⬅	LEFTWARDS BLACK ARROW
U+2B06	⬆	UPWARDS BLACK ARROW
U+2B07	⬇	DOWNWARDS BLACK ARROW
U+270F	✏	PENCIL
U+2744	❄	SNOWFLAKE
U+2708	✈	AIRPLANE
U+2747	❇	SPARKLE

あやうく違いに気付かなかった系

雪だるまは口角が上がり、カクテルはサクランボのヘタの色が変わったりしています。

Unicode	文字	KitKat	Lollipop	名称/注釈
U+26C4	⛄			SNOWMAN WITHOUT SNOW
U+1F378	🍸			COCKTAIL GLASS

単純な改善系

N5では何のための絵文字がわかりませんでしたが、新しい方だとピンときます。

Unicode	文字	KitKat	Lollipop	名称/注釈
U+2139	ℹ			INFORMATION SOURCE

なんとも言い難い系

元になったauの悪魔の絵文字は笑っているというよりムッとしている感じで、N5の図柄の方が近い気がします。
しかしemoji4unicodeで笑った感じの絵にされてしまい、そのままUnicodeに入ってしまったようです。

U+1F608

😈

SMILING FACE WITH HORNS

表情の表現の仕方の違い系

笑顔はともかく、焦り顔系は色がどぎつい…

Unicode	文字	名称/注釈
U+1F603	😃	SMILING FACE WITH OPEN MOUTH
U+1F606	😆	SMILING FACE WITH OPEN MOUTH AND TIGHTLY-CLOSED EYES
U+1F630	😰	FACE WITH OPEN MOUTH AND COLD SWEAT
U+1F631	😱	FACE SCREAMING IN FEAR
U+1F635	😵	DIZZY FACE

その変更は必要だったの？系

なぜ小さくした。

Unicode	文字	KitKat	Lollipop	名称/注釈
U+2B1B	⬛			BLACK LARGE SQUARE
U+2B1C	⬜			WHITE LARGE SQUARE

参考

List of iOS Emoji http://www.grumdrig.com/emoji-list/
emoji4unicode - Emoji for Unicode: Google Emoji private use mapping data and tools - Google Project Hosting
https://code.google.com/p/emoji4unicode/
Emoji Symbols: Background Data http://www.unicode.org/~scherer/emoji4unicode/snapshot/full.html
※サイズが大きいページなので注意
絵文字マッシュ（拙作アプリ） https://play.google.com/store/apps/details?id=jp.mstssk.emoji_mush

追記 2014-11-27

REGIONAL FLAGSが増えてた。

楽しげなcommitがあったのでロリのN7で試したら、Regional Indicator Symbolで国旗がたくさん出るようになってた。(228個確認) https://t.co/LSZ2nzEJGt pic.twitter.com/fFy7a1j5NQ
— あんどろいどりんご@3日目西く02b (@mstssk) November 6, 2014

追記 2015-03-06

228じゃなく、229だった。EUも追加されている。

某所で勝手にこう呼ばれています。

Nexus5の画面を割ったので修理に出した

2014-04-21T13:10:00.000+09:00

なので、修理に出してみたよという話。

※以下の内容については、2014年4月時点ではこうだった、というだけのものです。サポート体制の変更などあり得ると思うので、修理についてはまずイー・モバイルまたはGoogle Playのサポートに問い合わせて下さい。

やらかしました

屈んだ拍子にアスファルトの上にNexus 5が落下し、画面のガラスが残念なことになりました。カーディガンのポケットという、とても不安定な所に入れていたので自業自得です。

n5画面逝ったあああああああああああああ
— あんどろいどりんご (@mstssk) April 12, 2014

画面が割れたNexus5をマクロ撮影しました。ご査収下さい。 pic.twitter.com/VoFLXZRDWJ
— あんどろいどりんご (@mstssk) April 12, 2014

出掛ける途中で落っことしたので、ガラスが割れた状態のまま一日過ごす羽目になりました。

本当なら割れたガラスで危ないんですが、画面保護フィルムを貼っていたので破片の飛散もなく、ガラスが割れている以外は不具合がないようだったので、帰宅するまでそのまま使っていました。たまに見かける、画面バッキバキのiPhone使ってる人の気持ちが少し分かりました。

「ちょっと割れた隙間にインク染み込ませてみてよ」⁽¹⁾とか酷いこと言われましたが、僕は強く生きています。
つーか割れたのフロントやっちゅーねん。

とりあえずググった

Google Playで買った「Nexus 5」がバキバキに壊れたので修理に出してみた - GIGAZINE http://t.co/70KNk8kKyQ 画面割れだと、2万くらいかかるのか…
— あんどろいどりんご (@mstssk) April 12, 2014

Nexus 5はGoogle Playから購入したものだったので、GIAZINEの記事がドンピシャでした。LGに修理を依頼すれば良いようです。

ちなみに、上記は約4ヶ月前の記事なので、今は何か変わっているかもしれないと思い、一応最初はGoogle Playハードウェアサポートチームに問い合わせてみました。結局「LGに問い合わせを」と案内されたので、無駄な手間をサポセンの人にかけさせてしまっただけでしたが…⁽²⁾

修理に出した

LGのモバイルお客様相談センターに問い合わせたところ、以下のような感じ。

落下による破損はユーザ過失で有償修理
今回は明らかに保証外なので、保証書などは不要で、本体だけ送ってもらえばOK
修理には2週間程度かかる
付属品は捨ててしまうので、外して送ってほしい。ケースとか保護フィルムとか。
実物を見て見積りしないと正確な金額はわからないが、画面割れの場合は最低でも23,000円(部品代＋工賃)と送料がかかる。あと消費税（合計約25,000円）。
見積り後に修理をキャンセルする場合も、3,000円(手間賃的なもの？)はかかる。
連絡先などは宅配便の伝票の記載内容（住所,氏名,電話番号）で充分なので、特に書類を送ってもらう必要はない
電話や郵送などではなく、メールで見積りをお知らせすることも可能。メールアドレスのメモを一緒に送ってもらえばOK

ガラスの破片が怖いので保護フィルムは貼ったまま、見積り宛先のメールアドレス書いたメモと一緒にプチプチに包んで適当な箱に入れて、近所のコンビニからサクッと発送しました。

帰ってきた

先週末に送ってから、数日で見積りメールが来たので、ソッコーで修理代金を振り込み。金額は、問い合わせた時に聞いた最低金額でした。

そして週末には我が家にNexus 5が帰って来ました。2週間なんてもんじゃなく、運送含めて実質5・6営業日しかかかりませんでした。多分、2週間というのは閑散期と繁忙期の期間を均した数字だったんでしょう。

ちなみに、画面の端がアスファルトにぶつかったらしくベゼルも少々傷ついていましたが、それも直っていました。明細を見ると交換した部品として「フロントケース(液晶一体型)」と載っていて、かつ問い合わせ時に聞いた最低金額だったので、画面の修理の場合は必ずベゼル（フロントケース）ごと交換されるようです。

高いよね

画面割った直後はもう一台買ってやろうかと思っていたんですが、4.5万払って新品買うより、2.5万払ってしまおうということにしました。

修理代がもっと安ければいいなぁ、とは思いますが、キャリア外で携帯電話を買う以上はメーカー保証しかありません。Googleが保証サービス始めるとも思えません。量販店で買えるなら店舗独自の保証サービスがあったりするんですが…

iPhoneもガラス割っちゃうと2万円ほどかかるそうですが、Apple Careに入ってると数千円で済むそうです。Appleが主導して販売・サポートやっている強みですね。他のメーカーもこういうことしてくれないかな、とちょっと思いました。

まとめ

携帯電話を落とさないために、変な所に入れたり置いたりしないよう気をつけよう。
画面保護フィルムを貼っておくと、万一画面割れた時も比較的安全。
勿論、使わなくて済むようにすぐ出来るならしましょう。
Google Playで購入した場合の、Nexus 5の画面修理は最低2.5万。
タイミングが良ければ割りと早く修理から戻ってくる。
メーカーの保証サービスはもうちょっと何とかして欲しい。

【画像】背面の割れたiphoneをお洒落にリメイクする方法が話題に！実際にやってみた人も。 - Togetterまとめ http://togetter.com/li/442382
サポセンのお姉さんの声が可愛かったので、個人的には満足しています。

Androidが4.4で絵文字にちゃんと対応した

2014-02-24T00:14:00.000+09:00

というわけで、随分前のことなんですが、

絵文字を入力できるマッシュルームアプリを作りました！

絵文字マッシュ - Google Play の Android アプリ
https://play.google.com/store/apps/details?id=jp.mstssk.emoji_mush

公開したのは2013年11月18日なんですが、サボってblog書いてませんでした。

※以下、絵文字について知ってることをつらつら書いています。間違ってたら、Twitterかコメント欄でツッコんでください。

KitKatで絵文字を改めてサポートした

2013年10月31日にリリースされた Android 4.4 KitKat にて、絵文字への対応が一新され、カラフルな絵文字がしっかり表示されるようになりました。

Android - 4.4 KitKat
http://www.android.com/versions/kit-kat-4-4/

4.3 Jelly Bean 以前でも絵文字は表示できていましたが、いくつかのものが白黒で表示されるのみで、殆どが表示できていない状態でした。
※メーカーのカスタムにより絵文字フォントがなくなってしまっている機種もあります。

ガラケーの絵文字に対応したわけではない

KitKatで対応したのは、Unicode 6で定義された絵文字です（最終的にUnicodeに含まれなかったものもサポートされています）。
ガラケーの絵文字については、各キャリアから販売されているAndroid端末は元々対応しています。

今回の絵文字対応というのは、ざっくり言ってしまえば「iPhoneで使ってる絵文字がAndroidでも表示されるようになったよ」という事だったりします（絵は違っています,後述）。
元々、iPhoneの方が先行してUnicodeの絵文字を表示・入力できるようにはなっていました。
そもそもUnicodeの絵文字は、ガラケーの絵文字を元にGoogleとAppleが共同でUnicodeに提案したものが元になっているのです。

絵文字の符号化提案は Google および Apple 社によって共同提案され、2009 年 2 月 6 日に Unicode 技術委員会にて正式に了承されました。

Google Japan Blog: 絵文字の Unicode 符号化に関するアップデート
http://googlejapan.blogspot.jp/2009/03/unicode.html

そのため、iPhoneではUnicodeの絵文字（最終的にUnicodeに含まれなかった物も含めて）をサポートしており、遅れながらもAndroidも対応するようになりました。

勿論、ガラケーの絵文字をそのまま国際的な規格に持っていけるわけがありません。
そのゴタゴタについて特集したコラムがあります。読み物としても面白いのでオススメです。

特集 : 絵文字が開いてしまった「パンドラの箱」 - CNET Japan http://japan.cnet.com/sp/column_emojipandora/

ガラケーの絵文字は？

国内のJelly Bean以前のAndroid端末では、ATOK for Androidなどの絵文字入力機能を使うことで、従来のガラケーの絵文字を入力できていました。
実はこの時入力しているの絵文字は、Unicodeのものではなく、Googleが独自に定義したコードポイントだったりします。これは、Unicodeへの提案より前にGmailでガラケーの絵文字を相互置換するようにした際の、中間コードとして定義されたコードポイントです。
相互置換機能の成果物が emoji4unicode として公開され、それを元にUnicodeへの提案も行われました。

emoji4unicodeによる、各キャリアとGoogleの定義したコードポイントの対応表は、Unicodeコンソーシアムのサイト上で公開されています。

Emoji Symbols: Background Data
http://www.unicode.org/~scherer/emoji4unicode/snapshot/full.html
※サイズが大きいページなので注意！

ちなみに、キャリアメールソフト上での絵文字入力機能については、手元に環境が無いし普段使ってないので調べてません。
同様にGoogleのコードポイントで入力しているか、何かゴニョゴニョしてるんでしょう。いずれにせよ、メールサーバ側で各キャリアの絵文字の相互置換が必要なので、あまり変なことはしていないと思います。

デザインしたのは日本の会社

Googleが Googleハングアウトで使われていた絵文字を AOSP にポーティングしたことで、Androidでこんなに綺麗な絵文字が使えるようになりました。
そして、このハングアウトの絵文字は日本の IC4DESIGN という会社が作ったものでした。すごい！

日本の絵文字を世界へ: 日々の日記
http://ic4design.cocolog-nifty.com/ic4design/2013/05/post-f655-5.html

google hongout of IC4DESIGN'S WORKS
http://ic4design.com/top4/Coner/pg839.html

ちゃんと表示されない絵文字もある

至れり尽くせりかと思った絵文字対応ですが、「数字の囲み文字」と「国旗絵文字」はまだちゃんと表示されない様です。

「数字の囲み文字」と「国旗絵文字」自体については、下記ページを読んでいただければ面倒くさいことがわかると思います。

絵文字だョ! 符号化文字集合(後編) | mixi Engineers' Blog
http://alpha.mixi.co.jp/2012/10663/

つまりは、特別な文字の組み合わせで1つの絵文字を表すものが軒並みちゃんと表示されていないんです。
Nexus5(4.4.2 KitKat)で実際どのようになっているかちょっと調べてみました。

Unicode	文字	数値参照	期待している表示	実際の表示	期待している表示が実際に割り当てられている文字(Googleによる独自定義)
U+0031 U+20E3	1⃣	1⃣			U+FE82E
U+1F1EF U+1F1F5	🇯🇵	🇯🇵			U+FE4E5

※画像はNexus5(4.4.2 KitKat)でのハングアウトアプリ上の表示のキャプチャ。日の丸のみWebのハングアウトのキャプチャ。

囲み文字はちゃんと直前の文字と結合していないし、国旗も Regional Indicator Symbol の代替アルファベット表示になっています。
その代わり？に、本来表示されて欲しい文字シンボルはGoogle独自定義のコードポイントに割り当てられています。
かと言って、Google独自定義のコードポイントの方ならすべてちゃんと表示されるかというと、そうではありません。Nexus 5で試したところ、Google独自定義のコードポイントで表示されるのは、この囲み文字と国旗絵文字だけでした。

ちなみに、問題の絵文字はKitKatのデフォルトのキーボードの絵文字パレットにも含まれていません。「あぁ、結合文字対応するの諦めたんだろうなー」と思ったりしましたが、ちゃんと表示されてくれないのはやっぱり嫌なのでAOSPにチケットは投げておきました。是非皆さん★を付けましょう。

Issue 66045 - android - Several emoji symbols(Keycap numbers and Regional flags) are not correctly with KitKat. - Android Open Source Project - Issue Tracker - Google Project Hosting
https://code.google.com/p/android/issues/detail?id=66045

アプリ作成時の愚痴

󾠮󾠯󾠰󾠱󾠲󾠳󾠴󾠵󾠶󾠷 ←Android4.4で正常に表示される 1⃣2⃣3⃣4⃣5⃣6⃣7⃣8⃣9⃣0⃣ ←iPhoneで正しく表示されて、Andoidでは半端に表示される＿人人人人人人人人人人＿＞　Emojiめんどくせぇ　＜￣Y^Y^Y^Y^Y^Y^Y^Y^Y￣
— あんどろいどりんご (@mstssk) November 18, 2013

絵文字めんどくさいのスクショ於Android4.4 pic.twitter.com/YwxrMi28dF
— あんどろいどりんご (@mstssk) November 19, 2013

参考

List of iOS Emoji http://www.grumdrig.com/emoji-list/

Emoji unicode characters for use on the web http://apps.timwhitlock.info/emoji/tables/unicode

emoji4unicode - Emoji for Unicode: Google Emoji private use mapping data and tools - Google Project Hosting https://code.google.com/p/emoji4unicode/

Emoji Symbols - Unicode Symbols https://sites.google.com/site/unicodesymbols/Home/emoji-symbols

Unicode絵文字とキャリア絵文字 http://www.slideshare.net/hiroakiohashi148/unicode-24674603

NotoColorEmoji.ttf - platform/external/noto-fonts - Git at Google https://android.googlesource.com/platform/external/noto-fonts/+/kitkat-release/NotoColorEmoji.ttf

↓サイズが大きいページなので注意

Emoji Symbols: Background Data http://www.unicode.org/~scherer/emoji4unicode/snapshot/full.html

Emoji unicode characters for use on the web http://apps.timwhitlock.info/emoji/tables/unicode

変更履歴

修正 2014-04-11: Nexus 5のAndroidのバージョンを間違えていたので修正。
4.4.3 -> 4.4.2

gitはじめて勉強会

2013-07-26T00:37:00.001+09:00

先日、内輪でgitの勉強会で講師をやってきました。

資料

当日使ったスライド。
あまりgitはどうだなんだという説明はせず、とにかくハンズオンでやってみる事が目的でした。

反省点

講師っていうのは初めてだった事もあり、諸々反省点がありました。

内容が参加者に合っていなかった
講師の都合でterminal上での操作前提の内容にしていたけど、慣れていない人に教えるにはやはりSourceTreeなど使った方がいいかもしれない。
自分では commit や diff 見る程度はEclipse上でやるけど、その他はterminal上でばっかり操作していて、他のやり方を教えられるほど知らないのがネック。
つめこみ過ぎた
git init から push まで粗方詰め込んだ上で、その他のコマンドの説明も諸々…という内容にしたら、目的が何処かに行ってしまった感じになった。
色々やるより、必要最低限をしっかりやる方が最初のとっかかりとしては良さそう。
細かい説明はいちいちせずに「○○をするにはどうするか」という目的ベースで進めた方が覚えやすいかな。
脱線し過ぎた
ただでさえ詰め込みすぎて時間の余裕があまり無いのに、途中途中の質疑応答に時間をかけすぎた。push の話をする頃にはタイムオーバーだった…
場合によってはバッサリ時間を切って進めて、時間配分をずらさないようにしないと、なかなか話が進まない。

第2回があるかどうかは皆の声援次第。

1 Entry per Day

DroidKaigi 2018のWebサイトとか振り返り

Webサイトについて

droidkaigi.jpへドメインを変更

サイトジェネレーターとしてGatsbyを採用

NetlifyやCircleCIを使ったContinuous Deliveryっぽいの

スポンサー一覧

Sessionizeとの連携

次回のDroidKaigiに向けて

その他

Safariでposition:stickyが動かないとき

AngularでFailed to execute 'send' on 'XMLHttpRequest'とか出た時にやること

参考

🍺について

ページ右下に熱盛を出すだけのUser Styleを書いた

cron.yamlのdescriptionに日本語を書いてはいけない

TL;DR

なにが起きたか

推測と対応

えいえんのケチャガールへの道＆C92宣伝 #Splatoon2

おまけ(宣伝)

ng-japan 2017に行ってきた

Keynote: How to Think About Angular

RxJSを活用したアプリケーション開発

You need to know SSR

Angularアプリのテストについて

Web Payments + Credential Management API

Angular, Firebase, Cloud Functions for Firebase

Advanced Component styling with Angular (v4+)

Best practices for modules in Angular

Angular Animations

What's New in Angular Material

Google I/O 2017 初渡航KPT（非技術記事）

Keep

Problem

Try

golang.tokyo #1 行ってきたメモ

メンバーのGo教育

IDEやデバッグ

コーディング規約は？ レビューの指針は？ golintに従ってます？

Webフレームワーク・テンプレートエンジン・ORM

エラー処理どうしてますか？

goのお手本になりそうなもの

ロガー

パッケージ分け

テスト周り

デプロイまでのフローとか工夫してる点、CI

pprof使ってる？本番のモニタリングとかチューニングとか

リファクタしたいところ／Goのイマイチな点

メモ

El CapitanでBlockdiagのインストールに失敗した

環境

現象

試したこと

Android StudioとGradle wrapperが違うdebug.keystoreを使う問題

TL;DR

関連issue

嘆き

Wii Uを買って面倒くさい繋ぎ方をした

構成

参考

Nexus9にAndroid M Previewを焼く

環境

手順

参考

Google I/O 2015 Keynote

Keynote

Android M Developer Preview

カスタマイズ重点

Android Wear

Brillo

検索の改善

Google Now

Now on Tap

Google Photos

次の10億人へ向けて

開発者へ

Develop

Engage

Google Play上でのアプリの検索

コーディング規約は？レビューの指針は？ golintに従ってます？