1 Entry per Day

2018年2月13日火曜日

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

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使ってみたいだけとも言う

その他

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

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

2018年2月1日木曜日

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

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日

2018年1月21日日曜日

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

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月4日月曜日

🍺について

この記事は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で修正されています。

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

2017年8月30日水曜日

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

ものすごく邪魔。

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

中身はコレ。

	body:after {
	pointer-events: none;
	content: "";
	width: 100vw;
	height: 200px;
	position: fixed;
	right: 10px;
	bottom: 10px;
	background: no-repeat bottom right;
	background-image: url(data:image/png;base64,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)
	}

view raw atsumori.css hosted with ❤ by GitHub

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

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

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

登録: 投稿 (Atom)