在婚礼上搞点事情如何

2017-10-22 22:54:15 +08:00
 iammapping

前几天被新浪的一位程序员刷屏了,婚礼现场还要跑去修 bug,这事得赖鹿晗。看到之后想起我的婚礼,那是一年前也是在国庆。距婚礼还有一个月的时候,心想这可是一辈子的大事,在众多亲朋好友面前搞点比较 cool 的事情,这样会不会让大家印象深刻点。

怎样会比较 cool

希望你看到这个标题不要以为是让基友拉着我私奔😱。让现场所有宾客都能参与进来,对,这应该比较 cool。根据以往参加别人婚礼的经验,流程大概是:主持人引导新郎新娘进场,新郎新娘立下海誓山盟,新郎新娘双方父母登台,然后全场一起举杯祝福新人,最后一直吃到婚礼结束。宾客除了那一次举杯,全程都是路人,参与感非常低。有的婚礼会有些互动,这完全看主持人的个人风格了。

要调动现场,站在台上撒红包这种土豪的做法显然不适合木讷的我。眼下几乎人人都有智能机,人人都有微信,于是就想能不能借助微信让大家参与进来。大家可以发祝福上墙,然后现场大屏以弹幕形式将大家祝福展示出来。大家发完祝福可以在大屏上看到自己的头像以及祝福的话,内心是不是有一丝丝的满足。

一开始是想搞一个公众号,大家可以直接在输入框发祝福,后面觉得这样还是太死板,没趣,放弃了。

搞个微信 web 吧,不用关注也能访问,而且把 web 页面做成请柬的形式,还可以提前分享给大家暖暖场。那还等什么,干呀。

撸起袖子就是干

传统请柬三要素:时间地点和人物,我的请柬三要素:签到地图和弹幕。吭哧吭哧,花了两周的业余时间,期间媳妇也帮忙处理了图片,成品长这样:

技术栈

倒是没什么吊炸天的技术,因为开发时间有强制的 deadline,我可不想因为开发这个而错过我的婚礼😂。所以挑的技术都是一些比较熟悉而且开箱即用的。

后台:Mysql、Nodejs、Sails、Sequelize、Bluebird ;

前端:WeUI、jQuery、jquery.fullPage、slick、CommentCoreLibrary(CCL 弹幕)、高德地图、iconfront。

弹幕数据实时更新是用的最简单的短轮询,没别的,就一个稳字。

如果你有打开体验,看了几张背景照片你会发现,不管照片中人物主体的位置是偏左还是偏右,在你的视觉中一定是居中显示的,这样保证打开后一眼就能看到我们😘。这个也不是什么高大上的技术,就是提前测量好每张照片人物主体中心线的偏移量,然后写在图片标签的属性里。如下图所示,白色代表照片,绿色代表手机屏幕,两个圆圈代表照片上的人物主体。

遇到的一些坑

微信的坑

做好后是部署在我自己的服务器上,域名也没备案,刚分享出去一切都挺顺利。可后面逐渐就有人反馈打不开或打开空白的情况,经过抓包才发现微信会把分享的网址在打开前做拦截,如果域名没有备案那就只能 say goodbye。

微信还会在输入框获取焦点时,提示用户注意安全,谨防泄密。这个也挺烦人的,发个祝福还要注意安全😥。不过这个在公众号可以设置域名白名单,当然前提也是域名要备案。

弹幕的坑

CCL 弹幕库之前默认的渲染方式是 left、top,目的是为了向下兼容。但是在手机端的性能简直不忍直视,当时有个版本 v0.10.0-rc 在测试使用 css3 的渲染方式,切过去效果直逼 PC 端,就马上用上了。现在 CCL 默认的渲染方式就是 css3,不用再踩这个坑了。

输入法的坑

使用中文输入法的时候,输入框底部和键盘顶部无法完美贴合。这个坑到现在也一直没有填,这篇文章《移动端输入框填坑系列(一)》似乎给了解决办法。

干完只是开始

产品开发完成并不是结束,而是开始。怎么引流,生产环境有 bug 等等这些问题接踵而来。

如何让大家现场访问

在入口迎宾处扫码?这样只能一次性加入,退出了就很难再进来。

在现场加群,在群里发链接?这样看似是个好办法,但宾客有绝大多数是年纪比较大,能用微信扫码就了不起,现场加群这种操作还是难为他们了。

二维码投在大屏上?这影响大屏的美感,而且后场扫码几乎是不可能的。

最后想了一个土办法将二维码打在小卡片上,每个桌上发几张。于是随便设计了小卡片的样式,在 TB 上找了家打印店印了 100 多张,成本还是比较低的。

卡片上的二维码现在依然有效,只是现在不抽奖了😂,可以用微信扫一扫体验下。

婚礼结束后统计了下,现场总共有 300 多人,发祝福的有 150 多人,这个转换率还是可以的。

如何搞定现场大屏

上面只讲了微信 web 端,其实完成整个互动,还有一个重要组成部分——现场大屏。酒店的大屏多是 LED 拼接大屏,这可不像电脑的显示器,有明确的分辨率。当时打电话问酒店前台大屏分辨率是多少,他们也是一脸懵逼。后面咨询做大屏的朋友才知道,他们根本不讲分辨率,只讲尺寸,叫我等比例走就行,于是我也一脸懵逼了。不管啦,做了多个响应式尺寸以防万一。

大屏端的交互就没那么多了,都是一些自动播放或静态展示的东西。

如何抽奖

大屏端有个抽奖界面,这个抽奖环节还是需要主持人和幕后人员配合的。主持人发口令,幕后人员根据口令控制抽奖开始与结束。在婚礼前与主持人沟通过程中,主持人表示赞叹:主持了十多年婚礼,第一次见到这么有趣的形式。此时我内心喜悦而又惶恐,担心现场搞砸。

关于抽奖算法,就是简单的完全随机抽取,那句“据说颜值高的和祝福多的都更有机会中奖”,仅仅是促进大家发祝福的小玩笑(好像有点贱,逃~~)。候选人则是所有签到在现场的宾客,扫了上面小卡片上的二维码就可以自动签到在现场,这样也省去宾客需要多余的操作。

其他一些未完成的想法

在微信端完成后,我就分享到朋友圈。一会儿收到了很多祝福,为了感谢大家,就在弹幕里发了一个口令红包,浏览量瞬间爆棚,小水管服务器都有点抗不住了。这给了我一个很好的启发,于是想后台设置个定时任务,在婚礼现场来场震撼的口令红包雨。不过这个想法后来被其他事耽搁了,没有加上,也是有点小遗憾。

One more thing

在本文发布的同时,也打算把这个尘封一年的项目开源出来。祝愿所有的 forker 有情人终成眷属。

项目地址:iammapping/wedding

10876 次点击
所在节点    分享创造
93 条回复
zjqzxc
2017-10-23 08:46:27 +08:00
类似的东西在人人网还活着的时候就有了。。
tongz
2017-10-23 08:47:00 +08:00
非常 nice,已 star !
bear2017
2017-10-23 09:10:33 +08:00
很 cool,能设计自己的婚礼,这算是程序员的浪漫了吧。
看楼主是想给宝宝取个比较有文化涵养(惊艳)的名字吧,女孩取名看《诗经》,男孩取名看《楚辞》。认真脸.jpg
或者去知乎搜有《有哪些惊艳到你的名字》


比如叫梅若华,梅秋水。开玩笑啦
newbieo0O
2017-10-23 09:11:35 +08:00
@iammapping 梅川酷子
yingfengi
2017-10-23 09:11:45 +08:00
拼接屏有分辨率啊,系统集成路过。。。
yingfengi
2017-10-23 09:15:24 +08:00
关于取名字,女《诗经》男《楚辞》
newbieo0O
2017-10-23 09:16:24 +08:00
正经的:女娃叫梅花
gamexg
2017-10-23 09:27:43 +08:00
@yingfengi +1 第一次配置屏幕时必须输入像素尺寸的,软件不知道屏幕实际尺寸,只知道像素尺寸。
可以自己数一下一个箱体有多少灯组,乘以箱体数量就是整个屏幕分辨率。
如果 led 软件还是默认密码,也可以进配置查看尺寸。
luozisha
2017-10-23 09:28:33 +08:00
梅琛,梅琳
kinwa
2017-10-23 09:39:42 +08:00
有个女同事叫梅瑰,
prozhong
2017-10-23 10:07:03 +08:00
人多的话 wifi 或者运营商的网络可能会便秘……
privil
2017-10-23 10:10:47 +08:00
梅露露啊!星辰小魔女梅露露!!!
amon
2017-10-23 10:17:34 +08:00
梅威瑟
梅懋秉
fhefh
2017-10-23 10:22:15 +08:00
梅依依
crossoverJie
2017-10-23 10:23:19 +08:00
已经 star,结婚时想不出更好的点子可以试试这个。
4074
2017-10-23 10:31:15 +08:00
梅雨
raptor
2017-10-23 10:33:00 +08:00
我上次结婚的时候搞过类似的花头,最后还不是离婚。供参考
yylzcom
2017-10-23 10:54:04 +08:00
梅希
梅熙
anyele
2017-10-23 10:54:04 +08:00
@raptor #37 兄弟心酸啊
ssoftlns
2017-10-23 10:58:54 +08:00
@iammapping 梅超疯 梅瑰金

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/399784

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX