#abpro2017

今年も無事に ABPro2017が開催されました！(遅)

当日のツイートまとめは こちら

さて私は今年も発表させていただきました．3回目です！

発表したのは，私の趣味とか変なこだわりとか話のネタになりそうなものを事前に他の人に知っておいてもらうためのチートシート(Webページ)です！

つまり事前に知ってもらってそのネタについて話しかけてくれ！ というなんとも自己中な目的です( ^)o(^ )

実際に作成したWebページは こちら！

ちなみにWebページのもとになるデータ部分，および当日の発表も！ Googleスプレッドシートで行いました！！

エクセルでプレゼンしてる時点で普通じゃない #ABPro pic.twitter.com/f5pIbx4KIq

— HomeiMiyashita (@HomeiMiyashita)

2017年9月16日

さてチートシートの内容は以下の2つです．

・自分のためでもあるNON STYLEのネタのキーワード集

・私の野菜嫌いリスト

まずMenu1の方．

NON STYLEが異常に好きなので，そのネタをいっぱい書き出し，さらにそのネタ中で出てくるキーワードやよく私が不意に口に出すフレーズも書き出しました(もちろん人力)．

たとえばこういうツイートをしても十中八九スルーされるわけです．

かとぅぜとぅ が えんかとぅ じゃない #ABPro

— Saraha (@saraha_fms)

2017年9月16日

ですがこのしょうもないツイートは元ネタがあって，NON STYLEのネタ「時代劇」のネタに出てくる「つ」を「とぅ」と言ってしまうところからきているわけです．

これはきっと誰にも伝わってないのですが，チートシートには「とぅ」というフレーズがきちんと記されています．

あと私はよく「あらやだ」と言っちゃうのですが，これも由来はNON STYLEのネタに出てくるからです．決しておばさんだからではないです．(そしてそれに対する理想のツッコミは「市原悦子かっ！」です)

あと地味にこのブログの題名とサブタイトル的なやつも元ネタはNON STYLEです．

こういう伝わらないもどかしさとか，それをもとに話をしたいと思う葛藤を，このチートシートによって解決しようとしました(するかは知らない)．

ついでに自分もあのフレーズが出てくるネタなんだっけとなることが多いので，個人的にとても便利です．

次にMenu2ですが，これはもっとシンプルです．

私はわりと結構だいぶまあまあ野菜が嫌いなので，それをリスト化しました．

自分でも法則性がないな～と思うくらい変な好みなので，話題の1つくらいにはなるかな～と思います．(ひかれなければ)

以前からこのリスト化作業はやりたかったというか，やってくれって遠回しに言われた気がしてたので実現してよかったです．

続いて実装の話です．

野菜嫌いとかネタの量などは必ず変わるものなので，元となるデータベースはスプレッドシートで作成しました．

スプレッドシートを更新すれば，ページの方も更新されるようにしたかったのです．

なのでページはGoogle Apps Scriptで作りました．超便利．

構造は単純でスプレッドシートでとった値をhtmlにﾋﾟｬｯと表示する感じです．（説明が正しいかはわかりませんがhtml内にphpを入れる感じでjs書く気分でした私は）

こちらのサイトなどを参考にさせていただきました． https://tonari-it.com/gas-web-application-beginner/

あとメニュー切り替えのためのページ遷移を作るのが，私的にややこしかったのですが， このサイトを参考させていただき，同じプロジェクト内で遷移できました． https://qiita.com/kakkiichan/items/a6a653bbe113a1dee2eb

最後に. ページを見てもらったら分かると思いますが，Shareボタンがあります．

私が人に知ってもらうためにこのページ見て！という想定なので，QRコードを表示するボタンになっています．

私は，変なこだわりとか多いという話でそもそも発表してるのですが，そのこだわりの1つとして「プログラムとかで画像を使わない主義」があります．

なのでQRコードも画像を使っていません． 全てスプレッドシートで手作業でﾎﾟﾁﾎﾟﾁ書きました． セルを１つ１つ塗りつぶすだけの簡単な作業です．

その後，GASでスプレッドシートからセル1つ1つの背景色を取得し，htmlのtableタグでつくったセルをその色で塗ることによってできています．

暇な人はF12してみてください．ちゃんとtableタグです．

とここまでやってきましたが，アブノーマルが足りないので， なにかもうちょっとやりたい！と思ってました．

ABProでは来場者に名札が配られます．

その作成は私がしているので，これになにか仕掛けてやろうと思い，背景風にQRコードをたくさんいれまくりました．

一番シンプルに読みやすい真ん中のQRコードは読み込むとABProのサイトに飛ぶだけです．

実際これはフェイントのためです． (でもフェイントどうこうの前に，QRを読み込んでくれる人はいるのか？と不安でしたが，見事にフェイントQRだけを読み込んで報告してくれた某彼女には感謝していますw)

本当に読み込んでほしいQRコードは，名札を折ると出てきます． ここで思い出すのは，そうシンゴジラですね！(後で気付いた)

これを読み込むと私の作った例のページに飛ぶようにしておきました．

QRコードはページ自体のURLで作ってもよかったのですが，URLが長く情報量が多いため細かいQRになりそうでした． そうなると手打ちがきついので，自分の持ってるドメイン(saraha.me)を利用しました．

ABProが終了するまではQRコードのURLにアクセスすると，数秒後にWebページに飛ぶようにしました．

終了後は，これを利用して打ち上げの店情報の連絡もこれで行いました． (現在終了後の状態です http://saraha.me/abpro/2017/)

とまあ名札の作成は当日朝バタバタしながら作って凡ミスしたり，色々話は尽きないのですが，さすがに長すぎるのでこのあたりで終わりにします．

これも見てる方々との話のネタの1つになることを願って！！