エンジニアをリングする

プログラをミングしたり。

my web site twitter

イベント用の名札シート印刷アプリ「参加者の名は。」を作った

こんなものを作ってみました。

yoshiko-pg.github.io

ConnpassのイベントURLを入力してCreateボタンを押すと、名刺サイズの参加者の名札を印刷プレビューできるようになっています。
(主催するイベントがないけど動きを見てみたい場合、入力欄右下の「demo」を押すと雰囲気がわかるかと。)

f:id:yoshiko_pg:20170113011832p:plain

右下の印刷ボタンで印刷できます。

f:id:yoshiko_pg:20170113011928p:plain

管理者や補欠者もお好みで含めることができます。

背景

カンファレンスや勉強会って、普段ネット上でしか知らない人と直接話せる機会でもあると思うのですが、いざその場で顔や名刺を見ても誰が誰かわからないんですよね。。
SNSではよく見るけど顔がわからなくて、でも話したいことがあるときとか、頭の上にアイコンとIDが表示されるメガネがほしい・・・ってたびたび思ったりします。

そんな思いから、自分がスタッフとして関わっているイベントではアイコンとIDの入った名札を用意するようにしていました。

参加者の方からもかなり評判がよく、喜んでいただけたり、写真を撮ってくださるかたもいたり。
ただ印刷データの生成は自分用の簡単なスクリプトでまかなっていたので、汎用的な形でオープンに提供できたらいいなということで作りました。

参加者一覧データはイベントIDから引けるAPIが開いていなかったためイベントの参加者一覧ページをyqlで取得してパースしています。名札生成ってそんなに頻繁にやるものでもないのでめっちゃ負荷かかったりはしないと思うのですが、APIではないのでConnpassさんのほうからやめてくださいとお言葉があれば閉じるつもりです。

技術面

Angular / TypeScript / Fluxの実践のために何かアプリ作りたいなーということで作りました。
今は、ざっと書き下して動くところまでこぎつけたので、そろそろテスト書いてリファクタするかーぐらいのタイミングなのでコードは全然出来上がってないです。。ここからいじくって、どうしたらスマートになるかいろいろ試してみようかと。

かいつまんで感想を。

Angular (v2)

この規模のアプリにはオーバーキルですが、まだProduction版を触っていなかったので。
angular-cliすごい。alphaのときあんなに手こずった開発環境がコマンド一発で・・・AoTもオプションひとつ。これのおかげでさくさくできました。
buildやserveのほか、railsのscaffoldのようなジェネレータも用意されています。github-pagesへのデプロイコマンドまで!
Angular-CLIチートシート - Qiita
便利なぶん、うまく動かなかったり用意されたもの以外のことをしたいときには苦労しそうだな感もあります。webpackのconfigも隠蔽されているし。。

本体については、TypeScript側からの支えもあり道を踏み外しにくくなっている感じがしました。
productionリリースまでに結構APIが変わったので、検索したときRC以前の古いAPIの情報が出てくるのがけっこうつらかった。。
お行儀よくレールの中で作るか、本体のコード読んだりして自力でがんがん掘り進むか、スピードに乗れるとしたらこのどちらかかなと思います。
あとわからないことがあったらng-japanコミュニティのSlackで聞けるのはすごく心強いです。

TypeScript

型めっちゃいい。
ただ普段使っているeslintrcが使えないのが悲しかったので、 https://github.com/eslint/typescript-eslint-parser を入れてがんばりました。 TypeScript独自な部分のlintがちょっと不安なのでtslintと両方かけています。

Angularでは型定義ファイルをtsdとかtypingsじゃなくてnpmの@typesというスコープで管理していて、スムーズでよかったです。
npmでTypeScriptの型定義を管理できるtypesパッケージについて - Qiita

Flux

概念は何度も見てましたが業務で触るアプリケーションには導入していないので、まだ今までFluxベースでひとつのアプリケーションを作りきったことがありませんでした。
今回はベーシックな形をスクラッチで書いてみたかったので、ライブラリは使わずに https://github.com/azu/mini-flux を参考に最小限のパーツを書いてみました。 AngularなのでActionCreatorやStoreはDIしたかったのですが、同じdispatcherを持たせたインスタンスをDIできるように登録するところでちょっと手こずりました。。factory関数作ってなんとかなりました。

状態を持つ場所と変更される経路が定められることで、考えることが少なくなりますね。
これまで状態がぐちゃぐちゃ入り乱れて破綻したアプリケーションを何度か見てきたので、心が洗われました。

ただちょっと冗長に感じる部分もあったので、次は Tackling State – Angular 2 とか Good bye Flux, welcome Bacon/Rx? – Matti Lankinen – Medium にあるようなObservableベースのデータフローを試してみたいです。

CSS

AngularにはShadow DOMのPolyfill的な仕組みが入っていてComponentごとのスタイルをスコープで守ってくれるので、それに甘えて結構適当な書き方をしています。。
今までのCSS設計の方法っていかにグローバルスコープと戦うかという部分も大きかったと思うので、今後フレームワークなどでComponentごとのスコープが当たり前になっていくと必要なCSSの設計もまた違った形になってくるだろうなというところが気になっています。既にそういう前提の設計手法あるかな?あったら教えてください。

ちなみにブラウザの高さに応じてプレビューの部分が固定比率で伸縮するのはこちらのテクニックを使っています。
CSSで固定比率レイアウト - @yoshiko_pg

印刷用CSSについてはこちらの記事が参考になりました。
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita


かいつまんで書くつもりが長くなってしまった。。。

とにかくそんなこんなで最初は冬休み中の素振り目的がメインだったのですが、普通に使えるなと思って公開してみました。
まだ外見も中身もやりたいことの進捗率は50%ぐらいで発展途上ですが、どこかで役に立てば嬉しいです。

あとカスタムの背景画像をアップロードできるようにしたいのと、プリセットのデザインも増やしたいので名札デザイン案を提案してくださるデザイナーさんがいたらめっちゃうれしいです><

他要望あればこちらにください!

では。

yoshiko-pg.github.io

(名前、最初NameCardGeneratorとかにしてたけどつまんなかったのでふざけた😇 )