Dabits

サーバサイドから運営まで何でもやるエンジニア系DJ

#アニカンナゴヤ vol4の告知サイトを制作しました。

02/18(日)12:00から栄JB'Sで開催されるアニソンクラブイベント「Anime Conference Nagoya vol4」の告知サイトを制作しました。 いつもはオーガナイザー兼DJとしても出演していましたが、暫くは仕事と家庭に注力するため告知サイト作成のみの参加です。

せっかくなので、今回の告知サイトを制作するにあたってのポイントを記載してみることにします。

前提となる自身のデザインスキル

  • 元々はWebデザイナではなくWebエンジニア
  • 前職でガラケーサイトで毛が生えたようなWebデザインとWebソシャゲ開発経験有り
    • 特にWebソシャゲはCSS3+JSを使った演出を制作
    • この頃からUI/UXについても勉強を始めていてワイヤーフレームはこだわるように
  • 現職ではユーザ向けページのWebデザインほとんどしてない
    • 社内ツールのUI/UXはこだわり抜いて制作

前回の告知サイトから変更したイメージ

  • Voca Nico★Nightコラボがあるので雰囲気をそれっぽく
  • サイトのテーマカラーをフライヤーのテーマカラーに近づける
    • フライヤー製作者は私ではなく別の人
  • 前回の告知サイトで実施したフライヤー回転が好評だったので、今回はもう少し+α動きを加える感じで
    • 但し閲覧の阻害になったり、うるさくなるような演出は入れない

実際に変更した所(&使った技術)

  • サイトで使う配色の一新
  • 動きの演出は大抵「CSS3 アニメーション」でググってサンプルを探す
    • ググる前にアニメーションのイメージを頭で固めておく
    • マッチする演出があればそれを適用
    • どうしてもCSS3で実現できないアニメーションがあればjQuery Pluginから探す
  • レイアウトの調整
    • アー写の丸抜きがウケ良さそうだったのでCSSで実現
    • 前回アー写は無加工だったが、今回は縦横比を揃えたかったので全て真四角に加工
      • リスト表示は見た目の統一性が大事ね
  • サイトのデータ管理はgit+gitlab.comで管理
    • データ引き渡し後もオーガナイザーで安易にテキストを修正できる

...とだいたいこんな感じで作りました。毎度明らかにTwinviteの使い方を逸脱していて管理画面がバグってしまうんですけどね← デザイナーでない方でも参考になりますよう。

さいごに

アニカンゴヤは私ととむそん発案で考えた、初めての人でもめっちゃ行きやすいアニソンクラブイベントです! IT系勉強会から取り入れた名札やLTとアニソンクラブイベントをmixしつつ、丁寧に案内してくれるスタッフも充実しているので一人でも行きやすいイベントになっています。 LTでワイワイガヤを入れたり、アニソンを聴きながらお酒を飲んだりと余暇を楽しげに過ごせますので、少しでも興味がありましたら是非告知サイトをチェックしてみてください!

HatenaBlogに引っ越しました/新年の抱負

こんにちは。dabitsです。 年始ということで、思い切ってBlogをWordPressからHatenaBlogにお引っ越ししました。

その理由は...

な感じです。

実は昨年夏から対外的なアウトプットを増やすためにBlog書くぞー!とかTwitter発言回数増やすぞー!とか周りに吹聴していたのですが、思った以上に色々あって動けなかったので中々実現出来ていなかったのです。。。 今後のキャリアパスを考えるに今年は対外的なアウトプットが絶対必要だと思ったので、重い腰を上げつつ、自身がすぐ挫折しないよう課金をし、日記を含めて書いてみることにしました。

なんだかこの日記、10年ほど前のBlogやmixi時代を思い出させる感じで恥ずかしい...!

閑話休題

一年の計は元旦にあり、ということで今年も目標を立てて宣言しておきます。 古くは中学時代の書き初めや高校時代の個人Blogからこの習慣があったのですが、最近はアウトプットする範囲も狭まっていたので、原点に立ち返って再度パブリックに。

昨年を振り返ると、夫婦生活も2年目に入り、子供も授かり、主に家庭面での変化が多い1年になりました。 他方、趣味/仕事も家庭に追従し、自身が納得できる最低限の範囲まで活動を減らし、より局所的に/ストイックに活動した1年でもありました。 何分初めての経験が多かったので、荒削りの部分が多かったと思います。安定しているとは言い難い1年でした。

故に、今年は「三相AC200V」を抱負の言葉とします。 色々考えたけれど、他人が解りづらくとも自身が納得するにはこのワード以外なかった...orz

なぜ三相AC200Vか。 すごーく電気的な話で伝わりづらいですが、噛み砕いて言うと「一般的な電源のうち、どの電源よりも安定していて出力もある」ということです。 なぜ安定していて出力があるかは知り合いの電気関係かじった人に聞いてください← なお、電気関係詳しい人からのより一般的でどの電源よりも安定している出力情報も併せてお待ちしております。

家庭面ではより安定的に、母子ともに安心して生活できる環境が求められるようになりました。 それは普段の環境のみならず、金銭面も、自身が使う時間も。 ここを安定的に担保できるように動いていきたいと思います。 これまでの時点で既に務めている会社/知人にお世話になりっぱなしでしたが、今年は自身でもより考えて、安定する術を模索していきたいと思います。

仕事面では先述したとおり、対外的なアウトプットが多く必要になる年だと感じています。 お世話になったOSSのエコシステムに還元するため、というと綺麗過ぎるかもしれませんが、アツい技術の浸透を推進するためや、それによって促進される雇用を斡旋するため/ひいては経済を回すたために今年は動くべきだと思っています。 良いと思ったモノがバンバン広まるように動いていきます。

なんとなく散らかって纏まった感がない抱負でしたが、今年はそんな感じで行きたいと思います。 本年もよろしくお願いいたします。

ISUCON7予選 参加振り返り

鉄はアツいうちに打て!ということで個人的振り返りを書き出してみます。

予選までの背景

  • 会社メンバーでISUCON参加しよう!ということになり社内で参加者を募集し始める
  • 9人ほど集まったので3チームつくりつつ、弊社CTOがCEOに「こんなことやりますよ!」と報告を入れる
  • CEO「良いね!全面バックアップするよ!」とのことで、練習時のサーバ費やオフィス間移動の交通費などのサポートが充実する
  • 参加メンバー全員の本気度(背水の陣感)が増し、 "社内制度":http://www.a-tm.co.jp/news/corporate-3553/ を活用して毎週過去問題で模擬戦を実施する
    • ※グループ全体のMTGでも参加の旨が共有される (触発されて別子会社のメンバーも参加する)
    • ※会う度に「頑張ってね!」と応援されるようになる
  • 週末も夜通し夢中になって1人ISUCONを参加するメンバー多数, slackが大いに盛り上がる
  • 当日は名古屋オフィスを拠点としてメンバーが集まり、予選に挑む

予選結果

予選中にやったこと

覚えている限りを。 他は @kopug , @mziyut が記事書いてくれるはず...!

うまくいったやつ
  • DBに乗っかっている画像のファイル書き出し

    • 初期に乗ってる画像はinitializeに書き出しスクリプトを書いてpublic/icons以下へ->その後コメントアウト
    • アップロード時はそのままpublic/iconsに保存されるように
    • 複数台への画像ファイル共有は愚直にnfsで。
  • slow queryになっている箇所にindexを貼る

    • messageのchannel_idだけだったはず
  • havereadをmemcachedに載せ替える

  • slimのバージョンアップしたりrouting cache有効にしたりtemplate cache有効にしたり

  • users, messageをしこたまmemcachedにキャッシュさせる

  • select - を必要なカラムのみに絞る

  • サーバ構成を下記の通りにする

    • 1台目 : rp+dbサーバ nginx + mysql + nfs
    • 2台目 : appサーバ nginx + php-fpm
    • 2台目 : appサーバ nginx + php-fpm
  • 各種ミドルウェアのチューニングをやる

うまくいかなかったやつ
  • /fecthにあったsleepのチューニング, カンが外れて逆に短くするようにしたがスコアが落ちた

  • apcuの導入, memcachedよりレスポンス早いが複数台前提の動作が必要だったので断念した

  • newrelicでの計測, 今回の予選ではアプリケーションの問題は過去問とほぼ同じでありnewrelicが無くても解決できた

    • インストールしただけ時間を食った
  • これまでの大会はサーバ1台だけだったので全部設定ぶっこんで別サーバに展開するスクリプトを書いていたが、当日は複数台だったので断念した

参加に関してのKPT

Keep
  • 過去問を使った模擬戦だいぢ!アプリ層は進研ゼミメソッド的に「あ!これやったやつだ!」状態が多発した

    • 特に直前にpixivとyahooのisuconをやったのが良かった
  • 過去参加者の記事も非常にだいぢ!凄く参考になった

  • メンバーの特性を活かした役割分担が非常に良かった

    • インフラ1名/アプリ1名/何でも屋1名
    • 問題解決の比率でメンバーのタスクウェイトがいい感じに調整できるチームだった
  • アプリケーションソース保全&Gitlab管理が進行をめっちゃ捗らせた

    • 開始後すぐgit init -> git push
    • 開始直後のデータはfirstブランチに入れ、トラブったときはcheckoutして初期の挙動を確認してみる
    • 各メンバー用branchを切り、各々開発。ローカルで開発しつつ最終検証は本番環境にcheckout, 問題なければmasterにマージ
    • スコアが出たらscore/010000の用にスコア別でtagを切る, 途中立ち戻るときはtagを切ったところに戻る
Probrem
  • 過去に解いた問題のロジックを過信してコピペしたら思わぬバグを踏んで終了直前まで苦戦した

    • 終了40分前の時点で最高スコア20,000程, ようやく不具合を解消して96,000程へ
    • ファイル書き出しの際に画像ファイル名が必ず同じ名前になってしまう初歩的なミス...!
  • 思い込みで点を伸ばせなかったところが多かった

    • 上記のミス(こんなところに不具合は残っていないだろう, インフラのせいだ...!)
    • ベンチ実行できるのは1台のサーバだけだと思っていた(チェックボックスで複数選択できるのはバグかな?)
    • などなど他にもあったとおもう
  • 予選本番の雰囲気にもっていかれた

    • いつもと違う雰囲気, 失敗できない気持ち
  • チームワークが悪い方向に向かい続けた

    • いつもは開始直後にチームMTGに30minほど割く->突然開始の焦りでMTGの会話も一部だけ
    • いつもは役割別に良い仕事をし続けれる->当日はみんなそれぞれ詰まるし人の解決を置き去り
Try
  • 本番でも「いつも通り」を出せるようにする

    • 方法は色んな人に聞いてみる
    • 個人的に一番調子良かった時はonアルコールの時だったから、当日もそうすればよかった
  • ギスギスしそうになっても会話を諦めない

  • 詰まったら一旦キーボードから手を離す, リフレッシュする

    • 執着と思い込みが問題をややこしくさせる
  • チームメンバーと定期的に会話するタイムを設ける

    • チームだから一人でやりすぎない
    • 思い込みを防いだり問題解決のスピードを上げるために何度も会話する

持ち帰れたもの

  • これまであまり会話が無かったメンバーとよく会話するようになった!

    • 「決勝に出場する」というグループ全体の共通目標を持つことで、会社間問わず会話するネタが生まれた
    • 業務であまり関わりのなかったメンバーとチームになることで、決勝のために頻繁に会話するようになった
      • 業務上の会話も増え、問題解決が捗った
  • 模擬戦の回数を重ねるにつれ、みなの問題解決スキルが飛躍的に上がった!

    • 得た知識を早速業務に反映した->一部サーバのPHP7+php-fpm+nginx化
  • 参加したメンバーの、早速業務に活かしたい雰囲気がスゴイ!

    • ICUSONでお題に出たシステムのうち、良いと思ったものを自社内システムに適用したかったりだとか
    • 社内勉強会でのお題目にICUSONを取り入れたかったりとか
      • 自社のサービスをISUCONの題材に見立て、どのチームが一番改善できるか、とか
    • 地方ISUCON(東海ISUCON)開催したいよね!という会話が飛び交ったりとか

所感

  • スコアは満足した結果にならなかった、自分がチームの輪を乱しつつ不具合を産んだだけに個々数年の人生中では一番悔しい

    • とはいえ自分の弱みが如実に出てきてとてもよく理解できた
  • 参加して後悔した?->いやいや絶対よかった!

    • 得た技術的知見も多いし、人と話す機会も増えたし、なにより模擬戦中・予選通して楽しかった!
    • 高校時代の部活を思い出させる雰囲気で、社会人に慣れてきた自分にとってとても刺激になった!
    • 開催終了後の参加者チャット部屋が、日本中のスゲー技術者揃いで反省会やってて、そんな会話に参加できる機会めった無いなと思った!
  • 来週も参加したい?->絶対したい!

    • 社内や東海でISUCONを当たり前に何度も開催できるようにしたい!
    • その上でもう一回来年のISUCONも楽しみにしています。今度は絶対勝ちに行きます。

あとがき

  • ISUCON参加に伴い、全面バックアップ頂いた会社、応援してくださった方々非常に感謝しております。ありがとうございます。
  • このような素晴らしい機会をくださった運営のスタッフをはじめ、問題作成、サーバ提供をしてくださった方々、企業様ありがとうございました。

    • 特に今回は運営isuconが始まるくらい初期セットアップが大変だったと思います。
    • "予選開始遅延要因を解説した記事":http://isucon.net/archives/50960409.html がとても学びになりました
  • 東海圏で地方ISUCON開催したり、あるいは社内でISUCON開催したりしつつ、一緒に楽しくやっていく仲間を探しています!

  • 私はいま "エイチーム":http://www.a-tm.co.jp/recruit/ におりますので、興味がありましたらぜひサイトをご覧ください!

1000%LOVE4Y.U.I.Mix

1000%LOVE4Y.U.I.Mix by Dabits on Mixcloud

誕生日プレゼントとして作ったミックスです! 元々としては「こんな曲目でミックス作ってよ」と頂いた課題曲でしたが、気が付けば月日が経ち、ブラッシュアップ/選曲し直して現在の構成にしました。 ーーー 課題曲/聴いて欲しい曲を織り交ぜてお届け。 題名のうたプリ曲は入っていませんが、1000%全力尽くしてプレゼントお届け主を初め 全力オススメする曲達ばかりです。

7/25(土) 女子向けDJイベント「キス?プリ」

7/25(土) 12:00〜ヨリ!女子向けDJイベント「キス?プリ」に出演します! 事前登録やコスプレによる割引アリ!今直ぐ下記をチェック!

→事前登録Twiplaへ←

What is Kiss*Prince?

Kiss*Prince (通称:キスプリ)は、ターゲットを「女の子」に絞って アニメ・乙女ゲーム・ジャニーズ・歌い手 など女の子が好きな音楽をDJさん達が次々と繋いでいく女子向けDJイベントです♪
是非、女の子同士で素敵なひとときを過ごしましょう♪
(※もちろん。男性のお客様のご来場も可!)

開催概要

■日付:2015年07月25(土)
■時間:OPEN:12:00 START:12:30
■場所:sound bar ATLANTIS
 ( 愛知県名古屋市中村区鳥居西通1-48 豊国ビル4F )
■料金:当日:2,000円(+1Drink)
■割引:
 1. Twipla参加表明/フライヤー持参:当日料金から500円引
 2. コスプレ参加:当日料金から500円引
 ※1と2は併用可!併用するとなんと1,000円で楽しめちゃう!

DJ

☆ゆぅちゃん
CEaOwFoUUAAPrGn.jpg:thumbジャニオタ、バンギャなどの過去を持つDJ。
墓地送りにしたプリンセスを弔うのが最近の趣味。

uRi
CEaNcUJVAAI7dk9.jpg:thumb彗星の如く現れた☆
Rock.ボカロ.女子向けアニメetc...など幅広い選曲でフロアを沸かします!

☆まむ
CEaRGJYVEAAAZg3.jpg:thumbタイムトラベラー系女子向けDJ!
懐かしいあの曲がかかった時初恋を思い出したりするかも♡

☆こーら
CEaQJBkUUAAHd5J.jpg:thumb満を時してやってきた乙女向けlove男子☆
溢れる愛が止まらない彼のDJに倒れる女子多数!

☆だびっつ
CEaNxWKUkAAh99k.jpg:thumb実は?腐男子だった?!
驚きの選曲でだびっつワールドへ貴女を誘いますよ☆

VJ

☆回転
CEaR650VIAEPyjs.jpg:thumb最近スーパーVJとして名前を轟かせているモンスター☆
テニスの王子様推しは柳だそうです!

☆シンジ
CEaSlwNUsAAU_1D.jpg:thumbアニメに飽き足らず最近は声優映像も大量に仕込んでくる危ないVJ!!
あの声優のあんな映像がでてくるかも?

Illustration

☆駒きち

注意事項

イベントに参加する際には、以下の事を必ずお守りください。

◯イベント参加者は、必ずスタッフの指示に従ってください。
◯ルール、モラルやマナーを守れない方は、即退場処分とさせて頂くと共に今後一切当イベントへの入場を禁止させて頂く場合があります。
※尚、最悪の場合は警察等に連絡して法的措置をとらせて頂ききます。

■入場について
・イベント開始までの待機列については、通常列と優先列の2つに分けさせていただきます。
・優先列には下記の方がお並びいただくことが可能で、開場時に通常列より優先して入場することができます。
 1.twipla参加表明をされた方
 2.フライヤー持参の方
 3.コスプレをされる方
・当日参加される人数が多い場合、入場制限をする可能性がございますので予めご了承ください。

■手荷物について
・貴重品(財布・携帯電話等)は必ず肌身離さず持ち歩いてください。
・盗難・紛失に関しましては責任を負いかねますのでご注意ください。

■コスプレについて
・コスプレ歓迎ですが、イベントですので動きやすくて多少汚れても大丈夫な衣装がお勧めです。
・更衣室以外での更衣やメイクはお控えください。
・会場や人を傷つける恐れのある服装や装備品等の持ち込みはお断りいたします。
・イベント開始直後や終了間際は、更衣室が大変混み合いますので早めの更衣をお願いいたします。

■飲食物について
・飲食物の持ち込みは禁止です。 発見次第回収させて頂きますのでご了承ください。
・未成年者の飲酒・喫煙は法律で固く禁じられております。絶対にお止めください。

■その他
・店内を走る・勧誘行為をする、など他の参加者のご迷惑となる行為は、絶対にしないでください。
・当ビル近隣への迷惑になる行為はお止めください。