ラベル DroidKaigi の投稿を表示しています。 すべての投稿を表示
ラベル DroidKaigi の投稿を表示しています。 すべての投稿を表示

2018年2月13日火曜日

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

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

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

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

その他

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

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

投稿者 mstssk 0 コメント ラベル: , ,

2015年5月11日月曜日

DroidKaigi私書録

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

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

圧倒的当事者意識

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

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

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

当日

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

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

運営に参加して

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

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

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

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

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

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

投稿者 mstssk 0 コメント ラベル: , ,

2015年4月30日木曜日

DroidKaigiのWebサイトの作り方

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

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

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

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

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

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

リポジトリ

  • GitHub PagesのOrganization siteとしてリポジトリ作成
  • 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のプラグインも決まったものしか使えません。
  • テンプレートエンジンはLiquid
  • アクセス時にページを書き出すのではなく、Jekyllの起動時（GitHub Pagesではpush時）に書き出しキャッシュするだけ。
    • なので、インタラクティブなWeb APIっぽいものを作る事は出来ません。
    • 実はセッションリストをjsonで取得できるようにしてあるんですが、それもLiquidで書き出してるだけです。
  • _data/の下にYAMLで任意のデータを置くとテンプレートから参照できます。
    • それでセッションリストのデータを持っています。
    • YAML書き換えるとページとjsonも勝手に書き換わります。
    • Jekyllでは普通_posts/2015-04-24-DroidKaigi.mdって感じのパスで記事を書いて行くようなんですが、 DroidKaigiのサイトではそれは使っていません。
  • Jeykyllで処理するファイルの先頭にはFront Matterを書きます。

テスト

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

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

Webフォント

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

その他

ちゃんと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したら、どっかにデプロイしてすぐ他の人がプレビュー出来るようにすればよかったなー、と気付いた。 レビューが捗る。

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

投稿者 mstssk 0 コメント ラベル: , , ,

2015年2月22日日曜日

DroidKaigiを開催します

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

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

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

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

投稿者 mstssk 0 コメント ラベル: ,
登録: 投稿 (Atom)