Twitter連動アンケートアプリを作ってみた

質問箱みたいなTwitter連動アプリを作ってみたくて、アンケート投稿アプリを作ってみました。
宣伝も兼ねて使用したライブラリや苦労した点などを公開します。

できあがったもの

キキタイ？

https://kikit.ai

キキタイことをアンケートにしよう💕
キキタイ？はカンタンにTwitterアンケートが作成できるサービスです🔅

Twitterの投票より少しだけ色んなことができます。
・私のあだ名を決めて💓
・どっちのコーデがいい❓
・写真で一言💡（大喜利）

今すぐアンケートを作成しよう⬇️https://t.co/3yh22A2FrR

— キキタイ？ (@kikit_ai) 2018年12月24日

背景

質問箱みたいなTwitter連動アプリが、どれくらいの期間で作れるかやってみたかったのです。
結果的には、本業の合間にコツコツ作って、約1ヶ月もかかりました。
シンプルにするつもりが、結局多機能になってしまったのが反省点です。
とはいえ、アンケート機能はTwitterにもあるので、差別化するためには多機能にするしかないという悪循環でした。

サービス名について

環境

ベタなLAMP環境です。ConohaでVPSを借りました。
・CentOS7
・Apache2.4
・MySQL5.7
・PHP7.2

フレームワークなど

PHPやJSのフレームワークは使ってません。
この程度の一人プロジェクトなら使わない方が早いと思ってます。

PHP

• Twig
  • https://twig.symfony.com/
  • Symfonyで使われているテンプレートエンジンです。シンプルで融通が利くので気に入ってます。
• Twitter API
  • 公式のやつです。

JavaScript

• jquery
• jquery-confirm
  • https://craftpip.github.io/jquery-confirm/
  • アラートや確認ダイアログを出すのに使っています。
• JsRender
  • https://www.jsviews.com/
  • JS側のシンプルなテンプレートエンジンです。JS内では極力htmlを組み立てないようにしています。
• fancyBox
  • http://fancyapps.com/fancybox/3/
  • 画像のライトボックスです。スマホでも気持ちよく動くので気に入っています。
  • ライセンスは買いましたが、買ったことをどう提示すればいいのか謎です。
• Mega pixel image rendering library
  • https://github.com/stomita/ios-imagefile-megapixel
  • 画像アップロードの際に、画像を圧縮するのに使っています。
• exif.js
  • https://github.com/exif-js/exif-js
  • スマホからの画像が勝手に回転しないようにしています。
• html2canvas
  • https://html2canvas.hertzen.com/
  • 今回、Twitter投稿用に画像を生成していますが、PHP側で画像生成するのが面倒だったので、JS側で作成してアップロードしています。
• AutoSize
  • http://www.jacklmoore.com/autosize
  • テキストエリアの高さを自動的に広げるのに使っています。

他

• Google Font
  • 全体的にかわいくしたかったので、M PLUS Roundedフォントを使っています。
• Font Awesome
  • Webフォントを使った、いけてるアイコン集です。
  • これを使ってマテリアルデザインにするだけで、ちゃんとしたデザインぽくなるのがいいですね。
  • Proライセンスを買いました。

レスポンシブ対応について

特別なライブラリは使用していません。
基本的には、CSSのメディアクエリを使って、横800以上の場合は、メインの幅を800に、横800より下の場合は、メインの幅を100%にしています。

細かいレイアウト調整が必要な、質問テーマの表示については、横1200固定でレイアウトして、表示時にJSでzoomをかけています。

苦労した点

iOSのsafariにハメられました。
自分のメイン端末はAndroidで、サブで使ってるiPhoneSEも、Chromeを使ってたので気付かなかった・・。
html2Canvas周りでハマりまくったので、結果的にはサーバーサイドで画像生成した方がよかったかもしれない。

一応、ハマった点を書いておきます。

• CSSのzoomが効かない場合がある
  • 要素全体にzoomをかけても、中の要素のフォントサイズにzoomが効かなかった。
  • 中の要素にzoom:0.999とすることで回避できた
• html2Canvasをすると、fontawesomeのアイコンが消える
  • beforeクエリが無視される？
  • &xfXXX;のように、文字コードを直接書くことで回避
• fontサイズが色々おかしい
  • fontSize: "-=1px"とやっても、なぜか拡大される場合がある。
  • -webkit-text-size-adjust: noneを入れても回避できなかった。

これから

なんとかサービスインまでこぎつけましたが、ここからどう広めていけばいいのかが課題です。。
普通にSEOしたところで、メインターゲットがTwitterユーザーなので、あんまり意味なさそう。Twitter SEOってどうすればいいのだろう。
Twitter広告を出すか、DMなりで宣伝していくしかないですかね。。